// components/account/ConfirmIdentity.tsx
"use client";
import { useState } from "react";

export default function ConfirmIdentity({
    defaultIdentifier,
    onSuccess,
}: {
    defaultIdentifier: string;            // prefill with username or email you show on the page
    onSuccess: () => void;                // called after re-auth succeeds
}) {
    const [open, setOpen] = useState(false);
    const [identifier, setIdentifier] = useState(defaultIdentifier);
    const [password, setPassword] = useState("");
    const [busy, setBusy] = useState(false);
    const [err, setErr] = useState<string | null>(null);

    async function submit() {
        setBusy(true);
        setErr(null);
        try {
            const res = await fetch("/api/auth/reconfirm", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                credentials: "include",
                body: JSON.stringify({ identifier, password }),
            });
            const j = await res.json().catch(() => ({}));
            if (!res.ok) throw new Error(j?.error || "Failed");
            setOpen(false);
            setPassword("");
            onSuccess(); // now do the sensitive call
        } catch (e: any) {
            setErr(e?.message || "Re-auth failed");
        } finally {
            setBusy(false);
        }
    }

    return (
        <>
        {/* wherever you need the step-up, render a button that opens this */}
        <button className="btn" onClick={() => setOpen(true)}>Confirm it’s you</button>

        {open && (
            <div className="fixed inset-0 bg-black/50 grid place-items-center">
            <div className="bg-card border rounded-lg p-4 w-full max-w-sm">
            <h3 className="font-semibold mb-2">Confirm it’s you</h3>
            <label className="block text-sm mb-1">Email or Username</label>
            <input className="input w-full mb-2" value={identifier} onChange={e=>setIdentifier(e.target.value)} />
            <label className="block text-sm mb-1">Password</label>
            <input className="input w-full mb-3" type="password" value={password} onChange={e=>setPassword(e.target.value)} />
            {err && <div className="text-red-600 text-sm mb-2">{err}</div>}
            <div className="flex gap-2 justify-end">
            <button className="btn" onClick={()=>setOpen(false)} disabled={busy}>Cancel</button>
            <button className="btn-primary" onClick={submit} disabled={busy}>{busy ? "Checking…" : "Continue"}</button>
            </div>
            </div>
            </div>
        )}
        </>
    );
}