'use client';

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

export default function CheckinPage() {
  const router = useRouter();
  const { tournament, loading, updateTournament } = useTournament(3000);
  const [players, setPlayers] = useState<Player[]>([]);
  const [search, setSearch] = useState('');
  const [checkingIn, setCheckingIn] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [showCreate, setShowCreate] = useState(false);
  const [creating, setCreating] = useState(false);
  const [newPlayer, setNewPlayer] = useState({
    firstName: '',
    lastName: '',
    nickname: '',
    phone: '',
  });

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

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

  // Prefill name from search when opening create form
  useEffect(() => {
    if (!showCreate || !search.trim()) return;
    const parts = search.trim().split(/\s+/);
    if (parts.length >= 2) {
      setNewPlayer((p) => ({
        ...p,
        firstName: p.firstName || parts[0],
        lastName: p.lastName || parts.slice(1).join(' '),
      }));
    } else if (parts.length === 1) {
      setNewPlayer((p) => ({
        ...p,
        firstName: p.firstName || parts[0],
      }));
    }
  }, [showCreate, search]);

  // Tournament already running — send players to the live clock
  useEffect(() => {
    if (!tournament || loading || success) return;
    if (tournament.status === 'running' || tournament.status === 'paused' || tournament.status === 'break') {
      router.replace('/live');
    }
  }, [tournament, loading, success, router]);

  const playerDisplayName = (player: Player) =>
    player.nickname
      ? `${player.firstName} "${player.nickname}" ${player.lastName}`
      : `${player.firstName} ${player.lastName}`;

  const goToLiveClock = (name: string) => {
    setSuccess(name);
    // Brief confirmation, then player clock
    setTimeout(() => {
      router.push('/live');
    }, 1400);
  };

  const handleCheckIn = async (player: Player) => {
    if (!tournament) return;
    setCheckingIn(player.id);
    setError(null);

    const name = playerDisplayName(player);

    try {
      await updateTournament('check_in_by_player', {
        playerId: player.id,
        playerName: name,
      });
      goToLiveClock(name);
    } catch {
      setError('Check-in failed. Please try again.');
      setCheckingIn(null);
    }
  };

  const handleCreateAndCheckIn = async () => {
    if (!tournament) return;
    const firstName = newPlayer.firstName.trim();
    const lastName = newPlayer.lastName.trim();
    if (!firstName || !lastName) {
      setError('First and last name are required.');
      return;
    }

    setCreating(true);
    setError(null);
    try {
      const res = await fetch('/api/players', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          firstName,
          lastName,
          nickname: newPlayer.nickname.trim() || undefined,
          phone: newPlayer.phone.trim() || undefined,
        }),
      });
      const player = (await res.json()) as Player & { error?: string };
      if (!res.ok) {
        throw new Error(player.error || 'Could not create account');
      }

      await fetchPlayers();

      const name = playerDisplayName(player);
      await updateTournament('check_in_by_player', {
        playerId: player.id,
        playerName: name,
      });
      goToLiveClock(name);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Could not create account');
      setCreating(false);
      setCheckingIn(null);
    }
  };

  const filtered = players.filter((p) => {
    const q = search.toLowerCase();
    if (!q) return true;
    return (
      p.firstName.toLowerCase().includes(q) ||
      p.lastName.toLowerCase().includes(q) ||
      `${p.firstName} ${p.lastName}`.toLowerCase().includes(q) ||
      (p.nickname?.toLowerCase().includes(q) ?? false) ||
      (p.memberId?.toLowerCase().includes(q) ?? false)
    );
  });

  const isAlreadyCheckedIn = (playerId: string) =>
    tournament?.entries.some((e) => e.playerId === playerId && e.checkedIn);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center p-4">
        <span className="text-white/60">Loading...</span>
      </div>
    );
  }

  // Full-screen success while redirecting to live clock
  if (success) {
    return (
      <div className="min-h-screen felt-bg flex flex-col items-center justify-center p-6 text-center">
        <div className="text-6xl mb-4">✅</div>
        <h1 className="text-2xl font-bold text-green-300 mb-2">You&apos;re checked in!</h1>
        <p className="text-lg text-white/80 mb-1">Welcome, {success}</p>
        <p className="text-sm text-white/50">Opening the live tournament clock…</p>
      </div>
    );
  }

  if (!tournament || tournament.status !== 'registration') {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center p-6 text-center">
        <div className="text-5xl mb-4">🎰</div>
        <h1 className="text-2xl font-bold text-poker-gold mb-2">
          {!tournament ? 'Check-In Closed' : 'Tournament In Progress'}
        </h1>
        <p className="text-white/60 mb-6">
          {!tournament
            ? 'No tournament is currently open for registration.'
            : 'Registration has ended. View the live clock instead.'}
        </p>
        {tournament && (
          <button onClick={() => router.push('/live')} className="btn-primary">
            Open Live Clock →
          </button>
        )}
      </div>
    );
  }

  return (
    <div className="min-h-screen p-4 pb-8 max-w-lg mx-auto">
      <div className="text-center mb-6 pt-4">
        <h1 className="text-2xl font-display font-bold text-poker-gold">Player Check-In</h1>
        <p className="text-white/60 mt-1">{tournament.config.name}</p>
        <p className="text-sm text-white/40">Buy-in: ${tournament.config.buyIn}</p>
      </div>

      {error && (
        <div className="bg-red-900/40 border border-red-500/40 rounded-xl p-3 mb-4 text-center text-red-200 text-sm">
          {error}
        </div>
      )}

      <input
        className="input-field mb-3 text-lg py-3"
        placeholder="Search your name..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        autoFocus
      />

      {!showCreate ? (
        <button
          type="button"
          onClick={() => {
            setShowCreate(true);
            setError(null);
          }}
          className="w-full mb-4 p-3 rounded-xl border border-dashed border-poker-gold/50 bg-poker-gold/10 text-poker-gold font-semibold hover:bg-poker-gold/20"
        >
          + New player? Create account
        </button>
      ) : (
        <div className="card mb-4 space-y-3 border-poker-gold/30">
          <h2 className="font-semibold text-poker-gold">Create your account</h2>
          <p className="text-xs text-white/50">
            First time here? Enter your name to join the player list and check in.
          </p>
          <div className="grid grid-cols-2 gap-2">
            <div>
              <label className="block text-xs text-white/50 mb-1">First name *</label>
              <input
                className="input-field"
                value={newPlayer.firstName}
                onChange={(e) => setNewPlayer((p) => ({ ...p, firstName: e.target.value }))}
                autoComplete="given-name"
              />
            </div>
            <div>
              <label className="block text-xs text-white/50 mb-1">Last name *</label>
              <input
                className="input-field"
                value={newPlayer.lastName}
                onChange={(e) => setNewPlayer((p) => ({ ...p, lastName: e.target.value }))}
                autoComplete="family-name"
              />
            </div>
          </div>
          <div>
            <label className="block text-xs text-white/50 mb-1">Nickname (optional)</label>
            <input
              className="input-field"
              value={newPlayer.nickname}
              onChange={(e) => setNewPlayer((p) => ({ ...p, nickname: e.target.value }))}
            />
          </div>
          <div>
            <label className="block text-xs text-white/50 mb-1">Phone (optional)</label>
            <input
              className="input-field"
              type="tel"
              value={newPlayer.phone}
              onChange={(e) => setNewPlayer((p) => ({ ...p, phone: e.target.value }))}
              autoComplete="tel"
            />
          </div>
          <div className="flex gap-2">
            <button
              type="button"
              className="btn-primary flex-1"
              disabled={creating}
              onClick={handleCreateAndCheckIn}
            >
              {creating ? 'Creating…' : 'Create & check in'}
            </button>
            <button
              type="button"
              className="btn-secondary"
              disabled={creating}
              onClick={() => setShowCreate(false)}
            >
              Cancel
            </button>
          </div>
        </div>
      )}

      <div className="space-y-2">
        {filtered.map((p) => {
          const checkedIn = isAlreadyCheckedIn(p.id);
          return (
            <button
              key={p.id}
              onClick={() => {
                if (checkedIn) {
                  goToLiveClock(playerDisplayName(p));
                } else {
                  handleCheckIn(p);
                }
              }}
              disabled={checkingIn === p.id}
              className={`w-full p-4 rounded-xl text-left transition-all ${
                checkedIn
                  ? 'bg-green-900/30 border border-green-500/30'
                  : 'bg-white/10 border border-white/20 hover:bg-white/20 active:scale-[0.98]'
              }`}
            >
              <div className="flex items-center justify-between">
                <div>
                  <div className="font-semibold text-lg">
                    {p.firstName} {p.lastName}
                  </div>
                  {p.nickname && <div className="text-sm text-white/50">{p.nickname}</div>}
                </div>
                {checkedIn ? (
                  <span className="text-green-400 text-sm font-medium">✓ Checked In → Clock</span>
                ) : checkingIn === p.id ? (
                  <span className="text-poker-gold text-sm">Checking in...</span>
                ) : (
                  <span className="text-poker-gold text-sm">Tap to check in →</span>
                )}
              </div>
            </button>
          );
        })}

        {filtered.length === 0 && !showCreate && (
          <div className="text-center text-white/40 py-6 space-y-3">
            <p>No players found matching that search.</p>
            <button
              type="button"
              className="btn-primary"
              onClick={() => {
                setShowCreate(true);
                setError(null);
              }}
            >
              Create new account
            </button>
          </div>
        )}
      </div>
    </div>
  );
}