// Laporan — sales reports + insights
const { useState: useStateLP } = React;

function LaporanPage({ pushToast }) {
  const [period, setPeriod] = useStateLP('today');

  const todayRev = HOURLY_TODAY.reduce((s, h) => s + h.revenue, 0);
  const todayOrders = HOURLY_TODAY.reduce((s, h) => s + h.orders, 0);
  const yest = DAILY_REVENUE[DAILY_REVENUE.length - 2];
  const week = DAILY_REVENUE.slice(-7);
  const month = DAILY_REVENUE;
  const monthRev = month.reduce((s, d) => s + d.total, 0);
  const monthOrders = month.reduce((s, d) => s + d.orders, 0);
  const aov = Math.round(monthRev / monthOrders);

  const grandTotal = SALES_TODAY.reduce((s, x) => s + x.total, 0) + todayRev;

  // Tender breakdown
  const tenders = SALES_TODAY.reduce((acc, s) => {
    acc[s.method] = (acc[s.method] || 0) + s.total;
    return acc;
  }, {});
  const tenderTotal = Object.values(tenders).reduce((a,b) => a+b, 0);

  // Category sales today (estimated from TOP_ITEMS by category)
  const catSales = KATEGORI.filter(k => k.id !== 'all').map(k => {
    const items = TOP_ITEMS.filter(t => MENU_BY_SKU[t.sku]?.cat === k.id);
    const revenue = items.reduce((s, t) => s + t.revenue, 0);
    const sold = items.reduce((s, t) => s + t.sold, 0);
    return { ...k, revenue, sold };
  }).sort((a,b) => b.revenue - a.revenue);
  const catMax = Math.max(...catSales.map(c => c.revenue));

  return (
    <>
      <PageHeader
        eyebrow={`Periode: ${formatDateID(TODAY)} · ${SHIFT}`}
        title="Laporan Penjualan"
        subtitle="Ringkasan harian, mingguan, bulanan. Data sales, AOV, tender, kategori, item terlaris, dan operating margin."
        actions={<>
          <Btn icon="filter">Filter</Btn>
          <Btn icon="download">Export PDF</Btn>
          <Btn icon="print" tone="primary">Cetak</Btn>
        </>}
      />

      <div className="filter-bar">
        <button className={'menu-cat-tab' + (period==='today'?' active':'')} onClick={()=>setPeriod('today')}>Hari Ini</button>
        <button className={'menu-cat-tab' + (period==='week'?' active':'')} onClick={()=>setPeriod('week')}>7 Hari</button>
        <button className={'menu-cat-tab' + (period==='month'?' active':'')} onClick={()=>setPeriod('month')}>22 Hari (April)</button>
        <span className="muted text-sm" style={{marginLeft:'auto'}}>Generated: {NOW_HHMM} · {ROLES.manajer.name}</span>
      </div>

      <Card className="mb-4">
        <div className="card-header">
          <div>
            <h3 className="card-title">Ringkasan {period === 'today' ? 'Hari Ini' : period === 'week' ? '7 Hari Terakhir' : 'Bulan Berjalan'}</h3>
            <p className="card-desc">Snapshot KPI utama untuk periode terpilih</p>
          </div>
          <span className="badge accent dot">Live</span>
        </div>
        <div className="card-body">
          <div className="grid-4">
            <Kpi label="Total Penjualan"
                 value={rupiah(period==='today'?todayRev : period==='week'?week.reduce((s,d)=>s+d.total,0) : monthRev, {sym:true, compact:false})}
                 icon="dollar" tone="success"
                 sub={period==='today' ? `vs kemarin ${rupiah(yest.total, {sym:true, compact:true})}` : undefined} />
            <Kpi label="Jumlah Order"
                 value={(period==='today'?todayOrders : period==='week'?week.reduce((s,d)=>s+d.orders,0) : monthOrders) + ' order'}
                 icon="receipt" tone="accent" />
            <Kpi label="AOV"
                 value={rupiah(period==='today' ? Math.round(todayRev/todayOrders) : aov, {sym:true})}
                 icon="trending" tone="warn"
                 hint="Avg. Order Value" />
            <Kpi label="Items Terjual"
                 value={TOP_ITEMS.reduce((s,t)=>s+t.sold,0) + ' item'}
                 icon="utensils" tone="muted"
                 hint="Top 12 menu, periode 7 hari" />
          </div>
        </div>
      </Card>

      <div className="grid-2 mb-4" style={{gridTemplateColumns:'1.4fr 1fr'}}>
        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Trend Pendapatan Harian</h3>
              <p className="card-desc">Grafik 22 hari terakhir — hari ini ditandai gelap</p>
            </div>
          </div>
          <div className="card-body">
            <div style={{display:'flex', alignItems:'flex-end', gap:4, height:220, paddingTop:8, borderBottom:'1px solid hsl(var(--border))'}}>
              {DAILY_REVENUE.map((d, i) => {
                const max = Math.max(...DAILY_REVENUE.map(x=>x.total));
                const isToday = i === DAILY_REVENUE.length - 1;
                const heightPct = (d.total / max) * 100;
                return (
                  <div key={d.date} title={`${d.date} — ${rupiah(d.total, {sym:true})} · ${d.orders} order`}
                       style={{flex:1, minWidth:0, display:'flex', flexDirection:'column', alignItems:'center', gap:4}}>
                    <div style={{
                      width:'100%', height: heightPct + '%',
                      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', minHeight: 2,
                    }} />
                  </div>
                );
              })}
            </div>
            <div className="row between mt-2" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>
              <span>1 Apr</span>
              <span>{rupiah(monthRev/22, {sym:true, compact:true})} avg/hari</span>
              <span>22 Apr (Hari Ini)</span>
            </div>
          </div>
        </Card>

        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Tender — Hari Ini</h3>
              <p className="card-desc">Closed orders: {SALES_TODAY.length} transaksi · {rupiah(tenderTotal, {sym:true})}</p>
            </div>
          </div>
          <div className="card-body">
            <div style={{display:'flex', flexDirection:'column', gap:14}}>
              {[
                { key: 'cash', label: 'Cash', icon: 'dollar', color: 'hsl(var(--success))' },
                { key: 'qris', label: 'QRIS',  icon: 'qrCode', color: 'hsl(var(--accent))' },
                { key: 'edc',  label: 'Kartu (EDC)', icon: 'creditCard', color: 'hsl(245 60% 55%)' },
              ].map(t => {
                const amt = tenders[t.key] || 0;
                const pct = tenderTotal ? Math.round(amt/tenderTotal*100) : 0;
                const count = SALES_TODAY.filter(s => s.method === t.key).length;
                return (
                  <div key={t.key}>
                    <div className="row between" style={{marginBottom:6}}>
                      <div className="row gap-2" style={{fontSize:14, fontWeight:500}}>
                        <Icon name={t.icon} size={15}/> {t.label}
                        <span className="muted text-sm">({count} trx)</span>
                      </div>
                      <div className="num mono" style={{fontWeight:600}}>{rupiah(amt, {sym:true})}</div>
                    </div>
                    <div className="bar-h"><div style={{width: pct + '%', background: t.color}} /></div>
                    <div className="muted text-sm mt-1" style={{textAlign:'right'}}>{pct}%</div>
                  </div>
                );
              })}
            </div>
          </div>
        </Card>
      </div>

      <div className="grid-2 mb-4">
        <Card>
          <div className="card-header">
            <h3 className="card-title">Penjualan per Kategori (7 hari)</h3>
            <p className="card-desc">Berdasarkan top 12 item terlaris</p>
          </div>
          <div className="card-body">
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              {catSales.map(c => (
                <div key={c.id}>
                  <div className="row between" style={{fontSize:13, marginBottom:4}}>
                    <div className="row gap-2">
                      <Icon name={c.station === 'kitchen' ? 'chefHat' : 'coffee'} size={14}/>
                      <span style={{fontWeight:500}}>{c.label}</span>
                      <span className="muted text-sm">({c.sold} terjual)</span>
                    </div>
                    <span className="mono" style={{fontWeight:600}}>{rupiah(c.revenue, {sym:true, compact:true})}</span>
                  </div>
                  <div className="bar-h"><div style={{width: (c.revenue/catMax*100) + '%'}} /></div>
                </div>
              ))}
            </div>
          </div>
        </Card>

        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Top 5 Item — 7 Hari</h3>
              <p className="card-desc">Item terlaris berdasarkan jumlah terjual</p>
            </div>
          </div>
          <div className="card-body flush">
            <div className="leaderboard">
              {TOP_ITEMS.slice(0, 5).map((row, i) => {
                const item = MENU_BY_SKU[row.sku];
                const max = 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:14, fontWeight:500}}>{item?.name}</div>
                      <div className="muted text-sm mono">{row.sku} · {item?.station}</div>
                      <div className="leaderboard-bar mt-2"><div style={{width:(row.sold/max*100)+'%'}}/></div>
                    </div>
                    <div className="num mono" style={{fontWeight:600}}>{row.sold}</div>
                    <div className="num mono">{rupiah(row.revenue, {compact:true})}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </Card>
      </div>

      <Card className="mb-4">
        <div className="card-header">
          <div>
            <h3 className="card-title">Detail Transaksi Hari Ini</h3>
            <p className="card-desc">{SALES_TODAY.length} order closed · Total {rupiah(SALES_TODAY.reduce((s,x)=>s+x.total,0), {sym:true})}</p>
          </div>
          <Btn size="sm" icon="download">Export CSV</Btn>
        </div>
        <div className="card-body flush">
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th>Order ID</th>
                  <th>Closed</th>
                  <th>Meja</th>
                  <th className="num">Items</th>
                  <th>Bayar</th>
                  <th className="num">Subtotal (est.)</th>
                  <th className="num">Pajak+Service</th>
                  <th className="num">Total</th>
                </tr>
              </thead>
              <tbody>
                {SALES_TODAY.map(s => {
                  const sub = Math.round(s.total / 1.15);
                  const taxSvc = s.total - sub;
                  return (
                    <tr key={s.id}>
                      <td className="mono text-sm">{s.id}</td>
                      <td className="mono">{s.closedAt}</td>
                      <td>{s.table}</td>
                      <td className="num mono">{s.items}</td>
                      <td><StatusPill status={s.method} /></td>
                      <td className="num mono muted">{rupiah(sub, {sym:true})}</td>
                      <td className="num mono muted">{rupiah(taxSvc, {sym:true})}</td>
                      <td className="num mono" style={{fontWeight:600}}>{rupiah(s.total, {sym:true})}</td>
                    </tr>
                  );
                })}
                <tr style={{borderTop:'2px solid hsl(var(--border))', background:'hsl(var(--muted))'}}>
                  <td colSpan={3} style={{fontWeight:600}}>TOTAL CLOSED ({SALES_TODAY.length} order)</td>
                  <td className="num mono" style={{fontWeight:600}}>{SALES_TODAY.reduce((s,x)=>s+x.items,0)}</td>
                  <td></td>
                  <td className="num mono">{rupiah(Math.round(SALES_TODAY.reduce((s,x)=>s+x.total,0)/1.15), {sym:true})}</td>
                  <td className="num mono">{rupiah(SALES_TODAY.reduce((s,x)=>s+x.total,0) - Math.round(SALES_TODAY.reduce((s,x)=>s+x.total,0)/1.15), {sym:true})}</td>
                  <td className="num mono" style={{fontWeight:700, fontSize:15}}>{rupiah(SALES_TODAY.reduce((s,x)=>s+x.total,0), {sym:true})}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </Card>
    </>
  );
}

window.LaporanPage = LaporanPage;