import { useState } from 'react';
import type { PlayerInfo } from '../types';
import { computeTotal } from '../lib/standings';

interface Props {
  standings: number[][][];
  /** Tips per series/round/seat, same shape as standings. */
  guesses?: number[][][];
  players: PlayerInfo[];
  myOrder: number;
  /** Desktop renders an always-open sidebar; mobile a collapsible panel. */
  desktop?: boolean;
}

export default function Standings({ standings, guesses = [], players, myOrder, desktop = false }: Props) {
  const [open, setOpen] = useState(false);

  // Player columns in seat order; the local player's column is highlighted.
  const cols = [...players].sort((a, b) => a.order - b.order);
  // Completed-round count before each series (running total), so each series'
  // round index can be offset in a single pass instead of re-summing per row.
  const seriesRoundOffsets: number[] = [];
  let completedRounds = 0;
  for (const s of standings) {
    seriesRoundOffsets.push(completedRounds);
    completedRounds += s.length;
  }
  // Engine: every series is exactly 8 rounds → a series with 8 entries is done,
  // and gets a per-series summary row after its last round.
  const ROUNDS_PER_SERIES = 8;

  // Bigger, more legible type on the wide desktop sidebar; compact on mobile.
  const fz = {
    head: desktop ? 11 : 10,
    idx: desktop ? 13 : 9,
    cell: desktop ? 19 : 14,
    dot: desktop ? 18 : 13,
    sigma: desktop ? 13 : 9,
    total: desktop ? 20 : 18,
  };

  const table = (
    <div className="flex-1 flex flex-col px-3 pt-3 pb-4">
      {/* Column headers */}
      <div
        className="grid items-end mb-1"
        style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
      >
        <div />
        {cols.map((p) => (
          <div
            key={p.order}
            className={`text-center uppercase tracking-[.09em] truncate ${
              p.order === myOrder ? 'text-gold' : 'text-green-dim'
            }`}
            style={{ fontSize: fz.head }}
          >
            {p.name}
          </div>
        ))}
      </div>
      <div className="h-px bg-gold/10 mb-1" />

      {/* Completed rounds, grouped by series with a per-series summary row */}
      {standings.flatMap((seriesRounds, si) => {
        const priorRounds = seriesRoundOffsets[si];
        const elems = seriesRounds.map((scores, lri) => (
          <div
            key={`r-${si}-${lri}`}
            className="grid items-center py-1 border-b border-gold/[.05]"
            style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
          >
            <div className="text-center text-[#7a7252]" style={{ fontSize: fz.idx }}>
              {priorRounds + lri + 1}
            </div>
            {cols.map((p) => {
              const points = scores[p.order] ?? 0;
              // Failed tip (0 points) → show the struck-through tip instead of 0.
              if (points === 0) {
                return (
                  <div
                    key={p.order}
                    className="text-center font-serif leading-none line-through"
                    style={{ fontSize: fz.cell, color: '#7a6e4a' }}
                  >
                    {guesses[si]?.[lri]?.[p.order] ?? 0}
                  </div>
                );
              }
              return (
                <div
                  key={p.order}
                  className="text-center font-serif leading-none"
                  style={{ fontSize: fz.cell, color: p.order === myOrder ? '#f0dca8' : '#c8bb95' }}
                >
                  {points}
                </div>
              );
            })}
          </div>
        ));

        // After a finished series, sum its points per player.
        if (seriesRounds.length === ROUNDS_PER_SERIES) {
          elems.push(
            <div
              key={`s-${si}`}
              className="grid items-center py-1 my-0.5 rounded bg-gold/[.07]"
              style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
            >
              <div className="text-center font-serif text-gold" style={{ fontSize: fz.sigma }}>
                Σ{si + 1}
              </div>
              {cols.map((p) => {
                const sum = seriesRounds.reduce((a, r) => a + (r[p.order] ?? 0), 0);
                return (
                  <div
                    key={p.order}
                    className={`text-center font-serif leading-none ${
                      p.order === myOrder ? 'text-gold-dim' : 'text-green-score'
                    }`}
                    style={{ fontSize: fz.cell, fontWeight: 600 }}
                  >
                    {sum}
                  </div>
                );
              })}
            </div>,
          );
        }
        return elems;
      })}

      {/* Active round placeholder */}
      <div
        className="grid items-center py-1 rounded mt-0.5 bg-gold/[.04]"
        style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
      >
        <div className="text-center font-medium text-gold" style={{ fontSize: fz.idx }}>{completedRounds + 1}</div>
        {cols.map((p) => (
          <div key={p.order} className="text-center text-[#7a7252]" style={{ fontSize: fz.dot }}>·</div>
        ))}
      </div>

      <div className="flex-1 min-h-2" />
      <div className="h-px bg-gold/20 mb-2" />

      {/* Totals */}
      <div
        className="grid items-center py-0.5"
        style={{ gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` }}
      >
        <div className="text-center uppercase tracking-[.08em] text-green-dim" style={{ fontSize: fz.sigma }}>
          Σ
        </div>
        {cols.map((p) => (
          <div
            key={p.order}
            className={`text-center font-serif leading-none ${
              p.order === myOrder ? 'text-gold-dim' : 'text-[#c8bb95]'
            }`}
            style={{ fontSize: fz.total, fontWeight: p.order === myOrder ? 700 : 600 }}
          >
            {computeTotal(standings, p.order)}
          </div>
        ))}
      </div>
    </div>
  );

  if (desktop) {
    return (
      <aside className="w-[268px] flex-shrink-0 bg-header border-l border-[#142018] flex flex-col">
        <div className="h-[58px] flex items-center gap-2 px-5 border-b border-[#14221a]">
          <span className="font-serif uppercase tracking-[.12em] text-[13px] text-gold">Skóre</span>
        </div>
        {table}
      </aside>
    );
  }

  // Mobile: collapsible panel
  return (
    <div className="bg-header/80 border border-[#142018] rounded-xl overflow-hidden">
      <button
        onClick={() => setOpen((o) => !o)}
        className="w-full flex justify-between items-center px-4 py-2 font-serif uppercase tracking-[.12em] text-[12px] text-gold"
      >
        <span>Skóre</span>
        <span className="text-green-dim">{open ? '▲' : '▼'}</span>
      </button>
      {open && table}
    </div>
  );
}