// Iconen inline als SVG (niet via lucide's data-lucide): de modal re-rendert
// tijdens de enter-transitie, wat racet met lucide.createIcons() en soms lege
// iconen gaf. Inline SVG rendert altijd meteen mee met React.
const GC_ICON_PATHS = {
  x: <React.Fragment><path d="M18 6 6 18" /><path d="m6 6 12 12" /></React.Fragment>,
  briefcase: <React.Fragment><rect width="20" height="14" x="2" y="7" rx="2" ry="2" /><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /></React.Fragment>,
  camera: <React.Fragment><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></React.Fragment>,
  'arrow-right': <React.Fragment><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></React.Fragment>,
};
function GcIcon({ name, size }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ display: 'block' }}>
      {GC_ICON_PATHS[name]}
    </svg>
  );
}

// GetContent — gedeelde keuze-modal voor aanmelden. Eén component voor álle
// aanmeld-CTA's (login-pagina + header): de gebruiker kiest eerst rol
// (opdrachtgever/creator) en gaat daarna naar de bestaande signup-flow.
// Gestuurd door App-state (open/onClose), zodat er geen dubbele implementatie is.
function RoleChoiceModal({ open, onClose, onNav }) {
  const cardRef = React.useRef(null);
  // mounted = staat in de DOM (ook tijdens de uitfade); visible = drijft de
  // enter/exit-transitie (blur + overlay + kaart) via de .is-open class.
  const [mounted, setMounted] = React.useState(open);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      setMounted(true);
      // volgende frame → is-open (enter-transitie). setTimeout als fallback voor
      // wanneer requestAnimationFrame gepauzeerd is (verborgen tab).
      const raf = requestAnimationFrame(() => setVisible(true));
      const tf = setTimeout(() => setVisible(true), 60);
      return () => { cancelAnimationFrame(raf); clearTimeout(tf); };
    }
    setVisible(false);
    const t = setTimeout(() => setMounted(false), 320); // moet ≥ CSS-transitie zijn
    return () => clearTimeout(t);
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    // focus naar de eerste keuze zodat toetsenbordbediening meteen werkt
    const t = setTimeout(() => {
      const btn = cardRef.current && cardRef.current.querySelector('button[data-role]');
      if (btn) btn.focus();
    }, 0);
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
      clearTimeout(t);
    };
  }, [open, onClose]);

  if (!mounted) return null;

  const choose = (view) => { onClose(); onNav(view); };

  const options = [
    { role: 'opdrachtgever', view: 'signup-business', icon: 'briefcase', title: 'Ik ben opdrachtgever', desc: 'Plaats opdrachten en vind creators.' },
    { role: 'creator', view: 'signup', icon: 'camera', title: 'Ik ben creator', desc: 'Reageer op opdrachten en maak content.' },
  ];

  return (
    <div
      className={'gc-modal-overlay' + (visible ? ' is-open' : '')}
      onMouseDown={onClose}
      role="presentation"
      style={{ position: 'fixed', inset: 0, zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'clamp(1rem, 5vw, 2.5rem)' }}
    >
      <div
        ref={cardRef}
        className="gc-modal-card"
        role="dialog"
        aria-modal="true"
        aria-labelledby="gc-rolemodal-title"
        onMouseDown={(e) => e.stopPropagation()}
        style={{ position: 'relative', width: '100%', maxWidth: 660, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', padding: 'clamp(2rem, 4.5vw, 3.25rem)' }}
      >
        <button
          type="button"
          aria-label="Sluiten"
          onClick={onClose}
          style={{ position: 'absolute', top: 18, right: 18, width: 40, height: 40, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: 'none', borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-muted)', cursor: 'pointer', transition: 'background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)' }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--surface-sunken)'; e.currentTarget.style.color = 'var(--text-strong)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-muted)'; }}
        >
          <GcIcon name="x" size={22} />
        </button>

        <h2 id="gc-rolemodal-title" style={{ fontSize: 'clamp(1.4rem, 3vw, 1.85rem)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.015em', lineHeight: 1.22, color: 'var(--text-strong)', textAlign: 'center', margin: '4px 28px 0' }}>
          Hoe wil je GetContent gebruiken?
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 'clamp(2rem, 4vw, 2.75rem)' }}>
          {options.map((o) => (
            <button
              key={o.role}
              type="button"
              data-role={o.role}
              onClick={() => choose(o.view)}
              className="gc-role-option"
              style={{ display: 'flex', alignItems: 'center', gap: 18, width: '100%', textAlign: 'left', padding: '20px 24px', background: 'var(--surface-inset)', border: '1.5px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', cursor: 'pointer', transition: 'border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)' }}
            >
              <span style={{ flex: 'none', width: 52, height: 52, borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--accent-tint)', color: 'var(--accent-press)' }}>
                <GcIcon name={o.icon} size={23} />
              </span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 17, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{o.title}</span>
                <span style={{ display: 'block', fontSize: 14, color: 'var(--text-muted)', marginTop: 3 }}>{o.desc}</span>
              </span>
              <span style={{ flex: 'none', display: 'inline-flex', color: 'var(--text-faint)' }}><GcIcon name="arrow-right" size={20} /></span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
window.RoleChoiceModal = RoleChoiceModal;