"use client";

import * as React from "react";
import { useAdminQuery } from "@/components/admin/use-query";
import type { PlayerAnalyticsResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, ErrorState, TileSkeleton, ChartSkeleton, StatGrid, StatTile, SegmentedControl } from "@/components/admin/primitives";
import { Bars, ChartFrame, CHART, Histogram } from "@/components/admin/charts";
import { compact, int, isoDay, num, pct, shortDate } from "@/components/admin/format";
import { cn } from "@/lib/utils";

const DAYS = [7, 30, 90] as const;

function dayRange(days: number, anchor: number): string[] {
  return Array.from({ length: days }, (_, i) => new Date(anchor - (days - 1 - i) * 86400_000).toISOString().slice(0, 10));
}

export default function AdminPlayerAnalyticsPage() {
  const [days, setDays] = React.useState<(typeof DAYS)[number]>(30);
  const q = useAdminQuery<PlayerAnalyticsResponse>(`/api/admin/analytics/players?days=${days}`);
  const d = q.data;

  const anchor = q.updatedAt;
  const series = React.useMemo(() => {
    const signups = new Map((d?.signups ?? []).map((r) => [isoDay(r.day), num(r.n)]));
    const act = new Map((d?.activity ?? []).map((r) => [isoDay(r.day), r]));
    return dayRange(days, anchor).map((day) => ({ day, signups: signups.get(day) ?? 0, players: num(act.get(day)?.players ?? 0), spins: num(act.get(day)?.spins ?? 0) }));
  }, [d, days, anchor]);

  const levels = React.useMemo(() => {
    const m = new Map((d?.levels ?? []).map((r) => [num(r.bucket), num(r.n)]));
    return Array.from({ length: 10 }, (_, i) => {
      const b = i + 1;
      const lo = 1 + (b - 1) * 10;
      const hi = b * 10;
      return { bucket: b, label: `${lo}–${hi}`, n: (m.get(b) ?? 0) + (b === 10 ? (m.get(11) ?? 0) : 0) };
    });
  }, [d]);

  const totalSignups = series.reduce((a, r) => a + r.signups, 0);
  const totalSpins = series.reduce((a, r) => a + r.spins, 0);
  const peakPlayers = series.reduce((a, r) => Math.max(a, r.players), 0);
  const barSize = days > 30 ? 6 : days > 7 ? 12 : 24;

  return (
    <>
      <PageHeader
        title="Player Analytics"
        description="Acquisition, activity, level progression and simple recency retention."
        actions={
          <>
            <SegmentedControl value={days} onChange={setDays} items={DAYS.map((v) => ({ value: v, label: `${v}d` }))} />
            <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={5} cols={5} />
          <Panel>
            <ChartSkeleton />
          </Panel>
        </div>
      ) : (
        <div className={cn("space-y-4", q.stale && "opacity-70")}>
          <StatGrid cols={5}>
            <StatTile label={`Signups · ${days}d`} value={int(totalSignups)} sub={`${(totalSignups / days).toFixed(1)} per day`} />
            <StatTile label={`Spins · ${days}d`} value={compact(totalSpins)} sub={int(totalSpins)} />
            <StatTile label="Peak daily players" value={int(peakPlayers)} />
            <StatTile label="Retention d1 / d7" value={<span>{pct(d.retention.total ? d.retention.d1 / d.retention.total : null, 1)} <span className="text-fg-4">/</span> {pct(d.retention.total ? d.retention.d7 / d.retention.total : null, 1)}</span>} sub={`${int(d.retention.d1)} / ${int(d.retention.d7)} of ${int(d.retention.total)} signed in`} tone="accent" />
            <StatTile label="Total accounts" value={int(d.retention.total)} />
          </StatGrid>

          <div className="grid gap-4 xl:grid-cols-3">
            <Panel title="Signups per day">
              <ChartFrame height={200}>
                <Bars data={series} x="day" series={[{ key: "signups", label: "Signups", color: CHART.accent }]} xFormat={(v) => shortDate(String(v))} barSize={barSize} yFormat={(v) => int(v)} />
              </ChartFrame>
            </Panel>
            <Panel title="Active players per day" description="Distinct players with at least one round">
              <ChartFrame height={200}>
                <Bars data={series} x="day" series={[{ key: "players", label: "Players", color: CHART.accent }]} xFormat={(v) => shortDate(String(v))} barSize={barSize} yFormat={(v) => int(v)} />
              </ChartFrame>
            </Panel>
            <Panel title="Spins per day">
              <ChartFrame height={200}>
                <Bars data={series} x="day" series={[{ key: "spins", label: "Spins", color: CHART.grey }]} xFormat={(v) => shortDate(String(v))} barSize={barSize} yFormat={(v) => compact(v)} />
              </ChartFrame>
            </Panel>
          </div>

          <Panel title="Level distribution" description="Accounts per 10-level band (all time)">
            <ChartFrame height={200}>
              <Histogram data={levels} x="label" y="n" yFormat={(v) => int(v)} />
            </ChartFrame>
          </Panel>
        </div>
      )}
    </>
  );
}