"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Copy, Check, ShieldCheck, Smartphone, QrCode, Landmark, Zap } from "lucide-react";
import { Alert, Field, call } from "../ui";
import { money } from "@/lib/format";

type M = "bkash" | "nagad" | "bangla_qr" | "manual";
export function CheckoutClient({ plan, billing, order, methods, accounts, qr, user }: any) {
  const router = useRouter();
  const amount = order?.amount ?? (billing === "year" && plan.year_price ? plan.year_price : plan.price);
  const avail: { id: M; name: string; sub: string; icon: any; color: string }[] = [
    methods.bkash && { id: "bkash", name: "bKash", sub: methods.bkashTokenized ? "Tokenized one-tap payment" : "Pay with bKash", icon: Zap, color: "#e2136e" },
    methods.nagad && { id: "nagad", name: "Nagad", sub: "Pay with Nagad", icon: Smartphone, color: "#f6921e" },
    methods.bangla_qr && { id: "bangla_qr", name: "Bangla QR", sub: "Scan with any bank / MFS app", icon: QrCode, color: "#0f766e" },
    methods.manual && { id: "manual", name: "Manual transfer", sub: "Send money, submit TxnID", icon: Landmark, color: "#2563eb" },
  ].filter(Boolean) as any;
  const [m, setM] = useState<M | null>(avail[0]?.id ?? null);
  const [orderId, setOrderId] = useState<number | null>(order?.id ?? null);
  const [busy, setBusy] = useState(false), [err, setErr] = useState(""), [copied, setCopied] = useState("");
  const [save, setSave] = useState(true);
  const [f, setF] = useState({ provider: accounts[0]?.provider || "bkash", sender: "", trxId: "", amount: String(amount), accountId: accounts[0]?.id || 0 });

  const ensureOrder = async () => {
    if (orderId) return orderId;
    const r = await call("/api/orders", { planId: plan.id, billing });
    if (!r.ok) { setErr(r.error); return null; }
    setOrderId(r.data.id); return r.data.id as number;
  };
  const payOnline = async () => {
    setBusy(true); setErr("");
    const id = await ensureOrder(); if (!id) return setBusy(false);
    const r = await call("/api/pay/start", { orderId: id, gateway: m, save });
    if (!r.ok) { setErr(r.error); return setBusy(false); }
    window.location.href = r.data.url;
  };
  const submitManual = async (e: React.FormEvent) => {
    e.preventDefault(); setBusy(true); setErr("");
    const id = await ensureOrder(); if (!id) return setBusy(false);
    const r = await call("/api/pay/manual", { orderId: id, gateway: m, accountId: m === "manual" ? Number(f.accountId) || undefined : undefined, provider: m === "manual" ? f.provider : "qr", sender: f.sender, trxId: f.trxId, amount: Number(f.amount) });
    setBusy(false);
    if (!r.ok) return setErr(r.error);
    router.push(`/portal/orders/${id}?pay=review`);
  };
  const [dq, setDq] = useState<{ token: string; image: string; expires: number } | null>(null);
  const genQr = async () => { setBusy(true); setErr(""); const id = await ensureOrder(); if (!id) return setBusy(false); const r = await call("/api/pay/qr/start", { orderId: id }); setBusy(false); if (!r.ok) return setErr(r.error); setDq(r.data); };
  useEffect(() => { if (m === "bangla_qr" && qr.dynamic && !dq && !busy) genQr(); }, [m]); // eslint-disable-line
  useEffect(() => { if (!dq || !orderId) return; const t = setInterval(async () => { const r = await fetch(`/api/pay/qr/status?token=${dq.token}`, { cache: "no-store" }).then((x) => x.json()).catch(() => null); if (r?.status === "succeeded") router.push(`/portal/orders/${orderId}?pay=ok`); }, 4000); return () => clearInterval(t); }, [dq, orderId, router]);
  const copy = (t: string) => { navigator.clipboard?.writeText(t); setCopied(t); setTimeout(() => setCopied(""), 1500); };
  const acc = accounts.find((a: any) => a.id === Number(f.accountId));

  return (
    <div className="container-x pb-24 pt-12 sm:pt-16">
      <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">Checkout</h1>
      <div className="mt-8 grid gap-6 lg:grid-cols-5">
        <div className="space-y-5 lg:col-span-3">
          {!avail.length && <Alert>No payment method is enabled yet. Please contact support.</Alert>}
          <div className="grid gap-3 sm:grid-cols-2" role="radiogroup" aria-label="Payment method">
            {avail.map((a) => (
              <button key={a.id} role="radio" aria-checked={m === a.id} onClick={() => { setM(a.id); setErr(""); }} className={`card flex items-center gap-3 p-4 text-left transition ${m === a.id ? "!border-brand ring-4 ring-blue-100" : "hover:border-slate-300"}`}>
                <span className="grid h-11 w-11 place-items-center rounded-xl text-white" style={{ background: a.color }}><a.icon size={20} /></span>
                <span><b className="block">{a.name}</b><span className="text-xs text-slate-500">{a.sub}</span></span>
              </button>
            ))}
          </div>

          {(m === "bkash" || m === "nagad") && (
            <div className="card space-y-4 p-6">
              <p className="text-sm text-slate-600">You will be redirected to {m === "bkash" ? "bKash" : "Nagad"} to approve <b>{money(amount)}</b>. Your plan activates automatically once the payment is confirmed.</p>
              {m === "bkash" && methods.bkashTokenized && <label className="flex items-start gap-2.5 text-sm"><input type="checkbox" checked={save} onChange={(e) => setSave(e.target.checked)} className="mt-1 h-4 w-4 accent-blue-600" /><span><b>Save my bKash for one-tap payments</b><br /><span className="text-xs text-slate-500">Tokenized agreement — we never see your PIN or wallet number.</span></span></label>}
              <Alert>{err}</Alert>
              <button className="btn btn-primary btn-lg w-full" disabled={busy} onClick={payOnline}>{busy ? "Redirecting…" : `Pay ${money(amount)} with ${m === "bkash" ? "bKash" : "Nagad"}`}</button>
            </div>
          )}

          {(m === "manual" || m === "bangla_qr") && (
            <form onSubmit={submitManual} className="card space-y-5 p-6">
              {m === "bangla_qr" ? (
                <div className="flex flex-col items-center gap-3 rounded-2xl bg-slate-50 p-5 text-center">
                  {qr.dynamic ? (dq ? <><img src={dq.image} alt="Bangla QR for this order" className="h-56 w-56 rounded-xl bg-white p-2 shadow" /><p className="font-mono text-xs text-slate-500">Ref {dq.token} · {money(amount)}</p><p className="flex items-center gap-2 text-xs font-medium text-emerald-700"><span className="dot-live" />Waiting for payment — this page updates automatically</p><button type="button" className="text-xs font-semibold text-brand" onClick={() => { setDq(null); genQr(); }}>New QR</button></> : <p className="text-sm text-slate-500">Generating your secure QR…</p>) : qr.image ? <img src={qr.image} alt="Bangla QR" className="h-56 w-56 rounded-xl bg-white p-2 shadow" /> : <p className="text-sm text-slate-500">QR not configured.</p>}
                  {qr.merchant && <b>{qr.merchant}</b>}<p className="max-w-sm text-xs text-slate-500">{qr.instructions}</p>
                </div>
              ) : (
                <div className="space-y-3">
                  <div className="flex flex-wrap gap-2">{accounts.map((a: any) => <button type="button" key={a.id} onClick={() => setF({ ...f, accountId: a.id, provider: a.provider })} className={`btn btn-sm ${Number(f.accountId) === a.id ? "btn-primary" : "btn-ghost"}`}>{a.label}</button>)}</div>
                  {acc ? (
                    <div className="rounded-2xl border border-blue-100 bg-blue-50/60 p-4">
                      <div className="text-xs font-semibold uppercase tracking-wider text-slate-500">Send {money(amount)} to · {acc.kind}</div>
                      <div className="mt-1 flex items-center justify-between gap-3"><span className="font-mono text-2xl font-bold tracking-wider">{acc.number}</span>
                        <button type="button" className="btn btn-ghost btn-sm" onClick={() => copy(acc.number)}>{copied === acc.number ? <Check size={14} /> : <Copy size={14} />}{copied === acc.number ? "Copied" : "Copy"}</button></div>
                      {acc.instructions && <p className="mt-2 text-xs text-slate-500">{acc.instructions}</p>}
                    </div>) : <Alert>No manual payment account configured.</Alert>}
                </div>
              )}
              <div className="grid gap-4 sm:grid-cols-2">
                <Field label="Your sending number"><input className="input" required inputMode="tel" placeholder="01XXXXXXXXX" value={f.sender} onChange={(e) => setF({ ...f, sender: e.target.value })} /></Field>
                <Field label="Transaction ID (TxnID)"><input className="input font-mono uppercase" required minLength={6} maxLength={24} placeholder="e.g. 9H7K2L4M1P" value={f.trxId} onChange={(e) => setF({ ...f, trxId: e.target.value.toUpperCase() })} /></Field>
                <Field label="Amount sent (৳)" hint={`Order total ${money(amount)}`}><input className="input" required type="number" min={1} value={f.amount} onChange={(e) => setF({ ...f, amount: e.target.value })} /></Field>
                {m === "manual" && <Field label="Payment type"><select className="input" value={f.provider} onChange={(e) => setF({ ...f, provider: e.target.value })}>{Array.from(new Set(accounts.map((a: any) => a.provider))).map((p: any) => <option key={p} value={p}>{p}</option>)}</select></Field>}
              </div>
              <Alert>{err}</Alert>
              <button className="btn btn-primary btn-lg w-full" disabled={busy}>{busy ? "Submitting…" : "Submit payment for verification"}</button>
              <p className="text-center text-xs text-slate-400">An admin verifies your transaction. Once approved your product activates automatically in your portal.</p>
            </form>
          )}
        </div>

        <aside className="lg:col-span-2"><div className="card sticky top-24 p-6">
          <div className="text-xs font-semibold uppercase tracking-wider text-slate-400">Order summary</div>
          <div className="mt-4 flex items-start gap-3"><span className="grid h-11 w-11 place-items-center rounded-xl text-white" style={{ background: plan.color }}><Zap size={20} /></span>
            <div><b>{plan.product}</b><div className="text-sm text-slate-500">{plan.name} · {billing === "year" ? "Yearly" : billing === "once" ? "One-time" : "Monthly"}</div></div></div>
          <dl className="mt-5 space-y-2 border-t border-slate-100 pt-4 text-sm"><div className="flex justify-between"><dt className="text-slate-500">Customer</dt><dd className="font-medium">{user.name}</dd></div>
            <div className="flex justify-between text-lg"><dt className="font-semibold">Total</dt><dd className="font-extrabold">{money(amount)}</dd></div></dl>
          <p className="mt-4 flex items-center gap-2 text-xs text-slate-500"><ShieldCheck size={15} className="text-emerald-600" />Secure checkout — payments are verified server-side.</p>
        </div></aside>
      </div>
    </div>
  );
}