"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import Badge from "@/components/ui/Badge";
import Button from "@/components/ui/Button";
import Card from "@/components/ui/Card";
import PageHeader from "@/components/ui/PageHeader";

type OwnerRow = {
  id: string;
  username: string;
  role: string;
  ownerId: string | null;
  status: string;
  passwordSetAt: string | null;
  createdAt: string;
  updatedAt: string;
  ownedShops: Array<{ shopId: string }>;
};

type ShopOption = { shopId: string; shopName: string | null; connected: boolean };
type Draft = { username: string; password: string; shopIds: string[]; confirmTransfer: boolean };

function dateLabel(value: string | null) {
  if (!value) return "Belum pernah";
  return new Intl.DateTimeFormat("id-ID", { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
}

async function jsonRequest(url: string, init: RequestInit) {
  const response = await fetch(url, { ...init, headers: { "Content-Type": "application/json", ...(init.headers || {}) } });
  const json = (await response.json().catch(() => null)) as { ok?: boolean; error?: string } | null;
  if (!response.ok || !json?.ok) throw new Error(json?.error || "Operasi akun gagal.");
}

function StatCard({ label, value, hint, tone = "slate" }: { label: string; value: string | number; hint: string; tone?: "slate" | "emerald" | "amber" | "violet" }) {
  const tones = {
    slate: "border-slate-200 bg-white text-slate-950",
    emerald: "border-emerald-200 bg-emerald-50/70 text-emerald-950",
    amber: "border-amber-200 bg-amber-50/70 text-amber-950",
    violet: "border-violet-200 bg-violet-50/70 text-violet-950",
  };
  return <div className={`rounded-2xl border p-4 shadow-sm ${tones[tone]}`}>
    <div className="text-[10px] font-black uppercase tracking-[0.14em] opacity-55">{label}</div>
    <div className="mt-2 text-3xl font-black tracking-tight">{value}</div>
    <div className="mt-1 text-xs font-medium opacity-60">{hint}</div>
  </div>;
}

function StorePicker({ shops, value, ownerByShop, onChange }: { shops: ShopOption[]; value: string[]; ownerByShop: Map<string, string>; onChange: (next: string[]) => void }) {
  return <fieldset>
    <div className="flex flex-wrap items-center justify-between gap-2">
      <legend className="text-xs font-black uppercase tracking-[0.1em] text-slate-600">Akses toko <span className="text-rose-600">*</span></legend>
      <span className="text-[11px] font-semibold text-slate-400">{value.length} toko dipilih</span>
    </div>
    <div className="mt-3 grid gap-2 sm:grid-cols-2">
      {shops.map((shop) => {
        const checked = value.includes(shop.shopId);
        const currentOwner = ownerByShop.get(shop.shopId);
        return <label className={`cursor-pointer rounded-xl border p-3 transition ${checked ? currentOwner ? "border-amber-400 bg-amber-50 ring-2 ring-amber-100" : "border-emerald-400 bg-emerald-50 ring-2 ring-emerald-100" : "border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50"}`} key={shop.shopId}>
          <span className="flex items-start gap-3">
            <input className="mt-0.5 h-4 w-4 rounded border-slate-300 text-emerald-600" type="checkbox" checked={checked} onChange={() => onChange(checked ? value.filter((id) => id !== shop.shopId) : [...value, shop.shopId])} />
            <span className="min-w-0">
              <span className="block truncate text-sm font-bold text-slate-800">{shop.shopName || shop.shopId}</span>
              <span className={`mt-0.5 block text-[11px] font-semibold ${currentOwner ? "text-amber-700" : shop.connected ? "text-emerald-700" : "text-slate-500"}`}>{currentOwner ? `Saat ini milik ${currentOwner}` : shop.connected ? "Siap dialokasikan" : "Toko historis"}</span>
            </span>
          </span>
        </label>;
      })}
      {shops.length === 0 ? <div className="rounded-xl border border-dashed border-slate-200 p-4 text-sm text-slate-500 sm:col-span-2">Belum ada toko yang dapat dialokasikan.</div> : null}
    </div>
  </fieldset>;
}

function TransferConfirmation({ owners, checked, onChange }: { owners: string[]; checked: boolean; onChange: (checked: boolean) => void }) {
  if (owners.length === 0) return null;
  return <label className="flex cursor-pointer items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-950">
    <input className="mt-0.5 h-4 w-4" type="checkbox" checked={checked} onChange={(event) => onChange(event.target.checked)} />
    <span><strong>Konfirmasi pemindahan toko</strong><span className="mt-0.5 block text-xs leading-5 text-amber-800">Akses toko akan dipindahkan dari {owners.join(", ")} ke Owner ini. Data penjualan tidak dihapus.</span></span>
  </label>;
}

export default function SuperAdminUsersDashboard({ rows, shops }: { rows: OwnerRow[]; shops: ShopOption[]; dashboard?: boolean }) {
  const router = useRouter();
  const [showCreate, setShowCreate] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [shopIds, setShopIds] = useState<string[]>([]);
  const [confirmTransfer, setConfirmTransfer] = useState(false);
  const [drafts, setDrafts] = useState<Record<string, Draft>>({});
  const [busy, setBusy] = useState<string | null>(null);
  const [message, setMessage] = useState<{ error: boolean; text: string } | null>(null);

  const shopById = useMemo(() => new Map(shops.map((shop) => [shop.shopId, shop])), [shops]);
  const ownerByShop = useMemo(() => {
    const map = new Map<string, string>();
    for (const row of rows) for (const shop of row.ownedShops) map.set(shop.shopId, row.username);
    return map;
  }, [rows]);
  const activeOwners = rows.filter((row) => row.status === "active").length;
  const ownersWithoutShop = rows.filter((row) => row.ownedShops.length === 0).length;
  const activeShops = shops.filter((shop) => shop.connected);
  const allocatedActiveShops = activeShops.filter((shop) => ownerByShop.has(shop.shopId)).length;
  const createTransferOwners = Array.from(new Set(shopIds.map((shopId) => ownerByShop.get(shopId)).filter((owner): owner is string => Boolean(owner))));

  function closeCreate() {
    setShowCreate(false); setUsername(""); setPassword(""); setShopIds([]); setConfirmTransfer(false);
  }

  async function createOwner() {
    setBusy("create"); setMessage(null);
    try {
      await jsonRequest("/api/users", { method: "POST", body: JSON.stringify({ username, password, shopIds, transferShops: confirmTransfer }) });
      closeCreate(); setMessage({ error: false, text: `Owner ${username} berhasil dibuat dan akses tokonya sudah ditetapkan.` }); router.refresh();
    } catch (error) { setMessage({ error: true, text: error instanceof Error ? error.message : "Gagal membuat Owner." }); }
    finally { setBusy(null); }
  }

  function draft(row: OwnerRow) {
    return drafts[row.id] || { username: row.username, password: "", shopIds: row.ownedShops.map((shop) => shop.shopId), confirmTransfer: false };
  }

  async function updateOwner(row: OwnerRow, changes: { username?: string; password?: string; status?: string; shopIds?: string[]; transferShops?: boolean }) {
    setBusy(row.id); setMessage(null);
    try {
      await jsonRequest("/api/users", { method: "PATCH", body: JSON.stringify({ id: row.id, ...changes }) });
      setEditingId(null); setDrafts((state) => { const next = { ...state }; delete next[row.id]; return next; });
      setMessage({ error: false, text: `Owner ${row.username} berhasil diperbarui.` }); router.refresh();
    } catch (error) { setMessage({ error: true, text: error instanceof Error ? error.message : "Gagal memperbarui Owner." }); }
    finally { setBusy(null); }
  }

  return <div className="space-y-5">
    <PageHeader eyebrow="Administrasi SaaS" title="Pusat Kendali Owner" description="Kelola akun pelanggan, alokasikan toko, dan masuk ke data penjualan hanya saat perlu melakukan inspeksi." actions={<>
      <Link className="ui-button ui-button-secondary" href="/tokens?shop_id=all">Kelola toko</Link>
      <Button variant="primary" onClick={() => setShowCreate(true)}>+ Tambah Owner</Button>
    </>} />

    {message ? <div className={`rounded-xl border p-3 text-sm font-semibold ${message.error ? "border-rose-200 bg-rose-50 text-rose-800" : "border-emerald-200 bg-emerald-50 text-emerald-800"}`}>{message.text}</div> : null}

    <section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4" aria-label="Ringkasan akun Owner">
      <StatCard label="Total Owner" value={rows.length} hint="Akun pelanggan terdaftar" tone="violet" />
      <StatCard label="Owner Aktif" value={activeOwners} hint={`${rows.length - activeOwners} akun nonaktif`} tone="emerald" />
      <StatCard label="Toko Teralokasi" value={`${allocatedActiveShops}/${activeShops.length}`} hint="Toko aktif memiliki Owner" tone="slate" />
      <StatCard label="Perlu Ditangani" value={ownersWithoutShop} hint="Owner belum memiliki toko" tone={ownersWithoutShop ? "amber" : "emerald"} />
    </section>

    {ownersWithoutShop ? <div className="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-amber-950"><span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-amber-100 font-black">!</span><div><div className="text-sm font-black">{ownersWithoutShop} Owner belum dapat menggunakan dashboard toko</div><div className="mt-1 text-xs leading-5 text-amber-800">Buka menu Kelola pada Owner tersebut, pilih toko, lalu simpan aksesnya.</div></div></div> : null}

    <Card className="!p-0">
      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4">
        <div><h2 className="text-base font-black text-slate-950">Owner &amp; Akses Toko</h2><p className="mt-1 text-xs text-slate-500">Klik nama toko untuk membuka mode inspeksi penjualan.</p></div>
        <Badge tone="neutral">{rows.length} OWNER</Badge>
      </div>
      <div className="divide-y divide-slate-200">
        {rows.map((row) => {
          const value = draft(row);
          const otherOwnerByShop = new Map(Array.from(ownerByShop).filter(([, owner]) => owner !== row.username));
          const transferOwners = Array.from(new Set(value.shopIds.map((shopId) => otherOwnerByShop.get(shopId)).filter((owner): owner is string => Boolean(owner))));
          const transferReady = transferOwners.length === 0 || value.confirmTransfer;
          return <article className="px-5 py-5" key={row.id}>
            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
              <div className="flex min-w-0 gap-3">
                <div className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-slate-950 text-sm font-black uppercase text-white">{row.username.slice(0, 2)}</div>
                <div className="min-w-0">
                  <div className="flex flex-wrap items-center gap-2"><h3 className="truncate text-base font-black text-slate-950">{row.username}</h3><Badge tone={row.status === "active" ? "success" : "danger"}>{row.status === "active" ? "Aktif" : "Nonaktif"}</Badge></div>
                  <div className="mt-1 text-xs text-slate-500">Password diperbarui {dateLabel(row.passwordSetAt)} · {row.ownedShops.length} toko</div>
                  <div className="mt-3 flex flex-wrap gap-2">
                    {row.ownedShops.map(({ shopId }) => { const shop = shopById.get(shopId); return <Link className="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-50 px-2.5 py-1 text-[11px] font-bold text-violet-800 hover:border-violet-300 hover:bg-violet-100" href={`/dashboard?shop_id=${encodeURIComponent(shopId)}`} key={shopId}>{shop?.shopName || shopId}<span aria-hidden="true">↗</span></Link>; })}
                    {row.ownedShops.length === 0 ? <span className="rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-[11px] font-bold text-amber-800">Belum memiliki toko</span> : null}
                  </div>
                </div>
              </div>
              <div className="flex shrink-0 flex-wrap gap-2">
                <Button variant="secondary" onClick={() => { setEditingId(editingId === row.id ? null : row.id); setDrafts((state) => ({ ...state, [row.id]: value })); }}>{editingId === row.id ? "Tutup" : "Kelola"}</Button>
                <Button variant={row.status === "active" ? "danger" : "primary"} loading={busy === row.id} onClick={() => updateOwner(row, { status: row.status === "active" ? "inactive" : "active" })}>{row.status === "active" ? "Nonaktifkan" : "Aktifkan"}</Button>
              </div>
            </div>

            {editingId === row.id ? <div className="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
              <div className="grid gap-3 md:grid-cols-2">
                <label><span className="text-xs font-black uppercase tracking-[0.08em] text-slate-600">Username Owner</span><input autoComplete="off" className="mt-2 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm" name={`owner-username-${row.id}`} value={value.username} onChange={(event) => setDrafts((state) => ({ ...state, [row.id]: { ...value, username: event.target.value } }))} /></label>
                <label><span className="text-xs font-black uppercase tracking-[0.08em] text-slate-600">Reset password</span><input autoComplete="new-password" className="mt-2 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm" name={`owner-password-${row.id}`} placeholder="Kosongkan jika tidak diubah" type="password" value={value.password} onChange={(event) => setDrafts((state) => ({ ...state, [row.id]: { ...value, password: event.target.value } }))} /></label>
              </div>
              <div className="mt-5"><StorePicker shops={shops} value={value.shopIds} ownerByShop={otherOwnerByShop} onChange={(next) => setDrafts((state) => ({ ...state, [row.id]: { ...value, shopIds: next, confirmTransfer: false } }))} /></div>
              <div className="mt-3"><TransferConfirmation owners={transferOwners} checked={value.confirmTransfer} onChange={(checked) => setDrafts((state) => ({ ...state, [row.id]: { ...value, confirmTransfer: checked } }))} /></div>
              <div className="mt-4 flex justify-end gap-2"><Button variant="ghost" onClick={() => setEditingId(null)}>Batal</Button><Button variant="primary" disabled={!value.username.trim() || value.shopIds.length === 0 || !transferReady} loading={busy === row.id} onClick={() => updateOwner(row, { username: value.username, shopIds: value.shopIds, transferShops: value.confirmTransfer, ...(value.password ? { password: value.password } : {}) })}>Simpan perubahan</Button></div>
            </div> : null}
          </article>;
        })}
        {rows.length === 0 ? <div className="p-10 text-center text-sm text-slate-500">Tidak ada akun Owner pada basis data yang sedang dibaca. Jika Owner sudah pernah dibuat, periksa sumber data sebelum membuat akun lagi.</div> : null}
      </div>
    </Card>

    {showCreate ? <div className="fixed inset-0 z-[100] flex items-center justify-center p-4" role="dialog" aria-modal="true" aria-label="Tambah Owner baru">
      <button aria-label="Tutup dialog" className="absolute inset-0 bg-slate-950/55 backdrop-blur-sm" onClick={closeCreate} />
      <section className="relative z-10 max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-2xl border border-slate-200 bg-white shadow-2xl">
        <div className="flex items-start justify-between gap-4 border-b border-slate-200 px-5 py-4"><div><div className="text-lg font-black text-slate-950">Tambah Owner baru</div><div className="mt-1 text-xs text-slate-500">Buat kredensial dan tentukan toko yang dapat diakses.</div></div><button aria-label="Tutup" className="grid h-9 w-9 place-items-center rounded-lg text-xl text-slate-400 hover:bg-slate-100 hover:text-slate-800" onClick={closeCreate}>×</button></div>
        <form autoComplete="off" className="space-y-5 p-5" onSubmit={(event) => { event.preventDefault(); void createOwner(); }}>
          <div className="grid gap-3 md:grid-cols-2">
            <label><span className="text-xs font-black uppercase tracking-[0.08em] text-slate-600">Username Owner</span><input autoComplete="off" className="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm" name="new-owner-login" placeholder="contoh: owner_fatmajati" value={username} onChange={(event) => setUsername(event.target.value)} /></label>
            <label><span className="text-xs font-black uppercase tracking-[0.08em] text-slate-600">Password awal</span><input autoComplete="new-password" className="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm" minLength={8} name="new-owner-password" placeholder="Minimal 8 karakter" type="password" value={password} onChange={(event) => setPassword(event.target.value)} /></label>
          </div>
          <StorePicker shops={shops} value={shopIds} ownerByShop={ownerByShop} onChange={(next) => { setShopIds(next); setConfirmTransfer(false); }} />
          <TransferConfirmation owners={createTransferOwners} checked={confirmTransfer} onChange={setConfirmTransfer} />
          <div className="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-4"><span className="text-xs text-slate-500">Pemindahan akses tidak menghapus pesanan, produk, atau laporan.</span><div className="flex gap-2"><Button variant="ghost" type="button" onClick={closeCreate}>Batal</Button><Button variant="primary" type="submit" disabled={!username.trim() || password.length < 8 || shopIds.length === 0 || (createTransferOwners.length > 0 && !confirmTransfer)} loading={busy === "create"}>Buat Owner</Button></div></div>
        </form>
      </section>
    </div> : null}
  </div>;
}