// Dashboard — operational snapshot
const { useState: useStateD, useMemo: useMemoD } = React;

function Dashboard({ pushToast, setPage }) {
  const occupiedTables = TABLES.filter(t => t.status === 'occupied').length;
  const totalTables = TABLES.length;
  const occupancyPct = Math.round((occupiedTables / totalTables) * 100);

  const itemsInProgress = ORDERS.flatMap(o => o.items).filter(it => it.status === 'queued' || it.status === 'in-progress').length;
  const itemsReady = ORDERS.flatMap(o => o.items).filter(it => it.status === 'ready').length;

  const ordersOpen = ORDERS.filter(o => o.status !== 'served').length;
  const ordersServed = ORDERS.filter(o => o.status === 'served').length;

  const lowBahan = BAHAN.filter(b => b.stock < b.par);

  const todayRev = HOURLY_TODAY.reduce((s, h) => s + h.revenue, 0);
  const yest = DAILY_REVENUE[DAILY_REVENUE.length - 2];
  const peakHour = [...HOURLY_TODAY].sort((a,b) => b.revenue - a.revenue)[0];
  const maxHourly = Math.max(...HOURLY_TODAY.map(h => h.revenue));
  const maxDaily = Math.max(...DAILY_REVENUE.map(d => d.total));

  const activeOrders = ORDERS.filter(o => o.status !== 'served' && o.status !== 'paid');

  return (
    <>
      <PageHeader
        eyebrow={`${TENANT.name} · ${formatDateID(TODAY)}`}
        title="Dashboard Outlet"
        subtitle={`Shift ${SHIFT}. Snapshot real-time penjualan, antrian dapur/bar, status meja, dan stok bahan baku.`}
        actions={<>
          <Btn icon="refresh" onClick={() => pushToast({msg:'Data di-refresh', type:'success'})}>Refresh</Btn>
          <Btn tone="primary" icon="plus" onClick={() => setPage('order')}>Order Baru</Btn>
        </>}
      />

      {/* KPI grid */}
      <div className="grid-4 mb-6">
        <Kpi label="Penjualan Hari Ini" value={rupiah(todayRev, {sym:true, compact:false})}
             icon="trending" tone="success"
             sub={`vs kemarin ${rupiah(yest.total, {sym:true, compact:true})}`} />
        <Kpi label="Order Aktif" value={ordersOpen + ' order'}
             icon="receipt" tone="warn"
             hint={`${ordersServed} sudah served, menunggu bayar`} />
        <Kpi label="Okupansi Meja" value={`${occupiedTables}/${totalTables}`}
             icon="map" tone="success" progress={occupancyPct}
             hint={`${occupancyPct}% — ${TABLES.filter(t=>t.status==='reserved').length} reserved`} />
        <Kpi label="Item di Antrian" value={itemsInProgress}
             icon="chefHat" tone={itemsInProgress > 6 ? 'warn' : 'success'}
             hint={`${itemsReady} siap antar`} />
      </div>

      {/* Hourly + Top items */}
      <div className="grid-2 mb-6" style={{gridTemplateColumns:'1.6fr 1fr'}}>
        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Penjualan per Jam — Hari Ini</h3>
              <p className="card-desc">Peak: jam {peakHour.hour}:00 ({rupiah(peakHour.revenue, {sym:true, compact:true})}). Outlet buka 08:00–22:00.</p>
            </div>
            <div className="row gap-2">
              <span className="badge accent">Total: {rupiah(todayRev, {sym:true, compact:true})}</span>
            </div>
          </div>
          <div className="card-body">
            <div className="hourly-chart">
              {HOURLY_TODAY.map(h => {
                const heightPct = maxHourly > 0 ? (h.revenue / maxHourly) * 100 : 0;
                const cls = h.revenue === 0 ? 'empty' : h.revenue === maxHourly ? 'peak' : '';
                return (
                  <div key={h.hour} className="hourly-bar" title={`${h.hour}:00 — ${rupiah(h.revenue, {sym:true})} · ${h.orders} order`}>
                    <div className={'hourly-bar-fill ' + cls} style={{height: Math.max(heightPct, 1) + '%'}} />
                    <div className="hourly-bar-label">{h.hour}</div>
                  </div>
                );
              })}
            </div>
            <div className="row between mt-4" style={{fontSize:12, color:'hsl(var(--muted-foreground))'}}>
              <span>08:00</span>
              <span>Sekarang: <b className="mono">{NOW_HHMM}</b> · {HOURLY_TODAY.find(h => h.hour === NOW_HHMM.slice(0,2))?.orders || 0} order jam ini</span>
              <span>22:00</span>
            </div>
          </div>
        </Card>

        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Best Sellers (7 hari)</h3>
              <p className="card-desc">Item paling laris minggu ini</p>
            </div>
          </div>
          <div className="card-body flush">
            <div className="leaderboard">
              {TOP_ITEMS.slice(0, 6).map((row, i) => {
                const item = MENU_BY_SKU[row.sku];
                const maxSold = TOP_ITEMS[0].sold;
                const rankCls = i === 0 ? 'gold' : i === 1 ? 'silver' : i === 2 ? 'bronze' : '';
                return (
                  <div key={row.sku} className="leaderboard-row">
                    <div className={'leaderboard-rank ' + rankCls}>{i+1}</div>
                    <div style={{minWidth:0}}>
                      <div style={{fontSize:13.5, fontWeight:500}}>{item?.name || row.sku}</div>
                      <div className="leaderboard-bar mt-2"><div style={{width: (row.sold/maxSold*100) + '%'}} /></div>
                    </div>
                    <div className="num mono" style={{fontSize:12.5}}>{row.sold}</div>
                    <div className="num" style={{fontSize:12.5, color:'hsl(var(--muted-foreground))'}}>{rupiah(row.revenue, {compact:true})}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </Card>
      </div>

      {/* Active orders + Activity */}
      <div className="grid-2 mb-6" style={{gridTemplateColumns:'1.4fr 1fr'}}>
        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Order Aktif ({activeOrders.length})</h3>
              <p className="card-desc">Klik untuk membuka detail order</p>
            </div>
            <Btn size="sm" icon="arrowRight" onClick={() => setPage('order')}>Lihat semua</Btn>
          </div>
          <div className="card-body">
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              {activeOrders.slice(0, 5).map(o => (
                <OrderTicket key={o.id} order={o} onClick={() => setPage('order')} />
              ))}
            </div>
          </div>
        </Card>

        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Aktivitas</h3>
              <p className="card-desc">Event terbaru di outlet</p>
            </div>
          </div>
          <div className="card-body">
            <div className="timeline">
              {ACTIVITY.map(a => (
                <div key={a.id} className="timeline-item">
                  <div className="timeline-time">{a.time}</div>
                  <div className={'timeline-marker' + (a.urgent ? ' urgent' : '')} />
                  <div>
                    <div className="timeline-text">{a.text}</div>
                    <div className="timeline-who">{a.who}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>

      {/* Bahan baku low + Daily revenue trend */}
      <div className="grid-2 mb-6">
        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Bahan Baku di Bawah Par ({lowBahan.length})</h3>
              <p className="card-desc">Perlu segera order ulang ke supplier</p>
            </div>
            <Btn size="sm" icon="package">Buat PO</Btn>
          </div>
          <div className="card-body flush">
            <div className="table-wrap">
              <table className="table">
                <thead>
                  <tr>
                    <th>Bahan</th>
                    <th className="num">Stok</th>
                    <th>Status</th>
                    <th>Supplier</th>
                  </tr>
                </thead>
                <tbody>
                  {lowBahan.map(b => {
                    const ratio = b.stock / b.par;
                    const tone = ratio < 0.4 ? 'danger' : 'warn';
                    return (
                      <tr key={b.id}>
                        <td>
                          <div style={{fontWeight:500}}>{b.name}</div>
                          <div className="bahan-stock-bar"><div className={tone} style={{width: Math.min(100, ratio*100) + '%'}} /></div>
                        </td>
                        <td className="num mono" style={{whiteSpace:'nowrap'}}>{b.stock} / {b.par} {b.unit}</td>
                        <td><Pill tone={tone}>{ratio < 0.4 ? 'Kritis' : 'Rendah'}</Pill></td>
                        <td className="muted" style={{fontSize:12.5}}>{b.supplier}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </Card>

        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Trend Pendapatan (22 hari)</h3>
              <p className="card-desc">Rata-rata: {rupiah(DAILY_REVENUE.slice(0,-1).reduce((s,d)=>s+d.total,0)/(DAILY_REVENUE.length-1), {sym:true, compact:true})}/hari</p>
            </div>
          </div>
          <div className="card-body">
            <div style={{display:'flex', alignItems:'flex-end', gap:3, height:140, paddingTop:8, borderBottom:'1px solid hsl(var(--border))'}}>
              {DAILY_REVENUE.map((d, i) => {
                const isToday = i === DAILY_REVENUE.length - 1;
                const heightPct = (d.total / maxDaily) * 100;
                return (
                  <div key={d.date}
                       title={`${d.date} — ${rupiah(d.total, {sym:true})} · ${d.orders} order`}
                       style={{
                         flex:1, height: heightPct + '%', minWidth:0,
                         background: isToday
                           ? 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%))'
                           : 'hsl(var(--accent-h) var(--accent-s) 65%)',
                         borderRadius: '4px 4px 0 0',
                         opacity: isToday ? 1 : 0.85,
                       }}
                  />
                );
              })}
            </div>
            <div className="row between mt-2" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>
              <span>1 Apr</span>
              <span style={{fontWeight:600}}>Hari ini ({DAILY_REVENUE[DAILY_REVENUE.length-1].orders} order, ongoing)</span>
              <span>22 Apr</span>
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}

window.Dashboard = Dashboard;