"use client";

import type { Phase, PhaseState } from "../useEquity";
import { PHASE_ORDER } from "../useEquity";

type Phases = Record<Phase, PhaseState | null>;

const META: Record<Phase, { label: string; hint: string }> = {
  preflop: { label: "Pre-flop", hint: "le tue 2 carte" },
  flop: { label: "Flop", hint: "3 carte in tavola" },
  turn: { label: "Turn", hint: "4 carte in tavola" },
  river: { label: "River", hint: "5 carte in tavola" },
};

const pct = (x: number) => (x * 100).toFixed(1) + "%";

function Bar({ win, tie }: { win: number; tie: number }) {
  return (
    <div className="flex h-2.5 w-full overflow-hidden rounded-full bg-white/10">
      <div className="bg-emerald-400" style={{ width: `${win * 100}%` }} />
      <div className="bg-amber-400" style={{ width: `${tie * 100}%` }} />
      <div className="bg-rose-500/70" style={{ width: `${(1 - win - tie) * 100}%` }} />
    </div>
  );
}

export function Results({
  phases,
  current,
  ready,
  iterations,
}: {
  phases: Phases;
  current: Phase | null;
  ready: boolean;
  iterations: number;
}) {
  const state = current ? phases[current] : null;
  const r = state?.result ?? null;

  return (
    <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
      {!ready ? (
        <p className="py-6 text-center text-sm text-white/55">
          Seleziona le tue <span className="font-semibold text-white/80">2 carte</span> per calcolare
          la probabilità di vittoria.
        </p>
      ) : (
        <>
          <div className="flex items-end justify-between">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-widest text-emerald-300/80">
                {current ? META[current].label : ""} · probabilità di vittoria
              </div>
              <div className="mt-0.5 flex items-baseline gap-2">
                <span className="text-5xl font-extrabold tabular-nums tracking-tight">
                  {r ? pct(r.equity) : "…"}
                </span>
                {state?.running && (
                  <span className="h-2 w-2 animate-pulse rounded-full bg-emerald-400" />
                )}
              </div>
            </div>
          </div>

          {r && (
            <div className="mt-3 space-y-2">
              <Bar win={r.win} tie={r.tie} />
              <div className="flex justify-between text-xs tabular-nums text-white/70">
                <span><span className="text-emerald-400">●</span> Vinci {pct(r.win)}</span>
                <span><span className="text-amber-400">●</span> Pareggi {pct(r.tie)}</span>
                <span><span className="text-rose-400">●</span> Perdi {pct(r.lose)}</span>
              </div>
            </div>
          )}

          {/* Per-phase progression */}
          <div className="mt-4 grid grid-cols-4 gap-2">
            {PHASE_ORDER.map((p) => {
              const ps = phases[p];
              const isCurrent = p === current;
              return (
                <div
                  key={p}
                  className={[
                    "rounded-xl border px-1.5 py-2 text-center",
                    isCurrent
                      ? "border-emerald-400/60 bg-emerald-400/10"
                      : ps
                        ? "border-white/10 bg-white/[0.03]"
                        : "border-white/5 bg-transparent opacity-40",
                  ].join(" ")}
                >
                  <div className="text-[10px] font-semibold uppercase tracking-wide text-white/55">
                    {META[p].label}
                  </div>
                  <div className="mt-0.5 text-sm font-bold tabular-nums">
                    {ps?.result ? pct(ps.result.equity) : ps ? "…" : "—"}
                  </div>
                </div>
              );
            })}
          </div>

          <p className="mt-3 text-center text-[10px] text-white/35">
            Stima Monte Carlo · {iterations.toLocaleString("it-IT")} simulazioni per fase
          </p>
        </>
      )}
    </div>
  );
}