/* Maintain · Supply · Protect screens. */

// ---------- LOCKED PILLAR EMPTY STATE ----------
function LockedPillar({ title, sub, requirements, go }) {
  return (
    <>
      <TopBar title={title}/>
      <div className="screen">
        <div style={{padding:'48px 8px 0', textAlign:'center'}}>
          <div style={{width:88, height:88, margin:'0 auto', border:'1px dashed var(--rh-brass-tint-32)', borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--rh-brass-400)'}}>
            <I.lock s={32}/>
          </div>
          <div className="eyebrow" style={{marginTop:18}}>{title} is locked</div>
          <h1 className="hero-title" style={{fontSize:32, marginTop:6}}>Lay the <span className="red">foundation</span> first.</h1>
          <div className="rh-body-sm" style={{marginTop:10, maxWidth:300, marginLeft:'auto', marginRight:'auto', color:'var(--rh-bone-300)'}}>{sub}</div>
        </div>
        <LabelRule>To unlock</LabelRule>
        <div className="card">
          {requirements.map((r,i) => (
            <div key={r.label} style={{display:'grid', gridTemplateColumns:'28px 1fr auto', gap:10, alignItems:'center', padding:'10px 0', borderBottom: i<requirements.length-1 ? '1px solid var(--border-hairline)' : 'none'}}>
              <div style={{width:24, height:24, borderRadius:'50%', border:'1px solid var(--rh-brass)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-display)', fontSize:13, color:'var(--rh-brass-400)'}}>{i+1}</div>
              <div className="label-md" style={{color:'var(--fg-1)', letterSpacing:'0.14em'}}>{r.label}</div>
              {r.onClick && <button className="btn btn-secondary" style={{padding:'6px 10px', fontSize:10}} onClick={r.onClick}>Start →</button>}
            </div>
          ))}
        </div>
        <div style={{marginTop:14}}>
          <Button variant="secondary" block onClick={()=>go('home')}>← Back to Home</Button>
        </div>
      </div>
    </>
  );
}

// ---------- MAINTAIN / READINESS ----------
function Maintain({ go, emptyMode }) {
  if (emptyMode) return (
    <LockedPillar
      title="Maintain"
      sub="Maintenance tracks readiness against the rounds you fire. We need a firearm first to set up the rules."
      requirements={[
        { label:'Add your first firearm', onClick:()=>go('addgun') },
        { label:'Add ammo to your supply', onClick:null },
      ]}
      go={go}
    />
  );
  return (
    <>
      <TopBar title="Maintain"/>
      <div className="screen">
        <CollapsingHero
          eyebrow="Service · Readiness"
          headline="Maintain"
          summary="8 items tracked · 1 overdue · 2 due soon"
          right={
            <div style={{display:'flex', gap:6, alignItems:'center'}}>
              <QuickActionButton onClick={()=>go('home')} label="Log"/>
              <TourButton onClick={()=>window.__rhTour && window.__rhTour('maintain')}/>
            </div>
          }
        />

        {/* COMPONENT BREAKDOWN — replaces the old single "System readiness" card.
            User sees their fleet split into Firearms / Suppressors / Optics with
            ready/due/overdue counts for each category. */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8, marginTop:6}}>
          <ComponentSummary label="Firearms" total={5} ready={3} due={1} overdue={1} icon={<I.target s={18}/>}/>
          <ComponentSummary label="Suppressors" total={2} ready={2} due={0} overdue={0} icon={<I.package s={18}/>}/>
          <ComponentSummary label="Optics" total={3} ready={2} due={1} overdue={0} icon={<I.ring s={18}/>}/>
        </div>

        <MaintainTabs go={go}/>

        {/* Customize entry */}
        <div className="card" style={{marginTop:14, background:'transparent', borderStyle:'dashed', borderColor:'var(--rh-brass-tint-32)', cursor:'pointer'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:10}}>
            <div>
              <div className="label-md" style={{color:'var(--rh-brass-400)'}}>Customize your program</div>
              <div className="rh-body-sm" style={{marginTop:4, color:'var(--rh-bone-300)'}}>Edit default intervals, add custom milestones, choose what to monitor.</div>
            </div>
            <button className="btn btn-secondary" style={{padding:'8px 12px', fontSize:10}}>Settings →</button>
          </div>
        </div>

        <LabelRule more="All">Recent activity</LabelRule>
        <div className="card" style={{padding:'4px 12px'}}>
          <RecentMaintRow d="14" m="Apr" title="Glock 19 · Cleaned" sub="Self · 247 rds since"/>
          <RecentMaintRow d="22" m="Mar" title="RMR battery replaced" sub="CR2032 · 24-mo cycle reset"/>
          <RecentMaintRow d="08" m="Feb" title="P365 · Apex trigger install" sub="Gunsmith service · $145"/>
        </div>

        <div style={{marginTop:16}}>
          <Button variant="primary" block onClick={()=>go('home')} icon={<X.plus2 s={14}/>}>Log service</Button>
        </div>
      </div>
    </>
  );
}

function ComponentSummary({ label, total, ready, due, overdue, icon }) {
  const issue = overdue + due;
  const state = overdue ? 'overdue' : due ? 'due' : 'ready';
  const color = state==='overdue' ? 'var(--rh-dusty-red)' : state==='due' ? 'var(--rh-brass-400)' : '#A6C293';
  return (
    <div className="card" style={{padding:'10px 10px 12px', textAlign:'center'}}>
      <div style={{color:'var(--rh-bone-300)', display:'flex', justifyContent:'center'}}>{icon}</div>
      <div className="label-md" style={{marginTop:6, fontSize:9, color:'var(--rh-bone-500)'}}>{label}</div>
      <div style={{fontFamily:'var(--font-display)', fontSize:24, letterSpacing:'0.02em', color:'var(--fg-1)', marginTop:4, lineHeight:1}}>{ready}<span style={{fontSize:12, color:'var(--fg-4)'}}>/{total}</span></div>
      <div className="label-md" style={{marginTop:6, fontSize:8, color, letterSpacing:'0.18em'}}>
        {issue ? `${issue} ATTENTION` : 'ALL READY'}
      </div>
    </div>
  );
}

function MaintainTabs({ go }) {
  const [tab, setTab] = React.useState('firearms');

  return (
    <>
      <div className="top-tabs">
        {[
          {id:'firearms',   label:'Firearms',   dot:'var(--rh-bone)'},
          {id:'suppressors',label:'Suppressors',dot:'var(--rh-dusty-red)'},
          {id:'optics',     label:'Optics',     dot:'var(--rh-brass-400)'},
        ].map(t => (
          <div key={t.id} className={`t ${tab===t.id?'on':''}`} onClick={()=>setTab(t.id)}>
            <span className="dot" style={{background:t.dot}}/>
            {t.label}
          </div>
        ))}
      </div>

      {tab==='firearms' && (
        <>
          <MaintRow name="SIG P365 XL" service="Full strip clean" pct={-19} state="overdue" rounds="1,247 / 1,000" days="+13d"/>
          <MaintRow name="Glock 19 Gen5" service="Clean · Lube" pct={75} state="due" rounds="750 / 1,000" days="2w"/>
          <MaintRow name="11.5″ AR-15" service="BCG service" pct={92} state="ready" rounds="2,418 / 2,500" days="3w"/>
          <MaintRow name="Ruger 10/22" service="Clean · Lube" pct={88} state="ready" rounds="—" days="2mo"/>
          <MaintRow name="Beretta 92FS" service="Range-ready" pct={100} state="ready" rounds="312 / 1,000" days="3mo"/>
        </>
      )}

      {tab==='suppressors' && (
        <>
          <MaintRow name="SilencerCo Omega 9K" service="Within service interval" pct={84} state="ready" rounds="1,420 / 2,500" days="—"/>
          <MaintRow name="Dead Air Sandman-S" service="Within service interval" pct={96} state="ready" rounds="380 / 5,000" days="—"/>
        </>
      )}

      {tab==='optics' && (
        <>
          <MaintRow name="Trijicon RMR · Glock 19" service="Battery · 24mo cycle" pct={92} state="ready" rounds="—" days="22 wks"/>
          <MaintRow name="Sig Romeo Zero · P365 XL" service="Battery · 12mo cycle" pct={50} state="due" rounds="—" days="6 wks"/>
          <MaintRow name="Primary Arms LPVO · AR-15" service="Battery N/A · LPVO" pct={100} state="ready" rounds="—" days="—"/>
        </>
      )}
    </>
  );
}

function RecentMaintRow({ d, m, title, sub }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:'48px 1fr', gap:12, alignItems:'center', padding:'10px 0', borderBottom:'1px solid var(--border-hairline)'}}>
      <div>
        <div style={{fontFamily:'var(--font-display)', fontSize:18, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1}}>{d}</div>
        <div className="label-md" style={{marginTop:2, fontSize:8, color:'var(--rh-bone-500)'}}>{m}</div>
      </div>
      <div>
        <div style={{fontFamily:'var(--font-ui)', fontSize:12, color:'var(--fg-1)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600}}>{title}</div>
        <div className="rh-body-sm" style={{color:'var(--rh-bone-300)', marginTop:2}}>{sub}</div>
      </div>
    </div>
  );
}
function MaintRow({ name, service, pct, state, rounds, days }) {
  const map = {
    overdue:{ color:'var(--rh-dusty-red)', label:'OVERDUE' },
    due:    { color:'var(--rh-brass-400)', label:'DUE SOON' },
    ready:  { color:'#A6C293', label:'READY' },
  };
  const m = map[state];
  return (
    <div className={`maint-row ${state}`}>
      <div>
        <div style={{fontFamily:'var(--font-display)', fontSize:18, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1}}>{name}</div>
        <div className="label-md" style={{marginTop:4, color:'var(--rh-bone-500)'}}>{service}</div>
        <div style={{display:'flex', gap:10, marginTop:6, fontFamily:'var(--font-display)', fontSize:12, color:'var(--rh-bone-300)', letterSpacing:'0.02em'}}>
          <span>{rounds}</span>
          <span style={{color:'var(--fg-4)'}}>·</span>
          <span style={{color:m.color}}>{days}</span>
        </div>
      </div>
      <div className="right">
        <div className="pct" style={{color:m.color}}>{Math.abs(pct)}<span style={{fontSize:12}}>%</span></div>
        <div className="pct-sub" style={{color:m.color}}>{m.label}</div>
      </div>
    </div>
  );
}

// ---------- SUPPLY (caliber-by-caliber) ----------
function Supply({ go, emptyMode }) {
  const [reorder, setReorder] = React.useState(false);
  const [lots, setLots] = React.useState(null); // null = loading

  React.useEffect(() => {
    window.rhDB.getAllLots().then(setLots);
  }, [emptyMode]);

  // Empty state — emptyMode OR DB loaded with no lots
  const showEmpty = lots !== null && lots.length === 0;
  if (showEmpty) return (
    <>
      <TopBar title="Supply"/>
      <div className="screen">
        <div className="screen-hero">
          <div className="eyebrow">Supply · Reserves</div>
          <h1 className="hero-title">Stock the <span className="red">shelf.</span></h1>
          <div className="hero-sub">Track ammo by caliber, use, and grain. Cost-per-round computed automatically.</div>
        </div>
        <div style={{padding:'32px 8px', textAlign:'center'}}>
          <div style={{width:72, height:72, margin:'0 auto', border:'1px dashed var(--rh-brass-tint-32)', borderRadius:2, display:'flex', alignItems:'center', justifyContent:'center', color:'var(--rh-brass-400)'}}>
            <I.package s={28}/>
          </div>
          <div style={{fontFamily:'var(--font-display)', fontSize:22, color:'var(--fg-1)', letterSpacing:'0.02em', marginTop:14}}>No ammo on hand</div>
          <div className="rh-body-sm" style={{marginTop:8, maxWidth:280, marginLeft:'auto', marginRight:'auto', color:'var(--rh-bone-300)'}}>Add your first lot to start tracking burn rate, cost per round, and reserve health.</div>
          <div style={{marginTop:20}}>
            <Button variant="primary" onClick={()=>go('addlot')} icon={<I.plus s={14}/>}>Add ammo lot</Button>
          </div>
          <div className="rh-body-sm" style={{marginTop:16, color:'var(--rh-bone-500)'}}>
            Adding ammo unlocks Maintain and Protect.
          </div>
        </div>
      </div>
    </>
  );

  // Still loading
  if (lots === null) return (
    <>
      <TopBar title="Supply"/>
      <div className="screen">
        <CollapsingHero eyebrow="Caliber health" headline="Supply" summary="Loading…"/>
      </div>
    </>
  );

  // Compute caliber stats from lots — par defaults to 500 until user sets it in Settings
  var DEFAULT_PAR = 500;
  var caliberMap = {};
  lots.forEach(function(lot) {
    if (!caliberMap[lot.caliber]) caliberMap[lot.caliber] = [];
    caliberMap[lot.caliber].push(lot);
  });

  var calibers = Object.keys(caliberMap).map(function(cal) {
    var calLots = caliberMap[cal];
    var qty = calLots.reduce(function(s, l) { return s + l.remaining; }, 0);
    var weightedCost = calLots.reduce(function(s, l) { return s + (l.costPerRound || 0) * l.remaining; }, 0);
    var avgCost = (qty > 0 && weightedCost > 0) ? weightedCost / qty : null;
    var stockPct = qty / DEFAULT_PAR;
    var status = stockPct < 0.25 ? 'crit' : stockPct < 0.60 ? 'low' : 'ok';
    return { cal: cal, qty: qty, par: DEFAULT_PAR, burn: 0, avgCost: avgCost, status: status };
  });

  var totalRounds = lots.reduce(function(s, l) { return s + l.remaining; }, 0);
  var critCount = calibers.filter(function(c) { return c.status === 'crit'; }).length;
  var lowCount  = calibers.filter(function(c) { return c.status === 'low';  }).length;

  var summaryParts = [totalRounds.toLocaleString() + ' rounds', calibers.length + ' caliber' + (calibers.length === 1 ? '' : 's')];
  if (critCount) summaryParts.push(critCount + ' critical');
  if (lowCount)  summaryParts.push(lowCount  + ' low');
  var summary = summaryParts.join(' · ');

  // Recent restocks: newest lots first
  var recentLots = lots.slice().sort(function(a, b) {
    return new Date(b.createdAt) - new Date(a.createdAt);
  }).slice(0, 3);

  return (
    <>
      <TopBar title="Supply"/>
      <div className="screen">
        <CollapsingHero
          eyebrow="Caliber health"
          headline="Supply"
          summary={summary}
          right={
            <div style={{display:'flex', gap:6, alignItems:'center'}}>
              <QuickActionButton onClick={()=>go('addlot')} label="Lot"/>
              <ReorderButton on={reorder} onToggle={()=>setReorder(!reorder)}/>
              <TourButton onClick={()=>window.__rhTour && window.__rhTour('supply')}/>
            </div>
          }
        />

        <div className="card brass" style={{marginTop:8, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:0}}>
          <div style={{padding:'4px 8px', borderRight:'1px solid var(--border-hairline)'}}>
            <div className="label-md">Total rounds</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:22, color:'var(--fg-1)', letterSpacing:'0.02em', marginTop:2}}>{totalRounds.toLocaleString()}</div>
          </div>
          <div style={{padding:'4px 8px', borderRight:'1px solid var(--border-hairline)'}}>
            <div className="label-md">Burn / wk</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:22, color:'var(--fg-1)', letterSpacing:'0.02em', marginTop:2}}>—</div>
          </div>
          <div style={{padding:'4px 8px'}}>
            <div className="label-md">Spend YTD</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:22, color:'var(--fg-1)', letterSpacing:'0.02em', marginTop:2}}>—</div>
          </div>
        </div>

        <ReorderableSections
          editMode={reorder}
          onExit={(action)=>setReorder(action==='open' ? true : false)}
          defaultOrder={['calibers','restocks']}
          sectionLabels={{
            calibers:'CALIBERS',
            restocks:'RECENT RESTOCKS',
          }}
          renderers={{
            calibers: () => (
              <>
                <LabelRule more="Sort">By caliber · tap to drill in</LabelRule>
                {calibers.map(function(c) {
                  return <CaliberCard key={c.cal} {...c} onClick={()=>go('caliber')}/>;
                })}
              </>
            ),
            restocks: () => (
              <>
                <LabelRule>Recent restocks</LabelRule>
                <div className="card">
                  {recentLots.map(function(lot, i) {
                    var d   = new Date(lot.createdAt);
                    var day = d.getDate().toString();
                    var mon = d.toLocaleString('en-US', {month:'short'});
                    var costStr = lot.costPerRound ? ' · $' + lot.costPerRound.toFixed(2) + '/rd' : '';
                    var use = lot.use.charAt(0).toUpperCase() + lot.use.slice(1);
                    return (
                      <SessionRow
                        key={lot.id || i}
                        d={day}
                        m={mon}
                        title={lot.total + ' × ' + lot.caliber + ' · ' + lot.brand}
                        sub={use + ' · ' + lot.grain + 'gr' + costStr}
                        rounds={'+' + lot.total}
                      />
                    );
                  })}
                </div>
              </>
            ),
          }}
        />

        <div style={{marginTop:14, display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
          <Button variant="secondary" block onClick={()=>go('home')} icon={<X.cart s={14}/>}>Find ammo</Button>
          <Button variant="primary" block onClick={()=>go('addlot')} icon={<X.plus2 s={14}/>}>Add lot</Button>
        </div>
      </div>
    </>
  );
}
function CaliberCard({ cal, qty, par, burn, status, avgCost, onClick }) {
  const weeks = burn ? Math.floor(qty / burn) : '∞';
  const stockPct = Math.round((qty / par) * 100);
  const barPct = Math.min(100, stockPct);
  const overPct = stockPct > 100 ? Math.min(100, stockPct - 100) : 0;
  const stateMap = {
    ok:   { fg:'#A6C293', label:'OK', bar:'#6B8E5A' },
    low:  { fg:'#E5B07E', label:'LOW',     bar:'#C77A3B' },
    crit: { fg:'#E48A82', label:'CRITICAL', bar:'var(--rh-dusty-red)' },
  };
  const s = stateMap[status];
  return (
    <div className="card" style={{marginBottom:8, cursor:'pointer'}} onClick={onClick}>
      {/* Caliber now reads as a section header, not as a competing big number.
          The on-hand count below is the visual hero. */}
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <span className="label-md" style={{color:'var(--rh-bone-500)', letterSpacing:'0.20em', fontSize:9}}>CALIBER</span>
          <span style={{fontFamily:'var(--font-display)', fontSize:18, color:'var(--rh-brass-400)', letterSpacing:'0.04em', lineHeight:1}}>{cal}</span>
          <X.fwd s={12}/>
        </div>
        <StatusPill kind={status==='ok'?'verified':status==='low'?'low':'attention'}>{s.label} · {stockPct}%</StatusPill>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:6, marginTop:12, alignItems:'baseline'}}>
        <div>
          <div style={{fontFamily:'var(--font-display)', fontSize:34, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1, fontVariantNumeric:'tabular-nums'}}>{qty.toLocaleString()}</div>
          <div className="label-md" style={{marginTop:4, fontSize:9}}>On hand</div>
        </div>
        <div>
          <div style={{fontFamily:'var(--font-display)', fontSize:16, color:'var(--rh-bone-300)', letterSpacing:'0.02em', lineHeight:1}}>{par.toLocaleString()}</div>
          <div className="label-md" style={{marginTop:4, fontSize:9}}>Par</div>
        </div>
        <div>
          <div style={{fontFamily:'var(--font-display)', fontSize:16, color: burn ? s.fg : 'var(--rh-bone-300)', letterSpacing:'0.02em', lineHeight:1}}>~{weeks}{typeof weeks==='number' ? 'w' : ''}</div>
          <div className="label-md" style={{marginTop:4, fontSize:9}}>At burn</div>
        </div>
        <div>
          <div style={{fontFamily:'var(--font-display)', fontSize:16, color: avgCost ? 'var(--rh-brass-400)' : 'var(--rh-bone-500)', letterSpacing:'0.02em', lineHeight:1}}>
            {avgCost ? `$${avgCost.toFixed(2)}` : '—'}
          </div>
          <div className="label-md" style={{marginTop:4, fontSize:9}}>{avgCost ? 'Avg /rd' : 'No cost data'}</div>
        </div>
      </div>
      <div style={{height:6, background:'var(--rh-obsidian-500)', marginTop:12, position:'relative'}}>
        <div style={{position:'absolute', inset:'0 auto 0 0', width:`${barPct}%`, background:s.bar}}/>
        {overPct > 0 && (
          <div style={{position:'absolute', inset:`0 auto 0 100%`, width:`${overPct}%`, background:'var(--rh-brass)', opacity:0.6}}/>
        )}
        <div style={{position:'absolute', top:-4, bottom:-4, left:stockPct > 100 ? `${100/Math.max(stockPct,1)*100}%` : '100%', width:1, background:'var(--rh-brass-400)'}}/>
      </div>
      <div style={{display:'flex', justifyContent:'space-between', marginTop:6}}>
        <span className="label-md">Burn {burn}/wk</span>
        <span className="label-md" style={{color:s.fg}}>Tap to drill in →</span>
      </div>
    </div>
  );
}

// ---------- CALIBER DETAIL ----------
// Drill-down view: tap a caliber on Supply, land here. See breakdown by use
// category (training/defensive/match/other), grain weights, and individual lots.
function CaliberDetail({ go }) {
  const [tab, setTab] = React.useState('all');

  // Sample data: 9mm breakdown
  const types = [
    { id:'training',  label:'Training',  qty:1840, cost:0.18, color:'#A6C293' },
    { id:'defensive', label:'Defensive', qty:800,  cost:0.85, color:'#E5B07E' },
    { id:'match',     label:'Match',     qty:200,  cost:1.20, color:'var(--rh-brass-400)' },
  ];

  const lots = [
    { id:1, type:'training',  qty:680,  total:1000, grain:115, brand:'PMC Bronze',         cost:0.20, date:'Mar 28' },
    { id:2, type:'training',  qty:520,  total:500,  grain:115, brand:'Federal Champion',   cost:0.21, date:'Feb 14' },
    { id:3, type:'training',  qty:640,  total:1000, grain:124, brand:'Winchester USA',     cost:0.22, date:'Jan 22' },
    { id:4, type:'defensive', qty:400,  total:500,  grain:124, brand:'Federal HST',        cost:0.95, date:'Mar 02' },
    { id:5, type:'defensive', qty:400,  total:500,  grain:147, brand:'Speer Gold Dot',     cost:0.78, date:'Dec 14' },
    { id:6, type:'match',     qty:200,  total:500,  grain:147, brand:'Federal Syntech',    cost:1.20, date:'Feb 28' },
  ];

  const visible = tab === 'all' ? lots : lots.filter(l => l.type === tab);
  const visibleTypes = tab === 'all' ? types : types.filter(t => t.id === tab);

  // Grain breakdown for the active scope — includes weighted avg cost per grain
  const grainStats = {};
  visible.forEach(l => {
    if (!grainStats[l.grain]) grainStats[l.grain] = { qty: 0, weightedCost: 0 };
    grainStats[l.grain].qty += l.qty;
    grainStats[l.grain].weightedCost += l.qty * l.cost;
  });

  return (
    <>
      <TopBar title="9mm"/>
      <div className="screen">
        <BackRow to="supply" label="Supply" go={go}/>

        <CollapsingHero
          eyebrow="Caliber detail"
          headline="9mm"
          summary="2,840 rounds · 6 lots · weighted avg $0.36/rd"
        />

        {/* Top-level caliber summary card */}
        <div className="card brass" style={{marginTop:4, padding:14}}>
          <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:8, alignItems:'baseline'}}>
            <div>
              <div style={{fontFamily:'var(--font-display)', fontSize:36, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1, fontVariantNumeric:'tabular-nums'}}>2,840</div>
              <div className="label-md" style={{marginTop:4}}>Rounds on hand</div>
            </div>
            <div>
              <div style={{fontFamily:'var(--font-display)', fontSize:20, color:'#A6C293', letterSpacing:'0.02em', lineHeight:1}}>~6.5mo</div>
              <div className="label-md" style={{marginTop:4}}>Runway</div>
            </div>
            <div>
              <div style={{fontFamily:'var(--font-display)', fontSize:20, color:'var(--rh-bone-300)', letterSpacing:'0.02em', lineHeight:1}}>$0.36</div>
              <div className="label-md" style={{marginTop:4}}>Avg /rd</div>
            </div>
          </div>
        </div>

        {/* Type tabs */}
        <div className="top-tabs">
          {[
            {id:'all',       label:'All',       dot:'var(--rh-brass)'},
            {id:'training',  label:'Training',  dot:'#A6C293'},
            {id:'defensive', label:'Defensive', dot:'#E5B07E'},
            {id:'match',     label:'Match',     dot:'var(--rh-brass-400)'},
          ].map(t => (
            <div key={t.id} className={`t ${tab===t.id?'on':''}`} onClick={()=>setTab(t.id)}>
              <span className="dot" style={{background:t.dot}}/>
              {t.label}
            </div>
          ))}
        </div>

        {/* Type breakdown (when on "all") */}
        {tab==='all' && (
          <>
            <LabelRule>By use category</LabelRule>
            {types.map(t => (
              <div key={t.id} className="card" style={{marginBottom:8, cursor:'pointer'}} onClick={()=>setTab(t.id)}>
                <div style={{display:'grid', gridTemplateColumns:'1fr auto auto', gap:10, alignItems:'baseline'}}>
                  <div>
                    <div style={{display:'flex', alignItems:'baseline', gap:8}}>
                      <span style={{width:8, height:8, borderRadius:'50%', background:t.color, display:'inline-block'}}/>
                      <span style={{fontFamily:'var(--font-display)', fontSize:18, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1}}>{t.label}</span>
                    </div>
                    <div className="label-md" style={{marginTop:4, color:'var(--rh-bone-500)'}}>{Math.round(t.qty/2840*100)}% of caliber · avg ${t.cost.toFixed(2)}/rd</div>
                  </div>
                  <div style={{fontFamily:'var(--font-display)', fontSize:22, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1, fontVariantNumeric:'tabular-nums'}}>{t.qty.toLocaleString()}</div>
                  <X.fwd s={14}/>
                </div>
                <div style={{height:4, background:'var(--rh-obsidian-500)', marginTop:10}}>
                  <div style={{height:'100%', width:`${Math.round(t.qty/2840*100)}%`, background:t.color}}/>
                </div>
              </div>
            ))}
          </>
        )}

        {/* Grain breakdown — quantity + weighted avg cost per grain */}
        <LabelRule>{tab==='all' ? 'Grain breakdown · across all types' : `Grain breakdown · ${tab}`}</LabelRule>
        <div className="card" style={{padding:'4px 12px'}}>
          {Object.entries(grainStats).map(([g, s]) => {
            const avgCost = s.qty > 0 ? (s.weightedCost / s.qty) : 0;
            return (
              <div key={g} style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8, padding:'10px 0', borderBottom:'1px solid var(--border-hairline)', alignItems:'baseline'}}>
                <span style={{fontFamily:'var(--font-display)', fontSize:18, color:'var(--fg-1)', letterSpacing:'0.02em'}}>{g}gr</span>
                <span style={{fontFamily:'var(--font-display)', fontSize:18, color:'var(--rh-bone-300)', letterSpacing:'0.02em', fontVariantNumeric:'tabular-nums', textAlign:'right'}}>{s.qty.toLocaleString()}<span style={{fontFamily:'var(--font-ui)', fontSize:9, letterSpacing:'0.18em', marginLeft:4, color:'var(--rh-bone-500)'}}>RDS</span></span>
                <span style={{fontFamily:'var(--font-display)', fontSize:16, color: avgCost ? 'var(--rh-brass-400)' : 'var(--rh-bone-500)', letterSpacing:'0.02em', textAlign:'right'}}>
                  {avgCost ? `$${avgCost.toFixed(2)}` : '—'}
                  <span style={{fontFamily:'var(--font-ui)', fontSize:9, letterSpacing:'0.18em', marginLeft:4, color:'var(--rh-bone-500)'}}>{avgCost ? '/RD' : 'NO DATA'}</span>
                </span>
              </div>
            );
          })}
        </div>

        {/* Lots */}
        <LabelRule more="Add">Lots · {visible.length}</LabelRule>
        <div style={{display:'flex', flexDirection:'column', gap:8}}>
          {visible.map(lot => <LotRow key={lot.id} lot={lot}/>)}
        </div>

        <div style={{marginTop:16}}>
          <Button variant="primary" block onClick={()=>go('addlot')} icon={<I.plus s={14}/>}>Add a new lot</Button>
        </div>
      </div>
    </>
  );
}

function LotRow({ lot }) {
  const typeColor = lot.type==='training' ? '#A6C293' : lot.type==='defensive' ? '#E5B07E' : 'var(--rh-brass-400)';
  return (
    <div className="card" style={{padding:'12px 14px'}}>
      <div style={{display:'grid', gridTemplateColumns:'1fr auto', gap:10, alignItems:'baseline'}}>
        <div>
          <div style={{fontFamily:'var(--font-display)', fontSize:16, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1}}>{lot.brand}</div>
          <div className="label-md" style={{marginTop:4}}>
            <span style={{color:typeColor}}>{lot.type.toUpperCase()}</span>
            <span style={{color:'var(--rh-bone-500)'}}> · {lot.grain}gr · {lot.date}</span>
          </div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontFamily:'var(--font-display)', fontSize:20, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1, fontVariantNumeric:'tabular-nums'}}>{lot.qty}</div>
          <div className="label-md" style={{marginTop:4, fontSize:8}}>of {lot.total} · ${lot.cost.toFixed(2)}/rd</div>
        </div>
      </div>
      <div style={{height:3, background:'var(--rh-obsidian-500)', marginTop:8}}>
        <div style={{height:'100%', width:`${Math.round(lot.qty/lot.total*100)}%`, background:typeColor}}/>
      </div>
    </div>
  );
}

// ---------- ADD LOT FLOW ----------
function AddLot({ go }) {
  const [caliber, setCaliber] = React.useState('9mm');
  const [type, setType] = React.useState('training');
  const [grain, setGrain] = React.useState('115');
  const [brand, setBrand] = React.useState('');
  const [qty, setQty] = React.useState('');
  const [cost, setCost] = React.useState('');
  const [saving, setSaving] = React.useState(false);

  function handleSave() {
    if (!canSave || saving) return;
    setSaving(true);
    var qtyNum = parseInt(qty) || 0;
    var totalCost = parseFloat(cost) || 0;
    var lot = {
      caliber: caliber,
      use: type,
      grain: grain,
      brand: brand,
      remaining: qtyNum,
      total: qtyNum,
      costPerRound: (totalCost && qtyNum) ? totalCost / qtyNum : null,
      purchaseDate: new Date().toISOString().split('T')[0],
      notes: '',
      createdAt: new Date().toISOString(),
    };
    window.rhDB.saveLot(lot).then(function() { go('supply'); });
  }

  // Grain offerings researched May '26 — most common factory loads per caliber.
  // 12ga uses shot/slug terminology instead of grain.
  const grainOptions = {
    '9mm':         ['115','124','147'],
    '.45 ACP':     ['185','200','230'],
    '.40 S&W':     ['155','165','180'],
    '.380 ACP':    ['90','95','100'],
    '10mm':        ['155','165','180','200'],
    '.357 Mag':    ['125','158'],
    '.38 Special': ['110','125','158'],
    '5.56 / .223': ['55','62','69','77'],
    '.300 BLK':    ['110','125','200','220'],
    '7.62×39':     ['122','123','154'],
    '.308 / 7.62': ['147','168','175'],
    '6.5 Creedmoor':['120','140','143','147'],
    '.30-06':      ['150','165','180'],
    '.22 LR':      ['36','40'],
    '.22 WMR':     ['30','40','50'],
    '.17 HMR':     ['17','20'],
    '12 gauge':    ['00 buck','#4 buck','#7.5 shot','slug'],
    '20 gauge':    ['#3 buck','#7.5 shot','slug'],
  };

  const canSave = caliber && type && grain && brand && qty;

  return (
    <>
      <TopBar title="Add ammo lot"/>
      <div className="screen">
        <BackRow to="supply" label="Supply" go={go}/>
        <CollapsingHero
          eyebrow="Supply · Add lot"
          headline="New lot"
          summary="Categorize at entry · auto-segments into your inventory"
        />

        <LabelRule>Caliber</LabelRule>
        <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
          {Object.keys(grainOptions).map(c => <Pill key={c} on={caliber===c} onClick={()=>{ setCaliber(c); setGrain(grainOptions[c][0]); }}>{c}</Pill>)}
        </div>

        <LabelRule>Use category</LabelRule>
        <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
          {[
            {id:'training',  label:'Training',  color:'#A6C293'},
            {id:'defensive', label:'Defensive', color:'#E5B07E'},
            {id:'match',     label:'Match',     color:'var(--rh-brass-400)'},
            {id:'other',     label:'Other',     color:'var(--rh-bone-500)'},
          ].map(t => <Pill key={t.id} on={type===t.id} onClick={()=>setType(t.id)}>{t.label}</Pill>)}
        </div>

        <LabelRule>Grain</LabelRule>
        <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
          {(grainOptions[caliber]||[]).map(g => <Pill key={g} on={grain===g} onClick={()=>setGrain(g)}>{g}{caliber!=='12ga' && 'gr'}</Pill>)}
        </div>

        <LabelRule>Brand</LabelRule>
        <div className="card">
          <input
            value={brand}
            onChange={e=>setBrand(e.target.value)}
            placeholder="e.g. PMC Bronze, Federal HST, Winchester USA"
            style={{width:'100%', background:'transparent', border:0, color:'var(--fg-1)', padding:'4px 0', fontFamily:'var(--font-display)', fontSize:18, letterSpacing:'0.02em', outline:'none'}}/>
          <div className="label-md" style={{marginTop:4, color:'var(--rh-bone-500)'}}>Autocompletes from your prior entries</div>
        </div>

        <LabelRule>Quantity · Cost</LabelRule>
        <div className="card">
          <div style={{display:'grid', gridTemplateColumns:'1fr auto auto', gap:10, alignItems:'center'}}>
            <span className="label-md">Quantity</span>
            <input type="number" value={qty} onChange={e=>setQty(e.target.value)} placeholder="500"
              style={{width:90, background:'var(--bg-elevated-2)', border:'1px solid var(--border-default)', color:'var(--fg-1)', padding:'8px', borderRadius:2, fontFamily:'var(--font-display)', fontSize:18, textAlign:'center'}}/>
            <span className="label-md">Rounds</span>
          </div>
          <div style={{height:1, background:'var(--border-hairline)', margin:'10px 0'}}/>
          <div style={{display:'grid', gridTemplateColumns:'1fr auto auto', gap:10, alignItems:'center'}}>
            <span className="label-md">Total cost · all-in</span>
            <input type="number" value={cost} onChange={e=>setCost(e.target.value)} placeholder="125.00"
              style={{width:90, background:'var(--bg-elevated-2)', border:'1px solid var(--border-default)', color:'var(--fg-1)', padding:'8px', borderRadius:2, fontFamily:'var(--font-display)', fontSize:18, textAlign:'center'}}/>
            <span className="label-md">USD</span>
          </div>
          {qty && cost && (
            <div style={{display:'flex', justifyContent:'space-between', marginTop:10, paddingTop:10, borderTop:'1px solid var(--border-hairline)'}}>
              <span className="label-md" style={{color:'var(--rh-brass-400)'}}>Cost per round</span>
              <span style={{fontFamily:'var(--font-display)', fontSize:18, color:'var(--rh-brass-400)', letterSpacing:'0.02em'}}>${(parseFloat(cost)/parseFloat(qty)).toFixed(3)}</span>
            </div>
          )}
        </div>

        <div className="rh-body-sm" style={{textAlign:'center', marginTop:12, color:'var(--rh-bone-500)'}}>
          Cost is optional. If left blank, defaults to your last cost for this combo.
        </div>

        <div style={{marginTop:16}}>
          <Button variant="primary" block onClick={handleSave} icon={canSave && !saving ? <I.check s={14}/> : null}>
            {saving ? 'Saving…' : canSave ? 'Save lot' : 'Caliber, type, grain, brand, qty required'}
          </Button>
        </div>
      </div>
    </>
  );
}

// ---------- PROTECT / VAULT ----------
function Protect({ go, emptyMode }) {
  if (emptyMode) return (
    <LockedPillar
      title="Protect"
      sub="The vault stores receipts, NFA paperwork, photos, and permits — all linked to the gear they protect. Add gear and ammo first."
      requirements={[
        { label:'Add your first firearm', onClick:()=>go('addgun') },
        { label:'Add ammo to your supply', onClick:null },
      ]}
      go={go}
    />
  );
  return (
    <>
      <TopBar title="Protect"/>
      <div className="screen">
        <BackRow to="record" label="Record" go={go}/>
        <CollapsingHero
          eyebrow="Documentation vault"
          headline="Protect"
          summary="65% claim-ready · 2 gaps · $11,840 covered"
          right={
            <div style={{display:'flex', gap:6, alignItems:'center'}}>
              <QuickActionButton onClick={()=>go('protect')} label="Doc"/>
              <TourButton onClick={()=>window.__rhTour && window.__rhTour('protect')}/>
            </div>
          }
        />

        <div className="card brass" style={{marginTop:8, display:'flex', alignItems:'center', gap:14}}>
          <SegRing size={96} segments={20} filled={13} color="var(--rh-dusty-red)">
            <div style={{fontFamily:'var(--font-display)', fontSize:24, color:'var(--fg-1)', letterSpacing:'0.02em', lineHeight:1}}>65<span style={{fontSize:12}}>%</span></div>
            <div className="label-md" style={{fontSize:8, marginTop:4}}>Claim-ready</div>
          </SegRing>
          <div style={{flex:1}}>
            <div style={{fontFamily:'var(--font-display)', fontSize:18, color:'var(--fg-1)', letterSpacing:'0.02em'}}>Close the gaps</div>
            <div className="rh-body-sm" style={{marginTop:4}}>Missing: 1 receipt, 1 NFA Form 4. ~10 min to claim-ready.</div>
            <div style={{marginTop:8}}><Button variant="secondary">Resolve →</Button></div>
          </div>
        </div>

        <LabelRule>Insurance</LabelRule>
        <div className="card">
          <div style={{display:'flex', justifyContent:'space-between', padding:'8px 0'}}>
            <div>
              <div style={{fontFamily:'var(--font-display)', fontSize:16, color:'var(--fg-1)', letterSpacing:'0.02em'}}>USCCA · Schedule A</div>
              <div className="label-md" style={{marginTop:3}}>Scheduled · Replacement $11,840</div>
            </div>
            <StatusPill kind="verified">CURRENT</StatusPill>
          </div>
          <div style={{height:1, background:'var(--border-hairline)', margin:'4px 0'}}/>
          <div style={{display:'flex', justifyContent:'space-between', padding:'8px 0'}}>
            <div>
              <div style={{fontFamily:'var(--font-display)', fontSize:16, color:'var(--fg-1)', letterSpacing:'0.02em'}}>Renewal</div>
              <div className="label-md" style={{marginTop:3}}>Oct 14 · 178 days</div>
            </div>
            <span style={{fontFamily:'var(--font-display)', fontSize:16, color:'var(--rh-brass-400)', letterSpacing:'0.02em'}}>$184/yr</span>
          </div>
        </div>

        <LabelRule>NFA & permits</LabelRule>
        <div className="card">
          <DocRow label="Form 4 · SilencerCo Omega" v="Approved" tone="ok"/>
          <DocRow label="Form 4 · Suppressor #2" v="In progress · 312d" tone="due"/>
          <DocRow label="CCW · CA · Resident" v="Exp Mar '26" tone="ok"/>
        </div>

        <LabelRule>Vault inventory</LabelRule>
        <div className="vault-grid">
          {[
            {n:'Glock 19', s:'ABXY1234', t:'ok'},
            {n:'P365 XL', s:'BBCC9988', t:'ok'},
            {n:'11.5″ AR', s:'AR-CSTM-01', t:'ok'},
            {n:'10/22', s:'RGR-44321', t:'ok'},
            {n:'92FS', s:'BR-77123', t:'low'},
          ].map(it => (
            <div key={it.s} className={`vault-tile ${it.t}`}>
              <div className="thumb">{it.n.split(' ')[0]}</div>
              <div className="name">{it.n}</div>
              <div className="serial">{it.s}</div>
              {it.t==='low' && <div className="warn">Receipt missing</div>}
            </div>
          ))}
        </div>

        <LabelRule>Documents</LabelRule>
        <div className="card">
          <DocRow label="Serial photos" v="5 / 5" tone="ok"/>
          <DocRow label="Purchase receipts" v="4 / 5" tone="due"/>
          <DocRow label="Insurance schedule" v="Updated 14d" tone="ok"/>
          <DocRow label="Estate / Trust" v="Not set" tone="low"/>
        </div>

        <div style={{marginTop:14, display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
          <Button variant="secondary" block icon={<X.upload s={14}/>}>Export claim packet</Button>
          <Button variant="primary" block icon={<X.plus2 s={14}/>}>Add document</Button>
        </div>
      </div>
    </>
  );
}

window.Maintain = Maintain;
window.Supply = Supply;
window.Protect = Protect;
window.CaliberDetail = CaliberDetail;
window.AddLot = AddLot;