/* ───────────────────────────────────────────────────────────
   data.jsx — profils client, claims PID demandés, primitives
   Exporté sur window pour partage entre scripts Babel.
   ─────────────────────────────────────────────────────────── */

// Profils fictifs (jeu de données client — réglable via Tweaks)
const PROFILES = [
  {
    id: 'camille',
    prenom: 'Camille',
    nom: 'Dubois',
    sexe: 'Féminin',
    dateNaissance: '14/03/1990',
    age: 36,
    lieuNaissance: 'Lyon (69)',
    nationalite: 'Française',
    adresse: '12 rue de la République\n69002 Lyon',
    hue: 18,        // teinte du placeholder photo
    docNum: 'IDFRA · D8K2···91',
  },
  {
    id: 'mehdi',
    prenom: 'Mehdi',
    nom: 'Brahimi',
    sexe: 'Masculin',
    dateNaissance: '02/11/1985',
    age: 40,
    lieuNaissance: 'Marseille (13)',
    nationalite: 'Française',
    adresse: '8 boulevard Longchamp\n13001 Marseille',
    hue: 205,
    docNum: 'IDFRA · M4P7···33',
  },
  {
    id: 'sophie',
    prenom: 'Sophie',
    nom: 'Laurent',
    sexe: 'Féminin',
    dateNaissance: '27/07/1978',
    age: 47,
    lieuNaissance: 'Nantes (44)',
    nationalite: 'Française',
    adresse: '24 quai de la Fosse\n44000 Nantes',
    hue: 150,
    docNum: 'IDFRA · L1Q9···07',
  },
];

// Claims demandés par la banque (correspond aux champs PID eIDAS2)
// key = champ du profil ; certains "optionnels" sont désélectionnables.
const REQUESTED_CLAIMS = [
  { key: 'photo',         label: "Photo d'identité",     required: true,  isPhoto: true },
  { key: 'prenom',        label: 'Prénom(s)',            required: true  },
  { key: 'nom',           label: 'Nom de famille',       required: true  },
  { key: 'dateNaissance', label: 'Date de naissance',    required: true  },
  { key: 'lieuNaissance', label: 'Lieu de naissance',    required: true  },
  { key: 'nationalite',   label: 'Nationalité',          required: true  },
  { key: 'adresse',       label: 'Adresse de résidence', required: false },
];

// ── Icônes (inline SVG, traits simples) ─────────────────────
const Ic = {
  shield: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} fill="none"
      stroke={p.c || 'currentColor'} strokeWidth={p.w || 1.7} strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z" />
      <path d="M9 12l2 2 4-4" />
    </svg>
  ),
  phone: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} fill="none"
      stroke={p.c || 'currentColor'} strokeWidth={p.w || 1.7} strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="2.5" width="12" height="19" rx="2.5" />
      <path d="M10.5 18.5h3" />
    </svg>
  ),
  key: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} fill="none"
      stroke={p.c || 'currentColor'} strokeWidth={p.w || 1.7} strokeLinecap="round" strokeLinejoin="round">
      <circle cx="8" cy="8" r="4.5" /><path d="M11 11l8 8m-3 0l3-3m-6-2l2 2" />
    </svg>
  ),
  check: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} fill="none"
      stroke={p.c || 'currentColor'} strokeWidth={p.w || 2.2} strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12.5l4.5 4.5L19 7" />
    </svg>
  ),
  bank: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} fill="none"
      stroke={p.c || 'currentColor'} strokeWidth={p.w || 1.7} strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 9l9-5 9 5" /><path d="M5 9v9m4-9v9m6-9v9m4-9v9M3 19h18" />
    </svg>
  ),
  arrow: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} fill="none"
      stroke={p.c || 'currentColor'} strokeWidth={p.w || 2} strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14m-6-6l6 6-6 6" />
    </svg>
  ),
  refresh: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.s || 18} height={p.s || 18} fill="none"
      stroke={p.c || 'currentColor'} strokeWidth={p.w || 1.8} strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 9a8 8 0 0114-3l2 2M20 15a8 8 0 01-14 3l-2-2" /><path d="M20 4v4h-4M4 20v-4h4" />
    </svg>
  ),
  scan: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.s || 22} height={p.s || 22} fill="none"
      stroke={p.c || 'currentColor'} strokeWidth={p.w || 1.8} strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 8V6a2 2 0 012-2h2M16 4h2a2 2 0 012 2v2M20 16v2a2 2 0 01-2 2h-2M8 20H6a2 2 0 01-2-2v-2" />
      <path d="M4 12h16" />
    </svg>
  ),
  lock: (p = {}) => (
    <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} fill="none"
      stroke={p.c || 'currentColor'} strokeWidth={p.w || 1.7} strokeLinecap="round" strokeLinejoin="round">
      <rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 018 0v3" />
    </svg>
  ),
};

// ── Lockup neutre « ID Wallet » (marque générique, sans identité d'État) ──
function RFLockup({ scale = 1 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9 * scale }}>
      {/* marque : tuile graphite + glyphe carte (géométrie simple) */}
      <div style={{ width: 31 * scale, height: 31 * scale, borderRadius: 8 * scale, flexShrink: 0,
        background: 'var(--rf-blue)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 2px 6px -2px rgba(0,0,0,.4)' }}>
        <svg viewBox="0 0 24 24" width={18 * scale} height={18 * scale} fill="none"
          stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="6" width="18" height="13" rx="2.6" />
          <path d="M3 10.5h18" />
          <rect x="6.4" y="13.4" width="5.2" height="2.8" rx="1" fill="#fff" stroke="none" />
        </svg>
      </div>
      <div style={{ lineHeight: 1.05 }}>
        <div style={{ fontWeight: 800, letterSpacing: '-.01em', fontSize: 16 * scale, color: 'var(--rf-ink)' }}>
          ID&nbsp;Wallet
        </div>
        <div style={{ fontWeight: 700, letterSpacing: '.09em', textTransform: 'uppercase',
          fontSize: 7.6 * scale, color: 'var(--rf-grey)', marginTop: 1 * scale }}>
          Portefeuille eIDAS
        </div>
      </div>
    </div>
  );
}

// ── Micro-mention « émetteur » : drapeau FR discret + libellé (carte PID uniquement) ──
function IssuerFR({ scale = 1 }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 * scale }}>
      <span style={{ display: 'flex', height: 9 * scale, width: 13 * scale, borderRadius: 1.5,
        overflow: 'hidden', boxShadow: '0 0 0 .5px rgba(0,0,0,.12)' }}>
        <span style={{ flex: 1, background: '#000091' }} />
        <span style={{ flex: 1, background: '#fff' }} />
        <span style={{ flex: 1, background: 'var(--rf-red)' }} />
      </span>
      <span style={{ fontSize: 10.5 * scale, color: 'var(--rf-grey)' }}>
        Émis par la <strong style={{ color: 'var(--rf-ink)', fontWeight: 700 }}>République française</strong>
      </span>
    </div>
  );
}

// ── Bandeau de certification du PID : eIDAS 2.0 + Validé par l'ANSSI ──
function PidCertBand({ Ic: IcSet = Ic }) {
  return (
    <div style={{ borderTop: '1px solid var(--rf-line)', background: 'var(--rf-green-soft)',
      padding: '10px 14px 11px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 9px',
          borderRadius: 999, background: '#fff', border: '1px solid var(--rf-line)',
          fontSize: 10.5, fontWeight: 800, letterSpacing: '.02em', color: 'var(--rf-ink)' }}>
          <IcSet.shield s={12} c="var(--rf-blue)" /> eIDAS&nbsp;2.0
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 9px',
          borderRadius: 999, background: '#fff', border: '1px solid rgba(15,138,82,.32)',
          fontSize: 10.5, fontWeight: 800, letterSpacing: '.02em', color: 'var(--rf-green-ink)' }}>
          <IcSet.check s={13} c="var(--rf-ok)" /> Validé par l'ANSSI
        </span>
      </div>
      <div style={{ marginTop: 8 }}>
        <IssuerFR />
      </div>
    </div>
  );
}

// ── Placeholder "photo d'identité" : silhouette neutre ──────
function IDPhoto({ hue = 210, size = 64, radius = 10 }) {
  return (
    <div style={{
      width: size, height: size * 1.28, borderRadius: radius, overflow: 'hidden',
      position: 'relative', flexShrink: 0,
      background: `linear-gradient(160deg, hsl(${hue} 32% 88%), hsl(${hue} 26% 78%))`,
      boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.06)',
    }}>
      {/* silhouette tête + épaules */}
      <div style={{ position: 'absolute', left: '50%', top: '24%', transform: 'translateX(-50%)',
        width: size * 0.42, height: size * 0.42, borderRadius: '50%',
        background: `hsl(${hue} 22% 56%)` }} />
      <div style={{ position: 'absolute', left: '50%', bottom: -size * 0.18, transform: 'translateX(-50%)',
        width: size * 0.86, height: size * 0.7, borderRadius: '50% 50% 0 0',
        background: `hsl(${hue} 22% 56%)` }} />
    </div>
  );
}

// ── QR code stylisé (déterministe, lisible comme un QR) ─────
function QRCode({ size = 184, fg = '#0c1a30', bg = '#ffffff', logo = null }) {
  const n = 25, q = 2, total = n + q * 2;
  const cell = size / total;
  // PRNG déterministe
  let seed = 1337;
  const rnd = () => { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; };
  const isFinder = (r, c) => {
    const inBox = (br, bc) => r >= br && r < br + 7 && c >= bc && c < bc + 7;
    return inBox(0, 0) || inBox(0, n - 7) || inBox(n - 7, 0);
  };
  const finderFill = (r, c) => {
    const box = (br, bc) => {
      const rr = r - br, cc = c - bc;
      const ring = (rr === 0 || rr === 6 || cc === 0 || cc === 6);
      const core = (rr >= 2 && rr <= 4 && cc >= 2 && cc <= 4);
      return ring || core;
    };
    if (r < 7 && c < 7) return box(0, 0);
    if (r < 7 && c >= n - 7) return box(0, n - 7);
    if (r >= n - 7 && c < 7) return box(n - 7, 0);
    return false;
  };
  const rects = [];
  for (let r = 0; r < n; r++) {
    for (let c = 0; c < n; c++) {
      let on;
      if (isFinder(r, c)) on = finderFill(r, c);
      else on = rnd() > 0.52;
      if (on) rects.push(
        <rect key={r + '-' + c} x={(c + q) * cell + cell * 0.06} y={(r + q) * cell + cell * 0.06}
          width={cell * 0.88} height={cell * 0.88} rx={cell * 0.18} fill={fg} />
      );
    }
  }
  return (
    <div style={{ position: 'relative', width: size, height: size, background: bg, borderRadius: 14, padding: 0 }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>{rects}</svg>
      {logo && (
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ background: bg, padding: 6, borderRadius: 9, lineHeight: 0,
            boxShadow: '0 0 0 4px ' + bg }}>{logo}</div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PROFILES, REQUESTED_CLAIMS, Ic, RFLockup, IssuerFR, PidCertBand, IDPhoto, QRCode });