import { useEffect, useRef, useState } from "react";
import { ArrowLeft, Boxes, Eye, EyeOff, Flag, Inbox, LayoutDashboard, Mail, Send, ShieldAlert, SlidersHorizontal, Users } from "lucide-react";
import { api, getToken, type AccessStatus, type AdminSettings, type AdminSettingsPatch, type ReportStatus } from "../lib/api.ts";
import { subscribeAccessLive, wsUrl } from "../lib/accessWs.ts";
import { navigate } from "../lib/route.ts";
import { AdminPanel } from "./AdminPanel.tsx";
import { AccessRequestsPanel } from "./AccessRequests.tsx";
import { ReportsPanel } from "./ReportsPanel.tsx";
import { ModelsPanel } from "./ModelsPanel.tsx";
import { Toasts } from "./Toasts.tsx";
import { pushToast } from "../lib/toasts.ts";
import { Button, CopyButton, Field, FlowerMark, Input, LoadingScreen, Spinner, Switch } from "./ui.tsx";
import { cn } from "../lib/cn.ts";
import { msUntilNextSolarSwitch, resolveThemeDark } from "../lib/solarTheme.ts";
import { useT } from "../lib/i18n.ts";

type Tab = "accounts" | "access" | "reports" | "models" | "features" | "mail";

const VALID_TABS: readonly string[] = ["accounts", "access", "reports", "models", "features", "mail"];

function validTab(v: string | null | undefined): Tab {
  return v !== null && v !== undefined && (VALID_TABS as readonly string[]).includes(v) ? (v as Tab) : "accounts";
}

function applyTheme(theme: string) {
  const root = document.documentElement;
  const dark = resolveThemeDark(theme);
  root.classList.toggle("dark", dark);
  root.style.colorScheme = dark ? "dark" : "light";
}

export function AdminCenter({ initialTab }: { initialTab?: string | null }) {
  const { t } = useT();
  const [allowed, setAllowed] = useState<boolean | null>(null);
  const [tab, setTab] = useState<Tab>(() => validTab(initialTab));
  const [settings, setSettings] = useState<AdminSettings | null>(null);
  const [error, setError] = useState("");
  const [saving, setSaving] = useState(false);
  const [openAccessCount, setOpenAccessCount] = useState(0);
  const [openReportCount, setOpenReportCount] = useState(0);
  // Deep links (/admin, /admin/models, …): unknown sections bounce to /admin.
  useEffect(() => {
    if (initialTab !== null && initialTab !== undefined && !VALID_TABS.includes(initialTab)) {
      navigate("/admin", true);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  function selectTab(id: Tab): void {
    setTab(id);
    navigate(id === "accounts" ? "/admin" : `/admin/${id}`);
  }

  // Full badge resync (HTTP) — only for mount, reconnect gaps and rare
  // actions with no WS event (reporter shadow-ban). Hot path is incremental.
  const resyncBadgesRef = useRef<() => void>(() => {});

  const TABS: { id: Tab; label: string; icon: typeof Users }[] = [
    { id: "accounts", label: t("center.tabAccounts"), icon: Users },
    { id: "access", label: t("center.tabAccess"), icon: Inbox },
    { id: "reports", label: t("center.tabReports"), icon: Flag },
    { id: "models", label: t("center.tabModels"), icon: Boxes },
    { id: "features", label: t("center.tabFeatures"), icon: SlidersHorizontal },
    { id: "mail", label: t("center.tabMail"), icon: Mail },
  ];

  useEffect(() => {
    let timer: number | undefined;
    api.verify()
      .then((r) => {
        if (!r.user.isAdmin) {
          setAllowed(false);
          return;
        }
        setAllowed(true);
        applyTheme(r.user.theme);
        if (r.user.theme === "sunset") {
          const schedule = (): void => {
            timer = window.setTimeout(() => {
              applyTheme("sunset");
              schedule();
            }, msUntilNextSolarSwitch());
          };
          schedule();
        }
        api.adminGetSettings().then((s) => setSettings(s.settings)).catch((e) => setError(e instanceof Error ? e.message : t("admin.loadFailed")));
      })
      .catch(() => setAllowed(false));
    return () => window.clearTimeout(timer);
  }, []);

  // Live badges on the Access/Reports tabs: the admin firehose pushes full
  // payloads, so the open counts update incrementally with zero HTTP.
  // Resync on (re)connect covers events missed while offline.
  useEffect(() => {
    if (!allowed) return;
    const accessById = new Map<string, AccessStatus>();
    const reportById = new Map<string, { status: ReportStatus; shadowbanned: number }>();
    function recount() {
      let access = 0;
      for (const s of accessById.values()) if (s === "pending" || s === "reviewing") access++;
      let reports = 0;
      for (const r of reportById.values()) {
        if ((r.status === "open" || r.status === "reviewing") && r.shadowbanned !== 1) reports++;
      }
      setOpenAccessCount(access);
      setOpenReportCount(reports);
    }
    async function resync() {
      try {
        const res = await api.adminAccessList();
        accessById.clear();
        for (const r of res.requests) accessById.set(r.id, r.status);
      } catch {
        // Transient failure: keep last counts.
      }
      try {
        const res = await api.adminReportList();
        reportById.clear();
        for (const r of res.reports) {
          reportById.set(r.id, { status: r.status, shadowbanned: r.reporter_shadowbanned });
        }
      } catch {
        // Transient failure: keep last counts.
      }
      recount();
    }
    resyncBadgesRef.current = resync;
    resync();
    const token = getToken();
    if (!token) return;
    return subscribeAccessLive(wsUrl(`/api/admin/ws?token=${encodeURIComponent(token)}`), {
      onEvent: (evt) => {
        if (evt.type === "pong" || evt.type === "access_message") return;
        if (evt.type === "access_created") {
          accessById.set(evt.request_id, evt.request.status);
          recount();
          pushToast(t("live.newRequest", { user: evt.request.username }), { icon: "inbox" });
        } else if (evt.type === "access_status") {
          accessById.set(evt.request_id, evt.request.status);
          recount();
        } else if (evt.type === "report_created") {
          reportById.set(evt.report.id, { status: evt.report.status, shadowbanned: evt.report.reporter_shadowbanned });
          recount();
          pushToast(t("live.newReport", { reason: evt.report.reason }), { icon: "mail" });
        } else if (evt.type === "report_status") {
          const prev = reportById.get(evt.report.id);
          reportById.set(evt.report.id, {
            status: evt.report.status,
            shadowbanned: prev?.shadowbanned ?? evt.report.reporter_shadowbanned,
          });
          recount();
        }
      },
      onSync: () => {
        resync();
      },
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [allowed]);

  async function toggle(patch: AdminSettingsPatch) {
    setSaving(true);
    setError("");
    try {
      const res = await api.adminPatchSettings(patch);
      setSettings(res.settings);
    } catch (e) {
      setError(e instanceof Error ? e.message : t("common.saveFailed"));
    } finally {
      setSaving(false);
    }
  }

  if (allowed === null) {
    return <LoadingScreen />;
  }

  if (!allowed) {
    return (
      <div className="grid min-h-full place-items-center p-6">
        <div className="w-full max-w-sm rounded-[2rem] border border-stone-200 bg-white p-8 text-center shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
          <ShieldAlert size={28} className="mx-auto mb-3 text-red-500" />
          <h1 className="text-lg font-bold">{t("center.locked")}</h1>
          <p className="mt-1 text-sm opacity-60">{t("center.lockedSub")}</p>
          <a href="/" className="mt-4 inline-block rounded-full bg-accent-600 px-5 py-2.5 text-sm font-medium text-white dark:bg-accent-500 dark:text-zinc-950">{t("common.backToLogin")}</a>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-full">
      <header className="border-b border-stone-200/70 bg-white/70 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70">
        <div className="mx-auto flex w-full max-w-4xl items-center gap-3 px-4 py-3">
          <a href="/" aria-label={t("center.back")} className="rounded-full p-2 transition hover:bg-stone-200/60 dark:hover:bg-zinc-800">
            <ArrowLeft size={18} />
          </a>
          <FlowerMark size={32} dynamic={false} />
          <h1 className="flex items-center gap-2 text-lg font-bold tracking-tight">
            <LayoutDashboard size={18} className="text-accent-600 dark:text-accent-400" />
            {t("center.title")}
          </h1>
        </div>
        <div className="mx-auto w-full max-w-4xl px-4 pb-3">
          <div className="flex gap-1 overflow-x-auto rounded-full border border-stone-200/70 bg-stone-100/70 p-1 dark:border-zinc-800 dark:bg-zinc-900">
            {TABS.map((t) => (
              <button
                key={t.id}
                onClick={() => selectTab(t.id)}
                className={cn(
                  "relative flex flex-1 items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition",
                  tab === t.id
                    ? "bg-white text-stone-900 shadow dark:bg-zinc-800 dark:text-zinc-100"
                    : "opacity-60 hover:opacity-100",
                )}
              >
                <t.icon size={15} />
                {t.label}
                {t.id === "access" && openAccessCount > 0 && (
                  <span
                    role="status"
                    aria-label={`${t.label}: ${openAccessCount}`}
                    className="absolute -right-0.5 -top-0.5 z-10 grid min-h-4 min-w-4 place-items-center rounded-full bg-red-500 px-1 text-[10px] font-bold leading-4 text-white shadow"
                  >
                    {openAccessCount > 99 ? "99+" : openAccessCount}
                  </span>
                )}
                {t.id === "reports" && openReportCount > 0 && (
                  <span
                    role="status"
                    aria-label={`${t.label}: ${openReportCount}`}
                    className="absolute -right-0.5 -top-0.5 z-10 grid min-h-4 min-w-4 place-items-center rounded-full bg-red-500 px-1 text-[10px] font-bold leading-4 text-white shadow"
                  >
                    {openReportCount > 99 ? "99+" : openReportCount}
                  </span>
                )}
              </button>
            ))}
          </div>
        </div>
      </header>

      <main className="mx-auto w-full max-w-4xl space-y-4 px-4 py-6">
        {error && <p className="rounded-2xl bg-red-500/10 px-4 py-2.5 text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>}

        {tab === "accounts" && (
          <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <AdminPanel open bare onClose={() => {}} />
          </section>
        )}

        {tab === "access" && (
          <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <AccessRequestsPanel />
          </section>
        )}

        {tab === "reports" && (
          <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <ReportsPanel onShadowbanChanged={() => resyncBadgesRef.current()} />
          </section>
        )}

        {tab === "models" && (
          <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <ModelsPanel />
          </section>
        )}

        {tab === "features" && (
          <section className="space-y-3">
            <div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">{t("center.regTitle")}</p>
                <p className="text-sm opacity-60">{t("center.regDesc")}</p>
              </div>
              <Switch label={t("center.regTitle")} checked={settings?.registrationEnabled ?? false} onChange={(v) => toggle({ registrationEnabled: v })} />
            </div>
            <div className={cn(
              "flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900",
              settings?.registrationEnabled && "opacity-60",
            )}>
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">{t("center.accTitle")}</p>
                <p className="text-sm opacity-60">
                  {settings?.registrationEnabled
                    ? t("center.accDescOn")
                    : t("center.accDescOff")}
                </p>
              </div>
              <Switch
                label={t("center.accTitle")}
                checked={settings?.accessRequestEnabled ?? false}
                disabled={settings?.registrationEnabled ?? false}
                onChange={(v) => toggle({ accessRequestEnabled: v })}
              />
            </div>
            <div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">{t("center.ocrTitle")}</p>
                <p className="text-sm opacity-60">{t("center.ocrDesc")}</p>
              </div>
              <Switch label={t("center.ocrTitle")} checked={settings?.ocrEnabled ?? false} onChange={(v) => toggle({ ocrEnabled: v })} />
            </div>
            <div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">{t("center.reportsTitle")}</p>
                <p className="text-sm opacity-60">{t("center.reportsDesc")}</p>
              </div>
              <Switch label={t("center.reportsTitle")} checked={settings?.reportsEnabled ?? false} onChange={(v) => toggle({ reportsEnabled: v })} />
            </div>
            <div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">{t("center.usernameChangeTitle")}</p>
                <p className="text-sm opacity-60">{t("center.usernameChangeDesc")}</p>
              </div>
              <Switch label={t("center.usernameChangeTitle")} checked={settings?.usernameChangeEnabled ?? false} onChange={(v) => toggle({ usernameChangeEnabled: v })} />
            </div>
            {saving && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("common.saving")}</p>}
            {!settings && !error && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("common.loading")}</p>}
          </section>
        )}

        {tab === "mail" && <MailPanel />}
      </main>
      <Toasts />
    </div>
  );
}

type SmtpInfo = {
  enabled: boolean;
  host: string;
  port: number;
  secure: boolean;
  user: string;
  pass: string;
  hasPass: boolean;
  from: string;
  appUrl: string;
};

function MailPanel() {
  const { t } = useT();
  const [smtp, setSmtp] = useState<SmtpInfo | null>(null);
  const [error, setError] = useState("");
  const [showPass, setShowPass] = useState(false);
  const [to, setTo] = useState("");
  const [verifying, setVerifying] = useState(false);
  const [sending, setSending] = useState(false);
  const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);
  const [recMax, setRecMax] = useState("5");
  const [recWindow, setRecWindow] = useState("60");
  const [recSaving, setRecSaving] = useState(false);
  const [recMsg, setRecMsg] = useState<{ ok: boolean; text: string } | null>(null);

  useEffect(() => {
    api.adminMailStatus().then((r) => setSmtp(r.smtp)).catch((e) => setError(e instanceof Error ? e.message : t("admin.loadFailed")));
    api.adminGetSettings().then((r) => {
      setRecMax(String(r.settings.recoveryLimitMax));
      setRecWindow(String(r.settings.recoveryLimitWindowMin));
    }).catch(() => {});
  }, []);

  async function verify() {
    setVerifying(true);
    setResult(null);
    try {
      await api.adminMailVerify();
      setResult({ ok: true, text: t("center.connOk") });
    } catch (e) {
      setResult({ ok: false, text: e instanceof Error ? e.message : t("center.verifyFailed") });
    } finally {
      setVerifying(false);
    }
  }

  async function sendTest() {
    setSending(true);
    setResult(null);
    try {
      const r = await api.adminMailTest(to.trim());
      setResult({ ok: true, text: t("center.testSent", { to: to.trim(), tail: r.messageId ? ` (${r.messageId})` : "" }) });
    } catch (e) {
      setResult({ ok: false, text: e instanceof Error ? e.message : t("center.mailSendFailed") });
    } finally {
      setSending(false);
    }
  }

  function Row({ label, children }: { label: string; children: React.ReactNode }) {
    return (
      <div className="flex items-center gap-3 py-2">
        <span className="w-24 shrink-0 text-xs font-medium uppercase tracking-wider opacity-50">{label}</span>
        <span className="min-w-0 flex-1 truncate text-sm">{children}</span>
      </div>
    );
  }

  async function saveRecoveryLimits() {
    const max = Number(recMax);
    const win = Number(recWindow);
    if (!Number.isInteger(max) || max < 1 || max > 100 || !Number.isInteger(win) || win < 1 || win > 1440) {
      setRecMsg({ ok: false, text: t("rec.invalid") });
      return;
    }
    setRecSaving(true);
    setRecMsg(null);
    try {
      const res = await api.adminPatchSettings({ recoveryLimitMax: max, recoveryLimitWindowMin: win });
      setRecMax(String(res.settings.recoveryLimitMax));
      setRecWindow(String(res.settings.recoveryLimitWindowMin));
      setRecMsg({ ok: true, text: t("rec.saved") });
    } catch (e) {
      setRecMsg({ ok: false, text: e instanceof Error ? e.message : t("common.saveFailed") });
    } finally {
      setRecSaving(false);
    }
  }

  return (
    <div className="space-y-4">
      <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div className="flex items-center gap-3">
          <span className="grid h-10 w-10 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
            <Mail size={17} />
          </span>
          <div>
            <p className="text-sm font-medium">{t("center.mailTitle")}</p>
            <p className="text-sm opacity-60">
              {smtp == null ? t("center.mailChecking") : smtp.enabled ? t("center.mailFrom", { from: smtp.from }) : t("center.mailOff")}
            </p>
          </div>
          <span className={cn(
            "ml-auto rounded-full px-3 py-1 text-xs font-medium",
            smtp?.enabled ? "bg-emerald-600/10 text-emerald-700 dark:text-emerald-400" : "bg-stone-200/70 dark:bg-zinc-800",
          )}>
            {smtp?.enabled ? t("center.on") : t("center.off")}
          </span>
        </div>
        {error && <p className="mt-3 text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>}
        {!smtp && !error && <p className="mt-3 flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("common.loading")}</p>}
        {smtp && (
          <div className="mt-3 divide-y divide-stone-200/70 rounded-2xl border border-stone-200/70 px-4 dark:divide-zinc-800 dark:border-zinc-800">
            <Row label={t("center.smtpHost")}>{smtp.host || <span className="opacity-50">{t("center.notSet")}</span>}</Row>
            <Row label={t("center.smtpPort")}>{smtp.port} · {smtp.secure ? t("center.tlsImplicit") : t("center.tlsStarttls")}</Row>
            <Row label={t("center.smtpUser")}>{smtp.user || <span className="opacity-50">{t("center.noAuth")}</span>}</Row>
            <Row label={t("center.smtpPass")}>
              <span className="flex items-center gap-2">
                {!smtp.hasPass ? (
                  <span className="opacity-50">{t("center.notSet")}</span>
                ) : showPass ? (
                  <code className="truncate font-mono">{smtp.pass}</code>
                ) : (
                  <code className="select-none blur-sm" aria-label={t("center.hiddenPass")}>••••••••••</code>
                )}
                {smtp.hasPass && (
                  <>
                    <button
                      type="button"
                      onClick={() => setShowPass((v) => !v)}
                      aria-label={showPass ? t("center.hidePass") : t("center.showPass")}
                      className="rounded-full p-1.5 transition hover:bg-stone-200/60 dark:hover:bg-zinc-800"
                    >
                      {showPass ? <EyeOff size={15} /> : <Eye size={15} />}
                    </button>
                    {showPass && <CopyButton text={smtp.pass} />}
                  </>
                )}
              </span>
            </Row>
            <Row label={t("center.smtpFrom")}><span className="truncate">{smtp.from}</span></Row>
            <Row label={t("center.smtpAppUrl")}><span className="truncate">{smtp.appUrl}</span></Row>
          </div>
        )}
        <p className="mt-3 text-sm opacity-60">
          {t("center.credsNote")}
        </p>
      </section>

      <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <p className="text-sm font-medium">{t("center.mailTestTitle")}</p>
        <p className="mt-0.5 text-sm opacity-60">{t("center.mailTestDesc")}</p>
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <Button variant="secondary" size="sm" onClick={verify} disabled={verifying || !smtp?.enabled}>
            {verifying ? <Spinner size={14} /> : null}
            {verifying ? t("center.verifying") : t("center.verifyConn")}
          </Button>
        </div>
        <div className="mt-3 flex flex-col gap-2 sm:flex-row">
          <Input
            type="email"
            placeholder="you@example.com"
            aria-label={t("center.testToAria")}
            value={to}
            onChange={(e) => setTo(e.target.value)}
            className="flex-1"
          />
          <Button size="sm" onClick={sendTest} disabled={sending || !smtp?.enabled || !/^[^\s@]{1,64}@[^\s@]{1,253}\.[^\s@]{2,}$/.test(to.trim())}>
            {sending ? <Spinner size={14} /> : <Send size={14} />}
            {sending ? t("center.sendingMail") : t("center.sendTest")}
          </Button>
        </div>
        {result && (
          <p
            role={result.ok ? "status" : "alert"}
            className={cn(
              "mt-3 rounded-2xl px-4 py-2.5 text-sm",
              result.ok
                ? "bg-emerald-600/10 text-emerald-700 dark:text-emerald-400"
                : "bg-red-500/10 text-red-600 dark:text-red-400",
            )}
          >
            {result.text}
          </p>
        )}
      </section>

      <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <p className="text-sm font-medium">{t("rec.title")}</p>
        <p className="mt-0.5 text-sm opacity-60">{t("rec.desc")}</p>
        <div className="mt-3 flex flex-wrap items-end gap-2">
          <div className="w-32">
            <Field label={t("rec.max")} hint={t("rec.maxHint")}>
              <Input type="number" min={1} max={100} value={recMax} onChange={(e) => setRecMax(e.target.value)} disabled={recSaving} />
            </Field>
          </div>
          <div className="w-32">
            <Field label={t("rec.window")} hint={t("rec.windowHint")}>
              <Input type="number" min={1} max={1440} value={recWindow} onChange={(e) => setRecWindow(e.target.value)} disabled={recSaving} />
            </Field>
          </div>
          <Button size="sm" onClick={saveRecoveryLimits} disabled={recSaving}>
            {recSaving ? <Spinner size={14} /> : null} {t("rec.save")}
          </Button>
        </div>
        {recMsg && (
          <p role={recMsg.ok ? "status" : "alert"} className={cn("mt-3 rounded-2xl px-4 py-2.5 text-sm", recMsg.ok ? "bg-emerald-600/10 text-emerald-700 dark:text-emerald-400" : "bg-red-500/10 text-red-600 dark:text-red-400")}>
            {recMsg.text}
          </p>
        )}
      </section>
    </div>
  );
}