// Board with inline S·E·N·T·I·N·E·L counter.
// Each row = counter letter + (tiles only if filled/current). No placeholder tiles.

function Tile({ letter, state, size = 40, delay = 0 }) {
  const C = window.COLORS;
  let bg, color, border;
  if (state === 'correct') { bg = C.guardian; color = C.white; border = C.guardian; }
  else if (state === 'present') { bg = C.aurora; color = C.bg; border = C.aurora; }
  else if (state === 'absent') { bg = C.charcoal; color = 'rgba(248,248,243,0.55)'; border = C.charcoal; }
  else if (state === 'active') { bg = 'transparent'; color = C.white; border = 'rgba(175,136,204,0.55)'; }
  else { bg = 'transparent'; color = C.white; border = 'rgba(248,248,243,0.12)'; }

  return (
    <div style={{
      width: size, height: size, background: bg,
      border: `1.5px solid ${border}`, borderRadius: 8,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: "'Noto Sans', -apple-system, sans-serif",
      fontSize: size * 0.46, fontWeight: 600, color,
      letterSpacing: '0.02em', textTransform: 'uppercase',
      transition: `background 280ms ease ${delay}ms, color 280ms ease ${delay}ms, border-color 280ms ease ${delay}ms`,
      userSelect: 'none', boxSizing: 'border-box', flexShrink: 0,
    }}>{letter}</div>
  );
}

// Single counter cell — three distinct looks for used/active/upcoming.
function CounterCell({ letter, state, size }) {
  const C = window.COLORS;
  let color, bg, border, content = letter, extra = null, textDecoration = 'none';
  if (state === 'used') {
    // Completed — ghosted outline, strike through to signal "spent"
    color = 'rgba(248,248,243,0.28)';
    bg = 'transparent';
    border = 'rgba(248,248,243,0.08)';
    textDecoration = 'line-through';
  } else if (state === 'active') {
    // Current attempt — Aurora Veil outlined glyph. Unfilled so it doesn't
    // read like a tile-state chip; the letter itself becomes the mark.
    color = C.aurora;
    bg = 'rgba(175,136,204,0.08)';
    border = C.aurora;
    extra = (
      <div style={{
        position: 'absolute', inset: -4,
        border: `1px solid ${C.aurora}`, borderRadius: 10,
        opacity: 0.35, pointerEvents: 'none',
      }} />
    );
  } else {
    // Upcoming — soft Sentinel Core outline, stronger than "used"
    color = 'rgba(175,136,204,0.72)';
    bg = 'rgba(86,0,121,0.12)';
    border = 'rgba(86,0,121,0.55)';
  }
  return (
    <div style={{
      width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center',
      color, background: bg, border: `1.5px solid ${border}`, borderRadius: 8,
      fontFamily: "'Lora', Georgia, serif", fontSize: size * 0.48, fontWeight: 500,
      letterSpacing: '0.02em', position: 'relative', boxSizing: 'border-box',
      textDecoration, transition: 'all 200ms ease', flexShrink: 0,
    }}>
      {content}
      {extra}
    </div>
  );
}

// Small chevron pointing from the active counter into the current row.
function ActiveArrow({ size, color }) {
  return (
    <svg width={18} height={size * 0.6} viewBox="0 0 18 24" fill="none"
      style={{ flexShrink: 0, alignSelf: 'center' }}>
      <path d="M2 12 L14 12 M10 7 L15 12 L10 17"
        stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// A single row: counter letter + (tiles for filled/current, or nothing for future)
function Row({ index, guess, answer, isCurrent, currentInput, tileSize, isActive, isUsed }) {
  const C = window.COLORS;
  const L = window.SENTINEL_LETTERS[index];
  const counterState = isActive ? 'active' : (isUsed ? 'used' : 'upcoming');

  let tiles = null;
  if (guess) {
    const evaluation = window.evaluateGuess(guess, answer);
    tiles = (
      <div style={{ display: 'flex', gap: 6 }}>
        {guess.split('').map((ch, i) => (
          <Tile key={i} letter={ch} state={evaluation[i]} size={tileSize} delay={i * 60} />
        ))}
      </div>
    );
  } else if (isCurrent) {
    const input = (currentInput || '').toUpperCase();
    tiles = (
      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
        {input.split('').map((ch, i) => (
          <Tile key={i} letter={ch} state="active" size={tileSize} />
        ))}
        {/* Blinking caret — signals "type anything" without revealing length */}
        <div style={{
          width: 2, height: tileSize * 0.55,
          background: C.aurora,
          animation: 'sentinel-blink 900ms steps(2) infinite',
          marginLeft: input.length === 0 ? 0 : 4,
          opacity: 0.85,
        }} />
      </div>
    );
  }

  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      minHeight: tileSize, position: 'relative',
    }}>
      <CounterCell letter={L} state={counterState} size={tileSize} />
      {/* Arrow only on the active row */}
      <div style={{ width: 18, display: 'flex', justifyContent: 'center' }}>
        {isActive && <ActiveArrow size={tileSize} color="rgba(175,136,204,0.55)" />}
      </div>
      <div style={{ minHeight: tileSize, display: 'flex', alignItems: 'center' }}>
        {tiles}
      </div>
    </div>
  );
}

function Board({ guesses, currentInput, answer, tileSize = 40, gap = 10 }) {
  const totalRows = 8;
  const currentIndex = guesses.length;
  const won = guesses.includes(answer);
  const lost = !won && guesses.length >= totalRows;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap, alignItems: 'flex-start' }}>
      {Array.from({ length: totalRows }).map((_, i) => (
        <Row
          key={i}
          index={i}
          guess={guesses[i]}
          answer={answer}
          isCurrent={i === currentIndex && !won && !lost}
          currentInput={currentInput}
          tileSize={tileSize}
          isActive={!won && !lost && i === currentIndex}
          isUsed={i < currentIndex}
        />
      ))}
    </div>
  );
}

Object.assign(window, { Tile, Row, Board });