// arcai-screen-settings.jsx — Settings Hub (admin)

const SETTINGS_CATEGORIES = [
  { id: 'org',          icon: '🏢', label: 'Organization' },
  { id: 'notifications',icon: '🔔', label: 'Notifications' },
  { id: 'branding',     icon: '🎨', label: 'Branding' },
  { id: 'billing',      icon: '💳', label: 'Billing' },
  { id: 'integrations', icon: '🔌', label: 'Integrations' },
  { id: 'account',      icon: '👥', label: 'Account & Privacy' },
];

function SettingsToggle({ on, onChange }) {
  return (
    <button
      onClick={() => onChange(!on)}
      style={{
        position: 'relative', width: 38, height: 22, borderRadius: 999,
        background: on ? 'var(--accent)' : 'var(--surface-2)',
        border: `1px solid ${on ? 'var(--accent-deep)' : 'var(--border)'}`,
        cursor: 'pointer', flexShrink: 0, padding: 0,
        transition: 'background 0.15s, border-color 0.15s',
      }}
    >
      <span style={{
        position: 'absolute', top: 2, left: on ? 18 : 2,
        width: 16, height: 16, borderRadius: '50%',
        background: on ? 'var(--bg)' : 'var(--text-muted)',
        transition: 'left 0.15s',
      }} />
    </button>
  );
}

function SettingsRow({ title, hint, children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '14px 0', borderBottom: '1px solid var(--border)' }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{title}</div>
        {hint && <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 3 }}>{hint}</div>}
      </div>
      <div style={{ flexShrink: 0 }}>{children}</div>
    </div>
  );
}

function SectionHeader({ title, subtitle, phase2 }) {
  return (
    <div style={{ marginBottom: 18 }}>
      {phase2 && (
        <EyebrowChip style={{ background: 'rgba(255,196,0,0.10)', color: 'var(--warn)', borderColor: 'rgba(255,196,0,0.25)', marginBottom: 10 }}>Phase 2</EyebrowChip>
      )}
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em' }}>{title}</div>
      {subtitle && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>{subtitle}</div>}
    </div>
  );
}

function FieldInput({ label, value, asSelect }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: 'var(--text-dim)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div style={{
        background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 10,
        padding: '10px 12px', fontSize: 13, color: 'var(--text)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: 'var(--font-body)',
      }}>
        <span>{value}</span>
        {asSelect && <span style={{ color: 'var(--text-dim)', fontSize: 11 }}>▾</span>}
      </div>
    </div>
  );
}

function GhostBadgeBtn({ children, onClick }) {
  return (
    <button onClick={onClick || (() => {})}
      style={{
        background: 'transparent', color: 'var(--text-muted)',
        border: '1px solid var(--border-strong)',
        padding: '6px 12px', borderRadius: 10, fontSize: 12, fontWeight: 600,
        fontFamily: 'var(--font-body)', cursor: 'pointer',
      }}>{children}</button>
  );
}

function OrgPane({ savedToast, onSave }) {
  return (
    <div>
      <SectionHeader title="Organization" subtitle="Detail dasar perusahaan & seat allocation" />
      <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: 20 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <FieldInput label="Nama organisasi" value="PT Acme Indonesia" />
          <FieldInput label="Industri" value="Technology / Software" asSelect />
          <FieldInput label="Negara" value="Indonesia 🇮🇩" asSelect />
          <div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>Total seats</div>
            <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 10, padding: '10px 12px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                <span style={{ fontSize: 13, color: 'var(--text)', fontFamily: 'var(--font-mono)', fontWeight: 700 }}>180 / 250</span>
                <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>72% terpakai</span>
              </div>
              <ProgressBar value={72} height={4} />
            </div>
          </div>
          <div style={{ gridColumn: 'span 2' }}>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>Plan</div>
            <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 10, padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontSize: 13, color: 'var(--text)', fontWeight: 600 }}>Enterprise · Annual</span>
              <LevelChip level={4} label="ACTIVE" />
              <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--text-dim)' }}>Renewal · Jan 2027</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
        <BtnPrimary onClick={onSave} size="sm">Simpan perubahan</BtnPrimary>
        {savedToast && (
          <span style={{ fontSize: 12, color: 'var(--success)', fontWeight: 700, background: 'rgba(123,237,111,0.12)', border: '1px solid rgba(123,237,111,0.3)', padding: '6px 12px', borderRadius: 999 }}>✓ Tersimpan</span>
        )}
      </div>
    </div>
  );
}

function NotificationsPane() {
  const [inactiveDays, setInactiveDays] = React.useState(7);
  const [emailLevelup, setEmailLevelup] = React.useState(true);
  const [weeklyDigest, setWeeklyDigest] = React.useState(true);
  const [streakBreakAlert, setStreakBreakAlert] = React.useState(false);
  const [reminderLowStreak, setReminderLowStreak] = React.useState(true);
  const [saved, setSaved] = React.useState(false);

  const handleSave = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 1800);
  };

  return (
    <div>
      <SectionHeader title="Notifications & Alerts" subtitle="Atur kapan manager dan admin diberi tahu" />

      <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: 20 }}>
        <div style={{ padding: '14px 0', borderBottom: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>
                Alert manager kalau karyawan inactive selama <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)' }}>{inactiveDays}</span> hari
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 3 }}>Threshold yang memicu nudge otomatis ke manager</div>
            </div>
            <span style={{ fontSize: 12, color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontWeight: 700, background: 'var(--accent-overlay-mid)', padding: '4px 10px', borderRadius: 999 }}>{inactiveDays} hari</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>3</span>
            <input
              type="range" min={3} max={14} value={inactiveDays}
              onChange={e => setInactiveDays(parseInt(e.target.value, 10))}
              style={{ flex: 1, accentColor: 'var(--accent)' }}
            />
            <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>14</span>
          </div>
        </div>

        <SettingsRow title="Email alert saat user level-up" hint="Manager dapat email setiap kali anggota tim naik level">
          <SettingsToggle on={emailLevelup} onChange={setEmailLevelup} />
        </SettingsRow>
        <SettingsRow title="Weekly digest setiap Senin pagi" hint="Ringkasan tim minggu lalu dikirim 09:00 WIB">
          <SettingsToggle on={weeklyDigest} onChange={setWeeklyDigest} />
        </SettingsRow>
        <SettingsRow title="Alert ketika streak terputus di top performers" hint="Khusus 10% top user — pertahankan momentum">
          <SettingsToggle on={streakBreakAlert} onChange={setStreakBreakAlert} />
        </SettingsRow>
        <div style={{ borderBottom: 'none' }}>
          <SettingsRow title="Reminder harian buat user dengan streak <3 hari" hint="Push reminder pribadi, tidak ke manager">
            <SettingsToggle on={reminderLowStreak} onChange={setReminderLowStreak} />
          </SettingsRow>
        </div>
      </div>

      <div style={{ marginTop: 20, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: 20 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', marginBottom: 4 }}>Channels</div>
        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 12 }}>Lewat mana notifikasi dikirim</div>
        {[
          { name: 'Email',    sub: 'sarah@acme.com',         enabled: true },
          { name: 'In-app',   sub: 'Notifikasi di sidebar',  enabled: true },
          { name: 'Slack',    sub: 'Belum terhubung',        enabled: false },
          { name: 'WhatsApp', sub: 'Belum terhubung',        enabled: false },
        ].map((ch, i, arr) => (
          <div key={ch.name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none' }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-soft)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: 'var(--text-muted)', fontWeight: 700, fontFamily: 'var(--font-mono)' }}>{ch.name[0]}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{ch.name}</div>
              <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{ch.sub}</div>
            </div>
            {ch.enabled
              ? <span style={{ fontSize: 11, color: 'var(--success)', fontWeight: 700, background: 'rgba(123,237,111,0.12)', border: '1px solid rgba(123,237,111,0.25)', padding: '4px 10px', borderRadius: 999 }}>✓ Aktif</span>
              : <GhostBadgeBtn>Hubungkan</GhostBadgeBtn>}
          </div>
        ))}
      </div>

      <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
        <BtnPrimary onClick={handleSave} size="sm">Simpan</BtnPrimary>
        {saved && (
          <span style={{ fontSize: 12, color: 'var(--success)', fontWeight: 700, background: 'rgba(123,237,111,0.12)', border: '1px solid rgba(123,237,111,0.3)', padding: '6px 12px', borderRadius: 999 }}>✓ Tersimpan</span>
        )}
      </div>
    </div>
  );
}

function BrandingPane() {
  return (
    <div>
      <SectionHeader title="Branding" subtitle="Sesuaikan tampilan arcai dengan identitas perusahaan" phase2 />
      <div style={{ position: 'relative', background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: 20 }}>
        <div style={{ opacity: 0.55, pointerEvents: 'none' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-dim)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>Logo perusahaan</div>
              <div style={{ background: 'var(--bg-soft)', border: '1px dashed var(--border-strong)', borderRadius: 12, padding: 28, textAlign: 'center', fontSize: 12, color: 'var(--text-muted)' }}>
                Drag & drop logo<br/><span style={{ fontSize: 10, color: 'var(--text-dim)' }}>SVG / PNG · max 2 MB</span>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-dim)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>Accent color</div>
              <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 12, padding: 14, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
                {['#D4FF3A','#FF4B91','#7BED6F','#5DB8FF','#FFC400','#A78BFA'].map(c => (
                  <div key={c} style={{ width: 28, height: 28, borderRadius: 8, background: c, border: '1px solid var(--border)' }} />
                ))}
              </div>
            </div>
          </div>
          <FieldInput label="Custom domain" value="learn.acme.com" />
        </div>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
          <EyebrowChip style={{ background: 'rgba(255,196,0,0.10)', color: 'var(--warn)', borderColor: 'rgba(255,196,0,0.25)' }}>Coming soon</EyebrowChip>
          <button onClick={() => {}}
            style={{ cursor: 'default', background: 'var(--surface-2)', border: '1px solid var(--border-strong)', color: 'var(--text)', padding: '10px 18px', borderRadius: 12, fontSize: 13, fontWeight: 700, fontFamily: 'var(--font-body)' }}>
            Aktifkan branding kustom — hubungi sales
          </button>
        </div>
      </div>
    </div>
  );
}

function BillingPane() {
  const invoices = [
    { id: 'INV-2026-04', date: '01 Apr 2026', amount: 'Rp 480.000.000', status: 'Lunas' },
    { id: 'INV-2025-04', date: '01 Apr 2025', amount: 'Rp 420.000.000', status: 'Lunas' },
    { id: 'INV-2024-04', date: '01 Apr 2024', amount: 'Rp 360.000.000', status: 'Lunas' },
  ];
  return (
    <div>
      <SectionHeader title="Billing" subtitle="Plan, invoice & metode pembayaran" phase2 />
      <div style={{ opacity: 0.7 }}>
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: 20, marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-dim)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>Plan saat ini</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: 'var(--text)' }}>Enterprise · 180 seats</div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>Billed annually · next renewal Jan 2027</div>
            </div>
            <BtnGhost small onClick={() => {}}>Upgrade plan</BtnGhost>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
            {[
              { label: 'Seats terpakai', value: '180 / 250' },
              { label: 'Tahunan',        value: 'Rp 480M' },
              { label: 'Per seat / bln', value: 'Rp 222rb' },
            ].map(s => (
              <div key={s.label} style={{ background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 10, padding: 12, textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700, color: 'var(--accent)' }}>{s.value}</div>
                <div style={{ fontSize: 10, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginTop: 4 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, overflow: 'hidden' }}>
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border)', fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>Invoice terbaru</div>
          {invoices.map((inv, i) => (
            <div key={inv.id} style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 0.8fr 100px', gap: 12, padding: '12px 20px', alignItems: 'center', borderBottom: i < invoices.length - 1 ? '1px solid var(--border)' : 'none' }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)', fontFamily: 'var(--font-mono)' }}>{inv.id}</div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{inv.date}</div>
              <div style={{ fontSize: 13, color: 'var(--text)', fontFamily: 'var(--font-mono)' }}>{inv.amount}</div>
              <div><span style={{ fontSize: 11, color: 'var(--success)', fontWeight: 700, background: 'rgba(123,237,111,0.12)', border: '1px solid rgba(123,237,111,0.25)', padding: '4px 10px', borderRadius: 999 }}>{inv.status}</span></div>
              <button onClick={() => {}} style={{ cursor: 'default', background: 'transparent', border: '1px solid var(--border)', color: 'var(--text-muted)', padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600 }}>Download</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function IntegrationsPane() {
  const groups = [
    { cat: 'HRIS',      items: [{ name: 'BambooHR', desc: 'Sync data karyawan otomatis' }, { name: 'Workday', desc: 'Org chart & roles' }] },
    { cat: 'SSO',       items: [{ name: 'Google',   desc: 'Login dengan Google Workspace' }, { name: 'Okta', desc: 'SAML 2.0 / SCIM' }, { name: 'Azure AD', desc: 'Microsoft Entra ID' }] },
    { cat: 'Comms',     items: [{ name: 'Slack',    desc: 'Notifikasi ke channel tim' }, { name: 'MS Teams', desc: 'Bot reminder harian' }] },
    { cat: 'Analytics', items: [{ name: 'Looker',   desc: 'Pipe data ke dashboard BI' }, { name: 'Tableau', desc: 'Custom reporting' }] },
  ];
  return (
    <div>
      <SectionHeader title="Integrations" subtitle="Hubungkan arcai ke stack perusahaan Anda" phase2 />
      <div style={{ opacity: 0.7, display: 'flex', flexDirection: 'column', gap: 18 }}>
        {groups.map(g => (
          <div key={g.cat}>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>{g.cat}</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12 }}>
              {g.items.map(it => (
                <div key={it.name} style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 14, padding: 14 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--bg-soft)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-mono)', marginBottom: 10 }}>{it.name.slice(0, 2).toUpperCase()}</div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{it.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2, marginBottom: 12, lineHeight: 1.4 }}>{it.desc}</div>
                  <GhostBadgeBtn>Hubungkan</GhostBadgeBtn>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AccountPane() {
  const [showLeaderboard, setShowLeaderboard] = React.useState(false);
  const [seeColleagues, setSeeColleagues] = React.useState(false);
  const [exportOnLeave, setExportOnLeave] = React.useState(true);

  return (
    <div>
      <SectionHeader title="Account & Privacy" subtitle="Pengaturan akun pribadi dan kebijakan data" />

      <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: 20, marginBottom: 16 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', marginBottom: 12 }}>Account</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Avatar name="Sarah Kusuma" size={48} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>Sarah Kusuma</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>HR Manager · sarah@acme.com</div>
          </div>
          <BtnGhost small onClick={() => {}}>Ubah password</BtnGhost>
          <BtnGhost small danger onClick={() => {}}>Logout</BtnGhost>
        </div>
      </div>

      <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: 20, marginBottom: 16 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', marginBottom: 4 }}>Privacy</div>
        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 6 }}>Kontrol siapa lihat apa di organisasi</div>
        <SettingsRow title="Tampilkan leaderboard ke user" hint="Sebagian perusahaan tradisional prefer leaderboard mati">
          <SettingsToggle on={showLeaderboard} onChange={setShowLeaderboard} />
        </SettingsRow>
        <SettingsRow title="Izinkan user lihat colleague achievements" hint="User bisa lihat badge & level rekan satu tim">
          <SettingsToggle on={seeColleagues} onChange={setSeeColleagues} />
        </SettingsRow>
        <div style={{ borderBottom: 'none' }}>
          <SettingsRow title="Export data karyawan saat user keluar" hint="Generate laporan lengkap saat akun di-deactivate">
            <SettingsToggle on={exportOnLeave} onChange={setExportOnLeave} />
          </SettingsRow>
        </div>
      </div>

      <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: 20 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', marginBottom: 4 }}>Data retention</div>
        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 12 }}>Berapa lama data learning disimpan</div>
        <div style={{ maxWidth: 360 }}>
          <FieldInput label="Simpan riwayat learning selama" value="24 bulan" asSelect />
        </div>
      </div>
    </div>
  );
}

function ScreenSettings({ onNavigate }) {
  const [category, setCategory] = React.useState('notifications');
  const [orgSaved, setOrgSaved] = React.useState(false);

  const handleOrgSave = () => {
    setOrgSaved(true);
    setTimeout(() => setOrgSaved(false), 1800);
  };

  const renderPane = () => {
    switch (category) {
      case 'org':           return <OrgPane savedToast={orgSaved} onSave={handleOrgSave} />;
      case 'notifications': return <NotificationsPane />;
      case 'branding':      return <BrandingPane />;
      case 'billing':       return <BillingPane />;
      case 'integrations':  return <IntegrationsPane />;
      case 'account':       return <AccountPane />;
      default:              return <NotificationsPane />;
    }
  };

  return (
    <div style={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
      <SidebarNav active="settings" onNavigate={onNavigate} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <TopBar title="Settings" subtitle="PT Acme · Konfigurasi workspace" />
        <div style={{ flex: 1, overflow: 'hidden', display: 'flex' }}>
          {/* Category nav */}
          <div style={{ width: 240, borderRight: '1px solid var(--border)', padding: '20px 14px', background: 'var(--bg)', flexShrink: 0, overflowY: 'auto' }}>
            <div style={{ fontSize: 10, color: 'var(--text-dim)', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '0 8px', marginBottom: 10 }}>Kategori</div>
            {SETTINGS_CATEGORIES.map(c => {
              const active = category === c.id;
              return (
                <button key={c.id} onClick={() => setCategory(c.id)}
                  style={{
                    width: '100%', display: 'flex', alignItems: 'center', gap: 10,
                    padding: '10px 12px', borderRadius: 10, marginBottom: 2,
                    background: active ? 'var(--surface-2)' : 'transparent',
                    border: 'none', cursor: 'pointer',
                    color: active ? 'var(--accent)' : 'var(--text-muted)',
                    fontSize: 13, fontWeight: active ? 700 : 500,
                    fontFamily: 'var(--font-body)', textAlign: 'left',
                    borderLeft: active ? '2px solid var(--accent)' : '2px solid transparent',
                    transition: 'all 0.15s',
                  }}>
                  <span style={{ fontSize: 14 }}>{c.icon}</span>
                  {c.label}
                </button>
              );
            })}
            <div style={{ marginTop: 18, padding: 12, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 10 }}>
              <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', marginBottom: 4 }}>v1.0 · MVP</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.4 }}>Banyak fitur lanjut akan datang di Phase 2 — hubungi tim arcai jika butuh lebih cepat.</div>
            </div>
          </div>

          {/* Right pane */}
          <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px' }}>
            <div style={{ maxWidth: 880 }}>
              {renderPane()}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenSettings });