"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { api } from "./StartGame";
import { GuessMap } from "./GuessMap";
import type { SessionView } from "./Game";
export function Results({ id }: { id: string }) {
  const [session, setSession] = useState<SessionView | null>(null),
    [selected, setSelected] = useState(0),
    [error, setError] = useState("");
  const router = useRouter();
  useEffect(() => {
    api<SessionView>("sessions/" + id)
      .then((s) => {
        if (s.round < 5) router.replace("/play/" + id);
        else setSession(s);
      })
      .catch((e) => setError(e.message));
  }, [id, router]);
  if (error) return <p role="alert">{error}</p>;
  if (!session) return <p className="muted">Unpacking your expedition…</p>;
  const total = session.rounds.reduce((n, r) => n + (r.result?.score || 0), 0);
  const current = session.rounds[selected].result;
  return (
    <>
      <span className="eyebrow">
        EXPEDITION COMPLETE · {session.difficulty.toUpperCase()}
      </span>
      <h1>Every guess is a story.</h1>
      <p className="lead">
        {session.name} · Here’s where your instincts took you.
      </p>
      <div className="results-total">
        {total.toLocaleString()}
        <small> / 25,000</small>
      </div>
      <div className="results-grid">
        <div className="result-map">
          <GuessMap
            bounds={session.bounds}
            image={session.map}
            pin={current?.guess}
            actual={current?.actual}
            disabled
          />
        </div>
        <div className="result-summary">
          <h2>Your five-round journey</h2>
          <div className="tabs">
            {session.rounds.map((r, i) => (
              <button
                key={i}
                className={i === selected ? "active" : ""}
                onClick={() => setSelected(i)}
              >
                Round {i + 1}
              </button>
            ))}
          </div>
          <table className="history-table">
            <thead>
              <tr>
                <th>ROUND</th>
                <th>DISTANCE</th>
                <th>POINTS</th>
              </tr>
            </thead>
            <tbody>
              {session.rounds.map((r, i) => (
                <tr key={i}>
                  <td>{i + 1}</td>
                  <td>
                    {r.result?.timedOut
                      ? "Timed out"
                      : `${Math.round(r.result?.distance || 0)} blocks`}
                  </td>
                  <td>{r.result?.score.toLocaleString()}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="inline-actions">
            <Link className="button primary" href="/servers">
              Another adventure →
            </Link>
            <Link className="button" href="/dashboard">
              My expeditions
            </Link>
          </div>
        </div>
      </div>
    </>
  );
}