// GetContent — gedeelde bouwstenen voor de ingelogde omgeving.
// Eén pagina-shell, statusbadges en empty states zodat elke ingelogde pagina
// dezelfde look & spacing deelt.

// Pagina-shell met kop + optionele actie rechts (bijv. een CTA-knop)
function AppPage({ eyebrow, title, subtitle, action, children, maxWidth, back, onNav }) {
  return (
    <main style={{ background: 'var(--surface-page)', minHeight: '100vh' }}>
      <div style={{ maxWidth: maxWidth || 'var(--container-max)', margin: '0 auto', padding: 'clamp(6rem, 10vw, 8rem) var(--gutter) clamp(4rem, 8vw, 6rem)' }}>
        {back && (
          <a onClick={() => onNav && onNav(back.to)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 14, fontWeight: 'var(--fw-medium)', color: 'var(--text-muted)', marginBottom: 20 }}>
            <i data-lucide="arrow-left" style={{ width: 16, height: 16 }}></i>{back.label}
          </a>
        )}
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', marginBottom: 'clamp(1.75rem, 4vw, 2.5rem)' }}>
          <div>
            {eyebrow && <span className="gc-eyebrow" style={{ marginBottom: 12 }}>{eyebrow}</span>}
            <h1 style={{ fontSize: 'clamp(1.9rem, 4vw, 2.6rem)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>{title}</h1>
            {subtitle && <p style={{ marginTop: 10, fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: '60ch' }}>{subtitle}</p>}
          </div>
          {action}
        </div>
        {children}
      </div>
    </main>
  );
}

// Statusbadge voor opdracht- of reactie-statussen (uit window.GC_STATUS)
function StatusBadge({ kind, status }) {
  const map = (window.GC_STATUS && window.GC_STATUS[kind]) || {};
  const s = map[status] || { label: status, tone: 'neutral' };
  const tones = {
    neutral: { bg: 'var(--surface-sunken)', color: 'var(--text-muted)' },
    accent: { bg: 'var(--accent-tint)', color: 'var(--accent-press)' },
    success: { bg: 'rgba(63,165,121,0.15)', color: '#2f7f5b' },
    muted: { bg: 'var(--surface-sunken)', color: 'var(--text-faint)' },
  };
  const t = tones[s.tone] || tones.neutral;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', height: 24, padding: '0 11px', borderRadius: 'var(--radius-pill)', background: t.bg, color: t.color, fontSize: 11, fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{s.label}</span>
  );
}

// Empty state met icoon, tekst en optionele CTA
function EmptyState({ icon, title, text, cta, onCta }) {
  const { Button } = window.GetContentDesignSystem_aa0f52;
  return (
    <div style={{ textAlign: 'center', padding: 'clamp(2.5rem, 6vw, 4.5rem) var(--gutter)', border: '1px dashed var(--border-strong)', borderRadius: 'var(--radius-lg)', background: 'var(--surface-card)' }}>
      <span style={{ display: 'inline-flex', width: 56, height: 56, borderRadius: '50%', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-sunken)', color: 'var(--text-muted)', marginBottom: 18 }}>
        <i data-lucide={icon || 'inbox'} style={{ width: 26, height: 26 }}></i>
      </span>
      <h3 style={{ fontSize: 19, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 8 }}>{title}</h3>
      <p style={{ fontSize: 15, color: 'var(--text-muted)', maxWidth: 420, margin: '0 auto 22px', lineHeight: 1.6 }}>{text}</p>
      {cta && <Button variant="primary" onClick={onCta} iconRight={<i data-lucide="arrow-right"></i>}>{cta}</Button>}
    </div>
  );
}

// Herbruikbare "Doorgaan met Google"-knop (login + aanmelden). Roept de
// Supabase OAuth-flow aan; `role` wordt onthouden voor nieuwe aanmeldingen.
function GoogleButton({ label, role }) {
  const onClick = () => { if (window.GC_STORE) window.GC_STORE.signInWithGoogle(role); };
  return (
    <button type="button" onClick={onClick} className="gc-google-btn" style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, width: '100%', height: 52,
      borderRadius: 12, border: '1.5px solid var(--border-strong)', background: 'var(--surface-inset)',
      color: 'var(--text-strong)', fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 'var(--fw-semibold)', cursor: 'pointer',
    }}>
      <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true" style={{ display: 'block', flex: 'none' }}>
        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
        <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
      </svg>
      {label || 'Doorgaan met Google'}
    </button>
  );
}

// Wachtwoordveld met oog-icoon (tonen/verbergen). Spiegelt exact de styling van
// de design-system Input (warm-white, radius-sm, border-strong, coral focus-glow),
// met rechts een schakelknop. Inline SVG's (geen lucide) zodat de iconen altijd
// mee-renderen bij het wisselen.
function PasswordInput({ label, value, onChange, placeholder, hint, required, size, error }) {
  const [show, setShow] = React.useState(false);
  const [focus, setFocus] = React.useState(false);
  const h = size === 'lg' ? 56 : 48;
  const fs = size === 'lg' ? 16 : 15;
  const svg = (children) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ display: 'block' }}>{children}</svg>
  );
  const lock = svg(<React.Fragment><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></React.Fragment>);
  const eye = svg(<React.Fragment><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></React.Fragment>);
  const eyeOff = svg(<React.Fragment><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" /><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" /><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" /><line x1="2" x2="22" y1="2" y2="22" /></React.Fragment>);
  return (
    <label style={{ display: 'block' }}>
      {label && <span style={{ display: 'block', fontSize: 13, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 8 }}>{label}</span>}
      <span style={{ display: 'flex', alignItems: 'center', gap: 10, height: h, padding: '0 16px', background: 'var(--surface-inset)', border: '1.5px solid ' + (error ? 'var(--gc-danger)' : (focus ? 'var(--accent)' : 'var(--border-strong)')), borderRadius: 'var(--radius-sm)', boxShadow: focus && !error ? '0 0 0 4px var(--gc-coral-100)' : 'none', transition: 'border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)' }}>
        <span style={{ display: 'inline-flex', color: 'var(--text-faint)', flex: 'none' }}>{lock}</span>
        <input type={show ? 'text' : 'password'} value={value} onChange={onChange} placeholder={placeholder} required={required}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-sans)', fontSize: fs, fontWeight: 'var(--fw-medium)', color: 'var(--text-strong)' }} />
        <button type="button" className="gc-pass-eye" onClick={() => setShow(function (s) { return !s; })} aria-label={show ? 'Wachtwoord verbergen' : 'Wachtwoord tonen'} title={show ? 'Verbergen' : 'Tonen'}
          style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none', border: 'none', background: 'transparent', padding: 4, margin: '0 -6px 0 0', color: 'var(--text-faint)', cursor: 'pointer' }}>
          {show ? eyeOff : eye}
        </button>
      </span>
      {hint && <span style={{ display: 'block', fontSize: 12, color: error ? 'var(--gc-danger)' : 'var(--text-muted)', marginTop: 6 }}>{hint}</span>}
    </label>
  );
}

Object.assign(window, { AppPage, StatusBadge, EmptyState, GoogleButton, PasswordInput });