import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { useQuery } from "@tanstack/react-query";
import { ActionScreen } from "@/components/bkash/ActionScreen";
import {
  changeMyPin, getMyRecoveryEmail, setMyRecoveryEmail,
  requestPinReset, verifyPinReset,
} from "@/lib/pin.functions";
import { Shield, Mail, KeyRound, Loader2, CheckCircle2 } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/_authenticated/change-pin")({
  component: ChangePinPage,
});

function ChangePinPage() {
  return (
    <ActionScreen title="নিরাপত্তা ও পিন" subtitle="আপনার পিন ও রিকভারি Gmail ব্যবস্থাপনা করুন">
      <div className="space-y-4">
        <ChangePinCard />
        <RecoveryEmailCard />
        <div className="text-center">
          <Link to="/forgot-pin" className="text-sm text-primary font-semibold">
            পিন ভুলে গেছেন?
          </Link>
        </div>
      </div>
    </ActionScreen>
  );
}

function ChangePinCard() {
  const change = useServerFn(changeMyPin);
  const [oldPin, setOld] = useState("");
  const [newPin, setNew] = useState("");
  const [conf, setConf] = useState("");
  const [busy, setBusy] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (newPin !== conf) return toast.error("নতুন পিন ও কনফার্ম পিন মিলছে না");
    setBusy(true);
    try {
      await change({ data: { oldPin, newPin } });
      toast.success("পিন সফলভাবে পরিবর্তন হয়েছে");
      setOld(""); setNew(""); setConf("");
    } catch (e: any) {
      toast.error(e?.message ?? "পরিবর্তন ব্যর্থ");
    } finally { setBusy(false); }
  };

  return (
    <form onSubmit={submit} className="bg-card border rounded-2xl p-5 space-y-3">
      <div className="flex items-center gap-2">
        <div className="h-9 w-9 rounded-lg grid place-items-center text-primary-foreground" style={{ background: "var(--gradient-primary)" }}>
          <KeyRound className="h-5 w-5" />
        </div>
        <div>
          <p className="font-bold text-sm">পিন পরিবর্তন করুন</p>
          <p className="text-[11px] text-muted-foreground">আগের পিন দিয়ে নতুন ৫-সংখ্যার পিন সেট করুন</p>
        </div>
      </div>
      <PinInput label="বর্তমান পিন" value={oldPin} onChange={setOld} />
      <PinInput label="নতুন পিন" value={newPin} onChange={setNew} />
      <PinInput label="কনফার্ম নতুন পিন" value={conf} onChange={setConf} />
      <button
        disabled={busy || oldPin.length !== 5 || newPin.length !== 5 || conf.length !== 5}
        className="w-full h-11 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>
    </form>
  );
}

function RecoveryEmailCard() {
  const getFn = useServerFn(getMyRecoveryEmail);
  const setFn = useServerFn(setMyRecoveryEmail);
  const q = useQuery({ queryKey: ["recovery-email"], queryFn: () => getFn() });
  const [email, setEmail] = useState("");
  const [pin, setPin] = useState("");
  const [busy, setBusy] = useState(false);

  useEffect(() => { if (q.data?.recovery_email) setEmail(q.data.recovery_email); }, [q.data]);

  const save = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    try {
      await setFn({ data: { email: email.trim(), pin } });
      toast.success("রিকভারি Gmail সংরক্ষণ হয়েছে");
      setPin("");
      q.refetch();
    } catch (e: any) { toast.error(e?.message ?? "সংরক্ষণ ব্যর্থ"); }
    finally { setBusy(false); }
  };

  return (
    <form onSubmit={save} className="bg-card border rounded-2xl p-5 space-y-3">
      <div className="flex items-center gap-2">
        <div className="h-9 w-9 rounded-lg grid place-items-center text-primary-foreground" style={{ background: "var(--gradient-primary)" }}>
          <Mail className="h-5 w-5" />
        </div>
        <div>
          <p className="font-bold text-sm">রিকভারি Gmail</p>
          <p className="text-[11px] text-muted-foreground">পিন ভুলে গেলে এই ইমেইলে কোড পাঠানো হবে</p>
        </div>
      </div>
      {q.data?.recovery_email && (
        <div className="flex items-center gap-2 text-xs text-success bg-success/5 rounded-lg px-3 py-2">
          <CheckCircle2 className="h-4 w-4" /> বর্তমান: {q.data.recovery_email}
        </div>
      )}
      <div>
        <label className="text-xs font-semibold text-muted-foreground">Gmail ঠিকানা</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="you@gmail.com"
          className="mt-1 w-full h-11 px-3 rounded-xl border border-input bg-background text-sm"
        />
      </div>
      <PinInput label="নিশ্চিতকরণে বর্তমান পিন" value={pin} onChange={setPin} />
      <button
        disabled={busy || !email || pin.length !== 5}
        className="w-full h-11 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>
    </form>
  );
}

function PinInput({ 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>
  );
}