"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { ArrowLeft, History, Copy, Check, ChevronRight } from "lucide-react";
import type { RoundHistoryEntry } from "@spinza/shared";
import { formatMultiplier, formatSC, classifyWin, WIN_CLASSES } from "@spinza/shared";
import { api, ApiClientError } from "@/lib/api";
import { toast } from "@/lib/store";
import { cn } from "@/lib/utils";
import { Badge, Button, Card, Empty, Sheet, Skeleton } from "@/components/ui";
import { AppShell } from "@/components/shell/app-shell";
import { RequireAuth } from "@/components/shell/require-auth";
import { ApiErrorState } from "@/components/shell/api-error";
import { useRouter } from "next/navigation";

type Entry = RoundHistoryEntry & { features: string[] };
interface Page {
  entries: Entry[];
  nextBefore: string | null;
}
interface RoundDetail {
  roundId: string;
  game: string;
  version: string;
  bet: number;
  win: number;
  multiplier: number;
  balanceAfter: number;
  createdAt: string;
  result: unknown;
  features: string[];
}

const LIMIT = 40;

function fmtDate(iso: string) {
  const d = new Date(iso);
  return d.toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
}

function WinTag({ multiplier }: { multiplier: number }) {
  const cls = classifyWin(multiplier);
  if (cls === "none" || cls === "regular") return null;
  const label = WIN_CLASSES.find((w) => w.id === cls)?.label ?? "";
  return <Badge tone={cls === "legendary" || cls === "epic" ? "accent" : cls === "mega" ? "new" : "success"}>{label}</Badge>;
}

function RoundSheet({ roundId, onClose }: { roundId: string | null; onClose: () => void }) {
  const [detail, setDetail] = useState<RoundDetail | null>(null);
  const [error, setError] = useState<unknown>(null);
  const [copied, setCopied] = useState(false);

  // Reset when a different round is opened (adjust-state-from-props), then fetch.
  const [seen, setSeen] = useState(roundId);
  if (roundId !== seen) {
    setSeen(roundId);
    setDetail(null);
    setError(null);
  }
  useEffect(() => {
    if (!roundId) return;
    let alive = true;
    api<RoundDetail>(`/api/user/rounds/${roundId}`)
      .then((d) => alive && setDetail(d))
      .catch((e: unknown) => alive && setError(e));
    return () => {
      alive = false;
    };
  }, [roundId]);

  const copy = async () => {
    if (!roundId) return;
    try {
      await navigator.clipboard.writeText(roundId);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      toast({ title: "Copy unavailable", tone: "danger" });
    }
  };

  const gameName = (detail?.game ?? "").replace(/-/g, " ");
  const resultObj = detail && detail.result && typeof detail.result === "object" ? (detail.result as Record<string, unknown>) : null;
  const summary = resultObj ? Object.entries(resultObj).filter(([, v]) => typeof v === "number" || typeof v === "string" || typeof v === "boolean") : [];

  return (
    <Sheet open={!!roundId} onClose={onClose} title="Round details">
      {error ? (
        <ApiErrorState error={error} compact />
      ) : !detail ? (
        <div className="space-y-3" aria-busy>
          <Skeleton className="h-6 w-1/2" />
          <Skeleton className="h-24" />
          <Skeleton className="h-16" />
        </div>
      ) : (
        <div className="space-y-5">
          <div>
            <div className="flex items-center gap-2">
              <Link href={`/games/${detail.game}`} className="text-lg font-semibold capitalize tracking-tight hover:text-accent-2" onClick={onClose}>
                {gameName}
              </Link>
              <WinTag multiplier={detail.multiplier} />
            </div>
            <div className="text-[13px] text-fg-3">
              {fmtDate(detail.createdAt)} · v{detail.version}
            </div>
          </div>
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
            {[
              { l: "Bet", v: formatSC(detail.bet) },
              { l: "Win", v: <span className={detail.win > 0 ? "text-credit" : ""}>{formatSC(detail.win)}</span> },
              { l: "Multiplier", v: formatMultiplier(detail.multiplier) },
              { l: "Balance after", v: formatSC(detail.balanceAfter) },
            ].map((x) => (
              <div key={x.l} className="surface rounded-md p-3">
                <div className="eyebrow">{x.l}</div>
                <div className="mt-1 text-[15px] font-semibold tabular">{x.v}</div>
              </div>
            ))}
          </div>
          <div>
            <div className="eyebrow mb-2">Features triggered</div>
            {detail.features.length ? (
              <div className="flex flex-wrap gap-1.5">
                {detail.features.map((f) => (
                  <Badge key={f} tone="accent">
                    {f.replace(/[_-]/g, " ")}
                  </Badge>
                ))}
              </div>
            ) : (
              <p className="text-sm text-fg-3">Base game only — no features this round.</p>
            )}
          </div>
          {summary.length ? (
            <div>
              <div className="eyebrow mb-2">Outcome</div>
              <dl className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-[13px]">
                {summary.slice(0, 12).map(([k, v]) => (
                  <div key={k} className="flex justify-between gap-2 border-b border-line py-1">
                    <dt className="truncate capitalize text-fg-3">{k.replace(/([A-Z])/g, " $1").replace(/[_-]/g, " ")}</dt>
                    <dd className="tabular font-medium">{String(v)}</dd>
                  </div>
                ))}
              </dl>
            </div>
          ) : null}
          <div>
            <div className="eyebrow mb-2">Round ID</div>
            <div className="flex items-center gap-2">
              <code className="flex-1 truncate rounded-md bg-bg-1 px-3 py-2 font-mono text-[12px] text-fg-2">{detail.roundId}</code>
              <Button variant="secondary" size="icon" onClick={copy} aria-label="Copy round ID">
                {copied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
            <p className="mt-2 text-[12px] text-fg-4">Every round is recorded server-side. Quote this ID if you ever need to reference a specific spin.</p>
          </div>
        </div>
      )}
    </Sheet>
  );
}

function fetchPage(before: string | null): Promise<Page> {
  const q = new URLSearchParams({ limit: String(LIMIT) });
  if (before) q.set("before", before);
  return api<Page>(`/api/user/history?${q}`);
}

function HistoryBody() {
  const router = useRouter();
  const [entries, setEntries] = useState<Entry[] | null>(null); // null = first page loading
  const [nextBefore, setNextBefore] = useState<string | null>(null);
  const [more, setMore] = useState(false);
  const [error, setError] = useState<unknown>(null);
  const [open, setOpen] = useState<string | null>(null);
  const [tick, setTick] = useState(0);

  const fail = useCallback(
    (e: unknown) => {
      if (e instanceof ApiClientError && e.status === 401) {
        router.replace("/login?next=%2Fprofile%2Fhistory&reason=expired");
        return;
      }
      setError(e);
    },
    [router],
  );

  useEffect(() => {
    let alive = true;
    fetchPage(null)
      .then((page) => {
        if (!alive) return;
        setEntries(page.entries);
        setNextBefore(page.nextBefore);
        setError(null);
      })
      .catch((e: unknown) => alive && fail(e));
    return () => {
      alive = false;
    };
  }, [tick, fail]);

  const retry = () => {
    setEntries(null);
    setError(null);
    setTick((t) => t + 1);
  };

  const loadMore = async () => {
    if (!nextBefore || more) return;
    setMore(true);
    try {
      const page = await fetchPage(nextBefore);
      setEntries((cur) => [...(cur ?? []), ...page.entries]);
      setNextBefore(page.nextBefore);
    } catch (e) {
      fail(e);
      toast({ title: "Could not load more", tone: "danger" });
    } finally {
      setMore(false);
    }
  };

  if (error && !entries?.length) return <ApiErrorState error={error} retry={retry} />;
  if (entries === null) {
    return (
      <div className="space-y-2" aria-busy>
        {Array.from({ length: 8 }).map((_, i) => (
          <Skeleton key={i} className="h-14 rounded-md" />
        ))}
      </div>
    );
  }
  if (!entries.length) return <Empty title="No rounds yet" description="Your spins will be listed here with bet, win, multiplier and balance." icon={<History className="h-5 w-5" />} action={<Button href="/games">Play a game</Button>} />;

  return (
    <>
      <Card className="overflow-hidden">
        <div className="hidden grid-cols-[150px_1fr_110px_120px_90px_130px_28px] gap-3 border-b border-line px-4 py-2.5 text-[11px] font-semibold uppercase tracking-wider text-fg-3 md:grid">
          <span>Time</span>
          <span>Game</span>
          <span className="text-right">Bet</span>
          <span className="text-right">Win</span>
          <span className="text-right">Multi</span>
          <span className="text-right">Balance after</span>
          <span />
        </div>
        <ul className="divide-y divide-line">
          {entries.map((e) => (
            <li key={e.roundId}>
              <button onClick={() => setOpen(e.roundId)} className="grid w-full grid-cols-[1fr_auto] items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-2 focus-ring md:grid-cols-[150px_1fr_110px_120px_90px_130px_28px]">
                <span className="text-[12px] tabular text-fg-3 md:text-[13px]">{fmtDate(e.createdAt)}</span>
                <span className="col-start-1 row-start-2 flex items-center gap-2 md:col-auto md:row-auto">
                  <span className="truncate text-[15px] font-medium">{e.gameName}</span>
                  <WinTag multiplier={e.multiplier} />
                </span>
                <span className="hidden text-right text-sm tabular text-fg-2 md:block">{formatSC(e.bet)}</span>
                <span className={cn("col-start-2 row-start-1 text-right text-sm font-semibold tabular md:col-auto md:row-auto", e.win > 0 ? "text-credit" : "text-fg-3")}>{e.win > 0 ? `+${formatSC(e.win)}` : formatSC(0)}</span>
                <span className="col-start-2 row-start-2 text-right text-[12px] tabular text-fg-3 md:col-auto md:row-auto md:text-sm">
                  <span className="md:hidden">Bet {formatSC(e.bet, { unit: false })} · </span>
                  {formatMultiplier(e.multiplier)}
                </span>
                <span className="hidden text-right text-sm tabular text-fg-2 md:block">{formatSC(e.balanceAfter)}</span>
                <ChevronRight className="hidden h-4 w-4 text-fg-4 md:block" />
              </button>
            </li>
          ))}
        </ul>
      </Card>
      {nextBefore ? (
        <div className="mt-4 flex justify-center">
          <Button variant="secondary" onClick={loadMore} loading={more}>
            Load more
          </Button>
        </div>
      ) : (
        <p className="mt-4 text-center text-[12px] text-fg-4">That&apos;s every round on record.</p>
      )}
      <RoundSheet roundId={open} onClose={() => setOpen(null)} />
    </>
  );
}

export default function HistoryPage() {
  return (
    <AppShell>
      <RequireAuth>
        <div className="mb-6">
          <Link href="/profile" className="tap -ml-1 inline-flex h-9 min-h-0 items-center gap-1 text-sm text-fg-3 hover:text-fg">
            <ArrowLeft className="h-4 w-4" /> Profile
          </Link>
          <h1 className="mt-1 text-3xl font-semibold tracking-tight sm:text-4xl">Round history</h1>
          <p className="mt-2 max-w-xl text-sm text-fg-3">Every spin, newest first. Tap a round for the full result and the features it triggered.</p>
        </div>
        <HistoryBody />
      </RequireAuth>
    </AppShell>
  );
}