// Dashboard Drill-Down Engine — Centralized intelligence for OM Group Dashboard
const { useState: ddSt, useMemo: ddMemo } = React;

// ── Universal CSV Export Engine ───────────────────────────────────────────
window.exportCSV = function(filename, rows, cols) {
  if (!rows || !rows.length) { window.toast && window.toast('No data to export','er'); return; }
  const safe = v => '"' + String(v == null ? '' : v).replace(/"/g, '""') + '"';
  const hdr = cols.map(c => safe(c.h || c.k)).join(',');
  const body = rows.map(r => cols.map(c => {
    const raw = r[c.k]; return safe(c.f ? c.f(raw, r) : raw);
  }).join(','));
  const csv = '\uFEFF' + [hdr, ...body].join('\r\n');
  const blob = new Blob([csv], {type:'text/csv;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = (filename||'export').replace(/[^\w\-]/g,'_') + '.csv';
  document.body.appendChild(a); a.click();
  setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 1500);
  window.toast && window.toast('Exported ' + rows.length + ' rows — ' + (filename||'export'), 'ok');
};

// ── DashDrillModal — reusable modal wrapper ───────────────────────────────
function DashDrillModal({ title, subtitle, color, onClose, children, width }) {
  return ReactDOM.createPortal(
    <div className="mbg">
      <div className="mod mod-xl" style={{maxWidth:width||880,width:'94vw'}}>
        <div className="mod-hd">
          <div>
            <h2 style={{color:color||'var(--or)'}}>{title}</h2>
            {subtitle&&<div style={{fontSize:11,color:'var(--txt2)',marginTop:2,fontWeight:400}}>{subtitle}</div>}
          </div>
          <button className="mod-x" onClick={onClose}>×</button>
        </div>
        <div className="dd-mod-bd mod-bd">{children}</div>
        <div className="mod-ft"><button className="btn btn-wh" onClick={onClose}>Close</button></div>
      </div>
    </div>,
    document.body
  );
}
window.DashDrillModal = DashDrillModal;

// ── DashKPIs — mini KPI strip inside drill panels ─────────────────────────
function DashKPIs({ items }) {
  return (
    <div className="dd-kpi-row">
      {items.map(([l,v,c],i)=>(
        <div key={i} style={{background:'#F9FAFB',border:'1px solid var(--bdr)',borderRadius:6,padding:'8px 12px'}}>
          <div className="kpi-val" style={{fontSize:16,fontWeight:700,color:c||'var(--or)'}}>{v}</div>
          <div style={{fontSize:11,color:'var(--txt2)',marginTop:2}}>{l}</div>
        </div>
      ))}
    </div>
  );
}
window.DashKPIs = DashKPIs;

// ── DashBTable — generic breakdown table ──────────────────────────────────
// cols: [{k, h, r(ight), b(old), cl(color), f(ormat fn), mono}]
function DashBTable({ title, rows, cols, maxH }) {
  if(!rows) return null;
  return (
    <div style={{marginBottom:14}}>
      {title&&(
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:7}}>
          <div style={{fontWeight:700,fontSize:12,color:'var(--txt)'}}>{title}</div>
          {rows.length>0&&<button className="btn btn-wh btn-sm" style={{height:22,padding:'0 8px',fontSize:10.5,flexShrink:0}} onClick={()=>window.exportCSV&&window.exportCSV(title,rows,cols)}><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> CSV</button>}
        </div>
      )}
      <div style={{overflowX:'auto',maxHeight:maxH,overflowY:maxH?'auto':'visible'}}>
        <table style={{width:'100%',borderCollapse:'collapse',fontSize:11.5}}>
          <thead><tr style={{background:'#F9FAFB'}}>
            {cols.map(c=>(
              <th key={c.k} style={{padding:'5px 8px',textAlign:c.r?'right':'left',fontWeight:700,fontSize:10.5,color:'var(--txt2)',borderBottom:'1px solid var(--bdr)',whiteSpace:'nowrap',position:'sticky',top:0,background:'#F9FAFB',zIndex:1}}>{c.h}</th>
            ))}
          </tr></thead>
          <tbody>
            {rows.length===0
              ?<tr><td colSpan={cols.length} style={{padding:'12px 8px',color:'var(--txt3)',fontStyle:'italic',fontSize:11}}>No data available.</td></tr>
              :rows.map((r,i)=>(
              <tr key={i} style={{borderBottom:'1px solid #F3F4F6'}}>
                {cols.map(c=>(
                  <td key={c.k} style={{padding:'4px 8px',textAlign:c.r?'right':'left',fontWeight:c.b?700:c.k===cols[0].k?500:400,color:c.cl||(c.b?'var(--txt)':'var(--txt)'),fontFamily:'var(--font)',whiteSpace:'nowrap'}}>
                    {c.f ? c.f(r[c.k],r) : (r[c.k]!=null?r[c.k]:'—')}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
window.DashBTable = DashBTable;

// ── Revenue Drill ─────────────────────────────────────────────────────────
function DashRevenueDrill({ sales, debris }) {
  const C=window.fmtCur;
  const debrisItems = ddMemo(()=>(debris||[]).filter(i=>i.netAmount!=null&&i.netAmount!==''), [debris]);
  const rb = ddMemo(()=>window.ProfitEngine.revenueBreakdown({sales, debris: debrisItems}, 'incl'), [sales, debrisItems]);
  const totalRev=rb.total;
  const totalQty=sales.reduce((s,o)=>s+(parseFloat(o.quantity)||0),0)+debrisItems.reduce((s,i)=>s+(parseFloat(i.quantity)||0),0);
  const byCo  =ddMemo(()=>{const m={};sales.forEach(s=>{const k=s.companyId;if(!m[k])m[k]={name:Store.name('companies',k)||k,rev:0,qty:0,n:0};m[k].rev+=(window.gAmt(s));m[k].qty+=parseFloat(s.quantity)||0;m[k].n++;});debrisItems.forEach(d=>{const k=d.companyId;if(!m[k])m[k]={name:Store.name('companies',k)||k,rev:0,qty:0,n:0};m[k].rev+=parseFloat(d.netAmount)||0;m[k].qty+=parseFloat(d.quantity)||0;m[k].n++;});return Object.values(m).sort((a,b)=>b.rev-a.rev);},[sales,debrisItems]);
  const byMat =ddMemo(()=>{const m={};sales.forEach(s=>{const k=Store.name('materials',s.materialId)||'Unknown';if(!m[k])m[k]={name:k,rev:0,qty:0,n:0};m[k].rev+=(window.gAmt(s));m[k].qty+=parseFloat(s.quantity)||0;m[k].n++;});debrisItems.forEach(d=>{const k=d.material||'Unknown';if(!m[k])m[k]={name:k,rev:0,qty:0,n:0};m[k].rev+=parseFloat(d.netAmount)||0;m[k].qty+=parseFloat(d.quantity)||0;m[k].n++;});return Object.values(m).sort((a,b)=>b.rev-a.rev);},[sales,debrisItems]);
  const byCust=ddMemo(()=>{const m={};sales.forEach(s=>{const k=Store.name('customers',s.customerId)||'Unknown';if(!m[k])m[k]={name:k,rev:0,qty:0,n:0};m[k].rev+=(window.gAmt(s));m[k].qty+=parseFloat(s.quantity)||0;m[k].n++;});debrisItems.forEach(d=>{const k=d.customerName||'Unknown';if(!m[k])m[k]={name:k,rev:0,qty:0,n:0};m[k].rev+=parseFloat(d.netAmount)||0;m[k].qty+=parseFloat(d.quantity)||0;m[k].n++;});return Object.values(m).sort((a,b)=>b.rev-a.rev).slice(0,20);},[sales,debrisItems]);
  return (
    <div>
      <DashKPIs items={[['Total Revenue',C(totalRev),'var(--or)'],['Sales Orders',sales.length,'var(--info)'],['Debris Trips',debrisItems.length,'#6B7280'],['Total Qty',window.formatQuantity(totalQty)+' T','var(--ok)']]}/>
      <div style={{display:'flex',flexDirection:'column',gap:8,margin:'12px 0 16px'}}>
        {rb.rows.map(r=>(
          <div key={r.key} style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap',padding:'10px 14px',background:'#F9FAFB',borderRadius:6,border:'1px solid var(--bdr)'}}>
            <span style={{flex:'1 1 140px',fontWeight:600,fontSize:13,color:'var(--txt)'}}>{r.label}</span>
            <span style={{fontSize:11,color:'var(--txt2)'}}>{r.count} {r.count===1?'record':'records'}</span>
            <span style={{fontSize:11,color:'var(--txt2)',minWidth:46,textAlign:'right'}}>{r.pct.toFixed(1)}%</span>
            <span style={{fontWeight:700,fontSize:14,color:'var(--or)',minWidth:110,textAlign:'right'}}>{C(r.amount)}</span>
          </div>
        ))}
      </div>
      <div className="dd-2col">
        <DashBTable title="Revenue by Company" rows={byCo} cols={[{k:'name',h:'Company'},{k:'rev',h:'Revenue',r:true,b:true,cl:'var(--or)',f:v=>C(v)},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)},{k:'n',h:'Orders',r:true}]}/>
        <DashBTable title="Revenue by Material" rows={byMat} cols={[{k:'name',h:'Material'},{k:'rev',h:'Revenue',r:true,b:true,cl:'var(--or)',f:v=>C(v)},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)}]}/>
      </div>
      <DashBTable title={`Top Customers (${byCust.length})`} rows={byCust} cols={[{k:'name',h:'Customer'},{k:'rev',h:'Revenue',r:true,b:true,cl:'var(--or)',f:v=>C(v)},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)+' T'},{k:'n',h:'Orders',r:true}]} maxH={260}/>
    </div>
  );
}
window.DashRevenueDrill = DashRevenueDrill;

// ── Cost Drill ────────────────────────────────────────────────────────────
function DashCostDrill({ purchases }) {
  const C=window.fmtCur;
  const totalCost=purchases.reduce((s,p)=>s+(window.gAmt(p)),0);
  const totalQty =purchases.reduce((s,p)=>s+(p.items||[]).reduce((a,i)=>a+(parseFloat(i.quantity)||0),0),0);
  const byCo  =ddMemo(()=>{const m={};purchases.forEach(p=>{const k=p.companyId;if(!m[k])m[k]={name:Store.name('companies',k)||k,cost:0,qty:0,n:0};m[k].cost+=(window.gAmt(p));m[k].qty+=(p.items||[]).reduce((a,i)=>a+(parseFloat(i.quantity)||0),0);m[k].n++;});return Object.values(m).sort((a,b)=>b.cost-a.cost);},[purchases]);
  const byVend=ddMemo(()=>{const m={};purchases.forEach(p=>{const k=Store.name('vendors',p.vendorId)||'Unknown';if(!m[k])m[k]={name:k,cost:0,qty:0,n:0};m[k].cost+=(window.gAmt(p));m[k].qty+=(p.items||[]).reduce((a,i)=>a+(parseFloat(i.quantity)||0),0);m[k].n++;});return Object.values(m).sort((a,b)=>b.cost-a.cost).slice(0,20);},[purchases]);
  const byMat =ddMemo(()=>{const m={};purchases.forEach(p=>(p.items||[]).forEach(i=>{const k=Store.name('materials',i.materialId)||'Unknown';if(!m[k])m[k]={name:k,cost:0,qty:0};m[k].qty+=parseFloat(i.quantity)||0;m[k].cost+=(parseFloat(i.quantity)||0)*(parseFloat(i.ratePerTon)||0);}));return Object.values(m).sort((a,b)=>b.qty-a.qty);},[purchases]);
  return (
    <div>
      <DashKPIs items={[['Total Cost',C(totalCost),'var(--txt)'],['Purchases',purchases.length,'var(--info)'],['Total Qty',window.formatQuantity(totalQty)+' T','var(--ok)'],['Avg Cost/Order',purchases.length>0?C(Math.round(totalCost/purchases.length)):'—','var(--txt2)']]}/>
      <div className="dd-2col">
        <DashBTable title="Cost by Company" rows={byCo} cols={[{k:'name',h:'Company'},{k:'cost',h:'Cost',r:true,b:true,f:v=>C(v)},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)},{k:'n',h:'Orders',r:true}]}/>
        <DashBTable title="Cost by Material" rows={byMat} cols={[{k:'name',h:'Material'},{k:'qty',h:'Qty (T)',r:true,b:true,f:v=>window.formatQuantity(v)},{k:'cost',h:'Est. Cost',r:true,f:v=>C(v)}]}/>
      </div>
      <DashBTable title={`By Vendor / Crusher (${byVend.length})`} rows={byVend} cols={[{k:'name',h:'Vendor'},{k:'cost',h:'Cost',r:true,b:true,f:v=>C(v)},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)},{k:'n',h:'Orders',r:true}]} maxH={260}/>
    </div>
  );
}
window.DashCostDrill = DashCostDrill;

// ── Profit Drill ──────────────────────────────────────────────────────────
function DashProfitDrill({ leaderboard, sales, purchases }) {
  const C=window.fmtCur;
  const byMat=ddMemo(()=>{
    const rev={},cost={},qty={};
    sales.forEach(s=>{const k=Store.name('materials',s.materialId)||'Unknown';rev[k]=(rev[k]||0)+(window.gAmt(s));qty[k]=(qty[k]||0)+(parseFloat(s.quantity)||0);});
    purchases.forEach(p=>(p.items||[]).forEach(i=>{const k=Store.name('materials',i.materialId)||'Unknown';cost[k]=(cost[k]||0)+(parseFloat(i.quantity)||0)*(parseFloat(i.ratePerTon)||0);}));
    return [...new Set([...Object.keys(rev)])].map(k=>({name:k,rev:rev[k]||0,cost:cost[k]||0,profit:(rev[k]||0)-(cost[k]||0),qty:qty[k]||0,margin:rev[k]>0?(((rev[k]||0)-(cost[k]||0))/(rev[k]||0)*100):0})).sort((a,b)=>b.profit-a.profit);
  },[sales,purchases]);
  return (
    <div>
      <DashKPIs items={[['Gross Profit',C(leaderboard.reduce((s,co)=>s+co.profit,0)),leaderboard.reduce((s,co)=>s+co.profit,0)>=0?'var(--ok)':'var(--err)'],['Best Company',leaderboard[0]?.name||'—','var(--or)'],['Best Material',byMat[0]?.name||'—','var(--info)'],['Companies',leaderboard.length,'var(--txt2)']]}/>
      <DashBTable title="Profit by Company" rows={leaderboard} cols={[{k:'name',h:'Company'},{k:'rev',h:'Revenue',r:true,f:v=>C(v)},{k:'cost',h:'Cost',r:true,f:v=>C(v)},{k:'profit',h:'Profit',r:true,b:true,f:v=>v>=0?C(v):'('+C(Math.abs(v))+')',cl:'var(--ok)'},{k:'margin',h:'Margin%',r:true,f:v=>v.toFixed(1)+'%'}]}/>
      <DashBTable title="Profit by Material" rows={byMat} cols={[{k:'name',h:'Material'},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)},{k:'rev',h:'Revenue',r:true,f:v=>C(v)},{k:'cost',h:'Cost',r:true,f:v=>C(v)},{k:'profit',h:'Profit',r:true,b:true,f:v=>C(v)},{k:'margin',h:'Margin%',r:true,f:v=>v.toFixed(1)+'%'}]}/>
    </div>
  );
}
window.DashProfitDrill = DashProfitDrill;

// ── Profit Per Ton Drill ──────────────────────────────────────────────────
function DashProfitPerTonDrill({ sales, purchases }) {
  const C=window.fmtCur;
  const rows=ddMemo(()=>{
    const rev={},cost={},qty={};
    sales.forEach(s=>{const k=Store.name('materials',s.materialId)||'Unknown';rev[k]=(rev[k]||0)+(window.gAmt(s));qty[k]=(qty[k]||0)+(parseFloat(s.quantity)||0);});
    purchases.forEach(p=>(p.items||[]).forEach(i=>{const k=Store.name('materials',i.materialId)||'Unknown';cost[k]=(cost[k]||0)+(parseFloat(i.quantity)||0)*(parseFloat(i.ratePerTon)||0);}));
    return [...new Set([...Object.keys(rev)])].map(k=>({name:k,qty:qty[k]||0,rev:rev[k]||0,cost:cost[k]||0,profit:(rev[k]||0)-(cost[k]||0),ppt:qty[k]>0?Math.round(((rev[k]||0)-(cost[k]||0))/(qty[k])):0})).sort((a,b)=>b.ppt-a.ppt);
  },[sales,purchases]);
  return (
    <div>
      <DashKPIs items={[['Best Material',rows[0]?.name||'—','var(--info)'],['Best ₹/Ton',rows[0]?C(rows[0].ppt):'—','var(--ok)'],['Worst ₹/Ton',rows[rows.length-1]?C(rows[rows.length-1].ppt):'—','var(--err)'],['Materials',rows.length,'var(--txt2)']]}/>
      <DashBTable title="Profitability Ranking by Material" rows={rows} cols={[{k:'name',h:'Material'},{k:'qty',h:'Qty Sold (T)',r:true,f:v=>window.formatQuantity(v)},{k:'rev',h:'Revenue',r:true,f:v=>C(v)},{k:'cost',h:'Cost',r:true,f:v=>C(v)},{k:'profit',h:'Profit',r:true,f:v=>C(v)},{k:'ppt',h:'₹/Ton',r:true,b:true,cl:'var(--info)',f:v=>C(v)}]}/>
    </div>
  );
}
window.DashProfitPerTonDrill = DashProfitPerTonDrill;

// ── Diesel Drill ──────────────────────────────────────────────────────────
function DashDieselDrill({ diesel, transport }) {
  const C=window.fmtCur;
  const totalDsl=diesel.reduce((s,d)=>s+(d.amount||0),0);
  const totalDeduction=diesel.reduce((s,d)=>s+(parseFloat(d.deductionAmount)||parseFloat(d.amount)||0),0);
  const totalMarginEarned=totalDeduction-totalDsl;
  const byCo =ddMemo(()=>{const m={};diesel.forEach(d=>{const k=d.companyId;if(!m[k])m[k]={name:Store.name('companies',k)||k,amt:0,n:0};m[k].amt+=(d.amount||0);m[k].n++;});return Object.values(m).sort((a,b)=>b.amt-a.amt);},[diesel]);
  const byVeh=ddMemo(()=>{const m={};transport.forEach(t=>{const k=t.vehicleNum||t.vehicleFull||'Unknown';if(!m[k])m[k]={name:k,trips:0};m[k].trips++;});return Object.values(m).sort((a,b)=>b.trips-a.trips).slice(0,20);},[transport]);
  return (
    <div>
      <DashKPIs items={[['Actual Diesel Cost',C(totalDsl),'var(--warn)'],['Transporter Deduction',C(totalDeduction),'var(--info)'],['Margin Earned',C(totalMarginEarned),'var(--ok)'],['Records',diesel.length,'var(--txt)'],['Transport Trips',transport.length,'var(--ok)']]}/>
      <DashBTable title="Diesel Cost by Company" rows={byCo} cols={[{k:'name',h:'Company'},{k:'amt',h:'Diesel Cost',r:true,b:true,cl:'var(--warn)',f:v=>C(v)},{k:'n',h:'Records',r:true}]}/>
      <DashBTable title="Active Vehicles (by Trips)" rows={byVeh} cols={[{k:'name',h:'Vehicle',mono:true},{k:'trips',h:'Trips',r:true,b:true}]} maxH={200}/>
    </div>
  );
}
window.DashDieselDrill = DashDieselDrill;

// ── Inventory Value Drill ─────────────────────────────────────────────────
function DashInventoryDrill({ allMovements }) {
  const C=window.fmtCur; const SI=new Set(['Opening','Purchase','Transfer In','Adjustment In']);
  const {byMat,bySY,totalVal,totalTons}=ddMemo(()=>{
    const mm={},sm={};
    allMovements.forEach(m=>{
      const mk=m.materialId||'x',sk=m.stockyardId||'x';
      if(!mm[mk])mm[mk]={name:Store.name('materials',mk)||mk,qty:0,val:0};
      if(!sm[sk])sm[sk]={name:Store.name('stockyards',sk)||sk,qty:0,val:0};
      const q=parseFloat(m.quantity)||0,v=parseFloat(m.value)||0,isIn=SI.has(m.type);
      if(isIn){mm[mk].qty+=q;mm[mk].val+=v;sm[sk].qty+=q;sm[sk].val+=v;}
      else{mm[mk].qty-=q;mm[mk].val-=v;sm[sk].qty-=q;sm[sk].val-=v;}
    });
    const byMat=Object.values(mm).filter(r=>r.qty>0).map(r=>({...r,val:Math.max(r.val,0)})).sort((a,b)=>b.val-a.val);
    const bySY =Object.values(sm).filter(r=>r.qty>0).map(r=>({...r,val:Math.max(r.val,0)})).sort((a,b)=>b.val-a.val);
    return {byMat,bySY,totalVal:byMat.reduce((s,r)=>s+r.val,0),totalTons:byMat.reduce((s,r)=>s+r.qty,0)};
  },[allMovements]);
  return (
    <div>
      <DashKPIs items={[['Total Value',C(totalVal),'var(--info)'],['Total Stock',window.formatQuantity(totalTons)+' T','var(--ok)'],['Material Types',byMat.length,'var(--or)'],['Active Yards',bySY.length,'var(--txt)']]}/>
      <div className="dd-2col">
        <DashBTable title="By Material" rows={byMat} cols={[{k:'name',h:'Material'},{k:'qty',h:'Qty (T)',r:true,b:true,f:v=>window.formatQuantity(v)},{k:'val',h:'Value',r:true,cl:'var(--info)',f:v=>C(v)}]}/>
        <DashBTable title="By Stockyard" rows={bySY} cols={[{k:'name',h:'Stockyard'},{k:'qty',h:'Qty (T)',r:true,b:true,f:v=>window.formatQuantity(v)},{k:'val',h:'Value',r:true,cl:'var(--info)',f:v=>C(v)}]}/>
      </div>
    </div>
  );
}
window.DashInventoryDrill = DashInventoryDrill;

// ── Net Profit Waterfall — Unified Profit Engine (Method 1 / Method 2 / Auto Compare, GST toggle) ──
function PEMethodSelect({ value, onChange }) {
  const OPTS = [['m1','Method 1 — Commercial'],['m2','Method 2 — Operational'],['compare','Auto Compare']];
  return (
    <div className="pe-method-select" style={{display:'flex',gap:2,background:'#F3F4F6',borderRadius:7,padding:2}}>
      {OPTS.map(([v,l])=>(
        <button key={v} onClick={()=>onChange(v)} style={{
          padding:'6px 12px',fontSize:11.5,fontWeight:700,borderRadius:5,border:'none',cursor:'pointer',
          background:value===v?'#fff':'transparent', color:value===v?'var(--txt)':'var(--txt2)',
          boxShadow:value===v?'0 1px 3px rgba(0,0,0,.12)':'none', whiteSpace:'nowrap',
        }}>{l}</button>
      ))}
    </div>
  );
}
function PEGstToggle({ value, onChange }) {
  return (
    <div className="pe-gst-toggle" style={{display:'flex',alignItems:'center',gap:8}}>
      <span style={{fontSize:10.5,fontWeight:700,color:'var(--txt2)',textTransform:'uppercase',letterSpacing:'.04em'}}>GST</span>
      <div className="pe-gst-btns" style={{display:'flex',gap:2,background:'#F3F4F6',borderRadius:7,padding:2}}>
        {[['incl','Including GST'],['excl','Excluding GST']].map(([v,l])=>(
          <button key={v} onClick={()=>onChange(v)} style={{
            padding:'6px 11px',fontSize:11.5,fontWeight:700,borderRadius:5,border:'none',cursor:'pointer',
            background:value===v?'#fff':'transparent', color:value===v?'var(--txt)':'var(--txt2)',
            boxShadow:value===v?'0 1px 3px rgba(0,0,0,.12)':'none', whiteSpace:'nowrap',
          }}>{l}</button>
        ))}
      </div>
    </div>
  );
}

function PEWaterfall({ result, drillKey, onDrillKey, onDrillRow }) {
  const C=window.fmtCur;
  return (
    <div style={{display:'flex',flexDirection:'column',gap:8,minWidth:0}}>
      {result.steps.map((s,i)=>(
        <div key={s.key}>
          <div className="pe-wf-row" onClick={()=>onDrillRow&&onDrillRow(s.key)} style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap',padding:'10px 14px',background:s.bold?'#FFF7ED':'#F9FAFB',borderRadius:6,border:`1px solid ${s.bold?'var(--or-bdr)':'var(--bdr)'}`,cursor:onDrillRow?'pointer':'default',minWidth:0}}>
            <span style={{width:26,height:26,borderRadius:'50%',background:s.color,display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:700,fontSize:13,flexShrink:0}}>{s.sign}</span>
            <span style={{flex:'1 1 120px',fontWeight:s.bold?700:500,fontSize:13,color:s.bold?'var(--txt)':'var(--txt2)',minWidth:0}}>{s.label}</span>
            <span style={{fontWeight:700,fontSize:s.bold?16:14,color:s.color,whiteSpace:'nowrap'}}>{C(s.value)}</span>
            {!s.bold && <span className="pe-wf-bal" style={{fontSize:10.5,color:'var(--txt2)',minWidth:100,textAlign:'right',flexShrink:0}}>Bal: {C(s.bal)}</span>}
          </div>
        </div>
      ))}
    </div>
  );
}

function DashNetProfitDrill({ sales, purchases, transport, diesel, debris }) {
  const PE = window.ProfitEngine;
  const C=window.fmtCur;
  const [method,setMethod]=ddSt('compare');
  const [gstMode,setGstMode]=ddSt('incl');
  const [drillKey,setDrillKey]=ddSt(null);

  const inputs={sales,purchases,transport,diesel,debris,gstMode};
  const m1 = ddMemo(()=>PE.method1({...inputs}), [sales,purchases,transport,diesel,debris,gstMode]);
  const m2 = ddMemo(()=>PE.method2({...inputs}), [sales,purchases,transport,diesel,debris,gstMode]);
  const m1Incl = ddMemo(()=>PE.method1({sales,purchases,transport,diesel,debris,gstMode:'incl'}), [sales,purchases,transport,diesel,debris]);
  const m1Excl = ddMemo(()=>PE.method1({sales,purchases,transport,diesel,debris,gstMode:'excl'}), [sales,purchases,transport,diesel,debris]);
  const m2Incl = ddMemo(()=>PE.method2({sales,purchases,transport,diesel,debris,gstMode:'incl'}), [sales,purchases,transport,diesel,debris]);
  const m2Excl = ddMemo(()=>PE.method2({sales,purchases,transport,diesel,debris,gstMode:'excl'}), [sales,purchases,transport,diesel,debris]);
  const cmp = ddMemo(()=>PE.compare(m1,m2,diesel), [m1,m2,diesel]);

  const drillRows = ddMemo(()=>{
    if(!drillKey) return null;
    if(drillKey==='revenue') return {title:'Revenue Breakdown', special:'revenue', rb:(method==='m1'?m1:m2).revenueBreakdown||[]};
    if(drillKey==='purchase'||drillKey==='purchaseCost') return {title:'Purchase — Purchase Orders', rows:purchases, cols:[{k:'date',h:'Date',f:v=>window.fmtDate(v)},{k:'challanNumber',h:'Challan'},{k:'total',h:'Amount',r:true,f:(v,r)=>C(window.gAmt(r))}]};
    if(drillKey==='transport') return {title:'Transport — Freight Entries', rows:transport, cols:[{k:'date',h:'Date',f:v=>window.fmtDate(v)},{k:'transporter',h:'Transporter'},{k:'amount',h:'Amount',r:true,f:v=>C(v)}]};
    if(drillKey==='dieselMargin') return {title:'Diesel Margin Ledger (recovered records only)', rows:diesel.filter(d=>d.deductionAmount!=null&&d.deductionAmount!==''), cols:[{k:'periodStart',h:'Date',f:v=>window.fmtDate(v)},{k:'amount',h:'Actual Cost',r:true,f:v=>C(v)},{k:'deductionAmount',h:'Deduction',r:true,f:v=>C(v)},{k:'_m',h:'Margin',r:true,f:(v,r)=>C((parseFloat(r.deductionAmount)||0)-(parseFloat(r.amount)||0))}]};
    if(drillKey==='actualDiesel') return {title:'Petrol Pump Bills (Actual Diesel Cost)', rows:diesel, cols:[{k:'periodStart',h:'Date',f:v=>window.fmtDate(v)},{k:'dieselSource',h:'Pump'},{k:'amount',h:'Amount',r:true,f:v=>C(v)}]};
    return null;
  }, [drillKey,sales,purchases,transport,diesel,debris,method,m1,m2]);

  return (
    <div>
      <div className="pe-controls-row" style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:12,flexWrap:'wrap',marginBottom:14}}>
        <PEMethodSelect value={method} onChange={setMethod}/>
        <PEGstToggle value={gstMode} onChange={setGstMode}/>
      </div>

      {method!=='compare' && (
        <>
          <DashKPIs items={[
            ['Revenue',C((method==='m1'?m1:m2).revenue),'var(--ok)'],
            [method==='m1'?'Purchase + Transport':'Purchase Cost', C(method==='m1'?(m1.purchase+m1.transport):m2.purchaseCost),'var(--err)'],
            [method==='m1'?'Diesel Margin Earned':'Actual Diesel Bills', C(method==='m1'?m1.dieselMargin:m2.actualDiesel), method==='m1'?'var(--ok)':'var(--warn)'],
            ['Net Profit', C((method==='m1'?m1:m2).netProfit), (method==='m1'?m1:m2).netProfit>=0?'var(--ok)':'var(--err)'],
          ]}/>
          <PEWaterfall result={method==='m1'?m1:m2} onDrillRow={setDrillKey}/>
        </>
      )}

      {method==='compare' && (
        <>
          <div style={{fontSize:10.5,fontWeight:700,color:'var(--txt2)',textTransform:'uppercase',letterSpacing:'.05em',marginBottom:6}}>4 Profit KPIs — {gstMode==='incl'?'Including':'Excluding'} GST shown active</div>
          <DashKPIs items={[
            ['Method 1 Profit (Incl. GST)', C(m1Incl.netProfit), m1Incl.netProfit>=0?'var(--ok)':'var(--err)'],
            ['Method 1 Profit (Excl. GST)', C(m1Excl.netProfit), m1Excl.netProfit>=0?'var(--ok)':'var(--err)'],
            ['Method 2 Profit (Incl. GST)', C(m2Incl.netProfit), m2Incl.netProfit>=0?'var(--ok)':'var(--err)'],
            ['Method 2 Profit (Excl. GST)', C(m2Excl.netProfit), m2Excl.netProfit>=0?'var(--ok)':'var(--err)'],
          ]}/>
          <div className="dd-2col pe-waterfall-2col" style={{marginTop:6}}>
            <div>
              <div style={{fontSize:12,fontWeight:700,color:'var(--txt)',marginBottom:8}}>Method 1 — Commercial Profit</div>
              <PEWaterfall result={m1} onDrillRow={setDrillKey}/>
            </div>
            <div>
              <div style={{fontSize:12,fontWeight:700,color:'var(--txt)',marginBottom:8}}>Method 2 — Operational Profit</div>
              <PEWaterfall result={m2} onDrillRow={setDrillKey}/>
            </div>
          </div>

          <div style={{marginTop:18,padding:14,background:'#F9FAFB',border:'1px solid var(--bdr)',borderRadius:8}}>
            <div style={{fontSize:12,fontWeight:700,color:'var(--txt)',marginBottom:10}}>Profit Comparison</div>
            <div style={{display:'flex',gap:24,flexWrap:'wrap',marginBottom:cmp.reasons.length?10:0}}>
              <div><div style={{fontSize:10.5,color:'var(--txt2)'}}>Method 1</div><div className="kpi-val" style={{fontSize:16,fontWeight:700,color:m1.netProfit>=0?'var(--ok)':'var(--err)'}}>{C(m1.netProfit)}</div></div>
              <div><div style={{fontSize:10.5,color:'var(--txt2)'}}>Method 2</div><div className="kpi-val" style={{fontSize:16,fontWeight:700,color:m2.netProfit>=0?'var(--ok)':'var(--err)'}}>{C(m2.netProfit)}</div></div>
              <div><div style={{fontSize:10.5,color:'var(--txt2)'}}>Difference</div><div className="kpi-val" style={{fontSize:16,fontWeight:700,color:'var(--txt)'}}>{C(cmp.diff)}</div></div>
              <div><div style={{fontSize:10.5,color:'var(--txt2)'}}>Difference %</div><div className="kpi-val" style={{fontSize:16,fontWeight:700,color:'var(--txt)'}}>{cmp.diffPct.toFixed(1)}%</div></div>
            </div>
            {cmp.reasons.length>0 && (
              <ul style={{margin:0,paddingLeft:18,fontSize:11.5,color:'var(--txt2)',lineHeight:1.6}}>
                {cmp.reasons.map((r,i)=><li key={i}>{r}</li>)}
              </ul>
            )}
          </div>
        </>
      )}

      {drillRows && (
        <div style={{marginTop:18}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:6}}>
            <div style={{fontSize:12,fontWeight:700,color:'var(--txt)'}}>{drillRows.title}</div>
            <button className="btn btn-gh btn-sm" onClick={()=>setDrillKey(null)}>Close</button>
          </div>
          {drillRows.special==='revenue' ? (
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {drillRows.rb.map(r=>(
                <div key={r.key} style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap',padding:'10px 14px',background:'#F9FAFB',border:'1px solid var(--bdr)',borderRadius:6}}>
                  <span style={{flex:'1 1 140px',fontWeight:600,fontSize:13}}>{r.label}</span>
                  <span style={{fontSize:11,color:'var(--txt2)'}}>{r.count} {r.count===1?'record':'records'}</span>
                  <span style={{fontSize:11,color:'var(--txt2)',minWidth:46,textAlign:'right'}}>{r.pct.toFixed(1)}%</span>
                  <span style={{fontWeight:700,fontSize:14,color:'var(--or)',minWidth:110,textAlign:'right'}}>{C(r.amount)}</span>
                </div>
              ))}
              <div style={{display:'flex',alignItems:'center',gap:12,padding:'10px 14px',background:'#FFF7ED',border:'1px solid var(--or-bdr)',borderRadius:6}}>
                <span style={{flex:'1 1 140px',fontWeight:700,fontSize:13}}>Total Revenue</span>
                <span style={{fontWeight:700,fontSize:16,color:'var(--or)'}}>{C(drillRows.rb.reduce((s,r)=>s+r.amount,0))}</span>
              </div>
            </div>
          ) : (
            <DashBTable title="" rows={drillRows.rows} cols={drillRows.cols} maxH={280}/>
          )}
        </div>
      )}
    </div>
  );
}
window.DashNetProfitDrill = DashNetProfitDrill;

// ── Aging Bucket Drill ────────────────────────────────────────────────────
function DashAgingBucketDrill({ label, color, minDays, maxDays, allMovements }) {
  const C=window.fmtCur; const SI=new Set(['Opening','Purchase','Transfer In','Adjustment In']);
  const items=ddMemo(()=>{
    const now=Date.now(),map={};
    allMovements.forEach(m=>{
      const k=`${m.stockyardId}|${m.materialId}`;
      if(!map[k])map[k]={matName:Store.name('materials',m.materialId)||m.materialId,syName:Store.name('stockyards',m.stockyardId)||m.stockyardId,qty:0,val:0,lastDate:''};
      const q=parseFloat(m.quantity)||0,v=parseFloat(m.value)||0;
      if(SI.has(m.type)){map[k].qty+=q;map[k].val+=v;}else{map[k].qty-=q;map[k].val-=v;}
      if(!map[k].lastDate||(m.date||'')>map[k].lastDate)map[k].lastDate=m.date||'';
    });
    return Object.values(map).filter(p=>{
      if(p.qty<=0)return false;
      const d=p.lastDate?Math.floor((now-new Date(p.lastDate).getTime())/86400000):9999;
      return d>=minDays&&(maxDays===9999?true:d<=maxDays);
    }).map(p=>({...p,val:Math.max(p.val,0),days:p.lastDate?Math.floor((now-new Date(p.lastDate).getTime())/86400000):9999})).sort((a,b)=>b.days-a.days);
  },[allMovements,minDays,maxDays]);

  return (
    <div>
      <DashKPIs items={[['Items',items.length,color],['Total Qty',items.reduce((s,p)=>s+p.qty,0).toFixed(1)+' T',color],['Total Value',C(items.reduce((s,p)=>s+p.val,0)),color],['Avg Days',items.length>0?Math.round(items.reduce((s,p)=>s+p.days,0)/items.length)+' days':'—','var(--txt2)']]}/>
      <DashBTable title={`${label} — ${items.length} positions`} rows={items} cols={[{k:'matName',h:'Material'},{k:'syName',h:'Stockyard'},{k:'qty',h:'Qty (T)',r:true,b:true,f:v=>window.formatQuantity(v)},{k:'val',h:'Value',r:true,cl:color,f:v=>C(v)},{k:'days',h:'Days Idle',r:true,b:true,cl:color},{k:'lastDate',h:'Last Movement',f:v=>v?window.fmtDate(v):'—'}]} maxH={380}/>
    </div>
  );
}
window.DashAgingBucketDrill = DashAgingBucketDrill;

// ── Dead Stock Full Drill ─────────────────────────────────────────────────
function DashDeadStockDrill({ allMovements }) {
  const C=window.fmtCur; const SI=new Set(['Opening','Purchase','Transfer In','Adjustment In']);
  const items=ddMemo(()=>{
    const now=Date.now(),map={};
    allMovements.forEach(m=>{
      const k=`${m.stockyardId}|${m.materialId}`;
      if(!map[k])map[k]={matName:Store.name('materials',m.materialId)||m.materialId,syName:Store.name('stockyards',m.stockyardId)||m.stockyardId,qty:0,val:0,lastDate:''};
      const q=parseFloat(m.quantity)||0,v=parseFloat(m.value)||0;
      if(SI.has(m.type)){map[k].qty+=q;map[k].val+=v;}else{map[k].qty-=q;map[k].val-=v;}
      if(!map[k].lastDate||(m.date||'')>map[k].lastDate)map[k].lastDate=m.date||'';
    });
    return Object.values(map).filter(p=>p.qty>0).map(p=>({...p,val:Math.max(p.val,0),days:p.lastDate?Math.floor((now-new Date(p.lastDate).getTime())/86400000):9999})).filter(p=>p.days>=30).sort((a,b)=>b.days-a.days);
  },[allMovements]);
  return (
    <div>
      <DashKPIs items={[['Idle Items',items.length,'var(--err)'],['Total Value',C(items.reduce((s,p)=>s+p.val,0)),'var(--err)'],['Worst Idle',items[0]?items[0].days+' days':'—','var(--err)'],['Total Qty',items.reduce((s,p)=>s+p.qty,0).toFixed(1)+' T','var(--txt2)']]}/>
      <DashBTable title="All Idle Stock (≥30 days no movement)" rows={items} cols={[{k:'matName',h:'Material'},{k:'syName',h:'Stockyard'},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)},{k:'val',h:'Value',r:true,b:true,cl:'var(--err)',f:v=>C(v)},{k:'days',h:'Days Idle',r:true,b:true,cl:'var(--err)'},{k:'lastDate',h:'Last Movement',f:v=>v?window.fmtDate(v):'—'}]} maxH={380}/>
    </div>
  );
}
window.DashDeadStockDrill = DashDeadStockDrill;

// ── Transfers Drill ───────────────────────────────────────────────────────
function DashTransfersDrill({ transfers }) {
  const C=window.fmtCur;
  const rows=ddMemo(()=>[...transfers].sort((a,b)=>(b.date||'').localeCompare(a.date||'')).map(t=>({
    date:t.date,
    from:Store.name('companies',t.fromCompanyId)||'—',
    to:Store.name('companies',t.toCompanyId)||'—',
    mat:Store.name('materials',(t.items||[])[0]?.materialId)||'—',
    qty:t.items?t.items.reduce((s,i)=>s+(parseFloat(i.quantity)||0),0):0,
    val:t.totalValue||0,
    status:t.status||'—',
  })),[transfers]);
  const totalVal=transfers.reduce((s,t)=>s+(t.totalValue||0),0);
  const totalQty=transfers.reduce((s,t)=>s+(t.items||[]).reduce((a,i)=>a+(parseFloat(i.quantity)||0),0),0);
  return (
    <div>
      <DashKPIs items={[['Transfers',transfers.length,'var(--info)'],['Total Qty',window.formatQuantity(totalQty)+' T','var(--ok)'],['Total Value',C(totalVal),'var(--or)'],['Avg Value',transfers.length>0?C(Math.round(totalVal/transfers.length)):'—','var(--txt2)']]}/>
      <DashBTable title="Transfer Log" rows={rows} cols={[{k:'date',h:'Date',f:v=>window.fmtDate(v)},{k:'from',h:'From'},{k:'to',h:'To'},{k:'mat',h:'Material'},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)},{k:'val',h:'Value',r:true,b:true,cl:'var(--or)',f:v=>C(v)},{k:'status',h:'Status'}]} maxH={360}/>
    </div>
  );
}
window.DashTransfersDrill = DashTransfersDrill;

// ── Company Drill ─────────────────────────────────────────────────────────
function DashCompanyDrill({ co, allSales, allPurchases, allDiesel, allTransport, range }) {
  const [tab,setTab]=ddSt('overview'); const C=window.fmtCur;
  const grpIn=(d,f,t)=>{if(!d)return false;if(f&&d<f)return false;if(t&&d>t)return false;return true;};
  const coS=ddMemo(()=>allSales.filter(s=>s.companyId===co.id&&grpIn(s.date,range.from,range.to)),[allSales,co.id,range]);
  const coP=ddMemo(()=>allPurchases.filter(p=>p.companyId===co.id&&grpIn(p.date,range.from,range.to)),[allPurchases,co.id,range]);
  const coD=ddMemo(()=>allDiesel.filter(d=>d.companyId===co.id&&grpIn(d.periodStart,range.from,range.to)),[allDiesel,co.id,range]);
  const coT=ddMemo(()=>allTransport.filter(t=>t.companyId===co.id&&grpIn(t.date,range.from,range.to)),[allTransport,co.id,range]);
  const rev=coS.reduce((s,o)=>s+(window.gAmt(o)),0);
  const cost=coP.reduce((s,p)=>s+(window.gAmt(p)),0);
  const dsl=coD.reduce((s,d)=>s+(d.amount||0),0);
  const profit=rev-cost;
  const margin=rev>0?((profit/rev)*100).toFixed(1):'0.0';
  const tons=coS.reduce((s,o)=>s+(parseFloat(o.quantity)||0),0);
  const salesByMat=ddMemo(()=>{const m={};coS.forEach(s=>{const k=Store.name('materials',s.materialId)||'Unknown';if(!m[k])m[k]={name:k,rev:0,qty:0,n:0};m[k].rev+=(window.gAmt(s));m[k].qty+=parseFloat(s.quantity)||0;m[k].n++;});return Object.values(m).sort((a,b)=>b.rev-a.rev);},[coS]);
  const salesByCust=ddMemo(()=>{const m={};coS.forEach(s=>{const k=Store.name('customers',s.customerId)||'Unknown';if(!m[k])m[k]={name:k,rev:0,n:0};m[k].rev+=(window.gAmt(s));m[k].n++;});return Object.values(m).sort((a,b)=>b.rev-a.rev).slice(0,10);},[coS]);
  const purchByVend=ddMemo(()=>{const m={};coP.forEach(p=>{const k=Store.name('vendors',p.vendorId)||'Unknown';if(!m[k])m[k]={name:k,cost:0,qty:0,n:0};m[k].cost+=(window.gAmt(p));m[k].qty+=(p.items||[]).reduce((a,i)=>a+(parseFloat(i.quantity)||0),0);m[k].n++;});return Object.values(m).sort((a,b)=>b.cost-a.cost).slice(0,10);},[coP]);
  const TABS=['overview','sales','purchases','diesel','transport'];
  return (
    <div>
      <div style={{display:'flex',gap:4,marginBottom:14,flexWrap:'wrap'}}>
        {TABS.map(t=><button key={t} className={`btn btn-sm ${tab===t?'btn-or':'btn-wh'}`} onClick={()=>setTab(t)} style={{textTransform:'capitalize'}}>{t}</button>)}
      </div>
      {tab==='overview'&&(
        <div>
          <DashKPIs items={[['Revenue',C(rev),'var(--or)'],['Cost',C(cost),'var(--txt)'],['Profit',C(profit),profit>=0?'var(--ok)':'var(--err)'],['Margin',margin+'%',parseFloat(margin)>=10?'var(--ok)':'var(--err)'],['Tons Sold',window.formatQuantity(tons)+' T','var(--info)'],['Diesel',C(dsl),'var(--warn)'],['Sales',coS.length,'var(--txt2)'],['Trips',coT.length,'var(--txt2)']]}/>
          <div className="dd-2col">
            <DashBTable title="Sales by Material" rows={salesByMat} cols={[{k:'name',h:'Material'},{k:'rev',h:'Revenue',r:true,b:true,cl:'var(--or)',f:v=>C(v)},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)},{k:'n',h:'Orders',r:true}]}/>
            <DashBTable title="Top Customers" rows={salesByCust} cols={[{k:'name',h:'Customer'},{k:'rev',h:'Revenue',r:true,b:true,cl:'var(--or)',f:v=>C(v)},{k:'n',h:'Orders',r:true}]}/>
          </div>
        </div>
      )}
      {tab==='sales'&&(
        <DashBTable title={`All Sales — ${coS.length} orders`} rows={[...coS].sort((a,b)=>(b.date||'').localeCompare(a.date||'')).map(s=>({date:s.date,mat:Store.name('materials',s.materialId)||'—',cust:Store.name('customers',s.customerId)||'—',qty:parseFloat(s.quantity)||0,total:window.gAmt(s),ch:s.challanNumber||'—'}))} cols={[{k:'date',h:'Date',f:v=>window.fmtDate(v)},{k:'mat',h:'Material'},{k:'cust',h:'Customer'},{k:'qty',h:'Qty (T)',r:true,f:v=>v.toFixed(3)},{k:'total',h:'Amount',r:true,b:true,cl:'var(--or)',f:v=>C(v)},{k:'ch',h:'Challan',mono:true}]} maxH={400}/>
      )}
      {tab==='purchases'&&(
        <div>
          <DashBTable title="By Vendor" rows={purchByVend} cols={[{k:'name',h:'Vendor'},{k:'cost',h:'Cost',r:true,b:true,f:v=>C(v)},{k:'qty',h:'Qty (T)',r:true,f:v=>window.formatQuantity(v)},{k:'n',h:'Orders',r:true}]}/>
          <DashBTable title={`All Purchases — ${coP.length} orders`} rows={[...coP].sort((a,b)=>(b.date||'').localeCompare(a.date||'')).map(p=>({date:p.date,vendor:Store.name('vendors',p.vendorId)||'—',total:window.gAmt(p),ch:p.challanNumber||'—',veh:p.vehicleFull||'—'}))} cols={[{k:'date',h:'Date',f:v=>window.fmtDate(v)},{k:'vendor',h:'Vendor'},{k:'total',h:'Amount',r:true,b:true,f:v=>C(v)},{k:'ch',h:'Challan',mono:true},{k:'veh',h:'Vehicle',mono:true}]} maxH={300}/>
        </div>
      )}
      {tab==='diesel'&&(
        <DashBTable title={`Diesel Records — ${coD.length}`} rows={[...coD].sort((a,b)=>(b.periodStart||'').localeCompare(a.periodStart||'')).map(d=>({date:d.periodStart,amt:d.amount||0,liters:d.totalLiters||0,notes:d.notes||'—'}))} cols={[{k:'date',h:'Period',f:v=>window.fmtDate(v)},{k:'liters',h:'Liters',r:true,f:v=>Number(v).toFixed(1)},{k:'amt',h:'Amount',r:true,b:true,cl:'var(--warn)',f:v=>C(v)},{k:'notes',h:'Notes'}]} maxH={360}/>
      )}
      {tab==='transport'&&(
        <DashBTable title={`Transport Records — ${coT.length} trips`} rows={[...coT].sort((a,b)=>(b.date||'').localeCompare(a.date||'')).map(t=>({date:t.date,mat:Store.name('materials',t.materialId)||'—',veh:t.vehicleNum||t.vehicleFull||'—',qty:parseFloat(t.quantity)||0,ch:t.challanNumber||'—'}))} cols={[{k:'date',h:'Date',f:v=>window.fmtDate(v)},{k:'mat',h:'Material'},{k:'veh',h:'Vehicle',mono:true},{k:'qty',h:'Qty (T)',r:true,f:v=>v.toFixed(3)},{k:'ch',h:'Challan',mono:true}]} maxH={360}/>
      )}
    </div>
  );
}
window.DashCompanyDrill = DashCompanyDrill;

// ── Activity Row Drill (inline expansion) ─────────────────────────────────
function DashActRowDrill({ item, type }) {
  const C=window.fmtCur;
  if(type==='Purchases'){
    const items=item.items||[]; const totalQty=items.reduce((s,i)=>s+(parseFloat(i.quantity)||0),0);
    return (
      <div style={{padding:'12px 16px',background:'#FFF9F5',borderTop:'2px solid var(--or-bdr)'}}>
        <div className="rg-4" style={{gap:10}}>
          <window.SYDrillSection title="Purchase Details" color="var(--or)">
            <window.SYDrillKV label="ID" value={item.id?item.id.slice(0,8).toUpperCase():'—'} mono bold/>
            <window.SYDrillKV label="Date" value={window.fmtDate(item.date)}/>
            <window.SYDrillKV label="Company" value={Store.name('companies',item.companyId)||'—'}/>
            <window.SYDrillKV label="Total" value={C(window.gAmt(item))} bold color="var(--or)"/>
            <window.SYDrillKV label="Total Qty" value={totalQty.toFixed(3)+' T'} bold/>
          </window.SYDrillSection>
          <window.SYDrillSection title="Vendor & Logistics" color="#1D4ED8">
            <window.SYDrillKV label="Vendor" value={Store.name('vendors',item.vendorId)||'—'} bold/>
            <window.SYDrillKV label="Vehicle" value={item.vehicleFull||'—'} mono/>
            <window.SYDrillKV label="Challan" value={item.challanNumber||'—'} mono/>
            <window.SYDrillKV label="Created By" value={item.createdBy||'—'}/>
          </window.SYDrillSection>
          {items.length>0&&(
            <window.SYDrillSection title="Line Items" color="#B45309">
              {items.map((it,i)=><window.SYDrillKV key={i} label={Store.name('materials',it.materialId)||it.materialId||'—'} value={`${Number(it.quantity||0).toFixed(3)} T @ ${C(it.ratePerTon||0)}/T`}/>)}
            </window.SYDrillSection>
          )}
          <window.SYDrillSection title="Audit" color="#6B7280">
            <window.SYDrillKV label="Status" value={item.status||'Confirmed'} color="var(--ok)"/>
            {item.notes&&<window.SYDrillKV label="Notes" value={item.notes}/>}
          </window.SYDrillSection>
        </div>
      </div>
    );
  }
  return (
    <div style={{padding:'12px 16px',background:'#F0FDF4',borderTop:'2px solid #BBF7D0'}}>
      <div className="rg-4" style={{gap:10}}>
        <window.SYDrillSection title="Sale Details" color="var(--ok)">
          <window.SYDrillKV label="ID" value={item.id?item.id.slice(0,8).toUpperCase():'—'} mono bold/>
          <window.SYDrillKV label="Date" value={window.fmtDate(item.date)}/>
          <window.SYDrillKV label="Company" value={Store.name('companies',item.companyId)||'—'}/>
          <window.SYDrillKV label="Amount" value={C(window.gAmt(item))} bold color="var(--ok)"/>
        </window.SYDrillSection>
        <window.SYDrillSection title="Customer & Material" color="#1D4ED8">
          <window.SYDrillKV label="Customer" value={Store.name('customers',item.customerId)||'—'} bold/>
          <window.SYDrillKV label="Material" value={Store.name('materials',item.materialId)||'—'} bold/>
          <window.SYDrillKV label="Quantity" value={`${Number(item.quantity||0).toFixed(3)} ${item.uom||'T'}`} bold color="var(--ok)"/>
          <window.SYDrillKV label="Rate" value={C(item.ratePerTon||item.rate||0)+'/T'}/>
        </window.SYDrillSection>
        <window.SYDrillSection title="Logistics" color="#B45309">
          <window.SYDrillKV label="Vehicle" value={item.vehicleFull||'—'} mono/>
          <window.SYDrillKV label="Challan" value={item.challanNumber||'—'} mono/>
          <window.SYDrillKV label="Transporter" value={item.transporter||'—'}/>
        </window.SYDrillSection>
        <window.SYDrillSection title="Audit" color="#6B7280">
          <window.SYDrillKV label="Status" value={item.status||'Confirmed'} color="var(--ok)"/>
          <window.SYDrillKV label="Created By" value={item.createdBy||'—'}/>
          {item.notes&&<window.SYDrillKV label="Notes" value={item.notes}/>}
        </window.SYDrillSection>
      </div>
    </div>
  );
}
window.DashActRowDrill = DashActRowDrill;

// ── Customer Intelligence Drill ───────────────────────────────────────────
function DashCustomerIntelDrill({ customerIntel, sales }) {
  const [tab, setTab] = ddSt('overview');
  const C = window.fmtCur;
  const { rows, uniqueCustomers, totalRev, top3Pct, repeatCustomers, avgRevPerCustomer } = customerIntel;

  // Per-customer material mix (top 5 customers)
  const materialMix = ddMemo(() => {
    return rows.slice(0, 5).map(cu => {
      const matMap = {};
      sales.filter(s => s.customerId === cu.id).forEach(s => {
        const k = Store.name('materials', s.materialId) || 'Unknown';
        matMap[k] = (matMap[k] || 0) + (parseFloat(s.quantity) || 0);
      });
      const mats = Object.entries(matMap).sort((a, b) => b[1] - a[1]).slice(0, 3);
      return { ...cu, matBreak: mats };
    });
  }, [rows, sales]);

  // Monthly trend (last 6 months)
  const monthlyTrend = ddMemo(() => {
    const map = {};
    sales.forEach(s => {
      const m = (s.date || '').slice(0, 7);
      if (!m) return;
      if (!map[m]) map[m] = { month: m, rev: 0, orders: 0, qty: 0 };
      map[m].rev += window.gAmt(s);
      map[m].orders++;
      map[m].qty += parseFloat(s.quantity) || 0;
    });
    return Object.values(map).sort((a, b) => a.month.localeCompare(b.month)).slice(-6);
  }, [sales]);

  // Revenue by material (across all customers)
  const revByMat = ddMemo(() => {
    const map = {};
    sales.forEach(s => {
      const k = Store.name('materials', s.materialId) || 'Unknown';
      if (!map[k]) map[k] = { name: k, rev: 0, qty: 0, customers: new Set() };
      map[k].rev += window.gAmt(s);
      map[k].qty += parseFloat(s.quantity) || 0;
      if (s.customerId) map[k].customers.add(s.customerId);
    });
    return Object.values(map).map(r => ({ ...r, customers: r.customers.size })).sort((a, b) => b.rev - a.rev);
  }, [sales]);

  const TABS = ['overview', 'customers', 'materials', 'trend'];
  return (
    <div>
      <DashKPIs items={[
        ['Unique Customers', uniqueCustomers, '#7C3AED'],
        ['Top 3 Concentration', top3Pct + '%', '#7C3AED'],
        ['Repeat Customers', repeatCustomers, '#7C3AED'],
        ['Avg Revenue / Customer', C(avgRevPerCustomer), 'var(--or)'],
      ]} />
      <div style={{ display: 'flex', gap: 4, marginBottom: 14, flexWrap: 'wrap' }}>
        {TABS.map(t => <button key={t} className={`btn btn-sm ${tab === t ? 'btn-or' : 'btn-wh'}`} onClick={() => setTab(t)} style={{ textTransform: 'capitalize' }}>{t}</button>)}
      </div>

      {tab === 'overview' && (
        <div>
          <div className="dd-2col" style={{marginBottom:14}}>
            <DashBTable title={`Top 10 Customers by Revenue`}
              rows={rows.slice(0, 10)}
              cols={[
                { k: 'name', h: 'Customer' },
                { k: 'rev', h: 'Revenue', r: true, b: true, cl: '#7C3AED', f: v => C(v) },
                { k: 'qty', h: 'Qty (T)', r: true, f: v => window.formatQuantity(v) },
                { k: 'orders', h: 'Orders', r: true },
              ]} />
            <div>
              <div style={{ fontWeight: 700, fontSize: 12, marginBottom: 8 }}>Revenue Concentration</div>
              {rows.slice(0, 8).map((cu, i) => {
                const pct = totalRev > 0 ? cu.rev / totalRev * 100 : 0;
                const colors = ['#7C3AED', '#8B5CF6', '#A78BFA', '#C4B5FD', '#DDD6FE', '#EDE9FE', '#F5F3FF', '#FAF5FF'];
                return (
                  <div key={cu.id} style={{ marginBottom: 8 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, marginBottom: 3 }}>
                      <span style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 200 }}>{cu.name}</span>
                      <span style={{ color: '#7C3AED', fontWeight: 600 }}>{pct.toFixed(1)}%</span>
                    </div>
                    <window.PremiumProgress pct={pct} color={colors[i] || '#7C3AED'} height={10} />
                  </div>
                );
              })}
            </div>
          </div>
          <DashBTable title="Material Mix — Top 5 Customers"
            rows={materialMix.flatMap(cu => cu.matBreak.map(([mat, qty]) => ({ customer: cu.name, mat, qty })))}
            cols={[
              { k: 'customer', h: 'Customer' },
              { k: 'mat', h: 'Material' },
              { k: 'qty', h: 'Qty (T)', r: true, b: true, f: v => window.formatQuantity(v) },
            ]} maxH={200} />
        </div>
      )}

      {tab === 'customers' && (
        <DashBTable title={`All Customers — ${rows.length}`}
          rows={rows}
          cols={[
            { k: 'name', h: 'Customer' },
            { k: 'rev', h: 'Revenue', r: true, b: true, cl: '#7C3AED', f: v => C(v) },
            { k: 'qty', h: 'Qty (T)', r: true, f: v => window.formatQuantity(v) },
            { k: 'orders', h: 'Orders', r: true },
            { k: 'avgOrder', h: 'Avg Order', r: true, f: v => C(Math.round(v)) },
            { k: 'mats', h: 'Materials', r: true },
            { k: 'lastDate', h: 'Last Order', f: v => v ? window.fmtDate(v) : '—' },
          ]} maxH={420} />
      )}

      {tab === 'materials' && (
        <DashBTable title="Revenue & Volume by Material"
          rows={revByMat}
          cols={[
            { k: 'name', h: 'Material' },
            { k: 'rev', h: 'Revenue', r: true, b: true, cl: '#7C3AED', f: v => C(v) },
            { k: 'qty', h: 'Qty Sold (T)', r: true, f: v => window.formatQuantity(v) },
            { k: 'customers', h: 'Customers', r: true },
          ]} maxH={380} />
      )}

      {tab === 'trend' && (
        <div>
          <DashBTable title="Monthly Sales Trend (Last 6 Months)"
            rows={monthlyTrend}
            cols={[
              { k: 'month', h: 'Month' },
              { k: 'rev', h: 'Revenue', r: true, b: true, cl: '#7C3AED', f: v => C(v) },
              { k: 'qty', h: 'Qty (T)', r: true, f: v => window.formatQuantity(v) },
              { k: 'orders', h: 'Orders', r: true },
            ]} />
          {monthlyTrend.length > 1 && (
            <div style={{ marginTop: 14 }}>
              <div style={{ fontWeight: 700, fontSize: 12, marginBottom: 8 }}>Revenue Trend</div>
              {(() => {
                const max = Math.max(...monthlyTrend.map(m => m.rev), 1);
                return (
                  <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 100, padding: '0 4px' }}>
                    {monthlyTrend.map((m, i) => (
                      <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                        <div style={{ width: '100%', background: '#7C3AED', borderRadius: '3px 3px 0 0', opacity: .8, height: `${Math.max(4, m.rev / max * 80)}px` }}></div>
                        <div style={{ fontSize: 9.5, color: 'var(--txt2)', whiteSpace: 'nowrap' }}>{m.month.slice(5)}</div>
                      </div>
                    ))}
                  </div>
                );
              })()}
            </div>
          )}
        </div>
      )}
    </div>
  );
}
window.DashCustomerIntelDrill = DashCustomerIntelDrill;

// ── Transport Intelligence Drill ──────────────────────────────────────────
function DashTransportIntelDrill({ transportIntel, transport }) {
  const [tab, setTab] = ddSt('overview');
  const C = window.fmtCur;
  const { transporterRows, vehicleRows, totalTrips, totalValue, uniqueVehicles, uniqueTransporters, avgTripValue } = transportIntel;

  // Material distribution across transport
  const matDist = ddMemo(() => {
    const map = {};
    transport.forEach(t => {
      const k = Store.name('materials', t.materialId) || t.material || 'Unknown';
      if (!map[k]) map[k] = { name: k, trips: 0, qty: 0, value: 0 };
      map[k].trips++;
      map[k].qty += parseFloat(t.quantity) || 0;
      map[k].value += t.amount || 0;
    });
    return Object.values(map).sort((a, b) => b.trips - a.trips);
  }, [transport]);

  // Company distribution
  const companyDist = ddMemo(() => {
    const map = {};
    transport.forEach(t => {
      const k = t.companyId || '_unk';
      if (!map[k]) map[k] = { name: Store.name('companies', k) || k, trips: 0, qty: 0, value: 0 };
      map[k].trips++;
      map[k].qty += parseFloat(t.quantity) || 0;
      map[k].value += t.amount || 0;
    });
    return Object.values(map).sort((a, b) => b.trips - a.trips);
  }, [transport]);

  const recentTrips = ddMemo(() =>
    [...transport].sort((a, b) => (b.date || '').localeCompare(a.date || '')).slice(0, 50)
      .map(t => ({
        date: t.date,
        transporter: t.transporter || '—',
        vehicle: t.vehicleFull || t.vehicleNum || '—',
        material: Store.name('materials', t.materialId) || t.material || '—',
        qty: parseFloat(t.quantity) || 0,
        value: t.amount || 0,
        challan: t.challanNumber || '—',
        co: Store.name('companies', t.companyId) || '—',
      })),
    [transport]);

  const TABS = ['overview', 'transporters', 'vehicles', 'trips'];
  return (
    <div>
      <DashKPIs items={[
        ['Total Trips', totalTrips, 'var(--info)'],
        ['Transport Value', C(totalValue), 'var(--info)'],
        ['Unique Vehicles', uniqueVehicles, 'var(--ok)'],
        ['Avg Trip Value', C(avgTripValue), 'var(--or)'],
      ]} />
      <div style={{ display: 'flex', gap: 4, marginBottom: 14, flexWrap: 'wrap' }}>
        {TABS.map(t => <button key={t} className={`btn btn-sm ${tab === t ? 'btn-or' : 'btn-wh'}`} onClick={() => setTab(t)} style={{ textTransform: 'capitalize' }}>{t}</button>)}
      </div>

      {tab === 'overview' && (
        <div>
          <div className="dd-2col" style={{marginBottom:14}}>
            <DashBTable title={`Transporter Performance (${uniqueTransporters})`}
              rows={transporterRows.slice(0, 10)}
              cols={[
                { k: 'name', h: 'Transporter' },
                { k: 'trips', h: 'Trips', r: true, b: true, cl: 'var(--info)' },
                { k: 'qty', h: 'Qty (T)', r: true, f: v => window.formatQuantity(v) },
                { k: 'vehs', h: 'Vehicles', r: true },
              ]} />
            <DashBTable title={`Top Vehicles (${vehicleRows.length})`}
              rows={vehicleRows.slice(0, 10)}
              cols={[
                { k: 'name', h: 'Vehicle', mono: true },
                { k: 'trips', h: 'Trips', r: true, b: true, cl: 'var(--ok)' },
                { k: 'qty', h: 'Qty (T)', r: true, f: v => window.formatQuantity(v) },
              ]} />
          </div>
          <div className="dd-2col">
            <DashBTable title="Material Distribution"
              rows={matDist}
              cols={[
                { k: 'name', h: 'Material' },
                { k: 'trips', h: 'Trips', r: true, b: true },
                { k: 'qty', h: 'Qty (T)', r: true, f: v => window.formatQuantity(v) },
                { k: 'value', h: 'Value', r: true, cl: 'var(--or)', f: v => C(v) },
              ]} />
            <DashBTable title="Company Distribution"
              rows={companyDist}
              cols={[
                { k: 'name', h: 'Company' },
                { k: 'trips', h: 'Trips', r: true, b: true },
                { k: 'qty', h: 'Qty (T)', r: true, f: v => window.formatQuantity(v) },
                { k: 'value', h: 'Value', r: true, cl: 'var(--or)', f: v => C(v) },
              ]} />
          </div>
        </div>
      )}

      {tab === 'transporters' && (
        <DashBTable title={`All Transporters — ${uniqueTransporters}`}
          rows={transporterRows}
          cols={[
            { k: 'name', h: 'Transporter' },
            { k: 'trips', h: 'Trips', r: true, b: true, cl: 'var(--info)' },
            { k: 'qty', h: 'Qty (T)', r: true, f: v => window.formatQuantity(v) },
            { k: 'value', h: 'Transport Value', r: true, cl: 'var(--or)', f: v => C(v) },
            { k: 'vehs', h: 'Vehicles', r: true },
            { k: 'avgPerTrip', h: 'Avg/Trip', r: true, f: v => C(v) },
          ]} maxH={420} />
      )}

      {tab === 'vehicles' && (
        <DashBTable title={`Vehicle Fleet — ${uniqueVehicles} unique vehicles`}
          rows={vehicleRows}
          cols={[
            { k: 'name', h: 'Vehicle Number', mono: true },
            { k: 'trips', h: 'Trips', r: true, b: true, cl: 'var(--ok)' },
            { k: 'qty', h: 'Qty (T)', r: true, f: v => window.formatQuantity(v) },
          ]} maxH={420} />
      )}

      {tab === 'trips' && (
        <DashBTable title={`Recent Trips — ${recentTrips.length} records`}
          rows={recentTrips}
          cols={[
            { k: 'date', h: 'Date', f: v => window.fmtDate(v) },
            { k: 'transporter', h: 'Transporter' },
            { k: 'vehicle', h: 'Vehicle', mono: true },
            { k: 'material', h: 'Material' },
            { k: 'qty', h: 'Qty (T)', r: true, f: v => v.toFixed(3) },
            { k: 'value', h: 'Value', r: true, cl: 'var(--or)', f: v => C(v) },
            { k: 'challan', h: 'Challan', mono: true },
            { k: 'co', h: 'Company' },
          ]} maxH={400} />
      )}
    </div>
  );
}
window.DashTransportIntelDrill = DashTransportIntelDrill;