"use client";

import * as React from "react";
import Link from "next/link";
import { AlertTriangle, FlaskConical } from "lucide-react";
import { Button } from "@/components/ui";
import { api, ApiClientError } from "@/lib/api";
import { toast } from "@/lib/store";
import { GAME_LIFECYCLE, type GameLifecycle } from "@spinza/shared";
import { useAdminQuery } from "@/components/admin/use-query";
import type { GameListRow, GamesResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, DataTable, ErrorState, TableSkeleton, LifecyclePill, Toggle, DenseSelect, Pill, StatGrid, StatTile, InlineError, type Column } from "@/components/admin/primitives";
import { describeError, int, pct } from "@/components/admin/format";
import { cn } from "@/lib/utils";

export default function AdminGamesPage() {
  const q = useAdminQuery<GamesResponse>("/api/admin/games");
  const d = q.data;
  const [busyKey, setBusyKey] = React.useState<string | null>(null);
  const [lifecycleError, setLifecycleError] = React.useState<{ slug: string; message: string } | null>(null);

  const patchGame = React.useCallback(
    (slug: string, patch: Partial<GameListRow>) => {
      q.mutate((prev) => ({ games: prev.games.map((g) => (g.slug === slug ? { ...g, ...patch } : g)) }));
    },
    [q],
  );

  async function setEnabled(g: GameListRow, enabled: boolean) {
    setBusyKey(`${g.slug}:enabled`);
    patchGame(g.slug, { enabled });
    try {
      await api(`/api/admin/flags/game.${g.slug}.enabled`, { json: { enabled } });
      toast({ title: `${g.name} ${enabled ? "enabled" : "disabled"}`, tone: enabled ? "success" : "default" });
    } catch (e) {
      patchGame(g.slug, { enabled: !enabled });
      toast({ title: "Flag update failed", description: describeError(e), tone: "danger" });
    } finally {
      setBusyKey(null);
    }
  }

  async function setGameFlag(g: GameListRow, key: "isFeatured" | "isNew", value: boolean) {
    setBusyKey(`${g.slug}:${key}`);
    patchGame(g.slug, { [key]: value });
    try {
      await api(`/api/admin/games/${g.slug}/flags`, { json: { [key]: value } });
    } catch (e) {
      patchGame(g.slug, { [key]: !value });
      toast({ title: "Update failed", description: describeError(e), tone: "danger" });
    } finally {
      setBusyKey(null);
    }
  }

  async function setLifecycle(g: GameListRow, lifecycle: GameLifecycle) {
    if (lifecycle === g.lifecycle) return;
    setBusyKey(`${g.slug}:lifecycle`);
    setLifecycleError(null);
    const prev = g.lifecycle;
    patchGame(g.slug, { lifecycle });
    try {
      await api(`/api/admin/games/${g.slug}/lifecycle`, { json: { lifecycle } });
      toast({ title: `${g.name} → ${lifecycle}`, tone: lifecycle === "published" ? "success" : "default" });
      void q.refresh();
    } catch (e) {
      patchGame(g.slug, { lifecycle: prev });
      const msg = e instanceof ApiClientError && e.code === "NOT_CERTIFIED" ? `NOT_CERTIFIED — ${e.message}` : describeError(e);
      setLifecycleError({ slug: g.slug, message: msg });
      toast({ title: "Lifecycle change rejected", description: msg, tone: "danger" });
    } finally {
      setBusyKey(null);
    }
  }

  const cols: Column<GameListRow>[] = [
    {
      key: "name",
      header: "Game",
      render: (g) => (
        <div className="min-w-0">
          <Link href={`/admin/games/${g.slug}`} className="font-medium text-fg hover:text-accent-2">
            {g.name}
          </Link>
          <div className="font-mono text-[11px] text-fg-4">
            {g.slug} · v{g.version}
          </div>
        </div>
      ),
    },
    {
      key: "lifecycle",
      header: "Lifecycle",
      render: (g) => (
        <div className="flex items-center gap-2">
          <LifecyclePill lifecycle={g.lifecycle} />
          <DenseSelect value={g.lifecycle} disabled={busyKey === `${g.slug}:lifecycle`} onChange={(e) => void setLifecycle(g, e.target.value as GameLifecycle)} aria-label={`Lifecycle of ${g.name}`} className="w-[130px]">
            {GAME_LIFECYCLE.map((l) => (
              <option key={l} value={l}>
                {l}
              </option>
            ))}
          </DenseSelect>
        </div>
      ),
    },
    { key: "enabled", header: "Enabled", align: "center", render: (g) => <Toggle checked={g.enabled} disabled={busyKey === `${g.slug}:enabled`} onChange={(v) => void setEnabled(g, v)} label={`Enable ${g.name}`} /> },
    { key: "featured", header: "Featured", align: "center", render: (g) => <Toggle checked={g.isFeatured} disabled={busyKey === `${g.slug}:isFeatured`} onChange={(v) => void setGameFlag(g, "isFeatured", v)} label={`Feature ${g.name}`} /> },
    { key: "new", header: "New", align: "center", render: (g) => <Toggle checked={g.isNew} disabled={busyKey === `${g.slug}:isNew`} onChange={(v) => void setGameFlag(g, "isNew", v)} label={`Mark ${g.name} as new`} /> },
    {
      key: "rtp",
      header: "RTP target / effective",
      align: "right",
      render: (g) => {
        const eff = g.stats?.effectiveRtp ?? null;
        const dev = eff !== null && g.rtp !== null ? eff - g.rtp : null;
        return (
          <span className="tabular">
            {pct(g.rtp)} <span className="text-fg-4">/</span> <span className={cn(dev !== null && Math.abs(dev) > 0.03 ? "text-[#ffc46b]" : "")}>{pct(eff)}</span>
          </span>
        );
      },
    },
    { key: "spins", header: "Spins", align: "right", render: (g) => int(g.stats?.spins ?? 0) },
    {
      key: "validation",
      header: "Validation",
      align: "center",
      render: (g) => {
        const errs = g.validation.filter((v) => v.level === "error").length;
        const warns = g.validation.length - errs;
        if (!g.validation.length) return <Pill tone="success">ok</Pill>;
        return (
          <span className="inline-flex gap-1" title={g.validation.map((v) => `${v.level}: ${v.message}`).join("\n")}>
            {errs ? <Pill tone="danger">{errs} err</Pill> : null}
            {warns ? <Pill tone="warn">{warns} warn</Pill> : null}
          </span>
        );
      },
    },
    {
      key: "actions",
      header: "",
      align: "right",
      render: (g) => (
        <Button variant="ghost" size="sm" href={`/admin/simulator?slug=${g.slug}`} aria-label={`Simulate ${g.name}`}>
          <FlaskConical className="h-3.5 w-3.5" /> Simulate
        </Button>
      ),
    },
  ];

  const summary = d
    ? {
        total: d.games.length,
        published: d.games.filter((g) => g.lifecycle === "published").length,
        disabled: d.games.filter((g) => !g.enabled || g.lifecycle === "disabled").length,
        issues: d.games.filter((g) => g.validation.some((v) => v.level === "error")).length,
      }
    : null;

  return (
    <>
      <PageHeader title="Games" description="Library lifecycle, kill-switches and catalogue flags. Publishing requires a PASS certification for the current version." actions={<RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />} />

      {summary ? (
        <StatGrid cols={4} className="mb-4">
          <StatTile label="Games in library" value={summary.total} compact />
          <StatTile label="Published" value={summary.published} tone="success" compact />
          <StatTile label="Disabled / off" value={summary.disabled} tone={summary.disabled ? "danger" : "neutral"} compact />
          <StatTile label="Definition errors" value={summary.issues} tone={summary.issues ? "danger" : "success"} compact />
        </StatGrid>
      ) : null}

      {lifecycleError ? (
        <div className="mb-3">
          <InlineError>
            <span className="font-semibold">{lifecycleError.slug}</span>: {lifecycleError.message}
          </InlineError>
        </div>
      ) : null}

      <Panel padded={false}>
        {q.error && !d ? (
          <div className="p-4">
            <ErrorState error={q.error} onRetry={() => void q.refresh()} />
          </div>
        ) : !d ? (
          <TableSkeleton rows={10} cols={8} />
        ) : (
          <DataTable columns={cols} rows={d.games} rowKey={(g) => g.id} dense stale={q.stale} empty="No games synced. Run the database seed." rowClassName={(g) => (lifecycleError?.slug === g.slug ? "bg-danger/5" : undefined)} />
        )}
      </Panel>
      <p className="mt-3 flex items-center gap-1.5 text-[12px] text-fg-4">
        <AlertTriangle className="h-3 w-3" /> “Enabled” is the runtime kill-switch (feature flag <code className="font-mono">game.&lt;slug&gt;.enabled</code>); lifecycle controls catalogue visibility.
      </p>
    </>
  );
}