/* ResearchConsent.jsx — optional de-identified data / research consent.
   Shown once after the tier result + recommended-next-step, immediately before
   the user enters their dashboard (all three tiers reuse this single screen).

   This is SEPARATE from the initial data-privacy consent (ScreeningIntro →
   ConsentScreen). That one is a hard gate; this one is a light, optional ask:
   the toggle defaults OFF and Continue is always enabled. The chosen value is
   handed up via onContinue(agreed) so the app can reference it later.

   Reads the global UI kit (Icon, Button) from MunaComponents.
   Exports window.MunaResearchConsent = { ResearchConsent }. */

// ─── Switch — small pill toggle (kit has no switch) ─────────────────────
function ResearchSwitch({ on }) {
  return (
    <span aria-hidden="true" style={{
      flexShrink: 0, width: 46, height: 28, borderRadius: 14, position: 'relative',
      background: on ? 'var(--amber-500)' : 'var(--stone-300)',
      transition: 'background 160ms var(--ease-out)',
    }}>
      <span style={{
        position: 'absolute', top: 3, left: on ? 21 : 3, width: 22, height: 22,
        borderRadius: '50%', background: '#fff', boxShadow: 'var(--shadow-s)',
        transition: 'left 160ms var(--ease-out)',
      }}/>
    </span>
  );
}

function ResearchConsent({ onContinue, onBack }) {
  const [agreed, setAgreed] = React.useState(false); // opt-in, default OFF

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
      {/* slim back chevron (returns to the recommended-next-step screen) */}
      <div style={{ height: 40, flexShrink: 0, display: 'flex', alignItems: 'center', paddingLeft: 8, paddingTop: 52 }}>
        {onBack && (
          <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>

      <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', padding: '4px var(--gutter-screen) 8px' }}>
        {/* warm, helping-others framing — soft heart in a sage circle */}
        <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--sage-50)', color: 'var(--sage-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
          <Icon name="heart" size={30}/>
        </div>

        <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', marginBottom: 12, textWrap: 'pretty' }}>Help us improve healthcare</h1>
        <p style={{ font: 'var(--type-body-l)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 14 }}>
          Your screening data, with all personal identifiers removed, may be used to improve the accuracy of our screening technology, support quality assurance and programme evaluation, and contribute to published research on oral-systemic health.
        </p>
        <p style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', textWrap: 'pretty', marginBottom: 22 }}>
          Your identity is never attached to this data. Participation is optional and does not affect your care.
        </p>

        {/* opt-in toggle — whole row is tappable */}
        <button onClick={() => setAgreed(v => !v)} aria-pressed={agreed} style={{
          width: '100%', textAlign: 'left', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 14, padding: 16,
          background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-m)',
        }}>
          <span style={{ flex: 1, font: 'var(--type-body)', color: 'var(--fg-1)', textWrap: 'pretty' }}>
            I agree to the use of my de-identified data for research and quality improvement
          </span>
          <ResearchSwitch on={agreed}/>
        </button>

        <div style={{ textAlign: 'center', marginTop: 14 }}>
          <a href="#" onClick={e => e.preventDefault()} style={{ color: 'var(--amber-600)', font: 'var(--type-body-s)', textDecoration: 'underline' }}>
            Learn more about how we de-identify data
          </a>
        </div>
      </div>

      {/* Continue is ALWAYS enabled — optional consent, not a gate */}
      <div style={{ flexShrink: 0, padding: '10px var(--gutter-screen) 34px', background: 'linear-gradient(180deg, rgba(250,248,245,0) 0%, var(--bg) 24%)' }}>
        <Button full variant="primary" glow onClick={() => onContinue && onContinue(agreed)}>Continue</Button>
      </div>
    </div>
  );
}

window.MunaResearchConsent = { ResearchConsent };