// Stockyard Intelligence — Aging · Alerts · Reports
const { useState: siSt, useEffect: siEf, useContext: siCtx, useMemo: siMemo } = React;
const AppCtx = window.AppCtx;
const SI_IN = new Set(['Opening','Purchase','Transfer In','Adjustment In']);

function daysSince(dateStr) {
  if (!dateStr) return 9999;
  return Math.floor((Date.now() - new Date(dateStr).getTime()) / 86400000);
}

function calcAllPositions(movements, stockyards, materials) {
  const result = [];
  (stockyards||[]).forEach(sy => {
    const matIds = [...new Set((movements||[]).filter(m=>m.stockyardId===sy.id).map(m=>m.materialId))];
    matIds.forEach(mid => {
      const mat  = (materials||[]).find(x=>x.id===mid)||{name:mid,unit:'MT',purchaseRate:0};
      const rel  = (movements||[]).filter(m=>m.stockyardId===sy.id&&m.materialId===mid);
      const inc  = rel.filter(m=>SI_IN.has(m.type)).reduce((s,m)=>s+(parseFloat(m.quantity)||0),0);
      const out  = rel.filter(m=>!SI_IN.has(m.type)).reduce((s,m)=>s+(parseFloat(m.quantity)||0),0);
      const cur  = inc - out;
      if (cur <= 0) return;
      const wtE  = rel.filter(m=>SI_IN.has(m.type)&&parseFloat(m.rate)>0);
      const wtQ  = wtE.reduce((s,m)=>s+(parseFloat(m.quantity)||0),0);
      const wtV  = wtE.reduce((s,m)=>s+(parseFloat(m.quantity)||0)*(parseFloat(m.rate)||0),0);
      const avg  = wtQ>0 ? Math.round(wtV/wtQ) : (mat.purchaseRate||0);
      const sorted   = [...rel].sort((a,b)=>(b.date||'').localeCompare(a.date||''));
      const lastMove = sorted[0]?.date||'';
      const firstIn  = [...rel].filter(m=>SI_IN.has(m.type)).sort((a,b)=>(a.date||'').localeCompare(b.date||''))[0]?.date||'';
      const outMoves = rel.filter(m=>!SI_IN.has(m.type));
      result.push({ syId:sy.id, syName:sy.name, materialId:mid, matName:mat.name||mid, unit:mat.unit||'MT', current:cur, avgRate:avg, value:Math.round(cur*avg), lastMovementDate:lastMove, firstInDate:firstIn, outMovesCount:outMoves.length, totalOut:out, totalIn:inc });
    });
  });
  return result;
}

const AGING_BUCKETS = [
  { label:'0 – 30 Days',   min:0,   max:30,  color:'#22C55E' },
  { label:'31 – 60 Days',  min:31,  max:60,  color:'#3B82F6' },
  { label:'61 – 90 Days',  min:61,  max:90,  color:'#F59E0B' },
  { label:'91 – 180 Days', min:91,  max:180, color:'#F97316' },
  { label:'180+ Days',     min:181, max:9999,color:'#EF4444' },
];

// ── Intelligence ──────────────────────────────────────────────────────────
function SYIntelligence({ stockyards, materials }) {
  window.useStoreSync();
  const movements = Store.all('stockMovements') || [];
  const [deadDays, setDeadDays] = siSt(90);
  const [selSY,    setSelSY]    = siSt('');
  const [kpiModal, setKpiModal] = siSt(null); // 'fast'|'slow'|'dead'
  const [expFast,  setExpFast]  = siSt(null);
  const [expSlow,  setExpSlow]  = siSt(null);
  const [expDead,  setExpDead]  = siSt(null);

  const positions = siMemo(() => calcAllPositions(movements, stockyards, materials), [movements, stockyards, materials]);
  const filtered  = siMemo(() => selSY ? positions.filter(p=>p.syId===selSY) : positions, [positions, selSY]);
  const fastMoving = siMemo(() => [...filtered].sort((a,b)=>b.outMovesCount-a.outMovesCount).slice(0,10), [filtered]);
  const slowMoving = siMemo(() => filtered.filter(p=>{const d=daysSince(p.lastMovementDate);return d>30&&d<deadDays;}).sort((a,b)=>daysSince(b.lastMovementDate)-daysSince(a.lastMovementDate)), [filtered,deadDays]);
  const deadStock  = siMemo(() => filtered.filter(p=>daysSince(p.lastMovementDate)>=deadDays).sort((a,b)=>daysSince(b.lastMovementDate)-daysSince(a.lastMovementDate)), [filtered,deadDays]);
  const deadVal    = deadStock.reduce((s,p)=>s+p.value, 0);

  const kpiDefs = [
    { key:'fast', lbl:'Fast Moving Items', val:fastMoving.length, clr:'var(--ok)',   items:fastMoving,
      colExtra:{ header:'TRANSACTIONS', render:p=><span className="bdg bg-gn" style={{fontFamily:'var(--font)'}}>{p.outMovesCount}</span> } },
    { key:'slow', lbl:'Slow Moving Items', val:slowMoving.length, clr:'var(--warn)', items:slowMoving,
      colExtra:{ header:'DAYS IDLE', render:p=><span className="bdg bg-yw">{daysSince(p.lastMovementDate)} days</span> } },
    { key:'dead', lbl:'Dead Stock Items',  val:deadStock.length,  clr:'var(--err)',  items:deadStock,
      colExtra:{ header:'DAYS IDLE', render:p=><span className="bdg bg-rd">{daysSince(p.lastMovementDate)} days</span> } },
  ];

  const activeKpi = kpiModal ? kpiDefs.find(k=>k.key===kpiModal) : null;

  return (
    <div>
      <div className="ph" style={{marginBottom:10}}>
        <div><h1 style={{fontSize:15}}>Inventory Intelligence</h1><p style={{fontSize:11.5,color:'var(--txt2)'}}>Fast moving, slow moving and dead stock analysis — click KPI cards or rows to drill down</p></div>
      </div>
      <div className="frow" style={{marginBottom:12}}>
        <window.FiltSelect placeholder="All Stockyards" value={selSY} onChange={v=>setSelSY(v)} options={(stockyards||[]).map(s=>({value:s.id,label:s.name}))}/>
        <div style={{display:'flex',alignItems:'center',gap:6,fontSize:12,color:'var(--txt2)'}}>
          <span>Dead stock threshold:</span>
          <window.FiltSelect value={deadDays} onChange={v=>setDeadDays(Number(v))} options={[{value:30,label:'30 Days'},{value:60,label:'60 Days'},{value:90,label:'90 Days'},{value:180,label:'180 Days'},{value:365,label:'365 Days'}]}/>
        </div>
        {deadVal>0&&<span style={{marginLeft:'auto',fontSize:11.5,color:'var(--err)',fontWeight:600}}><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{display:'inline',verticalAlign:'-1px',flexShrink:0,marginRight:4}}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>Dead Stock Value: {window.fmtCur(deadVal)}</span>}
      </div>

      {/* Clickable KPI cards */}
      <div className="rg-3kpi" style={{marginBottom:12}}>
        {kpiDefs.map(k=>(
          <div key={k.key} className="kpi" onClick={()=>setKpiModal(k.key)}
            style={{borderLeft:`3px solid ${k.clr}`,cursor:'pointer',transition:'box-shadow .15s',userSelect:'none'}}
            onMouseEnter={e=>e.currentTarget.style.boxShadow='0 2px 8px rgba(0,0,0,.10)'}
            onMouseLeave={e=>e.currentTarget.style.boxShadow=''}>
            <div className="kpi-val" style={{color:k.clr,fontSize:17}}>{k.val}</div>
            <div className="kpi-lbl">{k.lbl}</div>
            <div style={{fontSize:10,color:k.clr,marginTop:4,fontWeight:600}}>View details →</div>
          </div>
        ))}
      </div>

      {/* Fast Moving */}
      <div className="card" style={{marginBottom:10}}>
        <div className="card-hd">
          <h3 style={{color:'var(--ok)'}}>Fast Moving Stock</h3>
          <span style={{fontSize:11.5,color:'var(--txt2)'}}>{fastMoving.length} items — click row to drill down</span>
        </div>
        <div className="tbl-w">
          <table className="tbl">
            <thead><tr>
              <th style={{width:28}}></th>
              <th>STOCKYARD</th><th>MATERIAL</th><th>CURRENT STOCK</th><th>UNIT</th>
              <th style={{textAlign:'center'}}>TRANSACTIONS</th><th>TOTAL DISPATCHED</th><th>STOCK VALUE</th><th>LAST MOVEMENT</th>
            </tr></thead>
            <tbody>
              {fastMoving.length===0
                ? <tr className="empty"><td colSpan="9" style={{textAlign:'center',padding:28,color:'var(--txt2)'}}>No data available.</td></tr>
                : fastMoving.map(p=>{
                  const key=`${p.syId}:${p.materialId}`; const isExp=expFast===key;
                  return (
                    <React.Fragment key={key}>
                      <tr onClick={()=>setExpFast(k=>k===key?null:key)} style={{cursor:'pointer',background:isExp?'#F0FDF4':''}}>
                        <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp} color="var(--ok)"/></td>
                        <td style={{fontWeight:500}}>{p.syName}</td>
                        <td><strong>{p.matName}</strong></td>
                        <td style={{fontWeight:600,color:'var(--ok)'}}>{p.current.toFixed(3)}</td>
                        <td style={{color:'var(--txt2)'}}>{p.unit}</td>
                        <td style={{textAlign:'center'}}><span className="bdg bg-gn" style={{fontFamily:'var(--font)'}}>{p.outMovesCount}</span></td>
                        <td style={{fontWeight:600}}>{p.totalOut.toFixed(3)}</td>
                        <td style={{fontWeight:600,color:'var(--or)'}}>{window.fmtCur(p.value)}</td>
                        <td style={{fontSize:11.5,color:'var(--txt2)'}}>{p.lastMovementDate?window.fmtDate(p.lastMovementDate):'—'}</td>
                      </tr>
                      {isExp&&<tr><td colSpan={9} style={{padding:0,borderBottom:'2px solid #BBF7D0'}}><window.SYIntelDrill item={p} movements={movements} materials={materials}/></td></tr>}
                    </React.Fragment>
                  );
                })}
            </tbody>
            {fastMoving.length>0&&(
              <tfoot><tr style={{background:'#F0FDF4'}}>
                <td style={{borderTop:'2px solid #BBF7D0'}}></td>
                <td colSpan={2} style={{fontWeight:700,fontSize:11.5,color:'var(--txt2)',padding:'8px 10px',borderTop:'2px solid #BBF7D0'}}>TOTALS — {fastMoving.length} material{fastMoving.length!==1?'s':''}</td>
                <td style={{fontWeight:700,color:'var(--ok)',padding:'8px 10px',borderTop:'2px solid #BBF7D0'}}>{fastMoving.reduce((s,p)=>s+p.current,0).toFixed(3)}</td>
                <td style={{borderTop:'2px solid #BBF7D0'}}></td>
                <td style={{textAlign:'center',fontWeight:700,padding:'8px 10px',borderTop:'2px solid #BBF7D0'}}>{fastMoving.reduce((s,p)=>s+p.outMovesCount,0)}</td>
                <td style={{fontWeight:700,padding:'8px 10px',borderTop:'2px solid #BBF7D0'}}>{fastMoving.reduce((s,p)=>s+p.totalOut,0).toFixed(3)}</td>
                <td style={{fontWeight:700,color:'var(--or)',padding:'8px 10px',borderTop:'2px solid #BBF7D0'}}>{window.fmtCur(fastMoving.reduce((s,p)=>s+p.value,0))}</td>
                <td style={{borderTop:'2px solid #BBF7D0'}}></td>
              </tr></tfoot>
            )}
          </table>
        </div>
      </div>

      {/* Slow Moving */}
      <div className="card" style={{marginBottom:10}}>
        <div className="card-hd">
          <h3 style={{color:'var(--warn)'}}>Slow Moving Stock</h3>
          <span style={{fontSize:11.5,color:'var(--txt2)'}}>{slowMoving.length} items — 30 to {deadDays} days without movement</span>
        </div>
        <div className="tbl-w">
          <table className="tbl">
            <thead><tr>
              <th style={{width:28}}></th>
              <th>STOCKYARD</th><th>MATERIAL</th><th>CURRENT STOCK</th><th>UNIT</th>
              <th>DAYS SINCE MOVEMENT</th><th>STOCK VALUE</th><th>LAST MOVEMENT</th>
            </tr></thead>
            <tbody>
              {slowMoving.length===0
                ? <tr className="empty"><td colSpan="8" style={{textAlign:'center',padding:28,color:'var(--txt2)'}}>No slow moving stock in selected range.</td></tr>
                : slowMoving.map(p=>{
                  const key=`${p.syId}:${p.materialId}`; const isExp=expSlow===key;
                  return (
                    <React.Fragment key={key}>
                      <tr onClick={()=>setExpSlow(k=>k===key?null:key)} style={{cursor:'pointer',background:isExp?'#FFFBEB':''}}>
                        <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp} color="var(--warn)"/></td>
                        <td style={{fontWeight:500}}>{p.syName}</td>
                        <td><strong>{p.matName}</strong></td>
                        <td style={{fontWeight:600}}>{p.current.toFixed(3)}</td>
                        <td style={{color:'var(--txt2)'}}>{p.unit}</td>
                        <td><span className="bdg bg-yw">{daysSince(p.lastMovementDate)} days</span></td>
                        <td style={{fontWeight:600,color:'var(--or)'}}>{window.fmtCur(p.value)}</td>
                        <td style={{fontSize:11.5,color:'var(--txt2)'}}>{p.lastMovementDate?window.fmtDate(p.lastMovementDate):'—'}</td>
                      </tr>
                      {isExp&&<tr><td colSpan={8} style={{padding:0,borderBottom:'2px solid #FDE68A'}}><window.SYIntelDrill item={p} movements={movements} materials={materials}/></td></tr>}
                    </React.Fragment>
                  );
                })}
            </tbody>
            {slowMoving.length>0&&(
              <tfoot><tr style={{background:'#FFFBEB'}}>
                <td style={{borderTop:'2px solid #FDE68A'}}></td>
                <td colSpan={2} style={{fontWeight:700,fontSize:11.5,color:'var(--txt2)',padding:'8px 10px',borderTop:'2px solid #FDE68A'}}>TOTALS — {slowMoving.length} material{slowMoving.length!==1?'s':''}</td>
                <td style={{fontWeight:700,padding:'8px 10px',borderTop:'2px solid #FDE68A'}}>{slowMoving.reduce((s,p)=>s+p.current,0).toFixed(3)}</td>
                <td style={{borderTop:'2px solid #FDE68A'}}></td>
                <td style={{borderTop:'2px solid #FDE68A'}}></td>
                <td style={{fontWeight:700,color:'var(--or)',padding:'8px 10px',borderTop:'2px solid #FDE68A'}}>{window.fmtCur(slowMoving.reduce((s,p)=>s+p.value,0))}</td>
                <td style={{borderTop:'2px solid #FDE68A'}}></td>
              </tr></tfoot>
            )}
          </table>
        </div>
      </div>

      {/* Dead Stock */}
      <div className="card">
        <div className="card-hd">
          <h3 style={{color:'var(--err)'}}>Dead Stock</h3>
          <span style={{fontSize:11.5,color:'var(--txt2)'}}>{deadStock.length} items — ≥ {deadDays} days no movement</span>
        </div>
        <div className="tbl-w">
          <table className="tbl">
            <thead><tr>
              <th style={{width:28}}></th>
              <th>STOCKYARD</th><th>MATERIAL</th><th>QUANTITY</th><th>UNIT</th>
              <th>DAYS IDLE</th><th>STOCK VALUE</th><th>LAST MOVEMENT</th>
            </tr></thead>
            <tbody>
              {deadStock.length===0
                ? <tr className="empty"><td colSpan="8" style={{textAlign:'center',padding:28,color:'var(--txt2)'}}>No dead stock. All materials have recent activity.</td></tr>
                : deadStock.map(p=>{
                  const key=`${p.syId}:${p.materialId}`; const isExp=expDead===key;
                  return (
                    <React.Fragment key={key}>
                      <tr onClick={()=>setExpDead(k=>k===key?null:key)} style={{cursor:'pointer',background:isExp?'#FEF2F2':''}}>
                        <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp} color="var(--err)"/></td>
                        <td style={{fontWeight:500}}>{p.syName}</td>
                        <td><strong>{p.matName}</strong></td>
                        <td style={{fontWeight:700,color:'var(--err)'}}>{p.current.toFixed(3)}</td>
                        <td style={{color:'var(--txt2)'}}>{p.unit}</td>
                        <td><span className="bdg bg-rd">{daysSince(p.lastMovementDate)} days</span></td>
                        <td style={{fontWeight:700,color:'var(--err)'}}>{window.fmtCur(p.value)}</td>
                        <td style={{fontSize:11.5,color:'var(--txt2)'}}>{p.lastMovementDate?window.fmtDate(p.lastMovementDate):'—'}</td>
                      </tr>
                      {isExp&&<tr><td colSpan={8} style={{padding:0,borderBottom:'2px solid #FECACA'}}><window.SYIntelDrill item={p} movements={movements} materials={materials}/></td></tr>}
                    </React.Fragment>
                  );
                })}
            </tbody>
            {deadStock.length>0&&(
              <tfoot><tr style={{background:'#FEF2F2'}}>
                <td style={{borderTop:'2px solid #FECACA'}}></td>
                <td colSpan={2} style={{fontWeight:700,fontSize:11.5,color:'var(--txt2)',padding:'8px 10px',borderTop:'2px solid #FECACA'}}>TOTALS — {deadStock.length} item{deadStock.length!==1?'s':''}</td>
                <td style={{fontWeight:700,color:'var(--err)',padding:'8px 10px',borderTop:'2px solid #FECACA'}}>{deadStock.reduce((s,p)=>s+p.current,0).toFixed(3)}</td>
                <td style={{borderTop:'2px solid #FECACA'}}></td>
                <td style={{borderTop:'2px solid #FECACA'}}></td>
                <td style={{fontWeight:700,color:'var(--err)',padding:'8px 10px',borderTop:'2px solid #FECACA'}}>{window.fmtCur(deadStock.reduce((s,p)=>s+p.value,0))}</td>
                <td style={{borderTop:'2px solid #FECACA'}}></td>
              </tr></tfoot>
            )}
          </table>
        </div>
      </div>

      {/* KPI drill-down modal */}
      {activeKpi&&(
        <window.SYIntelListDrill
          title={activeKpi.lbl}
          color={activeKpi.clr}
          items={activeKpi.items}
          movements={movements}
          materials={materials}
          colExtra={activeKpi.colExtra}
          onClose={()=>setKpiModal(null)}
        />
      )}
    </div>
  );
}
window.SYIntelligence = SYIntelligence;

// ── Aging Analysis ────────────────────────────────────────────────────────
function SYAging({ stockyards, materials }) {
  window.useStoreSync();
  const movements = Store.all('stockMovements') || [];
  const [selSY,       setSelSY]       = siSt('');
  const [bucketModal, setBucketModal] = siSt(null); // index into AGING_BUCKETS
  const [expKey,      setExpKey]      = siSt(null);

  const positions = siMemo(() => calcAllPositions(movements, stockyards, materials), [movements, stockyards, materials]);
  const filtered  = siMemo(() => selSY ? positions.filter(p=>p.syId===selSY) : positions, [positions, selSY]);

  const bucketed = siMemo(() => {
    const totalQty = filtered.reduce((s,p)=>s+p.current, 0);
    const totalVal = filtered.reduce((s,p)=>s+p.value, 0);
    return AGING_BUCKETS.map(b => {
      const items = filtered.filter(p=>{ const d=daysSince(p.firstInDate); return d>=b.min&&d<=b.max; });
      const qty   = items.reduce((s,p)=>s+p.current, 0);
      const val   = items.reduce((s,p)=>s+p.value, 0);
      return { ...b, items, qty, val, pct:totalQty>0?(qty/totalQty*100).toFixed(1):'0.0', valPct:totalVal>0?(val/totalVal*100).toFixed(1):'0.0' };
    });
  }, [filtered]);

  const maxQty = Math.max(...bucketed.map(b=>b.qty), 1);
  const activeBucket = bucketModal!==null ? bucketed[bucketModal] : null;

  return (
    <div>
      <div className="ph" style={{marginBottom:10}}>
        <div><h1 style={{fontSize:15}}>Stock Aging Analysis</h1><p style={{fontSize:11.5,color:'var(--txt2)'}}>Age profile of current inventory — click any bucket card or row to drill down</p></div>
      </div>
      <div className="frow" style={{marginBottom:12}}>
        <window.FiltSelect placeholder="All Stockyards" value={selSY} onChange={v=>setSelSY(v)} options={(stockyards||[]).map(s=>({value:s.id,label:s.name}))}/>
        <span className="f-cnt">{filtered.length} material positions</span>
      </div>

      {/* Clickable bucket KPI cards */}
      <div className="aging-kpi-grid rg-5" style={{marginBottom:12}}>
        {bucketed.map((b,i)=>(
          <div key={i} className="kpi" onClick={()=>setBucketModal(i)}
            style={{borderLeft:`3px solid ${b.color}`,cursor:'pointer',transition:'box-shadow .15s',userSelect:'none'}}
            onMouseEnter={e=>e.currentTarget.style.boxShadow='0 2px 8px rgba(0,0,0,.10)'}
            onMouseLeave={e=>e.currentTarget.style.boxShadow=''}>
            <div className="kpi-val" style={{color:b.color,fontSize:17}}>{b.pct}%</div>
            <div className="kpi-lbl">{b.label}</div>
            <div style={{fontSize:10.5,color:'var(--txt2)',marginTop:3,display:'flex',flexDirection:'column',gap:1}}>
              <span>{window.formatQuantity(b.qty)} Ton</span>
              <span>{window.fmtCur(b.val)}</span>
            </div>
            {b.items.length>0&&<div style={{fontSize:10,color:b.color,marginTop:3,fontWeight:600}}>{b.items.length} items →</div>}
          </div>
        ))}
      </div>

      {/* Visual bar chart */}
      <div className="card" style={{marginBottom:10,padding:'14px 16px'}}>
        <div style={{fontWeight:600,fontSize:12.5,marginBottom:14}}>Quantity Distribution by Age Bucket</div>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {bucketed.map((b,i)=>(
            <div key={i} className="aging-bar-row" style={{display:'grid',gridTemplateColumns:'130px 1fr 90px 110px',gap:10,alignItems:'center'}}>
              <div style={{fontSize:12,color:'var(--txt2)',textAlign:'right',fontWeight:500,whiteSpace:'nowrap'}}>{b.label}</div>
              <window.PremiumProgress pct={b.qty>0?b.qty/maxQty*100:0} color={b.color} height={22} onClick={()=>b.items.length>0&&setBucketModal(i)} style={{cursor:b.items.length>0?'pointer':'default'}} />
              <div style={{fontSize:12,fontWeight:700,color:b.color,whiteSpace:'nowrap'}}>{window.formatQuantity(b.qty)} T</div>
              <div style={{fontSize:11.5,color:'var(--txt2)',whiteSpace:'nowrap'}}>{window.fmtCur(b.val)}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Detail table with expandable rows */}
      <div className="card">
        <div className="card-hd"><h3>Aging Detail</h3><span style={{fontSize:11.5,color:'var(--txt2)'}}>{filtered.length} positions — click row to drill down</span></div>
        <div className="tbl-w">
          <table className="tbl aging-detail-tbl">
            <thead><tr>
              <th style={{width:28}}></th>
              <th data-label="Age">AGE BUCKET</th><th data-label="Yard">STOCKYARD</th><th data-label="Material">MATERIAL</th>
              <th data-label="Qty">QUANTITY</th><th>UNIT</th><th data-label="Days">DAYS IN STOCK</th><th data-label="Value">STOCK VALUE</th><th data-label="%">% OF TOTAL</th>
            </tr></thead>
            <tbody>
              {bucketed.flatMap((b,bi)=>
                b.items.length===0 ? [] : b.items.map((p,i)=>{
                  const key=`${p.syId}:${p.materialId}`; const isExp=expKey===key;
                  return (
                    <React.Fragment key={key}>
              <tr className="aging-detail-row" onClick={()=>setExpKey(k=>k===key?null:key)} style={{cursor:'pointer',background:isExp?'#FAFAFA':''}}>
                        <td className="adr-chev" style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp} color={b.color}/></td>
                        <td className="adr-badge"><span className="bdg" style={{background:`${b.color}22`,color:b.color,fontWeight:600}}>{b.label}</span></td>
                        <td className="adr-yard" style={{fontWeight:500}}>{p.syName}</td>
                        <td className="adr-mat"><strong>{p.matName}</strong></td>
                        <td className="adr-qty" style={{fontWeight:600}}>{p.current.toFixed(3)}<span className="adr-unit-inline">{p.unit}</span></td>
                        <td className="adr-unit-col" style={{color:'var(--txt2)'}}>{p.unit}</td>
                        <td className="adr-days" style={{fontFamily:'var(--font)',fontWeight:700,color:b.color}}>{daysSince(p.firstInDate)} d</td>
                        <td className="adr-val" style={{fontWeight:600,color:'var(--or)'}}>{window.fmtCur(p.value)}</td>
                        <td className="adr-pct" style={{color:'var(--txt2)',fontFamily:'var(--font)'}}>{b.pct}%</td>
                      </tr>
                      {isExp&&<tr className="exp-row"><td colSpan={9} style={{padding:0,borderBottom:`2px solid ${b.color}44`}}><window.SYIntelDrill item={p} movements={movements} materials={materials}/></td></tr>}
                    </React.Fragment>
                  );
                })
              )}
              {bucketed.every(b=>b.items.length===0)&&(
                <tr className="empty"><td colSpan="9" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No stock data available.</td></tr>
              )}
            </tbody>
            {filtered.length>0&&(
              <tfoot><tr style={{background:'#FFF7ED'}}>
                <td style={{borderTop:'2px solid var(--or-bdr)'}}></td>
                <td style={{fontWeight:700,fontSize:11.5,color:'var(--txt2)',padding:'8px 10px',borderTop:'2px solid var(--or-bdr)'}}>TOTALS</td>
                <td style={{borderTop:'2px solid var(--or-bdr)'}}></td>
                <td style={{fontWeight:700,fontSize:11.5,color:'var(--txt2)',padding:'8px 10px',borderTop:'2px solid var(--or-bdr)'}}>{filtered.length} positions</td>
                <td style={{fontWeight:700,color:'var(--or)',padding:'8px 10px',borderTop:'2px solid var(--or-bdr)'}}>{filtered.reduce((s,p)=>s+p.current,0).toFixed(3)}</td>
                <td style={{borderTop:'2px solid var(--or-bdr)'}}></td>
                <td style={{borderTop:'2px solid var(--or-bdr)'}}></td>
                <td style={{fontWeight:700,color:'var(--ok)',padding:'8px 10px',borderTop:'2px solid var(--or-bdr)'}}>{window.fmtCur(filtered.reduce((s,p)=>s+p.value,0))}</td>
                <td style={{borderTop:'2px solid var(--or-bdr)'}}></td>
              </tr></tfoot>
            )}
          </table>
        </div>
      </div>

      {/* Bucket drill-down modal */}
      {activeBucket&&(
        <window.SYDrillModal title={activeBucket.label} subtitle={`${activeBucket.items.length} items · ${window.formatQuantity(activeBucket.qty)} T · ${window.fmtCur(activeBucket.val)}`} color={activeBucket.color} onClose={()=>setBucketModal(null)}>
          <div className="dd-4col" style={{marginBottom:12}}>
            {[['Items',activeBucket.items.length],['Quantity',window.formatQuantity(activeBucket.qty)+' T'],['Value',window.fmtCur(activeBucket.val)],['% of Stock',activeBucket.pct+'%']].map(([l,v])=>(
              <div key={l} style={{background:'#F9FAFB',border:'1px solid var(--bdr)',borderRadius:6,padding:'8px 12px'}}>
                <div className="kpi-val" style={{fontSize:15,fontWeight:700,color:activeBucket.color}}>{v}</div>
                <div style={{fontSize:11,color:'var(--txt2)',marginTop:2}}>{l}</div>
              </div>
            ))}
          </div>
          <AgingBucketItemsTable bucket={activeBucket} movements={movements} materials={materials}/>
        </window.SYDrillModal>
      )}
    </div>
  );
}
window.SYAging = SYAging;

// Sub-component for aging bucket items table (needs its own useState)
function AgingBucketItemsTable({ bucket, movements, materials }) {
  const [expKey, setExpKey] = siSt(null);
  return (
    <div className="tbl-w" style={{maxHeight:400,overflowY:'auto'}}>
      <table className="tbl aging-detail-tbl">
        <thead><tr>
          <th style={{width:28}}></th>
          <th>STOCKYARD</th><th>MATERIAL</th><th>QUANTITY</th><th>UNIT</th>
          <th>DAYS IN STOCK</th><th>VALUE</th><th>LAST MOVEMENT</th>
        </tr></thead>
        <tbody>
          {bucket.items.map(p=>{
            const key=`${p.syId}:${p.materialId}`; const isExp=expKey===key;
            const days=daysSince(p.firstInDate);
            return (
              <React.Fragment key={key}>
                <tr className="aging-detail-row" onClick={()=>setExpKey(k=>k===key?null:key)} style={{cursor:'pointer',background:isExp?'#FAFAFA':''}}>
                  <td className="adr-chev" style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp} color={bucket.color}/></td>
                  <td className="adr-badge" style={{fontWeight:500}}>{p.syName}</td>
                  <td className="adr-yard"><strong>{p.matName}</strong></td>
                  <td className="adr-qty" style={{fontWeight:600,color:bucket.color}}>{p.current.toFixed(3)}<span className="adr-unit-inline">{p.unit}</span></td>
                  <td className="adr-unit-col" style={{color:'var(--txt2)'}}>{p.unit}</td>
                  <td className="adr-days"><span className="bdg" style={{background:`${bucket.color}22`,color:bucket.color,fontWeight:700}}>{days} d</span></td>
                  <td className="adr-val" style={{fontWeight:600,color:'var(--or)'}}>{window.fmtCur(p.value)}</td>
                  <td className="adr-mat" style={{fontSize:11.5,color:'var(--txt2)'}}>{p.lastMovementDate?window.fmtDate(p.lastMovementDate):'—'}</td>
                </tr>
                {isExp&&<tr className="exp-row"><td colSpan={8} style={{padding:0}}><window.SYIntelDrill item={p} movements={movements} materials={materials}/></td></tr>}
              </React.Fragment>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ── Alert System ───────────────────────────────────────────────────────────
function SYAlerts({ stockyards, materials }) {
  window.useStoreSync();
  const movements = Store.all('stockMovements') || [];
  const [configs,  setConfigs]  = siSt([]);
  const [modal,    setModal]    = siSt(false);
  const [editId,   setEditId]   = siSt(null);
  const [delId,    setDelId]    = siSt(null);
  const [form,     setForm]     = siSt({});
  const [expAlert, setExpAlert] = siSt(null);
  const setF = (k,v) => setForm(p=>({...p,[k]:v}));

  siEf(()=>load(), []);
  function load() { setConfigs(Store.all('alertConfigs')||[]); }

  function openAdd()  { setForm({type:'Low Stock',materialId:'',stockyardId:'',threshold:'',deadDays:'90',status:'Active'}); setEditId(null); setModal(true); }
  function openEdit(c){ setForm({...c}); setEditId(c.id); setModal(true); }
  function handleSave(e) {
    e.preventDefault();
    if(editId){Store.update('alertConfigs',editId,form);Store.addLog('UPDATE','Alert Config',`Updated: ${form.type}`);}
    else{Store.add('alertConfigs',form);Store.addLog('CREATE','Alert Config',`Created: ${form.type}`);}
    setModal(false); load();
    window.toast&&window.toast(editId?'Alert updated':'Alert created','ok');
  }
  function handleDelete() {
    Store.del('alertConfigs',delId); Store.addLog('DELETE','Alert Config','Deleted');
    setDelId(null); load(); window.toast&&window.toast('Deleted','ok');
  }

  const positions = siMemo(() => calcAllPositions(movements, stockyards, materials), [movements, stockyards, materials]);
  const triggered = siMemo(() => {
    const result = [];
    configs.filter(c=>c.status==='Active').forEach(cfg=>{
      const scope = positions.filter(p=>(!cfg.materialId||p.materialId===cfg.materialId)&&(!cfg.stockyardId||p.syId===cfg.stockyardId));
      scope.forEach(p=>{
        const d = daysSince(p.lastMovementDate);
        if(cfg.type==='Low Stock'&&p.current<Number(cfg.threshold||0))
          result.push({cfg,pos:p,level:'error',msg:`${p.matName} at ${p.syName}: ${window.formatQuantity(p.current)} Ton — below minimum of ${cfg.threshold} Ton`});
        else if(cfg.type==='Overstock'&&p.current>Number(cfg.threshold||999999))
          result.push({cfg,pos:p,level:'warn',msg:`${p.matName} at ${p.syName}: ${window.formatQuantity(p.current)} Ton — exceeds limit of ${cfg.threshold} Ton`});
        else if(cfg.type==='Dead Stock'&&d>=Number(cfg.deadDays||90))
          result.push({cfg,pos:p,level:'warn',msg:`${p.matName} at ${p.syName}: No movement for ${d} days`});
      });
    });
    return result;
  }, [configs, positions]);

  const activeCount = configs.filter(c=>c.status==='Active').length;

  return (
    <div>
      <div className="ph" style={{marginBottom:10}}>
        <div><h1 style={{fontSize:15}}>Alert System</h1><p style={{fontSize:11.5,color:'var(--txt2)'}}>Configurable stock alerts — click triggered alerts to inspect inventory position</p></div>
        <div className="ph-act"><button className="btn btn-or" onClick={openAdd}><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add Alert</button></div>
      </div>

      {triggered.length>0&&(
        <div style={{marginBottom:12}}>
          <div style={{fontSize:12,fontWeight:700,color:'var(--err)',marginBottom:7}}>{triggered.length} Alert{triggered.length!==1?'s':''} Triggered</div>
          <div style={{display:'flex',flexDirection:'column',gap:5}}>
            {triggered.map((t,i)=>{
              const key=`${t.pos.syId}:${t.pos.materialId}`; const isExp=expAlert===key;
              return (
                <div key={i}>
                  <div onClick={()=>setExpAlert(k=>k===key?null:key)}
                    style={{display:'flex',alignItems:'center',gap:10,padding:'9px 13px',background:t.level==='error'?'#FEF2F2':'#FFFBEB',border:`1px solid ${t.level==='error'?'#FECACA':'#FDE68A'}`,borderRadius:'var(--r)',fontSize:12,cursor:'pointer',borderBottomLeftRadius:isExp?0:undefined,borderBottomRightRadius:isExp?0:undefined}}>
                    {t.level==='error'?<svg width="10" height="10" viewBox="0 0 24 24" fill="#DC2626" stroke="none"><circle cx="12" cy="12" r="10"/></svg>:<svg width="10" height="10" viewBox="0 0 24 24" fill="#D97706" stroke="none"><circle cx="12" cy="12" r="10"/></svg>}
                    <span style={{flex:1}}>{t.msg}</span>
                    <span className={`bdg ${t.level==='error'?'bg-rd':'bg-yw'}`}>{t.cfg.type}</span>
                    <window.SYChevron open={isExp} color={t.level==='error'?'var(--err)':'var(--warn)'}/>
                  </div>
                  {isExp&&<div style={{border:`1px solid ${t.level==='error'?'#FECACA':'#FDE68A'}`,borderTop:'none',borderBottomLeftRadius:'var(--r)',borderBottomRightRadius:'var(--r)',overflow:'hidden'}}><window.SYIntelDrill item={t.pos} movements={movements} materials={materials}/></div>}
                </div>
              );
            })}
          </div>
        </div>
      )}
      {triggered.length===0&&activeCount>0&&(
        <div style={{background:'#F0FDF4',border:'1px solid #BBF7D0',borderRadius:'var(--r)',padding:'10px 14px',marginBottom:12,fontSize:12,color:'#166534',display:'flex',alignItems:'center',gap:8}}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>
          All {activeCount} configured alert{activeCount!==1?'s are':' is'} within normal range.
        </div>
      )}

      <div className="card">
        <div className="card-hd"><h3>Alert Configurations</h3><span style={{fontSize:11.5,color:'var(--txt2)'}}>{configs.length} total · {activeCount} active</span></div>
        <div className="tbl-w">
          <table className="tbl">
            <thead><tr><th>TYPE</th><th>MATERIAL</th><th>STOCKYARD</th><th>THRESHOLD</th><th>STATUS</th><th>ACTIONS</th></tr></thead>
            <tbody>
              {configs.length===0
                ? <tr className="empty"><td colSpan="6" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No alerts configured. Click "Add Alert" to get started.</td></tr>
                : configs.map(c=>(
                  <tr key={c.id}>
                    <td><span className={`bdg ${c.type==='Low Stock'?'bg-rd':c.type==='Overstock'?'bg-yw':'bg-gy'}`}>{c.type}</span></td>
                    <td>{c.materialId?Store.name('materials',c.materialId):<span style={{color:'var(--txt3)',fontStyle:'italic'}}>All Materials</span>}</td>
                    <td>{c.stockyardId?Store.name('stockyards',c.stockyardId):<span style={{color:'var(--txt3)',fontStyle:'italic'}}>All Stockyards</span>}</td>
                    <td style={{fontFamily:'var(--font)',fontWeight:600}}>{c.type==='Dead Stock'?`${c.deadDays||90} days`:`${c.threshold||0} Ton`}</td>
                    <td><window.Badge v={c.status||'Active'}/></td>
                    <td><div className="ra">
                      <button className="btn btn-wh btn-sm" onClick={()=>openEdit(c)}>Edit</button>
                      <button className="btn btn-rd btn-sm" onClick={()=>setDelId(c.id)}>Delete</button>
                    </div></td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
      </div>

      {modal&&(
        <div className="mbg">
          <div className="mod mod-md">
            <div className="mod-hd"><h2>{editId?'Edit':'Add'} Alert</h2><button className="mod-x" onClick={()=>setModal(false)}>×</button></div>
            <form onSubmit={handleSave}>
              <div className="mod-bd">
                <div className="fg">
                  <div className="fld"><label>Alert Type <span className="req">*</span></label><window.FormSelect value={form.type||'Low Stock'} onChange={v=>setF('type',v)} options={[{value:'Low Stock',label:'Low Stock'},{value:'Overstock',label:'Overstock'},{value:'Dead Stock',label:'Dead Stock'}]}/></div>
                  <div className="fld"><label>Status</label><window.FormSelect value={form.status||'Active'} onChange={v=>setF('status',v)} options={[{value:'Active',label:'Active'},{value:'Inactive',label:'Inactive'}]}/></div>
                  <div className="fld"><label>Material <span style={{color:'var(--txt2)',fontWeight:400,fontSize:11}}>(optional)</span></label><window.FormSelect placeholder="All Materials" value={form.materialId||''} onChange={v=>setF('materialId',v)} options={(materials||[]).map(m=>({value:m.id,label:m.name}))}/></div>
                  <div className="fld"><label>Stockyard <span style={{color:'var(--txt2)',fontWeight:400,fontSize:11}}>(optional)</span></label><window.FormSelect placeholder="All Stockyards" value={form.stockyardId||''} onChange={v=>setF('stockyardId',v)} options={(stockyards||[]).filter(s=>s.status==='Active').map(s=>({value:s.id,label:s.name}))}/></div>
                  {form.type==='Dead Stock'
                    ? <div className="fld full"><label>Days Without Movement <span className="req">*</span></label><window.FormSelect value={form.deadDays||'90'} onChange={v=>setF('deadDays',v)} options={[{value:'30',label:'30 Days'},{value:'60',label:'60 Days'},{value:'90',label:'90 Days'},{value:'180',label:'180 Days'},{value:'365',label:'365 Days'}]}/></div>
                    : <div className="fld full"><label>{form.type==='Low Stock'?'Minimum Threshold (Ton)':'Maximum Threshold (Ton)'} <span className="req">*</span></label><input className="inp" type="number" min="0" step="0.001" value={form.threshold||''} onChange={e=>setF('threshold',e.target.value)} required placeholder="e.g. 50"/></div>}
                </div>
              </div>
              <div className="mod-ft"><button type="button" className="btn btn-wh" onClick={()=>setModal(false)}>Cancel</button><button type="submit" className="btn btn-or">{editId?'Update Alert':'Create Alert'}</button></div>
            </form>
          </div>
        </div>
      )}
      {delId&&<window.Confirm onOk={handleDelete} onCancel={()=>setDelId(null)}/>}
    </div>
  );
}
window.SYAlerts = SYAlerts;

// ── Reports ────────────────────────────────────────────────────────────────
const RPT_TYPES = [
  { id:'position', label:'Stock Position'  },
  { id:'movement', label:'Stock Movement'  },
  { id:'aging',    label:'Aging Report'    },
  { id:'dead',     label:'Dead Stock'      },
  { id:'transfer', label:'Transfer Report' },
];

function SYReports({ stockyards, materials, transfers }) {
  window.useStoreSync();
  const movements = Store.all('stockMovements') || [];
  const [rpt,      setRpt]      = siSt('position');
  const [fSY,      setFSY]      = siSt('');
  const [fMat,     setFMat]     = siSt('');
  const [dFrom,    setDFrom]    = siSt('');
  const [dTo,      setDTo]      = siSt('');
  const [pg,       setPg]       = siSt(1);
  const [expId,    setExpId]    = siSt(null);
  const PER = 50;

  const changeRpt = r => { setRpt(r); setPg(1); setExpId(null); };

  const positions = siMemo(() => calcAllPositions(movements, stockyards, materials), [movements, stockyards, materials]);
  const fPos = siMemo(() => positions.filter(p=>(!fSY||p.syId===fSY)&&(!fMat||p.materialId===fMat)), [positions, fSY, fMat]);
  const fMov = siMemo(() => [...(movements||[])].sort((a,b)=>(b.date||'').localeCompare(a.date||'')).filter(m=>{
    if(fSY&&m.stockyardId!==fSY)return false; if(fMat&&m.materialId!==fMat)return false;
    if(dFrom&&m.date<dFrom)return false; if(dTo&&m.date>dTo)return false; return true;
  }), [movements, fSY, fMat, dFrom, dTo]);
  const fTrf = siMemo(() => [...(transfers||[])].sort((a,b)=>(b.date||'').localeCompare(a.date||'')).filter(t=>{
    if(fSY&&t.fromStockyardId!==fSY&&t.toStockyardId!==fSY)return false;
    if(fMat&&t.materialId!==fMat)return false; if(dFrom&&t.date<dFrom)return false; if(dTo&&t.date>dTo)return false; return true;
  }), [transfers, fSY, fMat, dFrom, dTo]);
  const fDead  = siMemo(() => positions.filter(p=>(!fSY||p.syId===fSY)&&(!fMat||p.materialId===fMat)&&daysSince(p.lastMovementDate)>=90), [positions, fSY, fMat]);
  const fAging = siMemo(() => {
    const src = positions.filter(p=>(!fSY||p.syId===fSY)&&(!fMat||p.materialId===fMat));
    return src.map(p=>{ const days=daysSince(p.firstInDate); const bucket=AGING_BUCKETS.find(b=>days>=b.min&&days<=b.max)||AGING_BUCKETS[AGING_BUCKETS.length-1]; return {...p,days,bucket}; }).sort((a,b)=>b.days-a.days);
  }, [positions, fSY, fMat]);

  function exportCSV() {
    let h='',r='';
    if(rpt==='position'){h='Stockyard,Material,Unit,Incoming,Outgoing,Current Stock,Avg Rate,Stock Value';r=fPos.map(p=>`"${p.syName}","${p.matName}","${p.unit}","${p.totalIn.toFixed(3)}","${p.totalOut.toFixed(3)}","${p.current.toFixed(3)}","${p.avgRate}","${p.value}"`).join('\n');}
    else if(rpt==='movement'){h='Date,Stockyard,Material,Type,Quantity,Rate,Value,Reference';r=fMov.map(m=>`"${m.date}","${Store.name('stockyards',m.stockyardId)}","${Store.name('materials',m.materialId)}","${m.type}","${m.quantity}","${m.rate||0}","${m.value||0}","${m.reference||''}"`).join('\n');}
    else if(rpt==='transfer'){h='Date,From,To,Material,Quantity,Value,Challan,Status';r=fTrf.map(t=>`"${t.date}","${Store.name('stockyards',t.fromStockyardId)}","${Store.name('stockyards',t.toStockyardId)}","${Store.name('materials',t.materialId)}","${t.quantity}","${t.value||0}","${t.challan||''}","${t.status}"`).join('\n');}
    else if(rpt==='dead'){h='Stockyard,Material,Quantity,Unit,Days Idle,Value,Last Movement';r=fDead.map(p=>`"${p.syName}","${p.matName}","${p.current.toFixed(3)}","${p.unit}","${daysSince(p.lastMovementDate)}","${p.value}","${p.lastMovementDate||''}"`).join('\n');}
    else if(rpt==='aging'){h='Stockyard,Material,Quantity,Unit,Days In Stock,Age Bucket,Value';r=fAging.map(p=>`"${p.syName}","${p.matName}","${p.current.toFixed(3)}","${p.unit}","${p.days}","${p.bucket.label}","${p.value}"`).join('\n');}
    const blob=new Blob([h+'\n'+r],{type:'text/csv'});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=`stockyard_${rpt}_report.csv`;a.click();
    window.toast&&window.toast('CSV exported','ok');
  }
  const showDate = rpt==='movement'||rpt==='transfer';
  const clrF = ()=>{ setFSY(''); setFMat(''); setDFrom(''); setDTo(''); setPg(1); setExpId(null); };

  function Paged({ data, children }) {
    const total = Math.ceil(data.length/PER);
    const slice = data.slice((pg-1)*PER, pg*PER);
    return (
      <div>
        {children(slice)}
        {total>1&&<div className="pag" style={{marginTop:8}}><button className="pg-b" onClick={()=>setPg(1)} disabled={pg===1}>«</button><button className="pg-b" onClick={()=>setPg(p=>p-1)} disabled={pg===1}>‹</button><span className="pg-inf">Page {pg} of {total}</span><button className="pg-b" onClick={()=>setPg(p=>p+1)} disabled={pg===total}>›</button><button className="pg-b" onClick={()=>setPg(total)} disabled={pg===total}>»</button></div>}
      </div>
    );
  }

  const toggleRpt = id => setExpId(v=>v===id?null:id);
  const CHEVRON_COL = <th style={{width:28}}></th>;

  return (
    <div>
      <div className="ph" style={{marginBottom:10}}>
        <div><h1 style={{fontSize:15}}>Stockyard Reports</h1><p style={{fontSize:11.5,color:'var(--txt2)'}}>Comprehensive inventory, movement and transfer reports — click any row to drill down</p></div>
        <div className="ph-act"><button className="btn btn-wh btn-sm" onClick={exportCSV}><svg width="13" height="13" 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> Export CSV</button></div>
      </div>
      <div className="rep-grid" style={{gridTemplateColumns:'repeat(5,1fr)',marginBottom:12}}>
        {RPT_TYPES.map(r=><div key={r.id} className={`rep-tile ${rpt===r.id?'sel':''}`} onClick={()=>changeRpt(r.id)}>{r.label}</div>)}
      </div>
      <div className="fp" style={{marginBottom:8}}>
        <div className="fp-row">
          {showDate&&<><div className="fp-fld"><label>Start Date</label><input type="date" value={dFrom} onChange={e=>{setDFrom(e.target.value);setPg(1);}}/></div><div className="fp-fld"><label>End Date</label><input type="date" value={dTo} onChange={e=>{setDTo(e.target.value);setPg(1);}}/></div></>}
          <div className="fp-fld"><label>Stockyard</label><select value={fSY} onChange={e=>{setFSY(e.target.value);setPg(1);}}><option value="">All</option>{(stockyards||[]).map(s=><option key={s.id} value={s.id}>{s.name}</option>)}</select></div>
          <div className="fp-fld"><label>Material</label><select value={fMat} onChange={e=>{setFMat(e.target.value);setPg(1);}}><option value="">All</option>{(materials||[]).map(m=><option key={m.id} value={m.id}>{m.name}</option>)}</select></div>
          <div className="fp-acts"><button className="btn btn-gh btn-sm" onClick={clrF}>Clear All</button></div>
        </div>
      </div>

      {/* ── Stock Position Report ── */}
      {rpt==='position'&&<div className="card">
        <div className="card-hd"><h3>Stock Position Report</h3><span style={{fontSize:11.5,color:'var(--txt2)'}}>{fPos.length} positions</span></div>
        <Paged data={fPos}>{slice=>(
          <div className="tbl-w"><table className="tbl">
            <thead><tr>{CHEVRON_COL}<th>STOCKYARD</th><th>MATERIAL</th><th>UNIT</th><th>INCOMING</th><th>OUTGOING</th><th>CURRENT STOCK</th><th>AVG RATE</th><th>STOCK VALUE</th></tr></thead>
            <tbody>
              {slice.length===0?<tr className="empty"><td colSpan="9" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No data matching filters.</td></tr>
                :slice.map((p,i)=>{ const key=`pos:${p.syId}:${p.materialId}`; const isExp=expId===key; const r={...p,name:p.matName,lastDate:p.lastMovementDate};
                  return (<React.Fragment key={key}>
                    <tr onClick={()=>toggleRpt(key)} style={{cursor:'pointer',background:isExp?'#FFF7ED':''}}>
                      <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp}/></td>
                      <td style={{fontWeight:500}}>{p.syName}</td><td><strong>{p.matName}</strong></td><td style={{color:'var(--txt2)'}}>{p.unit}</td>
                      <td style={{fontWeight:600,color:'var(--ok)'}}>{p.totalIn.toFixed(3)}</td><td style={{fontWeight:600,color:'var(--err)'}}>{p.totalOut.toFixed(3)}</td>
                      <td style={{fontWeight:700,color:'var(--or)'}}>{p.current.toFixed(3)}</td><td>{window.fmtCur(p.avgRate)}</td><td style={{fontWeight:700}}>{window.fmtCur(p.value)}</td>
                    </tr>
                    {isExp&&<tr><td colSpan={9} style={{padding:0,borderBottom:'2px solid var(--or-bdr)'}}><window.SYPositionDrill row={r} movements={movements} materials={materials}/></td></tr>}
                  </React.Fragment>); })}
            </tbody>
            {fPos.length>0&&<tfoot><tr><td style={{background:'#F9FAFB',borderTop:'1px solid var(--bdr)'}}></td><td colSpan={5} style={{fontWeight:700,background:'#F9FAFB',padding:'7px 10px',borderTop:'1px solid var(--bdr)'}}>TOTALS</td><td style={{fontWeight:700,color:'var(--or)',background:'#F9FAFB',padding:'7px 10px',borderTop:'1px solid var(--bdr)'}}>{fPos.reduce((s,p)=>s+p.current,0).toFixed(3)} T</td><td style={{background:'#F9FAFB',padding:'7px 10px',borderTop:'1px solid var(--bdr)'}}></td><td style={{fontWeight:700,color:'var(--or)',background:'#F9FAFB',padding:'7px 10px',borderTop:'1px solid var(--bdr)'}}>{window.fmtCur(fPos.reduce((s,p)=>s+p.value,0))}</td></tr></tfoot>}
          </table></div>
        )}</Paged>
      </div>}

      {/* ── Stock Movement Report ── */}
      {rpt==='movement'&&<div className="card">
        <div className="card-hd"><h3>Stock Movement Report</h3><span style={{fontSize:11.5,color:'var(--txt2)'}}>{fMov.length} records</span></div>
        <Paged data={fMov}>{slice=>(
          <div className="tbl-w"><table className="tbl">
            <thead><tr>{CHEVRON_COL}<th>DATE</th><th>STOCKYARD</th><th>MATERIAL</th><th>TYPE</th><th>QUANTITY</th><th>RATE</th><th>VALUE</th><th>REFERENCE</th></tr></thead>
            <tbody>
              {slice.length===0?<tr className="empty"><td colSpan="9" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No movements matching filters.</td></tr>
                :slice.map(m=>{ const isIn=SI_IN.has(m.type); const key=`mov:${m.id}`; const isExp=expId===key;
                  return (<React.Fragment key={key}>
                    <tr onClick={()=>toggleRpt(key)} style={{cursor:'pointer',background:isExp?'#FFF7ED':''}}>
                      <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp}/></td>
                      <td style={{whiteSpace:'nowrap'}}>{window.fmtDate(m.date)}</td><td style={{fontWeight:500}}>{(stockyards||[]).find(s=>s.id===m.stockyardId)?.name||'—'}</td><td>{Store.name('materials',m.materialId)}</td>
                      <td><span className={`bdg ${isIn?'bg-gn':'bg-rd'}`}>{m.type}</span></td>
                      <td style={{fontWeight:600,color:isIn?'var(--ok)':'var(--err)',fontFamily:'var(--font)'}}>{isIn?'+':'-'}{Number(m.quantity||0).toFixed(3)}</td>
                      <td>{m.rate?window.fmtCur(m.rate):'—'}</td><td style={{fontWeight:600}}>{m.value?window.fmtCur(m.value):'—'}</td>
                      <td style={{fontSize:11,fontFamily:'var(--font)'}}>{m.reference||'—'}</td>
                    </tr>
                    {isExp&&<tr><td colSpan={9} style={{padding:0,borderBottom:'2px solid var(--or-bdr)'}}><window.SYRegisterDrill m={m} movements={movements} materials={materials}/></td></tr>}
                  </React.Fragment>); })}
            </tbody>
          </table></div>
        )}</Paged>
      </div>}

      {/* ── Aging Report ── */}
      {rpt==='aging'&&<div className="card">
        <div className="card-hd"><h3>Aging Report</h3><span style={{fontSize:11.5,color:'var(--txt2)'}}>{fAging.length} positions</span></div>
        <Paged data={fAging}>{slice=>(
          <div className="tbl-w"><table className="tbl">
            <thead><tr>{CHEVRON_COL}<th>STOCKYARD</th><th>MATERIAL</th><th>QUANTITY</th><th>UNIT</th><th>DAYS IN STOCK</th><th>AGE BUCKET</th><th>VALUE</th></tr></thead>
            <tbody>
              {slice.length===0?<tr className="empty"><td colSpan="8" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No data.</td></tr>
                :slice.map((p,i)=>{ const key=`age:${p.syId}:${p.materialId}`; const isExp=expId===key;
                  return (<React.Fragment key={key}>
                    <tr onClick={()=>toggleRpt(key)} style={{cursor:'pointer',background:isExp?'#FAFAFA':''}}>
                      <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp} color={p.bucket.color}/></td>
                      <td style={{fontWeight:500}}>{p.syName}</td><td><strong>{p.matName}</strong></td>
                      <td style={{fontWeight:600}}>{p.current.toFixed(3)}</td><td style={{color:'var(--txt2)'}}>{p.unit}</td>
                      <td style={{fontFamily:'var(--font)',fontWeight:700,color:p.bucket.color}}>{p.days}</td>
                      <td><span className="bdg" style={{background:`${p.bucket.color}22`,color:p.bucket.color,fontWeight:600}}>{p.bucket.label}</span></td>
                      <td style={{fontWeight:600,color:'var(--or)'}}>{window.fmtCur(p.value)}</td>
                    </tr>
                    {isExp&&<tr><td colSpan={8} style={{padding:0,borderBottom:`2px solid ${p.bucket.color}44`}}><window.SYIntelDrill item={p} movements={movements} materials={materials}/></td></tr>}
                  </React.Fragment>); })}
            </tbody>
          </table></div>
        )}</Paged>
      </div>}

      {/* ── Dead Stock Report ── */}
      {rpt==='dead'&&<div className="card">
        <div className="card-hd"><h3>Dead Stock Report</h3><span style={{fontSize:11.5,color:'var(--txt2)'}}>{fDead.length} items (≥ 90 days)</span></div>
        <Paged data={fDead}>{slice=>(
          <div className="tbl-w"><table className="tbl">
            <thead><tr>{CHEVRON_COL}<th>STOCKYARD</th><th>MATERIAL</th><th>QUANTITY</th><th>UNIT</th><th>DAYS SINCE MOVEMENT</th><th>VALUE</th><th>LAST MOVEMENT</th></tr></thead>
            <tbody>
              {slice.length===0?<tr className="empty"><td colSpan="8" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No dead stock. All materials have recent activity.</td></tr>
                :slice.map((p,i)=>{ const key=`dead:${p.syId}:${p.materialId}`; const isExp=expId===key;
                  return (<React.Fragment key={key}>
                    <tr onClick={()=>toggleRpt(key)} style={{cursor:'pointer',background:isExp?'#FEF2F2':''}}>
                      <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp} color="var(--err)"/></td>
                      <td style={{fontWeight:500}}>{p.syName}</td><td><strong>{p.matName}</strong></td>
                      <td style={{fontWeight:700,color:'var(--err)'}}>{p.current.toFixed(3)}</td><td style={{color:'var(--txt2)'}}>{p.unit}</td>
                      <td><span className="bdg bg-rd">{daysSince(p.lastMovementDate)} days</span></td>
                      <td style={{fontWeight:700,color:'var(--err)'}}>{window.fmtCur(p.value)}</td>
                      <td style={{fontSize:11.5,color:'var(--txt2)'}}>{p.lastMovementDate?window.fmtDate(p.lastMovementDate):'—'}</td>
                    </tr>
                    {isExp&&<tr><td colSpan={8} style={{padding:0,borderBottom:'2px solid #FECACA'}}><window.SYIntelDrill item={p} movements={movements} materials={materials}/></td></tr>}
                  </React.Fragment>); })}
            </tbody>
          </table></div>
        )}</Paged>
      </div>}

      {/* ── Transfer Report ── */}
      {rpt==='transfer'&&<div className="card">
        <div className="card-hd"><h3>Transfer Report</h3><span style={{fontSize:11.5,color:'var(--txt2)'}}>{fTrf.length} transfers</span></div>
        <Paged data={fTrf}>{slice=>(
          <div className="tbl-w"><table className="tbl">
            <thead><tr>{CHEVRON_COL}<th>DATE</th><th>FROM STOCKYARD</th><th>TO STOCKYARD</th><th>MATERIAL</th><th>QUANTITY</th><th>VALUE</th><th>CHALLAN</th><th>STATUS</th></tr></thead>
            <tbody>
              {slice.length===0?<tr className="empty"><td colSpan="9" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No transfers found.</td></tr>
                :slice.map(t=>{ const key=`trf:${t.id}`; const isExp=expId===key;
                  return (<React.Fragment key={key}>
                    <tr onClick={()=>toggleRpt(key)} style={{cursor:'pointer',background:isExp?'#EFF6FF':''}}>
                      <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp} color="#1D4ED8"/></td>
                      <td style={{whiteSpace:'nowrap'}}>{window.fmtDate(t.date)}</td>
                      <td style={{fontWeight:500}}>{Store.name('stockyards',t.fromStockyardId)}</td><td style={{fontWeight:500}}>{Store.name('stockyards',t.toStockyardId)}</td>
                      <td>{Store.name('materials',t.materialId)}</td><td style={{fontWeight:600}}>{Number(t.quantity||0).toFixed(3)}</td>
                      <td style={{fontWeight:600,color:'var(--or)'}}>{t.value?window.fmtCur(t.value):'—'}</td>
                      <td style={{fontSize:11,fontFamily:'var(--font)'}}>{t.challan||'—'}</td>
                      <td><window.Badge v={t.status||'Completed'}/></td>
                    </tr>
                    {isExp&&<tr><td colSpan={9} style={{padding:0,borderBottom:'2px solid #BFDBFE'}}><window.SYTransferDrill t={t} materials={materials}/></td></tr>}
                  </React.Fragment>); })}
            </tbody>
          </table></div>
        )}</Paged>
      </div>}
    </div>
  );
}
window.SYReports = SYReports;