/* Speak / Pronunciation lesson screen. */
const { TopBar, TabBar, Card, Btn, Icon, Progress } = window.GG;

const SpeakLesson = ({ onBack = () => {}, onContinue = () => {} }) => {
  const [recording, setRecording] = React.useState(false);
  const [scored, setScored] = React.useState(false);

  const tap = () => {
    if (recording) {
      setRecording(false);
      setScored(true);
    } else {
      setRecording(true);
      setScored(false);
      setTimeout(() => { setRecording(false); setScored(true); }, 1400);
    }
  };

  return (
    <div className="gg-screen" style={{ background: '#fff' }}>
      <div className="gg-topbar" style={{ borderBottom: 0, paddingBottom: 6, marginTop: 64, paddingTop: 10 }}>
        <button className="gg-btn gg-btn--secondary" style={{ padding: '8px 12px', borderRadius: 9999 }} onClick={onBack} aria-label="Back">
          <Icon name="x" size={16} color="#333" />
        </button>
        <div style={{ flex: 1, margin: '0 12px' }}>
          <Progress value={45} color="#1456f0" />
        </div>
        <span className="gg-stat gg-stat--heart"><Icon name="heart" size={14} color="#ef4444" stroke={2} /> 3</span>
      </div>

      <div className="gg-body" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', paddingTop: 20 }}>
        <div style={{ font: '600 11px var(--font-ui)', color: '#8e8e93', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Say "Kem cho"</div>

        <Card style={{ width: '100%', marginTop: 18, padding: 22, textAlign: 'center' }}>
          <div style={{ font: '500 44px var(--font-display)', color: '#222', lineHeight: 1.1 }}>કેમ છો</div>
          <div style={{ font: '500 16px var(--font-ui)', color: '#45515e', marginTop: 8 }}>Kem cho</div>
          <div style={{ font: '400 13px var(--font-ui)', color: '#8e8e93', marginTop: 4 }}>How are you?</div>
          <button onClick={() => {}} style={{ marginTop: 14, background: '#e8efff', border: 0, padding: 12, borderRadius: 9999, cursor: 'pointer' }} aria-label="Play audio">
            <Icon name="volume-2" size={22} color="#1456f0" stroke={2} />
          </button>
        </Card>

        <div style={{ marginTop: 28 }}>
          <button
            onClick={tap}
            style={{
              width: 96, height: 96, borderRadius: 9999,
              background: recording ? '#ef4444' : '#1456f0',
              color: '#fff', border: 0, cursor: 'pointer',
              boxShadow: '0 0 15px rgba(44,30,116,0.16)',
              transform: recording ? 'scale(1.05)' : 'scale(1)',
              transition: 'transform 200ms cubic-bezier(0.2,0,0,1), background 150ms ease-out',
            }}
            aria-label={recording ? 'Stop recording' : 'Start recording'}
          >
            <Icon name="mic" size={36} color="#fff" stroke={2} />
          </button>
        </div>
        <div style={{ font: '500 14px var(--font-ui)', color: '#45515e', marginTop: 12 }}>
          {recording ? 'Listening…' : scored ? 'Heard "Kem cho" — great!' : 'Tap to speak'}
        </div>

        {scored && (
          <Card style={{ width: '100%', marginTop: 22, background: '#e8ffea', boxShadow: 'none' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 32, height: 32, borderRadius: 9999, background: '#10b981', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="check" size={18} color="#fff" stroke={2.5} />
              </div>
              <div>
                <div style={{ font: '600 14px var(--font-ui)', color: '#047857' }}>Great job!</div>
                <div style={{ font: '400 12px var(--font-ui)', color: '#047857', opacity: 0.8 }}>Pronunciation: Kem cho</div>
              </div>
            </div>
          </Card>
        )}
      </div>

      <div style={{ padding: '12px 20px 20px', borderTop: '1px solid var(--border-light)' }}>
        <Btn variant={scored ? 'brand' : 'secondary'} block pill onClick={onContinue} disabled={!scored}>
          Continue <Icon name="arrow-right" size={16} color="#fff" stroke={2.25} />
        </Btn>
      </div>
    </div>
  );
};

window.SpeakLesson = SpeakLesson;