// ─── AYR — components/KitItem.jsx ────────────────────────────────────────────
// Item do kit com sub-produtos e inputs.
// Depende de: data/constants.js (C, MF), data/items.js (ITEMS)
// Recebe por props: item, acCol, qq, sq, kitExp, setKitExp, updQty, updSub, t
// ─────────────────────────────────────────────────────────────────────────────

const KitItem=({item,acCol,qq,sq,kitExp,setKitExp,updQty,updSub,t})=>{
  const ac=acCol||item.col,eff=getEff(item.id,qq,sq),ok=eff>=item.min,exp=kitExp===item.id;
  return(<div style={{background:ok?`${ac}12`:C.card,borderRadius:13,marginBottom:7,border:`1px solid ${ok?ac+"55":C.br}`,overflow:"hidden"}}>
    <div style={{padding:"10px 12px",display:"flex",alignItems:"center",gap:9}}>
      <div style={{width:38,height:38,borderRadius:11,background:`${ac}18`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:19,flexShrink:0}}>{item.icon}</div>
      <div style={{flex:1}}>
        <div style={{fontSize:12,fontWeight:700,color:ok?ac:C.cream}}>{item.id}</div>
        <div style={{fontSize:8,color:C.dim,fontFamily:MF}}>{t.minL} {item.min} {item.unit}{item.sub?" · sub-prod.":""}</div>
      </div>
      {item.sub
        ?<div style={{textAlign:"center",minWidth:46}}><div style={{fontSize:18,fontWeight:900,color:ok?ac:C.orange,fontFamily:MF}}>{Math.round(eff*10)/10}</div><div style={{fontSize:7,color:C.dim}}>{item.unit}</div></div>
        :<div style={{display:"flex",alignItems:"center",gap:4}}>
           <button onClick={()=>updQty(item.id,Math.max(0,(qq[item.id]||0)-1))} style={{background:"none",border:"none",cursor:"pointer",fontFamily:MF,color:C.cream,width:26,height:26,borderRadius:7,background:C.c2,border:`1px solid ${C.br}`,fontSize:15,display:"flex",alignItems:"center",justifyContent:"center"}}>−</button>
           <input type="number" value={qq[item.id]||0} onChange={e=>updQty(item.id,e.target.value)} style={{width:42,textAlign:"center",background:"transparent",border:`1px solid ${C.br}`,borderRadius:7,padding:"3px 2px",color:ok?ac:C.cream,fontSize:12,fontWeight:700,fontFamily:MF}}/>
           <button onClick={()=>updQty(item.id,(qq[item.id]||0)+1)} style={{background:"none",border:"none",cursor:"pointer",fontFamily:MF,color:C.cream,width:26,height:26,borderRadius:7,background:C.c2,border:`1px solid ${C.br}`,fontSize:15,display:"flex",alignItems:"center",justifyContent:"center"}}>+</button>
         </div>
      }
      {ok&&<div style={{width:20,height:20,borderRadius:"50%",background:ac,display:"flex",alignItems:"center",justifyContent:"center",fontSize:10,color:"#000",flexShrink:0}}>✓</div>}
    </div>
    <button onClick={()=>setKitExp(exp?null:item.id)} style={{background:"none",border:"none",cursor:"pointer",fontFamily:MF,color:C.dim,width:"100%",borderTop:`1px solid ${C.br}`,padding:"5px 12px",display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:9}}>
      <span style={{fontStyle:"italic"}}>{item.tip.slice(0,62)}…</span>
      <span style={{color:ac,fontSize:12}}>{exp?"▲":"▼"}</span>
    </button>
    {exp&&<div style={{padding:"10px 12px",borderTop:`1px solid ${C.br}`,background:C.bg}}>
      <div style={{fontSize:10,color:C.dim,lineHeight:1.6,marginBottom:item.sub?10:0}}>{item.tip}</div>
      {item.sub&&<>
        <div style={{fontSize:8,color:ac,fontFamily:MF,letterSpacing:2,marginBottom:8}}>{t.exact.toUpperCase()}:</div>
        {item.sub.map(sp=>{const sv=sq[sp.id]||0;return(
          <div key={sp.id} style={{display:"flex",alignItems:"center",gap:7,padding:"6px 0",borderBottom:`1px solid ${C.br}`}}>
            <div style={{width:5,height:5,borderRadius:"50%",background:sv>0?ac:C.muted,flexShrink:0}}/>
            <div style={{flex:1}}>
              <div style={{fontSize:11,color:C.cream}}>{sp.n}</div>
              <div style={{fontSize:7,color:C.dim,fontFamily:MF}}>{sp.v>0?`+${sp.v} ${item.unit}/un`:"suplem."}</div>
            </div>
            <button onClick={()=>updSub(sp.id,Math.max(0,sv-1))} style={{background:"none",border:"none",cursor:"pointer",fontFamily:MF,color:C.cream,width:22,height:22,borderRadius:6,background:C.c2,border:`1px solid ${C.br}`,fontSize:13,display:"flex",alignItems:"center",justifyContent:"center"}}>−</button>
            <input type="number" value={sv} onChange={e=>updSub(sp.id,e.target.value)} style={{width:34,textAlign:"center",background:"transparent",border:`1px solid ${C.br}`,borderRadius:6,padding:"2px",color:sv>0?C.green:C.cream,fontSize:10,fontWeight:700,fontFamily:MF}}/>
            <button onClick={()=>updSub(sp.id,sv+1)} style={{background:"none",border:"none",cursor:"pointer",fontFamily:MF,color:C.cream,width:22,height:22,borderRadius:6,background:C.c2,border:`1px solid ${C.br}`,fontSize:13,display:"flex",alignItems:"center",justifyContent:"center"}}>+</button>
            {sv>0&&sp.v>0&&<span style={{fontSize:8,color:C.teal,fontFamily:MF,minWidth:30,textAlign:"right"}}>+{Math.round(sv*sp.v*10)/10}</span>}
          </div>
        );})}
        <div style={{marginTop:8,padding:"7px 10px",background:`${ac}15`,borderRadius:9,border:`1px solid ${ac}33`,display:"flex",justifyContent:"space-between"}}>
          <span style={{fontSize:9,color:ac,fontFamily:MF}}>{t.total}:</span>
          <span style={{fontSize:13,fontWeight:900,color:ok?C.green:C.orange,fontFamily:MF}}>{Math.round(eff*10)/10} {item.unit} {ok?"✓":`/ ${item.min}`}</span>
        </div>
      </>}
    </div>}
  </div>);
};