"use client";

import * as React from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { CheckCircle2, FlaskConical, Play, XCircle } from "lucide-react";
import { BET_LEVELS } from "@spinza/shared";
import { Button, Progress, Spinner } from "@/components/ui";
import { api, ApiClientError } from "@/lib/api";
import { toast } from "@/lib/store";
import { cn, timeAgo } from "@/lib/utils";
import { useAdminQuery } from "@/components/admin/use-query";
import type { GamesResponse, SimulationRunRow, SimulatorRunResponse, SimulatorRunsResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, ErrorState, TableSkeleton, DenseSelect, DenseInput, FieldLabel, Toggle, SegmentedControl, Pill, PassFail, InlineError, EmptyState, LifecyclePill, Mono } from "@/components/admin/primitives";
import { SimulationResults } from "@/components/admin/simulation-results";
import { dateTime, describeError, durationMs, int, num, pct, signedPct } from "@/components/admin/format";

const PRESETS = [10_000, 100_000, 1_000_000, 10_000_000] as const;
const POLL_MS = 1500;

export default function AdminSimulatorPage() {
  return (
    <React.Suspense fallback={<PageHeader title="Game Simulator" />}>
      <Simulator />
    </React.Suspense>
  );
}

function Simulator() {
  const params = useSearchParams();
  const router = useRouter();
  const games = useAdminQuery<GamesResponse>("/api/admin/games");
  const runs = useAdminQuery<SimulatorRunsResponse>("/api/admin/simulator/runs?limit=20");

  const initialSlug = params.get("slug") ?? "";
  const initialRun = params.get("run");
  const [slug, setSlug] = React.useState(initialSlug);
  const [spins, setSpins] = React.useState<number>(100_000);
  const [customSpins, setCustomSpins] = React.useState("");
  const [bet, setBet] = React.useState<number>(100);
  const [certify, setCertify] = React.useState(params.get("certify") === "1");
  const [starting, setStarting] = React.useState(false);
  const [startError, setStartError] = React.useState<string | null>(null);

  const [activeRunId, setActiveRunId] = React.useState<string | null>(initialRun);
  const [run, setRun] = React.useState<SimulationRunRow | null>(null);
  const [runError, setRunError] = React.useState<string | null>(null);

  // Default to the first game once the library loads (when no slug was preselected).
  const firstSlug = games.data?.games[0]?.slug ?? "";
  const effectiveSlug = slug || firstSlug;
  const selected = games.data?.games.find((g) => g.slug === effectiveSlug) ?? null;

  const effectiveSpins = customSpins ? Number(customSpins) : spins;
  const spinsOk = Number.isInteger(effectiveSpins) && effectiveSpins >= 1000 && effectiveSpins <= 10_000_000;

  /* ---- polling ---- */
  const refreshRuns = runs.refresh;
  React.useEffect(() => {
    if (!activeRunId) return;
    let cancelled = false;
    let timer: ReturnType<typeof setTimeout> | null = null;
    const tick = async () => {
      try {
        const r = await api<SimulatorRunResponse>(`/api/admin/simulator/runs/${activeRunId}`);
        if (cancelled) return;
        setRun(r.run);
        setRunError(null);
        if (r.run.status === "running") timer = setTimeout(tick, POLL_MS);
        else void refreshRuns();
      } catch (e) {
        if (cancelled) return;
        setRunError(describeError(e));
        if (!(e instanceof ApiClientError && (e.status === 404 || e.status === 401))) timer = setTimeout(tick, POLL_MS * 2);
      }
    };
    void tick();
    return () => {
      cancelled = true;
      if (timer) clearTimeout(timer);
    };
  }, [activeRunId, refreshRuns]);

  async function start() {
    if (!effectiveSlug || !spinsOk) return;
    setStarting(true);
    setStartError(null);
    try {
      const r = await api<{ runId: string }>("/api/admin/simulator/run", { json: { slug: effectiveSlug, spins: effectiveSpins, bet, certify } });
      setRun(null);
      setActiveRunId(r.runId);
      router.replace(`/admin/simulator?slug=${effectiveSlug}&run=${r.runId}`);
      toast({ title: "Simulation started", description: `${selected?.name ?? effectiveSlug} · ${int(effectiveSpins)} spins${certify ? " · certify" : ""}` });
      void runs.refresh();
    } catch (e) {
      const msg = e instanceof ApiClientError && e.code === "BUSY" ? e.message : describeError(e);
      setStartError(msg);
    } finally {
      setStarting(false);
    }
  }

  function openRun(r: SimulationRunRow) {
    setRun(null);
    setRunError(null);
    setActiveRunId(r.id);
    if (r.gameSlug !== slug) setSlug(r.gameSlug);
    router.replace(`/admin/simulator?slug=${r.gameSlug}&run=${r.id}`);
  }

  const busy = run?.status === "running";

  return (
    <>
      <PageHeader title="Game Simulator" description="Run Monte-Carlo simulations of any game definition in worker threads, watch RTP converge and issue internal certifications." actions={<RefreshButton onClick={() => void runs.refresh()} loading={runs.refreshing} />} />

      <div className="grid gap-4 xl:grid-cols-[360px_1fr]">
        {/* Left column: configuration + recent runs */}
        <div className="space-y-4">
          <Panel title="Configuration" description="Spins ≥ 1,000 · up to 10M">
            {games.error && !games.data ? (
              <ErrorState error={games.error} onRetry={() => void games.refresh()} />
            ) : (
              <div className="space-y-4">
                <div>
                  <FieldLabel hint={selected ? <LifecyclePill lifecycle={selected.lifecycle} /> : undefined}>Game</FieldLabel>
                  <DenseSelect className="w-full" value={effectiveSlug} onChange={(e) => setSlug(e.target.value)} disabled={!games.data} aria-label="Game">
                    {!games.data ? <option>Loading…</option> : null}
                    {games.data?.games.map((g) => (
                      <option key={g.slug} value={g.slug}>
                        {g.name} · v{g.version}
                      </option>
                    ))}
                  </DenseSelect>
                  {selected ? (
                    <div className="mt-1.5 flex flex-wrap gap-x-3 text-[12px] text-fg-3">
                      <span>target RTP {pct(selected.rtp)}</span>
                      <span>payScale {selected.payScale?.toFixed(4) ?? "—"}</span>
                      <Link href={`/admin/games/${selected.slug}`} className="text-fg-3 underline-offset-2 hover:text-fg hover:underline">
                        details →
                      </Link>
                    </div>
                  ) : null}
                </div>

                <div>
                  <FieldLabel hint={spinsOk ? `${int(effectiveSpins)} spins` : "1,000 – 10,000,000"}>Spins</FieldLabel>
                  <SegmentedControl
                    className="w-full [&>button]:flex-1"
                    value={customSpins ? 0 : spins}
                    onChange={(v) => {
                      setSpins(v);
                      setCustomSpins("");
                    }}
                    items={PRESETS.map((p) => ({ value: p, label: p >= 1_000_000 ? `${p / 1_000_000}M` : `${p / 1000}K` }))}
                  />
                  <DenseInput className="mt-2 font-mono" inputMode="numeric" placeholder="Custom spin count" value={customSpins} onChange={(e) => setCustomSpins(e.target.value.replace(/\D/g, ""))} aria-label="Custom spin count" />
                </div>

                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <FieldLabel>Bet (SC)</FieldLabel>
                    <DenseSelect className="w-full" value={bet} onChange={(e) => setBet(Number(e.target.value))} aria-label="Bet">
                      {BET_LEVELS.map((b) => (
                        <option key={b} value={b}>
                          {b.toLocaleString("en-US")} SC
                        </option>
                      ))}
                    </DenseSelect>
                  </div>
                  <div>
                    <FieldLabel>Certify</FieldLabel>
                    <div className="flex h-9 items-center gap-2">
                      <Toggle checked={certify} onChange={setCertify} label="Produce a certification report" />
                      <span className="text-[12px] text-fg-3">{certify ? "report + checks" : "stats only"}</span>
                    </div>
                  </div>
                </div>
                {certify && effectiveSpins < 1_000_000 ? <p className="text-[12px] text-[#ffc46b]">A production certification needs 1M spins; smaller runs relax the minimum-spins rule and are for exploration only.</p> : null}

                {startError ? <InlineError>{startError}</InlineError> : null}

                <Button variant="accent" className="w-full" onClick={() => void start()} loading={starting} disabled={!effectiveSlug || !spinsOk || busy}>
                  <Play className="h-4 w-4" /> {busy ? "Simulation running…" : "Run simulation"}
                </Button>
              </div>
            )}
          </Panel>

          <Panel title="Recent runs" description="Click to load a result" padded={false}>
            {runs.error && !runs.data ? (
              <div className="p-3">
                <ErrorState error={runs.error} onRetry={() => void runs.refresh()} />
              </div>
            ) : !runs.data ? (
              <TableSkeleton rows={6} cols={3} />
            ) : runs.data.runs.length === 0 ? (
              <EmptyState title="No runs yet" description="Configure a simulation above and press Run." />
            ) : (
              <ul className={cn("divide-y divide-line/60", runs.stale && "opacity-60")}>
                {runs.data.runs.map((r) => {
                  const active = r.id === activeRunId;
                  return (
                    <li key={r.id}>
                      <button type="button" onClick={() => openRun(r)} className={cn("flex w-full items-center gap-3 px-3 py-2 text-left text-[12px] transition-colors hover:bg-surface-2 focus-ring", active && "bg-surface-2")}>
                        <RunStatusIcon status={r.status} />
                        <div className="min-w-0 flex-1">
                          <div className="flex items-center gap-2">
                            <span className="truncate font-medium text-fg">{r.gameSlug}</span>
                            <Mono className="text-fg-4">v{r.gameVersion}</Mono>
                          </div>
                          <div className="text-fg-3">
                            {int(r.spins)} spins · {timeAgo(r.createdAt)}
                            {r.status === "running" ? ` · ${Math.round((num(r.progress) / Math.max(1, num(r.spins))) * 100)}%` : ""}
                          </div>
                        </div>
                      </button>
                    </li>
                  );
                })}
              </ul>
            )}
          </Panel>
        </div>

        {/* Right column: run status + results */}
        <div className="space-y-4">
          {!activeRunId ? (
            <Panel className="min-h-[320px]">
              <EmptyState title="No simulation selected" description="Pick a game, choose a spin count and press Run — or open a recent run from the list." action={<FlaskConical className="h-5 w-5 text-fg-4" />} />
            </Panel>
          ) : (
            <>
              <RunStatus run={run} error={runError} />
              {run?.status === "done" && run.result?.simulation ? <SimulationResults sim={run.result.simulation} cert={run.result.certification ?? null} /> : null}
              {run?.status === "done" && !run.result?.simulation ? <InlineError>This run finished but stored no result payload.</InlineError> : null}
            </>
          )}
        </div>
      </div>
    </>
  );
}

function RunStatusIcon({ status }: { status: string }) {
  if (status === "done") return <CheckCircle2 className="h-4 w-4 shrink-0 text-success" />;
  if (status === "failed") return <XCircle className="h-4 w-4 shrink-0 text-danger" />;
  return <Spinner className="h-4 w-4 shrink-0 text-info" />;
}

function RunStatus({ run, error }: { run: SimulationRunRow | null; error: string | null }) {
  // Wall clock for the elapsed/ETA readout: ticks every second while the run is in progress.
  const [now, setNow] = React.useState<number | null>(null);
  React.useEffect(() => {
    if (run?.status !== "running") return;
    const tick = () => setNow(Date.now());
    const first = setTimeout(tick, 0);
    const t = setInterval(tick, 1000);
    return () => {
      clearTimeout(first);
      clearInterval(t);
    };
  }, [run?.status]);

  if (!run) {
    return (
      <Panel>
        {error ? (
          <InlineError>{error}</InlineError>
        ) : (
          <div className="flex items-center gap-2 text-[13px] text-fg-3">
            <Spinner className="h-4 w-4" /> Loading run…
          </div>
        )}
      </Panel>
    );
  }

  const progress = num(run.progress);
  const total = Math.max(1, num(run.spins));
  const ratio = Math.min(1, progress / total);
  const createdMs = new Date(run.createdAt).getTime();
  const elapsedMs = run.finishedAt ? new Date(run.finishedAt).getTime() - createdMs : now !== null ? Math.max(0, now - createdMs) : null;
  const eta = elapsedMs !== null && ratio > 0.02 && run.status === "running" ? (elapsedMs / ratio) * (1 - ratio) : null;
  const sim = run.result?.simulation;
  const cert = run.result?.certification ?? null;

  return (
    <Panel
      title={
        <span className="inline-flex items-center gap-2">
          {run.gameSlug} <Mono className="text-fg-4">v{run.gameVersion}</Mono>
          <Pill tone={run.status === "done" ? "success" : run.status === "failed" ? "danger" : "info"}>{run.status}</Pill>
          {cert ? <PassFail pass={cert.status === "PASS"} label={`cert ${cert.status}`} /> : null}
        </span>
      }
      description={`Run ${run.id.slice(0, 8)} · started ${dateTime(run.createdAt)}${run.finishedAt ? ` · finished ${dateTime(run.finishedAt)}` : ""}`}
      tone={run.status === "failed" ? "danger" : undefined}
    >
      {run.status === "running" ? (
        <div>
          <div className="mb-2 flex items-baseline justify-between text-[13px]">
            <span className="text-fg-2">
              <span className="font-semibold text-fg tabular">{int(progress)}</span> <span className="text-fg-4">/</span> {int(total)} spins
            </span>
            <span className="tabular text-fg-3">
              {(ratio * 100).toFixed(1)}%{elapsedMs !== null ? ` · ${durationMs(elapsedMs)} elapsed` : ""}{eta !== null ? ` · ~${durationMs(eta)} left` : ""}
            </span>
          </div>
          <Progress value={ratio} max={1} className="h-2" />
          <p className="mt-2 text-[12px] text-fg-4">Polling every 1.5 s. Worker threads keep the API responsive; you can leave this page and re-open the run later.</p>
        </div>
      ) : run.status === "failed" ? (
        <InlineError>{run.error ?? "The simulation failed without an error message."}</InlineError>
      ) : sim ? (
        <div className="flex flex-wrap gap-x-6 gap-y-1 text-[13px] text-fg-2">
          <span>
            <span className="text-fg-4">spins</span> {int(sim.spins)}
          </span>
          <span>
            <span className="text-fg-4">bet</span> {int(sim.bet)} SC
          </span>
          <span>
            <span className="text-fg-4">observed</span> {pct(sim.observedRtp, 3)} <span className="text-fg-4">({signedPct(sim.deviation, 3)})</span>
          </span>
          <span>
            <span className="text-fg-4">duration</span> {durationMs(sim.durationMs)}
          </span>
        </div>
      ) : null}
    </Panel>
  );
}