"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Badge from "@/components/ui/Badge";
import Button from "@/components/ui/Button";
import ControlCenterNav from "@/components/layout/ControlCenterNav";
import AiProviderSettings, { type AiSettingsView } from "@/components/settings/AiProviderSettings";

type Account = {
  username: string;
  role: "super_admin" | "owner" | "staff";
  status: "active" | "inactive";
  ownerUsername: string | null;
  localPasswordConfigured: boolean;
  passwordSetAt: string | null;
};

type BackupEntry = {
  name: string;
  kind: "automatic" | "manual";
  scope: "system" | "owner";
  createdAt: string;
  size: number;
  location: string;
};

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

function formatBytes(value: number) {
  if (value < 1024 * 1024) return `${Math.max(1, Math.round(value / 1024))} KB`;
  return `${(value / 1024 / 1024).toFixed(1)} MB`;
}

export default function SettingsPageClient({ account, aiSettings, initialBackups }: { account: Account; aiSettings: AiSettingsView | null; initialBackups: BackupEntry[] }) {
  const router = useRouter();
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [isError, setIsError] = useState(false);
  const [backups, setBackups] = useState<BackupEntry[]>(initialBackups);
  const [backupLoading, setBackupLoading] = useState(false);
  const [backupSaving, setBackupSaving] = useState(false);
  const [form, setForm] = useState({ username: account.username, currentPassword: "", newPassword: "", confirmPassword: "" });
  const roleLabel = account.role === "super_admin" ? "Super Admin" : account.role === "owner" ? "Owner" : "Staff";

  async function loadBackups() {
    setBackupLoading(true);
    try {
      const response = await fetch("/api/backups", { cache: "no-store" });
      const result = (await response.json()) as { ok?: boolean; data?: BackupEntry[]; error?: string };
      if (!response.ok || !result.ok) throw new Error(result.error || "Riwayat backup tidak dapat dimuat.");
      setBackups(result.data || []);
    } catch (error) {
      setIsError(true);
      setMessage(error instanceof Error ? error.message : "Riwayat backup tidak dapat dimuat.");
    } finally {
      setBackupLoading(false);
    }
  }

  async function createBackup(action: "manual" | "cleanup") {
    setBackupSaving(true);
    setMessage(null);
    setIsError(false);
    try {
      const response = await fetch("/api/backups", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action }) });
      const result = (await response.json()) as { ok?: boolean; error?: string; data?: { expiredSessions?: number } };
      if (!response.ok || !result.ok) throw new Error(result.error || "Proses backup gagal.");
      setMessage(action === "cleanup"
        ? `${result.data?.expiredSessions || 0} sesi kedaluwarsa dibersihkan. Data penjualan, HPP, pesanan, dan backup manual tidak dihapus.`
        : account.role === "super_admin"
          ? "Backup database penuh berhasil dibuat."
          : "Backup data akun dan toko Anda berhasil dibuat.");
      await loadBackups();
    } catch (error) {
      setIsError(true);
      setMessage(error instanceof Error ? error.message : "Proses backup gagal.");
    } finally {
      setBackupSaving(false);
    }
  }

  async function saveAccount() {
    if (!form.username.trim()) {
      setIsError(true);
      setMessage("Username tidak boleh kosong.");
      return;
    }
    if (form.newPassword && form.newPassword.length < 8) {
      setIsError(true);
      setMessage("Password baru minimal 8 karakter.");
      return;
    }
    if (form.newPassword !== form.confirmPassword) {
      setIsError(true);
      setMessage("Ulangi password harus sama dengan password baru.");
      return;
    }
    setSaving(true);
    setMessage(null);
    setIsError(false);
    try {
      const response = await fetch("/api/account", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const result = (await response.json()) as { ok: boolean; error?: string };
      if (!response.ok || !result.ok) throw new Error(result.error || "Akun gagal disimpan.");
      setForm((current) => ({ ...current, currentPassword: "", newPassword: "", confirmPassword: "" }));
      setMessage("Username dan password berhasil disimpan.");
      router.refresh();
    } catch (error) {
      setIsError(true);
      setMessage(error instanceof Error ? error.message : "Akun gagal disimpan.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="space-y-4">
      <section><h1 className="page-title">Pengaturan &amp; akun</h1><p className="mt-1 text-sm text-slate-500">Kelola login, keamanan akun, dan integrasi AI Sellfin.</p></section>
      <ControlCenterNav />

      {message ? <div aria-live="polite" className={`rounded-lg border p-3 text-sm font-semibold ${isError ? "border-rose-200 bg-rose-50 text-rose-800" : "border-emerald-200 bg-emerald-50 text-emerald-800"}`}>{message}</div> : null}

      <section className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4 dark:border-slate-800">
          <div><h2 className="font-bold text-slate-950 dark:text-white">Akun login</h2><p className="mt-1 text-xs text-slate-500">Digunakan untuk masuk ke Sellfin sesuai role akun.</p></div>
          <div className="flex items-center gap-2"><Badge tone="success">{roleLabel}</Badge><Badge tone={account.localPasswordConfigured ? "success" : "warning"}>{account.localPasswordConfigured ? "Password aktif" : "Password awal"}</Badge></div>
        </div>

        <div className="grid gap-6 p-5 lg:grid-cols-[280px_1fr]">
          <div className="rounded-xl bg-slate-50 p-4 dark:bg-slate-950">
            <div className="text-xs font-semibold uppercase tracking-wide text-slate-400">Username saat ini</div>
            <div className="mt-2 text-lg font-bold text-slate-950 dark:text-white">{account.username}</div>
            <div className="mt-4 text-xs leading-5 text-slate-500">Password terakhir diubah: <b className="text-slate-700 dark:text-slate-300">{formatDate(account.passwordSetAt)}</b></div>
            <div className="mt-4 border-t border-slate-200 pt-4 text-xs leading-5 text-slate-500 dark:border-slate-800">Role: <b>{roleLabel}</b>{account.ownerUsername ? <> · Owner: <b>{account.ownerUsername}</b></> : null}. {account.role === "super_admin" ? "Dapat mengelola Owner/Pelanggan." : account.role === "owner" ? "Dapat mengelola Staff miliknya." : "Tidak memiliki akses manajemen pengguna."}</div>
          </div>

          <div className="grid gap-3 sm:grid-cols-2">
            <label className="sm:col-span-2"><span className="muted-label">Username</span><input className="mt-1.5 w-full rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-sm dark:border-slate-700 dark:bg-slate-950" value={form.username} onChange={(event) => setForm((current) => ({ ...current, username: event.target.value }))} /></label>
            {account.localPasswordConfigured ? <label className="sm:col-span-2"><span className="muted-label">Password saat ini</span><input autoComplete="current-password" className="mt-1.5 w-full rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-sm dark:border-slate-700 dark:bg-slate-950" type="password" value={form.currentPassword} onChange={(event) => setForm((current) => ({ ...current, currentPassword: event.target.value }))} /></label> : null}
            <label><span className="muted-label">Password baru</span><input autoComplete="new-password" className="mt-1.5 w-full rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-sm dark:border-slate-700 dark:bg-slate-950" minLength={8} placeholder={account.localPasswordConfigured ? "Kosongkan jika tidak diganti" : "Minimal 8 karakter"} type="password" value={form.newPassword} onChange={(event) => setForm((current) => ({ ...current, newPassword: event.target.value }))} /></label>
            <label><span className="muted-label">Ulangi password baru</span><input autoComplete="new-password" className="mt-1.5 w-full rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-sm dark:border-slate-700 dark:bg-slate-950" minLength={8} type="password" value={form.confirmPassword} onChange={(event) => setForm((current) => ({ ...current, confirmPassword: event.target.value }))} /></label>
            <div className="flex flex-wrap items-center gap-3 sm:col-span-2"><Button variant="primary" loading={saving} onClick={saveAccount}>Simpan perubahan</Button><span className="text-xs text-slate-500">Password tidak pernah ditampilkan kembali.</span></div>
          </div>
        </div>
      </section>

      {(account.role === "super_admin" || account.role === "owner") ? <section className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4 dark:border-slate-800">
          <div><h2 className="font-bold text-slate-950 dark:text-white">Backup &amp; pemulihan data</h2><p className="mt-1 max-w-2xl text-xs leading-5 text-slate-500">Backup otomatis dibuat setiap Sellfin dijalankan, sebelum migrasi atau build. {account.role === "super_admin" ? "Backup manual menyimpan seluruh database Sellfin." : "Backup manual menyimpan data toko, produk, SKU, HPP, pesanan, settlement, iklan, pengeluaran, dan hasil analisis akun ini."}</p></div>
          <div className="flex flex-wrap gap-2"><Button variant="secondary" loading={backupSaving} onClick={() => void createBackup("manual")}>Buat backup sekarang</Button>{account.role === "super_admin" ? <Button variant="secondary" loading={backupSaving} onClick={() => void createBackup("cleanup")}>Bersihkan data sementara</Button> : null}</div>
        </div>
        <div className="p-5">
          <div className="mb-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-slate-500"><span>Database penuh: 14 otomatis · 12 manual</span><span>Data per Owner: 30 otomatis · 24 manual</span><span>Lokasi: AppData\\Local\\Sellfin\\backups</span></div>
          {backupLoading ? <div className="text-sm text-slate-500">Memuat riwayat backup…</div> : backups.length === 0 ? <div className="rounded-lg bg-slate-50 p-3 text-sm text-slate-500 dark:bg-slate-950">Belum ada backup. Backup otomatis pertama dibuat saat Sellfin berikutnya dijalankan.</div> : <div className="overflow-x-auto"><table className="min-w-full text-left text-xs"><thead className="border-b border-slate-200 text-slate-400 dark:border-slate-800"><tr><th className="px-2 py-2 font-semibold">Waktu</th><th className="px-2 py-2 font-semibold">Jenis</th><th className="px-2 py-2 font-semibold">Cakupan</th><th className="px-2 py-2 text-right font-semibold">Ukuran</th></tr></thead><tbody>{backups.slice(0, 8).map((backup) => <tr className="border-b border-slate-100 last:border-0 dark:border-slate-800" key={backup.location}><td className="px-2 py-2 font-medium text-slate-700 dark:text-slate-200">{formatDate(backup.createdAt)}</td><td className="px-2 py-2"><Badge tone={backup.kind === "manual" ? "info" : "neutral"}>{backup.kind === "manual" ? "Manual" : "Otomatis"}</Badge></td><td className="px-2 py-2 text-slate-600 dark:text-slate-300">{backup.scope === "system" ? "Seluruh Sellfin" : "Data akun Owner"}</td><td className="px-2 py-2 text-right font-mono text-slate-500">{formatBytes(backup.size)}</td></tr>)}</tbody></table></div>}
        </div>
      </section> : null}

      {aiSettings ? <AiProviderSettings initialSettings={aiSettings} /> : null}
    </div>
  );
}