/* global React, Icon, MP, MOCK, fmtRp, BarChart, Sparkline, Donut */
const { useState, useRef, useEffect } = React;

// ============== RETURNS ==============
const RETURN_STATUS = {
  review:    { label:"Menunggu Review",     chip:"chip-amber" },
  approved:  { label:"Disetujui",           chip:"chip-blue"  },
  received:  { label:"Diterima · Layak Jual",chip:"chip-green" },
  damaged:   { label:"Diterima · Rusak",    chip:"chip-rose"  },
  rejected:  { label:"Ditolak",             chip:"chip-rose"  },
};

function ReturnsPage() {
  const [tab, setTab] = useState('all');
  const [intakeOpen, setIntakeOpen] = useState(false);
  const [from, setFrom] = useState('');
  const [to, setTo] = useState('');
  const dateFiltered = MOCK.RETURNS.filter(r =>
    window.inRange(r._raw?.createdAt || r._raw?.receivedAt, from, to)
  );
  const list = tab === 'all' ? dateFiltered : dateFiltered.filter(r => r.status === tab);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Retur Barang</h1>
          <p className="page-sub">Scan resi saat barang retur tiba di gudang — periksa kondisi, kembalikan ke stok atau pisahkan sebagai rusak</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><Icon.download/> Ekspor</button>
          <button className="btn btn-primary" onClick={()=>setIntakeOpen(true)}>
            <Icon.scan/> Scan Retur Masuk
          </button>
        </div>
      </div>

      <div className="grid-4" style={{ marginBottom:18 }}>
        <Stat label="Total Retur 30hr" value="14" sub="Rp 1,8jt"/>
        <Stat label="Menunggu Diterima" value="3" tone="amber"/>
        <Stat label="Layak Jual · Kembali ke Stok" value="9" tone="green"/>
        <Stat label="Rusak · Tidak Bisa Dijual" value="2" tone="rose"/>
      </div>

      <div style={{ marginBottom:14, display:'flex', justifyContent:'flex-end' }}>
        <window.DateRangeFilter
          from={from} to={to}
          onChange={({ from, to }) => { setFrom(from); setTo(to); }}
        />
      </div>

      <div className="tabs">
        <button className={`tab ${tab==='all'?'active':''}`} onClick={()=>setTab('all')}>Semua<span className="count">{dateFiltered.length}</span></button>
        <button className={`tab ${tab==='review'?'active':''}`} onClick={()=>setTab('review')}>Menunggu<span className="count">{dateFiltered.filter(r=>r.status==='review').length}</span></button>
        <button className={`tab ${tab==='approved'?'active':''}`} onClick={()=>setTab('approved')}>Disetujui<span className="count">{dateFiltered.filter(r=>r.status==='approved').length}</span></button>
        <button className={`tab ${tab==='received'?'active':''}`} onClick={()=>setTab('received')}>Layak Jual<span className="count">{dateFiltered.filter(r=>r.status==='received').length}</span></button>
        <button className={`tab ${tab==='rejected'?'active':''}`} onClick={()=>setTab('rejected')}>Ditolak<span className="count">{dateFiltered.filter(r=>r.status==='rejected').length}</span></button>
      </div>

      <div className="card" style={{ overflow:'hidden' }}>
        <table className="table">
          <thead>
            <tr><th>ID Retur</th><th>Pesanan / Sumber</th><th>Channel</th><th>Pembeli</th><th>Barang</th><th>Alasan</th><th style={{textAlign:'right'}}>Nilai</th><th>Status</th><th></th></tr>
          </thead>
          <tbody>
            {list.map(r => (
              <tr key={r.id}>
                <td><span className="mono" style={{ fontWeight:600 }}>{r.id}</span></td>
                <td><span className="mono">{r.order}</span></td>
                <td><MP type={r.mp}/></td>
                <td>{r.buyer}</td>
                <td>{r.item}</td>
                <td><span style={{ fontSize:13 }}>{r.reason}</span></td>
                <td style={{textAlign:'right', fontWeight:600}}>{fmtRp(r.amount)}</td>
                <td><span className={`chip ${RETURN_STATUS[r.status].chip}`}><span className="chip-dot"/>{RETURN_STATUS[r.status].label}</span></td>
                <td>
                  {r.status === 'review' ?
                    <div style={{ display:'flex', gap:6 }}>
                      <button
                        className="btn btn-secondary btn-sm"
                        onClick={async () => {
                          try {
                            await window.Api.post(`/api/returns/${encodeURIComponent(r.id)}/decision`, { decision: 'reject' });
                            await window.Api.loadAppData();
                            window.location.reload();
                          } catch (e) { alert('Gagal: ' + e.message); }
                        }}
                      >Tolak</button>
                      <button
                        className="btn btn-primary btn-sm"
                        onClick={async () => {
                          try {
                            await window.Api.post(`/api/returns/${encodeURIComponent(r.id)}/decision`, { decision: 'approve' });
                            await window.Api.loadAppData();
                            window.location.reload();
                          } catch (e) { alert('Gagal: ' + e.message); }
                        }}
                      >Setujui</button>
                    </div> :
                    <button className="tb-icon-btn"><Icon.more/></button>
                  }
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {intakeOpen && <ReturnIntakeModal onClose={()=>setIntakeOpen(false)}/>}
    </div>
  );
}

// ============== RETURN INTAKE (SCAN) ==============
function ReturnIntakeModal({ onClose }) {
  // 3 steps: 1) scan/input, 2) inspect condition, 3) confirm
  const [step, setStep] = useState(1);
  const [code, setCode] = useState('');
  const [matched, setMatched] = useState(null);   // matched order/return record
  const [manual, setManual] = useState(false);
  const [condition, setCondition] = useState(null); // 'sellable' | 'damaged'
  const [reason, setReason] = useState('');
  const [note, setNote] = useState('');
  const inputRef = useRef(null);

  useEffect(() => { if (step === 1 && inputRef.current) inputRef.current.focus(); }, [step]);

  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [photos, setPhotos] = useState([]);

  const uploadPhoto = async (file) => {
    if (!file) return;
    try {
      const fd = new FormData();
      fd.append('file', file);
      const r = await fetch('/api/uploads', { method: 'POST', body: fd, credentials: 'include' });
      if (!r.ok) throw new Error('upload gagal');
      const data = await r.json();
      setPhotos(p => [...p, data.url]);
    } catch (e) {
      setError('Upload gagal: ' + e.message);
    }
  };

  const tryMatch = (val) => {
    const v = (val || '').trim().toUpperCase();
    if (!v) return;
    setError('');
    const order = (MOCK.ORDERS || []).find(o => o.id === v || o._raw?.trackingNo === v);
    const ret = (MOCK.RETURNS || []).find(r => r.id === v);
    if (order) {
      setMatched({
        scannedCode: v,
        orderId: order.id,
        order: order.id,
        buyer: order.buyer,
        item: order._raw?.items?.[0]?.name || '—',
        amount: order.total,
        mp: order.mp,
      });
      setStep(2);
    } else if (ret) {
      setMatched({ ...ret, scannedCode: v });
      setStep(2);
    } else if (v.startsWith('SMP') || v.startsWith('RET') || v.startsWith('JX') || v.startsWith('SPX')) {
      setMatched({ scannedCode: v });
      setStep(2);
    } else {
      setMatched({ unknown: true, scannedCode: v });
    }
  };

  const finish = async () => {
    setError('');
    setBusy(true);
    try {
      await window.Api.post('/api/returns/intake', {
        scanResi: matched?.scannedCode || code || undefined,
        orderId: matched?.orderId || undefined,
        source: matched?.mp || undefined,
        buyerName: matched?.buyer || undefined,
        itemName: matched?.item || undefined,
        amount: matched?.amount || undefined,
        condition,
        reason: reason || undefined,
        note: note || undefined,
        photos: photos.length > 0 ? photos : undefined,
      });
      await window.Api.loadAppData();
      setStep(3);
      setTimeout(() => onClose(), 1600);
    } catch (e) {
      setError(e.message || 'Gagal menyimpan retur');
      setBusy(false);
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ maxWidth: 680 }} onClick={e=>e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-500)' }}>
              Penerimaan Retur · Langkah {step} dari 3
            </div>
            <h2 style={{ margin:'4px 0 0', fontSize:20, fontWeight:800 }}>
              {step === 1 && 'Scan resi atau input manual'}
              {step === 2 && 'Periksa kondisi barang'}
              {step === 3 && 'Tersimpan ✓'}
            </h2>
          </div>
          <button className="tb-icon-btn" onClick={onClose}><Icon.x/></button>
        </div>

        {/* progress */}
        <div style={{ height:3, background:'var(--surface-2)' }}>
          <div style={{ width:`${(step/3)*100}%`, height:'100%', background:'var(--brand-500)', transition:'width .25s' }}/>
        </div>

        {/* STEP 1 — SCAN */}
        {step === 1 && (
          <div style={{ padding:'24px 22px' }}>
            {!manual && (
              <div style={{
                border:'2px dashed var(--brand-300)', borderRadius:14,
                background:'var(--brand-50)', padding:'30px 22px',
                textAlign:'center'
              }}>
                <div style={{ width:64, height:64, borderRadius:16, background:'white', display:'inline-grid', placeItems:'center', marginBottom:12, color:'var(--brand-600)' }}>
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M21 7V5a2 2 0 0 0-2-2h-2"/><path d="M3 17v2a2 2 0 0 0 2 2h2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 8v8M11 8v8M15 8v8M19 8v8"/></svg>
                </div>
                <div style={{ fontSize:15, fontWeight:700, marginBottom:4 }}>Arahkan scanner ke resi paket</div>
                <div style={{ fontSize:12.5, color:'var(--ink-500)', marginBottom:16 }}>Sistem akan mencocokkan dengan pesanan asal otomatis</div>
                <input
                  ref={inputRef}
                  className="input"
                  style={{ maxWidth:340, margin:'0 auto', textAlign:'center', fontFamily:'var(--font-mono)' }}
                  placeholder="atau ketik no. resi…"
                  value={code}
                  onChange={e=>setCode(e.target.value)}
                  onKeyDown={e=> e.key === 'Enter' && tryMatch(code)}
                />
                <div style={{ fontSize:12, color:'var(--ink-500)', marginTop:14 }}>
                  Tidak ada resi? <button className="link-btn" onClick={()=>setManual(true)}>Input manual →</button>
                </div>

                {matched && matched.unknown && (
                  <div style={{ marginTop:14, padding:'10px 12px', background:'var(--amber-bg)', borderRadius:8, fontSize:13, color:'var(--amber)', textAlign:'left', display:'flex', gap:8 }}>
                    <Icon.warn/>
                    <div>Resi <strong>{matched.scannedCode}</strong> tidak cocok dengan pesanan apapun. Silakan coba lagi atau input manual.</div>
                  </div>
                )}
              </div>
            )}

            {manual && (
              <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
                <Field label="No. Resi / ID Pesanan (opsional)">
                  <input className="input" placeholder="Mis. SMP-2812 atau JX1234567" value={code} onChange={e=>setCode(e.target.value)}/>
                </Field>
                <Field label="Channel asal">
                  <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                    {['shopee','tokopedia','tiktok','lazada','manual'].map(m => (
                      <button key={m} className="pick" style={{ flex:'0 0 auto', padding:'8px 12px' }}>
                        {m === 'manual' ? <><Icon.plus/> Manual / WA / IG</> : <MP type={m}/>}
                      </button>
                    ))}
                  </div>
                </Field>
                <Field label="Pembeli">
                  <input className="input" placeholder="Nama pembeli (jika diketahui)"/>
                </Field>
                <Field label="Pilih SKU yang diretur">
                  <select className="input">
                    <option>— Cari SKU —</option>
                    {MOCK.PRODUCTS.map(p => <option key={p.sku}>{p.sku} · {p.name}</option>)}
                  </select>
                </Field>
                <button className="btn btn-primary" onClick={()=> setStep(2) || setMatched({ manual:true, item:'Manual entry' })}>
                  Lanjut → Periksa Kondisi
                </button>
                <button className="link-btn" onClick={()=>setManual(false)} style={{ alignSelf:'center' }}>← Kembali ke scan</button>
              </div>
            )}
          </div>
        )}

        {/* STEP 2 — INSPECT */}
        {step === 2 && matched && (
          <div style={{ padding:'20px 22px' }}>
            <div style={{ padding:'12px 14px', background:'var(--surface-2)', borderRadius:10, marginBottom:16, display:'flex', gap:12, alignItems:'center' }}>
              <div style={{ width:42, height:42, borderRadius:8, background:'var(--brand-50)', display:'grid', placeItems:'center', color:'var(--brand-600)', flexShrink:0 }}>
                <Icon.box/>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13, fontWeight:700 }}>
                  {matched.manual ? 'Retur input manual' : (matched.item || 'Mug Keramik Polos 350ml')}
                </div>
                <div style={{ fontSize:12, color:'var(--ink-500)', display:'flex', gap:10, marginTop:2 }}>
                  <span className="mono">{matched.scannedCode || matched.id || 'RET-NEW'}</span>
                  {!matched.manual && matched.order && <><span>·</span><span className="mono">{matched.order}</span></>}
                  {!matched.manual && matched.buyer && <><span>·</span><span>{matched.buyer}</span></>}
                </div>
              </div>
              <span className={`chip ${matched.manual ? 'chip-blue' : 'chip-green'}`}>
                <span className="chip-dot"/>{matched.manual ? 'Manual' : 'Cocok'}
              </span>
            </div>

            <div style={{ fontSize:13, fontWeight:700, marginBottom:10 }}>Kondisi barang</div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:16 }}>
              <button
                onClick={()=>setCondition('sellable')}
                style={{
                  textAlign:'left', padding:'16px 16px',
                  border: condition==='sellable' ? '2px solid var(--green)' : '1px solid var(--border-strong)',
                  background: condition==='sellable' ? 'var(--green-bg)' : 'var(--surface)',
                  borderRadius:12, cursor:'pointer', transition:'all .15s'
                }}
              >
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
                  <span style={{ width:24, height:24, borderRadius:'50%', background:'var(--green)', color:'white', display:'grid', placeItems:'center' }}>
                    <Icon.check/>
                  </span>
                  <strong style={{ fontSize:14 }}>Layak Jual</strong>
                </div>
                <div style={{ fontSize:12.5, color:'var(--ink-500)', lineHeight:1.5 }}>
                  Kondisi mulus, segel/kemasan utuh. Stok akan otomatis kembali ke gudang &amp; sinkron ke marketplace.
                </div>
              </button>
              <button
                onClick={()=>setCondition('damaged')}
                style={{
                  textAlign:'left', padding:'16px 16px',
                  border: condition==='damaged' ? '2px solid var(--rose)' : '1px solid var(--border-strong)',
                  background: condition==='damaged' ? 'var(--rose-bg)' : 'var(--surface)',
                  borderRadius:12, cursor:'pointer', transition:'all .15s'
                }}
              >
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
                  <span style={{ width:24, height:24, borderRadius:'50%', background:'var(--rose)', color:'white', display:'grid', placeItems:'center' }}>
                    <Icon.warn/>
                  </span>
                  <strong style={{ fontSize:14 }}>Rusak</strong>
                </div>
                <div style={{ fontSize:12.5, color:'var(--ink-500)', lineHeight:1.5 }}>
                  Pecah, robek, tidak lengkap, atau bekas pakai. Dipisah ke rak rusak — tidak masuk stok jual.
                </div>
              </button>
            </div>

            <Field label="Alasan retur dari pembeli">
              <select className="input" value={reason} onChange={e=>setReason(e.target.value)}>
                <option value="">— Pilih alasan —</option>
                <option>Pecah / rusak saat diterima</option>
                <option>Ukuran / varian tidak sesuai</option>
                <option>Berbeda dari deskripsi</option>
                <option>Berubah pikiran</option>
                <option>Salah kirim</option>
                <option>Lainnya</option>
              </select>
            </Field>

            <div style={{ height:12 }}/>

            <Field label="Catatan tim gudang (opsional)">
              <textarea className="input" rows="2" placeholder="Mis. Bagian gagang mug retak, masih bisa dipajang display." value={note} onChange={e=>setNote(e.target.value)}/>
            </Field>

            <div style={{ marginTop:14 }}>
              <div style={{ fontSize:12, fontWeight:600, color:'var(--ink-700)', marginBottom:8 }}>
                Foto bukti kondisi barang ({photos.length})
              </div>
              <div style={{ display:'flex', flexWrap:'wrap', gap:8, alignItems:'center' }}>
                {photos.map((url, idx) => (
                  <a key={idx} href={url} target="_blank" rel="noopener">
                    <img src={url} alt="bukti" style={{ width:64, height:64, objectFit:'cover', borderRadius:8, border:'1px solid var(--border)' }}/>
                  </a>
                ))}
                <label className="btn btn-secondary btn-sm" style={{ cursor:'pointer' }}>
                  <Icon.plus/> Upload Foto
                  <input type="file" accept="image/*" style={{ display:'none' }} onChange={e => uploadPhoto(e.target.files?.[0])}/>
                </label>
              </div>
            </div>

            {error && (
              <div style={{ marginTop:12, padding:'8px 12px', background:'#fee2e2', color:'#991b1b', fontSize:12, borderRadius:8 }}>{error}</div>
            )}

            <div className="modal-foot" style={{ margin:'18px -22px -20px', borderRadius:0 }}>
              <button className="btn btn-secondary" onClick={()=>setStep(1)} disabled={busy}>← Kembali</button>
              <button
                className="btn btn-primary"
                disabled={!condition || busy}
                style={{ opacity: (condition && !busy) ? 1 : 0.5, pointerEvents: (condition && !busy) ? 'auto' : 'none' }}
                onClick={finish}
              >
                {busy ? 'Menyimpan…' : <>Simpan &amp; {condition === 'sellable' ? 'Kembalikan ke Stok' : 'Pisahkan ke Rak Rusak'}</>}
              </button>
            </div>
          </div>
        )}

        {/* STEP 3 — SUCCESS */}
        {step === 3 && (
          <div style={{ padding:'40px 22px', textAlign:'center' }}>
            <div style={{
              width:72, height:72, borderRadius:'50%',
              background: condition === 'damaged' ? 'var(--rose-bg)' : 'var(--green-bg)',
              color: condition === 'damaged' ? 'var(--rose)' : 'var(--green)',
              display:'inline-grid', placeItems:'center', marginBottom:14
            }}>
              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
            </div>
            <div style={{ fontSize:16, fontWeight:800 }}>Retur tersimpan</div>
            <div style={{ fontSize:13, color:'var(--ink-500)', marginTop:6 }}>
              {condition === 'sellable'
                ? 'Stok dikembalikan ke gudang & sinkron ke semua marketplace.'
                : 'Barang dipisah ke rak rusak. Tidak masuk stok jual.'}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display:'flex', flexDirection:'column', gap:6 }}>
      <span style={{ fontSize:12, fontWeight:600, color:'var(--ink-700)' }}>{label}</span>
      {children}
    </label>
  );
}

// ============== REPORTS ==============
function ReportsPage() {
  const [from, setFrom] = useState('');
  const [to, setTo] = useState('');
  const sales = [38, 42, 51, 48, 65, 72, 68, 79, 85, 92, 105, 118, 124, 142];
  const days = ["16","17","18","19","20","21","22","23","24","25","26","27","28","29"];

  // Compute revenue from filtered orders if a range is set.
  const ordersInRange = (MOCK.ORDERS || []).filter(o =>
    window.inRange(o._raw?.shippedAt || o._raw?.createdAt, from, to)
  );
  const dateActive = !!(from || to);
  const revInRange = ordersInRange.reduce((s, o) => s + Number(o.total || 0), 0);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Laporan & Analitik</h1>
          <p className="page-sub">Pergerakan uang, pendapatan, dan biaya operasional gudang Anda</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/> Unduh PDF</button>
        </div>
      </div>

      <div className="grid-4" style={{ marginBottom:18 }}>
        {dateActive ? (
          <>
            <Stat label="Pesanan (rentang)" value={ordersInRange.length.toString()} sub={`${from || '…'} → ${to || '…'}`}/>
            <Stat label="Pendapatan (rentang)" value={fmtRp(revInRange)} sub={`${ordersInRange.filter(o => ['shipped','delivered'].includes(o.status)).length} dikirim`} tone="green"/>
            <Stat label="Avg Order Value" value={fmtRp(Math.round(revInRange / Math.max(1, ordersInRange.length)))}/>
            <Stat label="Retur dalam rentang" value={(MOCK.RETURNS || []).filter(r => window.inRange(r._raw?.createdAt, from, to)).length.toString()} tone="amber"/>
          </>
        ) : (
          <>
            <Stat label="Pendapatan Kotor" value="Rp 287jt" sub="↑ 18% MoM" tone="green"/>
            <Stat label="Biaya Marketplace" value="Rp 21jt" sub="7.3% dari kotor"/>
            <Stat label="Biaya Pengiriman" value="Rp 38jt" sub="Subsidi pembeli 62%"/>
            <Stat label="Pendapatan Bersih" value="Rp 228jt" sub="↑ 16% MoM" tone="green"/>
          </>
        )}
      </div>

      <div className="card" style={{ marginBottom:18 }}>
        <div className="card-header">
          <div>
            <h3 className="card-title">Pendapatan Harian</h3>
            <p className="card-sub">14 hari terakhir · termasuk semua marketplace</p>
          </div>
          <div className="segmented">
            <button className="active">Bersih</button>
            <button>Kotor</button>
          </div>
        </div>
        <div className="card-body"><BarChart data={sales} labels={days} height={240}/></div>
      </div>

      <div className="grid-2" style={{ gridTemplateColumns:'1fr 1fr', gap:18 }}>
        <div className="card">
          <div className="card-header"><h3 className="card-title">Top Produk Terlaris</h3></div>
          <table className="table">
            <thead><tr><th>Produk</th><th style={{textAlign:'right'}}>Terjual</th><th style={{textAlign:'right'}}>Pendapatan</th></tr></thead>
            <tbody>
              {MOCK.PRODUCTS.slice().sort((a,b)=>b.sold30-a.sold30).slice(0,6).map(p => (
                <tr key={p.sku}>
                  <td>
                    <div style={{ fontWeight:600, fontSize:13 }}>{p.name}</div>
                    <div className="mono" style={{ fontSize:11, color:'var(--ink-500)' }}>{p.sku}</div>
                  </td>
                  <td style={{textAlign:'right', fontWeight:600}}>{p.sold30}</td>
                  <td style={{textAlign:'right', fontWeight:600}}>{fmtRp(p.sold30*p.price)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-header"><h3 className="card-title">Distribusi Channel</h3></div>
          <div className="card-body" style={{ display:'flex', alignItems:'center', gap:24 }}>
            <Donut size={160} segments={[
              { color:"#ee4d2d", value:38 },
              { color:"#03ac0e", value:27 },
              { color:"#000000", value:19 },
              { color:"#0f146d", value:11 },
              { color:"#0095da", value:5 },
            ]}/>
            <div style={{ flex:1, display:'flex', flexDirection:'column', gap:10 }}>
              {[
                { mp:"shopee", v:"Rp 109jt", p:"38%" },
                { mp:"tokopedia", v:"Rp 77jt", p:"27%" },
                { mp:"tiktok", v:"Rp 55jt", p:"19%" },
                { mp:"lazada", v:"Rp 32jt", p:"11%" },
                { mp:"blibli", v:"Rp 14jt", p:"5%" },
              ].map(r => (
                <div key={r.mp}>
                  <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:13 }}>
                    <MP type={r.mp}/>
                    <span style={{ marginLeft:'auto', fontWeight:700 }}>{r.p}</span>
                  </div>
                  <div style={{ fontSize:12, color:'var(--ink-500)', marginLeft:28 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value, sub, tone }) {
  const color = { green:'var(--green)', rose:'var(--rose)', amber:'var(--amber)' }[tone] || 'var(--ink-900)';
  return (
    <div className="metric">
      <div className="metric-label">{label}</div>
      <div className="metric-value" style={{ color }}>{value}</div>
      {sub && <div style={{ fontSize:12, color:'var(--ink-500)', marginTop:4 }}>{sub}</div>}
    </div>
  );
}

window.ReturnsPage = ReturnsPage;
window.ReportsPage = ReportsPage;