'use client';

import { TournamentState } from '@/lib/types';
import {
  getBlindLevelForState,
  formatBlinds,
  getLevelDisplayIndex,
  getStructureLevels,
} from '@/lib/blind-structure';
import {
  formatTime,
  getDisplayPrizePool,
  getDisplayPayouts,
  getRemainingSeconds,
} from '@/lib/tournament-engine';
import { formatCurrency } from '@/lib/prize-pool';
import { useEffect, useState } from 'react';

interface TournamentDisplayProps {
  tournament: TournamentState;
  showControls?: boolean;
  compact?: boolean;
  urgentThreshold?: number;
  /** Optional override from parent wall-clock (preferred) */
  remainingSeconds?: number;
}

export default function TournamentDisplay({
  tournament,
  compact = false,
  urgentThreshold = 60,
  remainingSeconds: remainingProp,
}: TournamentDisplayProps) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 250);
    return () => clearInterval(id);
  }, []);

  const structure = getStructureLevels(tournament.config);
  const level = getBlindLevelForState(tournament);
  const prizePool = getDisplayPrizePool(tournament);
  const payouts = getDisplayPayouts(tournament);
  void tick; // re-render for wall-clock
  const remaining =
    remainingProp ?? getRemainingSeconds(tournament);
  const isUrgent = remaining <= urgentThreshold && tournament.status === 'running';
  const isBreak = tournament.status === 'break' || level.isBreak;
  const isAnnouncement =
    tournament.status === 'announcement' || !!level.isAnnouncement;

  const now = new Date();
  const dateStr = now.toLocaleDateString('en-US', {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  });
  const timeStr = now.toLocaleTimeString('en-US', {
    hour: 'numeric',
    minute: '2-digit',
  });

  if (compact) {
    return (
      <div className="text-center">
        <div className={`text-6xl font-mono font-bold ${isUrgent ? 'timer-urgent' : 'text-poker-gold'}`}>
          {formatTime(remaining)}
        </div>
        <div className="text-2xl mt-2">
          {isAnnouncement
            ? 'ANNOUNCE'
            : isBreak
              ? 'TOURNAMENT ON BREAK'
              : formatBlinds(level)}
        </div>
      </div>
    );
  }

  return (
    <div
      className={`space-y-4 ${
        isBreak ? 'break-active rounded-xl p-4 ring-2 ring-sky-400/50 bg-sky-900/20' : ''
      } ${isAnnouncement ? 'rounded-xl p-4 ring-2 ring-amber-400/60 bg-amber-500/10' : ''}`}
    >
      <div className="text-center">
        <h1 className="text-3xl md:text-4xl font-display font-bold text-poker-gold">
          {tournament.config.name}
        </h1>
        <p className="text-lg text-white/70 mt-1">{tournament.config.type}</p>
        <p className="text-sm text-white/50">{dateStr} · {timeStr}</p>
      </div>

      {isBreak && (
        <div className="card border-sky-400/50 bg-sky-500/15 text-center py-8 px-4">
          <div className="text-sm md:text-base uppercase tracking-[0.25em] text-sky-200/90 mb-2 font-semibold">
            Tournament on break
          </div>
          <div className="text-6xl md:text-7xl font-mono font-bold text-white my-3">
            {formatTime(remaining)}
          </div>
          <p className="text-lg text-sky-100/90">
            Countdown until resume
            {level.breakLabel ? ` · ${level.breakLabel}` : ''}
          </p>
          {tournament.prizePoolLocked && (
            <p className="text-sm text-poker-gold mt-2">🔒 Prize pool locked</p>
          )}
        </div>
      )}

      {isAnnouncement && (
        <div className="card border-amber-400/40 bg-amber-500/15 text-center py-6 px-4">
          <div className="text-sm uppercase tracking-widest text-amber-200/80 mb-2">
            Announcement
          </div>
          <p className="text-xl md:text-2xl font-semibold text-white leading-snug">
            {level.announcementText || 'Please listen for table directions.'}
          </p>
        </div>
      )}

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
        <div className="card py-4">
          <div className="text-sm text-white/50 uppercase tracking-wide">Level</div>
          <div className="text-3xl font-bold text-poker-gold">
            {isAnnouncement
              ? 'MSG'
              : isBreak
                ? 'BREAK'
                : getLevelDisplayIndex(tournament.currentLevel, structure)}
          </div>
        </div>
        <div className="card py-4">
          <div className="text-sm text-white/50 uppercase tracking-wide">Blinds</div>
          <div className="text-2xl font-bold">
            {isAnnouncement
              ? '—'
              : isBreak
                ? 'Paused'
                : formatBlinds(level)}
          </div>
        </div>
        <div className="card py-4">
          <div className="text-sm text-white/50 uppercase tracking-wide">
            {isBreak ? 'Until resume' : 'Timer'}
          </div>
          <div
            className={`text-4xl font-mono font-bold ${
              isUrgent || (isBreak && remaining <= 60) ? 'timer-urgent' : ''
            }`}
          >
            {formatTime(remaining)}
          </div>
        </div>
        <div className="card py-4">
          <div className="text-sm text-white/50 uppercase tracking-wide">Prize Pool</div>
          <div className="text-2xl font-bold text-green-400">
            {formatCurrency(prizePool)}
            {tournament.prizePoolLocked && (
              <span className="block text-xs text-poker-gold mt-1">🔒 LOCKED</span>
            )}
          </div>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-4 text-center">
        <div className="card py-3">
          <div className="text-sm text-white/50">Entries</div>
          <div className="text-2xl font-bold">{tournament.totalEntries}</div>
        </div>
        <div className="card py-3">
          <div className="text-sm text-white/50">Rebuys</div>
          <div className="text-2xl font-bold">{tournament.totalRebuys}</div>
        </div>
        <div className="card py-3">
          <div className="text-sm text-white/50">Addons</div>
          <div className="text-2xl font-bold">{tournament.totalAddons}</div>
        </div>
      </div>

      {payouts.length > 0 && (
        <div className="card">
          <h3 className="text-lg font-semibold text-poker-gold mb-3">Payouts</h3>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {payouts.map((p) => (
              <div key={p.place} className="flex justify-between items-center bg-white/5 rounded-lg px-4 py-2">
                <span className="text-white/70">
                  {p.place === 1 ? '🥇' : p.place === 2 ? '🥈' : p.place === 3 ? '🥉' : `#${p.place}`}
                </span>
                <span className="font-bold text-green-400">
                  {p.amount !== undefined ? formatCurrency(p.amount) : `${p.percentage}%`}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}