// Main play screen — desktop layout
// Logo header / divider / tagline, clue card, board, keyboard.

function HelpIcon({ onClick, size = 36 }) {
  const C = window.COLORS;
  return (
    <button
      onClick={onClick}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = C.aurora; e.currentTarget.style.color = C.aurora; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(175, 136, 204, 0.3)'; e.currentTarget.style.color = C.aurora; }}
      style={{
        width: size, height: size, borderRadius: '50%',
        border: '1px solid rgba(175, 136, 204, 0.3)',
        background: 'transparent',
        color: C.aurora,
        fontFamily: "'Lora', Georgia, serif",
        fontSize: size * 0.48,
        fontStyle: 'italic',
        fontWeight: 500,
        cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'all 150ms ease',
        paddingBottom: 2,
      }}
    >?</button>
  );
}

function ClueCard({ category, clue, issue = "No. 247", date = "Tuesday, April 21" }) {
  const C = window.COLORS;
  return (
    <div style={{
      background: C.bgCard,
      border: `1px solid ${C.border}`,
      padding: '14px 24px 16px',
      position: 'relative',
      maxWidth: 620,
      width: '100%',
      boxSizing: 'border-box',
    }}>
      {/* Top meta row */}
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'baseline',
        marginBottom: 10,
        paddingBottom: 8,
        borderBottom: `1px solid ${C.border}`,
      }}>
        <div style={{
          fontFamily: "'Noto Sans', sans-serif",
          fontSize: 10,
          letterSpacing: '0.24em',
          textTransform: 'uppercase',
          color: C.aurora,
          fontWeight: 600,
        }}>Today's Clue</div>
        <div style={{
          fontFamily: "'Noto Sans', sans-serif",
          fontSize: 10,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          color: C.whiteDim,
        }}>
          {issue} · {date}
        </div>
      </div>
      {/* Category */}
      <div style={{
        fontFamily: "'Noto Sans', sans-serif",
        fontSize: 10,
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        color: C.whiteDim,
        marginBottom: 6,
        fontWeight: 500,
      }}>{category}</div>
      {/* Clue */}
      <div style={{
        fontFamily: "'Lora', Georgia, serif",
        fontSize: 18,
        lineHeight: 1.4,
        color: C.white,
        letterSpacing: '-0.005em',
        fontWeight: 400,
        textWrap: 'pretty',
      }}>{clue}</div>
      {/* Attribution rail */}
      <div style={{
        fontFamily: "'Lora', Georgia, serif",
        fontSize: 11,
        fontStyle: 'italic',
        color: C.whiteFaint,
        marginTop: 10,
        paddingTop: 8,
        borderTop: `1px solid ${C.border}`,
      }}>
        A one-word answer, {window.PUZZLE.answer.length} letters.
      </div>
    </div>
  );
}

function PlayScreen({ onOpenHelp, compact = false, initialInput = '' }) {
  const C = window.COLORS;
  const answer = window.PUZZLE.answer;
  const [guesses, setGuesses] = React.useState(window.DEMO_GUESSES);
  const [currentInput, setCurrentInput] = React.useState(initialInput);
  const [shake, setShake] = React.useState(false);

  const wordLength = answer.length;
  const MAX_LEN = 9;
  const MIN_LEN = 4;
  const won = guesses.includes(answer);
  const lost = !won && guesses.length >= 8;
  const gameOver = won || lost;

  const keyState = React.useMemo(() => window.computeKeyState(guesses, answer), [guesses, answer]);

  const onKey = React.useCallback((letter) => {
    if (gameOver) return;
    if (currentInput.length >= MAX_LEN) return;
    setCurrentInput((s) => s + letter);
  }, [currentInput, gameOver]);

  const onBack = React.useCallback(() => {
    if (gameOver) return;
    setCurrentInput((s) => s.slice(0, -1));
  }, [gameOver]);

  const onEnter = React.useCallback(() => {
    if (gameOver) return;
    if (currentInput.length < MIN_LEN || currentInput.length > MAX_LEN) {
      setShake(true); setTimeout(() => setShake(false), 400);
      return;
    }
    setGuesses((g) => [...g, currentInput]);
    setCurrentInput('');
  }, [currentInput, gameOver]);

  // Hardware keyboard
  React.useEffect(() => {
    const handler = (e) => {
      if (e.metaKey || e.ctrlKey || e.altKey) return;
      if (e.key === 'Enter') { e.preventDefault(); onEnter(); }
      else if (e.key === 'Backspace') { e.preventDefault(); onBack(); }
      else if (/^[a-zA-Z]$/.test(e.key)) { e.preventDefault(); onKey(e.key.toUpperCase()); }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onEnter, onBack, onKey]);

  const tileSize = compact ? 30 : 38;
  const rowGap = compact ? 6 : 8;
  // Match the board's left edge to the Q key so the S·E·N·T·I·N·E·L counter
  // column sits directly above the keyboard's top row, regardless of guess length.
  const kbKeyWidth = compact ? 32 : 42;
  const kbGap = compact ? 5 : 7;
  const topRowWidth = 10 * kbKeyWidth + 9 * kbGap;

  return (
    <div style={{
      minHeight: '100%',
      background: C.bg,
      color: C.white,
      fontFamily: "'Noto Sans', sans-serif",
      padding: compact ? '18px 16px 24px' : '16px 48px 24px',
      display: 'flex',
      flexDirection: 'column',
      boxSizing: 'border-box',
    }}>
      {/* Header */}
      <header style={{
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center',
        gap: 16,
        paddingBottom: compact ? 10 : 10,
        borderBottom: `1px solid ${C.border}`,
      }}>
        <div />
        <div style={{ justifySelf: 'center' }}>
          <window.Wordmark size={compact ? 'sm' : 'md'} color={C.aurora} />
        </div>
        <div style={{ justifySelf: 'end' }}>
          <HelpIcon onClick={onOpenHelp} size={compact ? 32 : 36} />
        </div>
      </header>

      {/* Tagline */}
      <div style={{
        textAlign: 'center',
        paddingTop: compact ? 10 : 10,
        paddingBottom: compact ? 14 : 14,
        fontFamily: "'Lora', Georgia, serif",
        fontStyle: 'italic',
        fontSize: compact ? 13 : 14,
        color: C.whiteDim,
        letterSpacing: '0.01em',
      }}>A daily trivia word game</div>

      {/* Clue */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: compact ? 16 : 16 }}>
        <ClueCard category={window.PUZZLE.category} clue={window.PUZZLE.clue} />
      </div>

      {/* Board */}
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        marginBottom: compact ? 16 : 16,
        animation: shake ? 'sentinel-shake 400ms ease' : 'none',
      }}>
        <div style={{ width: topRowWidth, display: 'flex', justifyContent: 'flex-start' }}>
          <window.Board
            guesses={guesses}
            currentInput={currentInput}
            answer={answer}
            tileSize={tileSize}
            gap={rowGap}
          />
        </div>
      </div>

      {/* Keyboard */}
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'auto' }}>
        <window.Keyboard
          keyState={keyState}
          onKey={onKey}
          onEnter={onEnter}
          onBack={onBack}
          compact={compact}
        />
      </div>
    </div>
  );
}

Object.assign(window, { PlayScreen, HelpIcon, ClueCard });