// Dashboard — sales pulse, hourly heatmap, top SKUs, kasir leaderboard
const { Fragment: FragmentD } = React;

function Dashboard({ cabang, period, role }) {
  const todaySales = DAILY_SALES[DAILY_SALES.length - 1].total;
  const yesterday = DAILY_SALES[DAILY_SALES.length - 2].total;
  const pctVsYday = ((todaySales - yesterday) / yesterday) * 100;
  const targetPct = (todaySales / SALES_TARGET_DAILY) * 100;

  const trxToday = TRANSAKSI.filter(t => cabang === 'all' || t.cabang === cabang);
  const trxCount = trxToday.length;
  const avgTicket = trxCount ? Math.round(trxToday.reduce((s, t) => s + t.total, 0) / trxCount) : 0;
  const cashlessShare = trxCount
    ? Math.round((trxToday.filter(t => t.method !== 'cash').length / trxCount) * 100)
    : 0;

  const maxHeat = Math.max(...HOURLY_HEATMAP.flat());
  const heatColor = (v) => {
    const a = Math.min(1, v / maxHeat);
    return `hsl(152 65% ${Math.max(28, 92 - a * 64)}%)`;
  };

  return (
    <div className="stack-6">
      {/* KPI strip */}
      <div className="grid-4">
        <Kpi
          label="Omzet Hari Ini"
          value={rupiah(todaySales, { sym: true })}
          delta={pctVsYday}
          hint={`Target ${rupiah(SALES_TARGET_DAILY, { sym: true })} · ${targetPct.toFixed(0)}% tercapai`}
          icon="trending"
          progress={Math.min(100, targetPct)}
        />
        <Kpi label="Transaksi"     value={trxCount.toString()} hint={`Avg ticket ${rupiah(avgTicket, { sym: true })}`} icon="receipt" />
        <Kpi label="Cashless"      value={`${cashlessShare}%`} hint="QRIS + Transfer + Debit" icon="qris" />
        <Kpi label="Stok Menipis"  value={PRODUCTS.filter(p => totalStock(p) < 15).length.toString()} hint="< 15 pcs gabungan cabang" icon="alert" tone="warn" />
      </div>

      {/* Sales trend + heatmap */}
      <div className="grid-2">
        <Card>
          <div className="card-pad">
            <SectionHead title="Tren Penjualan Harian" hint={`Periode ${periodLabel(period)} · target Rp 4.5jt/hari`} />
            <SalesTrendChart data={DAILY_SALES} target={SALES_TARGET_DAILY} />
          </div>
        </Card>
        <Card>
          <div className="card-pad">
            <SectionHead title="Heatmap Jam Ramai" hint="Intensitas transaksi per jam × hari (4 minggu)" />
            <Heatmap />
          </div>
        </Card>
      </div>

      {/* Top SKUs + leaderboard */}
      <div className="grid-2">
        <Card>
          <div className="card-pad">
            <SectionHead title="Top 10 SKU Hari Ini" hint="Berdasarkan kontribusi omzet" action={<Pill tone="accent">Live</Pill>} />
            <table className="table compact">
              <thead><tr><th>SKU</th><th>Produk</th><th style={{textAlign:'right'}}>Qty</th><th style={{textAlign:'right'}}>Omzet</th></tr></thead>
              <tbody>
                {TOP_SKUS.map((t, i) => {
                  const p = PROD[t.sku];
                  return (
                    <tr key={t.sku}>
                      <td><span className="mono">{t.sku}</span></td>
                      <td>{p?.name || '—'}</td>
                      <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{t.qty}</td>
                      <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{rupiah(t.total)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>
        <Card>
          <div className="card-pad">
            <SectionHead title="Leaderboard Kasir" hint="Performa hari ini" />
            <div className="leaderboard">
              {KASIR_LEADERBOARD.map((k, i) => {
                const max = KASIR_LEADERBOARD[0].omzet || 1;
                const w = Math.round((k.omzet / max) * 100);
                return (
                  <div key={k.name} className="leaderboard-row">
                    <div className="leaderboard-rank">{i + 1}</div>
                    <div style={{flex:1, minWidth:0}}>
                      <div style={{display:'flex', justifyContent:'space-between', fontSize:12.5, fontWeight:500}}>
                        <span>{k.name}</span>
                        <span style={{fontVariantNumeric:'tabular-nums'}}>{rupiah(k.omzet, { sym: true, compact: true })}</span>
                      </div>
                      <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'hsl(var(--muted-foreground))', marginBottom:4}}>
                        <span>{CABANG_LIST.find(c => c.id === k.cabang)?.name} · {k.trx} trx</span>
                        <span>Avg {rupiah(k.avgTicket, { sym: true, compact: true })}</span>
                      </div>
                      <div className="leaderboard-bar"><div style={{width: w + '%'}} /></div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </Card>
      </div>

      {/* Recent transactions */}
      <Card>
        <div className="card-pad">
          <SectionHead
            title="Transaksi Terbaru"
            hint={`${trxToday.length} transaksi hari ini`}
            action={<Btn size="sm" tone="outline" icon="arrowRight">Lihat semua</Btn>}
          />
          <table className="table">
            <thead><tr><th>ID</th><th>Waktu</th><th>Kasir</th><th>Cabang</th><th>Metode</th><th style={{textAlign:'right'}}>Item</th><th style={{textAlign:'right'}}>Total</th></tr></thead>
            <tbody>
              {trxToday.slice(-8).reverse().map(t => (
                <tr key={t.id}>
                  <td><span className="mono">{t.id}</span></td>
                  <td>{t.time}</td>
                  <td>{t.kasir}</td>
                  <td>{CABANG_LIST.find(c => c.id === t.cabang)?.name}</td>
                  <td><Pill tone={t.method === 'cash' ? 'neutral' : 'accent'}>{methodLabel(t.method)}</Pill></td>
                  <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{t.items}</td>
                  <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums', fontWeight:500}}>{rupiah(t.total)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

function Kpi({ label, value, hint, delta, icon, tone, progress }) {
  const deltaTone = delta == null ? null : delta >= 0 ? 'success' : 'danger';
  return (
    <Card>
      <div className="card-pad">
        <div className="row between" style={{alignItems:'flex-start'}}>
          <div style={{fontSize:11.5, textTransform:'uppercase', letterSpacing:'0.05em', color:'hsl(var(--muted-foreground))', fontWeight:600}}>{label}</div>
          <div className="kpi-icon" data-tone={tone}><Icon name={icon} size={14} /></div>
        </div>
        <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.02em', marginTop:6, fontVariantNumeric:'tabular-nums'}}>{value}</div>
        {delta != null && (
          <div style={{marginTop:4}}>
            <Pill tone={deltaTone}>
              <Icon name={delta >= 0 ? 'arrowUp' : 'arrowDown'} size={11} />
              {Math.abs(delta).toFixed(1)}% vs kemarin
            </Pill>
          </div>
        )}
        {hint && <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:6}}>{hint}</div>}
        {progress != null && (
          <div className="kpi-progress"><div style={{width: progress + '%'}} /></div>
        )}
      </div>
    </Card>
  );
}

function SalesTrendChart({ data, target }) {
  const W = 560, H = 180, pad = { l: 36, r: 8, t: 12, b: 22 };
  const max = Math.max(target, ...data.map(d => d.total)) * 1.1;
  const xStep = (W - pad.l - pad.r) / (data.length - 1);
  const y = (v) => H - pad.b - (v / max) * (H - pad.t - pad.b);
  const path = data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${pad.l + i * xStep} ${y(d.total)}`).join(' ');
  const area = path + ` L ${pad.l + (data.length - 1) * xStep} ${H - pad.b} L ${pad.l} ${H - pad.b} Z`;
  const targetY = y(target);
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%', height:'auto', display:'block'}}>
      <defs>
        <linearGradient id="trendgrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="hsl(var(--accent-h) var(--accent-s) var(--accent-l))" stopOpacity="0.28" />
          <stop offset="100%" stopColor="hsl(var(--accent-h) var(--accent-s) var(--accent-l))" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* gridlines */}
      {[0, 0.25, 0.5, 0.75, 1].map(p => (
        <line key={p} x1={pad.l} x2={W - pad.r} y1={pad.t + p * (H - pad.t - pad.b)} y2={pad.t + p * (H - pad.t - pad.b)} stroke="hsl(var(--border))" strokeDasharray="2,3" />
      ))}
      <line x1={pad.l} x2={W - pad.r} y1={targetY} y2={targetY} stroke="hsl(0 70% 55%)" strokeDasharray="4,3" strokeWidth="1" />
      <text x={W - pad.r} y={targetY - 4} textAnchor="end" fontSize="9" fill="hsl(0 70% 45%)">target</text>
      <path d={area} fill="url(#trendgrad)" />
      <path d={path} fill="none" stroke="hsl(var(--accent-h) var(--accent-s) var(--accent-l))" strokeWidth="1.6" />
      {data.map((d, i) => i % 3 === 0 && (
        <text key={i} x={pad.l + i * xStep} y={H - 6} textAnchor="middle" fontSize="9" fill="hsl(var(--muted-foreground))">{d.date.slice(8)}</text>
      ))}
    </svg>
  );
}

function Heatmap() {
  const max = Math.max(...HOURLY_HEATMAP.flat());
  const cell = (v) => {
    const a = Math.min(1, v / max);
    return `hsl(152 65% ${Math.max(28, 92 - a * 60)}%)`;
  };
  return (
    <div className="heatmap">
      <div className="heatmap-grid" style={{gridTemplateColumns: `28px repeat(${HEATMAP_HOURS.length}, 1fr)`}}>
        <div />
        {HEATMAP_HOURS.map(h => <div key={h} className="heatmap-col-label">{h}</div>)}
        {HOURLY_HEATMAP.map((row, di) => (
          <FragmentD key={di}>
            <div className="heatmap-row-label">{HEATMAP_DAYS[di]}</div>
            {row.map((v, hi) => (
              <div key={hi} className="heatmap-cell" style={{background: cell(v)}} title={`${HEATMAP_DAYS[di]} ${HEATMAP_HOURS[hi]}:00 — intensitas ${v}`} />
            ))}
          </FragmentD>
        ))}
      </div>
      <div className="heatmap-legend">
        <span>Sepi</span>
        <div className="heatmap-scale">
          {[0,0.2,0.4,0.6,0.8,1].map((a,i) => <div key={i} style={{background:`hsl(152 65% ${92 - a * 60}%)`}} />)}
        </div>
        <span>Ramai</span>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard, Kpi, SalesTrendChart, Heatmap });