// KDS Dapur — kitchen display (mirrors KDS Bar but for kitchen station)
const { useState: useStateKD } = React;

function KdsDapurPage({ pushToast }) {
  const [filter, setFilter] = useStateKD('all');

  const tickets = ORDERS
    .map(o => ({
      ...o,
      items: o.items.filter(it => it.station === 'kitchen' && it.status !== 'served'),
    }))
    .filter(o => o.items.length > 0);

  const filtered = filter === 'all' ? tickets : tickets.map(o => ({
    ...o,
    items: o.items.filter(it => it.status === filter),
  })).filter(o => o.items.length > 0);

  const counts = {
    queued: tickets.flatMap(o => o.items).filter(it => it.status === 'queued').length,
    'in-progress': tickets.flatMap(o => o.items).filter(it => it.status === 'in-progress').length,
    ready: tickets.flatMap(o => o.items).filter(it => it.status === 'ready').length,
  };
  const total = counts.queued + counts['in-progress'] + counts.ready;

  return (
    <>
      <PageHeader
        eyebrow={`Dapur · ${ROLES.dapur.name} · ${SHIFT}`}
        title="KDS Dapur"
        subtitle="Antrian makanan untuk station dapur. Prioritas: SLA per item 12 menit (main), 8 menit (snack/dessert)."
        actions={<>
          <Btn icon="bell" onClick={() => pushToast({msg:'Server dipanggil', type:'success'})}>Panggil Server</Btn>
          <Btn icon="settings">Pengaturan</Btn>
        </>}
      />

      <div className="grid-4 mb-4">
        <Kpi label="Total Antrian" value={total + ' item'} icon="utensils" tone="accent" />
        <Kpi label="Queued" value={counts.queued} icon="clock" tone="muted" />
        <Kpi label="In-Progress" value={counts['in-progress']} icon="play" tone="warn" />
        <Kpi label="Ready" value={counts.ready} icon="check" tone="success"
             hint={counts.ready > 0 ? 'Perlu diantar' : undefined} />
      </div>

      <div className="filter-bar">
        <button className={'menu-cat-tab' + (filter==='all'?' active':'')} onClick={()=>setFilter('all')}>Semua <span style={{opacity:0.6}}>{total}</span></button>
        <button className={'menu-cat-tab' + (filter==='queued'?' active':'')} onClick={()=>setFilter('queued')}>Queued <span style={{opacity:0.6}}>{counts.queued}</span></button>
        <button className={'menu-cat-tab' + (filter==='in-progress'?' active':'')} onClick={()=>setFilter('in-progress')}>In-Progress <span style={{opacity:0.6}}>{counts['in-progress']}</span></button>
        <button className={'menu-cat-tab' + (filter==='ready'?' active':'')} onClick={()=>setFilter('ready')}>Ready <span style={{opacity:0.6}}>{counts.ready}</span></button>
        <span className="muted text-sm" style={{marginLeft:'auto'}}>SLA: Main 12 min · Snack/Dessert 8 min</span>
      </div>

      {filtered.length === 0 && (
        <Card><div className="card-body"><div className="empty">Tidak ada item di antrian. Dapur idle.</div></div></Card>
      )}

      <div className="kds-grid">
        {filtered.map(o => <KdsCard key={o.id} order={o} pushToast={pushToast} />)}
      </div>
    </>
  );
}

window.KdsDapurPage = KdsDapurPage;