/* global React, Icon, MP, Sparkline, BarChart, Donut, MOCK, fmtRp, fmtRpShort, STATUS_META, fmtDateLong, fmtMonthYear, useNow */

const { useState } = React;

// ============== DASHBOARD ==============
function DashboardPage({ go, role = 'owner' }) {
  const now = useNow(60_000);
  const [from, setFrom] = useState('');
  const [to, setTo] = useState('');
  const salesData = [42, 58, 51, 73, 65, 88, 79, 92, 84, 105, 98, 124, 118, 142];
  const days = ["S","M","T","W","T","F","S","S","M","T","W","T","F","S"];

  const todayLong = fmtDateLong(now);
  const monthYear = fmtMonthYear(now);

  const greeting = {
    owner:   { hi: "Halo, Pak Budi 👋",      sub: `Ringkasan bisnis Anda hari ini · ${todayLong}` },
    gudang:  { hi: "Selamat pagi, Pak Asep", sub: `Dashboard operasional · Gudang Surabaya · ${todayLong}` },
    finance: { hi: "Halo, Bu Nadya",         sub: `Ringkasan keuangan ${monthYear} · ${todayLong}` },
  }[role];

  // Apply date range to all live data: orders, returns, opname.
  const ordersInRange = (MOCK.ORDERS || []).filter(o =>
    window.inRange(o._raw?.createdAt, from, to)
  );
  const returnsInRange = (MOCK.RETURNS || []).filter(r =>
    window.inRange(r._raw?.createdAt, from, to)
  );
  const dateActive = !!(from || to);

  // Derived KPIs from filtered data (used when filter is active).
  const totalRev = ordersInRange.reduce((s, o) => s + Number(o.total || 0), 0);
  const needProcess = ordersInRange.filter(o => ['new','packing'].includes(o.status)).length;
  const fulfilled = ordersInRange.filter(o => ['shipped','delivered'].includes(o.status)).length;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{greeting.hi}</h1>
          <p className="page-sub">{greeting.sub}</p>
        </div>
        <div className="page-actions">
          <window.DateRangeFilter
            from={from} to={to}
            onChange={({ from, to }) => { setFrom(from); setTo(to); }}
          />
          <button className="btn btn-secondary"><Icon.download/> Ekspor</button>
        </div>
      </div>

      {/* Live status banner */}
      <div className="card" style={{ marginBottom: 18, display:'flex', alignItems:'center', gap:14, padding:'14px 18px', background:'linear-gradient(90deg, var(--brand-50), transparent 70%)', borderColor:'var(--brand-200)'}}>
        <div style={{ width:36, height:36, borderRadius:10, background:'var(--brand-500)', color:'white', display:'grid', placeItems:'center', flexShrink:0 }}><Icon.zap/></div>
        <div style={{ flex:1 }}>
          <div style={{ fontWeight:700, fontSize:13.5 }}>Stok tersinkronisasi · Real-time aktif</div>
          <div style={{ fontSize:12.5, color:'var(--ink-500)' }}>6 toko terhubung · Pembaruan terakhir 12 detik lalu · 0 antrean tertunda</div>
        </div>
        <button className="btn btn-secondary btn-sm" onClick={() => go('stores')}>Kelola toko</button>
      </div>

      {/* Metrics */}
      <div className="grid-4" style={{ marginBottom: 18 }}>
        {dateActive ? (
          <>
            <Metric label="Pesanan (rentang)" value={ordersInRange.length.toString()} delta={`Filter ${from || '…'} → ${to || '…'}`} icon={<Icon.cart/>}/>
            <Metric label="Pendapatan (rentang)" value={fmtRpShort(totalRev)} delta={`${fulfilled} sudah dikirim`} up icon={<Icon.cash/>}/>
            <Metric label="Perlu Diproses" value={needProcess.toString()} delta={`${ordersInRange.length} total dalam rentang`} warn icon={<Icon.box/>}/>
            <Metric label="Retur (rentang)" value={returnsInRange.length.toString()} delta={`${returnsInRange.filter(r=>r.status==='received').length} layak jual`} icon={<Icon.warn/>}/>
          </>
        ) : role === 'finance' ? (
          <>
            <Metric label="Pendapatan Bulan Ini" value="Rp 348,5jt" delta="+12% MoM" up icon={<Icon.cash/>}/>
            <Metric label="Biaya Berjalan"        value="Rp 17,7jt"  delta="↗ Rp 4,2jt minggu ini" warn icon={<Icon.cost/>}/>
            <Metric label="Laba Bersih (est.)"    value="Rp 72jt"     delta="Margin 20.6%" up icon={<Icon.finance/>}/>
            <Metric label="Saldo Kas"             value="Rp 396jt"   delta="↑ Rp 84jt MoM" up icon={<Icon.flow/>}/>
          </>
        ) : (
          <>
            <Metric label="Pesanan Hari Ini"   value="142"      delta="+18% dari kemarin" up icon={<Icon.cart/>} spark={salesData}/>
            <Metric label="Pendapatan"          value="Rp 24,8jt" delta="+12% MoM" up icon={<Icon.cash/>}/>
            <Metric label="Perlu Diproses"      value="38"        delta="9 mendekati SLA" warn icon={<Icon.box/>}/>
            <Metric label="Stok Rendah / Habis" value="14"        delta="3 SKU habis total" down icon={<Icon.warn/>}/>
          </>
        )}
      </div>

      <div className="grid-3" style={{ gap: 18, gridTemplateColumns: "2fr 1fr" }}>
        {/* Sales chart */}
        <div className="card">
          <div className="card-header">
            <div>
              <h3 className="card-title">Penjualan 14 Hari Terakhir</h3>
              <p className="card-sub">Total Rp 287,4jt · 1.812 pesanan</p>
            </div>
            <div className="segmented">
              <button className="active">Pesanan</button>
              <button>Pendapatan</button>
            </div>
          </div>
          <div className="card-body">
            <BarChart data={salesData} labels={days} height={220}/>
          </div>
        </div>

        {/* Marketplace breakdown */}
        <div className="card">
          <div className="card-header">
            <div>
              <h3 className="card-title">Per Marketplace</h3>
              <p className="card-sub">30 hari terakhir</p>
            </div>
          </div>
          <div className="card-body" style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:18 }}>
            <Donut size={160} segments={[
              { color: "#ee4d2d", value: 38, label: "Shopee" },
              { color: "#03ac0e", value: 27, label: "Tokopedia" },
              { color: "#000000", value: 19, label: "TikTok" },
              { color: "#0f146d", value: 11, label: "Lazada" },
              { color: "#0095da", value: 5,  label: "Blibli" },
            ]}/>
            <div style={{ display:'flex', flexDirection:'column', gap:6, width:'100%' }}>
              {[
                { mp:"shopee", v:"38%", n:"Rp 9,4jt" },
                { mp:"tokopedia", v:"27%", n:"Rp 6,7jt" },
                { mp:"tiktok", v:"19%", n:"Rp 4,7jt" },
                { mp:"lazada", v:"11%", n:"Rp 2,7jt" },
                { mp:"blibli", v:"5%",  n:"Rp 1,3jt" },
              ].map(r => (
                <div key={r.mp} style={{ display:'flex', alignItems:'center', gap:8, fontSize:12.5 }}>
                  <MP type={r.mp}/>
                  <span style={{ marginLeft:'auto', color:'var(--ink-500)' }}>{r.n}</span>
                  <span style={{ fontWeight:700, minWidth:36, textAlign:'right' }}>{r.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Per Toko breakdown */}
      <div className="card" style={{ marginTop:18 }}>
        <div className="card-header">
          <div>
            <h3 className="card-title">Pesanan per Toko</h3>
            <p className="card-sub">Hari ini · 6 toko di 5 marketplace</p>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => go('stores')}>Kelola toko →</button>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Toko</th>
              <th>Channel</th>
              <th style={{textAlign:'right'}}>Pesanan Hari Ini</th>
              <th style={{textAlign:'right'}}>Pendapatan</th>
              <th style={{textAlign:'right'}}>Perlu Diproses</th>
              <th style={{textAlign:'right'}}>vs Kemarin</th>
              <th style={{width:100}}></th>
            </tr>
          </thead>
          <tbody>
            {[
              { name:"Toko Berkah Jaya", mp:"shopee",    today:48, rev:"Rp 8,4jt", todo:14, delta:+22 },
              { name:"Berkah Live",      mp:"tiktok",    today:32, rev:"Rp 5,2jt", todo:8,  delta:+15 },
              { name:"Toko Berkah Jaya", mp:"tokopedia", today:28, rev:"Rp 4,9jt", todo:7,  delta:+8 },
              { name:"Berkah Mall",      mp:"shopee",    today:18, rev:"Rp 3,1jt", todo:5,  delta:-4 },
              { name:"Toko Berkah Jaya", mp:"lazada",    today:11, rev:"Rp 2,1jt", todo:3,  delta:+2 },
              { name:"Berkah Mall",      mp:"blibli",    today:5,  rev:"Rp 1,1jt", todo:1,  delta:0 },
            ].map((s,i) => {
              const max = 48;
              return (
                <tr key={i}>
                  <td>
                    <div style={{ fontWeight:600, fontSize:13.5 }}>{s.name}</div>
                  </td>
                  <td><MP type={s.mp}/></td>
                  <td style={{textAlign:'right'}}>
                    <div style={{ display:'flex', alignItems:'center', gap:10, justifyContent:'flex-end' }}>
                      <span style={{ display:'inline-block', width:80, height:6, borderRadius:3, background:'var(--surface-2)', overflow:'hidden' }}>
                        <span style={{ display:'block', height:'100%', width:`${(s.today/max)*100}%`, background:'var(--brand-500)' }}/>
                      </span>
                      <strong style={{ minWidth:30, textAlign:'right' }}>{s.today}</strong>
                    </div>
                  </td>
                  <td style={{textAlign:'right', fontWeight:600}}>{s.rev}</td>
                  <td style={{textAlign:'right'}}>
                    {s.todo > 0 ? <span className="chip chip-amber"><span className="chip-dot"/>{s.todo}</span> : <span style={{ color:'var(--ink-400)' }}>—</span>}
                  </td>
                  <td style={{textAlign:'right', fontWeight:700, color: s.delta > 0 ? 'var(--green)' : (s.delta < 0 ? 'var(--rose)' : 'var(--ink-400)') }}>
                    {s.delta > 0 ? `↑ ${s.delta}%` : (s.delta < 0 ? `↓ ${Math.abs(s.delta)}%` : '—')}
                  </td>
                  <td style={{ textAlign:'right' }}>
                    <button className="btn btn-secondary btn-sm" onClick={() => go('orders')}>Buka</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Two-col: Recent orders + tasks */}
      <div className="grid-2" style={{ marginTop:18, gridTemplateColumns: "1.4fr 1fr", gap:18 }}>
        <div className="card">
          <div className="card-header">
            <h3 className="card-title">Pesanan Terbaru</h3>
            <button className="btn btn-ghost btn-sm" onClick={() => go('orders')}>Lihat semua →</button>
          </div>
          <table className="table">
            <thead><tr><th>Pesanan</th><th>Toko</th><th>Pembeli</th><th style={{textAlign:'right'}}>Nilai</th><th>Status</th></tr></thead>
            <tbody>
              {MOCK.ORDERS.slice(0,5).map(o => (
                <tr key={o.id}>
                  <td><span className="mono">{o.id}</span></td>
                  <td><MP type={o.mp}/></td>
                  <td>{o.buyer}</td>
                  <td style={{textAlign:'right', fontWeight:600}}>{fmtRpShort(o.total)}</td>
                  <td><span className={`chip ${STATUS_META[o.status].chip}`}><span className="chip-dot"/>{STATUS_META[o.status].label}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Task list */}
        <div className="card">
          <div className="card-header">
            <h3 className="card-title">Perlu Perhatian Anda</h3>
          </div>
          <div className="card-body" style={{ padding:0 }}>
            <TaskRow icon={<Icon.warn/>} tone="rose"
              title="3 SKU stok habis total"
              sub="BTL-1L · TSH-RED-S · CAP-BLK"
              action="Restock"/>
            <TaskRow icon={<Icon.box/>} tone="amber"
              title="9 pesanan mendekati SLA"
              sub="Wajib dikirim sebelum 18:00 hari ini"
              action="Lihat" onAction={() => go('orders')}/>
            <TaskRow icon={<Icon.returns/>} tone="blue"
              title="2 retur menunggu review"
              sub="Total nilai Rp 124.000"
              action="Review" onAction={() => go('returns')}/>
            <TaskRow icon={<Icon.link/>} tone="amber"
              title="Token API Lazada akan kedaluwarsa"
              sub="3 hari lagi · Toko Berkah Jaya"
              action="Perpanjang" onAction={() => go('stores')}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function Metric({ label, value, delta, up, down, warn, icon, spark }) {
  const cls = up ? 'up' : (down || warn) ? 'down' : '';
  return (
    <div className="metric">
      <div className="metric-icon">{icon}</div>
      <div className="metric-label">{label}</div>
      <div className="metric-value">{value}</div>
      <div className={`metric-delta ${cls}`}>
        {up && <Icon.arrowUp/>}
        {down && <Icon.arrowDown/>}
        {warn && <Icon.warn style={{width:13,height:13}}/>}
        <span>{delta}</span>
      </div>
      {spark && <div style={{ marginTop:8, marginLeft:-4, marginRight:-4, marginBottom:-8 }}>
        <Sparkline data={spark} height={36}/>
      </div>}
    </div>
  );
}

function TaskRow({ icon, tone, title, sub, action, onAction }) {
  const colors = {
    rose:  { bg:'var(--rose-bg)',  fg:'var(--rose)' },
    amber: { bg:'var(--amber-bg)', fg:'var(--amber)' },
    blue:  { bg:'var(--blue-bg)',  fg:'var(--blue)' },
    green: { bg:'var(--green-bg)', fg:'var(--green)' },
  }[tone];
  return (
    <div style={{ display:'flex', alignItems:'center', gap:12, padding:'14px 20px', borderBottom:'1px solid var(--border)' }}>
      <div style={{ width:34, height:34, borderRadius:10, background:colors.bg, color:colors.fg, display:'grid', placeItems:'center', flexShrink:0 }}>
        {React.cloneElement(icon, { style:{ width:16, height:16 } })}
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize:13.5, fontWeight:600 }}>{title}</div>
        <div style={{ fontSize:12, color:'var(--ink-500)' }}>{sub}</div>
      </div>
      <button className="btn btn-secondary btn-sm" onClick={onAction}>{action}</button>
    </div>
  );
}

window.DashboardPage = DashboardPage;