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

export default function Lobby() {
  const { gid } = useParams<{ gid: string }>();
  const navigate = useNavigate();
  const myPlayer = useGameStore((s) => s.myPlayer);
  const games = useGameStore((s) => s.games);

  const game = games.find((g) => g.gid === gid);
  const players = game?.players ?? [];
  const isHost = myPlayer?.order === 0;
  const canStart = players.length === 4 && isHost;

  const handleLeave = () => {
    emit.leaveGame();
    useGameStore.getState().reset();
    localStorage.removeItem('bridzik_player');
    navigate('/', { replace: true });
  };

  const handleCopyCode = () => {
    if (gid) navigator.clipboard.writeText(gid);
  };

  return (
    <div className="max-w-md mx-auto p-4 pt-8 min-h-screen">
      <div className="flex items-center justify-between mb-6">
        <h1 className="font-serif text-2xl text-gold">{game?.name ?? 'Hra'}</h1>
        <button onClick={handleLeave} className="text-sm text-green-dim hover:text-gold">
          Odísť
        </button>
      </div>

      <div className="bg-header border border-[#142018] rounded-xl p-4 mb-4 flex items-center justify-between">
        <div>
          <p className="text-xs uppercase tracking-[.1em] text-green-dim mb-1">Kód hry</p>
          <p className="font-mono text-sm text-green-score break-all">{gid}</p>
        </div>
        <button
          onClick={handleCopyCode}
          className="ml-3 px-3 py-1 rounded-lg text-sm border border-gold/30 text-gold hover:bg-gold hover:text-table transition-colors"
        >
          Kopírovať
        </button>
      </div>

      <div className="bg-header border border-[#142018] rounded-xl p-4 mb-6 flex flex-col gap-3">
        {[0, 1, 2, 3].map((order) => {
          const p = players.find((pl) => pl.order === order);
          return (
            <div key={order} className="flex items-center gap-3">
              <span className={`text-lg ${p ? 'text-gold' : 'text-[#7a7058]'}`}>
                {p ? '✦' : '○'}
              </span>
              <span className={p ? 'font-serif text-green-score' : 'text-green-dim italic'}>
                {p ? `${p.name}${myPlayer?.order === p.order ? ' (ty)' : ''}` : 'Čaká sa…'}
              </span>
            </div>
          );
        })}
      </div>

      <button
        disabled={!canStart}
        onClick={() => gid && emit.startGame(gid)}
        className="w-full py-3 rounded-xl bg-gold text-table font-serif font-semibold text-lg disabled:opacity-40 disabled:cursor-default hover:bg-gold-bright transition-colors"
      >
        {isHost ? (canStart ? 'Začať hru' : `Čaká sa na hráčov (${players.length}/4)`) : 'Čaká sa na hostiteľa…'}
      </button>
    </div>
  );
}