import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useGameStore } from '../store/gameStore';
import { emit } from '../lib/socket';

function fmtDate(iso: string | null): string {
  if (!iso) return '—';
  const d = new Date(iso);
  return isNaN(d.getTime()) ? '—' : d.toLocaleString('sk-SK');
}

export default function History() {
  const navigate = useNavigate();
  const history = useGameStore((s) => s.history);
  const detail = useGameStore((s) => s.gameDetail);
  const setGameDetail = useGameStore((s) => s.setGameDetail);

  useEffect(() => {
    emit.getPlayerHistory();
    return () => setGameDetail(null);
  }, [setGameDetail]);

  // --- detail view ---
  if (detail) {
    return (
      <div className="max-w-md mx-auto p-4 pt-8">
        <button
          onClick={() => setGameDetail(null)}
          className="text-sm text-gray-400 hover:text-white mb-4"
        >
          ← Spat na zoznam
        </button>
        <h1 className="text-xl font-bold mb-1">Detail hry</h1>
        <p className="text-xs text-gray-400 mb-4">{fmtDate(detail.created_at)}</p>

        <div className="bg-slate-800 rounded-xl overflow-hidden text-sm">
          <div className="grid grid-cols-[auto_1fr_auto_auto] gap-2 px-3 py-2 text-xs text-gray-400 border-b border-slate-700">
            <span>S/K</span>
            <span>Hrac</span>
            <span className="text-right">Tip</span>
            <span className="text-right">Body</span>
          </div>
          {detail.rounds.map((r, i) => (
            <div
              key={i}
              className="grid grid-cols-[auto_1fr_auto_auto] gap-2 px-3 py-1.5 border-b border-slate-700/50 last:border-0"
            >
              <span className="text-gray-500">
                {r.series_number}/{r.round_number}
              </span>
              <span className="truncate">{r.username ?? `#${r.player_id}`}</span>
              <span className="text-right font-mono">{r.guess}</span>
              <span className={`text-right font-mono ${r.won ? 'text-green-400' : 'text-gray-500'}`}>
                {r.points}
              </span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // --- list view ---
  return (
    <div className="max-w-md mx-auto p-4 pt-8">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-xl font-bold">Moja historia</h1>
        <button onClick={() => navigate('/')} className="text-sm text-gray-400 hover:text-white">
          Spat
        </button>
      </div>

      {history.length === 0 && (
        <p className="text-center text-gray-500 py-6">Zatial ziadne odohrane hry.</p>
      )}

      <div className="flex flex-col gap-3">
        {history.map((g) => (
          <button
            key={g.gid}
            onClick={() => emit.getGameDetail(g.gid)}
            className="text-left bg-slate-800 hover:bg-slate-700 rounded-xl px-4 py-3"
          >
            <div className="flex items-center justify-between">
              <span className="text-sm text-gray-200">{fmtDate(g.created_at)}</span>
              <span className="text-sm font-semibold text-green-400">{g.my_points} b.</span>
            </div>
            <p className="text-xs text-gray-400 mt-1 truncate">{g.players.join(', ')}</p>
            <p className="text-[11px] text-gray-500 mt-0.5">
              {g.ended_at ? 'dohrana' : 'nedohrana'}
            </p>
          </button>
        ))}
      </div>
    </div>
  );
}