// Settings primitives + nav config, shared across all settings screens.

const SETTINGS_NAV = [
  { section: 'General', items: [
    { id: 'you',        icon: 'user',     label: 'You & Ajna',       badge: '3 devices' },
    { id: 'saved',      icon: 'key',      label: 'Your saved info' },
    { id: 'privacy',    icon: 'shield',   label: 'Privacy & security', badge: 'Strict' },
    { id: 'perf',       icon: 'bolt',     label: 'Performance' },
    { id: 'appearance', icon: 'paint',    label: 'Appearance' },
    { id: 'search',     icon: 'search',   label: 'Search engine' },
    { id: 'default',    icon: 'globe2',   label: 'Default browser' },
    { id: 'startup',    icon: 'power',    label: 'On startup' },
  ]},
  { section: 'Advanced', items: [
    { id: 'lang',       icon: 'globe',    label: 'Languages' },
    { id: 'downloads',  icon: 'download', label: 'Downloads' },
    { id: 'access',     icon: 'access',   label: 'Accessibility' },
    { id: 'system',     icon: 'chip',     label: 'System' },
    { id: 'reset',      icon: 'reset',    label: 'Reset settings' },
  ]},
  { section: 'Extensions & About', items: [
    { id: 'ext',        icon: 'plug',     label: 'Extensions', external: true },
    { id: 'about',      icon: 'info',     label: 'About Ajna' },
  ]},
];

const NAV_ICONS = {
  user:     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>,
  paint:    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="14" r="2"/><path d="M12 4 4 12l8 8 10-10-8-8z"/></svg>,
  power:    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v9"/><path d="M5.6 7.4a9 9 0 1 0 12.8 0"/></svg>,
  search:   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>,
  shield:   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z"/></svg>,
  key:      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="15" r="4"/><path d="m11 12 9-9"/><path d="m18 5 2 2"/></svg>,
  bolt:     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>,
  globe:    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg>,
  globe2:   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/><circle cx="7" cy="7.5" r="0.5" fill="currentColor"/></svg>,
  download: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v12m0 0-4-4m4 4 4-4M4 20h16"/></svg>,
  access:   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="5" r="2"/><path d="M12 7v6m-4 0h8M8 20l4-7 4 7"/></svg>,
  chip:     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 3v3m6-3v3M9 18v3m6-3v3M3 9h3m-3 6h3m15-6h3m-3 6h3"/></svg>,
  plug:     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 2v6m6-6v6M5 8h14v4a7 7 0 0 1-14 0z"/><path d="M12 19v3"/></svg>,
  reset:    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>,
  info:     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>,
  // route tokens
  p2p:      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="5" cy="12" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="19" cy="18" r="2"/><path d="M7 12l10-6M7 12l10 6"/></svg>,
};

const SETTING_ROUTES = {
  you: 'ajna://settings/people',
  sync: 'ajna://settings/people/syncSetup',
  saved: 'ajna://settings/autofill',
  privacy: 'ajna://settings/privacy',
  perf: 'ajna://settings/performance',
  appearance: 'ajna://settings/appearance',
  search: 'ajna://settings/search',
  default: 'ajna://settings/defaultBrowser',
  startup: 'ajna://settings/onStartup',
  lang: 'ajna://settings/languages',
  downloads: 'ajna://settings/downloads',
  access: 'ajna://settings/accessibility',
  system: 'ajna://settings/system',
  reset: 'ajna://settings/reset',
  ext: 'ajna://extensions',
  about: 'ajna://settings/help',
};

function Toggle({ on, onChange, size = 'md' }) {
  const W = size === 'sm' ? 28 : 34;
  const H = size === 'sm' ? 16 : 20;
  const K = size === 'sm' ? 12 : 16;
  return (
    <button onClick={() => onChange && onChange(!on)} style={{
      width: W, height: H, borderRadius: 999,
      background: on ? 'var(--accent-grad)' : 'var(--bg-elev-2)',
      boxShadow: on ? 'none' : 'inset 0 0 0 1px var(--border)',
      border: 0, cursor: 'pointer', position: 'relative',
      transition: 'background 180ms', flexShrink: 0,
    }}>
      <span style={{
        position: 'absolute', top: 2, left: on ? W - K - 2 : 2,
        width: K, height: K, borderRadius: '50%',
        background: '#fff',
        boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
        transition: 'left 180ms',
      }}/>
    </button>
  );
}

function SettingsNavItem({ item, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 10,
      width: '100%', padding: '7px 10px', borderRadius: 8,
      background: active ? 'oklch(from var(--accent-b) l c h / 0.14)' : 'transparent',
      boxShadow: active ? 'inset 0 0 0 1px oklch(from var(--accent-b) l c h / 0.25)' : 'none',
      border: 0, cursor: 'pointer',
      color: active ? 'var(--fg)' : 'var(--fg-muted)',
      fontSize: 13, fontWeight: active ? 500 : 400,
      fontFamily: 'inherit', textAlign: 'left',
    }}
    onMouseEnter={e => { if (!active) e.currentTarget.style.background = 'var(--hover)'; }}
    onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
      <span style={{ color: active ? 'var(--accent-b)' : 'var(--fg-dim)', display: 'grid', placeItems: 'center', width: 16, height: 16 }}>
        {NAV_ICONS[item.icon]}
      </span>
      <span style={{ flex: 1 }}>{item.label}</span>
      {item.badge && (
        <span style={{
          fontSize: 10, fontWeight: 500,
          padding: '2px 6px', borderRadius: 10,
          background: 'oklch(from var(--accent-a) l c h / 0.15)',
          color: 'oklch(from var(--accent-a) 0.8 c h)',
          fontFamily: 'JetBrains Mono, monospace',
          letterSpacing: '0.02em',
          whiteSpace: 'nowrap', flexShrink: 0,
        }}>{item.badge}</span>
      )}
      {item.external && (
        <span style={{ color: 'var(--fg-dim)' }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M8 7h9v9"/></svg>
        </span>
      )}
    </button>
  );
}

// Row with chevron (navigates), optional right content
function SettingRow({ title, subtitle, right, onClick, danger }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 16,
      width: '100%', padding: '14px 16px',
      background: 'var(--bg-elev)',
      border: '1px solid var(--border-soft)',
      borderRadius: 12, textAlign: 'left',
      cursor: onClick ? 'pointer' : 'default',
      color: danger ? 'oklch(0.7 0.15 25)' : 'var(--fg)',
      fontFamily: 'inherit',
      flexWrap: 'wrap',
    }}
    onMouseEnter={e => { if (onClick) e.currentTarget.style.background = 'var(--bg-elev-2)'; }}
    onMouseLeave={e => { if (onClick) e.currentTarget.style.background = 'var(--bg-elev)'; }}>
      <div style={{ flex: '1 1 260px', minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{title}</div>
        {subtitle && <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 3, lineHeight: 1.45, whiteSpace: 'normal' }}>{subtitle}</div>}
      </div>
      {right !== undefined ? right : (onClick ? <Chevron/> : null)}
    </button>
  );
}

// Card container (like SettingRow but not a button)
function SettingCard({ title, subtitle, right, children }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 16,
      padding: '14px 16px',
      background: 'var(--bg-elev)',
      border: '1px solid var(--border-soft)',
      borderRadius: 12,
      flexWrap: 'wrap',
    }}>
      <div style={{ flex: '1 1 260px', minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{title}</div>
        {subtitle && <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 3, lineHeight: 1.45 }}>{subtitle}</div>}
        {children && <div style={{ marginTop: 10 }}>{children}</div>}
      </div>
      {right}
    </div>
  );
}

function Chevron() {
  return (
    <span style={{ color: 'var(--fg-dim)' }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </span>
  );
}

function Chip({ children, color }) {
  const tones = {
    green:  { bg: 'oklch(0.72 0.15 155 / 0.14)', fg: 'oklch(0.82 0.15 155)', dot: 'oklch(0.72 0.15 155)' },
    amber:  { bg: 'oklch(0.75 0.15 70 / 0.14)',  fg: 'oklch(0.85 0.15 70)',  dot: 'oklch(0.78 0.15 70)' },
    red:    { bg: 'oklch(0.70 0.18 25 / 0.14)',  fg: 'oklch(0.8 0.16 25)',   dot: 'oklch(0.72 0.18 25)' },
    blue:   { bg: 'oklch(0.72 0.13 240 / 0.14)', fg: 'oklch(0.85 0.1 240)',  dot: 'oklch(0.75 0.15 240)' },
    default:{ bg: 'var(--bg-elev-2)',             fg: 'var(--fg-muted)',     dot: null },
  };
  const tone = tones[color] || tones.default;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontSize: 11, color: tone.fg,
      background: tone.bg, padding: '3px 8px', borderRadius: 999,
      fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.02em',
      whiteSpace: 'nowrap', flexShrink: 0,
    }}>
      {tone.dot && <span style={{ width: 5, height: 5, borderRadius: '50%', background: tone.dot, boxShadow: `0 0 6px ${tone.dot}` }}/>}
      {children}
    </span>
  );
}

// Page-level title + subtitle block
function PageHeader({ route, title, subtitle, back }) {
  return (
    <div style={{ marginBottom: 22 }}>
      {back && (
        <button onClick={back.onClick} style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          background: 'transparent', border: 0, cursor: 'pointer',
          color: 'var(--fg-muted)', fontFamily: 'inherit', fontSize: 12,
          padding: '4px 6px', marginLeft: -6, marginBottom: 8, borderRadius: 6,
        }}
        onMouseEnter={e => e.currentTarget.style.background = 'var(--hover)'}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
          {back.label}
        </button>
      )}
      {route && <div style={{ fontSize: 11, color: 'var(--fg-dim)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.05em', textTransform: 'uppercase' }}>{route}</div>}
      <h1 style={{
        margin: '6px 0 6px',
        fontFamily: 'Geist, Inter, sans-serif',
        fontSize: 'clamp(26px, 3.5vw, 34px)',
        lineHeight: 1.1,
        fontWeight: 600, letterSpacing: '-0.025em',
        color: 'var(--fg)',
      }}>{title}</h1>
      {subtitle && <p style={{ margin: 0, color: 'var(--fg-muted)', fontSize: 13.5, lineHeight: 1.55, maxWidth: 560 }}>{subtitle}</p>}
    </div>
  );
}

function SectionTitle({ children, sub }) {
  return (
    <div style={{ marginTop: 28, marginBottom: 12 }}>
      <div style={{ fontSize: 14, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', color: 'var(--fg)', letterSpacing: '-0.01em' }}>{children}</div>
      {sub && <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function Stack({ children, gap = 8 }) {
  return <div style={{ display: 'flex', flexDirection: 'column', gap }}>{children}</div>;
}

function Select({ value, options, onChange, width }) {
  return (
    <select value={value} onChange={e => onChange && onChange(e.target.value)} style={{
      background: 'var(--bg-elev-2)', color: 'var(--fg)',
      border: '1px solid var(--border)', borderRadius: 8,
      padding: '6px 28px 6px 10px', fontSize: 12.5, fontFamily: 'inherit',
      cursor: 'pointer', minWidth: width || 'auto',
      appearance: 'none',
      backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")`,
      backgroundRepeat: 'no-repeat', backgroundPosition: 'right 10px center',
    }}>
      {options.map(o => <option key={o.value || o} value={o.value || o}>{o.label || o}</option>)}
    </select>
  );
}

function TextBtn({ children, onClick, primary, danger, disabled }) {
  const bg = disabled ? 'var(--bg-elev-2)'
    : primary ? 'var(--accent-grad)'
    : danger ? 'oklch(0.65 0.18 25)'
    : 'var(--bg-elev-2)';
  const fg = disabled ? 'var(--fg-dim)'
    : primary ? '#0F1114'
    : danger ? '#fff'
    : 'var(--fg)';
  return (
    <button onClick={disabled ? undefined : onClick} style={{
      background: bg, color: fg,
      border: primary ? 0 : '1px solid var(--border)',
      padding: '7px 14px', borderRadius: 8, fontSize: 12.5, fontWeight: 500,
      cursor: disabled ? 'not-allowed' : 'pointer', fontFamily: 'inherit',
      opacity: disabled ? 0.6 : 1,
    }}>{children}</button>
  );
}

function Field({ label, children, hint }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      {label && <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>{label}</div>}
      {children}
      {hint && <div style={{ fontSize: 11, color: 'var(--fg-dim)' }}>{hint}</div>}
    </div>
  );
}

function Input({ value, onChange, placeholder, mono, readOnly }) {
  return (
    <input value={value} onChange={e => onChange && onChange(e.target.value)} placeholder={placeholder} readOnly={readOnly}
      style={{
        background: 'var(--bg-elev-2)', border: '1px solid var(--border)',
        borderRadius: 8, padding: '8px 12px', fontSize: 12.5,
        color: 'var(--fg)', fontFamily: mono ? 'JetBrains Mono, monospace' : 'inherit',
        width: '100%', outline: 'none',
      }}/>
  );
}

Object.assign(window, {
  SETTINGS_NAV, NAV_ICONS, SETTING_ROUTES,
  Toggle, SettingsNavItem, SettingRow, SettingCard, Chevron, Chip,
  PageHeader, SectionTitle, Stack, Select, TextBtn, Field, Input,
});