/* global React, Icon, MP */
const { useState: useStateSet, useEffect: useEffectSet } = React;

// ============== SETTINGS PAGE ==============
const SETTINGS_SECTIONS = [
  { id:'profile',    label:'Profil Bisnis',    icon:'stores' },
  { id:'warehouse',  label:'Gudang',           icon:'box' },
  { id:'team',       label:'Tim & Akses',      icon:'help' },
  { id:'channels',   label:'Channel & Integrasi', icon:'link' },
  { id:'shipping',   label:'Kurir & Pengiriman', icon:'truck' },
  { id:'billing',    label:'Penagihan',        icon:'cash' },
  { id:'notify',     label:'Notifikasi',       icon:'bell' },
  { id:'security',   label:'Keamanan',         icon:'settings' },
];

function SettingsPage() {
  const [section, setSection] = useStateSet('profile');

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Pengaturan</h1>
          <p className="page-sub">Profil bisnis, tim, gudang, integrasi, dan penagihan</p>
        </div>
      </div>

      <div className="settings-layout">
        {/* sidebar */}
        <nav className="settings-nav">
          {SETTINGS_SECTIONS.map(s => {
            const I = Icon[s.icon];
            return (
              <button key={s.id} className={`settings-nav-item ${section===s.id?'active':''}`} onClick={()=>setSection(s.id)}>
                <I/>
                <span>{s.label}</span>
              </button>
            );
          })}
        </nav>

        {/* content */}
        <div className="settings-content">
          {section === 'profile'   && <ProfileSection/>}
          {section === 'warehouse' && <WarehouseSection/>}
          {section === 'team'      && <TeamSection/>}
          {section === 'channels'  && <ChannelsSection/>}
          {section === 'shipping'  && <ShippingSection/>}
          {section === 'billing'   && <BillingSection/>}
          {section === 'notify'    && <NotifySection/>}
          {section === 'security'  && <SecuritySection/>}
        </div>
      </div>
    </div>
  );
}

// ----- helpers -----
function SettingsCard({ title, desc, children, footer }) {
  return (
    <div className="card settings-card">
      {(title || desc) && (
        <div className="settings-card-head">
          {title && <h3>{title}</h3>}
          {desc && <p>{desc}</p>}
        </div>
      )}
      <div className="settings-card-body">{children}</div>
      {footer && <div className="settings-card-foot">{footer}</div>}
    </div>
  );
}

function FormRow({ label, hint, children, full }) {
  return (
    <div className={`form-row ${full?'full':''}`}>
      <label>
        <span className="form-label">{label}</span>
        {hint && <span className="form-hint">{hint}</span>}
      </label>
      <div className="form-control">{children}</div>
    </div>
  );
}

function Toggle({ on, onChange, label, desc }) {
  return (
    <button className="toggle-row" onClick={()=>onChange(!on)}>
      <div>
        <div className="toggle-label">{label}</div>
        {desc && <div className="toggle-desc">{desc}</div>}
      </div>
      <span className={`toggle-switch ${on?'on':''}`}>
        <span className="toggle-knob"/>
      </span>
    </button>
  );
}

// ============== PROFILE ==============
function ProfileSection() {
  const [data, setData] = useStateSet(null);
  const [original, setOriginal] = useStateSet(null);
  const [busy, setBusy] = useStateSet(false);
  const [saved, setSaved] = useStateSet(false);
  const [error, setError] = useStateSet('');

  const load = async () => {
    const r = await window.Api.get('/api/me');
    setData(r.data);
    setOriginal(r.data);
  };
  useEffectSet(() => { load(); }, []);

  const update = (key, value) => setData({ ...data, [key]: value });
  const dirty = data && original && JSON.stringify(data) !== JSON.stringify(original);

  const save = async () => {
    setBusy(true);
    setError('');
    try {
      const r = await window.Api.patch('/api/me', {
        name: data.name,
        businessName: data.businessName,
        phone: data.phone,
        npwp: data.npwp,
        businessAddress: data.businessAddress,
        businessType: data.businessType,
        billingEmail: data.billingEmail,
        valuationMethod: data.valuationMethod,
        pkpStatus: data.pkpStatus,
      });
      setOriginal(r.data);
      setData(r.data);
      window.__user = r.data;
      setSaved(true);
      setTimeout(() => setSaved(false), 2500);
    } catch (e) {
      setError(e.message || 'Gagal simpan');
    } finally { setBusy(false); }
  };

  const reset = () => setData(original);

  if (!data) return <div className="card" style={{ padding:24, textAlign:'center', color:'var(--ink-500)' }}>Memuat…</div>;

  const initials = (data.businessName || data.name || '?')
    .split(' ').map(s => s[0]).slice(0, 2).join('').toUpperCase();

  return (
    <>
      <SettingsCard
        title="Profil Bisnis"
        desc="Informasi ini muncul di invoice, surat jalan, dan resi yang kami cetak untuk Anda."
        footer={
          <>
            {saved && <span style={{ color:'var(--green)', fontSize:13, marginRight:'auto', fontWeight:600 }}>✓ Tersimpan</span>}
            {error && <span style={{ color:'var(--rose)', fontSize:13, marginRight:'auto', fontWeight:600 }}>{error}</span>}
            <button className="btn btn-secondary" onClick={reset} disabled={!dirty || busy}>Batal</button>
            <button className="btn btn-primary" onClick={save} disabled={!dirty || busy}>{busy ? 'Menyimpan…' : 'Simpan Perubahan'}</button>
          </>
        }
      >
        <div className="form-grid">
          <FormRow label="Logo bisnis">
            <div style={{ display:'flex', alignItems:'center', gap:14 }}>
              <div style={{ width:64, height:64, borderRadius:12, background:'var(--brand-50)', display:'grid', placeItems:'center', color:'var(--brand-600)', fontWeight:800, fontSize:22 }}>{initials}</div>
              <div>
                <button className="btn btn-secondary btn-sm" disabled>Unggah Logo</button>
                <div style={{ fontSize:11.5, color:'var(--ink-500)', marginTop:6 }}>Upload belum aktif (butuh object storage)</div>
              </div>
            </div>
          </FormRow>
          <FormRow label="Nama bisnis">
            <input className="input" value={data.businessName || ''} onChange={e=>update('businessName', e.target.value)}/>
          </FormRow>
          <FormRow label="Nama pemilik">
            <input className="input" value={data.name || ''} onChange={e=>update('name', e.target.value)}/>
          </FormRow>
          <FormRow label="Email login" hint="Email akun (tidak bisa diubah di sini)">
            <input className="input" value={data.email || ''} disabled/>
          </FormRow>
          <FormRow label="Email penagihan" hint="Untuk invoice & laporan">
            <input className="input" value={data.billingEmail || ''} onChange={e=>update('billingEmail', e.target.value)} placeholder="finance@bisnis.id"/>
          </FormRow>
          <FormRow label="No. WhatsApp" hint="Untuk notifikasi gudang">
            <input className="input" value={data.phone || ''} onChange={e=>update('phone', e.target.value)} placeholder="+62 812-3456-7890"/>
          </FormRow>
          <FormRow label="NPWP (opsional)" hint="Untuk faktur pajak">
            <input className="input" value={data.npwp || ''} onChange={e=>update('npwp', e.target.value)} placeholder="00.000.000.0-000.000"/>
          </FormRow>
          <FormRow label="Jenis bisnis">
            <select className="input" value={data.businessType || 'umkm'} onChange={e=>update('businessType', e.target.value)}>
              <option value="umkm">Perorangan / UMKM</option>
              <option value="cv">CV</option>
              <option value="pt">PT</option>
            </select>
          </FormRow>
          <FormRow label="Alamat" full>
            <textarea className="input" rows="2" value={data.businessAddress || ''} onChange={e=>update('businessAddress', e.target.value)} placeholder="Jl. Kenanga No. 12, Surabaya 60243"/>
          </FormRow>
          <FormRow label="Metode Valuasi Stok" hint="Pengaruhi cara hitung HPP saat ada inbound baru">
            <select className="input" value={data.valuationMethod || 'fixed'} onChange={e=>update('valuationMethod', e.target.value)}>
              <option value="fixed">Fixed COGS — pakai HPP yang di-set di SKU</option>
              <option value="wac">WAC (Weighted Average Cost) — recalc tiap inbound</option>
            </select>
          </FormRow>
          <FormRow label="Status PKP" hint="Pengusaha Kena Pajak — bisa terbitkan Faktur Pajak">
            <Toggle
              on={!!data.pkpStatus}
              onChange={v => update('pkpStatus', v)}
              label={data.pkpStatus ? 'Aktif sebagai PKP' : 'Belum PKP'}
              desc={data.pkpStatus ? 'Bisa terbitkan Faktur Pajak dengan PPN 11%' : 'Tombol Buat Faktur tetap aktif untuk B2B internal'}
            />
          </FormRow>
        </div>
      </SettingsCard>
    </>
  );
}

// ============== WAREHOUSE ==============
function WarehouseSection() {
  const wh = [
    { id:'sub', city:'Surabaya', addr:'Komplek Pergudangan Margomulyo Blok A-12', stock:'1.842 SKU', util:62, primary:true },
    { id:'dpk', city:'Depok',    addr:'Pergudangan Logistik Cilodong, Jl. Raya Bogor KM 32', stock:'1.124 SKU', util:48 },
    { id:'mdn', city:'Medan',    addr:'Kawasan Industri Medan Star, Tanjung Morawa', stock:'612 SKU',   util:31 },
  ];
  return (
    <>
      <SettingsCard
        title="Lokasi Gudang Anda"
        desc="Stok Anda tersebar di gudang Simantep berikut. Pilih gudang mana yang menerima kiriman baru di tab Penerimaan."
      >
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {wh.map(w => (
            <div key={w.id} style={{ padding:'16px 18px', border:'1px solid var(--border)', borderRadius:12, display:'grid', gridTemplateColumns:'auto 1fr auto', gap:16, alignItems:'center' }}>
              <div style={{ width:44, height:44, borderRadius:10, background:'var(--brand-50)', color:'var(--brand-600)', display:'grid', placeItems:'center' }}>
                <Icon.box/>
              </div>
              <div>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:2 }}>
                  <strong style={{ fontSize:15 }}>Gudang {w.city}</strong>
                  {w.primary && <span className="chip chip-brand"><span className="chip-dot"/>Utama</span>}
                </div>
                <div style={{ fontSize:13, color:'var(--ink-500)' }}>{w.addr}</div>
                <div style={{ display:'flex', gap:16, marginTop:8, fontSize:12, color:'var(--ink-700)' }}>
                  <span><strong>{w.stock}</strong> aktif</span>
                  <span style={{ display:'inline-flex', alignItems:'center', gap:6 }}>
                    Utilisasi:
                    <span style={{ width:80, height:6, borderRadius:3, background:'var(--surface-2)', overflow:'hidden', display:'inline-block' }}>
                      <span style={{ display:'block', height:'100%', width:`${w.util}%`, background:'var(--brand-500)' }}/>
                    </span>
                    <strong>{w.util}%</strong>
                  </span>
                </div>
              </div>
              <button className="btn btn-secondary btn-sm">Detail</button>
            </div>
          ))}
        </div>
      </SettingsCard>

      <SettingsCard
        title="Preferensi Penyebaran Stok"
        desc="Aturan otomatis bagaimana stok dialokasikan saat pesanan masuk."
      >
        <Toggle on={true} onChange={()=>{}} label="Pilih gudang terdekat ke pembeli" desc="Sistem otomatis pakai gudang dengan ongkir paling murah ke alamat pembeli."/>
        <Toggle on={true} onChange={()=>{}} label="Transfer stok antar gudang otomatis" desc="Jika stok di gudang asal habis, sistem cari di gudang lain & flag untuk dipindahkan."/>
        <Toggle on={false} onChange={()=>{}} label="Lock stok minimum per gudang" desc="Cegah satu gudang habis seluruhnya — sisakan minimum sebagai cadangan."/>
      </SettingsCard>
    </>
  );
}

// ============== TEAM ==============
function TeamSection() {
  const team = [
    { name:'Budi Santoso',  email:'budi@berkahjaya.id',   role:'Owner',         init:'BS', tone:'#ed3a1a' },
    { name:'Andini Pratiwi',email:'andini@berkahjaya.id', role:'Operasional',   init:'AP', tone:'#1f6fd9' },
    { name:'Rizky Maulana', email:'rizky@berkahjaya.id',  role:'Gudang',        init:'RM', tone:'#1c8e5a' },
    { name:'Siti Nurhaliza',email:'siti@berkahjaya.id',   role:'Customer Service',init:'SN', tone:'#c47a06' },
  ];
  return (
    <>
      <SettingsCard
        title="Anggota Tim"
        desc="Beri akses ke karyawan Anda dengan peran yang sesuai."
        footer={<><button className="btn btn-secondary">Kelola Peran</button><button className="btn btn-primary"><Icon.plus/> Undang Anggota</button></>}
      >
        <div className="card" style={{ overflow:'hidden', boxShadow:'none', border:'1px solid var(--border)' }}>
          <table className="table">
            <thead><tr><th>Anggota</th><th>Peran</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {team.map(m => (
                <tr key={m.email}>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                      <div style={{ width:34, height:34, borderRadius:'50%', background:m.tone, color:'white', display:'grid', placeItems:'center', fontWeight:700, fontSize:12 }}>{m.init}</div>
                      <div>
                        <div style={{ fontWeight:600, fontSize:13 }}>{m.name}</div>
                        <div style={{ fontSize:12, color:'var(--ink-500)' }}>{m.email}</div>
                      </div>
                    </div>
                  </td>
                  <td><span className="chip chip-blue"><span className="chip-dot"/>{m.role}</span></td>
                  <td><span className="chip chip-green"><span className="chip-dot"/>Aktif</span></td>
                  <td style={{ textAlign:'right' }}><button className="tb-icon-btn"><Icon.more/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </SettingsCard>
    </>
  );
}

// ============== CHANNELS ==============
function ChannelsSection() {
  const channels = [
    { mp:'shopee',    label:'Shopee',     stores:2, status:'connected' },
    { mp:'tokopedia', label:'Tokopedia',  stores:1, status:'connected' },
    { mp:'tiktok',    label:'TikTok Shop',stores:1, status:'connected' },
    { mp:'lazada',    label:'Lazada',     stores:1, status:'warning', warn:'Token kedaluwarsa 3 hari' },
    { mp:'blibli',    label:'Blibli',     stores:1, status:'syncing' },
  ];
  return (
    <>
      <SettingsCard
        title="Marketplace Terhubung"
        desc="Hubungkan toko Anda lewat OAuth resmi. Pesanan otomatis masuk Simantep."
        footer={<button className="btn btn-primary"><Icon.plus/> Tambah Channel</button>}
      >
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {channels.map(c => (
            <div key={c.mp} style={{ display:'grid', gridTemplateColumns:'auto 1fr auto auto', gap:14, alignItems:'center', padding:'12px 14px', border:'1px solid var(--border)', borderRadius:10 }}>
              <MP type={c.mp} showName={false}/>
              <div>
                <div style={{ fontWeight:600, fontSize:13.5 }}>{c.label}</div>
                <div style={{ fontSize:12, color:'var(--ink-500)' }}>{c.stores} toko terhubung</div>
              </div>
              {c.status === 'connected' && <span className="chip chip-green"><span className="chip-dot"/>Tersinkron</span>}
              {c.status === 'warning'   && <span className="chip chip-amber"><span className="chip-dot"/>{c.warn}</span>}
              {c.status === 'syncing'   && <span className="chip chip-blue"><span className="chip-dot"/>Sinkronisasi…</span>}
              <button className="btn btn-secondary btn-sm">Kelola</button>
            </div>
          ))}
        </div>
      </SettingsCard>

      <SettingsCard
        title="Input Manual"
        desc="Untuk pesanan dari WhatsApp, Instagram, reseller offline, atau channel non-marketplace."
      >
        <Toggle on={true} onChange={()=>{}} label="Aktifkan input pesanan manual" desc="Tombol 'Pesanan Manual' akan muncul di halaman Pesanan."/>
        <Toggle on={true} onChange={()=>{}} label="Auto-generate ID pesanan manual" desc="Format: SMP-MNL-XXXX (incrementing)."/>
      </SettingsCard>
    </>
  );
}

// ============== SHIPPING ==============
function ShippingSection() {
  const couriers = [
    { name:'JNE',           type:'REG / YES / OKE',  active:true },
    { name:'J&T Express',   type:'EZ / Cargo',        active:true },
    { name:'SiCepat',       type:'BEST / GOKIL',      active:true },
    { name:'Anteraja',      type:'Reguler / Sameday', active:true },
    { name:'Lion Parcel',   type:'Reguler / OnePack', active:false },
    { name:'Pos Indonesia', type:'Kilat Khusus',      active:false },
    { name:'GoSend',        type:'Instant / Sameday', active:true },
    { name:'GrabExpress',   type:'Instant',           active:true },
  ];
  return (
    <>
      <SettingsCard
        title="Kurir Aktif"
        desc="Kurir yang muncul saat tim packing pilih jasa kirim. Tarif diambil dari API resmi tiap kurir."
      >
        <div className="form-grid">
          {couriers.map(c => (
            <div key={c.name} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 14px', border:'1px solid var(--border)', borderRadius:10 }}>
              <div>
                <div style={{ fontWeight:600, fontSize:13.5 }}>{c.name}</div>
                <div style={{ fontSize:12, color:'var(--ink-500)' }}>{c.type}</div>
              </div>
              <Toggle on={c.active} onChange={()=>{}} label="" desc=""/>
            </div>
          ))}
        </div>
      </SettingsCard>

      <SettingsCard title="Aturan Default" desc="Pengaturan kirim yang dipakai jika pembeli tidak memilih spesifik.">
        <div className="form-grid">
          <FormRow label="Berat default per pesanan" hint="Jika SKU tidak punya berat tercatat">
            <input className="input" defaultValue="500" type="number"/>
          </FormRow>
          <FormRow label="Asuransi otomatis di atas" hint="Pesanan dengan nilai ini ke atas wajib pakai asuransi">
            <input className="input" defaultValue="500000" type="number"/>
          </FormRow>
        </div>
        <Toggle on={true} onChange={()=>{}} label="Cetak resi otomatis saat packing selesai" desc="Skip langkah 'cetak resi' di alur packing."/>
        <Toggle on={false} onChange={()=>{}} label="Pickup harian otomatis" desc="Sistem booking pickup kurir setiap jam 14:00 WIB."/>
      </SettingsCard>
    </>
  );
}

// ============== BILLING ==============
function BillingSection() {
  return (
    <>
      <SettingsCard title="Paket & Tarif" desc="Anda saat ini berada di paket Growth.">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14 }}>
          <div style={{ padding:'14px 16px', border:'1px solid var(--border)', borderRadius:10 }}>
            <div style={{ fontSize:12, color:'var(--ink-500)', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em' }}>Paket Aktif</div>
            <div style={{ fontSize:18, fontWeight:800, marginTop:4 }}>Growth</div>
            <div style={{ fontSize:13, color:'var(--ink-700)', marginTop:4 }}>Rp 1.500/packing</div>
          </div>
          <div style={{ padding:'14px 16px', border:'1px solid var(--border)', borderRadius:10 }}>
            <div style={{ fontSize:12, color:'var(--ink-500)', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em' }}>Pemakaian Bulan Ini</div>
            <div style={{ fontSize:18, fontWeight:800, marginTop:4 }}>1.842 packing</div>
            <div style={{ fontSize:13, color:'var(--ink-700)', marginTop:4 }}>= Rp 2.763.000</div>
          </div>
          <div style={{ padding:'14px 16px', border:'1px solid var(--border)', borderRadius:10 }}>
            <div style={{ fontSize:12, color:'var(--ink-500)', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em' }}>Tagihan Berikutnya</div>
            <div style={{ fontSize:18, fontWeight:800, marginTop:4 }}>1 Mei 2026</div>
            <div style={{ fontSize:13, color:'var(--ink-700)', marginTop:4 }}>Auto-debit BCA</div>
          </div>
        </div>
        <div style={{ marginTop:14, padding:'12px 14px', background:'var(--blue-bg)', borderRadius:10, fontSize:13, color:'var(--blue)', display:'flex', gap:10 }}>
          <Icon.zap/>
          <div>Tarif belum termasuk biaya material packing &amp; ongkir kurir. Lihat <a href="#" style={{ color:'inherit', fontWeight:700 }}>rincian biaya material</a>.</div>
        </div>
      </SettingsCard>

      <SettingsCard title="Metode Pembayaran" footer={<button className="btn btn-secondary"><Icon.plus/> Tambah Metode</button>}>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          <div style={{ display:'flex', alignItems:'center', gap:14, padding:'12px 14px', border:'1px solid var(--border)', borderRadius:10 }}>
            <div style={{ width:44, height:30, borderRadius:6, background:'#003d6b', color:'white', display:'grid', placeItems:'center', fontSize:11, fontWeight:700 }}>BCA</div>
            <div style={{ flex:1 }}>
              <div style={{ fontWeight:600, fontSize:13.5 }}>BCA Auto-debit</div>
              <div style={{ fontSize:12, color:'var(--ink-500)' }}>•••• 4521 · Budi Santoso</div>
            </div>
            <span className="chip chip-green"><span className="chip-dot"/>Default</span>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:14, padding:'12px 14px', border:'1px solid var(--border)', borderRadius:10 }}>
            <div style={{ width:44, height:30, borderRadius:6, background:'#1a73e8', color:'white', display:'grid', placeItems:'center', fontSize:11, fontWeight:700 }}>VA</div>
            <div style={{ flex:1 }}>
              <div style={{ fontWeight:600, fontSize:13.5 }}>Virtual Account Mandiri</div>
              <div style={{ fontSize:12, color:'var(--ink-500)' }}>8852 0000 0042 1184</div>
            </div>
            <button className="btn btn-secondary btn-sm">Atur Default</button>
          </div>
        </div>
      </SettingsCard>

      <SettingsCard title="Riwayat Tagihan">
        <div className="card" style={{ overflow:'hidden', boxShadow:'none', border:'1px solid var(--border)' }}>
          <table className="table">
            <thead><tr><th>Periode</th><th>Pemakaian</th><th style={{textAlign:'right'}}>Jumlah</th><th>Status</th><th></th></tr></thead>
            <tbody>
              <tr><td>Apr 2026</td><td>1.842 packing</td><td style={{textAlign:'right', fontWeight:600}}>Rp 2.763.000</td><td><span className="chip chip-amber"><span className="chip-dot"/>Berjalan</span></td><td/></tr>
              <tr><td>Mar 2026</td><td>2.104 packing</td><td style={{textAlign:'right', fontWeight:600}}>Rp 3.156.000</td><td><span className="chip chip-green"><span className="chip-dot"/>Lunas</span></td><td><button className="btn btn-secondary btn-sm"><Icon.download/> Invoice</button></td></tr>
              <tr><td>Feb 2026</td><td>1.668 packing</td><td style={{textAlign:'right', fontWeight:600}}>Rp 2.502.000</td><td><span className="chip chip-green"><span className="chip-dot"/>Lunas</span></td><td><button className="btn btn-secondary btn-sm"><Icon.download/> Invoice</button></td></tr>
              <tr><td>Jan 2026</td><td>1.412 packing</td><td style={{textAlign:'right', fontWeight:600}}>Rp 2.118.000</td><td><span className="chip chip-green"><span className="chip-dot"/>Lunas</span></td><td><button className="btn btn-secondary btn-sm"><Icon.download/> Invoice</button></td></tr>
            </tbody>
          </table>
        </div>
      </SettingsCard>
    </>
  );
}

// ============== NOTIFY ==============
function NotifySection() {
  return (
    <>
      <SettingsCard title="Notifikasi WhatsApp" desc="Pengingat penting langsung ke WA Anda.">
        <Toggle on={true} onChange={()=>{}} label="Pesanan baru dari marketplace" desc="Setiap pesanan masuk, kirim ringkasan ke WA."/>
        <Toggle on={true} onChange={()=>{}} label="Stok hampir habis" desc="Saat SKU di bawah ambang minimum."/>
        <Toggle on={true} onChange={()=>{}} label="Retur diterima di gudang" desc="Saat tim gudang scan retur yang masuk."/>
        <Toggle on={false} onChange={()=>{}} label="Ringkasan harian (jam 21:00)" desc="Total pesanan, omzet, retur hari itu."/>
        <Toggle on={true} onChange={()=>{}} label="Token marketplace akan kedaluwarsa" desc="3 hari sebelum token integrasi habis."/>
      </SettingsCard>

      <SettingsCard title="Notifikasi Email">
        <Toggle on={true} onChange={()=>{}} label="Invoice bulanan" desc="Tagihan dikirim setiap awal bulan."/>
        <Toggle on={true} onChange={()=>{}} label="Laporan mingguan" desc="Ringkasan penjualan & operasional gudang setiap Senin pagi."/>
        <Toggle on={false} onChange={()=>{}} label="Update produk Simantep" desc="Fitur baru, tips operasional, dan webinar."/>
      </SettingsCard>
    </>
  );
}

// ============== SECURITY ==============
function SecuritySection() {
  return (
    <>
      <SettingsCard title="Password" footer={<><button className="btn btn-secondary">Batal</button><button className="btn btn-primary">Ubah Password</button></>}>
        <div className="form-grid">
          <FormRow label="Password saat ini"><input className="input" type="password" defaultValue="dummypass"/></FormRow>
          <FormRow label="Password baru"><input className="input" type="password"/></FormRow>
          <FormRow label="Konfirmasi password baru"><input className="input" type="password"/></FormRow>
        </div>
      </SettingsCard>

      <SettingsCard title="Keamanan Akun">
        <Toggle on={true}  onChange={()=>{}} label="Verifikasi 2 langkah (OTP)" desc="Kirim kode ke WA setiap login dari perangkat baru."/>
        <Toggle on={true}  onChange={()=>{}} label="Notifikasi login mencurigakan" desc="Alert jika ada login dari lokasi/perangkat tidak biasa."/>
        <Toggle on={false} onChange={()=>{}} label="Auto-logout setelah idle 30 menit" desc="Untuk tim yang berbagi perangkat di gudang."/>
      </SettingsCard>

      <SettingsCard title="Sesi Aktif">
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {[
            { dev:'Chrome · MacBook Pro',  loc:'Surabaya · 192.168.1.4',  when:'Sekarang', current:true },
            { dev:'Safari · iPhone 15',    loc:'Surabaya · 4G',           when:'2 jam lalu' },
            { dev:'Chrome · Windows PC',   loc:'Depok · Gudang',          when:'Kemarin' },
          ].map((s,i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px', border:'1px solid var(--border)', borderRadius:10 }}>
              <div style={{ width:36, height:36, borderRadius:8, background:'var(--surface-2)', display:'grid', placeItems:'center', color:'var(--ink-700)' }}>
                <Icon.settings/>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13.5, fontWeight:600 }}>{s.dev} {s.current && <span className="chip chip-green" style={{ marginLeft:6 }}><span className="chip-dot"/>Sesi ini</span>}</div>
                <div style={{ fontSize:12, color:'var(--ink-500)' }}>{s.loc} · {s.when}</div>
              </div>
              {!s.current && <button className="btn btn-secondary btn-sm">Logout</button>}
            </div>
          ))}
        </div>
      </SettingsCard>

      <SettingsCard title="Zona Berbahaya">
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 16px', border:'1px solid var(--rose-bg)', background:'var(--rose-bg)', borderRadius:10 }}>
          <div>
            <div style={{ fontWeight:700, fontSize:14, color:'var(--rose)' }}>Hapus Akun</div>
            <div style={{ fontSize:12.5, color:'var(--ink-700)', marginTop:2 }}>Stok di gudang akan dikirim balik / disposal sesuai instruksi. Tindakan ini tidak bisa dibatalkan.</div>
          </div>
          <button className="btn btn-danger">Hapus Akun</button>
        </div>
      </SettingsCard>
    </>
  );
}

window.SettingsPage = SettingsPage;