'use client';

import { useState, useEffect, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { useTournament } from '@/hooks/useTournament';
import { Player } from '@/lib/types';
import CheckinQRCode from '@/components/CheckinQRCode';

export default function RegisterPage() {
  const router = useRouter();
  const { tournament, loading, updateTournament, refresh } = useTournament();
  const [players, setPlayers] = useState<Player[]>([]);
  const [search, setSearch] = useState('');
  const [showMembers, setShowMembers] = useState(false);
  const [beginning, setBeginning] = useState(false);

  const fetchPlayers = useCallback(async () => {
    const res = await fetch('/api/players');
    setPlayers(await res.json());
  }, []);

  useEffect(() => {
    fetchPlayers();
  }, [fetchPlayers]);

  const addPlayer = async (player: Player) => {
    if (!tournament) return;
    const name = player.nickname
      ? `${player.firstName} "${player.nickname}" ${player.lastName}`
      : `${player.firstName} ${player.lastName}`;

    await updateTournament('add_player', { playerId: player.id, playerName: name });
  };

  const toggleCheckIn = async (entryId: string, checkedIn: boolean) => {
    if (!checkedIn) {
      await updateTournament('check_in', { entryId });
    }
  };

  const removeEntry = async (entryId: string) => {
    await updateTournament('remove_entry', { entryId });
  };

  const setBounty = async (
    entryId: string,
    fields: { hasBounty?: boolean; bountyChips?: string }
  ) => {
    await updateTournament('update_bounty', { entryId, ...fields });
  };

  /** Open TIP without starting the clock — director enables audio, then starts there. */
  const goToTipScreen = async () => {
    const checkedIn = tournament?.entries.filter((e) => e.checkedIn).length ?? 0;
    if (checkedIn < 2) {
      alert('Need at least 2 checked-in players to open the director screen.');
      return;
    }
    setBeginning(true);
    try {
      // Stay in registration — clock starts on TIP after audio is enabled
      if (tournament?.status !== 'registration') {
        await updateTournament('set_registration');
      }
      router.push('/tip');
    } finally {
      setBeginning(false);
    }
  };

  const filteredPlayers = players.filter((p) => {
    const q = search.toLowerCase();
    const registered = tournament?.entries.some((e) => e.playerId === p.id);
    if (registered) return false;
    return (
      p.firstName.toLowerCase().includes(q) ||
      p.lastName.toLowerCase().includes(q) ||
      (p.nickname?.toLowerCase().includes(q) ?? false)
    );
  });

  if (loading) {
    return <div className="max-w-7xl mx-auto px-4 py-8 text-white/60">Loading...</div>;
  }

  if (!tournament) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-8 text-center">
        <p className="text-white/60 mb-4">No tournament configured.</p>
        <button onClick={() => router.push('/setup')} className="btn-primary">
          Go to Setup
        </button>
      </div>
    );
  }

  const checkedInCount = tournament.entries.filter((e) => e.checkedIn).length;

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      <div className="flex flex-wrap items-start justify-between gap-6 mb-8">
        <div>
          <h1 className="text-3xl font-display font-bold text-poker-gold">Registration</h1>
          <p className="text-white/60 mt-1">{tournament.config.name}</p>
          <p className="text-sm text-white/40 mt-1">
            Buy-in: ${tournament.config.buyIn} · {checkedInCount} checked in / {tournament.entries.length} registered
          </p>
        </div>
        <CheckinQRCode size={140} />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-4">
          <div className="card">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-semibold">Registered Players</h2>
              <button onClick={() => setShowMembers(!showMembers)} className="btn-secondary text-sm">
                {showMembers ? 'Hide Members' : '👥 Members'}
              </button>
            </div>

            {tournament.entries.length === 0 ? (
              <p className="text-white/50 text-center py-8">No players registered yet. Add from members or use QR check-in.</p>
            ) : (
              <div className="space-y-2">
                {tournament.entries.map((entry) => (
                  <div
                    key={entry.id}
                    className={`flex flex-col sm:flex-row sm:items-center justify-between gap-2 p-3 rounded-lg ${
                      entry.checkedIn ? 'bg-green-900/30 border border-green-500/30' : 'bg-white/5 border border-white/10'
                    } ${entry.hasBounty ? 'ring-1 ring-amber-400/50' : ''}`}
                  >
                    <div className="flex items-center gap-3 min-w-0">
                      <span className={`w-3 h-3 rounded-full flex-shrink-0 ${entry.checkedIn ? 'bg-green-400' : 'bg-white/30'}`} />
                      <span className="font-medium truncate">{entry.playerName}</span>
                      {entry.checkedIn && <span className="text-xs text-green-400 flex-shrink-0">✓ In</span>}
                      {entry.hasBounty && (
                        <span className="text-xs text-amber-300 flex-shrink-0">
                          🎯 {entry.bountyChips || '2000'}
                          {entry.bountyCollected ? ' (collected)' : ''}
                        </span>
                      )}
                    </div>
                    <div className="flex flex-wrap items-center gap-2 sm:justify-end">
                      <label className="flex items-center gap-1.5 text-xs text-amber-200/90 cursor-pointer bg-amber-500/10 border border-amber-500/30 rounded-lg px-2 py-1">
                        <input
                          type="checkbox"
                          checked={!!entry.hasBounty}
                          onChange={(e) =>
                            setBounty(entry.id, {
                              hasBounty: e.target.checked,
                              bountyChips: entry.bountyChips || '2000',
                            })
                          }
                          className="accent-amber-400"
                        />
                        Bounty?
                      </label>
                      <input
                        type="text"
                        inputMode="numeric"
                        maxLength={5}
                        placeholder="2000"
                        disabled={!entry.hasBounty}
                        value={entry.hasBounty ? entry.bountyChips || '' : ''}
                        onChange={(e) =>
                          setBounty(entry.id, {
                            hasBounty: true,
                            bountyChips: e.target.value,
                          })
                        }
                        className="w-[5ch] min-w-[4.5rem] text-center text-sm py-1 px-1 rounded border border-white/20 bg-black/40 disabled:opacity-30"
                        title="Bounty chips (doubles weekly if not collected)"
                      />
                      {!entry.checkedIn && (
                        <button onClick={() => toggleCheckIn(entry.id, entry.checkedIn)} className="btn-secondary text-xs py-1 px-2">
                          Check In
                        </button>
                      )}
                      <button onClick={() => removeEntry(entry.id)} className="text-red-400 text-xs hover:underline">
                        Remove
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
            <p className="text-xs text-white/40 mt-3">
              Weekly bounty: mark last week&apos;s winner with <strong className="text-amber-300">Bounty?</strong> and chip amount
              (default 2000). If nobody collects it, double the amount next week.
            </p>
          </div>

          {showMembers && (
            <div className="card">
              <h2 className="text-xl font-semibold mb-4">Add from Members</h2>
              <input
                className="input-field mb-3"
                placeholder="Search members..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
              <div className="max-h-64 overflow-y-auto space-y-1">
                {filteredPlayers.map((p) => (
                  <button
                    key={p.id}
                    onClick={() => addPlayer(p)}
                    className="w-full text-left p-2 rounded hover:bg-white/10 flex justify-between"
                  >
                    <span>{p.firstName} {p.lastName}</span>
                    {p.nickname && <span className="text-white/50 text-sm">{p.nickname}</span>}
                  </button>
                ))}
                {filteredPlayers.length === 0 && (
                  <p className="text-white/40 text-sm text-center py-4">No matching members</p>
                )}
              </div>
            </div>
          )}
        </div>

        <div className="space-y-4">
          <div className="card text-center">
            <div className="text-5xl font-bold text-poker-gold mb-2">{checkedInCount}</div>
            <div className="text-white/60">Players Checked In</div>
          </div>

          <div className="card space-y-3">
            <h3 className="font-semibold text-poker-gold">Tournament Options</h3>
            <div className="text-sm space-y-1 text-white/70">
              <p>Rebuys: {tournament.config.rebuysEnabled ? `Yes ($${tournament.config.rebuyAmount})` : 'No'}</p>
              <p>Addons: {tournament.config.addonsEnabled ? `Yes ($${tournament.config.addonAmount})` : 'No'}</p>
              <p>Starting Chips: {tournament.config.startingChips.toLocaleString()}</p>
            </div>
          </div>

          <button
            onClick={goToTipScreen}
            disabled={beginning || checkedInCount < 2}
            className="btn-primary w-full py-4 text-lg disabled:opacity-50"
          >
            {beginning ? 'Opening…' : '🎰 Open Director Screen (TIP)'}
          </button>
          <p className="text-xs text-white/40 text-center">
            On the TIP screen: enable audio, then press Start Tournament for “Shuffle up and deal.”
          </p>

          <button onClick={refresh} className="btn-secondary w-full">
            Refresh
          </button>
        </div>
      </div>
    </div>
  );
}