// Store settings — branch defaults, payment rails, receipts, devices, tax, and offline sync
function Pengaturan({ cabang, pushToast }) {
  const [section, setSection] = React.useState('operasional');
  const [settings, setSettings] = React.useState({ qris:true, cash:true, debit:true, transfer:false, tax:false, autoPrint:true, offline:true, stockWarning:true, anomalyEscalation:true, separation:true });
  const set = key => setSettings(previous => ({...previous,[key]:!previous[key]}));
  const save = () => pushToast({msg:'Pengaturan toko berhasil disimpan'});
  const menus = [['operasional','storefront','Operasional'],['akses','users','Akses & Persetujuan'],['pembayaran','bank','Pembayaran'],['struk','receipt','Pajak & Struk'],['perangkat','print','Printer & Perangkat'],['sinkron','rotate','Offline & Sinkronisasi']];
  return <div className="settings-layout">
    <Card><div className="settings-nav"><div className="settings-nav-head"><b>Pengaturan</b><span>{cabang === 'all' ? 'Semua cabang' : CABANG_LIST.find(item => item.id === cabang)?.name}</span></div>{menus.map(([id,icon,label]) => <button key={id} className={section === id ? 'active' : ''} onClick={() => setSection(id)}><Icon name={icon} size={15} /><span>{label}</span><Icon name="chevronRight" size={13} /></button>)}</div></Card>
    <Card><div className="settings-content">
      {section === 'operasional' && <SettingsSection title="Operasional cabang" hint="Identitas, jam buka, dan aturan dasar penjualan"><div className="form-grid"><label className="field"><span>Nama cabang</span><input defaultValue="Cabang Pusat — Bekasi" /></label><label className="field"><span>Kode cabang</span><input defaultValue="PST-BKS" /></label><label className="field"><span>Jam buka</span><input type="time" defaultValue="06:30" /></label><label className="field"><span>Jam tutup</span><input type="time" defaultValue="22:00" /></label></div><label className="field"><span>Alamat struk</span><textarea rows="3" defaultValue="Jl. Merdeka Barat No. 88, Bekasi" /></label><SettingToggle label="Peringatan stok minimum saat jualan" hint="Kasir mendapat peringatan, tetapi transaksi tidak diblokir." value={settings.stockWarning} onChange={() => set('stockWarning')} /></SettingsSection>}
      {section === 'akses' && <SettingsSection title="Akses & persetujuan" hint="Batas tindakan sensitif dapat dibedakan per cabang"><div className="approval-policy-grid"><label className="field"><span>Refund rutin oleh Kepala Cabang</span><input defaultValue="Rp 100.000" /></label><label className="field"><span>Koreksi stok oleh Kepala Cabang</span><input defaultValue="Rp 100.000" /></label><label className="field"><span>Persetujuan PO oleh Kepala Cabang</span><input defaultValue="Rp 5.000.000" /></label><label className="field"><span>Persetujuan di atas batas</span><select><option>Pemilik</option></select></label></div><SettingToggle label="Eskalasi pola tidak biasa" hint="Refund, koreksi, atau PO yang ditandai berisiko selalu masuk ke Pemilik walau nilainya di bawah batas." value={settings.anomalyEscalation} onChange={() => set('anomalyEscalation')} /><SettingToggle label="Pemisahan tugas keuangan" hint="Pembuat invoice atau pengeluaran tidak dapat menyetujui pembayarannya sendiri." value={settings.separation} onChange={() => set('separation')} /><div className="notice-box"><Icon name="shieldOff" size={16} /><div><b>Add-on tidak pernah memberi akses Pemilik</b><span>Stok, Pembelian, dan Keuangan dapat ditambahkan ke staf. Pengaturan global, audit penuh, dan persetujuan akhir tetap khusus Pemilik.</span></div></div></SettingsSection>}
      {section === 'pembayaran' && <SettingsSection title="Metode pembayaran" hint="Pilih metode yang muncul di HP, tablet, dan terminal desktop"><SettingToggle label="Tunai" hint="Kas masuk ke rekonsiliasi shift." value={settings.cash} onChange={() => set('cash')} /><SettingToggle label="QRIS Dinamis" hint="Nominal dibuat otomatis untuk mengurangi salah input." value={settings.qris} onChange={() => set('qris')} badge="Terverifikasi" /><SettingToggle label="Kartu debit" hint="Kasir mencatat nomor referensi EDC." value={settings.debit} onChange={() => set('debit')} /><SettingToggle label="Transfer bank" hint="Perlu verifikasi manual sebelum transaksi selesai." value={settings.transfer} onChange={() => set('transfer')} /><div className="notice-box"><Icon name="shieldOff" size={16} /><div><b>Rekonsiliasi tetap per shift</b><span>Perubahan metode bayar setelah transaksi memerlukan persetujuan Kepala Cabang.</span></div></div></SettingsSection>}
      {section === 'struk' && <SettingsSection title="Pajak & struk" hint="Atur tampilan struk digital dan cetak"><SettingToggle label="Aktifkan pajak" hint="Pajak belum diterapkan pada harga jual." value={settings.tax} onChange={() => set('tax')} /><div className="form-grid"><label className="field"><span>Nama pajak</span><input defaultValue="PPN" disabled={!settings.tax} /></label><label className="field"><span>Tarif</span><input defaultValue="11%" disabled={!settings.tax} /></label></div><label className="field"><span>Catatan kaki struk</span><textarea rows="3" defaultValue="Terima kasih sudah berbelanja. Barang yang sudah dibeli dapat ditukar maksimal 1 hari dengan struk." /></label><SettingToggle label="Cetak otomatis setelah pembayaran" hint="Berlaku jika printer aktif tersedia." value={settings.autoPrint} onChange={() => set('autoPrint')} /></SettingsSection>}
      {section === 'perangkat' && <SettingsSection title="Printer & perangkat kasir" hint="Perangkat didaftarkan agar transaksi dan audit dapat ditelusuri"><div className="device-settings"><DeviceSetting name="Printer Bluetooth Pusat" detail="Thermal 58mm · Meja Kasir 1" state="Terhubung" onTest={() => pushToast({msg:'Struk uji dikirim ke Printer Bluetooth Pusat'})} /><DeviceSetting name="Kasir HP · Rina" detail="Android · aplikasi 2.4.1" state="Online" /><DeviceSetting name="Kasir HP · Aldi" detail="Android · terakhir sinkron 08.58" state="Online" /><DeviceSetting name="Printer Kalimalang" detail="Thermal 58mm · tidak terjangkau" state="Offline" /></div><Btn icon="plus" onClick={() => pushToast({msg:'Kode pendaftaran perangkat dibuat'})}>Daftarkan Perangkat</Btn></SettingsSection>}
      {section === 'sinkron' && <SettingsSection title="Offline & sinkronisasi" hint="POS tetap dapat menjual saat internet putus, lalu mengirim data ketika kembali online"><SettingToggle label="Izinkan transaksi offline" hint="Data disimpan terenkripsi di perangkat terdaftar." value={settings.offline} onChange={() => set('offline')} /><div className="sync-health"><div><Icon name="checkCircle" size={18} /><div><b>Semua cabang tersinkron</b><span>Terakhir diperiksa 09.28 · 0 transaksi tertunda</span></div></div><Pill tone="success" dot>Sehat</Pill></div><div className="grid-2"><div className="info-cell"><div className="info-label">Batas data offline</div><div className="info-value">7 hari</div><span className="table-sub">Setelah itu perangkat harus online.</span></div><div className="info-cell"><div className="info-label">Konflik stok</div><div className="info-value">Tandai & tinjau</div><span className="table-sub">Tidak menimpa perubahan diam-diam.</span></div></div><Btn icon="rotate" onClick={() => pushToast({msg:'Pemeriksaan sinkronisasi selesai — tidak ada masalah'})}>Periksa Sekarang</Btn></SettingsSection>}
      <div className="settings-footer"><span>Perubahan dicatat ke audit log dan berlaku pada perangkat setelah sinkron.</span><Btn tone="primary" icon="check" onClick={save}>Simpan Perubahan</Btn></div>
    </div></Card>
  </div>;
}
function SettingsSection({ title, hint, children }) { return <section><div className="settings-title"><h2>{title}</h2><p>{hint}</p></div><div className="settings-body">{children}</div></section>; }
function SettingToggle({ label, hint, value, onChange, badge }) { return <div className="setting-toggle"><div><div className="row gap-2"><b>{label}</b>{badge && <Pill tone="success">{badge}</Pill>}</div><span>{hint}</span></div><button className={'toggle '+(value ? 'on' : '')} onClick={onChange} aria-label={label} aria-pressed={value}><i /></button></div>; }
function DeviceSetting({ name, detail, state, onTest }) { return <div className="device-setting"><span><Icon name="print" size={16} /></span><div><b>{name}</b><small>{detail}</small></div><Pill tone={state === 'Online' || state === 'Terhubung' ? 'success' : 'danger'} dot>{state}</Pill>{onTest && <Btn size="sm" onClick={onTest}>Tes Cetak</Btn>}</div>; }
Object.assign(window, { Pengaturan });