/* ScreeningIntro.jsx — the two screens shown between onboarding and the
   questionnaire:
     1. ConsentScreen — explicit data-privacy consent (gated Continue).
     2. HonestyIntro  — warm "let's begin" encouragement before question 1.
   Depends on the global UI kit (Icon, Button, CheckOption) from MunaComponents.
   Exports window.MunaScreeningIntro = { ConsentScreen, HonestyIntro }. */

// Shared slim top bar with a back chevron.
function IntroTopBack({ onBack }) {
  return (
    <div style={{ height: 40, flexShrink: 0, display: 'flex', alignItems: 'center', paddingLeft: 8, paddingTop: 52 }}>
      <button onClick={onBack} aria-label="Back" style={{
        background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--fg-1)',
        width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name="chevron-left" size={26}/>
      </button>
    </div>
  );
}

// ─── 1. Consent ─────────────────────────────────────────────────────────
const CONSENT_POINTS = [
  { icon: 'file-text', title: 'What we collect',
    body: 'Health questionnaire responses and oral photographs to generate your personalised health assessment.' },
  { icon: 'lock', title: 'How we protect it',
    body: 'All data is encrypted in transit and at rest. Your information is stored securely on HIPAA-aligned cloud infrastructure.' },
  { icon: 'eye', title: 'Who can see it',
    body: 'Only you and your assigned healthcare providers. We never sell your data to third parties.' },
  { icon: 'settings', title: 'Your control',
    body: 'You can request deletion of your data at any time through your profile settings.' },
];

function ConsentScreen({ onAgree, onBack }) {
  const [checked, setChecked] = React.useState(false);
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
      <IntroTopBack onBack={onBack}/>

      <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', padding: '4px var(--gutter-screen) 8px' }}>
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
          <Icon name="shield" size={28}/>
        </div>
        <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', marginBottom: 8, textWrap: 'pretty' }}>Your privacy matters</h1>
        <p style={{ font: 'var(--type-body-l)', color: 'var(--fg-2)', marginBottom: 22, textWrap: 'pretty' }}>Before we begin, here’s how we handle your data.</p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {CONSENT_POINTS.map(p => (
            <div key={p.title} style={{ display: 'flex', gap: 12, padding: 14, background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-m)' }}>
              <div style={{ flexShrink: 0, width: 36, height: 36, borderRadius: '50%', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={p.icon} size={18}/>
              </div>
              <div>
                <div style={{ font: 'var(--type-label)', color: 'var(--fg-1)', marginBottom: 3 }}>{p.title}</div>
                <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', lineHeight: 1.5 }}>{p.body}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 16 }}>
          <button onClick={e => e.preventDefault()} style={{ background: 'none', border: 0, color: 'var(--amber-600)', font: 'var(--type-body-s)', textDecoration: 'underline', cursor: 'pointer', padding: 8 }}>Read our full Privacy Policy</button>
        </div>
      </div>

      <div style={{ flexShrink: 0, padding: '10px var(--gutter-screen) 34px', display: 'flex', flexDirection: 'column', gap: 12, background: 'linear-gradient(180deg, rgba(250,248,245,0) 0%, var(--bg) 24%)' }}>
        <CheckOption
          label="I consent to Muna Health collecting and processing my health data as described above."
          selected={checked}
          onClick={() => setChecked(v => !v)}/>
        <Button full variant="primary" disabled={!checked} onClick={onAgree}>Continue</Button>
      </div>
    </div>
  );
}

// ─── 2. Honesty encouragement ───────────────────────────────────────────
function HonestyIntro({ onBegin, onBack }) {
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
      <IntroTopBack onBack={onBack}/>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 var(--gutter-screen)' }}>
        <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--sage-50)', color: 'var(--sage-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
          <Icon name="heart" size={30}/>
        </div>
        <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', marginBottom: 14, textWrap: 'pretty' }}>Let’s get to know your health</h1>
        <p style={{ font: 'var(--type-body-l)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 22 }}>
          Your answers are completely confidential and are only used to give you the most accurate health assessment possible. The more honest and detailed your responses, the better we can help. There are no right or wrong answers.
        </p>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, color: 'var(--fg-3)' }}>
          <Icon name="clock" size={15}/>
          <span style={{ font: 'var(--type-body-s)' }}>Takes about 8–10 minutes</span>
        </div>
      </div>

      <div style={{ flexShrink: 0, padding: '12px var(--gutter-screen) 38px' }}>
        <Button full variant="primary" glow onClick={onBegin}>Begin screening</Button>
      </div>
    </div>
  );
}

window.MunaScreeningIntro = { ConsentScreen, HonestyIntro };