// BRIMS UI mockups — match the app's dark operator UI and Filament admin panel.
// Each mockup is a self-contained functional component.

const TopBar = ({ on = 'Dashboard' }) => {
  const items = ['Dashboard','Bags','Processing','QC / Lab','Outbound'];
  return (
    <div className="mock-topbar">
      <div className="brand"><span className="sq">B</span>BRIMS</div>
      <nav>
        {items.map(i => <span key={i} className={i===on ? 'on' : ''}>{i}</span>)}
      </nav>
      <div className="spacer"></div>
      <span className="pill">production supervisor</span>
      <div className="avatar"></div>
    </div>
  );
};

const Chrome = ({ url }) => (
  <div className="mock-chrome">
    <span className="dot" style={{background:'#ef4444'}}></span>
    <span className="dot" style={{background:'#eab308'}}></span>
    <span className="dot" style={{background:'#10b981'}}></span>
    <span className="url">{url}</span>
  </div>
);

// ------- LOGIN -------
const LoginMock = () => (
  <div className="mock" style={{maxWidth:720,margin:'0 auto'}}>
    <Chrome url="brims.yourcompany.local/login" />
    <div style={{padding:'60px 40px',display:'grid',placeItems:'center',background:'linear-gradient(180deg,#0b0f14,#0a1220)'}}>
      <div style={{width:360,background:'var(--d-panel)',border:'1px solid var(--d-line)',borderRadius:10,padding:28}}>
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:22}}>
          <div style={{width:36,height:36,background:'var(--d-brand)',borderRadius:8,display:'grid',placeItems:'center',color:'#042116',fontWeight:900}}>B</div>
          <div>
            <div style={{fontWeight:700,color:'#fff'}}>BRIMS</div>
            <div style={{fontSize:11,color:'var(--d-muted)'}}>Battery Recycling Inventory</div>
          </div>
        </div>
        <div style={{fontSize:18,fontWeight:700,color:'#fff',marginBottom:4}}>Sign in</div>
        <div style={{fontSize:12,color:'var(--d-muted)',marginBottom:18}}>Welcome back. Please enter your details.</div>
        <label style={{fontSize:11,color:'var(--d-muted)',textTransform:'uppercase',letterSpacing:'0.06em'}}>Email</label>
        <div style={{border:'1px solid var(--d-line-2)',background:'#0a0f17',padding:'9px 12px',borderRadius:6,color:'#fff',fontSize:13,marginTop:4,marginBottom:12}}>operator@brims.local</div>
        <label style={{fontSize:11,color:'var(--d-muted)',textTransform:'uppercase',letterSpacing:'0.06em'}}>Password</label>
        <div style={{border:'1px solid var(--d-line-2)',background:'#0a0f17',padding:'9px 12px',borderRadius:6,color:'#fff',fontSize:13,marginTop:4,letterSpacing:4}}>••••••••••</div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',margin:'14px 0 18px',fontSize:12}}>
          <span style={{color:'var(--d-muted)'}}>☐ Remember me</span>
          <a style={{color:'var(--d-brand)'}}>Forgot password?</a>
        </div>
        <button className="btn primary" style={{width:'100%',justifyContent:'center',padding:'10px'}}>Log in →</button>
      </div>
    </div>
  </div>
);

// ------- DASHBOARD -------
const DashboardMock = () => (
  <div className="mock">
    <Chrome url="brims.yourcompany.local/dashboard" />
    <TopBar on="Dashboard" />
    <div className="mock-body">
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:14}}>
        <div>
          <div className="mock-h">Dashboard</div>
          <div className="mock-sub">Plant A · Tema · live · 09:42</div>
        </div>
        <div style={{display:'flex',gap:6}}>
          <span className="btn">Today</span>
          <span className="btn">7d</span>
          <span className="btn" style={{background:'var(--d-line)'}}>30d</span>
        </div>
      </div>
      <div className="kpi-row">
        <div className="kpi"><div className="l">Total Bags</div><div className="v">4,218</div><div className="d">▲ 3.2% wow</div></div>
        <div className="kpi"><div className="l">Total kg</div><div className="v">98,740</div><div className="d">▲ 2.8%</div></div>
        <div className="kpi"><div className="l">Active Inbound</div><div className="v">7</div><div className="d">2 arriving today</div></div>
        <div className="kpi"><div className="l">Open Lots</div><div className="v">31</div><div className="d">8 in refining</div></div>
        <div className="kpi red"><div className="l">Needs Inspection</div><div className="v">14</div><div className="d">3 over 24h</div></div>
      </div>
      <div className="grid-2">
        <div className="card">
          <h4>Bags by status</h4>
          <div className="row"><span><span className="tag gray">Registered</span></span><span>312</span></div>
          <div className="row"><span><span className="tag blue">Approved</span></span><span>1,104</span></div>
          <div className="row"><span><span className="tag amber">In Sorting</span></span><span>728</span></div>
          <div className="row"><span><span className="tag yellow">In Discharge</span></span><span>402</span></div>
          <div className="row"><span><span className="tag orange">In Dismantling</span></span><span>611</span></div>
          <div className="row"><span><span className="tag purple">In Refining</span></span><span>498</span></div>
          <div className="row"><span><span className="tag emerald">Dispatched</span></span><span>512</span></div>
          <div className="row"><span><span className="tag red">Quarantined</span></span><span>51</span></div>
        </div>
        <div className="card">
          <h4>Open exceptions <span style={{float:'right',fontSize:11,color:'var(--d-muted)',fontWeight:400}}>auto-refresh 10s</span></h4>
          <div className="row"><span><span className="tag red">CRIT</span> Weight variance +3.4kg <span style={{color:'var(--d-muted)'}}>BG-LI-000147</span></span><span style={{color:'var(--d-muted)'}}>12m</span></div>
          <div className="row"><span><span className="tag orange">HIGH</span> Seal broken at Loc B-04 <span style={{color:'var(--d-muted)'}}>BG-LI-000093</span></span><span style={{color:'var(--d-muted)'}}>38m</span></div>
          <div className="row"><span><span className="tag orange">HIGH</span> Yield variance -5.1% <span style={{color:'var(--d-muted)'}}>LOT-DM-0314</span></span><span style={{color:'var(--d-muted)'}}>1h</span></div>
          <div className="row"><span><span className="tag yellow">MED</span> Missing scan on transfer <span style={{color:'var(--d-muted)'}}>BG-PB-002015</span></span><span style={{color:'var(--d-muted)'}}>2h</span></div>
          <div className="row"><span><span className="tag yellow">MED</span> Quarantine approaching limit <span style={{color:'var(--d-muted)'}}>BG-NI-000302</span></span><span style={{color:'var(--d-muted)'}}>3h</span></div>
          <div className="row"><span><span className="tag gray">LOW</span> TID verification skipped <span style={{color:'var(--d-muted)'}}>BG-LI-000188</span></span><span style={{color:'var(--d-muted)'}}>5h</span></div>
        </div>
      </div>
    </div>
  </div>
);

// ------- BAG INQUIRY -------
const BagInquiryMock = () => (
  <div className="mock">
    <Chrome url="brims.yourcompany.local/bags/BG-LI-000147" />
    <TopBar on="Bags" />
    <div className="mock-body">
      <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:14}}>
        <div style={{flex:1,background:'var(--d-panel)',border:'1px solid var(--d-line)',padding:'9px 14px',borderRadius:6,color:'var(--d-muted)',fontSize:13}}>🔍  BG-LI-000147</div>
        <span className="btn">Scan RFID</span>
        <span className="btn primary">Approve</span>
        <span className="btn warn">Quarantine</span>
      </div>
      <div className="grid-2">
        <div className="card">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
            <div>
              <div style={{fontSize:11,color:'var(--d-muted)',textTransform:'uppercase',letterSpacing:'0.06em'}}>Bag</div>
              <div style={{fontSize:18,fontWeight:700,color:'#fff'}}>BG-LI-000147</div>
            </div>
            <span className="tag red">QUARANTINED</span>
          </div>
          <div className="row"><span style={{color:'var(--d-muted)'}}>Chemistry</span><span>Li-ion NMC</span></div>
          <div className="row"><span style={{color:'var(--d-muted)'}}>Bag type</span><span><span className="tag blue">BLUE · 15kg</span></span></div>
          <div className="row"><span style={{color:'var(--d-muted)'}}>Hazard</span><span>Class 9 · UN3480</span></div>
          <div className="row"><span style={{color:'var(--d-muted)'}}>Gross weight</span><span>18.42 kg</span></div>
          <div className="row"><span style={{color:'var(--d-muted)'}}>Net weight</span><span>16.92 kg</span></div>
          <div className="row"><span style={{color:'var(--d-muted)'}}>Variance</span><span style={{color:'var(--d-red)'}}>+3.42 kg</span></div>
          <div className="row"><span style={{color:'var(--d-muted)'}}>Current location</span><span>Quarantine · Q-02</span></div>
          <div className="row"><span style={{color:'var(--d-muted)'}}>EPC</span><span style={{fontFamily:'ui-monospace'}}>303A1D4F 2E00 0093</span></div>
          <div className="row"><span style={{color:'var(--d-muted)'}}>Registered by</span><span>K. Mensah · Apr 18, 08:12</span></div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <div className="card">
            <h4>RFID Timeline</h4>
            <div className="row"><span>📍 Weighbridge scale</span><span style={{color:'var(--d-muted)'}}>08:12</span></div>
            <div className="row"><span>📍 Receiving dock A</span><span style={{color:'var(--d-muted)'}}>08:14</span></div>
            <div className="row"><span>📍 Inspection bay</span><span style={{color:'var(--d-muted)'}}>08:22</span></div>
            <div className="row"><span>📍 Quarantine Q-02</span><span style={{color:'var(--d-muted)'}}>09:03</span></div>
          </div>
          <div className="card">
            <h4>Open Exceptions</h4>
            <div className="row"><span><span className="tag red">CRIT</span> Weight variance +3.42 kg</span><span style={{color:'var(--d-muted)'}}>open</span></div>
            <div className="row"><span><span className="tag yellow">MED</span> Awaiting EHS review</span><span style={{color:'var(--d-muted)'}}>open</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

// ------- PIPELINE -------
const PipelineMock = () => {
  const stages = [
    {k:'amber',n:'Receiving',open:7,q:12},
    {k:'blue',n:'Sorting',open:9,q:24},
    {k:'yellow',n:'Discharge',open:4,q:6},
    {k:'orange',n:'Dismantling',open:6,q:11},
    {k:'purple',n:'Refining',open:8,q:9},
    {k:'emerald',n:'Dispatch',open:3,q:2},
  ];
  return (
    <div className="mock">
      <Chrome url="brims.yourcompany.local/processing" />
      <TopBar on="Processing" />
      <div className="mock-body">
        <div className="mock-h">Processing Pipeline</div>
        <div className="mock-sub">Click any stage to drill in · live updates</div>
        <div className="grid-6">
          {stages.map(s => (
            <div key={s.n} className={`stage-card ${s.k}`}>
              <div className="name">{s.n}</div>
              <div className="big" style={{marginTop:6}}>{s.open}</div>
              <div className="small">open lots · {s.q} queued</div>
            </div>
          ))}
        </div>
        <div className="card" style={{marginTop:14}}>
          <h4>Recent activity</h4>
          <div className="row"><span><span className="tag purple">REFINING</span> LOT-RF-0088 · assay added <span style={{color:'var(--d-muted)'}}>by A. Owusu</span></span><span style={{color:'var(--d-muted)'}}>2m</span></div>
          <div className="row"><span><span className="tag orange">DISMANTLE</span> LOT-DM-0312 · output recorded 412 kg <span style={{color:'var(--d-muted)'}}>by J. Boateng</span></span><span style={{color:'var(--d-muted)'}}>6m</span></div>
          <div className="row"><span><span className="tag blue">SORTING</span> LOT-SR-0455 · 24 bags added <span style={{color:'var(--d-muted)'}}>by K. Mensah</span></span><span style={{color:'var(--d-muted)'}}>11m</span></div>
          <div className="row"><span><span className="tag amber">RECEIVING</span> SHP-IN-0219 · completed <span style={{color:'var(--d-muted)'}}>by E. Asare</span></span><span style={{color:'var(--d-muted)'}}>22m</span></div>
          <div className="row"><span><span className="tag emerald">DISPATCH</span> SHP-OUT-0077 · approved 2nd <span style={{color:'var(--d-muted)'}}>by Y. Adams</span></span><span style={{color:'var(--d-muted)'}}>34m</span></div>
        </div>
      </div>
    </div>
  );
};

// ------- RECEIVING -------
const ReceivingMock = () => (
  <div className="mock">
    <Chrome url="brims.yourcompany.local/processing/receiving" />
    <TopBar on="Processing" />
    <div className="mock-body">
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
        <div>
          <div className="mock-h">Receiving</div>
          <div className="mock-sub">Inbound shipments and bag registration</div>
        </div>
        <span className="btn primary">+ New Shipment</span>
      </div>
      <div className="fila-table" style={{background:'var(--d-panel)',border:'1px solid var(--d-line)'}}>
        <table className="mtable">
          <thead><tr><th>Shipment #</th><th>Supplier</th><th>Arrival</th><th>Bags</th><th>Gross kg</th><th>Status</th><th></th></tr></thead>
          <tbody>
            <tr><td>SHP-IN-0221</td><td>Accra Metals Ltd</td><td>Apr 18 · 09:10</td><td>34 / 40</td><td>812.4</td><td><span className="tag amber">RECEIVING</span></td><td style={{color:'var(--d-muted)'}}>Open →</td></tr>
            <tr><td>SHP-IN-0220</td><td>GreenCell Recyclers</td><td>Apr 18 · 07:55</td><td>28 / 28</td><td>640.1</td><td><span className="tag blue">PENDING APPROVAL</span></td><td style={{color:'var(--d-muted)'}}>Open →</td></tr>
            <tr><td>SHP-IN-0219</td><td>Tema Port Logistics</td><td>Apr 17 · 16:40</td><td>52 / 52</td><td>1,206.7</td><td><span className="tag emerald">COMPLETED</span></td><td style={{color:'var(--d-muted)'}}>Open →</td></tr>
            <tr><td>SHP-IN-0218</td><td>Volta Industrial</td><td>Apr 17 · 14:10</td><td>19 / 20</td><td>405.3</td><td><span className="tag red">EXCEPTION</span></td><td style={{color:'var(--d-muted)'}}>Open →</td></tr>
            <tr><td>SHP-IN-0217</td><td>Accra Metals Ltd</td><td>Apr 17 · 11:02</td><td>41 / 41</td><td>984.8</td><td><span className="tag emerald">COMPLETED</span></td><td style={{color:'var(--d-muted)'}}>Open →</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
);

// ------- DISMANTLING DETAIL -------
const DismantlingDetailMock = () => (
  <div className="mock">
    <Chrome url="brims.yourcompany.local/processing/dismantling/LOT-DM-0312" />
    <TopBar on="Processing" />
    <div className="mock-body">
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:10}}>
        <div>
          <div style={{fontSize:11,color:'var(--d-muted)',textTransform:'uppercase',letterSpacing:'0.06em'}}>Dismantling · lot</div>
          <div className="mock-h">LOT-DM-0312 <span style={{fontSize:12,color:'var(--d-muted)',fontWeight:400}}>· parent LOT-SR-0450</span></div>
        </div>
        <div style={{display:'flex',gap:6}}>
          <span className="btn">Add output</span>
          <span className="btn primary">Close Lot</span>
        </div>
      </div>
      <div className="kpi-row" style={{gridTemplateColumns:'repeat(4,1fr)'}}>
        <div className="kpi"><div className="l">Bags</div><div className="v">24</div></div>
        <div className="kpi"><div className="l">Input kg</div><div className="v">512.0</div></div>
        <div className="kpi"><div className="l">Output kg</div><div className="v">487.3</div></div>
        <div className="kpi"><div className="l">Yield</div><div className="v">95.2%</div><div className="d">benchmark 94%</div></div>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12}}>
        <div className="card">
          <h4>Bags in Lot <span style={{float:'right',color:'var(--d-muted)',fontWeight:400,fontSize:11}}>24</span></h4>
          <div className="row"><span>BG-LI-000301</span><span className="tag blue">BLUE</span></div>
          <div className="row"><span>BG-LI-000302</span><span className="tag blue">BLUE</span></div>
          <div className="row"><span>BG-LI-000303</span><span className="tag blue">BLUE</span></div>
          <div className="row"><span>BG-LI-000304</span><span className="tag yellow">YELLOW</span></div>
          <div className="row"><span>BG-LI-000305</span><span className="tag blue">BLUE</span></div>
          <div className="row"><span>BG-LI-000306</span><span className="tag blue">BLUE</span></div>
          <div className="row" style={{color:'var(--d-muted)',fontSize:11}}><span>+ 18 more</span><span></span></div>
        </div>
        <div className="card">
          <h4>Output Fractions <span style={{float:'right'}}><span className="btn" style={{padding:'2px 8px',fontSize:11}}>+ Add</span></span></h4>
          <div className="row"><span>Black Mass</span><span>292.4 kg · 60.0%</span></div>
          <div className="row"><span>Copper Foil</span><span>62.1 kg · 12.7%</span></div>
          <div className="row"><span>Aluminium Casing</span><span>71.3 kg · 14.6%</span></div>
          <div className="row"><span>Plastic Separator</span><span>28.2 kg · 5.8%</span></div>
          <div className="row"><span>Electrolyte (captured)</span><span>33.3 kg · 6.8%</span></div>
          <div style={{marginTop:10,background:'#0a1220',border:'1px solid var(--d-line)',borderRadius:6,padding:10}}>
            <div style={{fontSize:11,color:'var(--d-muted)',marginBottom:6}}>Material Accounted</div>
            <div style={{height:8,background:'#0a0f17',borderRadius:4,overflow:'hidden'}}>
              <div style={{width:'95%',height:'100%',background:'linear-gradient(90deg,var(--d-emerald),var(--d-blue))'}}></div>
            </div>
            <div style={{fontSize:11,color:'var(--d-muted)',marginTop:4}}>95.2% · loss 4.8% (24.7 kg)</div>
          </div>
        </div>
        <div className="card">
          <h4>Activity</h4>
          <div className="row"><span>Output +33.3 kg electrolyte</span><span style={{color:'var(--d-muted)'}}>6m</span></div>
          <div className="row"><span>Output +71.3 kg Al casing</span><span style={{color:'var(--d-muted)'}}>22m</span></div>
          <div className="row"><span>Output +62.1 kg Cu foil</span><span style={{color:'var(--d-muted)'}}>38m</span></div>
          <div className="row"><span>Output +292.4 kg black mass</span><span style={{color:'var(--d-muted)'}}>1h</span></div>
          <div className="row"><span>Lot opened · 24 bags</span><span style={{color:'var(--d-muted)'}}>3h</span></div>
          <div className="row"><span>Created from LOT-SR-0450</span><span style={{color:'var(--d-muted)'}}>3h</span></div>
        </div>
      </div>
    </div>
  </div>
);

// ------- QC / LAB -------
const QcLabMock = () => (
  <div className="mock">
    <Chrome url="brims.yourcompany.local/qc" />
    <TopBar on="QC / Lab" />
    <div className="mock-body">
      <div className="mock-h">QC / Lab</div>
      <div className="mock-sub">Lots awaiting assay · chemistry entry</div>
      <div className="grid-3">
        {[
          {lot:'LOT-RF-0088',out:5,as:2,st:'purple',stl:'REFINING'},
          {lot:'LOT-DM-0312',out:5,as:0,st:'orange',stl:'DISMANTLING'},
          {lot:'LOT-DM-0311',out:4,as:4,st:'emerald',stl:'DONE'},
          {lot:'LOT-RF-0087',out:3,as:3,st:'emerald',stl:'DONE'},
          {lot:'LOT-DM-0310',out:5,as:1,st:'orange',stl:'DISMANTLING'},
          {lot:'LOT-RF-0086',out:4,as:0,st:'purple',stl:'REFINING'},
        ].map(l => (
          <div key={l.lot} className="card">
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
              <div style={{fontWeight:700,color:'#fff'}}>{l.lot}</div>
              <span className={`tag ${l.st}`}>{l.stl}</span>
            </div>
            <div className="row"><span style={{color:'var(--d-muted)'}}>Outputs</span><span>{l.out}</span></div>
            <div className="row"><span style={{color:'var(--d-muted)'}}>Assays recorded</span><span>{l.as}/{l.out}</span></div>
            <div className="row"><span style={{color:'var(--d-muted)'}}>Chemistry</span><span>Li-ion NMC</span></div>
            <div style={{marginTop:10}}><span className="btn primary" style={{fontSize:11,padding:'4px 10px'}}>+ Add assay</span></div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ------- OUTBOUND -------
const OutboundMock = () => (
  <div className="mock">
    <Chrome url="brims.yourcompany.local/outbound" />
    <TopBar on="Outbound" />
    <div className="mock-body">
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
        <div>
          <div className="mock-h">Outbound Dispatch</div>
          <div className="mock-sub">Two-step approval · refined output shipments</div>
        </div>
        <span className="btn primary">+ New Shipment</span>
      </div>
      <div className="kpi-row" style={{gridTemplateColumns:'repeat(4,1fr)'}}>
        <div className="kpi"><div className="l">Draft</div><div className="v">4</div></div>
        <div className="kpi"><div className="l">Pending 2nd</div><div className="v">2</div></div>
        <div className="kpi"><div className="l">Approved</div><div className="v">3</div></div>
        <div className="kpi"><div className="l">Dispatched (wk)</div><div className="v">11</div></div>
      </div>
      <div className="fila-table" style={{background:'var(--d-panel)',border:'1px solid var(--d-line)'}}>
        <table className="mtable">
          <thead><tr><th>Shipment #</th><th>Destination</th><th>Lots</th><th>Net kg</th><th>Status</th><th>Next action</th></tr></thead>
          <tbody>
            <tr><td>SHP-OUT-0080</td><td>Smelter Plant A · Tema</td><td>3</td><td>842.3</td><td><span className="tag gray">DRAFT</span></td><td style={{color:'var(--d-muted)'}}>Add lots</td></tr>
            <tr><td>SHP-OUT-0079</td><td>Hydromet Ref. · Takoradi</td><td>5</td><td>1,204.7</td><td><span className="tag amber">PENDING 2nd</span></td><td>2nd approval</td></tr>
            <tr><td>SHP-OUT-0078</td><td>Smelter Plant A · Tema</td><td>4</td><td>988.0</td><td><span className="tag blue">APPROVED</span></td><td>Mark dispatched</td></tr>
            <tr><td>SHP-OUT-0077</td><td>EcoRefine · Accra</td><td>2</td><td>410.5</td><td><span className="tag emerald">DISPATCHED</span></td><td style={{color:'var(--d-muted)'}}>—</td></tr>
            <tr><td>SHP-OUT-0076</td><td>Smelter Plant B · Kumasi</td><td>6</td><td>1,552.1</td><td><span className="tag emerald">DISPATCHED</span></td><td style={{color:'var(--d-muted)'}}>—</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
);

// ------- FILAMENT ADMIN — USERS -------
const FilaShell = ({ page, children, title, sub }) => {
  const nav = [
    ['USER MANAGEMENT', ['Users','Roles','Permissions']],
    ['MASTER DATA', ['Companies','Sites','Locations','Suppliers','Bag Types','Battery Chemistries','EPC Versions','Yield Benchmarks']],
    ['OPERATIONS', ['Bags','Lots','Inbound Shipments','Outbound Shipments']],
    ['MONITORING', ['Exception Board','Material Balance','Reports','Audit Log']],
  ];
  return (
    <div className="fila">
      <div className="fila-top">
        <div className="logo">B</div>
        <div className="t">BRIMS · Admin</div>
        <div style={{flex:1}}></div>
        <div style={{fontSize:12,color:'#6b7280'}}>admin@brims.local</div>
        <div style={{width:24,height:24,borderRadius:'50%',background:'linear-gradient(135deg,#f59e0b,#b45309)'}}></div>
      </div>
      <div className="fila-layout">
        <div className="fila-side">
          {nav.map(([g, items]) => (
            <div key={g}>
              <div className="g">{g}</div>
              {items.map(i => <a key={i} className={i===page ? 'on' : ''}>{i}</a>)}
            </div>
          ))}
        </div>
        <div className="fila-main">
          <div className="fila-h">{title}</div>
          {sub && <div className="fila-sub">{sub}</div>}
          {children}
        </div>
      </div>
    </div>
  );
};

const FilamentUsersMock = () => (
  <FilaShell page="Users" title="Users" sub="12 users · manage accounts, roles and site assignments">
    <div className="fila-table">
      <div className="fila-toolbar">
        <input placeholder="Search name, email..." defaultValue="" />
        <span className="chip gray">All roles ▾</span>
        <span className="chip gray">All sites ▾</span>
        <button className="btn">+ New user</button>
      </div>
      <table>
        <thead><tr><th>Name</th><th>Email</th><th>Roles</th><th>Site</th><th>Status</th><th>Last login</th></tr></thead>
        <tbody>
          <tr><td>Ama Owusu</td><td>a.owusu@brims.local</td><td><span className="chip">qc_lab_officer</span></td><td>Plant A · Tema</td><td><span className="chip green">Active</span></td><td>2m ago</td></tr>
          <tr><td>Kwame Mensah</td><td>k.mensah@brims.local</td><td><span className="chip">receiving_operator</span></td><td>Plant A · Tema</td><td><span className="chip green">Active</span></td><td>14m ago</td></tr>
          <tr><td>Efua Asare</td><td>e.asare@brims.local</td><td><span className="chip">ehs_officer</span></td><td>Plant A · Tema</td><td><span className="chip green">Active</span></td><td>1h ago</td></tr>
          <tr><td>Yaw Adams</td><td>y.adams@brims.local</td><td><span className="chip">production_supervisor</span></td><td>Plant B · Kumasi</td><td><span className="chip green">Active</span></td><td>3h ago</td></tr>
          <tr><td>Joseph Boateng</td><td>j.boateng@brims.local</td><td><span className="chip">warehouse_operator</span></td><td>Plant A · Tema</td><td><span className="chip green">Active</span></td><td>4h ago</td></tr>
          <tr><td>N. Agyeman</td><td>n.agyeman@brims.local</td><td><span className="chip">inventory_controller</span></td><td>Plant B · Kumasi</td><td><span className="chip gray">Invited</span></td><td style={{color:'#9ca3af'}}>—</td></tr>
          <tr><td>System Admin</td><td>admin@brims.local</td><td><span className="chip red">admin</span></td><td>All sites</td><td><span className="chip green">Active</span></td><td>just now</td></tr>
        </tbody>
      </table>
    </div>
  </FilaShell>
);

const FilamentBagTypesMock = () => (
  <FilaShell page="Bag Types" title="Create bag type" sub="Master data · Bag Types · New">
    <div className="fila-form">
      <div className="fgrid">
        <div><label>Code *</label><div className="inp">BLU-15-LI</div></div>
        <div><label>Display name *</label><div className="inp">Blue · 15kg · Li-ion</div></div>
        <div><label>Colour *</label><div className="inp" style={{display:'flex',alignItems:'center',gap:8}}><span style={{width:14,height:14,background:'#3b82f6',borderRadius:3}}></span>BLUE</div></div>
        <div><label>Default chemistry *</label><div className="inp">Li-ion NMC</div></div>
        <div><label>Tare weight (kg) *</label><div className="inp">1.50</div></div>
        <div><label>Max gross weight (kg) *</label><div className="inp">20.00</div></div>
        <div><label>Hazard class</label><div className="inp">Class 9 · UN3480</div></div>
        <div><label>Yield benchmark (%)</label><div className="inp">94.0</div></div>
        <div className="full"><label>Handling notes</label><div className="inp" style={{minHeight:60}}>Inspect for swelling. Do not stack more than 2 high. Keep dry; temp below 35°C.</div></div>
        <div><label>Active</label><div className="inp" style={{display:'flex',alignItems:'center',gap:8}}><span style={{width:30,height:16,background:'#f59e0b',borderRadius:999,position:'relative'}}><span style={{position:'absolute',right:2,top:2,width:12,height:12,background:'#fff',borderRadius:'50%'}}></span></span> Yes</div></div>
      </div>
      <div className="fft">
        <button className="btn" style={{background:'#f3f4f6',color:'#111827'}}>Cancel</button>
        <button className="btn" style={{background:'#fff',color:'#111827',border:'1px solid #d1d5db'}}>Create &amp; another</button>
        <button className="btn">Create</button>
      </div>
    </div>
  </FilaShell>
);

const ExceptionBoardMock = () => (
  <FilaShell page="Exception Board" title="Exception Board" sub="14 open · resolve issues blocking lots and bags">
    <div className="fila-table">
      <div className="fila-toolbar">
        <span className="chip gray">Type: All ▾</span>
        <span className="chip gray">Severity: All ▾</span>
        <span className="chip">Status: Open ▾</span>
        <span style={{flex:1}}></span>
        <button className="btn" style={{background:'#fff',color:'#111827',border:'1px solid #d1d5db'}}>Export CSV</button>
      </div>
      <table>
        <thead><tr><th>Raised</th><th>Type</th><th>Severity</th><th>Subject</th><th>Status</th><th>Assignee</th><th></th></tr></thead>
        <tbody>
          <tr><td>18 Apr · 09:26</td><td>weight_variance</td><td><span className="chip red">CRIT</span></td><td>BG-LI-000147 · +3.42 kg</td><td><span className="chip red">Open</span></td><td>E. Asare</td><td><button className="btn">Resolve</button></td></tr>
          <tr><td>18 Apr · 08:58</td><td>seal_broken</td><td><span className="chip">HIGH</span></td><td>BG-LI-000093 · Loc B-04</td><td><span className="chip red">Open</span></td><td>E. Asare</td><td><button className="btn">Resolve</button></td></tr>
          <tr><td>18 Apr · 08:44</td><td>yield_variance</td><td><span className="chip">HIGH</span></td><td>LOT-DM-0314 · -5.1%</td><td><span className="chip red">Open</span></td><td>Y. Adams</td><td><button className="btn">Resolve</button></td></tr>
          <tr><td>18 Apr · 07:42</td><td>missing_scan</td><td><span className="chip">MED</span></td><td>BG-PB-002015 · transfer</td><td><span className="chip red">Open</span></td><td>—</td><td><button className="btn">Resolve</button></td></tr>
          <tr><td>18 Apr · 06:58</td><td>quarantine_exp</td><td><span className="chip">MED</span></td><td>BG-NI-000302 · 29d</td><td><span className="chip red">Open</span></td><td>E. Asare</td><td><button className="btn">Resolve</button></td></tr>
          <tr><td>17 Apr · 18:10</td><td>tid_verify</td><td><span className="chip gray">LOW</span></td><td>BG-LI-000188 · reader 2</td><td><span className="chip green">Resolved</span></td><td>E. Asare</td><td style={{color:'#9ca3af'}}>—</td></tr>
          <tr><td>17 Apr · 14:22</td><td>weight_variance</td><td><span className="chip">MED</span></td><td>BG-LI-000088 · +1.08 kg</td><td><span className="chip green">Resolved</span></td><td>E. Asare</td><td style={{color:'#9ca3af'}}>—</td></tr>
        </tbody>
      </table>
    </div>
  </FilaShell>
);

const MaterialBalanceMock = () => (
  <FilaShell page="Material Balance" title="Material Balance" sub="Apr 1 – Apr 18 · all chemistries · plant A">
    <div className="fila-table">
      <div className="fila-toolbar">
        <span className="chip">Apr 1 – Apr 18 ▾</span>
        <span className="chip gray">Chemistry: All ▾</span>
        <span className="chip gray">Plant A ▾</span>
        <span style={{flex:1}}></span>
        <button className="btn" style={{background:'#fff',color:'#111827',border:'1px solid #d1d5db'}}>Export CSV</button>
      </div>
      <table>
        <thead><tr><th>Lot</th><th>Stage</th><th>Chemistry</th><th>Input kg</th><th>Output kg</th><th>Loss kg</th><th>Yield %</th><th>Benchmark</th></tr></thead>
        <tbody>
          <tr><td>LOT-DM-0312</td><td>Dismantling</td><td>Li-ion NMC</td><td>512.0</td><td>487.3</td><td>24.7</td><td style={{color:'#15803d',fontWeight:600}}>95.2</td><td>94.0</td></tr>
          <tr><td>LOT-DM-0311</td><td>Dismantling</td><td>Li-ion LFP</td><td>438.4</td><td>410.2</td><td>28.2</td><td style={{color:'#15803d',fontWeight:600}}>93.6</td><td>92.0</td></tr>
          <tr><td>LOT-DM-0310</td><td>Dismantling</td><td>Li-ion NMC</td><td>402.1</td><td>371.5</td><td>30.6</td><td style={{color:'#b45309',fontWeight:600}}>92.4</td><td>94.0</td></tr>
          <tr><td>LOT-RF-0088</td><td>Refining</td><td>Li-ion NMC</td><td>292.4</td><td>278.1</td><td>14.3</td><td style={{color:'#15803d',fontWeight:600}}>95.1</td><td>94.0</td></tr>
          <tr><td>LOT-RF-0087</td><td>Refining</td><td>Pb-acid</td><td>882.0</td><td>842.6</td><td>39.4</td><td style={{color:'#15803d',fontWeight:600}}>95.5</td><td>95.0</td></tr>
          <tr><td>LOT-RF-0086</td><td>Refining</td><td>NiMH</td><td>214.0</td><td>196.1</td><td>17.9</td><td style={{color:'#b91c1c',fontWeight:600}}>91.6</td><td>93.0</td></tr>
        </tbody>
      </table>
    </div>
  </FilaShell>
);

const FilamentReportsMock = () => {
  const groups = [
    {n:'Inbound Reports',items:['Shipment Arrivals','Supplier Summary','Bag Registration Log']},
    {n:'Processing Reports',items:['Lot Event Log','Yield Analysis','Chemistry Breakdown']},
    {n:'Outbound Reports',items:['Dispatch Summary','Approval Timeline','Customer Allocation']},
    {n:'Exception Reports',items:['Exception Frequency','MTTR Analysis','Severity Trends']},
    {n:'Compliance Reports',items:['Custody Chain','Hazmat Handling','Audit Trail']},
    {n:'RFID Reports',items:['Tag Read Log','Location Transitions','Verification Failures']},
  ];
  return (
    <FilaShell page="Reports" title="Reports" sub="Generate CSV / PDF exports · filtered by date range and site">
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12}}>
        {groups.map(g => (
          <div key={g.n} style={{background:'#fff',border:'1px solid #e5e7eb',borderRadius:8,padding:14}}>
            <div style={{fontWeight:700,color:'#111827',marginBottom:10}}>{g.n}</div>
            {g.items.map(i => (
              <div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'8px 0',borderBottom:'1px solid #f3f4f6',fontSize:13}}>
                <span>{i}</span>
                <span style={{display:'flex',gap:4}}>
                  <span className="chip gray" style={{cursor:'pointer'}}>CSV</span>
                  <span className="chip" style={{cursor:'pointer'}}>PDF</span>
                </span>
              </div>
            ))}
          </div>
        ))}
      </div>
    </FilaShell>
  );
};