/* ===== Cartonization module ===== */
const CartonizationScreen = ({ onNavigate }) => {
  const [selectedCarton, setSelectedCarton] = React.useState('fefco-b1');

  const skus = [
    { id:'s1', sku:'GD-1029', desc:'Tools · drill bits',   qty: 24, L: 220, W: 140, H: 80,  weight: 0.6, orientation:'upright', stack:'yes', color:'#C13333' },
    { id:'s2', sku:'AP-1100', desc:'Apparel · tee · M',     qty: 80, L: 300, W: 220, H: 30,  weight: 0.18,orientation:'any',     stack:'yes', color:'#E8893C' },
    { id:'s3', sku:'EL-2210', desc:'Electronics · charger', qty: 36, L: 160, W: 110, H: 35,  weight: 0.32,orientation:'upright', stack:'yes', color:'#2E5FA8' },
    { id:'s4', sku:'BK-0099', desc:'Hardcover books',       qty: 18, L: 250, W: 180, H: 35,  weight: 0.95,orientation:'top-fixed',stack:'yes',color:'#1F8A5B' },
  ];

  const CARTON_OPTIONS = [
    { id:'fefco-a1', name:'FEFCO 0201 · A1', L:400, W:300, H:200, fill:74 },
    { id:'fefco-b1', name:'FEFCO 0201 · B1', L:500, W:400, H:300, fill:88, best:true },
    { id:'fefco-c1', name:'FEFCO 0201 · C1', L:600, W:400, H:400, fill:82 },
    { id:'custom',   name:'Custom',          L:550, W:380, H:280, fill:'—' },
  ];

  return (
    <div style={{ height:'100%', display:'grid', gridTemplateColumns:'minmax(260px, 300px) minmax(420px, 1fr) minmax(290px, 320px)', gridTemplateRows:'auto minmax(0, 1fr)', minHeight:0 }}>
      <div style={{ gridColumn:'1 / -1', borderBottom:'1px solid var(--line)', background:'#fff', padding:'10px 16px', display:'flex', alignItems:'center', gap:14 }}>
        <Icon name="carton" size={18} style={{ color:'#E8893C' }}/>
        <div>
          <div className="h-eyebrow">Cartonization</div>
          <div style={{ fontSize:14, fontWeight:700, marginTop:-2 }}>SS26 wave 4 · 4 SKUs · 158 units</div>
        </div>
        <span className="chip chip--ok"><span className="dot"/>All SKUs fit selected carton</span>
        <div style={{ flex:1 }}/>
        <button className="btn btn--sm"><Icon name="download" size={12}/> Export manifest</button>
        <button className="btn btn--sm btn--primary" onClick={() => onNavigate('palletization')}><Icon name="arrow-right" size={12}/> Send to palletization</button>
      </div>

      {/* LEFT — SKU list */}
      <div style={{ borderRight:'1px solid var(--line)', background:'#fff', overflow:'auto' }}>
        <SectionTitle>SKUs in wave</SectionTitle>
        <div style={{ padding:'4px 14px 10px', display:'flex', flexDirection:'column', gap:6 }}>
          {skus.map(s => (
            <div key={s.id} className="card" style={{ padding:'10px 12px' }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                <span style={{ width:22, height:22, borderRadius:4, background:s.color }}/>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:13, fontWeight:600 }}>{s.sku}</div>
                  <div style={{ fontSize:11, color:'var(--ink-3)' }}>{s.desc}</div>
                </div>
                <span className="mono" style={{ fontSize:12, fontWeight:600 }}>×{s.qty}</span>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:6, marginTop:8, fontSize:11 }}>
                <div><span style={{ color:'var(--ink-3)' }}>Dims </span><span className="mono">{s.L}×{s.W}×{s.H}</span></div>
                <div><span style={{ color:'var(--ink-3)' }}>Wt </span><span className="mono">{s.weight}kg</span></div>
                <div><span style={{ color:'var(--ink-3)' }}>Stk </span><span style={{ color: s.stack==='yes'?'var(--ok)':'var(--bad)' }}>{s.stack}</span></div>
              </div>
              <div style={{ marginTop:6, display:'flex', gap:4 }}>
                <span className="chip" style={{ fontSize:10 }}>orient · {s.orientation}</span>
              </div>
            </div>
          ))}
          <button className="btn btn--sm" style={{ marginTop:4 }}><Icon name="plus" size={12}/> Add SKU</button>
        </div>

        <SectionTitle>Carton constraints</SectionTitle>
        <div style={{ padding:'4px 14px' }}>
          <FormGrid>
            <Field label="Max L × W × H"  value="800×600×500"/>
            <Field label="Max weight"     value="20 kg"/>
            <Field label="Preferred std." value="FEFCO 0201"/>
            <Field label="Wall thickness" value="3 mm"/>
          </FormGrid>
        </div>
      </div>

      {/* CENTER — 3D carton view */}
      <div style={{ position:'relative', overflow:'hidden', display:'flex', flexDirection:'column' }}>
        <div style={{ padding:'8px 14px', borderBottom:'1px solid var(--line)', background:'#fff', display:'flex', alignItems:'center', gap:8 }}>
          <SegBtn>{['3d','top','side'].map(v => <SegItem key={v} active={v==='3d'}>{v.toUpperCase()}</SegItem>)}</SegBtn>
          <span style={{ width:1, height:18, background:'var(--line)' }}/>
          <ToggleBtn icon="eye-off" label="X-ray" />
          <span style={{ width:1, height:18, background:'var(--line)' }}/>
          <span className="chip">Carton 1 of 3</span>
          <button className="btn btn--icon btn--sm"><Icon name="chevron-right" size={12}/></button>
          <div style={{ flex:1 }}/>
          <button className="btn btn--primary btn--sm"><Icon name="play" size={12}/> Run packing</button>
        </div>
        <div style={{ flex:1, position:'relative' }}>
          <Scene3D
            items={[
              { id:'k1', type:'box', L:220, W:140, H:80,  qty:8,  color:'#C13333', category:'general', stop:1 },
              { id:'k2', type:'box', L:300, W:220, H:30,  qty:24, color:'#E8893C', category:'general', stop:1 },
              { id:'k3', type:'box', L:160, W:110, H:35,  qty:12, color:'#2E5FA8', category:'fragile', stop:1 },
              { id:'k4', type:'box', L:250, W:180, H:35,  qty:6,  color:'#1F8A5B', category:'general', stop:1 },
            ]}
            container={{ id:'carton', L: 500, W: 400, H: 300, maxPayload: 20 }}
            colorMode="item"
          />
          <div style={{ position:'absolute', top:14, left:14, padding:'8px 10px', background:'rgba(255,255,255,0.92)', border:'1px solid var(--line)', borderRadius:6 }}>
            <div className="h-eyebrow" style={{ fontSize:10 }}>FEFCO 0201 · B1</div>
            <div className="mono" style={{ fontSize:12, fontWeight:600, marginTop:2 }}>500 × 400 × 300 mm</div>
            <div style={{ display:'flex', gap:8, marginTop:4, fontSize:11 }}>
              <span>Items <b className="mono">50</b></span>
              <span>Cube fill <b className="mono" style={{ color:'var(--ok)' }}>88%</b></span>
            </div>
          </div>
        </div>
      </div>

      {/* RIGHT — recommender */}
      <div style={{ borderLeft:'1px solid var(--line)', background:'var(--bg-elev)', overflow:'auto' }}>
        <div style={{ padding:'14px' }}>
          <div className="h-eyebrow">Carton recommender</div>
          <div style={{ fontSize:12, color:'var(--ink-3)', marginBottom:10, marginTop:2 }}>Top 3 cartons ranked by cube fill across this wave.</div>
          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
            {CARTON_OPTIONS.map(c => (
              <div key={c.id} onClick={() => setSelectedCarton(c.id)} style={{
                padding:'10px 12px', borderRadius:6, cursor:'pointer',
                border:'1px solid ' + (c.id===selectedCarton ? 'var(--mojro-red)' : 'var(--line)'),
                background: c.id===selectedCarton ? 'rgba(193,51,51,0.04)' : '#fff',
                position:'relative',
              }}>
                {c.best && <span className="chip chip--ok" style={{ position:'absolute', right:8, top:8, fontSize:10 }}>Best fit</span>}
                <div style={{ display:'flex', alignItems:'baseline', gap:8 }}>
                  <strong style={{ fontSize:13 }}>{c.name}</strong>
                </div>
                <div className="mono" style={{ fontSize:11, color:'var(--ink-3)', marginTop:2 }}>{c.L}×{c.W}×{c.H} mm</div>
                <div style={{ marginTop:6, display:'flex', alignItems:'center', gap:8 }}>
                  <div style={{ flex:1, height:6, background:'#efe8df', borderRadius:3, overflow:'hidden' }}>
                    {typeof c.fill === 'number' && <div style={{ width: c.fill+'%', height:'100%', background: c.fill>85?'var(--ok)':c.fill>70?'var(--warn)':'var(--bad)' }}/>}
                  </div>
                  <span className="mono" style={{ fontSize:11, fontWeight:600 }}>{typeof c.fill === 'number' ? c.fill+'%' : c.fill}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="h-eyebrow" style={{ marginTop:18 }}>Wave summary</div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:10 }}>
            <KpiTile label="Cube fill"  value="88%" sub="avg." tone="ok"/>
            <KpiTile label="Dead air"  value="12%" sub="lower is better"/>
            <KpiTile label="Cartons"    value="3"   sub="needed"/>
            <KpiTile label="Total mass" value="14.4 kg" sub="3 cartons"/>
          </div>

          <div className="h-eyebrow" style={{ marginTop:18 }}>Manifest</div>
          <div style={{ border:'1px solid var(--line)', borderRadius:6, marginTop:6, background:'#fff', overflow:'hidden' }}>
            <table className="tbl" style={{ fontSize:11.5 }}>
              <thead><tr><th>Carton</th><th>Contents</th><th>kg</th></tr></thead>
              <tbody>
                <tr><td className="mono">C-001</td><td>GD-1029×8 · AP-1100×24 · EL-2210×12</td><td className="mono">5.2</td></tr>
                <tr><td className="mono">C-002</td><td>AP-1100×40 · EL-2210×16</td><td className="mono">4.9</td></tr>
                <tr><td className="mono">C-003</td><td>AP-1100×16 · BK-0099×18</td><td className="mono">4.3</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

window.CartonizationScreen = CartonizationScreen;