"use client";

import * as React from "react";
import { AlertTriangle, Save, Wrench } from "lucide-react";
import { Button } from "@/components/ui";
import { api } from "@/lib/api";
import { toast } from "@/lib/store";
import { cn } from "@/lib/utils";
import { useAdmin } from "@/components/admin/store";
import { useAdminQuery } from "@/components/admin/use-query";
import type { MaintenanceSetting, ProfanitySetting, SettingsResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, ErrorState, TableSkeleton, Toggle, DenseTextarea, FieldLabel, InlineError, ConfirmDialog, Pill } from "@/components/admin/primitives";
import { describeError, int } from "@/components/admin/format";

const FLAG_LABELS: Record<string, string> = {
  "registration.enabled": "New account creation",
  "dailyRewards.enabled": "Daily reward claims",
  "leaderboards.enabled": "Public leaderboards",
  "missions.enabled": "Daily & weekly missions",
  "achievements.enabled": "Achievements",
  "rescue.enabled": "Rescue credits at zero balance",
};

export default function AdminSettingsPage() {
  const q = useAdminQuery<SettingsResponse>("/api/admin/settings");
  const d = q.data;
  const [busyFlag, setBusyFlag] = React.useState<string | null>(null);

  async function setFlag(key: string, enabled: boolean) {
    setBusyFlag(key);
    q.mutate((prev) => ({ ...prev, flags: { ...prev.flags, [key]: enabled } }));
    try {
      await api(`/api/admin/flags/${encodeURIComponent(key)}`, { json: { enabled } });
      toast({ title: `${FLAG_LABELS[key] ?? key} ${enabled ? "enabled" : "disabled"}`, tone: enabled ? "success" : "default" });
    } catch (e) {
      q.mutate((prev) => ({ ...prev, flags: { ...prev.flags, [key]: !enabled } }));
      toast({ title: "Flag update failed", description: describeError(e), tone: "danger" });
    } finally {
      setBusyFlag(null);
    }
  }

  const platformFlags = Object.entries(d?.flags ?? {}).filter(([k]) => !k.startsWith("game.")).sort(([a], [b]) => a.localeCompare(b));
  const gameFlags = Object.entries(d?.flags ?? {}).filter(([k]) => k.startsWith("game.")).sort(([a], [b]) => a.localeCompare(b));
  const gamesOff = gameFlags.filter(([, v]) => !v).length;

  return (
    <>
      <PageHeader title="Settings" description="Feature flags, maintenance mode and the username profanity list." actions={<RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />} />
      {q.error && !d ? (
        <ErrorState error={q.error} onRetry={() => void q.refresh()} />
      ) : !d ? (
        <div className="grid gap-4 xl:grid-cols-2">
          <Panel>
            <TableSkeleton rows={6} cols={2} />
          </Panel>
          <Panel>
            <TableSkeleton rows={4} cols={2} />
          </Panel>
        </div>
      ) : (
        <div className={cn("grid gap-4 xl:grid-cols-2", q.stale && "opacity-70")}>
          <div className="space-y-4">
            <Panel title="Platform feature flags" description="Runtime switches read by the API within 10 s" padded={false}>
              <ul className="divide-y divide-line/60">
                {platformFlags.map(([key, enabled]) => (
                  <li key={key} className="flex items-center justify-between gap-4 px-4 py-2.5">
                    <div className="min-w-0">
                      <div className="text-[13px] font-medium text-fg">{FLAG_LABELS[key] ?? key}</div>
                      <div className="font-mono text-[11px] text-fg-4">{key}</div>
                    </div>
                    <Toggle checked={enabled} disabled={busyFlag === key} onChange={(v) => void setFlag(key, v)} label={FLAG_LABELS[key] ?? key} />
                  </li>
                ))}
                {platformFlags.length === 0 ? <li className="px-4 py-6 text-center text-[13px] text-fg-4">No flags defined. Run the database seed.</li> : null}
              </ul>
            </Panel>
            <Panel title="Game kill-switches" description={`${gameFlags.length} games · ${gamesOff ? `${gamesOff} disabled` : "all enabled"}`} padded={false}>
              <ul className="grid divide-y divide-line/60 sm:grid-cols-2 sm:divide-y-0">
                {gameFlags.map(([key, enabled]) => (
                  <li key={key} className="flex items-center justify-between gap-3 border-b border-line/60 px-4 py-2 sm:[&:nth-last-child(-n+2)]:border-b-0">
                    <span className="truncate font-mono text-[12px] text-fg-2">{key.replace(/^game\./, "").replace(/\.enabled$/, "")}</span>
                    <Toggle checked={enabled} disabled={busyFlag === key} onChange={(v) => void setFlag(key, v)} label={key} />
                  </li>
                ))}
              </ul>
            </Panel>
          </div>
          <div className="space-y-4">
            <MaintenanceCard key={`m-${q.updatedAt}`} initial={(d.settings["maintenance"] as MaintenanceSetting | undefined) ?? { enabled: false, message: "Spinza is getting an upgrade. Your credits and progress are safe." }} onSaved={() => void q.refresh()} />
            <ProfanityCard key={`p-${q.updatedAt}`} initial={((d.settings["profanity"] as ProfanitySetting | undefined)?.words ?? []).filter((w) => typeof w === "string")} onSaved={() => void q.refresh()} />
          </div>
        </div>
      )}
    </>
  );
}

function MaintenanceCard({ initial, onSaved }: { initial: MaintenanceSetting; onSaved: () => void }) {
  const setMaintenance = useAdmin((s) => s.setMaintenance);
  const [enabled, setEnabled] = React.useState(!!initial.enabled);
  const [message, setMessage] = React.useState(initial.message ?? "");
  const [confirm, setConfirm] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const dirty = enabled !== !!initial.enabled || message !== (initial.message ?? "");
  const valid = message.trim().length >= 3;

  async function save() {
    setBusy(true);
    setError(null);
    try {
      const value = { enabled, message: message.trim() };
      await api("/api/admin/settings/maintenance", { json: { value } });
      setMaintenance(value);
      toast({ title: enabled ? "Maintenance mode ON" : "Maintenance mode OFF", description: enabled ? "Players now see the maintenance message." : "The platform is live again.", tone: enabled ? "danger" : "success" });
      setConfirm(false);
      onSaved();
    } catch (e) {
      setError(describeError(e));
      setConfirm(false);
    } finally {
      setBusy(false);
    }
  }

  return (
    <Panel
      title={
        <span className="inline-flex items-center gap-2">
          <Wrench className="h-3.5 w-3.5 text-fg-3" /> Maintenance mode
          <Pill tone={initial.enabled ? "danger" : "success"} dot>
            {initial.enabled ? "active" : "off"}
          </Pill>
        </span>
      }
      description="When enabled every player request returns 503 with this message. Admin routes stay reachable."
      tone={initial.enabled ? "danger" : undefined}
    >
      <div className="flex items-center justify-between gap-4 rounded-sm border border-line bg-bg-1/60 px-3 py-2.5">
        <div>
          <div className="text-[13px] font-medium">Maintenance enabled</div>
          <div className="text-[12px] text-fg-3">Blocks gameplay, sign-in and registration.</div>
        </div>
        <Toggle checked={enabled} onChange={setEnabled} label="Maintenance enabled" size="md" />
      </div>
      <div className="mt-3">
        <FieldLabel hint={`${message.trim().length} chars · min 3`}>Player-facing message</FieldLabel>
        <DenseTextarea rows={3} value={message} onChange={(e) => setMessage(e.target.value)} />
      </div>
      {error ? <div className="mt-3"><InlineError>{error}</InlineError></div> : null}
      <div className="mt-4 flex justify-end gap-2">
        <Button size="sm" variant="ghost" onClick={() => { setEnabled(!!initial.enabled); setMessage(initial.message ?? ""); }} disabled={!dirty || busy}>
          Reset
        </Button>
        <Button size="sm" variant={enabled ? "danger" : "primary"} onClick={() => setConfirm(true)} disabled={!dirty || !valid}>
          <Save className="h-3.5 w-3.5" /> {enabled && !initial.enabled ? "Enable maintenance" : !enabled && initial.enabled ? "Disable maintenance" : "Save"}
        </Button>
      </div>
      <ConfirmDialog open={confirm} onClose={() => setConfirm(false)} onConfirm={() => void save()} title={enabled ? "Enable maintenance mode?" : "Update maintenance settings?"} confirmLabel={enabled ? "Yes, take Spinza offline" : "Save"} danger={enabled} loading={busy}
        description={
          enabled ? (
            <span className="inline-flex items-start gap-2">
              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-danger" />
              <span>All player traffic will receive a 503 immediately. Active spins finish, no credits are lost. This is logged as a high-severity event.</span>
            </span>
          ) : (
            "Players will see the platform again as soon as the API cache refreshes (≤ 10 s)."
          )
        }
      >
        <blockquote className="rounded-sm border border-line bg-bg-1 px-3 py-2 text-[13px] italic text-fg-2">“{message.trim()}”</blockquote>
      </ConfirmDialog>
    </Panel>
  );
}

function ProfanityCard({ initial, onSaved }: { initial: string[]; onSaved: () => void }) {
  const [text, setText] = React.useState(initial.join("\n"));
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const words = React.useMemo(() => Array.from(new Set(text.split(/[\n,]+/).map((w) => w.trim().toLowerCase()).filter(Boolean))), [text]);
  const dirty = JSON.stringify(words) !== JSON.stringify(initial.map((w) => w.trim().toLowerCase()).filter(Boolean));

  async function save() {
    setBusy(true);
    setError(null);
    try {
      await api("/api/admin/settings/profanity", { json: { value: { words } } });
      toast({ title: "Profanity list saved", description: `${int(words.length)} custom words`, tone: "success" });
      onSaved();
    } catch (e) {
      setError(describeError(e));
    } finally {
      setBusy(false);
    }
  }

  return (
    <Panel title="Username profanity list" description="Extends the built-in list; one word per line (or comma-separated). Matching is case-insensitive." actions={<span className="text-[12px] text-fg-3 tabular">{int(words.length)} words</span>}>
      <DenseTextarea rows={8} value={text} onChange={(e) => setText(e.target.value)} placeholder={"one word per line"} className="font-mono" spellCheck={false} />
      {error ? <div className="mt-3"><InlineError>{error}</InlineError></div> : null}
      <div className="mt-3 flex justify-end gap-2">
        <Button size="sm" variant="ghost" onClick={() => setText(initial.join("\n"))} disabled={!dirty || busy}>
          Reset
        </Button>
        <Button size="sm" variant="accent" onClick={() => void save()} disabled={!dirty} loading={busy}>
          <Save className="h-3.5 w-3.5" /> Save list
        </Button>
      </div>
    </Panel>
  );
}