/* ===== SKU Library ===== */
const SkuLibraryScreen = ({ onOpenExcel }) => {
  const SKUS = [
    { sku:'GD-1029',  desc:'Tools · drill bits',     cat:'general', L:220, W:140, H:80,  weight:0.6,  orient:'upright', stk:'yes', uses:142 },
    { sku:'AP-1100',  desc:'Apparel · tee · M',       cat:'general', L:300, W:220, H:30,  weight:0.18, orient:'any',     stk:'yes', uses:1148 },
    { sku:'EL-2210',  desc:'Electronics · charger',   cat:'fragile', L:160, W:110, H:35,  weight:0.32, orient:'upright', stk:'yes', uses:880 },
    { sku:'BK-0099',  desc:'Hardcover books',         cat:'general', L:250, W:180, H:35,  weight:0.95, orient:'top-fixed', stk:'yes', uses:74 },
    { sku:'BX-LRG-01',desc:'Apparel carton · large',  cat:'general', L:600, W:400, H:400, weight:22,   orient:'any',     stk:'yes', uses:518 },
    { sku:'BX-MED-04',desc:'Electronics · medium',     cat:'fragile', L:500, W:360, H:280, weight:14,   orient:'top-fixed', stk:'max 12 kg', uses:413 },
    { sku:'PLT-EUR-A',desc:'EUR pallet · beverages',   cat:'ambient', L:1200,W:800, H:1450, weight:720, orient:'upright', stk:'no', uses:88 },
    { sku:'PLT-EUR-C',desc:'EUR pallet · cleaning',    cat:'hazmat',  L:1200,W:800, H:1300, weight:540, orient:'upright', stk:'no', uses:24 },
    { sku:'BR-200L',  desc:'200 L drum · lubricant',   cat:'hazmat',  L:580, W:580, H:880, weight:196,  orient:'upright', stk:'no', uses:42 },
    { sku:'PP-3M-DN50',desc:'Steel pipe · 3 m · DN50',  cat:'general', L:3000,W:60,  H:60,   weight:18,   orient:'horizontal', stk:'bundled', uses:18 },
  ];
  const [view, setView] = React.useState('table');
  return (
    <div style={{ height:'100%', overflow:'auto' }}>
      <div style={{ padding:'24px 32px 16px', background:'#fff', borderBottom:'1px solid var(--line)' }}>
        <div style={{ display:'flex', alignItems:'flex-end' }}>
          <div>
            <div className="h-eyebrow">SKU library</div>
            <h1 className="h-title" style={{ marginTop:4 }}>2,184 SKUs · 14 categories</h1>
            <div className="h-subtitle">Master catalogue used by all three modules. Update once, applied everywhere.</div>
          </div>
          <div style={{ marginLeft:'auto', display:'flex', gap:8 }}>
            <button className="btn"><Icon name="upload" size={13} onClick={onOpenExcel}/> Import</button>
            <button className="btn"><Icon name="download" size={13}/> Export</button>
            <button className="btn btn--primary"><Icon name="plus" size={13}/> New SKU</button>
          </div>
        </div>
        <div style={{ marginTop:16, display:'flex', gap:8 }}>
          <div style={{ position:'relative', width:320 }}>
            <Icon name="search" size={12} style={{ position:'absolute', left:10, top:9, color:'var(--ink-4)' }}/>
            <input className="input" placeholder="Search SKU, description or category" style={{ paddingLeft:28, fontSize:13 }}/>
          </div>
          <select className="input" style={{ width:160 }}><option>All categories</option></select>
          <select className="input" style={{ width:160 }}><option>All cargo types</option></select>
          <div style={{ flex:1 }}/>
          <SegBtn>
            <SegItem active={view==='table'} onClick={() => setView('table')}><Icon name="list" size={11}/></SegItem>
            <SegItem active={view==='grid'}  onClick={() => setView('grid')}><Icon name="grid" size={11}/></SegItem>
          </SegBtn>
        </div>
      </div>
      <div style={{ padding:'18px 32px' }}>
        <div className="card" style={{ overflow:'hidden' }}>
          <table className="tbl">
            <thead><tr>
              <th>SKU</th><th>Description</th><th>Category</th><th>Dims (mm)</th><th>Weight</th><th>Orientation</th><th>Stack</th><th>Usage</th><th></th>
            </tr></thead>
            <tbody>
              {SKUS.map(s => {
                const cat = window.Mojro.CATEGORIES.find(c=>c.id===s.cat);
                return (
                  <tr key={s.sku}>
                    <td><span className="mono" style={{ fontSize:12, fontWeight:600 }}>{s.sku}</span></td>
                    <td>{s.desc}</td>
                    <td><span className="chip" style={{ background:cat.color+'22', color:cat.color }}>{cat.name}</span></td>
                    <td className="mono" style={{ fontSize:12 }}>{s.L}×{s.W}×{s.H}</td>
                    <td className="mono" style={{ fontSize:12 }}>{s.weight} kg</td>
                    <td><span className="chip">{s.orient}</span></td>
                    <td><span className="chip" style={{ color: s.stk==='no'?'var(--bad)':'var(--ink-2)' }}>{s.stk}</span></td>
                    <td><span className="mono" style={{ fontSize:11.5, color:'var(--ink-3)' }}>{s.uses} runs</span></td>
                    <td><button className="btn btn--icon btn--ghost"><Icon name="kebab" size={12}/></button></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

window.SkuLibraryScreen = SkuLibraryScreen;