// Booking page — Bengkel Mitra Sejahtera (signature: weekly slot calendar)
const { useState: useStateBk, Fragment: FragmentBk } = React;

function BookingPage({ role }) {
  const [view, setView] = useStateBk('list');
  const [cabang, setCabang] = useStateBk('all');

  const filtered = BOOKING_SERVIS.filter(b => cabang === 'all' || b.cabang === cabang);
  const byDate = {};
  filtered.forEach(b => { (byDate[b.tgl] ||= []).push(b); });
  const dates = Object.keys(byDate).sort();

  // Mekanik schedule view — 6 mechanic columns × time rows
  const slots = ['08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00'];

  return (
    <div>
      <PageHeader
        eyebrow="Operasional"
        title="Booking Servis"
        subtitle={`${BOOKING_SERVIS.length} booking aktif minggu ini · ${BOOKING_SERVIS.filter(b=>b.status==='pending').length} pending menunggu konfirmasi`}
        actions={
          <FragmentBk>
            <Btn icon="calendar" tone="outline">Sync Google Cal</Btn>
            <Btn icon="plus">Booking Baru</Btn>
          </FragmentBk>
        }
      />

      <div className="grid mb-6" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:12}}>
        <Kpi label="Hari Ini" value={BOOKING_SERVIS.filter(b => b.tgl === TODAY).length} hint="7 slot terisi" icon="calendar" tone="info" />
        <Kpi label="Minggu Ini" value={KPI.bookingMingguIni} hint="kapasitas: 35 slot" icon="calendar" tone="info" progress={Math.round((KPI.bookingMingguIni/35)*100)} />
        <Kpi label="Pending" value={BOOKING_SERVIS.filter(b => b.status === 'pending').length} hint="menunggu konfirmasi mekanik" icon="clock" tone="warn" />
        <Kpi label="Channel Mix" value="App 50%" hint="Web 25% · WA 25%" icon="phone" tone="accent" />
      </div>

      <Card style={{padding:14, marginBottom:12}}>
        <div className="row gap-2" style={{alignItems:'center', flexWrap:'wrap'}}>
          <div className="row gap-1" style={{background:'hsl(var(--muted))', borderRadius:8, padding:3}}>
            {[{id:'list',l:'Daftar'},{id:'slot',l:'Slot Mekanik'}].map(v => (
              <button key={v.id} onClick={() => setView(v.id)}
                style={{padding:'6px 12px', fontSize:13, fontWeight:600, borderRadius:6,
                  background: view === v.id ? 'hsl(var(--card))' : 'transparent',
                  border:'none', cursor:'pointer'}}>{v.l}</button>
            ))}
          </div>
          <select value={cabang} onChange={e => setCabang(e.target.value)} style={{padding:'7px 10px', border:'1px solid hsl(var(--border))', borderRadius:8, fontSize:13, background:'hsl(var(--card))'}}>
            <option value="all">Semua cabang</option>
            {CABANG.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>
      </Card>

      {view === 'list' ? (
        <div className="flex-col gap-3">
          {dates.map(d => (
            <Card key={d} style={{padding:0, overflow:'hidden'}}>
              <div style={{padding:'10px 14px', background:'hsl(var(--muted) / 0.4)', borderBottom:'1px solid hsl(var(--border))', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <div>
                  <div style={{fontSize:14, fontWeight:650, fontFamily:'Fraunces, Georgia, serif'}}>{formatDateID(d)}</div>
                  <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{byDate[d].length} booking</div>
                </div>
                {d === TODAY && <Pill tone="accent" dot>Hari ini</Pill>}
              </div>
              <table className="table">
                <thead>
                  <tr><th style={{width:60}}>Jam</th><th>Kendaraan</th><th>Owner</th><th>Item</th><th style={{width:100}}>Mekanik</th><th style={{width:100}}>Channel</th><th style={{width:110}}>Estimasi</th><th style={{width:120}}>Status</th></tr>
                </thead>
                <tbody>
                  {byDate[d].sort((a,b) => a.jam.localeCompare(b.jam)).map(bk => {
                    const vh = KENDARAAN_BY_ID[bk.vhId];
                    const ow = OWNER_BY_ID[bk.ownerId];
                    const mk = MEKANIK_BY_ID[bk.mekanikId];
                    return (
                      <tr key={bk.id}>
                        <td className="mono" style={{fontWeight:600}}>{bk.jam}</td>
                        <td><div style={{fontWeight:600}}>{vh.merk} {vh.model}</div><div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{vh.plat}</div></td>
                        <td>{ow?.name}</td>
                        <td>
                          <div className="row gap-1" style={{flexWrap:'wrap'}}>
                            {bk.items.slice(0,2).map(id => <span key={id} className="svc-item-chip">{ITEM_SERVIS_BY_ID[id]?.label}</span>)}
                            {bk.items.length > 2 && <span style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>+{bk.items.length - 2}</span>}
                          </div>
                        </td>
                        <td><div className="row gap-1" style={{alignItems:'center'}}><Avatar initials={mk?.initials} className="sm" tone="accent" /><span style={{fontSize:12}}>{mk?.name.split(' ')[0]}</span></div></td>
                        <td><Pill tone="accent">{channelLabel(bk.channel)}</Pill></td>
                        <td className="mono" style={{fontVariantNumeric:'tabular-nums'}}>{rupiah(bk.estTotal, {compact:true})}</td>
                        <td><StatusPill status={bk.status} /></td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </Card>
          ))}
        </div>
      ) : (
        <Card style={{padding:0, overflow:'hidden'}}>
          <div style={{padding:'10px 14px', borderBottom:'1px solid hsl(var(--border))'}}>
            <div style={{fontSize:14, fontWeight:650}}>Jadwal {formatDateID(TODAY)}</div>
            <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>6 mekanik · slot 60 menit</div>
          </div>
          <div className="bk-cal-grid" style={{borderRadius:0, border:'none', gridTemplateColumns: `80px repeat(${MEKANIK.length}, 1fr)`}}>
            <div className="bk-cal-cell head">Jam</div>
            {MEKANIK.map(m => (
              <div key={m.id} className="bk-cal-cell head">
                <div style={{fontSize:12}}>{m.name.split(' ')[0]}</div>
                <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', fontWeight:400}}>{m.spec.split(' ')[0]}</div>
              </div>
            ))}
            {slots.map(t => (
              <FragmentBk key={t}>
                <div className="bk-cal-cell time">{t}</div>
                {MEKANIK.map(m => {
                  const bk = BOOKING_SERVIS.find(b => b.tgl === TODAY && b.mekanikId === m.id && b.jam === t);
                  return (
                    <div key={m.id + t} className="bk-cal-cell">
                      {bk && (
                        <div className={'bk-cal-slot ' + (bk.status === 'in_progress' ? 'pending' : bk.status === 'done' ? 'done' : '')}>
                          <div style={{fontWeight:650}}>{KENDARAAN_BY_ID[bk.vhId]?.plat}</div>
                          <div style={{opacity:0.85}}>{ITEM_SERVIS_BY_ID[bk.items[0]]?.label?.split(' ').slice(0,2).join(' ')}</div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </FragmentBk>
            ))}
          </div>
        </Card>
      )}
    </div>
  );
}

window.BookingPage = BookingPage;