// box.jsx — Vue d'ensemble du box de stockage (plan, remplissage, items, drag)
const { useState: useBx } = React;

const BOX_CAT = {
  meuble:  { label:'Meuble',          color:'#14384E', vol:1.8 },
  cartons: { label:'Cartons',         color:'#B63D24', vol:0.6 },
  electro: { label:'Électroménager',  color:'#C2992E', vol:1.2 },
  autre:   { label:'Autre',           color:'#6A7882', vol:0.4 },
};
const SEED_BOX = [
  { id:'b1', name:'Canapé 3 places',      cat:'meuble',  vol:1.8, color:BOX_CAT.meuble.color },
  { id:'b2', name:'2 fauteuils cuir',     cat:'meuble',  vol:1.2, color:BOX_CAT.meuble.color },
  { id:'b3', name:'Cartons livres (×8)',  cat:'cartons', vol:0.8, color:BOX_CAT.cartons.color },
  { id:'b4', name:'Vélo de route',        cat:'autre',   vol:0.4, color:BOX_CAT.autre.color },
  { id:'b5', name:'Table basse verre',    cat:'meuble',  vol:0.3, color:BOX_CAT.meuble.color },
  { id:'b6', name:'Cartons vaisselle (×4)',cat:'cartons',vol:0.4, color:BOX_CAT.cartons.color },
];

function BoxOverview({ boxName='Box M', items, capacity=8, onAdd, onRemove, onReorder, editable, showToast }) {
  const [drag, setDrag] = useBx(null);
  const [over, setOver] = useBx(null);
  const [name, setName] = useBx('');
  const [cat, setCat] = useBx('meuble');
  const used = Math.round(items.reduce((s,i)=>s+i.vol,0)*10)/10;
  const pct = Math.min(100, Math.round(used/capacity*100));
  const gaugeColor = pct>85 ? 'var(--brand)' : pct>60 ? 'var(--accepte)' : 'var(--effectue)';
  const add = ()=>{ const n=name.trim(); if(!n) return; onAdd({ id:'it'+Date.now(), name:n, cat, vol:BOX_CAT[cat].vol, color:BOX_CAT[cat].color }); setName(''); showToast&&showToast('« '+n+' » ajouté à votre box'); };
  const drop = (i)=>{ if(drag!==null && drag!==i) onReorder(drag,i); setDrag(null); setOver(null); };

  return (
    <div className="card card-pad">
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, marginBottom:14 }}>
        <span style={{ fontSize:15, fontWeight:600, color:'var(--ink)' }}>Vue d'ensemble du box</span>
        <span style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:12, fontWeight:600, padding:'3px 10px', borderRadius:999, background:'var(--cream)', color:'var(--navy)', border:'1px solid var(--cream-dim)' }}>
          <Icon name="package" size={12} />{boxName}</span>
      </div>

      {/* box plan — vue de dessus */}
      <div style={{ position:'relative' }}>
        <div style={{ position:'absolute', top:-9, left:14, fontSize:10.5, fontWeight:600, letterSpacing:'.06em', textTransform:'uppercase', color:'var(--faint)', background:'var(--card)', padding:'0 6px', zIndex:1 }}>Vue de dessus</div>
        <div style={{ borderRadius:14, border:'2px solid var(--border-2)', background:'var(--bg)',
          backgroundImage:'linear-gradient(rgba(20,56,78,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,56,78,.05) 1px, transparent 1px)', backgroundSize:'26px 26px',
          padding:16, minHeight:148, display:'flex', flexWrap:'wrap', gap:9, alignContent:'flex-start' }}>
          {items.length===0 && <div style={{ margin:'auto', color:'var(--faint)', fontSize:13 }}>Box vide</div>}
          {items.map((it,i)=>(
            <div key={it.id} draggable={editable}
              onDragStart={()=>setDrag(i)} onDragEnd={()=>{ setDrag(null); setOver(null); }}
              onDragOver={e=>{ if(editable){ e.preventDefault(); setOver(i); } }} onDrop={()=>editable&&drop(i)}
              title={editable?'Glissez pour repositionner':''}
              style={{ position:'relative', minWidth: Math.round(60+it.vol*34), height:52, borderRadius:10, background:it.color, color:'#fff',
                padding:'8px 12px', display:'flex', flexDirection:'column', justifyContent:'center', cursor: editable?'grab':'default',
                boxShadow: over===i?'0 0 0 3px rgba(182,61,36,.4)':'0 2px 6px rgba(15,42,59,.14)', opacity: drag===i?.4:1, transition:'box-shadow .12s, opacity .12s', userSelect:'none' }}>
              <span style={{ fontSize:12.5, fontWeight:600, lineHeight:1.15, paddingRight: editable?12:0 }}>{it.name}</span>
              <span style={{ fontSize:10.5, opacity:.82 }}>{it.vol} m³</span>
              {editable && <button onClick={()=>onRemove(it.id)} style={{ position:'absolute', top:5, right:5, color:'rgba(255,255,255,.85)', display:'flex' }}><Icon name="x" size={12} /></button>}
            </div>
          ))}
        </div>
      </div>

      {/* remplissage */}
      <div style={{ marginTop:16 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:7 }}>
          <span style={{ fontSize:13, color:'var(--ink-2)', fontWeight:500 }}>Remplissage</span>
          <span className="tnum" style={{ fontSize:12.5, color:'var(--muted)' }}>{used} / {capacity} m³ · <strong style={{ color: gaugeColor }}>{pct}%</strong></span>
        </div>
        <ProgressBar value={used} max={capacity} color={gaugeColor} height={9} />
      </div>

      {editable && (
        <>
          <div style={{ display:'flex', gap:9, marginTop:16, flexWrap:'wrap' }}>
            <input className="input" value={name} onChange={e=>setName(e.target.value)} onKeyDown={e=>{ if(e.key==='Enter') add(); }} placeholder="Ajouter un objet…" style={{ flex:1, minWidth:150, height:44 }} />
            <select className="select" value={cat} onChange={e=>setCat(e.target.value)} style={{ width:160, height:44 }}>
              {Object.keys(BOX_CAT).map(k=><option key={k} value={k}>{BOX_CAT[k].label}</option>)}
            </select>
            <button className="btn btn-primary" style={{ height:44, width:46, padding:0 }} onClick={add}><Icon name="plus" size={18} /></button>
          </div>
          <div style={{ display:'flex', gap:14, flexWrap:'wrap', marginTop:12 }}>
            {Object.keys(BOX_CAT).map(k=>(
              <span key={k} style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:11.5, color:'var(--muted)' }}>
                <span style={{ width:10, height:10, borderRadius:3, background:BOX_CAT[k].color }} />{BOX_CAT[k].label}</span>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

Object.assign(window, { BoxOverview, BOX_CAT, SEED_BOX });