/* global React, Icon, MP, MOCK, fmtRp, STATUS_META */
const { useState } = React;

// ============== ORDERS PAGE ==============
function OrdersPage({ openPacking }) {
  const [tab, setTab] = useState('all');
  const [selected, setSelected] = useState(new Set());
  const [search, setSearch] = useState('');
  const [mp, setMp] = useState('');
  const [store, setStore] = useState('');
  const [from, setFrom] = useState('');
  const [to, setTo] = useState('');

  // Apply all filters first, then status tab last (for accurate counts in tabs).
  const baseFiltered = MOCK.ORDERS.filter((o) => {
    if (mp && o.mp !== mp) return false;
    if (store && o.store !== store) return false;
    if (!window.inRange(o._raw?.createdAt || o._raw?.shippedAt, from, to)) return false;
    if (search) {
      const s = search.toLowerCase();
      if (
        !o.id.toLowerCase().includes(s) &&
        !(o.buyer || '').toLowerCase().includes(s) &&
        !(o._raw?.trackingNo || '').toLowerCase().includes(s)
      ) return false;
    }
    return true;
  });

  const counts = baseFiltered.reduce((a, o) => { a[o.status] = (a[o.status]||0)+1; return a; }, {});
  const filtered = tab === 'all' ? baseFiltered : baseFiltered.filter(o => o.status === tab);

  // Unique store names from current data (for store dropdown)
  const storeOptions = [...new Set(MOCK.ORDERS.map(o => o.store).filter(Boolean))];

  const toggle = (id) => {
    const s = new Set(selected);
    s.has(id) ? s.delete(id) : s.add(id);
    setSelected(s);
  };
  const allSel = filtered.length > 0 && filtered.every(o => selected.has(o.id));
  const toggleAll = () => {
    if (allSel) setSelected(new Set());
    else setSelected(new Set(filtered.map(o => o.id)));
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Pesanan</h1>
          <p className="page-sub">Kelola seluruh pesanan dari semua marketplace dalam satu tempat</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><Icon.printer/> Cetak Resi Massal</button>
          <button className="btn btn-primary" onClick={openPacking}><Icon.scan/> Mulai Packing</button>
        </div>
      </div>

      <div className="tabs">
        <Tab active={tab==='all'}      onClick={()=>setTab('all')}      label="Semua" count={baseFiltered.length}/>
        <Tab active={tab==='new'}      onClick={()=>setTab('new')}      label="Baru" count={counts.new||0}/>
        <Tab active={tab==='packing'}  onClick={()=>setTab('packing')}  label="Packing" count={counts.packing||0}/>
        <Tab active={tab==='ready'}    onClick={()=>setTab('ready')}    label="Siap Kirim" count={counts.ready||0}/>
        <Tab active={tab==='shipped'}  onClick={()=>setTab('shipped')}  label="Dikirim" count={counts.shipped||0}/>
        <Tab active={tab==='delivered'}onClick={()=>setTab('delivered')}label="Selesai" count={counts.delivered||0}/>
        <Tab active={tab==='issue'}    onClick={()=>setTab('issue')}    label="Bermasalah" count={counts.issue||0}/>
      </div>

      {/* Filter bar */}
      <div className="card" style={{ marginBottom:14, padding:'12px 14px', display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
        <div className="input" style={{ flex:1, minWidth:240 }}>
          <Icon.search/>
          <input
            placeholder="Cari ID pesanan, nama pembeli, atau resi…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
        <div className="input" style={{ width:160 }}>
          <select value={mp} onChange={(e) => setMp(e.target.value)}>
            <option value="">Semua marketplace</option>
            <option value="shopee">Shopee</option>
            <option value="tokopedia">Tokopedia</option>
            <option value="tiktok">TikTok Shop</option>
            <option value="lazada">Lazada</option>
            <option value="blibli">Blibli</option>
            <option value="manual">Manual</option>
          </select>
        </div>
        <div className="input" style={{ width:160 }}>
          <select value={store} onChange={(e) => setStore(e.target.value)}>
            <option value="">Semua toko</option>
            {storeOptions.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
        </div>
        <window.DateRangeFilter
          from={from} to={to}
          onChange={({ from, to }) => { setFrom(from); setTo(to); }}
        />
      </div>

      {/* Bulk action bar */}
      {selected.size > 0 && (
        <div style={{
          background:'var(--ink-900)', color:'white',
          borderRadius:'var(--r-md)', padding:'10px 16px',
          display:'flex', alignItems:'center', gap:14,
          marginBottom:14
        }}>
          <strong>{selected.size}</strong> pesanan dipilih
          <button
            className="btn btn-sm"
            style={{ background:'rgba(255,255,255,0.1)', color:'white' }}
            onClick={() => {
              const orders = MOCK.ORDERS.filter(o => selected.has(o.id));
              window.printResiBulk(orders);
            }}
          ><Icon.printer/> Cetak Resi</button>
          <button
            className="btn btn-sm"
            style={{ background:'rgba(255,255,255,0.1)', color:'white' }}
            onClick={async () => {
              try {
                await Promise.all([...selected].map((id) =>
                  window.Api.patch(`/api/orders/${encodeURIComponent(id)}/status`, { status: 'ready' })
                ));
                await window.Api.loadAppData();
                setSelected(new Set());
                window.location.reload();
              } catch (e) { alert('Gagal: ' + e.message); }
            }}
          >Tandai siap kirim</button>
          <button className="btn btn-sm" style={{ background:'rgba(255,255,255,0.1)', color:'white' }} onClick={openPacking}>Mulai Packing</button>
          <button style={{ marginLeft:'auto', color:'white', opacity:0.7 }} onClick={()=>setSelected(new Set())}><Icon.x/></button>
        </div>
      )}

      <div className="card" style={{ overflow:'hidden' }}>
        <table className="table">
          <thead>
            <tr>
              <th className="check"><input type="checkbox" checked={allSel} onChange={toggleAll}/></th>
              <th>Pesanan</th>
              <th>Marketplace</th>
              <th>Pembeli</th>
              <th>Item</th>
              <th style={{textAlign:'right'}}>Nilai</th>
              <th>SLA</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(o => (
              <tr key={o.id}>
                <td><input type="checkbox" checked={selected.has(o.id)} onChange={()=>toggle(o.id)}/></td>
                <td>
                  <div style={{ fontWeight:600 }} className="mono">{o.id}</div>
                  <div style={{ fontSize:11.5, color:'var(--ink-500)' }}>{o.date}</div>
                </td>
                <td>
                  <MP type={o.mp}/>
                  <div style={{ fontSize:11.5, color:'var(--ink-500)', marginTop:2 }}>{o.store}</div>
                </td>
                <td>{o.buyer}</td>
                <td>
                  <div style={{ fontSize:13 }}>{o.items} barang</div>
                  <div className="mono" style={{ fontSize:11.5 }}>{o.sku}</div>
                </td>
                <td style={{textAlign:'right', fontWeight:600}}>{fmtRp(o.total)}</td>
                <td>
                  {o.sla === '—' ? <span style={{ color:'var(--ink-400)' }}>—</span> :
                   o.sla.includes('Stok') ? <span className="chip chip-rose">{o.sla}</span> :
                   <span className={o.sla.startsWith('11h') || o.sla.startsWith('12h') ? 'chip chip-amber' : 'chip'}>{o.sla}</span>}
                </td>
                <td><span className={`chip ${STATUS_META[o.status].chip}`}><span className="chip-dot"/>{STATUS_META[o.status].label}</span></td>
                <td>
                  <div style={{ display:'inline-flex', gap:6 }}>
                    {o._raw?.fakturNumber ? (
                      <button
                        className="btn btn-secondary btn-sm"
                        title={`Faktur: ${o._raw.fakturNumber}`}
                        onClick={() => {
                          const items = (o._raw?.items || []).map(i => ({ sku: i.sku, name: i.name, qty: i.qty, unitPrice: Number(i.unitPrice) }));
                          window.printInvoice({ order: { ...o, fakturNumber: o._raw.fakturNumber, taxRate: o._raw.taxRate, taxAmount: o._raw.taxAmount }, items });
                        }}
                      >Cetak Faktur</button>
                    ) : (
                      <button
                        className="btn btn-secondary btn-sm"
                        onClick={async () => {
                          const r = prompt('Tarif PPN (%):', '11');
                          if (r == null) return;
                          const taxRate = Number(r);
                          if (isNaN(taxRate) || taxRate < 0) { alert('Tarif tidak valid'); return; }
                          try {
                            await window.Api.post(`/api/orders/${encodeURIComponent(o.id)}/faktur`, { taxRate });
                            await window.Api.loadAppData();
                            window.location.reload();
                          } catch (e) { alert('Gagal: ' + e.message); }
                        }}
                      >Buat Faktur</button>
                    )}
                    <button className="tb-icon-btn"><Icon.more/></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Tab({ active, onClick, label, count }) {
  return <button className={`tab ${active?'active':''}`} onClick={onClick}>{label}{count!=null && <span className="count">{count}</span>}</button>;
}

// ============== PACKING MODAL ==============
// Two-step flow: confirm order → print resi & finish.
// Per-SKU scan validation is intentionally omitted.
function PackingModal({ onClose }) {
  const [step, setStep] = useState(1);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  // Pick the first order that's packable (new or packing).
  const activeOrder = MOCK.ORDERS.find(o => o.status === 'new' || o.status === 'packing') || MOCK.ORDERS[0];
  const rawItems = activeOrder?._raw?.items || [];
  const items = rawItems.length > 0
    ? rawItems.map(i => ({ sku: i.sku, name: i.name, qty: i.qty }))
    : [];
  const order = activeOrder;

  // Pre-generate tracking number once, used on print + on save.
  const [trackingNo] = useState(() =>
    order?._raw?.trackingNo || generateTrackingNo()
  );

  const advanceFromStep = async (current) => {
    setError('');
    if (current === 1 && order?.id) {
      // Mark order as 'packing' on the server, then jump to the finish step.
      setBusy(true);
      try {
        await window.Api.patch(`/api/orders/${encodeURIComponent(order.id)}/status`, {
          status: 'packing',
        });
        setStep(2);
      } catch (e) {
        setError(e.message || 'Gagal');
      } finally { setBusy(false); }
      return;
    }
    setStep(current + 1);
  };

  const finishPacking = async () => {
    if (!order?.id) { onClose(); return; }
    setError('');
    setBusy(true);
    try {
      await window.Api.patch(`/api/orders/${encodeURIComponent(order.id)}/status`, {
        status: 'shipped',
        trackingNo,
      });
      // refresh dashboard data so order disappears / status updates
      await window.Api.loadAppData();
      onClose();
    } catch (e) {
      setError(e.message || 'Gagal menyelesaikan packing');
      setBusy(false);
    }
  };

  const printResi = () => window.printResi({ order, items, trackingNo });
  const printSlip = () => window.printPackingSlip({ order, items });

  return (
    <div className="packing-modal" onClick={(e) => e.target.classList.contains('packing-modal') && onClose()}>
      <div className="packing-card">
        <div className="packing-progress"><div style={{ width: `${(step/2)*100}%` }}/></div>
        <div className="packing-head">
          <div className="step-num">{step}</div>
          <div style={{ flex:1 }}>
            <div style={{ fontWeight:700, fontSize:15 }}>
              {step===1 && "Konfirmasi Pesanan"}
              {step===2 && "Cetak Resi & Selesai"}
            </div>
            <div style={{ fontSize:12.5, color:'var(--ink-500)' }}>Asisten Packing · Langkah {step} dari 2</div>
          </div>
          <button className="tb-icon-btn" onClick={onClose}><Icon.x/></button>
        </div>

        <div className="packing-body">
          {step === 1 && (
            <div>
              <div className="scan-target active">
                <Icon.scan style={{ width:40, height:40, color:'var(--brand-500)', marginBottom:8 }}/>
                <div style={{ fontSize:15, fontWeight:700 }}>Scan barcode pesanan atau ketik ID</div>
                <div style={{ fontSize:12.5, color:'var(--ink-500)', marginTop:4 }}>Arahkan pemindai atau ketik kode pesanan untuk memulai</div>
                <input className="scan-input" placeholder={order?.id || 'SMP-XXXX'} defaultValue={order?.id || ''}/>
              </div>
              {order && (
                <div style={{ marginTop:18, display:'flex', gap:12, alignItems:'center', padding:14, background:'var(--surface-2)', borderRadius:'var(--r-md)' }}>
                  <div style={{ width:38, height:38, borderRadius:8, background:'var(--green-bg)', color:'var(--green)', display:'grid', placeItems:'center'}}><Icon.check/></div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontWeight:600 }}>Pesanan ditemukan: <span className="mono">{order.id}</span></div>
                    <div style={{ fontSize:12.5, color:'var(--ink-500)' }}>{order.buyer} · {order.items} barang · {order.store}</div>
                  </div>
                  <MP type={order.mp}/>
                </div>
              )}
              {items.length > 0 && (
                <div style={{ marginTop:14, display:'flex', flexDirection:'column', gap:8 }}>
                  <div style={{ fontSize:11.5, color:'var(--ink-500)', fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em', marginBottom:2 }}>
                    Item pesanan ({items.length})
                  </div>
                  {items.map(it => (
                    <div key={it.sku} className="pk-item">
                      <div className="pk-thumb"/>
                      <div style={{ flex:1 }}>
                        <div style={{ fontWeight:600, fontSize:13.5 }}>{it.name}</div>
                        <div className="mono" style={{ fontSize:11.5, color:'var(--ink-500)' }}>{it.sku}</div>
                      </div>
                      <span className="chip">{it.qty}×</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {step === 2 && (
            <div style={{ textAlign:'center', padding:'12px 0' }}>
              <div style={{ width:64, height:64, borderRadius:'50%', background:'var(--green-bg)', color:'var(--green)', display:'grid', placeItems:'center', margin:'0 auto 16px' }}>
                <Icon.check style={{ width:32, height:32 }}/>
              </div>
              <div style={{ fontSize:18, fontWeight:800, letterSpacing:'-0.01em' }}>Packing selesai!</div>
              <div style={{ fontSize:13, color:'var(--ink-500)', marginTop:4, marginBottom:22 }}>Stok telah dipotong dari semua marketplace · Resi siap dicetak</div>

              <div style={{ display:'inline-block', padding:24, background:'var(--surface-2)', borderRadius:'var(--r-lg)', marginBottom:18, textAlign:'left', minWidth:320 }}>
                <div style={{ fontSize:11, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:700 }}>Resi Pengiriman</div>
                <div className="mono" style={{ fontSize:18, fontWeight:700, marginTop:4 }}>{trackingNo}</div>
                <div style={{ marginTop:14, display:'flex', gap:8, alignItems:'center' }}>
                  <div style={{ height:48, background:'repeating-linear-gradient(90deg, #1a1614 0 2px, transparent 2px 4px, #1a1614 4px 5px, transparent 5px 8px)', flex:1 }}/>
                </div>
                <div className="mono" style={{ fontSize:10.5, color:'var(--ink-500)', marginTop:6, textAlign:'center' }}>
                  {(trackingNo.split('-')[0] || 'JNE')} · {order?.buyer || 'Pembeli'}
                </div>
              </div>

              <div style={{ display:'flex', gap:10, justifyContent:'center' }}>
                <button className="btn btn-secondary" onClick={printResi}><Icon.printer/> Cetak Resi (A6)</button>
                <button className="btn btn-secondary" onClick={printSlip}><Icon.printer/> Cetak Packing Slip</button>
              </div>
            </div>
          )}
        </div>

        <div className="packing-foot">
          <div style={{ fontSize:12.5, color:'var(--ink-500)' }}>
            {step===1 && "💡 Konfirmasi pesanan, lalu lanjut cetak resi"}
            {step===2 && "💡 Stok dipotong otomatis di semua marketplace yang tersinkron"}
          </div>
          <div style={{ display:'flex', gap:10, alignItems:'center' }}>
            {error && (
              <span style={{ color:'var(--rose, #c11)', fontSize:12, marginRight:8 }}>{error}</span>
            )}
            {step > 1 && <button className="btn btn-secondary" onClick={() => setStep(step-1)} disabled={busy}>Kembali</button>}
            {step === 2 ?
              <button className="btn btn-primary" onClick={finishPacking} disabled={busy}>
                {busy ? 'Menyimpan…' : 'Selesai & Kirim'}
              </button> :
              <button
                className="btn btn-primary"
                onClick={() => advanceFromStep(step)}
                disabled={busy}
              >
                {busy ? 'Memproses…' : 'Lanjut →'}
              </button>
            }
          </div>
        </div>
      </div>
    </div>
  );
}

window.OrdersPage = OrdersPage;
window.PackingModal = PackingModal;