// ===== DATA PRIVACY CONSENT GATE (RA 10173) =====
// Shown once before sign-in. Records informed, explicit consent before any
// personal data is collected, per the PH Data Privacy Act of 2012.

const CONSENT_KEY = 'nrsa_consent';
const CONSENT_VERSION = '1.0'; // bump to re-prompt all users when the notice changes

function getConsent() {
  try { return JSON.parse(localStorage.getItem(CONSENT_KEY)) || null; } catch (e) { return null; }
}

function ConsentScreen({ t, dark, onAccept }) {
  const [openNotice, setOpenNotice] = useState(false);
  const [agreePrivacy, setAgreePrivacy] = useState(false);
  const [agreeTerms, setAgreeTerms] = useState(false);
  const [marketing, setMarketing] = useState(false);
  const canProceed = agreePrivacy && agreeTerms;

  const collected = [
    { icon: '🪪', label: 'Identity', text: 'Name, age, government ID / driver\u2019s license (for verification)' },
    { icon: '📱', label: 'Contact', text: 'Mobile number, email address, home address' },
    { icon: '🎓', label: 'Background', text: 'Whether you study or work, your school or industry' },
    { icon: '📍', label: 'Location', text: 'GPS location for live traffic, crash reports & SOS' },
    { icon: '🚨', label: 'Incident data', text: 'Crash reports and evidence you choose to submit' },
  ];
  const rights = [
    'Be informed about how your data is processed',
    'Access and obtain a copy of your data',
    'Correct or update inaccurate data',
    'Object to processing or withdraw consent',
    'Have your data erased or blocked (right to erasure)',
    'File a complaint with the National Privacy Commission',
  ];

  const Check = ({ on }) => (
    <span style={{
      width: 24, height: 24, minWidth: 24, borderRadius: 7, marginTop: 1,
      border: `2px solid ${on ? t.success : t.border}`, background: on ? t.success : 'transparent',
      display: 'grid', placeItems: 'center', transition: 'all 0.18s',
    }}>{on && <Icon name="check" size={14} color="#fff" strokeWidth={3} />}</span>
  );

  return (
    <div className="scroll-y no-select" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', background: t.bg, color: t.text }}>
      {/* Hero */}
      <div style={{
        background: `linear-gradient(150deg, ${t.navy} 0%, ${t.mid} 100%)`, color: '#fff',
        padding: `max(34px, calc(env(safe-area-inset-top) + 26px)) 24px 40px`, position: 'relative', overflow: 'hidden', flexShrink: 0,
      }}>
        <div style={{ position: 'absolute', right: -36, top: -36, width: 150, height: 150, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' }} />
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: 20, background: 'rgba(255,255,255,0.14)', display: 'grid', placeItems: 'center', fontSize: 32 }}>🔐</div>
          <div style={{ fontSize: 21, fontWeight: 800, letterSpacing: '0.01em', marginTop: 12 }}>Your Privacy Matters</div>
          <div style={{ fontSize: 12.5, opacity: 0.8, marginTop: 8, lineHeight: 1.45, maxWidth: 300 }}>
            Before you continue, please review how NRSA collects and protects your personal data under the Data Privacy Act of 2012 (RA 10173).
          </div>
        </div>
      </div>

      {/* Body */}
      <div style={{ flex: 1, background: t.bg, borderTopLeftRadius: 28, borderTopRightRadius: 28, marginTop: -22, padding: '22px 20px max(28px, env(safe-area-inset-bottom))' }}>
        {/* What we collect */}
        <div style={{ fontSize: 13, fontWeight: 800, color: t.text, marginBottom: 10, letterSpacing: '0.02em' }}>WHAT WE COLLECT</div>
        <Card t={t} pad={6} style={{ marginBottom: 18 }}>
          {collected.map((c, i) => (
            <div key={c.label} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '11px 10px', borderTop: i > 0 ? `1px solid ${t.border}` : 'none' }}>
              <span style={{ fontSize: 19, width: 24, textAlign: 'center' }}>{c.icon}</span>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: t.text }}>{c.label}</div>
                <div style={{ fontSize: 12, color: t.subtext, marginTop: 1, lineHeight: 1.4 }}>{c.text}</div>
              </div>
            </div>
          ))}
        </Card>

        {/* Why / how protected — quick assurances */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 18 }}>
          {[
            { icon: 'shield', title: 'Why', text: 'To verify users, power road-safety tools & respond to incidents.' },
            { icon: 'check', title: 'How it\u2019s kept safe', text: 'Encrypted, access-controlled, never sold to third parties.' },
          ].map(b => (
            <Card key={b.title} t={t} pad={13}>
              <Icon name={b.icon} size={20} color={t.mid} />
              <div style={{ fontSize: 12.5, fontWeight: 800, color: t.text, marginTop: 7 }}>{b.title}</div>
              <div style={{ fontSize: 11.5, color: t.subtext, marginTop: 3, lineHeight: 1.4 }}>{b.text}</div>
            </Card>
          ))}
        </div>

        {/* Expandable full notice */}
        <Card t={t} pad={0} style={{ marginBottom: 18 }}>
          <button onClick={() => setOpenNotice(o => !o)} className="no-select" style={{ width: '100%', background: 'transparent', border: 'none', padding: 15, display: 'flex', alignItems: 'center', gap: 10, minHeight: 54 }}>
            <Icon name="search" size={18} color={t.mid} />
            <span style={{ flex: 1, textAlign: 'left', fontSize: 13.5, fontWeight: 700, color: t.text }}>Read the full privacy notice</span>
            <span style={{ color: t.subtext, transform: openNotice ? 'rotate(90deg)' : 'none', transition: 'transform 0.25s' }}><Icon name="chevron-right" size={18} /></span>
          </button>
          <div style={{ maxHeight: openNotice ? 640 : 0, overflow: 'hidden', transition: 'max-height 0.35s ease' }}>
            <div style={{ padding: '0 15px 16px' }}>
              <p style={{ margin: '0 0 12px', fontSize: 12.5, color: t.subtext, lineHeight: 1.55 }}>
                The National Road Safety Alliance (\u201cNRSA\u201d) acts as the Personal Information Controller for the data you provide. We process your personal and sensitive personal information only for the purposes described above, on the lawful basis of your consent and our legitimate road-safety mandate.
              </p>
              <div style={{ fontSize: 12.5, fontWeight: 800, color: t.text, margin: '0 0 8px' }}>Your rights as a data subject</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 7, marginBottom: 12 }}>
                {rights.map((r, i) => (
                  <div key={i} style={{ display: 'flex', gap: 9, alignItems: 'flex-start' }}>
                    <span style={{ width: 5, height: 5, borderRadius: 999, background: t.mid, marginTop: 7, flexShrink: 0 }} />
                    <span style={{ fontSize: 12, color: t.text, lineHeight: 1.45, fontWeight: 500 }}>{r}</span>
                  </div>
                ))}
              </div>
              <p style={{ margin: 0, fontSize: 12, color: t.subtext, lineHeight: 1.55 }}>
                Data is retained only as long as necessary for these purposes or as required by law. To exercise your rights or reach our Data Protection Officer, email <b style={{ color: t.text }}>dpo@nrsa.org.ph</b>. You may also lodge a complaint with the National Privacy Commission (privacy.gov.ph).
              </p>
            </div>
          </div>
        </Card>

        {/* Consent checkboxes */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 8 }}>
          <button onClick={() => setAgreePrivacy(v => !v)} className="no-select" style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: 'transparent', border: 'none', padding: '10px 2px', textAlign: 'left' }}>
            <Check on={agreePrivacy} />
            <span style={{ fontSize: 12.5, color: t.text, lineHeight: 1.45, fontWeight: 500 }}>
              I have read and understood the <b style={{ color: t.text }}>Privacy Notice</b>, and I consent to NRSA collecting and processing my personal and sensitive personal information as described. <span style={{ color: t.danger }}>*</span>
            </span>
          </button>
          <button onClick={() => setAgreeTerms(v => !v)} className="no-select" style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: 'transparent', border: 'none', padding: '10px 2px', textAlign: 'left' }}>
            <Check on={agreeTerms} />
            <span style={{ fontSize: 12.5, color: t.text, lineHeight: 1.45, fontWeight: 500 }}>
              I agree to the <b style={{ color: t.text }}>Terms of Service</b>. <span style={{ color: t.danger }}>*</span>
            </span>
          </button>
          <button onClick={() => setMarketing(v => !v)} className="no-select" style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: 'transparent', border: 'none', padding: '10px 2px', textAlign: 'left' }}>
            <Check on={marketing} />
            <span style={{ fontSize: 12.5, color: t.subtext, lineHeight: 1.45, fontWeight: 500 }}>
              <span style={{ color: t.text }}>Optional:</span> Send me road-safety tips, campaign updates and NRSA announcements.
            </span>
          </button>
        </div>

        <Btn t={t} full color={canProceed ? t.success : t.muted} onClick={() => canProceed && onAccept({ privacy: true, terms: true, marketing, version: CONSENT_VERSION, at: new Date().toISOString() })}
          style={{ opacity: canProceed ? 1 : 0.5, minHeight: 54, fontSize: 16, marginTop: 8 }}>
          {canProceed ? 'Agree & Continue' : 'Please accept the required items'}
        </Btn>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 11, color: t.subtext, marginTop: 12, lineHeight: 1.4, textAlign: 'center' }}>
          <Icon name="shield" size={13} color={t.success} /> You can withdraw consent anytime in Profile → Privacy &amp; Safety.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ConsentScreen, getConsent, CONSENT_KEY, CONSENT_VERSION });