// Loading screen shown between capture and result. Variant-flavored.
function LoadingScreen({ variant }) {
  const messages = {
    museum:       ['標本を照合中', '目録を繙いています'],
    notebook:     ['メモをまとめてる…', 'ひらめき中…'],
    encyclopedia: ['索引を検索中', '項目を照合しています'],
  }[variant];

  const [dotCount, setDotCount] = React.useState(0);
  const [msgIdx, setMsgIdx] = React.useState(0);
  React.useEffect(() => {
    const d = setInterval(() => setDotCount(c => (c + 1) % 4), 400);
    const m = setInterval(() => setMsgIdx(i => (i + 1) % messages.length), 1400);
    return () => { clearInterval(d); clearInterval(m); };
  }, []);

  const accent = variant === 'museum' ? '#8b2920' : variant === 'notebook' ? '#5a6b4a' : '#1e3a5f';

  return (
    <div style={{
      position: 'absolute', inset: 0, background: '#f4ecdc',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      fontFamily: '"Noto Serif JP", serif', color: '#1a1612',
      padding: 40, textAlign: 'center',
    }}>
      {/* Spinner: rotating concentric circles w/ serifs */}
      <div style={{
        width: 72, height: 72, marginBottom: 24, position: 'relative',
        animation: 'spin 2.5s linear infinite',
      }}>
        <svg viewBox="0 0 72 72" style={{ width: '100%', height: '100%' }}>
          <circle cx="36" cy="36" r="30" fill="none" stroke={accent} strokeWidth="0.8"/>
          <circle cx="36" cy="36" r="22" fill="none" stroke={accent} strokeWidth="0.5" strokeDasharray="3 3"/>
          <circle cx="36" cy="36" r="4" fill={accent}/>
          {[0, 90, 180, 270].map(a => (
            <line key={a} x1="36" y1="2" x2="36" y2="10"
              stroke={accent} strokeWidth="1"
              transform={`rotate(${a} 36 36)`}/>
          ))}
        </svg>
      </div>
      <div style={{
        fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: 3,
        color: accent, marginBottom: 10,
      }}>IDENTIFYING</div>
      <div style={{ fontSize: 16, letterSpacing: 1.5 }}>
        {messages[msgIdx]}{'.'.repeat(dotCount)}
      </div>
    </div>
  );
}

window.LoadingScreen = LoadingScreen;