import { type JSX } from 'react';
import { useAppStore } from '../../store';
import { uiStrings } from '../../content';
import { bootstrapAudioContext } from './use-audio-bootstrap';

/**
 * D-21 + AEST-07: tasteful typographic Begin screen. Phase 3 swaps in
 * the painted gesture-gate without changing this file's behavior.
 *
 * D-22: shown on first run only — gated by session.beginGateDismissed.
 * Once dismissed, the gate stays down for the session; persistence
 * across sessions is owned by the save lifecycle (Plan 02-05).
 *
 * CLAUDE.md banner concern #7 (Web Audio user-gesture): the click
 * handler calls `bootstrapAudioContext()` SYNCHRONOUSLY (not inside a
 * useEffect), so iOS Safari sees the AudioContext construction inside
 * the gesture (Pitfall 5).
 */
export function BeginScreen(): JSX.Element | null {
  const dismissed = useAppStore((s) => s.beginGateDismissed);
  const dismissBeginGate = useAppStore((s) => s.dismissBeginGate);

  if (dismissed) return null;

  const strings = uiStrings[1]?.begin;
  if (!strings) return null;

  const onBegin = (): void => {
    void bootstrapAudioContext(); // synchronous-inside-click; do NOT move into useEffect (Pitfall 5)
    dismissBeginGate();
  };

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 100,
        background: '#1a1a1a',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#e8e0d0',
        fontFamily: 'serif',
      }}
      role="dialog"
      aria-label={strings.title}
    >
      <h1 style={{ fontSize: '3rem', margin: 0, fontWeight: 300 }}>{strings.title}</h1>
      <p style={{ marginTop: '1rem', opacity: 0.7, letterSpacing: '0.2em' }}>{strings.subtitle}</p>
      <button
        onClick={onBegin}
        style={{
          marginTop: '4rem',
          padding: '0.6rem 2.4rem',
          fontSize: '1.1rem',
          background: 'transparent',
          color: '#e8e0d0',
          border: '1px solid #e8e0d0',
          cursor: 'pointer',
          fontFamily: 'serif',
        }}
      >
        {strings.cta}
      </button>
    </div>
  );
}