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

// ============== MATERIALS PAGE ==============
function MaterialsPage() {
  const [tab, setTab] = useStateMat('stock');
  const [from, setFrom] = useStateMat('');
  const [to, setTo] = useStateMat('');
  const [poOpen, setPoOpen] = useStateMat(false);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Bahan Material</h1>
          <p className="page-sub">Stok kardus, bubble wrap, label, dan material packing lainnya</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><Icon.download/> Ekspor</button>
          <button className="btn btn-primary" onClick={() => setPoOpen(true)}><Icon.plus/> Pesan Material</button>
        </div>
      </div>

      <div className="grid-4" style={{ marginBottom: 18 }}>
        <SmallStat label="Total Nilai Stok"     value="Rp 8,4jt" sub="10 jenis material" tone="brand"/>
        <SmallStat label="Material Stok Rendah" value="2"        sub="Kardus L · Filler" tone="amber"/>
        <SmallStat label="Pemakaian Bulan Ini"  value="Rp 6,2jt" sub="dari 1.842 packing" tone="blue"/>
        <SmallStat label="Avg Material/Packing" value="Rp 3.366" sub="↓ 4% vs bulan lalu" tone="green"/>
      </div>

      {(tab === 'po' || tab === 'stock') && (
        <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==='stock'?'active':''}`} onClick={()=>setTab('stock')}>Stok Material <span className="count">{(MOCK.MATERIALS||[]).length}</span></button>
        <button className={`tab ${tab==='po'?'active':''}`}    onClick={()=>setTab('po')}>Pembelian (PO) <span className="count">{(MOCK.MAT_POS||[]).length}</span></button>
        <button className={`tab ${tab==='usage'?'active':''}`} onClick={()=>setTab('usage')}>Pemakaian</button>
      </div>

      {tab === 'stock' && <MaterialsStock from={from} to={to}/>}
      {tab === 'po' && <MaterialsPO from={from} to={to}/>}
      {tab === 'usage' && <MaterialsUsage/>}

      {poOpen && <NewPOModal onClose={() => setPoOpen(false)}/>}
    </div>
  );
}

function MaterialsStock({ from, to }) {
  const filtered = MOCK.MATERIALS.filter(m =>
    window.inRange(m.lastInAt, from, to)
  );
  return (
    <div className="card">
      <table className="table">
        <thead>
          <tr>
            <th>SKU Material</th>
            <th>Nama</th>
            <th>Vendor</th>
            <th style={{textAlign:'right'}}>Stok</th>
            <th style={{textAlign:'right'}}>Reorder</th>
            <th style={{textAlign:'right'}}>Harga/Unit</th>
            <th style={{textAlign:'right'}}>Pakai 30 Hari</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {filtered.map(m => {
            const pct = Math.min(100, (m.stock / (m.reorder * 4)) * 100);
            const lowStock = m.stock <= m.reorder;
            return (
              <tr key={m.sku}>
                <td><span className="mono">{m.sku}</span></td>
                <td><strong>{m.name}</strong></td>
                <td style={{ fontSize:13, color:'var(--ink-500)' }}>{m.vendor}</td>
                <td style={{textAlign:'right'}}>
                  <div style={{ display:'flex', alignItems:'center', gap:10, justifyContent:'flex-end' }}>
                    <span style={{ display:'inline-block', width:60, height:5, borderRadius:3, background:'var(--surface-2)', overflow:'hidden' }}>
                      <span style={{ display:'block', height:'100%', width:`${pct}%`, background: lowStock ? 'var(--amber)' : 'var(--brand-500)' }}/>
                    </span>
                    <strong style={{ minWidth:60, textAlign:'right' }}>{m.stock.toLocaleString('id-ID')} {m.unit}</strong>
                  </div>
                </td>
                <td style={{textAlign:'right', color:'var(--ink-500)', fontSize:12.5}}>{m.reorder} {m.unit}</td>
                <td style={{textAlign:'right'}}>{fmtRp(m.cost)}</td>
                <td style={{textAlign:'right', fontSize:13}}>{m.used30.toLocaleString('id-ID')} {m.unit}</td>
                <td>
                  {lowStock
                    ? <span className="chip chip-amber"><span className="chip-dot"/>Reorder</span>
                    : <span className="chip chip-green"><span className="chip-dot"/>Aman</span>}
                </td>
                <td><button className="btn btn-secondary btn-sm">PO</button></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function MaterialsPO({ from, to }) {
  const filtered = MOCK.MAT_POS.filter(p =>
    window.inRange(p.poDate, from, to)
  );
  return (
    <div className="card">
      <table className="table">
        <thead>
          <tr>
            <th>No. PO</th>
            <th>Tanggal</th>
            <th>Vendor</th>
            <th style={{textAlign:'right'}}>Item</th>
            <th style={{textAlign:'right'}}>Total</th>
            <th>Status</th>
            <th>Pembayaran</th>
            <th>Jatuh Tempo</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {filtered.map(p => (
            <tr key={p.id}>
              <td><span className="mono">{p.id}</span></td>
              <td>{p.date}</td>
              <td>{p.vendor}</td>
              <td style={{textAlign:'right'}}>{p.items}</td>
              <td style={{textAlign:'right', fontWeight:600}}>{fmtRp(p.total)}</td>
              <td>
                {p.status === 'received' && <span className="chip chip-green"><span className="chip-dot"/>Diterima</span>}
                {p.status === 'in-transit' && <span className="chip chip-blue"><span className="chip-dot"/>Dalam perjalanan</span>}
                {p.status === 'draft' && <span className="chip"><span className="chip-dot"/>Draft</span>}
              </td>
              <td>
                {p.paid
                  ? <span className="chip chip-green"><span className="chip-dot"/>Lunas</span>
                  : <span className="chip chip-amber"><span className="chip-dot"/>Belum Lunas</span>}
              </td>
              <td style={{ fontSize:13, color:'var(--ink-500)' }}>{p.due}</td>
              <td>
                {p.status !== 'received' ? (
                  <button
                    className="btn btn-primary btn-sm"
                    onClick={async () => {
                      const paid = confirm('Sudah lunas? OK = lunas, Cancel = belum');
                      try {
                        await window.Api.post(`/api/materials/po/${encodeURIComponent(p.id)}/receive`, { paid });
                        await window.Api.loadAppData();
                        window.location.reload();
                      } catch (e) { alert('Gagal: ' + e.message); }
                    }}
                  >Terima</button>
                ) : (
                  <button className="btn btn-secondary btn-sm">Detail</button>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function MaterialsUsage() {
  // material usage by SKU, top 6
  const usage = [...MOCK.MATERIALS].sort((a,b) => (b.used30*b.cost) - (a.used30*a.cost)).slice(0,8);
  const max = Math.max(...usage.map(u => u.used30 * u.cost));
  return (
    <div className="card">
      <div className="card-header">
        <div>
          <h3 className="card-title">Konsumsi Material 30 Hari</h3>
          <p className="card-sub">Diurutkan dari yang paling tinggi nilainya</p>
        </div>
      </div>
      <div className="card-body" style={{ display:'flex', flexDirection:'column', gap:14 }}>
        {usage.map(u => {
          const v = u.used30 * u.cost;
          const pct = (v/max)*100;
          return (
            <div key={u.sku}>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize:13, marginBottom:6 }}>
                <div>
                  <strong>{u.name}</strong>
                  <span style={{ color:'var(--ink-500)', marginLeft:8 }}>· {u.used30.toLocaleString('id-ID')} {u.unit} × {fmtRp(u.cost)}</span>
                </div>
                <strong>{fmtRp(v)}</strong>
              </div>
              <div style={{ height:8, borderRadius:4, background:'var(--surface-2)', overflow:'hidden' }}>
                <div style={{ height:'100%', width:`${pct}%`, background:'linear-gradient(90deg, var(--brand-400), var(--brand-600))' }}/>
              </div>
            </div>
          );
        })}
        <div style={{ marginTop:8, padding:'14px 16px', borderTop:'1px solid var(--border)', display:'flex', justifyContent:'space-between' }}>
          <strong>Total Material 30 Hari</strong>
          <strong style={{ fontSize:18, color:'var(--brand-600)' }}>Rp 6.218.400</strong>
        </div>
      </div>
    </div>
  );
}

function SmallStat({ label, value, sub, tone='brand' }) {
  const colors = {
    brand: 'var(--brand-500)',
    amber: 'var(--amber)',
    blue:  'var(--blue)',
    green: 'var(--green)',
  };
  return (
    <div className="metric">
      <div className="metric-label">{label}</div>
      <div className="metric-value">{value}</div>
      <div style={{ fontSize:12, color: colors[tone], fontWeight:600, marginTop:4 }}>{sub}</div>
    </div>
  );
}

/* ============== NEW PO MODAL ============== */
function NewPOModal({ onClose }) {
  const materials = MOCK.MATERIALS || [];
  const [vendor, setVendor] = useStateMat('');
  const [poDate, setPoDate] = useStateMat(new Date().toISOString().slice(0,10));
  const [dueDate, setDueDate] = useStateMat('');
  const [items, setItems] = useStateMat([]);
  const [busy, setBusy] = useStateMat(false);
  const [error, setError] = useStateMat('');

  const addItem = () => {
    const first = materials[0];
    if (!first) return;
    setItems([...items, {
      materialId: first.id,
      sku: first.sku,
      name: first.name,
      qty: 1,
      unitCost: first.cost,
    }]);
  };
  const updateItem = (idx, patch) => setItems(items.map((it, i) => i === idx ? { ...it, ...patch } : it));
  const removeItem = (idx) => setItems(items.filter((_, i) => i !== idx));

  const total = items.reduce((s, it) => s + (Number(it.qty) || 0) * (Number(it.unitCost) || 0), 0);

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    if (!vendor.trim()) { setError('Nama vendor wajib'); return; }
    if (items.length === 0) { setError('Tambahkan minimal 1 item'); return; }
    setBusy(true);
    try {
      await window.Api.post('/api/materials/po', {
        vendor,
        poDate,
        dueDate: dueDate || undefined,
        items: items.map(it => ({
          materialId: it.materialId,
          qty: Number(it.qty),
          unitCost: Number(it.unitCost),
        })),
      });
      await window.Api.loadAppData();
      onClose();
      window.location.reload();
    } catch (err) {
      setError(err.body?.message || err.message || 'Gagal');
      setBusy(false);
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ maxWidth: 760 }} onClick={e=>e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'.06em', color:'var(--ink-500)' }}>Pesanan Material Baru</div>
            <h2 style={{ margin:'4px 0 0', fontSize:20, fontWeight:800 }}>Buat PO ke Vendor</h2>
          </div>
          <button className="tb-icon-btn" onClick={onClose}><Icon.x/></button>
        </div>
        <form onSubmit={submit} style={{ padding:'20px 22px', display:'flex', flexDirection:'column', gap:14 }}>
          {error && <div style={{ padding:'10px 14px', background:'#fee2e2', color:'#991b1b', borderRadius:8, fontSize:13 }}>{error}</div>}

          <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:12 }}>
            <FieldMat label="Nama Vendor *">
              <input className="input" value={vendor} onChange={e=>setVendor(e.target.value)} placeholder="PT Karton Sejahtera" required/>
            </FieldMat>
            <FieldMat label="Tanggal PO">
              <input className="input" type="date" value={poDate} onChange={e=>setPoDate(e.target.value)} required/>
            </FieldMat>
            <FieldMat label="Jatuh Tempo">
              <input className="input" type="date" value={dueDate} onChange={e=>setDueDate(e.target.value)}/>
            </FieldMat>
          </div>

          <div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
              <strong style={{ fontSize:13 }}>Item ({items.length})</strong>
              <button type="button" className="btn btn-secondary btn-sm" onClick={addItem}><Icon.plus/> Tambah Item</button>
            </div>
            {items.length === 0 ? (
              <div style={{ padding:20, textAlign:'center', color:'var(--ink-500)', background:'var(--surface-2)', borderRadius:10, fontSize:13 }}>
                Belum ada item. Klik <strong>Tambah Item</strong> untuk pilih material yang dipesan.
              </div>
            ) : (
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {items.map((it, idx) => (
                  <div key={idx} style={{ display:'grid', gridTemplateColumns:'2.5fr 90px 130px 110px 32px', gap:6, alignItems:'center' }}>
                    <select
                      className="input"
                      value={it.materialId}
                      onChange={(e) => {
                        const m = materials.find(x => x.id === e.target.value);
                        if (m) updateItem(idx, { materialId: m.id, sku: m.sku, name: m.name, unitCost: m.cost });
                      }}
                    >
                      {materials.map(m => <option key={m.id} value={m.id}>{m.sku} — {m.name}</option>)}
                    </select>
                    <input className="input" type="number" min="1" value={it.qty} onChange={e=>updateItem(idx, { qty: e.target.value })} placeholder="Qty"/>
                    <input className="input" type="number" min="0" value={it.unitCost} onChange={e=>updateItem(idx, { unitCost: e.target.value })} placeholder="Harga"/>
                    <div style={{ textAlign:'right', fontSize:13, fontWeight:600, padding:'8px 0' }}>
                      {fmtRp((Number(it.qty)||0) * (Number(it.unitCost)||0))}
                    </div>
                    <button type="button" className="tb-icon-btn" onClick={() => removeItem(idx)}><Icon.x/></button>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div style={{ padding:'14px 16px', background:'var(--brand-50)', borderRadius:10, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div style={{ fontSize:12, color:'var(--ink-600)', fontWeight:600 }}>Total PO</div>
            <div style={{ fontSize:20, fontWeight:800, color:'var(--brand-600)' }}>{fmtRp(total)}</div>
          </div>

          <div className="modal-foot" style={{ margin:'4px -22px -20px' }}>
            <button type="button" className="btn btn-secondary" onClick={onClose} disabled={busy}>Batal</button>
            <button type="submit" className="btn btn-primary" disabled={busy}>{busy ? 'Menyimpan…' : 'Simpan PO Draft'}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function FieldMat({ 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>
  );
}

window.MaterialsPage = MaterialsPage;