// Cabang & Tim — back office untuk pemilik multi-cabang dan banyak kasir
const BRANCHES = [
  { id:'pusat', name:'Cabang Pusat — Bekasi', address:'Jl. Merdeka Barat No. 88', registers:2, active:2, staff:5, sales:3_240_000, status:'online' },
  { id:'kalimalang', name:'Cabang Kalimalang', address:'Jl. Raya Kalimalang No. 42', registers:1, active:1, staff:3, sales:2_180_000, status:'online' },
];
const TEAM = [
  { initials:'RW', name:'Rina Wahyuni', role:'Kasir', branch:'pusat', addOns:['Stok'], pin:'••••', last:'Aktif sekarang', tone:'success' },
  { initials:'AF', name:'Aldi Firmansyah', role:'Kasir', branch:'pusat', addOns:[], pin:'••••', last:'Aktif sekarang', tone:'success' },
  { initials:'BK', name:'Bambang Kurniawan', role:'Kepala Cabang', branch:'pusat', addOns:['Pembelian'], pin:'••••', last:'09.12 hari ini', tone:'neutral' },
  { initials:'DP', name:'Dewi Pratiwi', role:'Kasir', branch:'kalimalang', addOns:[], pin:'••••', last:'07.58 hari ini', tone:'neutral' },
  { initials:'AS', name:'Agus Setiawan', role:'Staf Stok & Gudang', branch:'pusat', addOns:[], pin:'••••', last:'08.44 hari ini', tone:'neutral' },
  { initials:'LW', name:'Lestari Wulandari', role:'Pembelian', branch:'all', addOns:['Stok'], pin:'••••', last:'08.15 hari ini', tone:'neutral' },
  { initials:'MP', name:'Maya Prameswari', role:'Keuangan', branch:'all', addOns:[], pin:'••••', last:'09.28 hari ini', tone:'neutral' },
  { initials:'SA', name:'Hj. Siti Aminah', role:'Pemilik', branch:'all', addOns:[], pin:'—', last:'Kemarin, 20.42', tone:'neutral' },
];

function Operasional() {
  const [selected, setSelected] = React.useState(null);
  const [setup, setSetup] = React.useState(null);
  // This is a portfolio-level owner surface: it intentionally stays cross-branch
  // even when another operational page is scoped to a single branch.
  const visibleBranches = BRANCHES;
  const team = TEAM;
  const activeRegisters = visibleBranches.reduce((sum, branch) => sum + branch.active, 0);
  const activeCashiers = team.filter(member => member.last === 'Aktif sekarang').length;

  return <div className="stack-6">
    <div className="grid-4">
      <Kpi label="Cabang Aktif" value={visibleBranches.length.toString()} hint="Semua cabang beroperasi" icon="storefront" tone="success" />
      <Kpi label="Kasir Aktif" value={activeCashiers.toString()} hint="Sedang memiliki shift terbuka" icon="users" tone="success" />
      <Kpi label="Terminal Online" value={`${activeRegisters}/${visibleBranches.reduce((sum, branch) => sum + branch.registers, 0)}`} hint="HP, tablet, atau kasir desktop" icon="qris" />
      <Kpi label="Butuh Persetujuan" value="2" hint="Refund dan koreksi stok" icon="alert" tone="warn" />
    </div>

    <Card><div className="card-pad">
      <SectionHead title="Cabang" hint="Setiap cabang dapat memiliki kasir, perangkat, stok, dan laporan sendiri" action={<Btn icon="plus" tone="primary" size="sm" onClick={() => setSetup('branch')}>Tambah Cabang</Btn>} />
      <div className="grid-2">
        {visibleBranches.map(branch => <button key={branch.id} className="branch-card" onClick={() => setSelected(branch)}>
          <div className="row between"><Pill tone="success" dot>Online</Pill><Icon name="chevronRight" size={16} className="icon" /></div>
          <div style={{fontSize:16, fontWeight:600, marginTop:12}}>{branch.name}</div>
          <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:3}}>{branch.address}</div>
          <div className="branch-card-metrics"><span><b>{branch.active}/{branch.registers}</b> terminal</span><span><b>{branch.staff}</b> staf</span><span><b>{rupiah(branch.sales, {sym:true, compact:true})}</b> hari ini</span></div>
        </button>)}
      </div>
    </div></Card>

    <div className="grid-2">
      <Card><div className="card-pad">
        <SectionHead title="Tim & Akses" hint="PIN kasir untuk jualan, izin terpisah untuk refund dan pengaturan" action={<Btn icon="plus" size="sm" onClick={() => setSetup('staff')}>Tambah Staf</Btn>} />
        <div className="team-list">{team.map(member => <div className="team-row" key={member.name}>
          <Avatar initials={member.initials} className="sm" /><div style={{flex:1,minWidth:0}}><div style={{fontSize:12.5,fontWeight:600}}>{member.name}</div><div style={{fontSize:11,color:'hsl(var(--muted-foreground))'}}>{member.role} · {member.branch === 'all' ? 'Semua cabang' : BRANCHES.find(b => b.id === member.branch)?.name.replace('Cabang ','')}{member.addOns.length ? ` · +${member.addOns.join(', ')}` : ''}</div></div>
          <Pill tone={member.tone} dot={member.tone === 'success'}>{member.last}</Pill>
        </div>)}</div>
      </div></Card>
      <Card><div className="card-pad">
        <SectionHead title="Perangkat Kasir" hint="Setiap perangkat dicatat agar transaksi tetap dapat ditelusuri" action={<Btn icon="plus" size="sm" onClick={() => setSetup('device')}>Daftarkan Perangkat</Btn>} />
        <div className="device-list">
          <DeviceRow name="Kasir HP · Rina" branch="Cabang Pusat" detail="Android · tersinkronisasi 09.15" state="Online" />
          <DeviceRow name="Meja Kasir 1" branch="Cabang Pusat" detail="Tablet · printer Bluetooth terhubung" state="Online" />
          <DeviceRow name="Kasir HP · Dewi" branch="Cabang Kalimalang" detail="Android · tersinkronisasi 08.43" state="Online" />
        </div>
      </div></Card>
    </div>

    <Card><div className="card-pad">
      <SectionHead title="Kontrol Pemilik" hint="Aksi berisiko selalu dicatat dan dapat memerlukan persetujuan" />
      <div className="grid-4">
        <div className="info-cell"><div className="info-label">Refund menunggu</div><div className="info-value">1 transaksi</div><div style={{fontSize:11,color:'hsl(var(--muted-foreground))',marginTop:4}}>Rp78.000 · Kasir HP Rina</div></div>
        <div className="info-cell"><div className="info-label">Koreksi stok</div><div className="info-value">1 permintaan</div><div style={{fontSize:11,color:'hsl(var(--muted-foreground))',marginTop:4}}>Beras 5kg · Cabang Pusat</div></div>
        <div className="info-cell"><div className="info-label">Hak akses</div><div className="info-value">Role-based</div><div style={{fontSize:11,color:'hsl(var(--muted-foreground))',marginTop:4}}>Kasir tidak dapat refund</div></div>
        <div className="info-cell"><div className="info-label">Audit log</div><div className="info-value">Aktif</div><div style={{fontSize:11,color:'hsl(var(--muted-foreground))',marginTop:4}}>Semua aksi tercatat</div></div>
      </div>
    </div></Card>
    {selected && <BranchDrawer branch={selected} onClose={() => setSelected(null)} />}
    {setup && <SetupDrawer type={setup} onClose={() => setSetup(null)} />}
  </div>;
}

function DeviceRow({ name, branch, detail, state }) { return <div className="device-row"><div className="device-mark"><Icon name="qris" size={17} /></div><div style={{flex:1}}><div style={{fontSize:12.5,fontWeight:600}}>{name}</div><div style={{fontSize:11,color:'hsl(var(--muted-foreground))'}}>{branch} · {detail}</div></div><Pill tone="success" dot>{state}</Pill></div>; }
function BranchDrawer({ branch, onClose }) { return <div className="drawer-backdrop" onMouseDown={onClose}><div className="drawer" onMouseDown={event => event.stopPropagation()}><div className="drawer-header"><div><Pill tone="success" dot>Cabang online</Pill><h3 style={{margin:'7px 0 0',fontSize:18}}>{branch.name}</h3><div style={{fontSize:12,color:'hsl(var(--muted-foreground))',marginTop:3}}>{branch.address}</div></div><button className="btn ghost sm" onClick={onClose}><Icon name="x" size={14} /></button></div><div className="drawer-body"><SectionHead title="Pengaturan cabang" hint="Kendali operasional khusus cabang ini" /><div className="stack-6"><div className="info-cell"><div className="info-label">Terminal kasir</div><div className="info-value">{branch.active}/{branch.registers} online</div><div style={{fontSize:11,color:'hsl(var(--muted-foreground))',marginTop:4}}>Perangkat dan printer dapat dikelola terpisah.</div></div><div className="info-cell"><div className="info-label">Staf cabang</div><div className="info-value">{branch.staff} orang</div><div style={{fontSize:11,color:'hsl(var(--muted-foreground))',marginTop:4}}>Persona utama dan akses tambahan diatur per staf.</div></div><div className="row gap-2"><Btn icon="edit">Edit Cabang</Btn><Btn icon="users">Kelola Tim</Btn></div></div></div></div></div>; }
function SetupDrawer({ type, onClose }) {
  const [staffRole, setStaffRole] = React.useState('kasir');
  const [staffAddOns, setStaffAddOns] = React.useState([]);
  const config = type === 'branch' ? { title:'Tambah cabang', label:'Nama cabang', placeholder:'Contoh: Cabang Jatiasih', secondary:'Alamat lengkap', action:'Simpan Cabang' } : type === 'staff' ? { title:'Tambah staf', label:'Nama lengkap', placeholder:'Nama kasir atau supervisor', secondary:'Nomor HP', action:'Kirim Undangan' } : { title:'Daftarkan perangkat', label:'Nama perangkat', placeholder:'Contoh: Kasir HP Rina', secondary:'Kode pendaftaran', action:'Buat Kode' };
  const toggleAddOn = id => setStaffAddOns(previous => previous.includes(id) ? previous.filter(item => item !== id) : [...previous, id]);
  return <div className="drawer-backdrop" onMouseDown={onClose}><div className="drawer" onMouseDown={event => event.stopPropagation()}>
    <div className="drawer-header"><div><Pill tone="accent">Penyiapan baru</Pill><h3>{config.title}</h3><div className="table-sub">Data ini dapat diubah lagi setelah disimpan.</div></div><button className="btn ghost sm" onClick={onClose}><Icon name="x" size={14} /></button></div>
    <div className="drawer-body stack-6">
      <label className="field"><span>{config.label}</span><input placeholder={config.placeholder} /></label>
      <label className="field"><span>{config.secondary}</span><input defaultValue={type === 'device' ? 'SR-PST-7421' : ''} /></label>
      {type === 'branch' && <><div className="form-grid"><label className="field"><span>Jam buka</span><input type="time" defaultValue="07:00" /></label><label className="field"><span>Jam tutup</span><input type="time" defaultValue="21:00" /></label></div><label className="field"><span>Stok awal</span><select><option>Salin master produk tanpa stok</option><option>Salin stok dari Cabang Pusat</option></select></label></>}
      {type === 'staff' && <>
        <label className="field"><span>Persona utama</span><select value={staffRole} onChange={event => setStaffRole(event.target.value)}><option value="kasir">Kasir</option><option value="manager">Kepala Cabang</option><option value="stock">Staf Stok & Gudang</option><option value="purchasing">Pembelian</option><option value="finance">Keuangan</option><option value="owner">Pemilik</option></select></label>
        <label className="field"><span>Akses cabang</span><select disabled={staffRole === 'owner'}><option>Cabang Pusat — Bekasi</option><option>Cabang Kalimalang</option>{['purchasing','finance','owner'].includes(staffRole) && <option>Semua cabang</option>}</select></label>
        {staffRole !== 'owner' && <div><div className="field-title">Akses tambahan</div><div className="access-addon-grid">{Object.values(ADD_ONS).filter(item => item.id !== staffRole).map(item => <button key={item.id} className={staffAddOns.includes(item.id) ? 'access-addon selected' : 'access-addon'} onClick={() => toggleAddOn(item.id)}><Icon name={staffAddOns.includes(item.id) ? 'checkCircle' : 'plus'} size={15} /><span><b>{item.label}</b><small>{item.id === 'finance' ? 'Rekonsiliasi & laporan' : item.id === 'purchasing' ? 'PO & pemasok' : 'Penerimaan & opname'}</small></span></button>)}</div></div>}
        <div className="permission-summary"><Icon name="shieldOff" size={16} /><div><b>{roleDefinition(staffRole).title}</b><span>Beranda: {PAGE_TITLES[roleDefinition(staffRole).home]?.t}. Modul lain hanya muncul bila termasuk tanggung jawab atau akses tambahan.</span></div></div>
      </>}
      {type === 'device' && <div className="notice-box"><Icon name="qris" size={16} /><div><b>Masukkan kode di perangkat kasir</b><span>Kode berlaku 30 menit dan hanya bisa dipakai sekali.</span></div></div>}
    </div>
    <div className="drawer-footer"><Btn onClick={onClose}>Batal</Btn><Btn tone="primary" icon="check" onClick={onClose}>{config.action}</Btn></div>
  </div></div>;
}
Object.assign(window, { Operasional });