// Medium-fi placeholder pages for the remaining medicine + purchasing sections.
const { MED: M2, MEDICINES: MEDS2, CABINET: C2, REGIMENS: REG2, STORES: ST2, PRICES: PR2, PURCHASES: PU2, ACTIVITY: AC2 } = window.MESHI;

// ---- Library ----
const LibraryPage = () => {
  const [q, setQ] = useState('');
  const rows = MEDS2.filter(m => m.name.toLowerCase().includes(q.toLowerCase()));
  return (
    <div className="mt-page">
      <div className="sub-toolbar">
        <div className="cab-filters__search" style={{flex:1, maxWidth: 320}}>
          <Icon name="search" size={13}/>
          <input placeholder="Search medicines…" value={q} onChange={e=>setQ(e.target.value)} style={{width:'100%'}}/>
        </div>
        <div style={{display:'flex', gap: 8}}>
          <button className="mt-btn mt-btn--ghost">All categories <Icon name="chevDown" size={12}/></button>
          <button className="mt-btn mt-btn--ghost">All forms <Icon name="chevDown" size={12}/></button>
          <button className="mt-btn mt-btn--primary"><Icon name="plus" size={12}/> Add medicine</button>
        </div>
      </div>
      <div className="mt-card" style={{overflow:'hidden'}}>
        {rows.map((m, i) => (
          <div key={m.id} className="lib-row">
            <div className="cab-card__swatch cab-card__swatch--sm" style={{'--c':'var(--viz-'+m.color+')'}}>
              <Icon name={m.form === 'Injection' ? 'injection' : m.form === 'Capsule' ? 'capsule' : 'pill'} size={12}/>
            </div>
            <div style={{flex:1}}>
              <div style={{fontWeight:500, fontSize:13, color:'var(--ink-strong)'}}>{m.name}</div>
              <div style={{fontSize:11, color:'var(--ink-muted)'}}>{m.strength} · {m.form}</div>
            </div>
            <span className={'mt-pill mt-pill--' + (m.category === 'Prescription' ? 'info' : 'ghost')}>{m.category}</span>
            <button className="mt-btn mt-btn--subtle"><Icon name="edit" size={12}/></button>
            <button className="mt-btn mt-btn--subtle"><Icon name="trash" size={12}/></button>
          </div>
        ))}
      </div>
    </div>
  );
};

// ---- Regimens ----
const RegimensPage = () => (
  <div className="mt-page">
    <div className="sub-toolbar">
      <div style={{display:'flex', gap:8}}>
        <button className="mt-btn mt-btn--ghost">All regimens <Icon name="chevDown" size={12}/></button>
        <button className="mt-btn mt-btn--ghost"><Icon name="trend" size={12}/> Burn rate</button>
      </div>
      <button className="mt-btn mt-btn--primary"><Icon name="plus" size={12}/> New regimen</button>
    </div>
    <div className="mt-col">
      {REG2.map(r => (
        <div key={r.id} className="mt-card" style={{padding: 18}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap: 16}}>
            <div>
              <div style={{display:'flex', alignItems:'center', gap: 8, marginBottom: 4}}>
                <span style={{fontFamily:'var(--font-display)', fontSize: 18, fontWeight: 500, color:'var(--ink-strong)'}}>Aeri's {r.name}</span>
                <span className="mt-pill mt-pill--ok">Active</span>
              </div>
              <div style={{fontSize:12, color:'var(--ink-muted)'}}>{r.items.length} medication{r.items.length>1?'s':''} · {r.time} · {r.freq}</div>
            </div>
            <div style={{display:'flex', gap: 6}}>
              <button className="mt-btn mt-btn--ghost">Deactivate</button>
              <button className="mt-btn mt-btn--subtle"><Icon name="edit" size={12}/></button>
              <button className="mt-btn mt-btn--subtle"><Icon name="trash" size={12}/></button>
            </div>
          </div>
          <div style={{display:'flex', flexWrap:'wrap', gap: 6, marginTop: 14}}>
            {r.items.map(it => {
              const m = M2[it.medId];
              return (
                <span key={it.medId} className="mt-pill mt-pill--outline" style={{padding: '4px 10px', fontSize: 11}}>
                  <span style={{background:'var(--viz-'+m.color+')', width:6, height:6, borderRadius:3, display:'inline-block', marginRight: 4}}/>
                  <strong style={{fontWeight: 500, color:'var(--ink-strong)'}}>{m.name}</strong>
                  <span style={{marginLeft:4, color:'var(--ink-muted)'}}>{it.qty} {it.unit}</span>
                </span>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ---- Organizer ----
const OrganizerPage = () => {
  const [regimenId, setRegimenId] = useState(REG2[1].id);
  const [days, setDays] = useState(7);
  const regimen = REG2.find(r => r.id === regimenId);

  // Compute inventory impact: for each item in regimen, how many units will be consumed?
  const impact = regimen.items.map(it => {
    const m = M2[it.medId];
    const cabEntry = C2.find(c => c.medId === it.medId);
    const onHand = cabEntry ? cabEntry.qty : 0;
    const needed = it.qty * days;
    const after = onHand - needed;
    const perDay = cabEntry ? (cabEntry.perDose || 1) / (cabEntry.daysPerUnit || 1) : 1;
    const daysAfter = perDay > 0 ? Math.floor(Math.max(0, after) / perDay) : 0;
    const status = after < 0 ? 'short' : after < needed * 0.5 ? 'low' : 'ok';
    return { m, it, onHand, needed, after, daysAfter, status, cabEntry };
  });

  const anyShort = impact.some(i => i.status === 'short');
  const anyLow = impact.some(i => i.status === 'low');

  return (
    <div className="mt-page">
      <div className="org-hero">
        <div className="org-hero__controls">
          <div>
            <div style={{fontSize:10, color:'var(--ink-faint)', textTransform:'uppercase', letterSpacing:'.08em', fontWeight:500}}>Fill from regimen</div>
            <select className="org-hero__select" value={regimenId} onChange={e => setRegimenId(e.target.value)}>
              {REG2.map(r => <option key={r.id} value={r.id}>Aeri's {r.name}</option>)}
            </select>
            <div style={{fontSize:12, color:'var(--ink-muted)', marginTop: 4}}>{regimen.time} · {regimen.items.length} medicines · {regimen.freq}</div>
          </div>
          <div className="org-hero__divider"/>
          <div>
            <div style={{fontSize:10, color:'var(--ink-faint)', textTransform:'uppercase', letterSpacing:'.08em', fontWeight:500, marginBottom:8}}>Days to fill</div>
            <div className="org-hero__stepper">
              <button onClick={() => setDays(Math.max(1, days - 1))}>−</button>
              <span className="num">{days}</span>
              <button onClick={() => setDays(Math.min(30, days + 1))}>+</button>
            </div>
            <div className="org-hero__presets">
              {[3, 7, 14, 30].map(d => (
                <button key={d} className={'org-hero__preset' + (days === d ? ' is-active' : '')} onClick={() => setDays(d)}>{d}d</button>
              ))}
            </div>
          </div>
        </div>
        <div className="org-hero__summary">
          <div className="org-hero__sumRow">
            <div style={{fontSize:10, color:'var(--ink-faint)', textTransform:'uppercase', letterSpacing:'.08em', fontWeight:500}}>This fill will dispense</div>
            <div style={{fontSize: 22, fontWeight: 600, color:'var(--ink-strong)', letterSpacing:'-0.01em'}} className="num">
              {impact.reduce((a,b) => a + b.needed, 0)} <span style={{fontSize:13, fontWeight:400, color:'var(--ink-muted)'}}>units across {impact.length} medicines</span>
            </div>
          </div>
          {anyShort ? (
            <div className="org-alert org-alert--danger">
              <Icon name="alert" size={14}/>
              <div>
                <strong>Not enough stock.</strong> {impact.filter(i => i.status === 'short').length} medicine{impact.filter(i => i.status === 'short').length > 1 ? 's are' : ' is'} short for this fill.
              </div>
              <button className="mt-btn mt-btn--primary">Add to shopping list</button>
            </div>
          ) : anyLow ? (
            <div className="org-alert org-alert--warn">
              <Icon name="alert" size={14}/>
              <div><strong>Low after fill.</strong> Some meds will drop below 50% headroom.</div>
            </div>
          ) : (
            <div className="org-alert org-alert--ok">
              <Icon name="check" size={14}/>
              <div><strong>Ready to dispense.</strong> Cabinet has enough stock with comfortable headroom.</div>
            </div>
          )}
          <div style={{display:'flex', gap: 8}}>
            <button className="mt-btn mt-btn--primary" disabled={anyShort}><Icon name="zap" size={12}/> Dispense {days}-day fill</button>
            <button className="mt-btn mt-btn--ghost">Print label</button>
            <div style={{flex:1}}/>
            <button className="mt-btn mt-btn--ghost">Fill history</button>
          </div>
        </div>
      </div>

      {/* Inventory impact table */}
      <div className="mt-card" style={{marginTop: 16}}>
        <div className="mt-card__head">
          <div>
            <div className="mt-card__title">Inventory impact</div>
            <div className="mt-card__sub">What this fill will take from the cabinet</div>
          </div>
        </div>
        <div className="org-impact">
          <div className="org-impact__head">
            <div>Medicine</div>
            <div style={{textAlign:'right'}}>On hand</div>
            <div style={{textAlign:'right'}}>Needed</div>
            <div>After fill</div>
            <div style={{textAlign:'right'}}>Days left</div>
          </div>
          {impact.map(row => {
            const m = row.m;
            const pct = row.onHand > 0 ? Math.max(0, Math.min(100, (row.after / row.onHand) * 100)) : 0;
            return (
              <div key={m.id} className={'org-impact__row org-impact__row--' + row.status}>
                <div style={{display:'flex', alignItems:'center', gap: 10}}>
                  <div className="cab-card__swatch cab-card__swatch--sm" style={{'--c':'var(--viz-'+m.color+')'}}>
                    <Icon name={m.form === 'Injection' ? 'injection' : m.form === 'Capsule' ? 'capsule' : 'pill'} size={12}/>
                  </div>
                  <div>
                    <div style={{fontWeight:500, fontSize:13, color:'var(--ink-strong)'}}>{m.name}</div>
                    <div style={{fontSize:11, color:'var(--ink-muted)'}}>{row.it.qty} × {days} days = {row.needed} {m.form.toLowerCase()}</div>
                  </div>
                </div>
                <div style={{textAlign:'right'}}><span className="num" style={{fontSize:14, fontWeight:600}}>{row.onHand}</span></div>
                <div style={{textAlign:'right'}}><span className="num" style={{fontSize:14, color:'var(--ink-muted)'}}>−{row.needed}</span></div>
                <div style={{display:'flex', alignItems:'center', gap: 8}}>
                  <div className="org-impact__bar">
                    <div className="org-impact__barBg"/>
                    <div className="org-impact__barFill" style={{width: Math.max(0, pct) + '%', background: row.status === 'short' ? 'var(--danger)' : row.status === 'low' ? 'var(--warn)' : 'var(--ok)'}}/>
                  </div>
                  <span className="num" style={{fontSize:13, fontWeight:600, color: row.after < 0 ? 'var(--danger)' : 'var(--ink-strong)', minWidth: 38, textAlign:'right'}}>{row.after < 0 ? row.after : row.after}</span>
                </div>
                <div style={{textAlign:'right'}}>
                  {row.status === 'short'
                    ? <span className="mt-pill mt-pill--danger">Short</span>
                    : <span className="num" style={{fontSize:13, color: row.status === 'low' ? 'var(--warn)' : 'var(--ink-muted)'}}>{row.daysAfter}d</span>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ---- Activity ----
const ActivityPage = () => {
  const { SPENDING } = window.MESHI;
  return (
    <div className="mt-page">
      <div className="mt-card" style={{marginBottom: 16}}>
        <div className="mt-card__head">
          <div>
            <div className="mt-card__title">Spending summary</div>
            <div className="mt-card__sub">Last 6 months</div>
          </div>
          <div className="mt-row" style={{gap:6}}>
            <button className="mt-btn mt-btn--ghost">This year <Icon name="chevDown" size={12}/></button>
            <button className="mt-btn mt-btn--ghost">All medicines <Icon name="chevDown" size={12}/></button>
          </div>
        </div>
        <div style={{padding:'18px', display:'grid', gridTemplateColumns:'2fr 1fr', gap: 20}}>
          <svg viewBox="0 0 360 180" width="100%" height="180">
            {SPENDING.map((s, i) => {
              const max = Math.max(...SPENDING.map(x=>x.amount));
              const h = (s.amount / max) * 140;
              const x = 20 + i * 56;
              return (
                <g key={s.month}>
                  <rect x={x} y={160 - h} width="36" height={h} rx="3" fill="var(--brand)" opacity={0.3 + (i/SPENDING.length)*0.7}/>
                  <text x={x+18} y="175" textAnchor="middle" fontSize="9" fill="var(--ink-faint)">{s.month.slice(5)}</text>
                </g>
              );
            })}
          </svg>
          <div className="mt-col">
            <div><div style={{fontSize:10, color:'var(--ink-faint)', textTransform:'uppercase', letterSpacing:'.06em'}}>Total spent</div><div style={{fontFamily:'var(--font-display)', fontSize:28, fontWeight:500, color:'var(--ink-strong)'}} className="num">{fmtJPY(SPENDING.reduce((a,b)=>a+b.amount,0))}</div></div>
            <div><div style={{fontSize:10, color:'var(--ink-faint)', textTransform:'uppercase', letterSpacing:'.06em'}}>Monthly average</div><div className="num" style={{fontSize:18, fontWeight:500}}>{fmtJPY(Math.round(SPENDING.reduce((a,b)=>a+b.amount,0)/SPENDING.length))}</div></div>
            <div><div style={{fontSize:10, color:'var(--ink-faint)', textTransform:'uppercase', letterSpacing:'.06em'}}>Top medicine</div><div style={{fontSize:14, fontWeight:500}}>Semaglutide <span className="num" style={{color:'var(--ink-muted)'}}>{fmtJPY(56062)}</span></div></div>
          </div>
        </div>
      </div>

      <div className="mt-card">
        <div className="mt-card__head">
          <div>
            <div className="mt-card__title">Cabinet activity</div>
            <div className="mt-card__sub">{AC2.length} events</div>
          </div>
          <div className="mt-row" style={{gap:6}}>
            <button className="mt-btn mt-btn--ghost">All types <Icon name="chevDown" size={12}/></button>
            <button className="mt-btn mt-btn--ghost">All medicines <Icon name="chevDown" size={12}/></button>
          </div>
        </div>
        <div style={{padding:'4px 18px 16px'}}>
          {AC2.map(a => {
            const m = M2[a.medId];
            return (
              <div key={a.id} className="act-row">
                <span className="act-rail"><span className={'act-dot act-dot--'+a.type}/></span>
                <span className={'mt-pill mt-pill--' + (a.type==='consumed'?'info':a.type==='added'?'ok':'warn')} style={{minWidth: 76, justifyContent:'center'}}>{a.type}</span>
                <strong style={{fontSize:13, fontWeight:500, color:'var(--ink-strong)'}}>{m.name}</strong>
                <span className="num" style={{color: a.delta < 0 ? 'var(--ink-muted)' : 'var(--ok)', fontSize: 13, fontWeight:500}}>{a.delta > 0?'+':''}{a.delta}</span>
                <span className="num" style={{color:'var(--ink-faint)', fontSize:12}}>{a.before}→{a.after}</span>
                <span style={{flex:1}}/>
                <span className="mono" style={{fontSize:11, color:'var(--ink-muted)'}}>{a.at}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ---- Stores ----
const StoresPage = () => (
  <div className="mt-page">
    <div className="sub-toolbar">
      <div style={{display:'flex', gap:8, alignItems:'center'}}>
        <div className="cab-filters__search"><Icon name="search" size={13}/><input placeholder="Search stores…"/></div>
        <button className="mt-btn mt-btn--ghost">All tags <Icon name="chevDown" size={12}/></button>
        <label style={{display:'flex', gap:6, alignItems:'center', fontSize:12, color:'var(--ink-muted)'}}><input type="checkbox"/> Show inactive</label>
      </div>
      <button className="mt-btn mt-btn--primary"><Icon name="plus" size={12}/> Add store</button>
    </div>
    <div className="mt-grid" style={{gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))'}}>
      {ST2.map(s => (
        <div key={s.id} className="mt-card" style={{padding: 16}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
            <div>
              <div style={{fontWeight:500, fontSize:14, color:'var(--ink-strong)'}}>{s.name}</div>
              <div style={{fontSize:11, color:'var(--brand)', marginTop:2}}>{s.url}</div>
            </div>
            <div style={{display:'flex', gap:4}}>
              <button className="mt-btn mt-btn--subtle"><Icon name="edit" size={12}/></button>
            </div>
          </div>
          <div style={{display:'flex', flexWrap:'wrap', gap: 4, marginTop: 10}}>
            {s.tags.map(t => <span key={t} className="mt-pill mt-pill--ghost" style={{fontSize:10}}>{t}</span>)}
          </div>
          <div className="mt-divider"/>
          <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--ink-muted)'}}>
            <span>{PR2.filter(p=>p.store===s.id).length} prices tracked</span>
            <span>{PU2.filter(p=>p.store===s.id).length} orders</span>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ---- Prices ----
const PricesPage = () => (
  <div className="mt-page">
    <div className="sub-toolbar">
      <div style={{display:'flex', gap: 8}}>
        <button className="mt-btn mt-btn--ghost">Semaglutide (14mg) <Icon name="chevDown" size={12}/></button>
        <button className="mt-btn mt-btn--ghost">All stores <Icon name="chevDown" size={12}/></button>
      </div>
      <button className="mt-btn mt-btn--primary"><Icon name="plus" size={12}/> Record price</button>
    </div>

    <div className="mt-card" style={{marginBottom: 16}}>
      <div className="mt-card__head"><div><div className="mt-card__title">Store comparison</div><div className="mt-card__sub">Best price highlighted</div></div></div>
      <div className="prices-table">
        <div className="prices-table__head">
          <div>Store</div><div className="num">Price</div><div className="num">Per unit</div><div>Date</div>
        </div>
        {PR2.filter(p=>p.medId==='semaglutide').map(p => {
          const s = ST2.find(s=>s.id===p.store);
          const isBest = p.price/p.pkg === Math.min(...PR2.filter(x=>x.medId===p.medId).map(x=>x.price/x.pkg));
          return (
            <div key={p.store+p.date} className={'prices-table__row' + (isBest?' is-best':'')}>
              <div style={{display:'flex', alignItems:'center', gap:8}}>
                <span style={{fontWeight:500}}>{s?.name}</span>
                {isBest && <span className="mt-pill mt-pill--ok" style={{fontSize:10}}>Cheapest</span>}
              </div>
              <div className="num">{fmtJPY(p.price)}</div>
              <div className="num" style={{color:'var(--ink-muted)'}}>{fmtJPY(Math.round(p.price/p.pkg))}</div>
              <div className="num" style={{color:'var(--ink-muted)'}}>{p.date}</div>
            </div>
          );
        })}
      </div>
    </div>

    <div className="mt-card">
      <div className="mt-card__head"><div><div className="mt-card__title">All price records</div><div className="mt-card__sub">{PR2.length} entries</div></div></div>
      <div className="prices-table">
        <div className="prices-table__head" style={{gridTemplateColumns:'1.5fr 1fr 0.7fr 0.8fr 0.8fr 0.8fr'}}>
          <div>Medicine</div><div>Store</div><div className="num">Qty</div><div className="num">Price</div><div className="num">Per unit</div><div>Date</div>
        </div>
        {PR2.map(p => {
          const s = ST2.find(s=>s.id===p.store);
          const m = M2[p.medId];
          return (
            <div key={p.medId+p.store+p.date} className="prices-table__row" style={{gridTemplateColumns:'1.5fr 1fr 0.7fr 0.8fr 0.8fr 0.8fr'}}>
              <div style={{fontWeight:500}}>{m.name}</div>
              <div>{s?.name}</div>
              <div className="num">{p.pkg} {p.unit}</div>
              <div className="num">{fmtJPY(p.price)}</div>
              <div className="num" style={{color:'var(--ink-muted)'}}>{fmtJPY(Math.round(p.price/p.pkg))}</div>
              <div className="num" style={{color:'var(--ink-muted)'}}>{p.date}</div>
            </div>
          );
        })}
      </div>
    </div>
  </div>
);

// ---- Refills ----
const RefillsPage = () => {
  const low = C2.map(r => ({r, s: cabinetStatus(r)})).filter(x => x.s.level !== 'ok');
  return (
    <div className="mt-page">
      <div className="mt-card" style={{marginBottom: 16}}>
        <div className="mt-card__head">
          <div>
            <div className="mt-card__title">Refill alerts</div>
            <div className="mt-card__sub">Threshold: 14 days</div>
          </div>
          <button className="mt-btn mt-btn--primary"><Icon name="plus" size={12}/> Generate refill list</button>
        </div>
        <div style={{padding:'4px 18px 16px'}}>
          {low.map(({r, s}) => {
            const m = M2[r.medId];
            const bestPrice = PR2.filter(p=>p.medId===r.medId).sort((a,b)=> a.price/a.pkg - b.price/b.pkg)[0];
            const bestStore = bestPrice && ST2.find(st=>st.id===bestPrice.store);
            return (
              <div key={r.medId} className="refill-row">
                <div className="cab-card__swatch cab-card__swatch--sm" style={{'--c':'var(--viz-'+m.color+')'}}>
                  <Icon name={m.form === 'Injection' ? 'injection' : m.form === 'Capsule' ? 'capsule' : 'pill'} size={12}/>
                </div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:500, color:'var(--ink-strong)'}}>{m.name} <span style={{color:'var(--ink-muted)', fontWeight:400}}>{m.strength}</span></div>
                  <div style={{fontSize:11, color: s.level==='critical' ? 'var(--danger)':'var(--warn)', fontWeight:500}}>{s.days} days left · {r.qty} {r.unit} in cabinet</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div style={{fontSize:11, color:'var(--ink-faint)'}}>Suggested</div>
                  <div className="num" style={{fontWeight:500}}>{bestPrice?.pkg || 30} units</div>
                </div>
                <div style={{textAlign:'right', minWidth: 140}}>
                  <div style={{fontSize:11, color:'var(--ink-faint)'}}>Best price</div>
                  <div style={{fontSize:12, fontWeight:500, color:'var(--brand)'}}>{bestStore?.name} · <span className="num">{bestPrice ? fmtJPY(bestPrice.price) : '—'}</span></div>
                </div>
                <button className="mt-btn mt-btn--primary">Add to list</button>
              </div>
            );
          })}
        </div>
      </div>
      <div className="mt-card">
        <div className="mt-card__head">
          <div><div className="mt-card__title">Refill lists</div><div className="mt-card__sub">Create from alerts or start blank</div></div>
          <button className="mt-btn mt-btn--ghost"><Icon name="plus" size={12}/> New list</button>
        </div>
        <div style={{padding:'20px 18px', color:'var(--ink-muted)', fontSize:12, textAlign:'center'}}>No refill lists yet. Create one above or generate from alerts.</div>
      </div>
    </div>
  );
};

// ---- Purchases ----
const PurchasesPage = () => (
  <div className="mt-page">
    <div className="sub-toolbar">
      <div style={{display:'flex', gap:8}}>
        <button className="mt-btn mt-btn--ghost">All statuses <Icon name="chevDown" size={12}/></button>
      </div>
      <button className="mt-btn mt-btn--primary"><Icon name="plus" size={12}/> Record purchase</button>
    </div>
    {['pending', 'received'].map(status => {
      const items = PU2.filter(p => p.status === status);
      if (!items.length) return null;
      return (
        <div key={status} style={{marginBottom: 20}}>
          <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--ink-muted)', fontWeight:600, marginBottom: 8}}>{status === 'pending' ? 'Pending arrival' : 'Received'}</div>
          <div className="mt-col">
            {items.map(p => {
              const s = ST2.find(s => s.id === p.store);
              const total = p.items.reduce((a,i) => a + i.price, 0);
              return (
                <div key={p.id} className="mt-card" style={{padding: 16}}>
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 10}}>
                    <div>
                      <div style={{fontWeight:500, fontSize:14, color:'var(--ink-strong)'}}>{s?.name}</div>
                      <div className="num" style={{fontSize:11, color:'var(--ink-muted)'}}>{p.date}</div>
                    </div>
                    <span className={'mt-pill mt-pill--' + (status==='pending'?'warn':'ok')}>{status}</span>
                  </div>
                  <div style={{display:'flex', flexDirection:'column', gap:6, padding: '10px 0', borderTop:'1px dashed var(--border)'}}>
                    {p.items.map(i => {
                      const m = M2[i.medId];
                      return (
                        <div key={i.medId} style={{display:'flex', justifyContent:'space-between', fontSize:12}}>
                          <span>{m.name}</span>
                          <span style={{color:'var(--ink-muted)'}} className="num">{i.qty} {i.unit} · {fmtJPY(i.price)}</span>
                        </div>
                      );
                    })}
                  </div>
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop: 10, borderTop:'1px solid var(--border)'}}>
                    <div className="num" style={{fontSize:15, fontWeight:600}}>{fmtJPY(total)}</div>
                    {status === 'pending' && <div style={{display:'flex', gap:6}}>
                      <button className="mt-btn mt-btn--primary">Mark as received</button>
                      <button className="mt-btn mt-btn--ghost">Cancel</button>
                    </div>}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      );
    })}
  </div>
);

// ---- Settings ----
const SettingsPage = () => (
  <div className="mt-page" style={{maxWidth: 720}}>
    <div className="mt-card" style={{marginBottom: 16}}>
      <div className="mt-card__head"><div className="mt-card__title">Household</div></div>
      <div style={{padding: 18}}>
        <div className="settings-row"><span>Name</span><span style={{fontWeight:500}}>Red Panda Den</span><button className="mt-btn mt-btn--ghost">Edit</button></div>
        <div className="settings-row"><span>Invite code</span><span className="mono">2496F-7CF</span><button className="mt-btn mt-btn--ghost">Regenerate</button></div>
        <div className="settings-row"><span>Members</span><span>1</span><button className="mt-btn mt-btn--ghost">Invite</button></div>
      </div>
    </div>
    <div className="mt-card" style={{marginBottom: 16}}>
      <div className="mt-card__head"><div className="mt-card__title">Account</div></div>
      <div style={{padding: 18}}>
        <p style={{fontSize:12, color:'var(--ink-muted)'}}>Account settings are managed through Keycloak.</p>
        <button className="mt-btn mt-btn--ghost">Manage Keycloak account</button>
      </div>
    </div>
  </div>
);

Object.assign(window, { LibraryPage, RegimensPage, OrganizerPage, ActivityPage, StoresPage, PricesPage, RefillsPage, PurchasesPage, SettingsPage });
