"use client";

import Link from "next/link";
import { Activity, Database, ShieldAlert, Timer } from "lucide-react";
import { useAdminQuery } from "@/components/admin/use-query";
import type { DashboardResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, StatTile, StatGrid, Panel, DataTable, ErrorState, TileSkeleton, type Column, Mono } from "@/components/admin/primitives";
import { compact, dateTime, duration, int, ms, multiplier, pct, sc } from "@/components/admin/format";
import { cn } from "@/lib/utils";

type TopGame = DashboardResponse["topGames"][number];
type HighWin = DashboardResponse["highestWins"][number];

const topGameCols: Column<TopGame>[] = [
  { key: "slug", header: "Game", render: (r) => <Link href={`/admin/games/${r.slug}`} className="font-medium text-fg hover:text-accent-2">{r.slug}</Link> },
  { key: "spins", header: "Spins", align: "right", render: (r) => int(r.spins) },
  { key: "wagered", header: "Wagered", align: "right", render: (r) => sc(r.wagered) },
  { key: "won", header: "Won", align: "right", render: (r) => sc(r.won) },
  { key: "rtp", header: "RTP", align: "right", render: (r) => <span className={cn(r.rtp !== null && (r.rtp > 1.02 || r.rtp < 0.9) ? "text-[#ffc46b]" : "")}>{pct(r.rtp)}</span> },
];

const highWinCols: Column<HighWin>[] = [
  { key: "at", header: "When", render: (r) => <span className="text-fg-3">{dateTime(r.at)}</span> },
  { key: "username", header: "Player", render: (r) => r.username },
  { key: "game", header: "Game", render: (r) => <Link href={`/admin/games/${r.game}`} className="hover:text-accent-2">{r.game}</Link> },
  { key: "bet", header: "Bet", align: "right", render: (r) => sc(r.bet) },
  { key: "win", header: "Win", align: "right", render: (r) => <span className="text-credit">{sc(r.win)}</span> },
  { key: "multiplier", header: "×", align: "right", render: (r) => multiplier(r.multiplier) },
  { key: "roundId", header: "Round", mono: true, render: (r) => <Mono>{r.roundId}</Mono> },
];

export default function AdminDashboardPage() {
  const q = useAdminQuery<DashboardResponse>("/api/admin/dashboard", { refreshMs: 30_000 });
  const d = q.data;

  return (
    <>
      <PageHeader title="Dashboard" description="Live platform overview. Figures refresh every 30 seconds." actions={<RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />} />

      {q.error && !d ? (
        <ErrorState error={q.error} onRetry={() => void q.refresh()} />
      ) : !d ? (
        <div className="space-y-4">
          <TileSkeleton count={6} cols={6} />
          <TileSkeleton count={6} cols={6} />
        </div>
      ) : (
        <div className={cn("space-y-5", q.stale && "opacity-70")}>
          <StatGrid cols={6}>
            <StatTile label="Registered users" value={int(d.users.registered)} />
            <StatTile label="DAU / WAU / MAU" value={<span>{compact(d.users.dau)} <span className="text-fg-4">/</span> {compact(d.users.wau)} <span className="text-fg-4">/</span> {compact(d.users.mau)}</span>} sub="Distinct players with rounds" />
            <StatTile label="Active sessions" value={int(d.users.activeSessions)} sub="Seen in the last 30 min" />
            <StatTile label="Live players" value={int(d.users.livePlayers)} tone="accent" sub="Spinning in the last 5 min" />
            <StatTile label="Spins today" value={int(d.today.spins)} sub="UTC day" />
            <StatTile label="Avg session" value={duration(d.averageSessionSec)} sub="Sessions started this week" />
          </StatGrid>
          <StatGrid cols={6}>
            <StatTile label="Credits wagered today" value={compact(d.today.wagered)} sub={sc(d.today.wagered)} />
            <StatTile label="Credits won today" value={compact(d.today.won)} sub={sc(d.today.won)} />
            <StatTile label="Effective RTP today" value={pct(d.today.effectiveRtp)} tone={d.today.effectiveRtp === null ? "neutral" : d.today.effectiveRtp > 1.02 || d.today.effectiveRtp < 0.9 ? "danger" : "success"} sub="won ÷ wagered" />
            <StatTile label="Avg spin latency" value={ms(d.today.avgSpinMs)} icon={<Timer className="h-3.5 w-3.5" />} />
            <StatTile label="p95 spin latency" value={ms(d.today.p95SpinMs)} tone={d.today.p95SpinMs > 250 ? "danger" : "neutral"} />
            <StatTile label="High-severity events" value={int(d.health.highSeverityEvents24h)} tone={d.health.highSeverityEvents24h > 0 ? "danger" : "success"} sub="Last 24 h" icon={<ShieldAlert className="h-3.5 w-3.5" />} />
          </StatGrid>

          <div className="grid gap-4 xl:grid-cols-2">
            <Panel title="Top games" description="Last 7 days, by spins" padded={false} actions={<Link href="/admin/analytics/games" className="text-[12px] text-fg-3 hover:text-fg">All analytics →</Link>}>
              <DataTable columns={topGameCols} rows={d.topGames} rowKey={(r) => r.slug} dense empty="No rounds recorded in the last 7 days." />
            </Panel>
            <Panel title="Highest wins" description="All time, top 10 rounds" padded={false}>
              <DataTable columns={highWinCols} rows={d.highestWins} rowKey={(r) => r.roundId} dense empty="No rounds yet." />
            </Panel>
          </div>

          <Panel title="Health" description="API process and database" padded={false}>
            <div className="grid grid-cols-2 divide-y divide-line text-[13px] sm:grid-cols-5 sm:divide-x sm:divide-y-0">
              <HealthCell icon={<Database className="h-3.5 w-3.5" />} label="DB latency" value={d.health.dbLatencyMs < 0 ? "down" : ms(d.health.dbLatencyMs)} tone={d.health.dbLatencyMs < 0 ? "danger" : d.health.dbLatencyMs > 50 ? "warn" : "ok"} />
              <HealthCell icon={<ShieldAlert className="h-3.5 w-3.5" />} label="High-severity 24 h" value={int(d.health.highSeverityEvents24h)} tone={d.health.highSeverityEvents24h > 0 ? "danger" : "ok"} />
              <HealthCell icon={<Activity className="h-3.5 w-3.5" />} label="Uptime" value={duration(d.health.uptimeSec)} tone="ok" />
              <HealthCell label="Version" value={<Mono>v{d.health.version}</Mono>} />
              <HealthCell label="Node" value={<Mono>{d.health.node}</Mono>} />
            </div>
          </Panel>
        </div>
      )}
    </>
  );
}

function HealthCell({ icon, label, value, tone }: { icon?: React.ReactNode; label: string; value: React.ReactNode; tone?: "ok" | "warn" | "danger" }) {
  return (
    <div className="flex items-center gap-3 px-4 py-3">
      {tone ? <span className={cn("h-2 w-2 shrink-0 rounded-full", tone === "ok" ? "bg-success" : tone === "warn" ? "bg-[#ffb454]" : "bg-danger")} /> : <span className="h-2 w-2 shrink-0" />}
      <div className="min-w-0">
        <div className="flex items-center gap-1 text-[11px] uppercase tracking-wider text-fg-4">
          {icon}
          {label}
        </div>
        <div className="truncate font-medium">{value}</div>
      </div>
    </div>
  );
}