/* ===== Item detail floating card ===== */
const ItemDetailCard = ({ item, anchor, onClose, onRotate, onLock, onRemove, violations }) => {
  if (!item) return null;
  const cat = window.Mojro.CATEGORIES.find(c => c.id === item.category);
  const top = (anchor?.y ?? 80) + 12;
  const left = Math.min(window.innerWidth - 360, (anchor?.x ?? 80) + 12);
  const myViols = (violations || []).filter(v => v.item === item.id);
  return (
    <div className="card card--elev" style={{
      position:'fixed', top, left, width:340, zIndex:30,
      boxShadow:'var(--sh-pop)', borderRadius:10, padding:0, background:'#fff',
    }}>
      <div style={{ display:'flex', alignItems:'flex-start', padding:'12px 14px', borderBottom:'1px solid var(--line)' }}>
        <span style={{
          width:30, height:30, borderRadius:6, background: item.color, marginRight:10, flex:'none',
          display:'grid', placeItems:'center', color:'#fff'
        }}>
          <Icon name={window.Mojro.CARGO_TYPE_ICONS[item.type] || 'box'} size={16}/>
        </span>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ display:'flex', alignItems:'center', gap:6 }}>
            <span className="mono" style={{ fontSize:11, color:'var(--ink-3)' }}>#{item.id.toUpperCase()}</span>
            {item.locked && <Icon name="lock" size={11} style={{ color:'var(--ink-3)' }}/>}
          </div>
          <div style={{ fontSize:13.5, fontWeight:600, marginTop:1 }}>{item.desc}</div>
          <div style={{ fontSize:11.5, color:'var(--ink-3)', marginTop:1 }}>{item.sku}</div>
        </div>
        <button className="btn btn--icon btn--ghost" onClick={onClose}><Icon name="x" size={14}/></button>
      </div>

      <div style={{ padding:'10px 14px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, borderBottom:'1px solid var(--line)' }}>
        <KvRow label="Type"     value={<span className="chip">{item.tag}</span>}/>
        <KvRow label="Category" value={<span className="chip" style={{ background: cat?.color+'22', color: cat?.color }}>{cat?.name || '—'}</span>}/>
        <KvRow label="Qty"      value={<span className="mono">{item.qty}</span>}/>
        <KvRow label="Unit weight" value={<span className="mono">{item.weight} kg</span>}/>
        <KvRow label="Dimensions" value={<span className="mono">{item.L}×{item.W}×{item.H} mm</span>}/>
        <KvRow label="Stop / sequence" value={<span className="mono">#{item.stop}</span>}/>
      </div>

      <div style={{ padding:'10px 14px', borderBottom:'1px solid var(--line)' }}>
        <div className="h-eyebrow" style={{ marginBottom:6 }}>Position · container coords</div>
        <div style={{ display:'flex', gap:8, fontSize:12, fontFamily:'var(--font-mono)' }}>
          <span>X <b>2.40 m</b></span>
          <span>Y <b>0.72 m</b></span>
          <span>Z <b>0.00 m</b></span>
        </div>
      </div>

      <div style={{ padding:'10px 14px', borderBottom:'1px solid var(--line)' }}>
        <div className="h-eyebrow" style={{ marginBottom:6 }}>Constraints applied</div>
        <div style={{ display:'flex', flexDirection:'column', gap:4, fontSize:12 }}>
          <FlagRow ok text="Orientation: upright only — respected"/>
          {item.category==='fragile' && <FlagRow ok text="Fragile: nothing stacked on top"/>}
          {item.category==='hazmat'  && <FlagRow warn text="Hazmat: 600mm food separation"/>}
          <FlagRow ok text={`Stackable up to ${item.qty > 1 ? '4' : '1'} layers`}/>
        </div>
      </div>

      {myViols.length > 0 && (
        <div style={{ padding:'10px 14px', background:'var(--bad-bg)', borderBottom:'1px solid var(--line)' }}>
          {myViols.map(v => (
            <div key={v.id} style={{ fontSize:12, color:'var(--bad)' }}>
              <Icon name="warning" size={11} style={{ verticalAlign:'-2px', marginRight:4 }}/>
              <b>{v.rule}.</b> <span style={{ color:'var(--ink-2)' }}>{v.detail}</span>
            </div>
          ))}
        </div>
      )}

      <div style={{ padding:'10px 14px', display:'flex', gap:6, flexWrap:'wrap' }}>
        <button className="btn btn--sm"><Icon name="rotate" size={12}/> Rotate</button>
        <button className="btn btn--sm" onClick={onLock}><Icon name={item.locked ? 'unlock' : 'lock'} size={12}/> {item.locked ? 'Unlock' : 'Lock'}</button>
        <button className="btn btn--sm"><Icon name="note" size={12}/> Note</button>
        <button className="btn btn--sm" style={{ marginLeft:'auto', color:'var(--bad)' }} onClick={onRemove}>
          <Icon name="trash" size={12}/> Remove
        </button>
      </div>
    </div>
  );
};

const KvRow = ({ label, value }) => (
  <div>
    <div style={{ fontSize:10.5, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:2 }}>{label}</div>
    <div style={{ fontSize:13 }}>{value}</div>
  </div>
);

const FlagRow = ({ ok, warn, text }) => (
  <div style={{ display:'flex', alignItems:'center', gap:6, color: ok ? 'var(--ok)' : 'var(--warn)' }}>
    <Icon name={ok ? 'check' : 'warning'} size={12}/>
    <span style={{ color:'var(--ink-2)' }}>{text}</span>
  </div>
);

window.ItemDetailCard = ItemDetailCard;