// ── Form & list primitives (shared by Post / Profile / Manage) ───
const { Icon } = window;

// Full-screen overlay scaffold with top bar + optional sticky footer
function FormScreen({ title, onBack, action, onAction, footer, children, dark = false, z = 32 }) {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: z, background: 'var(--bg)', display: 'flex',
      flexDirection: 'column', animation: 'slideIn .26s cubic-bezier(.2,.8,.2,1)' }}>
      <div style={{ paddingTop: 54, paddingBottom: 8, display: 'flex', alignItems: 'center', gap: 6,
        padding: '54px 12px 8px', borderBottom: '1px solid var(--line)' }}>
        <button onClick={onBack} style={{ width: 40, height: 40, borderRadius: 999, border: 'none', cursor: 'pointer',
          background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name="chevL" size={24} s="var(--ink)" /></button>
        <div style={{ flex: 1, textAlign: 'center', fontFamily: 'var(--sans)', fontSize: 17, fontWeight: 700,
          letterSpacing: -0.3, color: 'var(--ink)' }}>{title}</div>
        <div style={{ width: 40, display: 'flex', justifyContent: 'flex-end', flexShrink: 0 }}>
          {action && <button onClick={onAction} style={{ border: 'none', background: 'none', cursor: 'pointer',
            fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 600, color: 'var(--accent)',
            whiteSpace: 'nowrap', paddingRight: 8 }}>{action}</button>}
        </div>
      </div>
      <div className="no-scrollbar" style={{ flex: 1, overflowY: 'auto', padding: '4px 18px 24px' }}>{children}</div>
      {footer && (
        <div style={{ padding: '12px 18px calc(14px + env(safe-area-inset-bottom))', borderTop: '1px solid var(--line)',
          background: 'var(--bg)' }}>{footer}</div>
      )}
    </div>
  );
}

function PrimaryBtn({ children, onClick, disabled, full = true, icon }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{ width: full ? '100%' : undefined, height: 52,
      padding: full ? 0 : '0 22px', borderRadius: 14, border: 'none', cursor: disabled ? 'default' : 'pointer',
      fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 600, display: 'flex', alignItems: 'center',
      justifyContent: 'center', gap: 8, background: disabled ? 'var(--line)' : 'var(--ink)',
      color: disabled ? 'var(--muted)' : 'var(--bg)' }}>
      {icon && <Icon name={icon} size={19} s={disabled ? 'var(--muted)' : 'var(--bg)'} />}{children}</button>
  );
}

function Field({ label, hint, children, optional }) {
  return (
    <div style={{ marginTop: 22 }}>
      {label && (
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
          <span style={{ fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 600, color: 'var(--ink)',
            whiteSpace: 'nowrap' }}>{label}</span>
          {optional && <span style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--muted)' }}>Optional</span>}
        </div>
      )}
      {children}
      {hint && <div style={{ marginTop: 7, fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--muted)' }}>{hint}</div>}
    </div>
  );
}

function TextInput({ value, onChange, placeholder, prefix, multiline, type = 'text' }) {
  const base = { width: '100%', border: '1.5px solid var(--line)', background: 'var(--surface)',
    borderRadius: 13, fontFamily: 'var(--sans)', fontSize: 15.5, color: 'var(--ink)', outline: 'none',
    boxSizing: 'border-box' };
  if (multiline) {
    return <textarea value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
      rows={4} style={{ ...base, padding: '13px 15px', resize: 'none', lineHeight: 1.5 }}
      onFocus={(e) => e.target.style.borderColor = 'var(--ink)'}
      onBlur={(e) => e.target.style.borderColor = 'var(--line)'} />;
  }
  return (
    <div style={{ display: 'flex', alignItems: 'center', ...base, height: 52, padding: '0 15px' }}>
      {prefix && <span style={{ fontFamily: 'var(--sans)', fontSize: 15.5, color: 'var(--muted)', marginRight: 6 }}>{prefix}</span>}
      <input value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} type={type}
        inputMode={type === 'number' ? 'numeric' : undefined}
        style={{ flex: 1, border: 'none', outline: 'none', background: 'none', fontFamily: 'var(--sans)',
          fontSize: 15.5, color: 'var(--ink)', minWidth: 0 }} />
    </div>
  );
}

// Icon tiles (category / intent grid)
function OptionTiles({ options, value, onChange, cols = 2 }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 10 }}>
      {options.map(o => {
        const active = value === o.id;
        return (
          <button key={o.id} onClick={() => onChange(o.id)} style={{ display: 'flex', alignItems: 'center', gap: 11,
            padding: '14px 14px', borderRadius: 14, cursor: 'pointer', textAlign: 'left',
            border: active ? '1.5px solid var(--ink)' : '1.5px solid var(--line)',
            background: active ? 'var(--ink)' : 'var(--surface)', transition: 'all .14s ease' }}>
            <Icon name={o.icon} size={22} s={active ? 'var(--bg)' : 'var(--accent)'} />
            <span style={{ fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 600, whiteSpace: 'nowrap',
              color: active ? 'var(--bg)' : 'var(--ink)' }}>{o.label}</span>
          </button>
        );
      })}
    </div>
  );
}

function Segmented({ options, value, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 6, padding: 4, borderRadius: 13, background: 'oklch(0.94 0.004 95)' }}>
      {options.map(([v, label]) => (
        <button key={v} onClick={() => onChange(v)} style={{ flex: 1, height: 42, borderRadius: 9, border: 'none',
          cursor: 'pointer', fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 600, transition: 'all .18s',
          background: value === v ? 'var(--surface)' : 'transparent', color: value === v ? 'var(--ink)' : 'var(--muted)',
          boxShadow: value === v ? '0 1px 4px rgba(0,0,0,0.08)' : 'none' }}>{label}</button>
      ))}
    </div>
  );
}

function ChoiceChips({ options, value, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {options.map(([v, label]) => {
        const active = value === v;
        return (
          <button key={v} onClick={() => onChange(v)} style={{ flex: 1, height: 44, borderRadius: 11, cursor: 'pointer',
            fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 600,
            border: active ? '1.5px solid var(--ink)' : '1.5px solid var(--line)',
            background: active ? 'var(--ink)' : 'var(--surface)', color: active ? 'var(--bg)' : 'var(--ink)' }}>{label}</button>
        );
      })}
    </div>
  );
}

// Settings / profile navigation row
function NavRow({ icon, label, detail, sub, onClick, danger, isLast, chevron = true, accent }) {
  return (
    <button onClick={onClick} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 13,
      padding: '14px 16px', border: 'none', background: 'var(--surface)', cursor: 'pointer', textAlign: 'left',
      borderBottom: isLast ? 'none' : '1px solid var(--line)' }}>
      {icon && (
        <span style={{ width: 34, height: 34, borderRadius: 9, flexShrink: 0, display: 'flex', alignItems: 'center',
          justifyContent: 'center', background: danger ? 'oklch(0.95 0.04 25)' : (accent || 'var(--accent-soft)') }}>
          <Icon name={icon} size={19} s={danger ? 'oklch(0.55 0.18 25)' : 'var(--accent)'} />
        </span>
      )}
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: 'block', fontFamily: 'var(--sans)', fontSize: 15.5, fontWeight: 500,
          color: danger ? 'oklch(0.55 0.18 25)' : 'var(--ink)' }}>{label}</span>
        {sub && <span style={{ display: 'block', fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--muted)',
          marginTop: 1 }}>{sub}</span>}
      </span>
      {detail && <span style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--muted)' }}>{detail}</span>}
      {chevron && !danger && <Icon name="chevR" size={17} s="var(--faint, var(--muted))" sw={2} />}
    </button>
  );
}

function ToggleRow({ icon, label, sub, value, onChange, isLast }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 16px', background: 'var(--surface)',
      borderBottom: isLast ? 'none' : '1px solid var(--line)' }}>
      {icon && (
        <span style={{ width: 34, height: 34, borderRadius: 9, flexShrink: 0, display: 'flex', alignItems: 'center',
          justifyContent: 'center', background: 'var(--accent-soft)' }}>
          <Icon name={icon} size={19} s="var(--accent)" /></span>
      )}
      <span style={{ flex: 1 }}>
        <span style={{ display: 'block', fontFamily: 'var(--sans)', fontSize: 15.5, fontWeight: 500, color: 'var(--ink)' }}>{label}</span>
        {sub && <span style={{ display: 'block', fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--muted)', marginTop: 1 }}>{sub}</span>}
      </span>
      <button onClick={() => onChange(!value)} style={{ width: 50, height: 30, borderRadius: 999, padding: 3,
        border: 'none', cursor: 'pointer', transition: 'background .18s', flexShrink: 0,
        background: value ? 'var(--accent)' : 'var(--line)' }}>
        <span style={{ display: 'block', width: 24, height: 24, borderRadius: 999, background: '#fff',
          transition: 'transform .18s', transform: value ? 'translateX(20px)' : 'none',
          boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} /></button>
    </div>
  );
}

function Group({ header, children, footer }) {
  return (
    <div style={{ marginTop: 22 }}>
      {header && <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: 0.6, textTransform: 'uppercase',
        color: 'var(--muted)', padding: '0 4px 8px' }}>{header}</div>}
      <div style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid var(--line)' }}>{children}</div>
      {footer && <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--muted)', padding: '8px 4px 0' }}>{footer}</div>}
    </div>
  );
}

// Success confirmation overlay
function SuccessView({ title, sub, onDone, doneLabel = 'Done' }) {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 38, background: 'var(--bg)', display: 'flex',
      flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 40, textAlign: 'center',
      animation: 'fadeIn .2s ease' }}>
      <div style={{ width: 84, height: 84, borderRadius: 999, background: 'var(--accent)', display: 'flex',
        alignItems: 'center', justifyContent: 'center', animation: 'pop .35s cubic-bezier(.2,.9,.3,1.3)' }}>
        <Icon name="check" size={42} s="#fff" sw={2.6} />
      </div>
      <div style={{ marginTop: 24, fontFamily: 'var(--sans)', fontSize: 23, fontWeight: 700, letterSpacing: -0.4,
        color: 'var(--ink)' }}>{title}</div>
      <div style={{ marginTop: 8, fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--muted)', lineHeight: 1.5,
        maxWidth: 280 }}>{sub}</div>
      <button onClick={onDone} style={{ marginTop: 30, height: 50, padding: '0 32px', borderRadius: 13, border: 'none',
        cursor: 'pointer', background: 'var(--ink)', color: 'var(--bg)', fontFamily: 'var(--sans)', fontSize: 15.5,
        fontWeight: 600 }}>{doneLabel}</button>
    </div>
  );
}

Object.assign(window, { FormScreen, PrimaryBtn, Field, TextInput, OptionTiles, Segmented, ChoiceChips,
  NavRow, ToggleRow, Group, SuccessView });