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

// ============== INVENTORY ==============
function InventoryPage() {
  const [tab, setTab] = useState('all');
  const [search, setSearch] = useState('');
  const [category, setCategory] = useState('');
  const [createOpen, setCreateOpen] = useState(false);
  const [adjustTarget, setAdjustTarget] = useState(null);

  const filtered = MOCK.PRODUCTS.filter(p => {
    if (search) {
      const s = search.toLowerCase();
      if (!p.name.toLowerCase().includes(s) && !p.sku.toLowerCase().includes(s)) return false;
    }
    if (category && p.cat !== category) return false;
    return true;
  });
  const list = filtered.filter(p => {
    if (tab === 'low') return p.low || p.oos;
    if (tab === 'oos') return p.oos;
    return true;
  });

  const categories = [...new Set(MOCK.PRODUCTS.map(p => p.cat).filter(Boolean))];
  const totalSku = MOCK.PRODUCTS.length;
  const stockValue = MOCK.PRODUCTS.reduce((s, p) => s + p.stock * p.cogs, 0);
  const lowCount = MOCK.PRODUCTS.filter(p => p.low).length;
  const oosCount = MOCK.PRODUCTS.filter(p => p.oos).length;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Stok & Produk</h1>
          <p className="page-sub">Stok fisik di gudang Anda — sinkron otomatis ke semua marketplace</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><Icon.download/> Impor CSV</button>
          <button className="btn btn-primary" onClick={() => setCreateOpen(true)}><Icon.plus/> Tambah Produk</button>
        </div>
      </div>

      {/* Stat strip */}
      <div className="grid-4" style={{ marginBottom:18 }}>
        <Stat label="Total SKU" value={totalSku.toString()}/>
        <Stat label="Nilai Stok" value={fmtRp(stockValue)}/>
        <Stat label="Stok Rendah" value={lowCount.toString()} tone="amber"/>
        <Stat label="Stok Habis" value={oosCount.toString()} tone="rose"/>
      </div>

      <div className="tabs">
        <button className={`tab ${tab==='all'?'active':''}`} onClick={()=>setTab('all')}>Semua<span className="count">{filtered.length}</span></button>
        <button className={`tab ${tab==='low'?'active':''}`} onClick={()=>setTab('low')}>Perlu restock<span className="count">{filtered.filter(p=>p.low||p.oos).length}</span></button>
        <button className={`tab ${tab==='oos'?'active':''}`} onClick={()=>setTab('oos')}>Habis<span className="count">{filtered.filter(p=>p.oos).length}</span></button>
      </div>

      <div className="card" style={{ marginBottom:14, padding:'12px 14px', display:'flex', gap:10 }}>
        <div className="input" style={{ flex:1 }}>
          <Icon.search/>
          <input placeholder="Cari nama atau SKU…" value={search} onChange={e=>setSearch(e.target.value)}/>
        </div>
        <div className="input" style={{ width:200 }}>
          <select value={category} onChange={e=>setCategory(e.target.value)}>
            <option value="">Semua kategori</option>
            {categories.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>
      </div>

      <div className="card" style={{ overflow:'hidden' }}>
        <table className="table">
          <thead>
            <tr>
              <th className="check"><input type="checkbox"/></th>
              <th>Produk</th>
              <th>Kategori</th>
              <th style={{textAlign:'right'}}>Harga Jual</th>
              <th style={{textAlign:'right'}}>HPP</th>
              <th style={{textAlign:'right'}}>Biaya Material</th>
              <th>Stok Fisik</th>
              <th>Tersedia</th>
              <th>Terjual 30hr</th>
              <th>Tersinkron di</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {list.map(p => {
              const available = p.stock - p.locked;
              const stockPct = Math.min(100, (p.stock / 150) * 100);
              return (
                <tr key={p.sku}>
                  <td><input type="checkbox"/></td>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                      <div style={{ width:36, height:36, borderRadius:8, background:'var(--surface-2)', backgroundImage:'repeating-linear-gradient(45deg, var(--border) 0 5px, transparent 5px 10px)', flexShrink:0 }}/>
                      <div>
                        <div style={{ fontWeight:600 }}>{p.name}</div>
                        <div className="mono" style={{ fontSize:11.5, color:'var(--ink-500)' }}>{p.sku}</div>
                      </div>
                    </div>
                  </td>
                  <td><span className="chip">{p.cat}</span></td>
                  <td style={{textAlign:'right', fontWeight:600}}>{fmtRp(p.price)}</td>
                  <td style={{textAlign:'right', color:'var(--ink-600)'}}>{fmtRp(p.cogs)}</td>
                  <td style={{textAlign:'right'}}>
                    <div style={{ fontWeight:600, color:'var(--ink-700)' }}>{fmtRp(p.matCost)}</div>
                    <div style={{ fontSize:11, color:'var(--ink-500)' }}>per packing</div>
                  </td>
                  <td style={{ minWidth:140 }}>
                    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                      <span style={{ fontWeight:700, color: p.oos?'var(--rose)':p.low?'var(--amber)':'var(--ink-900)' }}>{p.stock}</span>
                      {p.oos && <span className="chip chip-rose">Habis</span>}
                      {p.low && <span className="chip chip-amber">Rendah</span>}
                    </div>
                    <div className="progress" style={{ marginTop:6, width:90 }}>
                      <div style={{ width: `${stockPct}%`, background: p.oos?'var(--rose)':p.low?'var(--amber)':'var(--brand-500)' }}/>
                    </div>
                  </td>
                  <td>
                    <div style={{ fontSize:13 }}>{available}</div>
                    <div style={{ fontSize:11.5, color:'var(--ink-500)' }}>{p.locked} dipesan</div>
                  </td>
                  <td>{p.sold30}</td>
                  <td>
                    <div style={{ display:'flex', gap:4 }}>
                      {p.mps.map(m => <MP key={m} type={m} showName={false}/>)}
                    </div>
                  </td>
                  <td>
                    <button
                      className="btn btn-secondary btn-sm"
                      onClick={() => setAdjustTarget(p)}
                    >Koreksi</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {createOpen && <NewProductModal onClose={() => setCreateOpen(false)}/>}
      {adjustTarget && <StockAdjustModal product={adjustTarget} onClose={() => setAdjustTarget(null)}/>}
    </div>
  );
}

/* ============== TAMBAH PRODUK MODAL ============== */
function NewProductModal({ onClose }) {
  const [sku, setSku] = useState('');
  const [name, setName] = useState('');
  const [cat, setCat] = useState('');
  const [price, setPrice] = useState('');
  const [cogs, setCogs] = useState('');
  const [matCost, setMatCost] = useState('3500');
  const [marketplaces, setMarketplaces] = useState([]);
  const [openingStock, setOpeningStock] = useState('0');
  const [warehouseId, setWarehouseId] = useState('wh_sub');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  const toggleMp = (m) => {
    setMarketplaces(marketplaces.includes(m) ? marketplaces.filter(x => x !== m) : [...marketplaces, m]);
  };

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    setBusy(true);
    try {
      const created = await window.Api.post('/api/products', {
        sku, name, category: cat,
        price: Number(price), cogs: Number(cogs) || 0, matCost: Number(matCost) || 0,
        marketplaces,
      });
      // Optionally adjust opening stock
      const opening = Number(openingStock) || 0;
      if (opening > 0) {
        await window.Api.post('/api/inventory/adjust', {
          productId: created.data.id,
          warehouseId,
          delta: opening,
          reason: 'Stok awal saat tambah produk',
        });
      }
      await window.Api.loadAppData();
      onClose();
      window.location.reload();
    } catch (err) {
      setError(err.body?.message || err.message || 'Gagal tambah produk');
      setBusy(false);
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ maxWidth: 620 }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'.06em', color:'var(--ink-500)' }}>Produk Baru</div>
            <h2 style={{ margin:'4px 0 0', fontSize:20, fontWeight:800 }}>Tambah Produk ke Katalog</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:'1fr 2fr', gap:12 }}>
            <Field label="SKU *">
              <input className="input" value={sku} onChange={e=>setSku(e.target.value)} placeholder="MUG-CER-03" required/>
            </Field>
            <Field label="Nama produk *">
              <input className="input" value={name} onChange={e=>setName(e.target.value)} placeholder="Mug Keramik Polos 350ml" required/>
            </Field>
          </div>
          <Field label="Kategori">
            <input className="input" value={cat} onChange={e=>setCat(e.target.value)} placeholder="Drinkware / Apparel / Bundle…"/>
          </Field>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12 }}>
            <Field label="Harga jual *">
              <input className="input" type="number" min="0" value={price} onChange={e=>setPrice(e.target.value)} required/>
            </Field>
            <Field label="HPP">
              <input className="input" type="number" min="0" value={cogs} onChange={e=>setCogs(e.target.value)}/>
            </Field>
            <Field label="Biaya material per packing">
              <input className="input" type="number" min="0" value={matCost} onChange={e=>setMatCost(e.target.value)}/>
            </Field>
          </div>
          <Field label="Tersinkron di marketplace">
            <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
              {['shopee','tokopedia','tiktok','lazada','blibli','bukalapak'].map(m => (
                <button
                  type="button"
                  key={m}
                  className={`pick ${marketplaces.includes(m) ? 'on' : ''}`}
                  onClick={() => toggleMp(m)}
                  style={{ flex:'0 0 auto', padding:'8px 12px' }}
                >
                  <MP type={m}/>
                </button>
              ))}
            </div>
          </Field>
          <div style={{ borderTop:'1px solid var(--border)', paddingTop:14 }}>
            <div style={{ fontSize:12, color:'var(--ink-500)', fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em', marginBottom:8 }}>
              Stok Awal (opsional)
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 2fr', gap:12 }}>
              <Field label="Jumlah">
                <input className="input" type="number" min="0" value={openingStock} onChange={e=>setOpeningStock(e.target.value)}/>
              </Field>
              <Field label="Gudang">
                <div style={{ display:'flex', gap:8 }}>
                  {[
                    { id:'wh_sub', label:'Surabaya' },
                    { id:'wh_dpk', label:'Depok' },
                    { id:'wh_med', label:'Medan' },
                  ].map(w => (
                    <button key={w.id} type="button" className={`pick ${warehouseId===w.id?'on':''}`} onClick={()=>setWarehouseId(w.id)}>
                      <Icon.box/> {w.label}
                    </button>
                  ))}
                </div>
              </Field>
            </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 Produk'}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

/* ============== KOREKSI STOK MODAL ============== */
function StockAdjustModal({ product, onClose }) {
  const [delta, setDelta] = useState('');
  const [warehouseId, setWarehouseId] = useState(product.warehouseId || 'wh_sub');
  const [reason, setReason] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  const numericDelta = Number(delta) || 0;
  const newStock = product.stock + numericDelta;

  const submit = async (e) => {
    e.preventDefault();
    if (!product.productId) { setError('Produk belum punya productId — refresh halaman'); return; }
    if (!numericDelta) { setError('Masukkan jumlah perubahan'); return; }
    setError('');
    setBusy(true);
    try {
      await window.Api.post('/api/inventory/adjust', {
        productId: product.productId,
        warehouseId,
        delta: numericDelta,
        reason,
      });
      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: 480 }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'.06em', color:'var(--ink-500)' }}>Koreksi Stok</div>
            <h2 style={{ margin:'4px 0 0', fontSize:18, fontWeight:800 }}>
              <span className="mono" style={{ marginRight:6, opacity:.6 }}>{product.sku}</span>
              {product.name}
            </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:'flex', justifyContent:'space-between', alignItems:'center', padding:'12px 14px', background:'var(--surface-2)', borderRadius:8 }}>
            <span style={{ fontSize:13, color:'var(--ink-500)' }}>Stok saat ini</span>
            <span style={{ fontSize:18, fontWeight:700 }}>{product.stock}</span>
          </div>

          <Field label="Perubahan (positif = tambah, negatif = kurangi)">
            <input className="input" type="number" value={delta} onChange={e=>setDelta(e.target.value)} placeholder="Contoh: +10 atau -3" required autoFocus/>
          </Field>

          {numericDelta !== 0 && (
            <div style={{ padding:'10px 14px', background: 'var(--brand-50)', borderRadius:8, fontSize:13, display:'flex', justifyContent:'space-between' }}>
              <span style={{ color:'var(--ink-700)' }}>Stok setelah koreksi</span>
              <strong style={{ color: newStock < 0 ? 'var(--rose)' : 'var(--brand-600)' }}>
                {product.stock} → {Math.max(0, newStock)}
              </strong>
            </div>
          )}

          <Field label="Gudang">
            <div style={{ display:'flex', gap:8 }}>
              {[
                { id:'wh_sub', label:'Surabaya' },
                { id:'wh_dpk', label:'Depok' },
                { id:'wh_med', label:'Medan' },
              ].map(w => (
                <button key={w.id} type="button" className={`pick ${warehouseId===w.id?'on':''}`} onClick={()=>setWarehouseId(w.id)}>
                  <Icon.box/> {w.label}
                </button>
              ))}
            </div>
          </Field>

          <Field label="Alasan koreksi">
            <textarea className="input" rows="2" value={reason} onChange={e=>setReason(e.target.value)} placeholder="Mis. Stok hilang saat handling, ditemukan stok tambahan di rak, dst."/>
          </Field>

          <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 Koreksi'}</button>
          </div>
        </form>
      </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>
  );
}

function Stat({ label, value, tone }) {
  return (
    <div className="metric">
      <div className="metric-label">{label}</div>
      <div className="metric-value" style={{ color: tone==='rose'?'var(--rose)':tone==='amber'?'var(--amber)':'var(--ink-900)' }}>{value}</div>
    </div>
  );
}

// ============== STORES ==============
function StoresPage() {
  const [connectOpen, setConnectOpen] = useState(false);
  const [connectMp, setConnectMp] = useState(null);

  const totalOrders = (MOCK.STORES || []).reduce((s, st) => s + (st.orders30 || 0), 0);
  const activeCount = (MOCK.STORES || []).filter(s => s.status === 'synced').length;

  const onSyncManual = async (storeId) => {
    try {
      await window.Api.patch(`/api/stores/${encodeURIComponent(storeId)}/sync`, {
        status: 'syncing',
      });
      await window.Api.loadAppData();
      // After 2 sec optimistic, mark synced
      setTimeout(async () => {
        try {
          await window.Api.patch(`/api/stores/${encodeURIComponent(storeId)}/sync`, { status: 'synced' });
          await window.Api.loadAppData();
          window.location.reload();
        } catch {}
      }, 2000);
    } catch (e) { alert('Gagal: ' + e.message); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Toko Terhubung</h1>
          <p className="page-sub">Hubungkan akun marketplace Anda · Sinkronisasi stok otomatis tiap detik</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-primary" onClick={() => setConnectOpen(true)}><Icon.plus/> Hubungkan Toko</button>
        </div>
      </div>

      <div className="card" style={{ padding:'18px 20px', marginBottom:18, background:'linear-gradient(90deg, var(--brand-50), transparent 60%)', borderColor:'var(--brand-200)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:14 }}>
          <div style={{ width:42, height:42, borderRadius:10, background:'var(--brand-500)', color:'white', display:'grid', placeItems:'center' }}><Icon.zap/></div>
          <div style={{ flex:1 }}>
            <div style={{ fontWeight:700 }}>{activeCount} toko aktif tersinkron · {totalOrders.toLocaleString('id-ID')} pesanan dalam 30 hari</div>
            <div style={{ fontSize:12.5, color:'var(--ink-500)' }}>Stok fisik gudang otomatis dikalkulasi ulang setiap kali ada penjualan di marketplace mana pun</div>
          </div>
        </div>
      </div>

      <h3 style={{ fontSize:14, fontWeight:700, margin:'18px 0 10px' }}>Toko Aktif</h3>
      <div className="grid-2" style={{ gridTemplateColumns:'repeat(2, 1fr)', gap:14 }}>
        {(MOCK.STORES || []).length === 0 && (
          <div className="card" style={{ padding:'40px 24px', textAlign:'center', color:'var(--ink-500)', gridColumn:'1 / -1' }}>
            Belum ada toko terhubung. Klik <strong>Hubungkan Toko</strong> di kanan atas.
          </div>
        )}
        {MOCK.STORES.map((s, i) => (
          <div key={s.id || i} className="card" style={{ padding:18, display:'flex', flexDirection:'column', gap:14 }}>
            <div style={{ display:'flex', alignItems:'flex-start', gap:12 }}>
              <MP type={s.mp} showName={false}/>
              <div style={{ flex:1 }}>
                <div style={{ fontWeight:700, fontSize:14.5 }}>{s.name}</div>
                <div style={{ fontSize:12, color:'var(--ink-500)', textTransform:'capitalize' }}>{s.mp}</div>
              </div>
              {s.status === 'synced' && <span className="chip chip-green"><span className="chip-dot"/>Tersinkron</span>}
              {s.status === 'syncing' && <span className="chip chip-blue"><span className="chip-dot"/>Sinkronisasi…</span>}
              {s.status === 'warning' && <span className="chip chip-amber"><span className="chip-dot"/>Perhatian</span>}
              {s.status === 'error' && <span className="chip chip-rose"><span className="chip-dot"/>Error</span>}
            </div>

            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:0, padding:'10px 0', borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)' }}>
              <Cell label="Produk" value={s.products || 0}/>
              <Cell label="Pesanan 30h" value={s.orders30 || 0}/>
              <Cell label="Sinkron" value={s.lastSync} small/>
            </div>

            {s.warn && (
              <div style={{ display:'flex', gap:8, padding:'8px 10px', background:'var(--amber-bg)', color:'var(--amber)', borderRadius:8, fontSize:12, fontWeight:500 }}>
                <Icon.warn style={{width:14,height:14,flexShrink:0,marginTop:2}}/>
                {s.warn}
              </div>
            )}

            <div style={{ display:'flex', gap:8 }}>
              <button className="btn btn-secondary btn-sm" style={{ flex:1 }} disabled>Pengaturan</button>
              <button
                className="btn btn-ghost btn-sm"
                onClick={() => s.id && onSyncManual(s.id)}
                disabled={!s.id || s.status === 'syncing'}
              >
                {s.status === 'syncing' ? 'Sedang sinkron…' : 'Sinkron Manual'}
              </button>
            </div>
          </div>
        ))}
      </div>

      <h3 style={{ fontSize:14, fontWeight:700, margin:'28px 0 10px' }}>Hubungkan Marketplace Lain</h3>
      <div className="grid-4">
        {[
          { mp:"shopee",    name:"Shopee" },
          { mp:"tokopedia", name:"Tokopedia" },
          { mp:"tiktok",    name:"TikTok Shop" },
          { mp:"lazada",    name:"Lazada" },
          { mp:"bukalapak", name:"Bukalapak" },
          { mp:"blibli",    name:"Blibli" },
        ].map(o => (
          <div key={o.mp} className="card" style={{ padding:16, display:'flex', alignItems:'center', gap:12 }}>
            <MP type={o.mp} showName={false}/>
            <div style={{ flex:1, fontWeight:600, fontSize:13.5 }}>{o.name}</div>
            <button
              className="btn btn-secondary btn-sm"
              onClick={() => { setConnectMp(o.mp); setConnectOpen(true); }}
            >Hubungkan</button>
          </div>
        ))}
      </div>

      {connectOpen && (
        <ConnectStoreModal
          initialMp={connectMp}
          onClose={() => { setConnectOpen(false); setConnectMp(null); }}
        />
      )}
    </div>
  );
}

/* ============== CONNECT STORE MODAL ============== */
function ConnectStoreModal({ initialMp, onClose }) {
  const [name, setName] = useState('');
  const [marketplace, setMarketplace] = useState(initialMp || 'shopee');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    if (!name.trim()) { setError('Nama toko wajib diisi'); return; }
    setBusy(true);
    try {
      await window.Api.post('/api/stores', { name, marketplace });
      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:480 }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'.06em', color:'var(--ink-500)' }}>
              Hubungkan Toko Marketplace
            </div>
            <h2 style={{ margin:'4px 0 0', fontSize:20, fontWeight:800 }}>Toko Baru</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>}
          <Field label="Marketplace">
            <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
              {['shopee','tokopedia','tiktok','lazada','bukalapak','blibli','manual'].map(m => (
                <button
                  key={m}
                  type="button"
                  className={`pick ${marketplace===m?'on':''}`}
                  onClick={() => setMarketplace(m)}
                  style={{ flex:'0 0 auto', padding:'8px 12px' }}
                >
                  {m === 'manual' ? <><Icon.plus/> Manual / WA</> : <MP type={m}/>}
                </button>
              ))}
            </div>
          </Field>
          <Field label="Nama toko">
            <input className="input" value={name} onChange={e=>setName(e.target.value)} placeholder="Toko Berkah Jaya" required autoFocus/>
          </Field>
          <div style={{ padding:'10px 12px', background:'var(--blue-bg)', color:'var(--blue)', borderRadius:8, fontSize:12.5 }}>
            ℹ Setelah dihubungkan, Anda perlu OAuth ke marketplace untuk sinkronisasi otomatis. Untuk MVP, status diset <strong>"Sedang sinkron"</strong>.
          </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…' : 'Hubungkan'}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function Cell({ label, value, small }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-start' }}>
      <div style={{ fontSize:10.5, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:700 }}>{label}</div>
      <div style={{ fontSize:small?12.5:15, fontWeight:700, marginTop:2 }}>{value}</div>
    </div>
  );
}

window.InventoryPage = InventoryPage;
window.StoresPage = StoresPage;