// On-screen QWERTY keyboard. Keys colored based on feedback from prior guesses.

function Keyboard({ keyState, onKey, onEnter, onBack, compact = false }) {
  const C = window.COLORS;
  const rows = [
    ['Q','W','E','R','T','Y','U','I','O','P'],
    ['A','S','D','F','G','H','J','K','L'],
    ['ENTER','Z','X','C','V','B','N','M','BACK'],
  ];

  const keyHeight = compact ? 46 : 56;
  const keyWidth = compact ? 32 : 42;
  const gap = compact ? 5 : 7;

  const keyStyle = (key) => {
    const isAction = key === 'ENTER' || key === 'BACK';
    const s = keyState[key];
    let bg, color, border;
    if (s === 'correct') {
      bg = C.guardian;
      color = C.white;
      border = C.guardian;
    } else if (s === 'present') {
      bg = C.aurora;
      color = C.bg;
      border = C.aurora;
    } else if (s === 'absent') {
      bg = C.charcoal;
      color = 'rgba(248, 248, 243, 0.6)';
      border = C.charcoal;
    } else {
      bg = 'rgba(248, 248, 243, 0.06)';
      color = C.white;
      border = 'rgba(248, 248, 243, 0.12)';
    }
    if (isAction) {
      bg = 'rgba(175, 136, 204, 0.1)';
      color = C.aurora;
      border = 'rgba(175, 136, 204, 0.3)';
    }
    return {
      height: keyHeight,
      minWidth: isAction ? (compact ? 56 : 72) : keyWidth,
      padding: isAction ? `0 ${compact ? 10 : 14}px` : 0,
      background: bg,
      color,
      border: `1px solid ${border}`,
      fontFamily: "'Noto Sans', -apple-system, sans-serif",
      fontSize: isAction ? (compact ? 10 : 11) : (compact ? 14 : 16),
      fontWeight: isAction ? 600 : 500,
      letterSpacing: isAction ? '0.12em' : '0.02em',
      textTransform: 'uppercase',
      cursor: 'pointer',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      transition: 'all 140ms ease',
      userSelect: 'none',
      boxSizing: 'border-box',
    };
  };

  const handle = (key) => {
    if (key === 'ENTER') return onEnter && onEnter();
    if (key === 'BACK') return onBack && onBack();
    onKey && onKey(key);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap, alignItems: 'center' }}>
      {rows.map((row, ri) => (
        <div key={ri} style={{ display: 'flex', gap }}>
          {row.map((key) => (
            <button
              key={key}
              onClick={() => handle(key)}
              onMouseEnter={(e) => { e.currentTarget.style.filter = 'brightness(1.15)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.filter = 'none'; }}
              style={keyStyle(key)}
            >
              {key === 'BACK' ? (
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M6 1L1 7l5 6h10a1 1 0 001-1V2a1 1 0 00-1-1H6z" />
                  <path d="M9 5l4 4M13 5l-4 4" />
                </svg>
              ) : key}
            </button>
          ))}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Keyboard });