"use client";

import * as React from "react";
import type { CertificationReport, SimulationResult } from "@spinza/game-core";
import { Bars, ChartFrame, CHART, Histogram, Lines } from "./charts";
import { KV, Panel, PassFail, SegmentedControl, StatGrid, StatTile } from "./primitives";
import { durationMs, int, multiplier, pct, sc, signedPct } from "./format";
import { cn } from "@/lib/utils";

/** KPI tiles + charts for a finished simulation. Shared by the simulator and the game detail page. */
export function SimulationResults({ sim, cert, compactTiles }: { sim: SimulationResult; cert: CertificationReport | null; compactTiles?: boolean }) {
  const [scale, setScale] = React.useState<"log" | "linear">("log");
  const devTone = Math.abs(sim.deviation) <= 0.004 ? "success" : Math.abs(sim.deviation) <= 0.015 ? "neutral" : "danger";
  const features = Object.entries(sim.featureCounts)
    .map(([feature, count]) => ({ feature, count, rate: count / sim.spins }))
    .sort((a, b) => b.count - a.count);
  const variance = sim.stdDev * sim.stdDev;
  const convDomain: [number, number] = [Math.max(0, Math.min(sim.configuredRtp, ...sim.convergence.map((c) => c.rtp)) - 0.02), Math.max(sim.configuredRtp, ...sim.convergence.map((c) => c.rtp)) + 0.02];

  return (
    <div className="space-y-4">
      <StatGrid cols={6}>
        <StatTile label="Configured RTP" value={pct(sim.configuredRtp)} compact={compactTiles} />
        <StatTile label="Observed RTP" value={pct(sim.observedRtp, 3)} tone="accent" compact={compactTiles} />
        <StatTile label="Deviation" value={signedPct(sim.deviation, 3)} tone={devTone} sub="observed − configured" compact={compactTiles} />
        <StatTile label="Std dev (×bet)" value={sim.stdDev.toFixed(2)} sub={`variance ${variance.toFixed(2)}`} compact={compactTiles} />
        <StatTile label="Hit rate" value={pct(sim.hitRate)} compact={compactTiles} />
        <StatTile label="Max win" value={multiplier(sim.maxWinMultiplier)} sub={sc(sim.maxWin)} compact={compactTiles} />
      </StatGrid>
      <StatGrid cols={6}>
        <StatTile label="Bonus rate" value={pct(sim.bonusRate, 3)} sub={`1 in ${sim.bonusRate ? Math.round(1 / sim.bonusRate).toLocaleString("en-US") : "∞"}`} compact={compactTiles} />
        <StatTile label="Free-spin rate" value={pct(sim.freeSpinRate, 3)} sub={`1 in ${sim.freeSpinRate ? Math.round(1 / sim.freeSpinRate).toLocaleString("en-US") : "∞"}`} compact={compactTiles} />
        <StatTile label="Jackpot rate" value={pct(sim.jackpotRate, 4)} sub={`1 in ${sim.jackpotRate ? Math.round(1 / sim.jackpotRate).toLocaleString("en-US") : "∞"}`} compact={compactTiles} />
        <StatTile label="Median / avg win" value={<span>{sc(sim.medianWin)} <span className="text-fg-4">/</span> {sc(Math.round(sim.averageWin))}</span>} sub={`bet ${sc(sim.bet)}`} compact={compactTiles} />
        <StatTile label="Capped rounds" value={int(sim.cappedRounds)} tone={sim.cappedRounds / sim.spins > 0.0005 ? "danger" : "neutral"} sub={pct(sim.cappedRounds / sim.spins, 4)} compact={compactTiles} />
        <StatTile label="Duration" value={durationMs(sim.durationMs)} sub={`${int(sim.spins)} spins · ${Math.round(sim.spins / Math.max(1, sim.durationMs / 1000)).toLocaleString("en-US")} spins/s`} compact={compactTiles} />
      </StatGrid>

      <div className="grid gap-4 xl:grid-cols-2">
        <Panel>
          <ChartFrame title="Win distribution" subtitle="Rounds per win multiplier bucket" height={240} right={<SegmentedControl size="xs" value={scale} onChange={setScale} items={[{ value: "log", label: "Log" }, { value: "linear", label: "Linear" }]} />}>
            <Histogram data={sim.distribution.map((b) => ({ ...b }))} x="label" y="count" logScale={scale === "log"} yFormat={(v) => (v >= 1_000_000 ? `${(v / 1_000_000).toFixed(1)}M` : v >= 1000 ? `${(v / 1000).toFixed(0)}K` : String(Math.round(v)))} />
          </ChartFrame>
          <DistributionTable rows={sim.distribution} />
        </Panel>
        <Panel>
          <ChartFrame title="RTP convergence" subtitle={`Running RTP vs configured ${pct(sim.configuredRtp)}`} height={240}>
            <Lines data={sim.convergence.map((c) => ({ ...c }))} x="spins" series={[{ key: "rtp", label: "Observed RTP", color: CHART.accent }]} xFormat={(v) => shortNum(Number(v))} yFormat={(v) => `${(v * 100).toFixed(1)}%`} yDomain={convDomain} reference={{ y: sim.configuredRtp, label: `target ${pct(sim.configuredRtp)}` }} tooltipLabel={(l) => `${int(l)} spins`} />
          </ChartFrame>
          <ChartFrame title="Feature frequency" subtitle="Rounds in which each feature fired" height={Math.max(120, 28 * features.length + 30)} className="mt-6">
            {features.length ? <Bars data={features} x="feature" layout="vertical" series={[{ key: "count", label: "Rounds", color: CHART.accent }]} yFormat={(v) => shortNum(v)} tooltipLabel={(l, row) => `${String(l)} · ${pct(Number(row?.rate ?? 0), 3)} of rounds`} /> : <div className="grid h-full place-items-center text-[12px] text-fg-4">No feature fired during this run.</div>}
          </ChartFrame>
        </Panel>
      </div>

      {cert ? <CertificationBlock cert={cert} /> : null}
    </div>
  );
}

function DistributionTable({ rows }: { rows: SimulationResult["distribution"] }) {
  return (
    <details className="mt-3 text-[12px]">
      <summary className="cursor-pointer text-fg-3 hover:text-fg">Table view</summary>
      <table className="mt-2 w-full text-[12px] tabular">
        <thead>
          <tr className="text-left text-[10px] uppercase tracking-wider text-fg-4">
            <th className="py-1">Bucket</th>
            <th className="py-1 text-right">Rounds</th>
            <th className="py-1 text-right">Share</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((b) => (
            <tr key={b.label} className="border-t border-line/60">
              <td className="py-1">{b.label}</td>
              <td className="py-1 text-right">{int(b.count)}</td>
              <td className="py-1 text-right text-fg-3">{pct(b.share, 3)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </details>
  );
}

export function CertificationBlock({ cert, title = "Certification report" }: { cert: CertificationReport; title?: string }) {
  return (
    <Panel title={title} description={`${cert.name} · ${cert.game}@${cert.version} · certified ${new Date(cert.certifiedAt).toLocaleString("en-US")}`} actions={<PassFail pass={cert.status === "PASS"} label={cert.status} />} tone={cert.status === "PASS" ? "success" : "danger"}>
      <KV
        cols={3}
        items={[
          { label: "Spins", value: int(cert.spins) },
          { label: "Configured RTP", value: pct(cert.configuredRtp) },
          { label: "Observed RTP", value: pct(cert.observedRtp, 3) },
          { label: "Deviation", value: signedPct(cert.deviation, 3) },
          { label: "Hit rate", value: pct(cert.hitRate) },
          { label: "Bonus / free spins", value: `${pct(cert.bonusRate, 3)} / ${pct(cert.freeSpinRate, 3)}` },
          { label: "Max win", value: multiplier(cert.maxWinMultiplier) },
          { label: "Std dev", value: cert.stdDev.toFixed(2) },
          { label: "Rules", value: `±${(cert.rules.maxDeviation * 100).toFixed(2)}% · min ${int(cert.rules.minSpins)} · band ${pct(cert.rules.rtpBand[0], 0)}–${pct(cert.rules.rtpBand[1], 0)}` },
        ]}
      />
      <ul className="mt-4 divide-y divide-line/60 rounded-sm border border-line">
        {cert.checks.map((c) => (
          <li key={c.name} className="flex items-start gap-3 px-3 py-2 text-[13px]">
            <PassFail pass={c.pass} />
            <div className="min-w-0">
              <div className="font-mono text-[12px] text-fg">{c.name}</div>
              <div className={cn("text-[12px]", c.pass ? "text-fg-3" : "text-danger")}>{c.detail}</div>
            </div>
          </li>
        ))}
      </ul>
    </Panel>
  );
}

function shortNum(v: number): string {
  if (Math.abs(v) >= 1_000_000) return `${(v / 1_000_000).toFixed(v % 1_000_000 === 0 ? 0 : 1)}M`;
  if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}K`;
  return String(Math.round(v));
}