import { COLOR_GLYPHS, COLOR_HEX, EXPEDITION_NAMES } from "../game/cards";
import { scoreBreakdown } from "../game/scoring";
import type { GameState } from "../game/types";

interface ResultCardProps {
  state: GameState;
  outcome: string;
  seed: string;
  onReview: () => void;
  onPlayAgain: () => void;
}

function signed(value: number): string {
  return value > 0 ? `+${value}` : String(value);
}

export function ResultCard({ state, outcome, seed, onReview, onPlayAgain }: ResultCardProps) {
  const you = scoreBreakdown(state, 0);
  const rival = scoreBreakdown(state, 1);

  return (
    <div className="result-overlay">
      <section className="result-card" aria-label="Final score">
        <header className="result-card__head">
          <p>ROUND COMPLETE</p>
          <h1>{outcome}</h1>
          <strong>{you.total} <i>:</i> {rival.total}</strong>
        </header>

        <table className="result-table">
          <thead>
            <tr>
              <th scope="col">EXPEDITION</th>
              <th scope="col" colSpan={2}>YOU</th>
              <th scope="col" colSpan={2}>THE RIVAL</th>
            </tr>
            <tr className="result-table__subhead">
              <th scope="col" />
              <th scope="col">CARDS</th>
              <th scope="col">SCORE</th>
              <th scope="col">CARDS</th>
              <th scope="col">SCORE</th>
            </tr>
          </thead>
          <tbody>
            {EXPEDITION_NAMES.map((name, color) => {
              const mine = you.colors[color];
              const theirs = rival.colors[color];
              return (
                <tr key={name}>
                  <th scope="row" style={{ "--lane-color": COLOR_HEX[color] } as React.CSSProperties}>
                    <i>{COLOR_GLYPHS[color]}</i>{name}
                  </th>
                  <td className="result-table__detail">
                    {mine.cards ? `${mine.cards}${mine.handshakes ? ` ·×${mine.handshakes + 1}` : ""}` : "—"}
                  </td>
                  <td className={mine.score < 0 ? "is-negative" : mine.score > 0 ? "is-positive" : ""}>
                    {mine.cards ? signed(mine.score) : "—"}
                  </td>
                  <td className="result-table__detail">
                    {theirs.cards ? `${theirs.cards}${theirs.handshakes ? ` ·×${theirs.handshakes + 1}` : ""}` : "—"}
                  </td>
                  <td className={theirs.score < 0 ? "is-negative" : theirs.score > 0 ? "is-positive" : ""}>
                    {theirs.cards ? signed(theirs.score) : "—"}
                  </td>
                </tr>
              );
            })}
          </tbody>
          <tfoot>
            <tr>
              <th scope="row">TOTAL</th>
              <td className="result-table__detail" />
              <td>{signed(you.total)}</td>
              <td className="result-table__detail" />
              <td>{signed(rival.total)}</td>
            </tr>
          </tfoot>
        </table>

        <footer className="result-card__foot">
          <small>DEAL SEED {seed}</small>
          <div>
            <button type="button" onClick={onReview}>REVIEW GAME</button>
            <button type="button" className="is-primary" onClick={onPlayAgain}>PLAY AGAIN</button>
          </div>
        </footer>
      </section>
    </div>
  );
}
