/* ============ VapesTab — terminal reskin of VapeCalc ============
   Source: profit-calc-clean-source.html lines 1322-1637. Math identical. */

const exportVapesCSV=(products)=>{
  const filtered=products.filter(p=>p.category==='vapes');
  if(filtered.length===0)return alert('No vape products yet.');
  const cols=['SKU','Oil Type','Hardware','Size','Input','COGS/Unit','WS List','WS Floor','Retail','List Margin %','Units','Revenue','Gross Profit'];
  const rows=filtered.map(p=>[p.skuName,p.oilType,p.hardware,p.size,p.inputMaterial,
    '$'+p.totalCOGS.toFixed(2),'$'+p.wsList.toFixed(2),'$'+p.wsFloor.toFixed(2),'$'+p.consumerRetail.toFixed(2),
    p.listMarginPct.toFixed(1)+'%',p.units,'$'+p.totalRevenue.toFixed(2),'$'+p.totalProfit.toFixed(2)]);
  const csv=[cols.join(','),...rows.map(r=>r.map(c=>'"'+String(c).replace(/"/g,'""')+'"').join(','))].join('\n');
  const blob=new Blob([csv],{type:'text/csv'});
  const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='cannabiz-vapes.csv';a.click();URL.revokeObjectURL(url);
};

function VapesTab({products,setProducts,distroState,setProgress}){
  const [oilType,setOilType]=useState('distillate');
  const [distillateCost,setDistillateCost]=useState(1.00);
  const [distillateBatch2Cost,setDistillateBatch2Cost]=useState(1.50);
  const [distBlendPct,setDistBlendPct]=useState(100);
  const [liveResinCost,setLiveResinCost]=useState(6.00);
  const [hashRosinCost,setHashRosinCost]=useState(15.00);
  const [blendRatio,setBlendRatio]=useState(50);
  const [terpSource,setTerpSource]=useState('botanical');
  const [terpCostPerG,setTerpCostPerG]=useState(0.50);
  const [terpPct,setTerpPct]=useState(5);
  const [noTerps,setNoTerps]=useState(false);
  const [addCBN,setAddCBN]=useState(false);const [cbnCost,setCbnCost]=useState(0.50);const [cbnPct,setCbnPct]=useState(5);
  const [addCBG,setAddCBG]=useState(false);const [cbgCost,setCbgCost]=useState(2.00);const [cbgPct,setCbgPct]=useState(3);
  const [addCBC,setAddCBC]=useState(false);const [cbcCost,setCbcCost]=useState(1.50);const [cbcPct,setCbcPct]=useState(2);
  const [addTHCv,setAddTHCv]=useState(false);const [thcvCost,setThcvCost]=useState(3.00);const [thcvPct,setThcvPct]=useState(2);
  const [customAdditives,setCustomAdditives]=useState([]);
  const [hwId,setHwId]=useState('ccell_th2_10');
  const [volume,setVolume]=useState('p5k');
  const [customHwCost,setCustomHwCost]=useState(3.00);
  const [customHwName,setCustomHwName]=useState('Custom Hardware');
  const [customHwMl,setCustomHwMl]=useState(1.0);
  const [rosinFillG,setRosinFillG]=useState(0.25);
  const [boxCost,setBoxCost]=useState(0.30);
  const [insertCost,setInsertCost]=useState(0.10);
  const [fillLaborCost,setFillLaborCost]=useState(0.35);
  const [pkgLaborCost,setPkgLaborCost]=useState(0.25);
  const laborCost=nonNegative(fillLaborCost)+nonNegative(pkgLaborCost);
  const [skuName,setSkuName]=useState('');
  const [inputGrams,setInputGrams]=useState(1000);
  const [lossPct,setLossPct]=useState(3);
  const [testCostBatch,setTestCostBatch]=useState(400);
  const [consumerRetail,setConsumerRetail]=useState(40);
  const [wsList,setWsList]=useState(20);
  const [wsFloor,setWsFloor]=useState(16);
  const [markupX,setMarkupX]=useState(2.0);

  const hw=VAPE_HARDWARE.find(h=>h.id===hwId)||VAPE_HARDWARE[0];
  const hwCost=hwId==='custom'?nonNegative(customHwCost):nonNegative(hw[volume]||hw.p5k);
  const hwMl=hwId==='custom'?positiveOr(customHwMl):positiveOr(hw.ml);
  const mlSize=oilType==='hashrosin'?positiveOr(rosinFillG):hwMl;
  const safeInputGrams=nonNegative(inputGrams);
  const safeLossPct=clamp(lossPct,0,100);
  const safeDistBlendPct=clamp(distBlendPct,0,100);
  const safeBlendRatio=clamp(blendRatio,0,100);
  const safeWsList=nonNegative(wsList);
  const safeWsFloor=nonNegative(wsFloor);
  const effectiveTerpPct=noTerps?0:clamp(terpPct,0,100);
  const safeCbnPct=clamp(cbnPct,0,100);
  const safeCbgPct=clamp(cbgPct,0,100);
  const safeCbcPct=clamp(cbcPct,0,100);
  const safeThcvPct=clamp(thcvPct,0,100);
  const terpAmount=mlSize*(effectiveTerpPct/100);
  const customAddCost=customAdditives.reduce((s,a)=>s+mlSize*(clamp(nonNegative(a.pct),0,100)/100)*nonNegative(a.cost),0);
  const customAddPct=customAdditives.reduce((s,a)=>s+clamp(nonNegative(a.pct),0,100),0);
  const totalAdditivePct=Math.min(100,effectiveTerpPct+(addCBN?safeCbnPct:0)+(addCBG?safeCbgPct:0)+(addCBC?safeCbcPct:0)+(addTHCv?safeThcvPct:0)+customAddPct);
  const mainOilPct=Math.max(0,100-totalAdditivePct);
  const mainOilAmount=mlSize*(mainOilPct/100);

  let rawOilFillCost=0;
  if(oilType==='distillate'){
    const blendedDistCost=safeDistBlendPct<100?
      (nonNegative(distillateCost)*(safeDistBlendPct/100))+(nonNegative(distillateBatch2Cost)*((100-safeDistBlendPct)/100)):
      nonNegative(distillateCost);
    rawOilFillCost=blendedDistCost*mainOilAmount;
  }else if(oilType==='liveresin')rawOilFillCost=nonNegative(liveResinCost)*mainOilAmount;
  else if(oilType==='hashrosin')rawOilFillCost=nonNegative(hashRosinCost)*mainOilAmount;
  else rawOilFillCost=(nonNegative(distillateCost)*(mainOilAmount*(safeBlendRatio/100)))+(nonNegative(liveResinCost)*(mainOilAmount*((100-safeBlendRatio)/100)));

  const terpCost=noTerps?0:terpAmount*nonNegative(terpCostPerG);
  const cannabinoidCost=(addCBN?mlSize*(safeCbnPct/100)*nonNegative(cbnCost):0)+(addCBG?mlSize*(safeCbgPct/100)*nonNegative(cbgCost):0)
    +(addCBC?mlSize*(safeCbcPct/100)*nonNegative(cbcCost):0)+(addTHCv?mlSize*(safeThcvPct/100)*nonNegative(thcvCost):0)+customAddCost;
  const usableOil=safeInputGrams*(1-safeLossPct/100);
  const units=mlSize>0?Math.max(0,Math.floor(usableOil/mlSize)):0;
  const batchOilSpend=safeInputGrams>0?rawOilFillCost*(safeInputGrams/mlSize):0;
  const totalTerpCost=safeInputGrams>0?terpCost*(safeInputGrams/mlSize):0;
  const totalCannabinoidCost=safeInputGrams>0?cannabinoidCost*(safeInputGrams/mlSize):0;
  const batchTotalMaterialCost=batchOilSpend+totalTerpCost+totalCannabinoidCost;
  const materialCostPerUnit=units>0?batchTotalMaterialCost/units:0;
  const testCostPerUnit=units>0?nonNegative(testCostBatch)/units:0;
  const totalCOGS=units>0
    ? materialCostPerUnit+hwCost+nonNegative(boxCost)+nonNegative(insertCost)+nonNegative(laborCost)+COA_LABEL+testCostPerUnit
    : 0;
  const listMargin=safeWsList-totalCOGS;
  const listMarginPct=safeWsList>0?(listMargin/safeWsList)*100:0;
  const floorMargin=safeWsFloor-totalCOGS;
  const floorMarginPct=safeWsFloor>0?(floorMargin/safeWsFloor)*100:0;

  /* shared distro */
  const distroModel=distroState.distroModelShared;
  const distroMargin=distroState.distroMarginShared;
  const setDistroModel=distroState.setDistroModelShared;
  const setDistroMargin=distroState.setDistroMarginShared;
  const pricingMode=distroState.distroPricingModeShared;
  const setPricingMode=distroState.setDistroPricingModeShared;
  const salesComm=distroState.salesPctShared;
  const setSalesComm=distroState.setSalesPctShared;
  const samplePct=distroState.sampleRateShared;
  const setSamplePct=distroState.setSampleRateShared;
  const [overheadPerUnit,setOverheadPerUnit]=useState(0);
  const safeDistroMargin=pct(distroMargin);
  const safeSalesComm=pct(salesComm);
  const safeSamplePct=pct(samplePct);

  const isFlat=distroModel==='wholesale'&&pricingMode==='flat';
  const isPct=distroModel==='percentage';
  const distroPerUnit=isPct?safeWsList*(safeDistroMargin/100):0;
  const effectiveRevPerUnit=isPct?safeWsList:(isFlat?safeWsList:safeWsList*(1-safeDistroMargin/100));
  const salesPerUnit=effectiveRevPerUnit*(safeSalesComm/100);
  const sampleUnits=Math.ceil(units*(safeSamplePct/100));
  const samplePerUnit=units>0?(sampleUnits*totalCOGS)/units:0;
  const netPerUnit=effectiveRevPerUnit-totalCOGS-distroPerUnit-salesPerUnit-samplePerUnit-nonNegative(overheadPerUnit);
  const netTotal=netPerUnit*units;
  const netMarginPct=effectiveRevPerUnit>0?(netPerUnit/effectiveRevPerUnit)*100:0;
  const revenueAfterDistro=effectiveRevPerUnit-distroPerUnit;
  const netAfterRepsSamples=effectiveRevPerUnit-distroPerUnit-salesPerUnit-samplePerUnit;

  const sku_done=!!skuName;
  const yield_done=inputGrams>0&&units>0;
  const pricing_done=wsList>0;
  const takehome_done=netPerUnit>0;
  const vapeProducts=products.filter(p=>p.category==='vapes');
  const mix_done=vapeProducts.length>0;

  useEffect(()=>{
    setProgress({raw:true,sku:sku_done,yield:yield_done,pricing:pricing_done,takehome:takehome_done,addmix:mix_done});
  },[sku_done,yield_done,pricing_done,takehome_done,mix_done]);

  const oilLabelMap={distillate:'Distillate',liveresin:'Live Resin',hashrosin:'Hash Rosin',blend:'Dist + LR Blend'};
  const oilLabel=oilType==='distillate'?(distBlendPct<100?`Dist Blend (${distBlendPct}/${100-distBlendPct})`:'Distillate'):oilLabelMap[oilType];

  const canAdd=units>0&&wsList>0;
  const addProduct=()=>{
    const hwName=hwId==='custom'?customHwName:hw.name;
    setProducts(p=>[...p,{
      id:uid(),category:'vapes',skuName:skuName||`${oilLabel} ${mlSize}ml`,inputMaterial:`${inputGrams}g`,
      oilType:oilLabel,hardware:hwName,size:`${mlSize}ml`,
      oilCost:materialCostPerUnit,terpCost,cannabinoidCost,hwCost,
      pkgCost:nonNegative(boxCost)+nonNegative(insertCost),laborCost:nonNegative(laborCost),
      coaCost:COA_LABEL,testCostPerUnit,totalCOGS,
      consumerRetail:nonNegative(consumerRetail),wsList:safeWsList,wsFloor:safeWsFloor,listMarginPct,floorMarginPct,units,
      totalRevenue:safeWsList*units,totalCOGSAll:totalCOGS*units,totalProfit:listMargin*units
    }]);
  };

  const railBand=bandForMargin(netMarginPct);
  const blendedDistCost=safeDistBlendPct<100?
    (nonNegative(distillateCost)*(safeDistBlendPct/100))+(nonNegative(distillateBatch2Cost)*((100-safeDistBlendPct)/100)):
    nonNegative(distillateCost);
  const effectiveOilCostPerG=oilType==='distillate'?blendedDistCost:oilType==='liveresin'?liveResinCost:oilType==='hashrosin'?hashRosinCost:(nonNegative(distillateCost)*(safeBlendRatio/100))+(nonNegative(liveResinCost)*((100-safeBlendRatio)/100));

  return(<div className="shell">
    <div className="col-main">
      <div className="readme">
        <p><strong style={{color:'var(--text)'}}>vape math.</strong> you buy oil by the <code>gram</code>, fill carts at a <code>ml_size</code>. each cart can be pure distillate, pure live resin, pure hash rosin, or a <code>blend</code>. add <code>terpenes</code> and other <code>cannabinoids</code> to taste (each takes a % of the fill). <code>cogs</code> = oil + terps + cannabinoids + hardware + pkg + labor + COA + testing. <strong style={{color:'var(--accent)'}}>take-home</strong> = ws_list − cogs − distro − reps − samples.</p>
        <div className="bands">
          <span className="band premium"><b>45%+</b> excellent</span>
          <span className="band strong"><b>30–45%</b> strong</span>
          <span className="band average"><b>20–30%</b> average</span>
          <span className="band thin"><b>10–20%</b> thin</span>
          <span className="band low"><b>&lt;10%</b> unviable</span>
        </div>
      </div>

      <Section stepId="sku" idx={1} title="configure sku" done={sku_done} active={!sku_done}>
        <div className="g-sku">
          <Field highlight label="sku_name" type="text" value={skuName} onChange={setSkuName} hint="strain or product name" tip="The name you'll sell this under. Example: 'Blue Dream 1g Cart'."/>
          <Field highlight label="oil_type" value={oilType} onChange={v=>{setOilType(v);setNoTerps(v==='hashrosin');}} options={[{value:'distillate',label:'Distillate'},{value:'liveresin',label:'Live Resin'},{value:'hashrosin',label:'Hash Rosin (Solventless)'},{value:'blend',label:'Dist + Live Resin Blend'}]} tip="Distillate = cheap, high-THC, mostly flavorless. Live resin = preserves terps, better flavor. Hash rosin = solventless, top-shelf. Blend = mix dist + LR for cost-balanced flavor."/>
          <Field highlight label="hardware" value={hwId} onChange={setHwId} options={VAPE_HARDWARE.map(h=>({value:h.id,label:h.name}))} tip="The cart/disposable body. 510 = screw-on cart that needs a battery. Disposable = all-in-one. Rosin carts have ceramic cores that handle thick oil."/>
          <Field highlight label="volume_tier" value={volume} onChange={setVolume} options={[{value:'p1k',label:'1K+ units'},{value:'p5k',label:'5K+ units'},{value:'p10k',label:'10K+ units'}]} tip="Hardware gets cheaper at higher order volumes. Pick the tier you can actually commit to buying."/>
        </div>
      </Section>

      <Section stepId="sku" idx={2} title="oil configuration" done={true}>
        {oilType==='distillate'&&<>
          <div className="g3">
            <Field label="distillate_cost / g" prefix="$" value={distillateCost} onChange={setDistillateCost} hint="primary batch"/>
            <div className="field"><label>primary_batch_pct <span style={{color:'var(--muted)',fontWeight:400,textTransform:'none',letterSpacing:0,fontSize:11}}>&nbsp;{distBlendPct===100?'single batch':`${distBlendPct}/${100-distBlendPct} blend`}</span></label>
              <input type="range" min={0} max={100} value={distBlendPct} onChange={e=>setDistBlendPct(parseInt(e.target.value))} style={{width:'100%',accentColor:'var(--accent)',marginTop:10}}/>
            </div>
            {distBlendPct<100&&<Field label="batch_2_cost / g" prefix="$" value={distillateBatch2Cost} onChange={setDistillateBatch2Cost}/>}
          </div>
          {distBlendPct<100&&<div style={{fontFamily:'var(--mono)',fontSize:11,color:'var(--muted)',marginTop:10,padding:'8px 12px',background:'var(--surface-2)',border:'1px solid var(--border)',borderRadius:4}}>
            blend: {distBlendPct}% @ {fmt(distillateCost)}/g + {100-distBlendPct}% @ {fmt(distillateBatch2Cost)}/g = <span style={{color:'var(--accent)'}}>{fmt(blendedDistCost)}/g blended</span>
          </div>}
        </>}
        {oilType==='liveresin'&&<div className="g2">
          <Field label="live_resin_cost / g" prefix="$" value={liveResinCost} onChange={setLiveResinCost}/>
          <Stat label="effective_oil_cost" value={`${fmt(liveResinCost)}/g`} sub="straight fill" tone="warn"/>
        </div>}
        {oilType==='hashrosin'&&<div className="g3">
          <Field label="hash_rosin_cost / g" prefix="$" value={hashRosinCost} onChange={setHashRosinCost}/>
          <Field label="fill_per_cart" value={rosinFillG} onChange={setRosinFillG} suffix="g" step={0.05} min={0.1} max={2} hint="rosin carts are smaller"/>
          <Stat label="fill_vs_hw_capacity" value={`${rosinFillG}g / ${hwMl}ml`} sub={rosinFillG>hwMl?'over capacity!':'ok'} tone={rosinFillG>hwMl?'neg':'pos'}/>
        </div>}
        {oilType==='blend'&&<div className="g3">
          <Field label="distillate_cost / g" prefix="$" value={distillateCost} onChange={setDistillateCost}/>
          <Field label="live_resin_cost / g" prefix="$" value={liveResinCost} onChange={setLiveResinCost}/>
          <Field label="distillate_pct_in_blend" value={blendRatio} onChange={setBlendRatio} suffix="%" min={0} max={100}/>
        </div>}

        <SubHead title="terpenes" note="skip for solventless"/>
        <Seg options={[{value:false,label:'add_terpenes'},{value:true,label:'no_terps'}]} value={noTerps} onChange={setNoTerps}/>
        {!noTerps&&<div className="g3" style={{marginTop:12}}>
          <Field label="terpene_source" value={terpSource} onChange={v=>{setTerpSource(v);setTerpCostPerG(v==='botanical'?0.50:v==='cannabis'?3.00:5.00);}} options={[{value:'botanical',label:'Botanical ($0.50/g)'},{value:'cannabis',label:'Cannabis-Derived ($3/g)'},{value:'live',label:'Live Terpenes ($5/g)'}]} tip="Botanical = made from non-cannabis plants, cheap. Cannabis-derived = real strain profile. Live = extracted from fresh-frozen flower, premium."/>
          <Field label="terpene_cost / g" prefix="$" value={terpCostPerG} onChange={setTerpCostPerG}/>
          <Field label="terpene_pct" value={terpPct} onChange={setTerpPct} suffix="%" min={0} max={20} hint="typically 3-8%"/>
        </div>}
      </Section>

      <Section stepId="sku" idx={3} title="cannabinoid additives" done={true} note="optional blends">
        <p className="section-desc">toggle alt cannabinoids into the fill. great for hemp-market formulations.</p>
        <div className="g4">
          {[
            {key:'cbn',name:'D8 (Delta-8)',active:addCBN,setActive:setAddCBN,cost:cbnCost,setCost:setCbnCost,pctV:cbnPct,setPct:setCbnPct},
            {key:'cbg',name:'THCa',active:addCBG,setActive:setAddCBG,cost:cbgCost,setCost:setCbgCost,pctV:cbgPct,setPct:setCbgPct},
            {key:'cbc',name:'HHC',active:addCBC,setActive:setAddCBC,cost:cbcCost,setCost:setCbcCost,pctV:cbcPct,setPct:setCbcPct},
            {key:'thcv',name:'THCp',active:addTHCv,setActive:setAddTHCv,cost:thcvCost,setCost:setThcvCost,pctV:thcvPct,setPct:setThcvPct}
          ].map(c=>(<div key={c.key} onClick={()=>c.setActive(!c.active)} style={{background:c.active?'rgba(49,208,160,.08)':'var(--surface-2)',border:`1px solid ${c.active?'var(--accent)':'var(--border)'}`,borderRadius:'var(--r-sm)',padding:10,cursor:'pointer',transition:'.15s'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:c.active?8:0,fontFamily:'var(--mono)',fontSize:11}}>
              <span style={{fontWeight:600,color:c.active?'var(--accent)':'var(--muted)',textTransform:'uppercase',letterSpacing:'.06em'}}>{c.name.toLowerCase()}</span>
              <span style={{fontSize:10,color:c.active?'var(--accent)':'var(--border-2)'}}>[{c.active?'on':'off'}]</span>
            </div>
            {c.active&&<div onClick={e=>e.stopPropagation()} className="g2">
              <Field label="cost/g" prefix="$" value={c.cost} onChange={c.setCost}/>
              <Field label="pct" value={c.pctV} onChange={c.setPct} suffix="%"/>
            </div>}
          </div>))}
        </div>

        <SubHead title="custom additives" note="isolates · flavoring · mct"/>
        {customAdditives.map((a,i)=><div key={i} className="g4" style={{marginBottom:8,alignItems:'end'}}>
          <Field label="name" type="text" value={a.name} onChange={v=>{const n=[...customAdditives];n[i]={...n[i],name:v};setCustomAdditives(n);}}/>
          <Field label="cost/g" prefix="$" value={a.cost} onChange={v=>{const n=[...customAdditives];n[i]={...n[i],cost:v};setCustomAdditives(n);}}/>
          <Field label="pct" value={a.pct} onChange={v=>{const n=[...customAdditives];n[i]={...n[i],pct:v};setCustomAdditives(n);}} suffix="%"/>
          <button className="btn danger sm" onClick={()=>setCustomAdditives(ca=>ca.filter((_,j)=>j!==i))}>×</button>
        </div>)}
        <button className="btn outline sm" onClick={()=>setCustomAdditives(ca=>[...ca,{name:'',cost:0,pct:2}])}>+ custom additive</button>

        {totalAdditivePct>=100&&<div style={{marginTop:10,padding:10,background:'rgba(241,136,96,.08)',border:'1px solid var(--neg)',borderRadius:4,fontFamily:'var(--mono)',fontSize:11,color:'var(--neg)'}}>
          ⚠ additives total {totalAdditivePct.toFixed(0)}% of fill — reduce to leave room for main oil. main oil now at {mainOilPct.toFixed(0)}%.
        </div>}
        <div style={{marginTop:10}}>
          <Stat label="fill_composition" value={`${mainOilPct.toFixed(0)}% oil / ${effectiveTerpPct.toFixed(0)}% terps / ${(totalAdditivePct-effectiveTerpPct).toFixed(0)}% cann`} sub={`${mlSize}ml cart = ${mainOilAmount.toFixed(3)}g oil + ${terpAmount.toFixed(3)}g terps + rest`}/>
        </div>
      </Section>

      <Section stepId="sku" idx={4} title="hardware · packaging · labor" done={true}>
        <SubHead title="hardware"/>
        {hwId==='custom'&&<div className="g3">
          <Field label="custom_hw_name" type="text" value={customHwName} onChange={setCustomHwName}/>
          <Field label="custom_hw_cost" prefix="$" value={customHwCost} onChange={setCustomHwCost}/>
          <Field label="custom_hw_capacity" value={customHwMl} onChange={setCustomHwMl} suffix="ml" step={0.05} min={0.25}/>
        </div>}
        {hwId!=='custom'&&<div className="g3">
          <Stat label="hardware_cost" value={fmt(hwCost)} sub={`${hw.name} · ${hw.ml}ml ${hw.type} @ ${volume.replace('p','').replace('k','K')}`} tone="warn"/>
          <Stat label="type" value={hw.type} sub="510 = needs battery · disposable = all-in-one"/>
          <Stat label="capacity" value={`${hw.ml}ml`} sub={oilType==='hashrosin'?`rosin fill ${rosinFillG}g`:'matches cart size'}/>
        </div>}
        {hwId!=='custom'&&<div className="tbl-wrap" style={{marginTop:10,maxHeight:220,overflowY:'auto'}}><table className="tbl" style={{fontSize:11}}>
          <thead><tr><th>hardware</th><th>type</th><th>ml</th><th>@1K</th><th>@5K</th><th>@10K</th></tr></thead>
          <tbody>{VAPE_HARDWARE.filter(h=>h.id!=='custom').map(h=><tr key={h.id} onClick={()=>setHwId(h.id)} style={{cursor:'pointer',background:h.id===hwId?'rgba(49,208,160,.07)':'transparent'}}>
            <td style={{color:h.id===hwId?'var(--accent)':'var(--text)'}}>{h.name}</td>
            <td className="dim">{h.type}</td>
            <td className="dim">{h.ml}</td>
            <td>{fmt(h.p1k)}</td><td>{fmt(h.p5k)}</td><td>{fmt(h.p10k)}</td>
          </tr>)}</tbody>
        </table></div>}

        <SubHead title="packaging & labor"/>
        <div className="g4">
          <Field label="box_pkg" prefix="$" value={boxCost} onChange={setBoxCost} step={0.05}/>
          <Field label="insert_card" prefix="$" value={insertCost} onChange={setInsertCost} step={0.05}/>
          <Field label="fill_labor" prefix="$" value={fillLaborCost} onChange={setFillLaborCost} step={0.05} hint="fill, cap, qc"/>
          <Field label="pkg_labor" prefix="$" value={pkgLaborCost} onChange={setPkgLaborCost} step={0.05} hint="box, label, seal"/>
        </div>
      </Section>

      <Section stepId="yield" idx={5} title="input quantity · yield · testing" done={yield_done} active={sku_done&&!yield_done}>
        <div className="g3">
          <Field highlight label="total_oil_purchased" value={inputGrams} onChange={setInputGrams} suffix="g" step={50} tip="Total grams of oil (or blend base) you bought to fill carts."/>
          <Field label="loss_factor" value={lossPct} onChange={setLossPct} suffix="%" step={0.5} hint="fill spill · residual"/>
          <Field label="testing_batch" prefix="$" value={testCostBatch} onChange={setTestCostBatch}/>
        </div>
        <div className="g4" style={{marginTop:12}}>
          <Stat label="theoretical_max" value={Math.floor(inputGrams/mlSize).toLocaleString()} sub={`${inputGrams}g / ${mlSize}ml`} tone="dim"/>
          <Stat label="usable_oil" value={`${usableOil.toFixed(0)}g`} sub={`after ${lossPct}% loss`} tone="neg"/>
          <Stat label="finished_carts" value={units.toLocaleString()} sub={`${usableOil.toFixed(0)}g ÷ ${mlSize}ml`} tone="pos"/>
          <Stat label="hardware_needed" value={`${units.toLocaleString()} pcs`} sub="match to volume tier"/>
        </div>
        <div className="g3" style={{marginTop:12}}>
          <Stat label="oil_spend" value={fmtK(batchOilSpend)} sub={`${fmt(effectiveOilCostPerG)}/g × ${(safeInputGrams*(mainOilPct/100)).toFixed(0)}g main oil`}/>
          <Stat label="additives_spend" value={fmtK(totalTerpCost+totalCannabinoidCost)} sub={`terps ${fmtK(totalTerpCost)} + cann ${fmtK(totalCannabinoidCost)}`} tone="warn"/>
          <Stat label="test_cost / unit" value={fmt(testCostPerUnit)} sub={`${fmt(testCostBatch)} / ${units} units`} tone="warn"/>
        </div>

        <SubHead title="per-unit cogs breakdown"/>
        <Waterfall caption={`every line going into one ${mlSize}ml cart.`}
          lines={[
            {label:`oil_fill  (${fmtK(batchOilSpend)} / ${units||0} carts)`,value:fmt(materialCostPerUnit-(terpCost+cannabinoidCost))},
            ...(noTerps?[]:[{label:`terpenes  (${effectiveTerpPct}% · ${terpAmount.toFixed(3)}g)`,value:fmt(terpCost),tone:'warn'}]),
            ...(cannabinoidCost>0?[{label:'cannabinoid_additives',value:fmt(cannabinoidCost),tone:'warn'}]:[]),
            {label:`hardware  (${hwId==='custom'?customHwName:hw.name})`,value:fmt(hwCost)},
            {label:'box + insert',value:fmt(boxCost+insertCost)},
            {label:'fill_labor',value:fmt(fillLaborCost)},
            {label:'pkg_labor',value:fmt(pkgLaborCost)},
            {label:'coa_label',value:fmt(COA_LABEL)},
            {label:`testing  (${fmt(testCostBatch)} / ${units})`,value:fmt(testCostPerUnit)}
          ]}
          total={fmt(totalCOGS)} totalLabel="cogs / cart"/>
      </Section>

      <Section stepId="pricing" idx={6} title="pricing · margin bands" done={pricing_done} active={yield_done&&!pricing_done}>
        {!isFlat&&<div className="g4">
          <Field highlight label="ws_list" prefix="$" value={wsList} onChange={v=>{setWsList(v);setConsumerRetail(+(v*markupX).toFixed(2));}} hint="what you charge the store"/>
          <Field highlight label="ws_floor" prefix="$" value={wsFloor} onChange={setWsFloor} hint="lowest you'd accept"/>
          <Field label="markup" value={markupX} onChange={v=>{setMarkupX(v);setConsumerRetail(+(wsList*v).toFixed(2));}} suffix="×" step={0.1}/>
          <Field label="retail" prefix="$" value={consumerRetail} onChange={v=>{setConsumerRetail(v);if(wsList>0)setMarkupX(+(v/wsList).toFixed(2));}}/>
        </div>}
        {isFlat&&<div className="g2">
          <Field label="flat_price_to_distro" prefix="$" value={wsList} onChange={v=>{setWsList(v);setConsumerRetail(+(v*markupX).toFixed(2));}}/>
          <div style={{alignSelf:'center',color:'var(--muted)',fontSize:12,lineHeight:1.6}}>flat to distro — they handle retail.</div>
        </div>}

        <SubHead title="benchmarks"/>
        {!isFlat?<div className="g2">
          <BenchBar name="gm @ list" pct={listMarginPct}/>
          <BenchBar name="gm @ floor" pct={floorMarginPct}/>
        </div>:<BenchBar name="gm @ flat" pct={listMarginPct}/>}

        <SubHead title="deductions waterfall" note="revenue → take-home"/>
        <Waterfall caption="every deduction from revenue down to what you pocket per cart."
          lines={[
            {label:isFlat?'flat_price_to_distro':'ws_list',value:fmt(effectiveRevPerUnit),sign:'+ '},
            {label:'cogs',value:fmt(totalCOGS),sign:'− ',tone:'neg'},
            ...(isPct?[{label:`distro_fee  (${safeDistroMargin}% of invoice)`,value:fmt(distroPerUnit),sign:'− ',tone:'warn'}]:[]),
            {label:`sales_reps  (${safeSalesComm}%)`,value:fmt(salesPerUnit),sign:'− ',tone:'warn'},
            {label:`samples  (${safeSamplePct}% at cogs)`,value:fmt(samplePerUnit),sign:'− ',tone:'warn'},
            ...(overheadPerUnit>0?[{label:'overhead',value:fmt(overheadPerUnit),sign:'− ',tone:'neg'}]:[])
          ]}
          total={fmt(netPerUnit)} totalLabel="take-home / cart"/>
      </Section>

      <Section stepId="takehome" idx={7} title="distribution & sales" done={takehome_done} active={pricing_done&&!takehome_done} note="syncs across all tabs">
        <Seg options={[{value:'pct',label:'distro_takes_fee'},{value:'flat',label:'sell_at_flat_price'},{value:'discount',label:'sell_at_discount'}]} value={distroModel==='percentage'?'pct':(pricingMode==='flat'?'flat':'discount')}
        onChange={v=>{
          if(v==='pct'){setDistroModel('percentage');setPricingMode('pct');setDistroMargin(10);}
          else if(v==='flat'){setDistroModel('wholesale');setPricingMode('flat');}
          else {setDistroModel('wholesale');setPricingMode('pct');setDistroMargin(20);}
        }}/>
        <div className="g4" style={{marginTop:12}}>
          {distroModel==='percentage'&&<Field highlight label="distro_pct" value={distroMargin} onChange={setDistroMargin} suffix="%"/>}
          {distroModel==='wholesale'&&pricingMode==='pct'&&<Field highlight label="discount_pct" value={distroMargin} onChange={setDistroMargin} suffix="%"/>}
          {isFlat&&<Field highlight label="flat_price" prefix="$" value={wsList} onChange={v=>setWsList(v)}/>}
          <Field highlight label="sales_rep_commission" value={salesComm} onChange={setSalesComm} suffix="%"/>
          <Field label="samples_pct" value={samplePct} onChange={setSamplePct} suffix="%"/>
          <Field label="overhead / unit" prefix="$" value={overheadPerUnit} onChange={setOverheadPerUnit} step={0.05}/>
        </div>
        <div className="g3" style={{marginTop:14}}>
          <Stat label="revenue_after_distro" value={fmt(revenueAfterDistro)} sub={isPct?`${fmt(effectiveRevPerUnit)} − ${fmt(distroPerUnit)}`:'distro pays direct'}/>
          <Stat label="net_after_reps_samples" value={fmt(netAfterRepsSamples)} sub={`− ${fmt(salesPerUnit)} reps − ${fmt(samplePerUnit)} samples`} tone="warn"/>
          <Stat label="take_home / cart" value={fmt(netPerUnit)} sub={`${netMarginPct.toFixed(1)}% net`} tone={netPerUnit>0?'pos':'neg'}/>
        </div>
      </Section>

      <Section stepId="takehome" idx={8} title="batch totals · full run" done={units>0}>
        <div className="g3">
          <Stat label="capital_required" value={fmtK(totalCOGS*units)} sub={`${fmt(totalCOGS)}/u × ${units.toLocaleString()}`} tone="neg"/>
          <Stat label="revenue_at_list" value={fmtK(effectiveRevPerUnit*units)} sub={`${fmt(effectiveRevPerUnit)}/u × ${units.toLocaleString()}`}/>
          <Stat label="gross_profit" value={fmtK(listMargin*units)} sub="before distro/reps/samples" tone={listMargin>0?'pos':'neg'}/>
        </div>
        <div className="g3" style={{marginTop:12}}>
          <Stat label="take_home_batch" value={fmtK(netTotal)} sub={`${units.toLocaleString()} × ${fmt(netPerUnit)}`} tone={netTotal>0?'pos':'neg'}/>
          <Stat label="return_on_capital" value={totalCOGS*units>0?`${(netTotal/(totalCOGS*units)*100).toFixed(1)}%`:'—'} sub="take-home / capital" tone={netTotal>0?'pos':'neg'}/>
          <Stat label="net_margin" value={`${netMarginPct.toFixed(1)}%`} sub={bandForMargin(netMarginPct).label} tone={bandForMargin(netMarginPct).idx>=3?'pos':bandForMargin(netMarginPct).idx>=2?'warn':'neg'}/>
        </div>
      </Section>

      <Section stepId="addmix" idx={9} title="add to product mix" done={mix_done} active={takehome_done&&!mix_done}>
        <p className="section-desc">save this vape SKU. build your full lineup across oil types and hardware.</p>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          <button className="btn primary" onClick={addProduct} disabled={!canAdd}>[+] add_to_mix</button>
          {vapeProducts.length>0&&<button className="btn outline" onClick={()=>exportVapesCSV(products)}>export vapes csv</button>}
        </div>
        {vapeProducts.length>0&&<div style={{marginTop:16}}>
          <SubHead title="vape product mix"/>
          <div className="tbl-wrap"><table className="tbl">
            <thead><tr>
              <th>sku</th><th>oil</th><th>hardware</th><th>size</th><th>cogs/u</th><th>ws_list</th><th>ws_floor</th><th>retail</th><th>margin</th>
              <th>units</th><th>revenue</th><th>gross</th><th></th>
            </tr></thead>
            <tbody>{vapeProducts.map(p=><tr key={p.id}>
              <td className="sku">{p.skuName}</td>
              <td className="dim">{p.oilType}</td>
              <td className="dim" style={{fontSize:10}}>{p.hardware}</td>
              <td className="dim">{p.size}</td>
              <td>{fmt(p.totalCOGS)}</td>
              <td className="pos">{fmt(p.wsList)}</td>
              <td className="warn">{fmt(p.wsFloor)}</td>
              <td className="dim">{fmt(p.consumerRetail)}</td>
              <td style={{color:bandForMargin(p.listMarginPct).color}}>{p.listMarginPct.toFixed(1)}%</td>
              <td>{p.units.toLocaleString()}</td>
              <td>{fmtK(p.totalRevenue)}</td>
              <td className="pos">{fmtK(p.totalProfit)}</td>
              <td><button className="btn danger sm" onClick={()=>setProducts(ps=>ps.filter(x=>x.id!==p.id))}>×</button></td>
            </tr>)}</tbody>
          </table></div>
        </div>}
      </Section>
    </div>

    <aside className="rail">
      <div className="rail-card">
        <div className="rail-panel head">
          <div className="rail-eyebrow">live cart</div>
          <div className="rail-title">{skuName||'untitled vape'}</div>
          <div className="rail-meta">{oilLabel} · {mlSize}ml · {hwId==='custom'?customHwName:hw.name.split(' ')[0]}</div>
        </div>
        <div className="rail-panel">
          <div className="rail-hero-label">take-home / cart</div>
          <div className={`rail-hero-val ${netPerUnit<0?'neg':''}`}>{fmt(netPerUnit)}</div>
          <div className="rail-hero-sub">{netMarginPct.toFixed(1)}% of {isFlat?'flat_price':'ws_list'}</div>
        </div>
        <div className="rail-panel">
          <div className="rail-ledger">
            <div className="r"><span className="lbl">{isFlat?'flat':'ws_list'}</span><span className="val">+ {fmt(effectiveRevPerUnit)}</span></div>
            <div className="r neg"><span className="lbl">cogs</span><span className="val">− {fmt(totalCOGS)}</span></div>
            {isPct&&<div className="r warn"><span className="lbl">distro</span><span className="val">− {fmt(distroPerUnit)}</span></div>}
            <div className="r warn"><span className="lbl">reps</span><span className="val">− {fmt(salesPerUnit)}</span></div>
            <div className="r warn"><span className="lbl">samples</span><span className="val">− {fmt(samplePerUnit)}</span></div>
            <div className="rule"></div>
            <div className="r total"><span className="lbl">net</span><span className="val">{fmt(netPerUnit)}</span></div>
          </div>
        </div>
        <div className="rail-panel">
          <div className="rail-grid">
            <div className="rail-stat"><span className="lbl">carts</span><span className="val">{units.toLocaleString()}</span></div>
            <div className="rail-stat"><span className="lbl">hw_cost</span><span className="val">{fmt(hwCost)}</span></div>
            <div className="rail-stat"><span className="lbl">revenue</span><span className="val">{fmtK(effectiveRevPerUnit*units)}</span></div>
            <div className="rail-stat"><span className="lbl">take-home</span><span className="val pos">{fmtK(netTotal)}</span></div>
          </div>
        </div>
        <div className="rail-panel">
          <button className="btn primary" style={{width:'100%',justifyContent:'center'}} onClick={addProduct} disabled={!canAdd}>[+] add_to_mix</button>
        </div>
      </div>
      <div className="bench-callout">
        <span className="pct" style={{color:railBand.color}}>{netMarginPct.toFixed(1)}%</span> — <b style={{color:railBand.color}}>{railBand.label}</b> band for {oilLabel}.
      </div>

      {vapeProducts.length>0&&<div className="mix-mini">
        <div className="mix-mini-head">
          <span className="mix-eyebrow">vape_mix</span>
          <span className="mix-count">{vapeProducts.length} sku{vapeProducts.length>1?'s':''}</span>
        </div>
        <div className="mix-list">
          {vapeProducts.map(p=>{
            const b=bandForMargin(p.listMarginPct);
            return(<div key={p.id} className="mix-item">
              <div className="mix-row-top">
                <span className="mix-sku" title={p.skuName}>{p.skuName}</span>
                <button className="mix-x" onClick={()=>setProducts(ps=>ps.filter(x=>x.id!==p.id))} title="remove">×</button>
              </div>
              <div className="mix-row-mid">
                <span className="mix-meta">{p.oilType.toLowerCase()} · {p.size}</span>
                <span className="mix-pct" style={{color:b.color}}>{p.listMarginPct.toFixed(0)}%</span>
              </div>
              <div className="mix-row-bot">
                <span className="mix-price">{fmt(p.wsList)} <span className="dim">/u</span></span>
                <span className="mix-profit">{fmtK(p.totalProfit)}</span>
              </div>
            </div>);
          })}
        </div>
      </div>}
    </aside>
  </div>);
}

Object.assign(window,{VapesTab,exportVapesCSV});