/* PersonaRegistry.jsx — single source of truth for the three demo personas,
   the demo-mode persona sheet, and the deep-link screen registry.
   Used by the unified router. Exports window.MunaPersonas. */

const PERSONAS = {
  chioma: { id: 'chioma', tier: 'healthy',  name: 'Chioma Okonkwo', first: 'Chioma', age: 32, city: 'Lagos', initials: 'C', outcome: 'Healthy outcome',   dot: 'var(--sage-500)' },
  bisola: { id: 'bisola', tier: 'moderate', name: 'Bisola Adeyemi', first: 'Bisola', age: 45, city: 'Abuja', initials: 'B', outcome: 'Moderate outcome',  dot: 'var(--amber-500)' },
  fatima: { id: 'fatima', tier: 'high',     name: 'Fatima Ibrahim', first: 'Fatima', age: 52, city: 'Kano',  initials: 'F', outcome: 'High-risk outcome', dot: 'var(--clay-500)' },
};
const TIER_TO_PERSONA = { healthy: 'chioma', moderate: 'bisola', high: 'fatima' };
const PERSONA_ORDER = ['chioma', 'bisola', 'fatima'];
const personaByTier = (tier) => PERSONAS[TIER_TO_PERSONA[tier]] || null;
const randomPersona = () => PERSONAS[PERSONA_ORDER[Math.floor(Math.random() * 3)]];

// ── Persona-driven questionnaire pre-fill (Phase-1 stated answers) ──────
//   The full name (1.1) is always seeded; the rest give a realistic Phase-1
//   pre-fill matching each persona's documented history (used when the user
//   runs the questionnaire normally after selecting a persona).
const PERSONA_ANSWERS = {
  chioma: { '1.1': 'Chioma Okonkwo', '1.3': '32', '1.4': 'Female' },
  bisola: { '1.1': 'Bisola Adeyemi', '1.3': '45', '1.4': 'Female' },
  fatima: { '1.1': 'Fatima Ibrahim', '1.3': '52', '1.4': 'Female' },
};

// ── Demo-mode persona sheet (bottom sheet) ──────────────────────────────
//   onQuestionnaire (optional): when provided, shows a "Back to the
//   questionnaire" action — used by the inner-page demo jump button so you can
//   hop between flows or return to the screening from any dashboard.
function PersonaSheet({ open, onPick, onRandom, onClose, onQuestionnaire }) {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 60, pointerEvents: open ? 'auto' : 'none' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'var(--bg-overlay)', opacity: open ? 1 : 0, transition: 'opacity var(--dur-slow) var(--ease-out)' }}/>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, background: '#fff',
        borderRadius: 'var(--radius-l) var(--radius-l) 0 0', padding: '10px 20px 34px',
        boxShadow: 'var(--shadow-l)', transform: open ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform var(--dur-slow) var(--ease-out)',
      }}>
        <div style={{ width: 38, height: 4, borderRadius: 2, background: 'var(--stone-300)', margin: '0 auto 18px' }}/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
          <div style={{ font: 'var(--type-overline)', letterSpacing: 'var(--tracking-loose)', textTransform: 'uppercase', color: 'var(--stone-400)', border: '1px dashed var(--stone-400)', borderRadius: 'var(--radius-pill)', padding: '2px 8px' }}>Demo</div>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Demo mode</div>
        </div>
        <p style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginBottom: 16 }}>Pick a persona to walk the full flow to their outcome.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {PERSONA_ORDER.map(id => {
            const p = PERSONAS[id];
            return (
              <button key={id} onClick={() => onPick(id)} style={{
                display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left', cursor: 'pointer',
                background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-m)', padding: '12px 14px',
              }}>
                <div style={{ width: 42, height: 42, borderRadius: '50%', background: p.dot, color: '#fff', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 17px/1 var(--font-sans)' }}>{p.initials}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{p.name}</div>
                  <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>{p.age} · {p.city} — {p.outcome}</div>
                </div>
                <Icon name="chevron-right" size={18} color="var(--fg-4)"/>
              </button>
            );
          })}
        </div>
        <button onClick={onRandom} style={{
          width: '100%', marginTop: 10, padding: '12px', borderRadius: 'var(--radius-m)', cursor: 'pointer',
          background: 'var(--stone-100)', border: '0', color: 'var(--fg-2)', font: 'var(--type-button)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <Icon name="shuffle" size={16}/> Random
        </button>
        {onQuestionnaire && (
          <button onClick={onQuestionnaire} style={{
            width: '100%', marginTop: 8, padding: '10px', borderRadius: 'var(--radius-m)', cursor: 'pointer',
            background: 'none', border: '0', color: 'var(--fg-3)', font: 'var(--type-button)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            <Icon name="chevron-left" size={16}/> Back to the questionnaire
          </button>
        )}
      </div>
    </div>
  );
}

window.MunaPersonas = { PERSONAS, TIER_TO_PERSONA, PERSONA_ORDER, PERSONA_ANSWERS, personaByTier, randomPersona, PersonaSheet };