// Stockyard Management — Overview · Stockyard Master · Main Page
const { useState: sySt, useEffect: syEf, useContext: syCtx, useMemo: syMemo } = React;
const AppCtx = window.AppCtx;
const SY_IN = new Set(['Opening','Purchase','Transfer In','Adjustment In','Stock Transfer In','Customer Return']);

// ── Stock position helper ─────────────────────────────────────────────────
function syGetPos(movements, stockyardId, materials) {
  // v28 fix: build matIds from BOTH stockMovements AND openingStocks so yards
  // whose stockMovements Opening entries are missing still calculate correctly.
  const openRecs   = (Store.all('openingStocks')||[]).filter(r=>r.stockyardId===stockyardId);
  const movMatIds  = new Set((movements||[]).filter(m=>m.stockyardId===stockyardId).map(m=>m.materialId));
  const openMatIds = new Set(openRecs.map(r=>r.materialId).filter(Boolean));
  const matIds     = [...new Set([...movMatIds, ...openMatIds])];
  return matIds.map(mid => {
    const mat = (materials||[]).find(x=>x.id===mid)||{name:mid,unit:'MT',purchaseRate:0};
    const rel = (movements||[]).filter(m=>m.stockyardId===stockyardId&&m.materialId===mid);
    const openQtyMov  = rel.filter(m=>m.type==='Opening').reduce((s,m)=>s+(parseFloat(m.quantity)||0),0);
    const openQtyRec  = openRecs.filter(r=>r.materialId===mid).reduce((s,r)=>s+(r.qty||0),0);
    const incFromMovs = rel.filter(m=>SY_IN.has(m.type)).reduce((s,m)=>s+(parseFloat(m.quantity)||0),0);
    const inc = openQtyMov > 0 ? incFromMovs : incFromMovs + openQtyRec;
    const out = rel.filter(m=>!SY_IN.has(m.type)).reduce((s,m)=>s+(parseFloat(m.quantity)||0),0);
    const cur = inc - out;
    const wtE = rel.filter(m=>SY_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);
    return { materialId:mid, name:mat.name||mid, unit:mat.unit||'MT', current:cur, avgRate:avg, value:Math.round(cur*avg) };
  }).filter(r=>r.current>0);
}

// ── Horizontal bar chart ──────────────────────────────────────────────────
function HBar({ rows, valueKey, labelKey, fmtVal, onBarClick }) {
  const max = Math.max(...rows.map(r=>r[valueKey]||0), 1);
  const colors = ['var(--or)','var(--info)','var(--ok)','var(--warn)','#8B5CF6','#EC4899','#14B8A6'];
  if (rows.length===0) return <div style={{textAlign:'center',padding:'24px 0',color:'var(--txt3)',fontSize:12}}>No data</div>;
  return (
    <div style={{display:'flex',flexDirection:'column',gap:9}}>
      {rows.map((r,i)=>(
        <div key={i}
          className="sy-hbar-row"
          style={{display:'grid',gridTemplateColumns:'130px 1fr 90px',gap:8,alignItems:'center',cursor:onBarClick?'pointer':'default',borderRadius:4,padding:'2px 4px',transition:'background .1s'}}
          onClick={()=>onBarClick&&onBarClick(r)}
          onMouseEnter={onBarClick?e=>{e.currentTarget.style.background='var(--or-lt)'}:undefined}
          onMouseLeave={onBarClick?e=>{e.currentTarget.style.background=''}:undefined}
          title={onBarClick?`${r[labelKey]} — click for details`:undefined}>
          <div style={{fontSize:11.5,color:'var(--txt2)',textAlign:'right',fontWeight:500,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}} title={r[labelKey]}>{r[labelKey]}</div>
          <window.PremiumProgress pct={(r[valueKey]||0)/max*100} color={colors[i%colors.length]} height={18} label={r[labelKey]}/>
          <div style={{fontSize:11.5,fontWeight:600,color:'var(--txt)'}}>{fmtVal?(fmtVal(r[valueKey]||0)):(r[valueKey]||0).toFixed(1)}</div>
        </div>
      ))}
    </div>
  );
}

// ── Overview KPI drill-down modal ─────────────────────────────────────────
function SYKPIModal({ type, syRows, movements, materials, allMovements, onClose }) {
  const titles = { stock:'Total Stock Breakdown', value:'Inventory Value Breakdown', yards:'Active Stockyards', materials:'Material Types' };
  const colors = { stock:'var(--or)', value:'var(--ok)', yards:'var(--info)', materials:'var(--txt)' };

  // Material breakdown for stock/value
  const matBreak = syMemo(()=>{
    const map = {};
    (allMovements||[]).forEach(m=>{
      if(!m.materialId) return;
      if(!map[m.materialId]) map[m.materialId]={name:Store.name('materials',m.materialId)||m.materialId,qty:0,val:0};
      const q=parseFloat(m.quantity)||0, v=parseFloat(m.value)||0;
      if(SY_IN.has(m.type)){map[m.materialId].qty+=q;map[m.materialId].val+=v;}
      else{map[m.materialId].qty-=q;map[m.materialId].val-=v;}
    });
    return Object.values(map).filter(d=>d.qty>0).sort((a,b)=>b.qty-a.qty);
  },[allMovements]);

  return (
    <window.SYDrillModal title={titles[type]} color={colors[type]} onClose={onClose}>
      {(type==='stock'||type==='value')&&(
        <div>
          <div style={{fontWeight:600,fontSize:12.5,marginBottom:10}}>By Stockyard</div>
          <div className="tbl-w" style={{marginBottom:16}}>
            <table style={{width:'100%',borderCollapse:'collapse',fontSize:12}}>
              <thead><tr style={{background:'#F9FAFB'}}>
                {['Stockyard','Location','Materials','Total Stock','Total Value','Status'].map(h=>(
                  <th key={h} style={{padding:'6px 8px',textAlign:h==='Total Stock'||h==='Total Value'||h==='Materials'?'right':'left',fontWeight:700,fontSize:10.5,color:'var(--txt2)',borderBottom:'1px solid var(--bdr)'}}>{h}</th>
                ))}
              </tr></thead>
              <tbody>
                {(syRows||[]).map((s,i)=>(
                  <tr key={s.id} style={{borderBottom:'1px solid #F3F4F6'}}>
                    <td style={{padding:'5px 8px',fontWeight:600}}>{s.name}</td>
                    <td style={{padding:'5px 8px',fontSize:11,color:'var(--txt2)'}}>{s.location}</td>
                    <td style={{padding:'5px 8px',textAlign:'right',fontWeight:600}}>{s.matCount}</td>
                    <td style={{padding:'5px 8px',textAlign:'right',fontWeight:700,color:'var(--or)'}}>{window.formatQuantity(s.totalQty)} T</td>
                    <td style={{padding:'5px 8px',textAlign:'right',fontWeight:700,color:'var(--ok)'}}>{window.fmtCur(s.totalVal)}</td>
                    <td style={{padding:'5px 8px'}}><window.Badge v={s.status}/></td>
                  </tr>
                ))}
              </tbody>
              <tfoot><tr style={{background:'#FFF7ED'}}>
                <td colSpan={2} style={{padding:'6px 8px',fontWeight:700,color:'var(--txt2)',fontSize:11}}>TOTALS</td>
                <td style={{padding:'6px 8px',textAlign:'right',fontWeight:700,color:'var(--or)'}}>{(syRows||[]).reduce((s,r)=>s+r.matCount,0)}</td>
                <td style={{padding:'6px 8px',textAlign:'right',fontWeight:700,color:'var(--or)'}}>{(syRows||[]).reduce((s,r)=>s+r.totalQty,0).toFixed(1)} T</td>
                <td style={{padding:'6px 8px',textAlign:'right',fontWeight:700,color:'var(--ok)'}}>{window.fmtCur((syRows||[]).reduce((s,r)=>s+r.totalVal,0))}</td>
                <td></td>
              </tr></tfoot>
            </table>
          </div>
          <div style={{fontWeight:600,fontSize:12.5,marginBottom:10}}>By Material</div>
          <div className="tbl-w">
            <table style={{width:'100%',borderCollapse:'collapse',fontSize:12}}>
              <thead><tr style={{background:'#F9FAFB'}}>
                {['Material','Current Qty','Value'].map(h=>(
                  <th key={h} style={{padding:'6px 8px',textAlign:h==='Material'?'left':'right',fontWeight:700,fontSize:10.5,color:'var(--txt2)',borderBottom:'1px solid var(--bdr)'}}>{h}</th>
                ))}
              </tr></thead>
              <tbody>
                {matBreak.map((m,i)=>(
                  <tr key={i} style={{borderBottom:'1px solid #F3F4F6'}}>
                    <td style={{padding:'5px 8px',fontWeight:600}}>{m.name}</td>
                    <td style={{padding:'5px 8px',textAlign:'right',fontWeight:700,color:'var(--or)'}}>{m.qty.toFixed(3)} T</td>
                    <td style={{padding:'5px 8px',textAlign:'right',fontWeight:600,color:'var(--ok)'}}>{window.fmtCur(Math.max(0,m.val))}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
      {type==='yards'&&(
        <div className="tbl-w">
          <table style={{width:'100%',borderCollapse:'collapse',fontSize:12}}>
            <thead><tr style={{background:'#F9FAFB'}}>
              {['#','Stockyard','Company','Location','Stock','Value','Status'].map(h=>(
                <th key={h} style={{padding:'6px 8px',fontWeight:700,fontSize:10.5,color:'var(--txt2)',borderBottom:'1px solid var(--bdr)',textAlign:h==='#'||h==='Stock'||h==='Value'?'center':'left'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {(syRows||[]).filter(s=>s.status==='Active').map((s,i)=>(
                <tr key={s.id} style={{borderBottom:'1px solid #F3F4F6'}}>
                  <td style={{padding:'5px 8px',textAlign:'center',color:'var(--txt2)'}}>{i+1}</td>
                  <td style={{padding:'5px 8px',fontWeight:600}}>{s.name}</td>
                  <td style={{padding:'5px 8px',fontSize:11}}>{Store.name('companies',s.companyId)}</td>
                  <td style={{padding:'5px 8px',fontSize:11,color:'var(--txt2)'}}>{s.location}</td>
                  <td style={{padding:'5px 8px',textAlign:'center',fontWeight:700,color:'var(--or)'}}>{window.formatQuantity(s.totalQty)} T</td>
                  <td style={{padding:'5px 8px',textAlign:'center',fontWeight:600,color:'var(--ok)'}}>{window.fmtCur(s.totalVal)}</td>
                  <td style={{padding:'5px 8px'}}><window.Badge v={s.status}/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {type==='materials'&&(
        <div className="tbl-w">
          <table style={{width:'100%',borderCollapse:'collapse',fontSize:12}}>
            <thead><tr style={{background:'#F9FAFB'}}>
              {['Material','Unit','Current Stock','Stock Value'].map(h=>(
                <th key={h} style={{padding:'6px 8px',fontWeight:700,fontSize:10.5,color:'var(--txt2)',borderBottom:'1px solid var(--bdr)',textAlign:h==='Material'||h==='Unit'?'left':'right'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {matBreak.map((m,i)=>(
                <tr key={i} style={{borderBottom:'1px solid #F3F4F6'}}>
                  <td style={{padding:'5px 8px',fontWeight:600}}>{m.name}</td>
                  <td style={{padding:'5px 8px',color:'var(--txt2)'}}>Ton</td>
                  <td style={{padding:'5px 8px',textAlign:'right',fontWeight:700,color:'var(--or)'}}>{m.qty.toFixed(3)}</td>
                  <td style={{padding:'5px 8px',textAlign:'right',fontWeight:600,color:'var(--ok)'}}>{window.fmtCur(Math.max(0,m.val))}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </window.SYDrillModal>
  );
}

// ── Overview ──────────────────────────────────────────────────────────────
function SYOverview({ stockyards, materials }) {
  // Read movements directly from Store — same fix as SYPosition (v27).
  // SYOverview had no useStoreSync at all; it was purely props-driven via
  // StockyardPage. Now it self-subscribes and reads live data independently.
  window.useStoreSync();
  const movements = Store.all('stockMovements') || [];
  const [kpiModal,   setKpiModal]   = sySt(null);
  const [expSyId,    setExpSyId]    = sySt(null);
  const [chartDrill, setChartDrill] = sySt(null);

  const kpi = syMemo(()=>{
    const active = stockyards.filter(s=>s.status==='Active');
    let totalQty=0, totalVal=0; const matSet=new Set();
    active.forEach(sy=>{
      syGetPos(movements,sy.id,materials).forEach(p=>{totalQty+=p.current;totalVal+=p.value;matSet.add(p.materialId);});
    });
    return { totalQty, totalVal, activeCount:active.length, matCount:matSet.size };
  },[movements,stockyards,materials]);

  const syRows = syMemo(()=>stockyards.map(sy=>{
    const pos=syGetPos(movements,sy.id,materials);
    return {...sy,totalQty:pos.reduce((a,p)=>a+p.current,0),totalVal:pos.reduce((a,p)=>a+p.value,0),matCount:pos.length};
  }),[movements,stockyards,materials]);

  const locByQty = syMemo(()=>syRows.filter(s=>s.totalQty>0).sort((a,b)=>b.totalQty-a.totalQty),[syRows]);
  const matByQty = syMemo(()=>{
    const map={};
    (movements||[]).forEach(m=>{
      if(!m.materialId) return;
      const mat=(materials||[]).find(x=>x.id===m.materialId)||{name:m.materialId};
      if(!map[m.materialId]) map[m.materialId]={name:mat.name,qty:0,val:0};
      const q=parseFloat(m.quantity)||0, v=parseFloat(m.value)||0;
      if(SY_IN.has(m.type)){map[m.materialId].qty+=q;map[m.materialId].val+=v;}
      else{map[m.materialId].qty-=q;map[m.materialId].val-=v;}
    });
    return Object.values(map).filter(d=>d.qty>0).sort((a,b)=>b.qty-a.qty).slice(0,10);
  },[movements,materials]);

  const kpis = [
    { key:'stock',     lbl:'Total Stock',       val:`${window.formatQuantity(kpi.totalQty)} Ton`, clr:'var(--or)'   },
    { key:'value',     lbl:'Inventory Value',   val:window.fmtCur(kpi.totalVal),      clr:'var(--ok)'   },
    { key:'yards',     lbl:'Active Stockyards', val:kpi.activeCount,                  clr:'var(--info)' },
    { key:'materials', lbl:'Material Types',    val:kpi.matCount,                     clr:'var(--txt)'  },
  ];

  return (
    <div>
      {/* Clickable KPI cards */}
      <div className="kpi-grid" style={{marginBottom:10}}>
        {kpis.map((k,i)=>(
          <div key={i} className="kpi" onClick={()=>setKpiModal(k.key)}
            style={{cursor:'pointer',transition:'box-shadow .15s',userSelect:'none',borderTop:`3px solid ${k.clr}`}}
            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:16}}>{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>

      {/* Charts row */}
      <div className="ch-grid" style={{marginBottom:10}}>
        <div className="ch-card">
          <div className="ch-ttl">Stock by Location</div>
          <div className="ch-sub">Current quantity per stockyard — <span style={{color:'var(--or)',fontWeight:600,cursor:'pointer'}}>click bar for details</span></div>
          <HBar rows={locByQty} valueKey="totalQty" labelKey="name" fmtVal={v=>`${window.formatQuantity(v)} T`} onBarClick={row=>setChartDrill({type:'location',item:row})}/>
        </div>
        <div className="ch-card">
          <div className="ch-ttl">Stock by Material</div>
          <div className="ch-sub">Net current quantity per material — <span style={{color:'var(--or)',fontWeight:600,cursor:'pointer'}}>click bar for details</span></div>
          <HBar rows={matByQty} valueKey="qty" labelKey="name" fmtVal={v=>`${window.formatQuantity(v)} T`} onBarClick={row=>setChartDrill({type:'material',item:row})}/>
        </div>
      </div>

      <div className="card" style={{marginBottom:10,padding:'12px 14px'}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:4}}>
          <div style={{fontWeight:600,fontSize:12.5}}>Inventory Value by Stockyard</div>
          <span style={{fontSize:11,color:'var(--or)'}}>Click bar for details</span>
        </div>
        <HBar rows={locByQty.filter(s=>s.totalVal>0)} valueKey="totalVal" labelKey="name" fmtVal={v=>window.fmtCur(v)} onBarClick={row=>setChartDrill({type:'value',item:row})}/>
      </div>

      {/* Summary table with expandable rows */}
      <div className="card">
        <div className="card-hd">
          <h3>Stockyard Summary</h3>
          <span style={{fontSize:11.5,color:'var(--txt2)'}}>{syRows.length} locations — 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>LOCATION</th><th>COMPANY</th>
              <th style={{textAlign:'center'}}>MATERIALS</th><th>TOTAL STOCK</th><th>TOTAL VALUE</th><th>STATUS</th>
            </tr></thead>
            <tbody>
              {syRows.length===0
                ? <tr className="empty"><td colSpan="8" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No stockyards configured.</td></tr>
                : syRows.map(s=>{
                  const isExp=expSyId===s.id;
                  return (
                    <React.Fragment key={s.id}>
                      <tr onClick={()=>setExpSyId(id=>id===s.id?null:s.id)} style={{cursor:'pointer',background:isExp?'#FFF7ED':''}}>
                        <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp}/></td>
                        <td><strong>{s.name}</strong></td>
                        <td style={{fontSize:11.5,color:'var(--txt2)'}}>{s.location}</td>
                        <td style={{fontSize:11.5}}>{Store.name('companies',s.companyId)}</td>
                        <td style={{textAlign:'center',fontWeight:600}}>{s.matCount}</td>
                        <td style={{fontWeight:600}}>{window.formatQuantity(s.totalQty)} Ton</td>
                        <td style={{fontWeight:600,color:'var(--or)'}}>{window.fmtCur(s.totalVal)}</td>
                        <td><window.Badge v={s.status}/></td>
                      </tr>
                      {isExp&&(
                        <tr><td colSpan={8} style={{padding:0,borderBottom:'2px solid var(--or-bdr)'}}>
                          <window.SYOverviewDrill sy={s} movements={movements} materials={materials}/>
                        </td></tr>
                      )}
                    </React.Fragment>
                  );
                })}
            </tbody>
            {syRows.length>0&&(
              <tfoot><tr style={{background:'#FFF7ED'}}>
                <td style={{borderTop:'2px solid var(--or-bdr)'}}></td>
                <td colSpan={3} style={{fontWeight:700,fontSize:11.5,color:'var(--txt2)',padding:'8px 10px',borderTop:'2px solid var(--or-bdr)'}}>TOTALS — {syRows.length} stockyard{syRows.length!==1?'s':''}</td>
                <td style={{textAlign:'center',fontWeight:700,padding:'8px 10px',borderTop:'2px solid var(--or-bdr)'}}>{syRows.reduce((s,r)=>s+r.matCount,0)}</td>
                <td style={{fontWeight:700,color:'var(--or)',padding:'8px 10px',borderTop:'2px solid var(--or-bdr)'}}>{syRows.reduce((s,r)=>s+r.totalQty,0).toFixed(1)} Ton</td>
                <td style={{fontWeight:700,color:'var(--ok)',padding:'8px 10px',borderTop:'2px solid var(--or-bdr)'}}>{window.fmtCur(syRows.reduce((s,r)=>s+r.totalVal,0))}</td>
                <td style={{borderTop:'2px solid var(--or-bdr)'}}></td>
              </tr></tfoot>
            )}
          </table>
        </div>
      </div>

      {kpiModal&&(
        <SYKPIModal type={kpiModal} syRows={syRows} movements={movements} materials={materials} allMovements={movements} onClose={()=>setKpiModal(null)}/>
      )}

      {/* Chart bar drill-down modal */}
      {chartDrill&&(()=>{
        const cd=chartDrill;
        if (cd.type==='location'||cd.type==='value') {
          const sy=cd.item;
          return (
            <window.SYDrillModal
              title={sy.name}
              subtitle={`${sy.location||''} · ${sy.matCount} material${sy.matCount!==1?'s':''} · ${window.formatQuantity(sy.totalQty)} T · ${window.fmtCur(sy.totalVal)}`}
              color="var(--or)" onClose={()=>setChartDrill(null)}>
              <window.SYOverviewDrill sy={sy} movements={movements} materials={materials}/>
            </window.SYDrillModal>
          );
        }
        if (cd.type==='material') {
          const mat=cd.item;
          const rows2=stockyards.map(sy=>{
            const pos=syGetPos(movements,sy.id,materials);
            const p=pos.find(x=>x.name===mat.name);
            return p?{name:sy.name,location:sy.location||'',qty:p.current,val:p.value}:null;
          }).filter(Boolean).sort((a,b)=>b.qty-a.qty);
          const totQ=rows2.reduce((s,r)=>s+r.qty,0), totV=rows2.reduce((s,r)=>s+r.val,0);
          return (
            <window.SYDrillModal
              title={`${mat.name}`}
              subtitle={`Material stock across all stockyards · ${window.formatQuantity(totQ)} T total`}
              color="var(--info)" onClose={()=>setChartDrill(null)}>
              <div className="dd-3col" style={{marginBottom:14}}>
                {[['Total Qty',window.formatQuantity(totQ)+' T','var(--or)'],['Stockyards',rows2.length,'var(--info)'],['Total Value',window.fmtCur(totV),'var(--ok)']].map(([l,v,c])=>(
                  <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:c}}>{v}</div>
                    <div style={{fontSize:11,color:'var(--txt2)',marginTop:2}}>{l}</div>
                  </div>
                ))}
              </div>
              <div className="tbl-w"><table style={{width:'100%',borderCollapse:'collapse',fontSize:12}}>
                <thead><tr style={{background:'#F9FAFB'}}>
                  {['Stockyard','Location','Qty (T)','Value'].map(h=>(
                    <th key={h} style={{padding:'6px 10px',fontWeight:700,fontSize:11,color:'var(--txt2)',borderBottom:'1px solid var(--bdr)',textAlign:h==='Qty (T)'||h==='Value'?'right':'left'}}>{h}</th>
                  ))}
                </tr></thead>
                <tbody>
                  {rows2.length===0
                    ?<tr><td colSpan={4} style={{textAlign:'center',padding:28,color:'var(--txt2)'}}>No stock found for this material.</td></tr>
                    :rows2.map((r,i)=>(
                      <tr key={i} style={{borderBottom:'1px solid #F3F4F6'}}>
                        <td style={{padding:'5px 10px',fontWeight:600}}>{r.name}</td>
                        <td style={{padding:'5px 10px',fontSize:11.5,color:'var(--txt2)'}}>{r.location||'—'}</td>
                        <td style={{padding:'5px 10px',textAlign:'right',fontWeight:700,color:'var(--or)'}}>{r.qty.toFixed(3)}</td>
                        <td style={{padding:'5px 10px',textAlign:'right',fontWeight:600,color:'var(--ok)'}}>{window.fmtCur(r.val)}</td>
                      </tr>
                    ))}
                </tbody>
                {rows2.length>1&&<tfoot><tr style={{background:'#FFF7ED'}}>
                  <td colSpan={2} style={{padding:'6px 10px',fontWeight:700,color:'var(--txt2)',fontSize:11}}>TOTAL</td>
                  <td style={{padding:'6px 10px',textAlign:'right',fontWeight:700,color:'var(--or)'}}>{totQ.toFixed(3)}</td>
                  <td style={{padding:'6px 10px',textAlign:'right',fontWeight:700,color:'var(--ok)'}}>{window.fmtCur(totV)}</td>
                </tr></tfoot>}
              </table></div>
            </window.SYDrillModal>
          );
        }
        return null;
      })()}
    </div>
  );
}

// ── Stockyard Master ──────────────────────────────────────────────────────
function SYMaster({ movements, materials, onRefresh }) {
  window.useStoreSync();
  const { companyId } = syCtx(AppCtx);
  const [items,  setItems]  = sySt([]);
  const [modal,  setModal]  = sySt(false);
  const [editId, setEditId] = sySt(null);
  const [delId,  setDelId]  = sySt(null);
  const [form,   setForm]   = sySt({});
  const [expId,  setExpId]  = sySt(null);
  const companies = Store.all('companies');

  syEf(()=>{ load(); },[]);
  function load() { setItems(Store.all('stockyards')||[]); }
  const setF = (k,v) => setForm(p=>({...p,[k]:v}));

  function openAdd()   { setForm({status:'Active',companyId}); setEditId(null); setModal(true); }
  function openEdit(s) { setForm({...s}); setEditId(s.id); setModal(true); }

  function handleSave(e) {
    e.preventDefault();
    if(editId){ Store.update('stockyards',editId,form); Store.addLog('UPDATE','Stockyard',`Updated: ${form.name}`); }
    else      { Store.add('stockyards',form);            Store.addLog('CREATE','Stockyard',`Created: ${form.name}`); }
    setModal(false); load(); onRefresh();
    window.toast&&window.toast(editId?'Stockyard updated':'Stockyard created','ok');
  }
  function handleDelete() {
    Store.del('stockyards',delId); Store.addLog('DELETE','Stockyard','Deleted');
    setDelId(null); load(); onRefresh();
    window.toast&&window.toast('Deleted','ok');
  }

  const rows = syMemo(()=>items.map(s=>{
    const pos=syGetPos(movements,s.id,materials);
    return {...s,totalQty:pos.reduce((a,p)=>a+p.current,0),totalVal:pos.reduce((a,p)=>a+p.value,0),matCount:pos.length};
  }),[items,movements,materials]);

  return (
    <div>
      <div className="ph" style={{marginBottom:10}}>
        <div><h1 style={{fontSize:15}}>Stockyard Master</h1><p style={{fontSize:11.5,color:'var(--txt2)'}}>Create and manage stockyard locations — click any row to drill down</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 Stockyard</button></div>
      </div>
      <div className="card">
        <div className="tbl-w">
          <table className="tbl">
            <thead><tr>
              <th style={{width:28}}></th>
              <th style={{width:50,textAlign:'center'}}>SR.</th>
              <th>STOCKYARD NAME</th><th>LOCATION</th><th>COMPANY</th>
              <th style={{textAlign:'center'}}>MATERIALS</th><th>TOTAL STOCK</th><th>TOTAL VALUE</th><th>STATUS</th><th>ACTIONS</th>
            </tr></thead>
            <tbody>
              {rows.length===0
                ? <tr className="empty"><td colSpan="10" style={{textAlign:'center',padding:36,color:'var(--txt2)'}}>No stockyards found.</td></tr>
                : rows.map((s,i)=>{
                  const isExp=expId===s.id;
                  return (
                    <React.Fragment key={s.id}>
                      <tr onClick={()=>setExpId(id=>id===s.id?null:s.id)} style={{cursor:'pointer',background:isExp?'#FFF7ED':''}}>
                        <td style={{textAlign:'center',padding:'0 8px'}}><window.SYChevron open={isExp}/></td>
                        <td style={{color:'var(--txt2)',textAlign:'center'}}>{i+1}</td>
                        <td><strong>{s.name}</strong></td>
                        <td style={{fontSize:11.5,color:'var(--txt2)'}}>{s.location}</td>
                        <td style={{fontSize:11.5}}>{Store.name('companies',s.companyId)}</td>
                        <td style={{textAlign:'center',fontWeight:600}}>{s.matCount}</td>
                        <td style={{fontWeight:600}}>{window.formatQuantity(s.totalQty)} Ton</td>
                        <td style={{fontWeight:600,color:'var(--or)'}}>{window.fmtCur(s.totalVal)}</td>
                        <td><window.Badge v={s.status}/></td>
                        <td onClick={e=>e.stopPropagation()}>
                          <div className="ra">
                            <button className="btn btn-wh btn-sm" onClick={()=>openEdit(s)}>Edit</button>
                            <button className="btn btn-rd btn-sm" onClick={()=>setDelId(s.id)}>Delete</button>
                          </div>
                        </td>
                      </tr>
                      {isExp&&(
                        <tr><td colSpan={10} style={{padding:0,borderBottom:'2px solid var(--or-bdr)'}}>
                          <window.SYOverviewDrill sy={s} movements={movements} materials={materials}/>
                        </td></tr>
                      )}
                    </React.Fragment>
                  );
                })}
            </tbody>
          </table>
        </div>
      </div>

      {modal&&(
        <div className="mbg">
          <div className="mod mod-md">
            <div className="mod-hd"><h2>{editId?'Edit':'Add'} Stockyard</h2><button className="mod-x" onClick={()=>setModal(false)}>×</button></div>
            <form onSubmit={handleSave}>
              <div className="mod-bd">
                <div className="fg">
                  <div className="fld"><label>Stockyard Name <span className="req">*</span></label>
                    <input className="inp" value={form.name||''} onChange={e=>setF('name',e.target.value)} required placeholder="e.g. Usgao Yard"/>
                  </div>
                  <div className="fld"><label>Company <span className="req">*</span></label>
                    <window.FormSelect placeholder="Select Company" value={form.companyId||''} onChange={v=>setF('companyId',v)} options={companies.map(c=>({value:c.id,label:c.name}))}/>
                  </div>
                  <div className="fld full"><label>Location <span className="req">*</span></label>
                    <input className="inp" value={form.location||''} onChange={e=>setF('location',e.target.value)} required placeholder="e.g. Usgao, Ponda, Goa"/>
                  </div>
                  <div className="fld full"><label>Address</label>
                    <textarea className="tarea" value={form.address||''} onChange={e=>setF('address',e.target.value)} rows={2} placeholder="Full address"/>
                  </div>
                  <div className="fld"><label>Google Maps Link</label>
                    <input className="inp" value={form.mapsLink||''} onChange={e=>setF('mapsLink',e.target.value)} placeholder="https://maps.google.com/…"/>
                  </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>
              </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 Stockyard':'Create Stockyard'}</button>
              </div>
            </form>
          </div>
        </div>
      )}
      {delId&&<window.Confirm onOk={handleDelete} onCancel={()=>setDelId(null)}/>}
    </div>
  );
}

// ── Main Page ─────────────────────────────────────────────────────────────
const SY_VIEWS = [
  { id:'overview',     label:'Overview'         },
  { id:'stockyards',   label:'Stockyards'       },
  { id:'position',     label:'Stock Position'   },
  { id:'register',     label:'Stock Register'   },
  { id:'transfers',    label:'Yard Transfers'   },
  { id:'intelligence', label:'Intelligence'     },
  { id:'aging',        label:'Aging Analysis'   },
  { id:'alerts',       label:'Alerts'           },
  { id:'reports',      label:'Reports'          },
];

function StockyardPage() {
  window.useStoreSync(); // re-renders on every Store mutation — movements/stockyards/transfers stay live
  const { companyId } = syCtx(AppCtx);
  const [view, setView] = sySt('overview');

  // Read directly from Store on every render — reactive via useStoreSync.
  // No separate state or syEf needed; any mutation (opening stock, new movement,
  // edit, delete) instantly propagates to all sub-views without requiring an
  // explicit onRefresh() call.
  const movements  = Store.all('stockMovements') || [];
  const stockyards = Store.all('stockyards')     || [];
  const transfers  = Store.all('syTransfers')    || [];
  const materials  = Store.all('materials', companyId);

  // onRefresh kept as a no-op for backward compat — sub-views that call it still work
  const onRefresh = () => {};

  const alertCount = syMemo(()=>{
    const configs = (Store.all('alertConfigs')||[]).filter(c=>c.status==='Active');
    if(!configs.length) return 0;
    const SI_IN_SET = new Set(['Opening','Purchase','Transfer In','Adjustment In','Stock Transfer In','Customer Return']);
    const positions = [];
    stockyards.forEach(sy=>{
      const matIds=[...new Set(movements.filter(m=>m.stockyardId===sy.id).map(m=>m.materialId))];
      matIds.forEach(mid=>{
        const rel=movements.filter(m=>m.stockyardId===sy.id&&m.materialId===mid);
        const inc=rel.filter(m=>SI_IN_SET.has(m.type)).reduce((s,m)=>s+(parseFloat(m.quantity)||0),0);
        const out=rel.filter(m=>!SI_IN_SET.has(m.type)).reduce((s,m)=>s+(parseFloat(m.quantity)||0),0);
        const cur=inc-out;
        if(cur>0){
          const sorted=[...rel].sort((a,b)=>(b.date||'').localeCompare(a.date||''));
          positions.push({syId:sy.id,materialId:mid,current:cur,lastMovementDate:sorted[0]?.date||''});
        }
      });
    });
    let count=0;
    configs.forEach(cfg=>{
      const scope=positions.filter(p=>(!cfg.materialId||p.materialId===cfg.materialId)&&(!cfg.stockyardId||p.syId===cfg.stockyardId));
      scope.forEach(p=>{
        const days=p.lastMovementDate?Math.floor((Date.now()-new Date(p.lastMovementDate).getTime())/86400000):9999;
        if(cfg.type==='Low Stock'&&p.current<Number(cfg.threshold||0))count++;
        else if(cfg.type==='Overstock'&&p.current>Number(cfg.threshold||999999))count++;
        else if(cfg.type==='Dead Stock'&&days>=Number(cfg.deadDays||90))count++;
      });
    });
    return count;
  },[movements,stockyards]);

  return (
    <div>
      <div className="ph">
        <div>
          <h1>Stockyard Management</h1>
          <p>Real-time inventory control across all OM Group stockyards and storage locations</p>
        </div>
      </div>
      <div style={{display:'flex',gap:4,marginBottom:12,flexWrap:'wrap'}}>
        {SY_VIEWS.map(v=>{
          const isAlerts = v.id==='alerts';
          return (
            <button key={v.id} onClick={()=>setView(v.id)}
              className={`btn btn-sm ${view===v.id?'btn-or':'btn-wh'}`}
              style={{position:'relative'}}>
              {v.label}
              {isAlerts&&alertCount>0&&(
                <span style={{position:'absolute',top:-5,right:-5,background:'var(--err)',color:'#fff',borderRadius:'50%',width:16,height:16,fontSize:9,fontWeight:700,display:'flex',alignItems:'center',justifyContent:'center',lineHeight:1}}>
                  {alertCount>9?'9+':alertCount}
                </span>
              )}
            </button>
          );
        })}
      </div>

      {view==='overview'     && <SYOverview        movements={movements} stockyards={stockyards} materials={materials}/>}
      {view==='stockyards'   && <SYMaster           movements={movements} materials={materials} onRefresh={onRefresh}/>}
      {view==='position'     && <window.SYPosition  movements={movements} stockyards={stockyards} materials={materials} onRefresh={onRefresh}/>}
      {view==='register'     && <window.SYRegister  movements={movements} stockyards={stockyards} materials={materials} onRefresh={onRefresh}/>}
      {view==='transfers'    && <window.SYTransfers transfers={transfers}  stockyards={stockyards} materials={materials} onRefresh={onRefresh}/>}
      {view==='intelligence' && <window.SYIntelligence movements={movements} stockyards={stockyards} materials={materials}/>}
      {view==='aging'        && <window.SYAging     movements={movements} stockyards={stockyards} materials={materials}/>}
      {view==='alerts'       && <window.SYAlerts    movements={movements} stockyards={stockyards} materials={materials}/>}
      {view==='reports'      && <window.SYReports   movements={movements} stockyards={stockyards} materials={materials} transfers={transfers}/>}
    </div>
  );
}
window.StockyardPage = StockyardPage;