"use client";
import { useState } from "react";
import { Upload, Send, Download, DatabaseBackup, Trash2, Save } from "lucide-react";
import { Alert, Field, call, useAction } from "../ui";
import { AUTOMATION_RULES } from "@/lib/resources";

export type CfgField = { key: string; label: string; type?: "text" | "password" | "number" | "bool" | "select" | "textarea" | "image" | "email"; options?: string[]; wide?: boolean; hint?: string };

export function SettingsForm({ cfgKey, fields, initial, title, sub }: { cfgKey: string; fields: CfgField[]; initial: any; title?: string; sub?: string }) {
  const { run, busy, error, msg } = useAction(); const [f, setF] = useState<any>(initial); const [up, setUp] = useState("");
  const set = (k: string, v: any) => setF((p: any) => ({ ...p, [k]: v }));
  const upload = async (k: string, file?: File) => { if (!file) return; setUp(k); const fd = new FormData(); fd.append("file", file); const r = await fetch("/api/upload", { method: "POST", body: fd }); const d = await r.json().catch(() => ({})); setUp(""); if (d.url) set(k, d.url); };
  return (
    <form className="m-card p-5" onSubmit={async (e) => { e.preventDefault(); await run(`/api/dashboard/cfg/${cfgKey}`, f); }}>
      {title && <div className="mb-4"><h3 className="font-semibold">{title}</h3>{sub && <p className="text-sm text-slate-500">{sub}</p>}</div>}
      <div className="grid gap-4 sm:grid-cols-2">{fields.map((x) => <div key={x.key} className={x.wide || x.type === "textarea" ? "sm:col-span-2" : ""}><Field label={x.label} hint={x.hint}>
        {x.type === "bool" ? <label className="flex items-center gap-2 py-2 text-sm"><input type="checkbox" checked={!!f[x.key]} onChange={(e) => set(x.key, e.target.checked)} />Enabled</label> :
          x.type === "select" ? <select className="m-input" value={f[x.key] ?? ""} onChange={(e) => set(x.key, e.target.value)}>{x.options!.map((o) => <option key={o}>{o}</option>)}</select> :
          x.type === "textarea" ? <textarea className="m-input min-h-24" value={f[x.key] ?? ""} onChange={(e) => set(x.key, e.target.value)} /> :
          x.type === "image" ? <div className="flex items-center gap-2"><input className="m-input" value={f[x.key] ?? ""} onChange={(e) => set(x.key, e.target.value)} placeholder="https://… or upload" />{f[x.key] && <img src={f[x.key]} alt="" className="h-9 w-9 rounded border object-contain" />}<label className="m-btn cursor-pointer"><Upload size={14} />{up === x.key ? "…" : "Upload"}<input type="file" accept="image/png,image/jpeg,image/webp" className="hidden" onChange={(e) => upload(x.key, e.target.files?.[0])} /></label></div> :
          <input className="m-input" type={x.type === "number" ? "number" : x.type === "password" ? "password" : x.type === "email" ? "email" : "text"} autoComplete={x.type === "password" ? "new-password" : "off"} value={f[x.key] ?? ""} onChange={(e) => set(x.key, e.target.value)} />}
      </Field></div>)}</div>
      <div className="mt-4 space-y-3"><Alert>{error}</Alert><Alert kind="ok">{msg}</Alert><button className="m-btn m-btn-primary" disabled={busy}><Save size={14} />{busy ? "Saving…" : "Save changes"}</button></div>
    </form>
  );
}

export function SendForm({ kind }: { kind: "email" | "sms" }) {
  const { run, busy, error, msg } = useAction(); const [f, setF] = useState({ to: "", subject: "", body: "", message: "" });
  return (
    <form className="m-card space-y-4 p-5" onSubmit={async (e) => { e.preventDefault(); await run(`/api/dashboard/send/${kind}`, f); }}>
      <h3 className="font-semibold">{kind === "email" ? "Compose email" : "Send SMS"}</h3>
      <Field label={kind === "email" ? "To (email)" : "To (mobile, e.g. 01XXXXXXXXX)"}><input className="m-input" required value={f.to} onChange={(e) => setF({ ...f, to: e.target.value })} /></Field>
      {kind === "email" ? <><Field label="Subject"><input className="m-input" required value={f.subject} onChange={(e) => setF({ ...f, subject: e.target.value })} /></Field><Field label="Message"><textarea className="m-input min-h-32" required value={f.body} onChange={(e) => setF({ ...f, body: e.target.value })} /></Field></> :
        <Field label="Message" hint={`${f.message.length}/160 characters per SMS`}><textarea className="m-input min-h-24" required maxLength={700} value={f.message} onChange={(e) => setF({ ...f, message: e.target.value })} /></Field>}
      <Alert>{error}</Alert><Alert kind="ok">{msg}</Alert><button className="m-btn m-btn-primary" disabled={busy}><Send size={14} />{busy ? "Sending…" : "Send"}</button>
    </form>
  );
}

export function AutomationPanel({ initial }: { initial: { master: boolean; rules: Record<string, boolean> } }) {
  const { run, error } = useAction(); const [s, setS] = useState(initial);
  const save = async (n: typeof s) => { setS(n); await run("/api/dashboard/cfg/automation", n, { refresh: false }); };
  return (
    <div className="m-card">
      <div className="flex items-center justify-between border-b border-slate-100 p-5"><div><h3 className="font-semibold">Master switch</h3><p className="text-sm text-slate-500">Turn every automation on or off at once. Messages are sent through your Email and SMS gateways.</p></div><Toggle on={s.master} onChange={(v) => save({ ...s, master: v })} /></div>
      <ul className={`divide-y divide-slate-100 ${s.master ? "" : "opacity-50"}`}>{AUTOMATION_RULES.map(([k, label]) => <li key={k} className="flex items-center justify-between gap-3 px-5 py-3.5"><span className="text-sm">{label}</span><Toggle on={s.rules[k] !== false} disabled={!s.master} onChange={(v) => save({ ...s, rules: { ...s.rules, [k]: v } })} /></li>)}</ul>
      {error && <div className="p-4"><Alert>{error}</Alert></div>}
    </div>
  );
}
export const Toggle = ({ on, onChange, disabled }: { on: boolean; onChange: (v: boolean) => void; disabled?: boolean }) => (
  <button type="button" role="switch" aria-checked={on} disabled={disabled} onClick={() => onChange(!on)} className={`relative h-6 w-11 shrink-0 rounded-full transition ${on ? "bg-blue-600" : "bg-slate-300"} disabled:cursor-not-allowed`}><span className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all ${on ? "left-[22px]" : "left-0.5"}`} /></button>);

export function VatCalc({ rates }: { rates: { name: string; rate: number }[] }) {
  const { run, msg, error, busy } = useAction(); const [amount, setAmount] = useState("10000"), [rate, setRate] = useState("15"), [mode, setMode] = useState<"add" | "extract">("add"), [label, setLabel] = useState("");
  const a = Number(amount) || 0, r = Number(rate) || 0;
  const base = mode === "add" ? a : a / (1 + r / 100), tax = mode === "add" ? (a * r) / 100 : a - base, total = base + tax;
  const f = (n: number) => "৳" + n.toLocaleString("en-US", { maximumFractionDigits: 2 });
  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <div className="m-card space-y-4 p-5"><h3 className="font-semibold">VAT calculator</h3>
        <div className="inline-flex rounded-lg bg-slate-100 p-1 text-sm">{(["add", "extract"] as const).map((m) => <button key={m} onClick={() => setMode(m)} className={`rounded-md px-3 py-1.5 font-medium ${mode === m ? "bg-white shadow-sm" : "text-slate-500"}`}>{m === "add" ? "Add VAT to amount" : "Amount includes VAT"}</button>)}</div>
        <Field label="Amount (৳)"><input className="m-input" type="number" step="any" value={amount} onChange={(e) => setAmount(e.target.value)} /></Field>
        <Field label="Rate %"><div className="flex gap-2"><input className="m-input" type="number" step="any" value={rate} onChange={(e) => setRate(e.target.value)} /><select className="m-input !w-44" value="" onChange={(e) => e.target.value && setRate(e.target.value)}><option value="">Preset…</option>{[{ name: "Standard VAT", rate: 15 }, { name: "Reduced 10%", rate: 10 }, { name: "Reduced 7.5%", rate: 7.5 }, { name: "Reduced 5%", rate: 5 }, ...rates].map((x) => <option key={x.name} value={x.rate}>{x.name} ({x.rate}%)</option>)}</select></div></Field>
        <Field label="Label (to save)"><input className="m-input" value={label} onChange={(e) => setLabel(e.target.value)} /></Field>
        <button className="m-btn" disabled={busy} onClick={() => run("/api/dashboard/r/taxcalcs", { action: "save", data: { label: label || "Calculation", base: Math.round(base * 100) / 100, rate: r } })}>Save calculation</button><Alert>{error}</Alert>{msg}</div>
      <div className="m-card p-5"><h3 className="font-semibold">Result</h3><dl className="mt-4 space-y-3 text-sm">{[["Amount before VAT", f(base)], [`VAT @ ${r}%`, f(tax)]].map(([k, v]) => <div key={k} className="flex justify-between border-b border-slate-100 pb-3"><dt className="text-slate-500">{k}</dt><dd className="font-medium">{v}</dd></div>)}<div className="flex justify-between pt-1 text-lg"><dt className="font-semibold">Total</dt><dd className="font-semibold">{f(total)}</dd></div></dl></div>
    </div>
  );
}

export function DatabasePanel({ backups }: { backups: { name: string; size: number; at: string }[] }) {
  const { run, busy, error, msg } = useAction(); const [imp, setImp] = useState("");
  const importFile = async (file?: File) => { if (!file) return; try { const j = JSON.parse(await file.text()); const r = await call("/api/dashboard/system/import", { records: j.records }); setImp(r.ok ? r.data.message : r.error); } catch { setImp("Not a valid OXO export file"); } };
  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <div className="m-card p-5"><h3 className="font-semibold">Backups</h3><p className="mb-4 mt-1 text-sm text-slate-500">A consistent snapshot of the whole database. The newest 20 are kept in <code>data/backups</code>. Copy them off-server regularly.</p>
        <button className="m-btn m-btn-primary" disabled={busy} onClick={() => run("/api/dashboard/system/backup", {})}><DatabaseBackup size={14} />{busy ? "Working…" : "Create backup now"}</button><div className="mt-3 space-y-2"><Alert>{error}</Alert><Alert kind="ok">{msg}</Alert></div>
        <ul className="mt-4 divide-y divide-slate-100 text-sm">{backups.length === 0 && <li className="py-3 text-slate-400">No backups yet</li>}{backups.map((b) => <li key={b.name} className="flex items-center gap-2 py-2.5"><span className="min-w-0 flex-1 truncate">{b.name}<span className="ml-2 text-xs text-slate-400">{(b.size / 1024).toFixed(0)} KB</span></span><a className="m-icon" aria-label="Download" href={`/api/dashboard/system/download?f=${b.name}`}><Download size={14} /></a><button className="m-icon hover:!text-rose-600" aria-label="Delete" onClick={() => run("/api/dashboard/system/delete", { name: b.name }, { confirm: "Delete this backup?" })}><Trash2 size={14} /></button></li>)}</ul></div>
      <div className="m-card p-5"><h3 className="font-semibold">Export & import</h3><p className="mb-4 mt-1 text-sm text-slate-500">Export everything as JSON. Importing restores module records only (clients, invoices, funds, employees…) — never users, sessions or secrets.</p>
        <div className="flex flex-wrap gap-2"><a className="m-btn" href="/api/dashboard/system/export"><Download size={14} />Export all (JSON)</a><label className="m-btn cursor-pointer"><Upload size={14} />Import records<input type="file" accept="application/json" className="hidden" onChange={(e) => importFile(e.target.files?.[0])} /></label></div>{imp && <p className="mt-3 text-sm text-slate-600">{imp}</p>}
        <dl className="mt-6 space-y-2 border-t border-slate-100 pt-4 text-sm text-slate-500"><div className="flex justify-between"><dt>Engine</dt><dd className="text-slate-800">SQLite (WAL) · node:sqlite</dd></div><div className="flex justify-between"><dt>Location</dt><dd className="text-slate-800"><code>$DATA_DIR/oxo.db</code></dd></div></dl></div>
    </div>
  );
}