// KDS Bar — barista display
const { useState: useStateKB } = React;

function KdsBarPage({ pushToast }) {
  const [filter, setFilter] = useStateKB('all'); // all | queued | in-progress | ready

  // Build per-order tickets for items at the bar station
  const tickets = ORDERS
    .map(o => ({
      ...o,
      items: o.items.filter(it => it.station === 'bar' && 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={`Barista · ${ROLES.barista.name} · ${SHIFT}`}
        title="KDS Bar"
        subtitle="Antrian minuman & dessert untuk station bar. Tap kartu untuk update status: queued → in-progress → ready → served."
        actions={<>
          <Btn icon="bell" onClick={() => pushToast({msg:'Panggil kasir untuk antar', type:'success'})}>Panggil Server</Btn>
          <Btn icon="settings">Pengaturan</Btn>
        </>}
      />

      <div className="grid-4 mb-4">
        <Kpi label="Total Antrian" value={total + ' item'} icon="coffee" 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'}}>Auto-refresh tiap 5 detik</span>
      </div>

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

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

function KdsCard({ order, pushToast }) {
  const allReady = order.items.every(it => it.status === 'ready');
  const hasUrgent = order.items.some(it => {
    if (it.status !== 'in-progress' || !it.startedAt) return false;
    return minutesSince(it.startedAt) > 8;
  });

  const cls = allReady ? 'ready' : hasUrgent ? 'urgent' : '';

  return (
    <div className={'kds-card ' + cls}>
      <div className="kds-card-header">
        <div>
          <div className="kds-card-table">{order.table}</div>
          <div className="kds-card-meta">{order.id.split('-').pop()} · {order.guests} tamu · {order.kasir.split(' ')[0]}</div>
        </div>
        <ElapsedPill since={order.opened} urgentAfter={15} />
      </div>

      <div className="kds-card-items">
        {order.items.map((it, i) => {
          const m = MENU_BY_SKU[it.sku];
          const elapsed = it.startedAt ? minutesSince(it.startedAt) : null;
          return (
            <div key={i} className={'kds-item status-' + it.status}>
              <div className="kds-item-qty">{it.qty}×</div>
              <div style={{minWidth:0, flex:1}}>
                <div className="kds-item-name">{m?.name || it.sku}</div>
                {it.notes && <div className="kds-item-note">📝 {it.notes}</div>}
                {it.status === 'in-progress' && elapsed != null && (
                  <div className="kds-item-meta">Started {it.startedAt} · {fmtMin(elapsed)}</div>
                )}
                {it.status === 'ready' && it.readyAt && (
                  <div className="kds-item-meta">Ready since {it.readyAt}</div>
                )}
              </div>
              <div className="kds-item-actions">
                {it.status === 'queued' && (
                  <button className="btn primary sm" onClick={() => pushToast({msg:`${m?.name} → in-progress`, type:'success'})}>
                    <Icon name="play" size={12}/> Start
                  </button>
                )}
                {it.status === 'in-progress' && (
                  <button className="btn primary sm" onClick={() => pushToast({msg:`${m?.name} → ready`, type:'success'})}>
                    <Icon name="check" size={12}/> Ready
                  </button>
                )}
                {it.status === 'ready' && (
                  <button className="btn ghost sm" onClick={() => pushToast({msg:`${m?.name} → served`})}>
                    <Icon name="check" size={12}/> Served
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {allReady && (
        <div className="kds-card-footer">
          <Btn tone="primary" size="sm" icon="bell" onClick={() => pushToast({msg:`Server dipanggil untuk ${order.table}`, type:'success'})}>
            Panggil Server — Semua Siap
          </Btn>
        </div>
      )}
    </div>
  );
}

window.KdsBarPage = KdsBarPage;
window.KdsCard = KdsCard;