// consent.jsx — mNID audit log + architecture diagram surface

const { useState: useStateC, useEffect: useEffectC } = React;

// ─── mNID audit log app ────────────────────────────────────
function AuditLogApp({ onClose }) {
  const entries = [
    {
      app: 'Paisa Wallet', purpose: 'Account opening · Tier 1',
      when: 'Just now · 14:32', tier: 1, fresh: true,
      shared: ['Name', 'Photo', 'DOB', 'Address', 'Gender'],
      status: 'active',
    },
    {
      app: 'eSewa', purpose: 'KYC refresh',
      when: 'Yesterday · 09:14', tier: 1,
      shared: ['Name', 'Photo', 'Address'],
      status: 'active',
    },
    {
      app: 'Nabil Bank', purpose: 'Loan application',
      when: '2 May · 11:08', tier: 2,
      shared: ['Name', 'Photo', 'DOB', 'Address', 'Gender', 'Income proof'],
      status: 'active',
    },
    {
      app: 'Daraz Pay', purpose: 'Wallet linking',
      when: '14 Apr · 18:42', tier: 0,
      shared: ['Name', 'DOB'],
      status: 'revoked',
    },
    {
      app: 'NIC Asia', purpose: 'Account opening',
      when: '6 Mar · 10:21', tier: 2,
      shared: ['Name', 'Photo', 'DOB', 'Address', 'Gender'],
      status: 'active',
    },
  ];

  return (
    <div style={{
      height: '100%', background: '#f4f4f7',
      display: 'flex', flexDirection: 'column',
      color: C.ink, fontFamily: 'Inter, system-ui',
    }}>
      <div style={{
        padding: '70px 22px 16px',
        background: '#fff',
        borderBottom: `1px solid #e8e8ec`,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <NIDSeal size={32}/>
          <div>
            <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: -0.2 }}>mNID</div>
            <div style={{ fontSize: 11, color: C.ink3, fontFamily: 'JetBrains Mono, monospace',
                          letterSpacing: 0.4 }}>Government of Nepal</div>
          </div>
          <div style={{ flex: 1 }}/>
          <button onClick={onClose} style={{ fontSize: 14, color: C.gov, fontWeight: 600 }}>
            Close
          </button>
        </div>
        <h2 style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.6, margin: '4px 0 4px' }}>
          Authentications
        </h2>
        <p style={{ fontSize: 13, color: C.ink2, margin: 0, lineHeight: 1.45 }}>
          Every time someone authenticated your NID. You're in control.
        </p>
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          {['All', 'Active', 'Revoked'].map((t, i) => (
            <span key={t} style={{
              padding: '5px 12px', borderRadius: 999, fontSize: 12, fontWeight: 600,
              background: i === 0 ? C.ink : '#f4f4f7',
              color: i === 0 ? '#fff' : C.ink2,
            }}>{t}</span>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 18px 24px' }}>
        {entries.map((e, i) => (
          <div key={i} style={{
            background: '#fff', borderRadius: 14, padding: 16,
            marginBottom: 10,
            border: e.fresh ? `1.5px solid ${C.gov}` : `1px solid #e8e8ec`,
            opacity: e.status === 'revoked' ? 0.6 : 1,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: e.fresh ? C.govSoft : '#f4f4f7',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14, fontWeight: 700, color: e.fresh ? C.gov : C.ink2,
              }}>{e.app[0]}</div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 14, fontWeight: 600 }}>{e.app}</span>
                  {e.fresh && <span style={{
                    fontSize: 9, fontWeight: 700, color: C.gov,
                    padding: '2px 6px', borderRadius: 999, background: C.govSoft,
                    letterSpacing: 0.4,
                  }}>NEW</span>}
                </div>
                <div style={{ fontSize: 12, color: C.ink2, marginTop: 2 }}>
                  {e.purpose}
                </div>
              </div>
              <TierBadge tier={e.tier}/>
            </div>

            <div style={{ marginTop: 12, display: 'flex', flexWrap: 'wrap', gap: 5 }}>
              {e.shared.map(f => (
                <span key={f} style={{
                  padding: '3px 8px', borderRadius: 6,
                  background: '#f4f4f7', fontSize: 10.5, color: C.ink2,
                  fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.2,
                }}>{f}</span>
              ))}
            </div>

            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center',
                          justifyContent: 'space-between',
                          paddingTop: 10, borderTop: '1px solid #f0f0f3' }}>
              <span style={{ fontSize: 11, color: C.ink3 }}>{e.when}</span>
              {e.status === 'active' ? (
                <button style={{
                  fontSize: 12, fontWeight: 600, color: C.bad,
                }}>Revoke</button>
              ) : (
                <span style={{ fontSize: 11, color: C.ink3, fontStyle: 'italic' }}>
                  Revoked · data deleted
                </span>
              )}
            </div>
          </div>
        ))}

        <div style={{
          marginTop: 12, padding: 14, borderRadius: 12,
          background: '#fff', border: '1px dashed #d4d4d8',
          fontSize: 12, color: C.ink2, lineHeight: 1.5, textAlign: 'center',
        }}>
          Your authentication history is stored only on this device.<br/>
          The NID Authority sees the same log.
        </div>
      </div>
    </div>
  );
}

// ─── Architecture diagram (system view) ────────────────────
function ArchitectureView() {
  return (
    <div style={{
      width: '100%', maxWidth: 1180, padding: '32px 40px',
      background: C.surface, borderRadius: 24, border: `1px solid ${C.line}`,
      boxShadow: '0 4px 32px rgba(24,21,19,0.04)',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6 }}>
        <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.5, margin: 0 }}>
          How a Tier-1 KYC actually flows
        </h3>
        <span style={{ fontSize: 12, color: C.ink3, fontWeight: 500 }}>
          ~52 seconds, end to end
        </span>
      </div>
      <p style={{ fontSize: 13, color: C.ink2, margin: 0, lineHeight: 1.5, maxWidth: 720 }}>
        The wallet never touches the NID database. It receives a signed bundle and a purpose-bound
        token, then registers the user with the central registry for reuse.
      </p>

      {/* 3 columns */}
      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22, position: 'relative' }}>
        {[
          {
            title: 'Paisa Wallet',
            sub: 'Private fintech',
            icon: <PaisaMark size={22}/>,
            color: C.accentInk,
            bg: C.accentSoft,
            stores: ['Virtual ID (token)', 'Signed eKYC bundle', 'Wallet balance'],
            never: ['Raw NID number', 'Biometric template'],
          },
          {
            title: 'NID Authority',
            sub: 'gov.np',
            icon: <NIDSeal size={26}/>,
            color: C.gov,
            bg: C.govSoft,
            stores: ['Citizen records', 'Biometric DB', 'Authentication log'],
            never: ['Wallet transactions', 'Wallet balance'],
          },
          {
            title: 'CKYCR',
            sub: 'Central KYC Registry',
            icon: (
              <svg width="24" height="24" viewBox="0 0 24 24">
                <rect x="3" y="6" width="18" height="14" rx="2" fill="none"
                      stroke={C.ink} strokeWidth="1.6"/>
                <path d="M3 10h18M8 6V4h8v2M7 14h4M7 17h6" stroke={C.ink} strokeWidth="1.6"
                      strokeLinecap="round"/>
              </svg>
            ),
            color: C.ink,
            bg: C.line2,
            stores: ['CKYC IDs', 'Bundle hashes', 'Reuse log'],
            never: ['Plain user data', 'Wallet metadata'],
          },
        ].map((node, i) => (
          <div key={i} style={{
            padding: 18, borderRadius: 16,
            background: node.bg, border: `1px solid ${C.line}`,
            position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {node.icon}
              <div>
                <div style={{ fontSize: 15, fontWeight: 700, color: node.color }}>{node.title}</div>
                <div style={{ fontSize: 11, color: C.ink3, fontFamily: 'JetBrains Mono, monospace',
                              letterSpacing: 0.3 }}>{node.sub}</div>
              </div>
            </div>
            <div style={{ marginTop: 14, fontSize: 10, color: C.ink2, fontWeight: 700,
                          textTransform: 'uppercase', letterSpacing: 0.6 }}>Stores</div>
            <ul style={{ margin: '6px 0 12px', padding: 0, listStyle: 'none' }}>
              {node.stores.map(s => (
                <li key={s} style={{ fontSize: 12, color: C.ink, padding: '3px 0',
                                     borderBottom: `1px dashed ${C.line}` }}>
                  ✓ {s}
                </li>
              ))}
            </ul>
            <div style={{ fontSize: 10, color: C.bad, fontWeight: 700,
                          textTransform: 'uppercase', letterSpacing: 0.6 }}>Never sees</div>
            <ul style={{ margin: '6px 0 0', padding: 0, listStyle: 'none' }}>
              {node.never.map(s => (
                <li key={s} style={{ fontSize: 12, color: C.ink2, padding: '3px 0' }}>
                  × {s}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Flow steps */}
      <div style={{ marginTop: 24, padding: 18, borderRadius: 14,
                    background: C.bg, border: `1px solid ${C.line}` }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: C.ink2,
                      textTransform: 'uppercase', letterSpacing: 0.8 }}>
          Sequence
        </div>
        <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            ['Paisa', 'NID Authority', 'POST /authenticate { vid, dob }'],
            ['NID Authority', 'User mobile', 'OTP / biometric challenge'],
            ['NID Authority', 'Paisa', '{ ok: true, bundle, signature, ckyc_hint }'],
            ['Paisa', 'CKYCR', 'POST /onboard { ckyc_id, bundle_hash }'],
            ['Paisa', 'User', 'Wallet activated · 52s total'],
          ].map((step, i) => (
            <div key={i} style={{ display: 'grid',
              gridTemplateColumns: '24px 110px 12px 110px 1fr',
              gap: 10, alignItems: 'center', fontSize: 12,
            }}>
              <span className="mono" style={{ color: C.ink3, letterSpacing: 0.4 }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <span style={{ fontWeight: 600 }}>{step[0]}</span>
              <span style={{ color: C.ink3 }}>→</span>
              <span style={{ fontWeight: 600 }}>{step[1]}</span>
              <span className="mono" style={{ color: C.ink2, fontSize: 11.5, letterSpacing: 0.2 }}>
                {step[2]}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AuditLogApp, ArchitectureView });