import { useCollection, useIdentity } from '@deplixo/sdk';
import RoomEntry from './components/RoomEntry.jsx';
import WordSetup from './components/WordSetup.jsx';
import GameBoard from './components/GameBoard.jsx';
import Results from './components/Results.jsx';

function App() {
  const { user, loading: idLoading } = useIdentity();
  const [roomId, setRoomId] = useState(null);

  if (idLoading || !user) {
    return (
      <div className="loading-screen">
        <div className="spinner" />
        <p>Loading…</p>
      </div>
    );
  }

  return (
    <div className="app">
      <header className="app-header">
        <div className="brand">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M4 21V5a2 2 0 0 1 2-2h7" />
            <path d="M13 3l6 6" />
            <circle cx="16" cy="10" r="2" />
            <path d="M16 12v4" />
            <path d="M14 14h4" />
          </svg>
          <h1>Duel Hangman</h1>
        </div>
        <div className="user-chip" aria-label={`Signed in as ${user.name}`}>
          <span className="user-dot" />
          {user.name}
        </div>
      </header>

      <main className="app-main">
        <GameRouter user={user} roomId={roomId} setRoomId={setRoomId} />
      </main>
    </div>
  );
}

function GameRouter({ user, roomId, setRoomId }) {
  if (!roomId) {
    return <RoomEntry onJoin={setRoomId} user={user} />;
  }
  return <RoomGame user={user} roomId={roomId} onLeave={() => setRoomId(null)} />;
}

function RoomGame({ user, roomId, onLeave }) {
  const { items: players, loading: playersLoading, add: addPlayer, update: updatePlayer, remove: removePlayer } =
    useCollection('players', { room: roomId });
  const { items: guesses, add: addGuess, remove: removeGuess } =
    useCollection('guesses', { room: roomId });

  // Register self as a player on mount (idempotent)
  useEffect(() => {
    if (playersLoading) return;
    const me = (players || []).find((p) => p.author?.id === user.id);
    if (!me) {
      // Only allow joining if room has < 2 players
      const distinctAuthors = new Set((players || []).map((p) => p.author?.id));
      if (distinctAuthors.size < 2 || distinctAuthors.has(user.id)) {
        addPlayer({ name: user.name, word: null, ready: false });
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [playersLoading]);

  if (playersLoading) {
    return (
      <div className="loading-screen">
        <div className="spinner" />
        <p>Joining room…</p>
      </div>
    );
  }

  // Deduplicate by author.id (keep the latest)
  const playerMap = new Map();
  for (const p of players || []) {
    if (!p.author?.id) continue;
    const existing = playerMap.get(p.author.id);
    if (!existing || (p.createdAt || 0) > (existing.createdAt || 0)) {
      playerMap.set(p.author.id, p);
    }
  }
  const uniquePlayers = Array.from(playerMap.values());
  const me = uniquePlayers.find((p) => p.author?.id === user.id);
  const opponent = uniquePlayers.find((p) => p.author?.id !== user.id);

  // Determine game state
  const bothJoined = uniquePlayers.length >= 2;
  const bothWordsSet = bothJoined && me?.value?.word && opponent?.value?.word;
  const myGuesses = (guesses || []).filter((g) => g.author?.id === user.id);
  const opponentGuesses = (guesses || []).filter((g) => g.author?.id === opponent?.author?.id);

  // Compute winner
  const myWordToGuess = opponent?.value?.word?.toLowerCase() || '';
  const opponentWordToGuess = me?.value?.word?.toLowerCase() || '';

  const myCorrectLetters = new Set(
    myGuesses.filter((g) => myWordToGuess.includes(g.value.letter)).map((g) => g.value.letter)
  );
  const opponentCorrectLetters = new Set(
    opponentGuesses.filter((g) => opponentWordToGuess.includes(g.value.letter)).map((g) => g.value.letter)
  );

  const iWon =
    bothWordsSet &&
    myWordToGuess.length > 0 &&
    [...myWordToGuess].every((ch) => ch === ' ' || myCorrectLetters.has(ch));
  const opponentWon =
    bothWordsSet &&
    opponentWordToGuess.length > 0 &&
    [...opponentWordToGuess].every((ch) => ch === ' ' || opponentCorrectLetters.has(ch));

  // Out of guesses (6 wrong allowed)
  const MAX_WRONG = 6;
  const myWrongCount = myGuesses.filter((g) => !myWordToGuess.includes(g.value.letter)).length;
  const opponentWrongCount = opponentGuesses.filter((g) => !opponentWordToGuess.includes(g.value.letter)).length;
  const myEliminated = myWrongCount >= MAX_WRONG;
  const opponentEliminated = opponentWrongCount >= MAX_WRONG;

  // Winner logic: first to fully reveal opponent's word wins.
  // If both eliminated and neither solved -> draw.
  let winner = null; // 'me' | 'opponent' | 'draw' | null
  if (iWon && !opponentWon) winner = 'me';
  else if (opponentWon && !iWon) winner = 'opponent';
  else if (iWon && opponentWon) winner = 'me'; // tiebreak: shouldn't really happen since first guess wins
  else if (myEliminated && opponentEliminated) winner = 'draw';

  const handleLeave = async () => {
    if (me) await removePlayer(me.id);
    onLeave();
  };

  const handleSetWord = async (word) => {
    if (!me) return;
    await updatePlayer(me.id, { ...me.value, word: word.toLowerCase(), ready: true });
  };

  const handleGuess = async (letter) => {
    const lower = letter.toLowerCase();
    // Prevent duplicate guesses
    if (myGuesses.some((g) => g.value.letter === lower)) return;
    await addGuess({ letter: lower });
  };

  const handleRematch = async () => {
    // Clear all guesses and reset both players' words
    for (const g of guesses || []) {
      await removeGuess(g.id);
    }
    if (me) await updatePlayer(me.id, { ...me.value, word: null, ready: false });
    // Note: opponent will reset their own word client-side
  };

  // ----- Render the right view -----

  if (winner) {
    return (
      <Results
        winner={winner}
        me={me}
        opponent={opponent}
        myWord={me?.value?.word}
        opponentWord={opponent?.value?.word}
        roomId={roomId}
        onRematch={handleRematch}
        onLeave={handleLeave}
      />
    );
  }

  if (!bothJoined) {
    return (
      <WaitingRoom
        roomId={roomId}
        me={me}
        playerCount={uniquePlayers.length}
        onLeave={handleLeave}
      />
    );
  }

  if (!bothWordsSet) {
    return (
      <WordSetup
        roomId={roomId}
        me={me}
        opponent={opponent}
        onSetWord={handleSetWord}
        onLeave={handleLeave}
      />
    );
  }

  return (
    <GameBoard
      roomId={roomId}
      me={me}
      opponent={opponent}
      wordToGuess={myWordToGuess}
      myGuesses={myGuesses}
      opponentGuesses={opponentGuesses}
      opponentWordLength={opponentWordToGuess.length}
      opponentCorrectLetters={opponentCorrectLetters}
      maxWrong={MAX_WRONG}
      myWrongCount={myWrongCount}
      opponentWrongCount={opponentWrongCount}
      onGuess={handleGuess}
      onLeave={handleLeave}
    />
  );
}

function WaitingRoom({ roomId, me, playerCount, onLeave }) {
  return (
    <div className="card center-card">
      <div className="card-header">
        <h2>Waiting for opponent…</h2>
        <span className="room-pill">Room: {roomId}</span>
      </div>
      <p className="muted">
        Share the room name <strong>{roomId}</strong> with a friend. The match starts as soon as
        they join.
      </p>
      <div className="player-list">
        <div className="player-row">
          <span className="player-bullet present" />
          <span>{me?.value?.name || 'You'} (you)</span>
        </div>
        <div className="player-row">
          <span className="player-bullet pending" />
          <span className="muted">Waiting for player 2…</span>
        </div>
      </div>
      <div className="big-spinner" aria-hidden="true">
        <div className="spinner" />
      </div>
      <button className="btn btn-ghost" data-testid="leave-room-button" onClick={onLeave}>
        Leave room
      </button>
      <p className="tiny muted">{playerCount} / 2 players</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);