import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { requestPinReset, verifyPinReset } from "@/lib/pin.functions";
import { useAppSettings } from "@/hooks/useAppSettings";
import { KeyRound, Loader2, Mail } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/forgot-pin")({
  component: ForgotPinPage,
});

function ForgotPinPage() {
  const { settings } = useAppSettings();
  const req = useServerFn(requestPinReset);
  const ver = useServerFn(verifyPinReset);
  const nav = useNavigate();
  const [step, setStep] = useState<1 | 2>(1);
  const [phone, setPhone] = useState("");
  const [masked, setMasked] = useState("");
  const [code, setCode] = useState("");
  const [newPin, setNewPin] = useState("");
  const [conf, setConf] = useState("");
  const [busy, setBusy] = useState(false);

  const sendCode = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    try {
      const r = await req({ data: { phone } });
      setMasked(r.masked_email);
      setStep(2);
      toast.success("কোড পাঠানো হয়েছে");
    } catch (e: any) { toast.error(e?.message ?? "কোড পাঠানো যায়নি"); }
    finally { setBusy(false); }
  };

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (newPin !== conf) return toast.error("পিন মিলছে না");
    setBusy(true);
    try {
      await ver({ data: { phone, code, newPin } });
      toast.success("পিন পুনঃস্থাপন সফল! এখন লগইন করুন।");
      nav({ to: "/auth", replace: true });
    } catch (e: any) { toast.error(e?.message ?? "ব্যর্থ"); }
    finally { setBusy(false); }
  };

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-6">
      <div className="w-full max-w-sm">
        <div className="text-center mb-6">
          <div className="h-14 w-14 mx-auto rounded-2xl grid place-items-center text-primary-foreground"
            style={{ background: "var(--gradient-primary)" }}>
            <KeyRound className="h-7 w-7" />
          </div>
          <h1 className="mt-3 text-lg font-bold">{settings.app_name} — পিন রিসেট</h1>
          <p className="text-xs text-muted-foreground mt-1">
            {step === 1 ? "আপনার নিবন্ধিত ফোন নম্বর দিন" : `${masked} — এ পাঠানো কোড দিন`}
          </p>
        </div>

        {step === 1 && (
          <form onSubmit={sendCode} className="bg-card border rounded-2xl p-5 space-y-3">
            <div>
              <label className="text-xs font-semibold text-muted-foreground">ফোন নম্বর</label>
              <input
                inputMode="numeric" maxLength={11}
                value={phone}
                onChange={(e) => setPhone(e.target.value.replace(/\D/g, "").slice(0, 11))}
                placeholder="01XXXXXXXXX"
                className="mt-1 w-full h-12 px-4 rounded-xl border border-input bg-background text-sm"
              />
            </div>
            <button disabled={busy || phone.length !== 11}
              className="w-full h-12 rounded-full font-bold text-primary-foreground disabled:opacity-50 flex items-center justify-center gap-2"
              style={{ background: "var(--gradient-primary)" }}>
              {busy && <Loader2 className="h-4 w-4 animate-spin" />}
              <Mail className="h-4 w-4" /> কোড পাঠান
            </button>
          </form>
        )}

        {step === 2 && (
          <form onSubmit={submit} className="bg-card border rounded-2xl p-5 space-y-3">
            <div>
              <label className="text-xs font-semibold text-muted-foreground">৬-সংখ্যার কোড</label>
              <input
                inputMode="numeric" maxLength={6}
                value={code}
                onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
                placeholder="• • • • • •"
                className="mt-1 w-full h-12 px-4 rounded-xl border border-input bg-background text-center text-xl tracking-[0.4em]"
              />
            </div>
            <PinField label="নতুন পিন" value={newPin} onChange={setNewPin} />
            <PinField label="কনফার্ম নতুন পিন" value={conf} onChange={setConf} />
            <button disabled={busy || code.length !== 6 || newPin.length !== 5 || conf.length !== 5}
              className="w-full h-12 rounded-full font-bold text-primary-foreground disabled:opacity-50 flex items-center justify-center gap-2"
              style={{ background: "var(--gradient-primary)" }}>
              {busy && <Loader2 className="h-4 w-4 animate-spin" />}
              পিন পুনঃস্থাপন করুন
            </button>
            <button type="button" onClick={() => setStep(1)} className="w-full text-xs text-muted-foreground mt-2">
              ← আবার কোড পাঠান
            </button>
          </form>
        )}

        <p className="text-center text-xs text-muted-foreground mt-4">
          <Link to="/auth" className="text-primary font-semibold">লগইনে ফিরে যান</Link>
        </p>
      </div>
    </div>
  );
}

function PinField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
  return (
    <div>
      <label className="text-xs font-semibold text-muted-foreground">{label}</label>
      <input
        type="password" inputMode="numeric" maxLength={5}
        value={value}
        onChange={(e) => onChange(e.target.value.replace(/\D/g, "").slice(0, 5))}
        placeholder="• • • • •"
        className="mt-1 w-full h-12 px-4 rounded-xl border border-input bg-background text-center text-xl tracking-[0.5em]"
      />
    </div>
  );
}