/* global React, Icon, MOCK, fmtRp, fmtMonthYear, fmtMonthYearOffset, useNow */
const { useState: useStateFin } = React;

// ============== OPERATING COST (Biaya Berjalan) ==============
function OperatingCostPage() {
  const now = useNow(60_000);
  // Compute from "shipped + delivered" orders → that's resi sudah keluar
  const shipped = MOCK.ORDERS.filter(o => ['shipped','delivered'].includes(o.status));
  // Mock scale: real biz would be 1842 packing this month
  const PACKED_MONTH = 1842;
  const PACKING_FEE  = 2000;
  const totalPacking = PACKED_MONTH * PACKING_FEE;
  const totalMaterial = 6218400;
  const totalShipping = 4280000;   // ongkir tertanggung
  const totalGudang   = 3500000;   // sewa rak
  const totalAll = totalPacking + totalMaterial + totalShipping + totalGudang;

  // breakdown per material from MATERIALS used30
  const matBreakdown = [...MOCK.MATERIALS]
    .map(m => ({ ...m, total: m.used30 * m.cost }))
    .sort((a,b) => b.total - a.total);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Biaya Berjalan</h1>
          <p className="page-sub">Akumulasi biaya operasional bulan {fmtMonthYear(now)} — dihitung dari resi yang sudah keluar gudang</p>
        </div>
        <div className="page-actions">
          <select className="btn btn-secondary" defaultValue="this">
            <option value="this">{fmtMonthYear(now)}</option>
            <option value="last">{fmtMonthYearOffset(-1, now)}</option>
            <option value="prev">{fmtMonthYearOffset(-2, now)}</option>
          </select>
          <button className="btn btn-secondary"><Icon.download/> Ekspor</button>
        </div>
      </div>

      {/* Headline */}
      <div className="card" style={{ marginBottom:18, padding:'24px 28px', background:'linear-gradient(135deg, var(--brand-50), white)' }}>
        <div style={{ fontSize:13, color:'var(--ink-600)', fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em' }}>
          Total Biaya Operasional Bulan Berjalan
        </div>
        <div style={{ fontSize:40, fontWeight:800, marginTop:6, fontFeatureSettings:'"tnum"' }}>{fmtRp(totalAll)}</div>
        <div style={{ fontSize:13, color:'var(--ink-500)', marginTop:6 }}>
          Berdasarkan <strong style={{ color:'var(--ink-900)' }}>{PACKED_MONTH.toLocaleString('id-ID')} resi</strong> yang sudah keluar gudang sampai hari ini
        </div>
      </div>

      <div className="grid-4" style={{ marginBottom:18 }}>
        <CostCard
          icon="packing"
          label="Jasa Packing"
          value={fmtRp(totalPacking)}
          sub={`${PACKED_MONTH.toLocaleString('id-ID')} packing × Rp 2.000`}
          pct={((totalPacking/totalAll)*100).toFixed(1)}
          tone="brand"
        />
        <CostCard
          icon="inventory"
          label="Bahan Material"
          value={fmtRp(totalMaterial)}
          sub="Kardus, bubble, label, dll"
          pct={((totalMaterial/totalAll)*100).toFixed(1)}
          tone="blue"
        />
        <CostCard
          icon="orders"
          label="Ongkir Tertanggung"
          value={fmtRp(totalShipping)}
          sub="Free ongkir dari toko Anda"
          pct={((totalShipping/totalAll)*100).toFixed(1)}
          tone="amber"
        />
        <CostCard
          icon="dashboard"
          label="Sewa Rak Gudang"
          value={fmtRp(totalGudang)}
          sub="14 rak aktif · 3 lokasi"
          pct={((totalGudang/totalAll)*100).toFixed(1)}
          tone="green"
        />
      </div>

      <div className="grid-2">
        {/* Packing detail */}
        <div className="card">
          <div className="card-header">
            <div>
              <h3 className="card-title">Rincian Jasa Packing</h3>
              <p className="card-sub">Dari resi yang sudah keluar bulan ini</p>
            </div>
          </div>
          <div className="card-body">
            <PackingBreakdown packed={PACKED_MONTH} fee={PACKING_FEE}/>
          </div>
        </div>

        {/* Material detail */}
        <div className="card">
          <div className="card-header">
            <div>
              <h3 className="card-title">Top Konsumsi Material</h3>
              <p className="card-sub">Material paling banyak dipakai (nilai)</p>
            </div>
          </div>
          <div className="card-body">
            <table className="table" style={{ marginTop:-4 }}>
              <thead>
                <tr>
                  <th>Material</th>
                  <th style={{ textAlign:'right' }}>Pakai</th>
                  <th style={{ textAlign:'right' }}>Nilai</th>
                </tr>
              </thead>
              <tbody>
                {matBreakdown.slice(0,7).map(m => (
                  <tr key={m.sku}>
                    <td>
                      <strong style={{ display:'block' }}>{m.name}</strong>
                      <span style={{ fontSize:12, color:'var(--ink-500)' }}>{m.vendor}</span>
                    </td>
                    <td style={{ textAlign:'right' }}>{m.used30.toLocaleString('id-ID')} {m.unit}</td>
                    <td style={{ textAlign:'right', fontWeight:600 }}>{fmtRp(m.total)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* Per-channel running cost */}
      <div className="card" style={{ marginTop:18 }}>
        <div className="card-header">
          <div>
            <h3 className="card-title">Biaya per Marketplace</h3>
            <p className="card-sub">Resi yang sudah keluar gudang, terbagi per channel</p>
          </div>
        </div>
        <div className="card-body" style={{ paddingBottom:8 }}>
          <table className="table">
            <thead>
              <tr>
                <th>Marketplace</th>
                <th style={{ textAlign:'right' }}>Resi Keluar</th>
                <th style={{ textAlign:'right' }}>Jasa Packing</th>
                <th style={{ textAlign:'right' }}>Material (est.)</th>
                <th style={{ textAlign:'right' }}>Ongkir Ditanggung</th>
                <th style={{ textAlign:'right' }}>Total</th>
              </tr>
            </thead>
            <tbody>
              {[
                { mp:'shopee',    label:'Shopee',     orders: 712, ship: 1820000 },
                { mp:'tokopedia', label:'Tokopedia',  orders: 484, ship: 1240000 },
                { mp:'tiktok',    label:'TikTok Shop',orders: 386, ship:  840000 },
                { mp:'lazada',    label:'Lazada',     orders: 168, ship:  280000 },
                { mp:'blibli',    label:'Blibli',     orders:  92, ship:  100000 },
              ].map(r => {
                const packing = r.orders * 2000;
                const material = Math.round(r.orders * 3366);
                const total = packing + material + r.ship;
                return (
                  <tr key={r.mp}>
                    <td><strong>{r.label}</strong></td>
                    <td style={{ textAlign:'right' }}>{r.orders}</td>
                    <td style={{ textAlign:'right' }}>{fmtRp(packing)}</td>
                    <td style={{ textAlign:'right' }}>{fmtRp(material)}</td>
                    <td style={{ textAlign:'right' }}>{fmtRp(r.ship)}</td>
                    <td style={{ textAlign:'right', fontWeight:700 }}>{fmtRp(total)}</td>
                  </tr>
                );
              })}
              <tr style={{ background:'var(--surface-2)' }}>
                <td><strong>TOTAL</strong></td>
                <td style={{ textAlign:'right', fontWeight:700 }}>1.842</td>
                <td style={{ textAlign:'right', fontWeight:700 }}>{fmtRp(totalPacking)}</td>
                <td style={{ textAlign:'right', fontWeight:700 }}>{fmtRp(totalMaterial)}</td>
                <td style={{ textAlign:'right', fontWeight:700 }}>{fmtRp(totalShipping)}</td>
                <td style={{ textAlign:'right', fontWeight:800, color:'var(--brand-600)' }}>{fmtRp(totalPacking + totalMaterial + totalShipping)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function CostCard({ icon, label, value, sub, pct, tone }) {
  const colors = { brand:'var(--brand-500)', blue:'var(--blue)', amber:'var(--amber)', green:'var(--green)' };
  const I = Icon[icon];
  return (
    <div className="metric">
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
        <div style={{ width:36, height:36, borderRadius:9, background:`${colors[tone]}1f`, color:colors[tone], display:'grid', placeItems:'center' }}>
          <I/>
        </div>
        <span className="chip" style={{ background:`${colors[tone]}1a`, color:colors[tone], fontSize:11 }}>{pct}%</span>
      </div>
      <div className="metric-label">{label}</div>
      <div className="metric-value" style={{ fontSize:24 }}>{value}</div>
      <div style={{ fontSize:12, color:'var(--ink-500)', marginTop:3 }}>{sub}</div>
    </div>
  );
}

function PackingBreakdown({ packed, fee }) {
  // Days in current month (mock progressive)
  const days = [
    { d:'Minggu 1', n: 412 }, { d:'Minggu 2', n: 482 }, { d:'Minggu 3', n: 524 }, { d:'Minggu 4', n: 424 },
  ];
  const max = Math.max(...days.map(d=>d.n));
  return (
    <div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:18 }}>
        <Stat label="Total Resi Keluar" value={packed.toLocaleString('id-ID')} suffix="resi"/>
        <Stat label="Tarif per Packing"  value={fmtRp(fee)}/>
        <Stat label="Avg Resi/Hari"      value={Math.round(packed/30).toString()}/>
        <Stat label="Total Jasa Packing" value={fmtRp(packed*fee)} highlight/>
      </div>
      <div style={{ fontSize:12, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'.04em', marginBottom:8, fontWeight:600 }}>Trend per Minggu</div>
      <div style={{ display:'flex', gap:10, alignItems:'flex-end', height:120 }}>
        {days.map(d => (
          <div key={d.d} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}>
            <div style={{ fontSize:11, fontWeight:600 }}>{d.n}</div>
            <div style={{ width:'100%', height:`${(d.n/max)*100}%`, minHeight:6, background:'linear-gradient(180deg, var(--brand-400), var(--brand-600))', borderRadius:'5px 5px 0 0' }}/>
            <div style={{ fontSize:11, color:'var(--ink-500)' }}>{d.d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Stat({ label, value, suffix, highlight }) {
  return (
    <div style={{
      padding:'12px 14px', borderRadius:10,
      background: highlight ? 'var(--brand-50)' : 'var(--surface-2)',
      border: highlight ? '1px solid rgba(237,58,26,.15)' : '1px solid var(--border)'
    }}>
      <div style={{ fontSize:11.5, color:'var(--ink-500)', fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em' }}>{label}</div>
      <div style={{ fontSize:20, fontWeight:700, marginTop:4, color: highlight ? 'var(--brand-600)' : 'inherit' }}>
        {value} {suffix && <span style={{ fontSize:13, fontWeight:500, color:'var(--ink-500)' }}>{suffix}</span>}
      </div>
    </div>
  );
}

window.OperatingCostPage = OperatingCostPage;