"use client";
import { useState } from "react";
import { Zap, Smartphone, QrCode, Landmark, Plus, Pencil, Trash2, Upload, CheckCircle2 } from "lucide-react";
import { Alert, Field, Modal, useAction, call } from "../ui";

const Toggle = ({ on, set, label }: { on: boolean; set: (v: boolean) => void; label: string }) => <label className="flex cursor-pointer items-center gap-2.5 text-sm font-medium"><button type="button" role="switch" aria-checked={on} onClick={() => set(!on)} className={`relative h-6 w-11 rounded-full transition ${on ? "bg-brand" : "bg-slate-300"}`}><span className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition ${on ? "left-[22px]" : "left-0.5"}`} /></button>{label}</label>;

function Card({ name, title, sub, icon: I, color, cfg, children, fields, base, test }: any) {
  const { run, busy, error, msg, setMsg } = useAction(); const [v, setV] = useState<any>({ ...cfg });
  const set = (k: string, x: any) => setV((s: any) => ({ ...s, [k]: x }));
  return (
    <div className="card p-6">
      <div className="mb-4 flex items-start justify-between gap-3"><div className="flex items-center gap-3"><span className="grid h-11 w-11 place-items-center rounded-xl text-white" style={{ background: color }}><I size={20} /></span><div><h3 className="font-bold">{title}</h3><p className="text-xs text-slate-500">{sub}</p></div></div><Toggle on={!!v.enabled} set={(x) => set("enabled", x)} label={v.enabled ? "Enabled" : "Disabled"} /></div>
      {v.sandbox !== undefined && <div className="mb-4"><Toggle on={!!v.sandbox} set={(x) => set("sandbox", x)} label="Sandbox / test mode" /></div>}
      {name === "bkash" && <div className="mb-4"><Toggle on={!!v.tokenized} set={(x) => set("tokenized", x)} label="Tokenized (save customer agreement for one-tap pay)" /></div>}
      <div className="grid gap-3">{fields?.map((f: any) => <Field key={f.k} label={f.label} hint={f.secret && cfg["has_" + f.k] ? "Saved ✔ — leave blank to keep the current value" : f.hint}>
        {f.area ? <textarea className="input min-h-20 font-mono text-xs" placeholder={f.secret && cfg["has_" + f.k] ? "••••••••" : ""} value={v[f.k] ?? ""} onChange={(e) => set(f.k, e.target.value)} /> : <input className="input" type={f.secret ? "password" : "text"} autoComplete="off" placeholder={f.secret && cfg["has_" + f.k] ? "••••••••" : ""} value={v[f.k] ?? ""} onChange={(e) => set(f.k, e.target.value)} />}</Field>)}</div>
      {children?.(v, set)}
      {base && <div className="mt-3 rounded-xl bg-slate-50 p-3 text-xs text-slate-500">Callback URL to whitelist at {title}:<code className="mt-1 block break-all font-mono text-[11px] text-ink">{base}</code></div>}
      <div className="mt-4"><Alert>{error}</Alert><Alert kind="ok">{msg}</Alert></div>
      <div className="mt-4 flex gap-2"><button className="btn btn-primary btn-sm" disabled={busy} onClick={async () => { const { has_x, ...rest } = v; if (await run("/api/dashboard/gateway", { action: "save", data: { name, config: rest } })) { setMsg("Saved — secrets are encrypted at rest."); setV((s: any) => { const n = { ...s }; (fields || []).forEach((f: any) => f.secret && (n[f.k] = "")); return n; }); } }}>Save</button>
        {test && <button className="btn btn-ghost btn-sm" disabled={busy} onClick={() => run("/api/dashboard/gateway", { action: "test", data: { name } }, { refresh: false })}>Test connection</button>}</div>
    </div>
  );
}

export function GatewayManager({ cfg, accounts, origin }: { cfg: any; accounts: any[]; origin: string }) {
  const [edit, setEdit] = useState<any>(null); const { run } = useAction();
  return (
    <div className="space-y-5">
      <div className="grid gap-5 xl:grid-cols-2">
        <Card name="bkash" title="bKash — Tokenized" sub="Checkout URL + saved agreement (one-tap)" icon={Zap} color="#e2136e" cfg={cfg.bkash} test base={`${origin}/api/pay/bkash/callback`}
          fields={[{ k: "appKey", label: "App key", secret: true }, { k: "appSecret", label: "App secret", secret: true }, { k: "username", label: "Username", secret: true }, { k: "password", label: "Password", secret: true }]} />
        <Card name="nagad" title="Nagad" sub="Merchant payment gateway (RSA-signed)" icon={Smartphone} color="#f6921e" cfg={cfg.nagad} test base={`${origin}/api/pay/nagad/callback`}
          fields={[{ k: "merchantId", label: "Merchant ID" }, { k: "merchantNumber", label: "Merchant number" }, { k: "pgPublicKey", label: "Nagad PG public key", area: true }, { k: "merchantPrivateKey", label: "Merchant private key", area: true, secret: true }]} />
        <Card name="bangla_qr" title="Bangla QR — Tokenized" sub="Unique dynamic QR per order + signed bank/PSP webhook → auto-activation (TxnID form is the fallback)" icon={QrCode} color="#0f766e" cfg={cfg.bangla_qr} base={`${origin}/api/pay/qr/webhook`}
          fields={[{ k: "merchant", label: "Merchant / account name" }, { k: "merchantId", label: "Dynamic QR: merchant ID / account (leave blank for static QR only)" }, { k: "merchantCity", label: "Merchant city (e.g. Dhaka)" }, { k: "mcc", label: "MCC (default 5734)" }, { k: "webhookSecret", label: "Webhook signing secret (HMAC-SHA256)", secret: true }, { k: "payload", label: "QR payload (EMV string) — or upload an image below", area: true }, { k: "instructions", label: "Customer instructions" }]}>
          {(v: any, set: any) => <div className="mt-3 flex items-center gap-3"><label className="btn btn-ghost btn-sm cursor-pointer"><Upload size={14} />Upload QR image<input type="file" accept="image/png,image/jpeg,image/webp" hidden onChange={async (e) => { const f = e.target.files?.[0]; if (!f) return; const fd = new FormData(); fd.append("file", f); const r = await fetch("/api/upload", { method: "POST", body: fd }); const d = await r.json(); r.ok ? set("image", d.url) : alert(d.error); }} /></label>
            {v.image && <>{/* eslint-disable-next-line @next/next/no-img-element */}<img src={v.image} alt="QR" className="h-16 w-16 rounded-lg border" /><button type="button" className="text-xs text-rose-600" onClick={() => set("image", "")}>remove</button></>}</div>}
        </Card>
        <Card name="manual" title="Manual payment" sub="Customers send money to your numbers and submit TxnID" icon={Landmark} color="#2563eb" cfg={cfg.manual} />
      </div>

      <div className="card p-6"><div className="mb-4 flex items-center justify-between"><div><h3 className="font-bold">Manual payment numbers</h3><p className="text-xs text-slate-500">Shown to customers at checkout (type + number). Approving a submitted payment activates their product automatically.</p></div>
        <button className="btn btn-primary btn-sm" onClick={() => setEdit({ provider: "bkash", kind: "Personal", active: true, sort: accounts.length })}><Plus size={14} />Add number</button></div>
        <div className="scroll-x"><table className="tbl min-w-[560px]"><thead><tr><th>Type</th><th>Label</th><th>Number</th><th>Kind</th><th>Status</th><th /></tr></thead><tbody>
          {accounts.map((a) => <tr key={a.id}><td className="font-semibold capitalize">{a.provider}</td><td>{a.label}</td><td className="font-mono">{a.number}</td><td>{a.kind}</td><td><span className={`badge ${a.active ? "ok" : "gray"}`}>{a.active ? "Active" : "Hidden"}</span></td>
            <td className="text-right"><button className="btn btn-ghost btn-sm" onClick={() => setEdit(a)}><Pencil size={13} /></button> <button className="btn btn-danger btn-sm" onClick={() => run("/api/dashboard/account", { action: "delete", data: { id: a.id } }, { confirm: "Delete this number?" })}><Trash2 size={13} /></button></td></tr>)}</tbody></table></div></div>
      {edit && <AccountModal a={edit} onClose={() => setEdit(null)} />}
    </div>
  );
}
function AccountModal({ a, onClose }: { a: any; onClose: () => void }) {
  const { run, busy, error } = useAction(); const [v, setV] = useState(a); const set = (k: string, x: any) => setV({ ...v, [k]: x });
  return <Modal open onClose={onClose} title={a.id ? "Edit number" : "Add payment number"}><form className="space-y-3" onSubmit={async (e) => { e.preventDefault(); if (await run("/api/dashboard/account", { action: "save", data: v })) onClose(); }}>
    <div className="grid gap-3 sm:grid-cols-2"><Field label="Payment type"><select className="input" value={v.provider} onChange={(e) => set("provider", e.target.value)}>{["bkash", "nagad", "rocket", "upay", "bank"].map((p) => <option key={p}>{p}</option>)}</select></Field><Field label="Account kind"><select className="input" value={v.kind} onChange={(e) => set("kind", e.target.value)}>{["Personal", "Agent", "Merchant", "Bank account"].map((p) => <option key={p}>{p}</option>)}</select></Field></div>
    <Field label="Label"><input className="input" required value={v.label || ""} onChange={(e) => set("label", e.target.value)} placeholder="bKash Personal" /></Field><Field label="Number / account"><input className="input font-mono" required value={v.number || ""} onChange={(e) => set("number", e.target.value)} /></Field>
    <Field label="Instructions"><input className="input" value={v.instructions || ""} onChange={(e) => set("instructions", e.target.value)} /></Field>
    <label className="flex items-center gap-2 text-sm font-medium"><input type="checkbox" className="h-4 w-4 accent-blue-600" checked={!!v.active} onChange={(e) => set("active", e.target.checked)} />Visible at checkout</label><Alert>{error}</Alert><button className="btn btn-primary w-full" disabled={busy}>Save</button></form></Modal>;
}