// Admin screens batch 1 — Dashboard, Orders management, Rx verification queue

const Astyles = { fontFamily: 'Inter, -apple-system, system-ui, sans-serif' };

// Small helper: bar chart
function MiniBars({ data, color = C.blue600, max }) {
  const m = max || Math.max(...data.map(d => d.v));
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 120 }}>
      {data.map((d, i) => (
        <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, height: '100%', justifyContent: 'flex-end' }}>
          <div style={{ width: '100%', borderRadius: '6px 6px 0 0', height: `${(d.v / m) * 100}%`, background: d.hot ? color : C.blue100, minHeight: 4, position: 'relative' }}>
            {d.hot && <div style={{ position: 'absolute', top: -18, left: '50%', transform: 'translateX(-50%)', fontSize: 9, fontWeight: 700, color: C.ink700 }} className="mono">{d.v}</div>}
          </div>
          <div style={{ fontSize: 9, color: C.ink400, fontWeight: 600 }}>{d.l}</div>
        </div>
      ))}
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// AD-1) DASHBOARD
// ═════════════════════════════════════════════════════════════
function AdminDashboard() {
  const kpis = [
    { l: 'Today\u2019s revenue', v: '₹1,84,200', d: '+12.4%', up: true, Icon: IconStar, hue: 'blue' },
    { l: 'Orders today', v: '342', d: '+8.1%', up: true, Icon: IconBox, hue: 'mint' },
    { l: 'Avg order value', v: '₹538', d: '−2.3%', up: false, Icon: IconCart, hue: 'amber' },
    { l: 'Rx pending review', v: '12', d: '3 urgent', up: false, Icon: IconRx, hue: 'rose' },
  ];
  const palettes = { blue: { bg: C.blue50, fg: C.blue600 }, mint: { bg: C.mint100, fg: C.mint500 }, amber: { bg: C.amber100, fg: C.amber500 }, rose: { bg: C.rose100, fg: C.rose500 } };
  const recent = [
    { id: '#JN-2841-09', cust: 'Aarav Kumar', items: 3, amt: 248, status: 'Packing', tone: 'blue', rx: true },
    { id: '#JN-2840-77', cust: 'Meera Shah', items: 1, amt: 95, status: 'Rx review', tone: 'amber', rx: true },
    { id: '#JN-2840-21', cust: 'Rohit Nair', items: 6, amt: 1284, status: 'Out for delivery', tone: 'blue', rx: false },
    { id: '#JN-2839-88', cust: 'Sana Khan', items: 2, amt: 412, status: 'Delivered', tone: 'mint', rx: false },
    { id: '#JN-2839-50', cust: 'Vikram Rao', items: 4, amt: 562, status: 'Delivered', tone: 'mint', rx: true },
  ];
  return (
    <AdminShell active="dashboard" title="Dashboard" sub="Wednesday, 28 May 2026 · Indiranagar store"
      actions={<button style={{ ...Astyles, background: C.blue600, color: 'white', border: 'none', borderRadius: 10, padding: '10px 16px', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 8 }}><IconPlus size={16}/> New order</button>}>
      {/* KPI row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {kpis.map((k, i) => {
          const p = palettes[k.hue];
          return (
            <div key={i} style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ width: 38, height: 38, borderRadius: 11, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><k.Icon size={20}/></div>
                <span style={{ fontSize: 11, fontWeight: 700, color: k.up ? C.mint500 : C.rose500, display: 'flex', alignItems: 'center', gap: 2 }}>
                  {k.up ? '▲' : '▼'} {k.d}
                </span>
              </div>
              <div className="mono" style={{ fontSize: 26, fontWeight: 700, marginTop: 14, letterSpacing: -0.02 }}>{k.v}</div>
              <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>{k.l}</div>
            </div>
          );
        })}
      </div>

      {/* Charts row */}
      <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1.7fr 1fr', gap: 16 }}>
        {/* Revenue chart */}
        <div style={{ background: 'white', borderRadius: 16, padding: 20, border: `1px solid ${C.ink100}` }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700 }}>Revenue · last 7 days</div>
              <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>Total <span className="mono" style={{ color: C.ink900, fontWeight: 700 }}>₹11,84,500</span></div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {['7D', '30D', '90D'].map((t, i) => (
                <div key={t} style={{ padding: '6px 12px', borderRadius: 8, fontSize: 11, fontWeight: 600, background: i === 0 ? C.navy800 : C.ink50, color: i === 0 ? 'white' : C.ink600 }}>{t}</div>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 24 }}>
            <MiniBars data={[
              { l: 'Thu', v: 142 }, { l: 'Fri', v: 168 }, { l: 'Sat', v: 198, hot: true }, { l: 'Sun', v: 184 },
              { l: 'Mon', v: 156 }, { l: 'Tue', v: 172 }, { l: 'Wed', v: 184, hot: true },
            ]}/>
          </div>
        </div>

        {/* Category split */}
        <div style={{ background: 'white', borderRadius: 16, padding: 20, border: `1px solid ${C.ink100}` }}>
          <div style={{ fontSize: 15, fontWeight: 700 }}>Sales by category</div>
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              { l: 'Prescription meds', p: 52, c: C.blue600 },
              { l: 'Wellness & vitamins', p: 23, c: C.mint500 },
              { l: 'Devices', p: 14, c: C.amber500 },
              { l: 'Lab tests', p: 11, c: C.rose500 },
            ].map((r, i) => (
              <div key={i}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 5 }}>
                  <span style={{ color: C.ink700, fontWeight: 600 }}>{r.l}</span>
                  <span className="mono" style={{ fontWeight: 700 }}>{r.p}%</span>
                </div>
                <div style={{ height: 7, background: C.ink100, borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{ width: r.p + '%', height: '100%', background: r.c }}/>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 18, padding: 12, borderRadius: 12, background: C.amber100, display: 'flex', alignItems: 'center', gap: 10 }}>
            <IconScan size={18} style={{ color: C.amber500 }}/>
            <div style={{ fontSize: 11, color: '#7A4500', lineHeight: 1.4 }}><span style={{ fontWeight: 700 }}>7 products</span> low on stock — restock soon</div>
          </div>
        </div>
      </div>

      {/* Recent orders table */}
      <div style={{ marginTop: 16, background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
        <div style={{ padding: '16px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${C.ink100}` }}>
          <div style={{ fontSize: 15, fontWeight: 700 }}>Recent orders</div>
          <span style={{ fontSize: 13, color: C.blue600, fontWeight: 600 }}>View all orders →</span>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: C.ink50, color: C.ink500, fontSize: 11, fontWeight: 700, letterSpacing: 0.3 }}>
              {['ORDER', 'CUSTOMER', 'ITEMS', 'Rx', 'AMOUNT', 'STATUS', ''].map((h, i) => (
                <th key={i} style={{ textAlign: i >= 2 && i <= 4 ? 'left' : 'left', padding: '10px 20px', fontWeight: 700 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {recent.map((o, i) => (
              <tr key={i} style={{ borderTop: `1px solid ${C.ink100}` }}>
                <td style={{ padding: '12px 20px' }}><span className="mono" style={{ fontWeight: 700 }}>{o.id}</span></td>
                <td style={{ padding: '12px 20px', color: C.ink700 }}>{o.cust}</td>
                <td style={{ padding: '12px 20px', color: C.ink500 }} className="mono">{o.items}</td>
                <td style={{ padding: '12px 20px' }}>{o.rx ? <span style={{ color: C.blue600 }}><IconRx size={16}/></span> : <span style={{ color: C.ink300 }}>—</span>}</td>
                <td style={{ padding: '12px 20px' }}><span className="mono" style={{ fontWeight: 700 }}>₹{o.amt}</span></td>
                <td style={{ padding: '12px 20px' }}><AdminStatus label={o.status} tone={o.tone}/></td>
                <td style={{ padding: '12px 20px', textAlign: 'right' }}><IconChevR size={16} style={{ color: C.ink300 }}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AdminShell>
  );
}

// ═════════════════════════════════════════════════════════════
// AD-2) ORDERS MANAGEMENT
// ═════════════════════════════════════════════════════════════
function AdminOrders() {
  const orders = [
    { id: '#JN-2841-09', cust: 'Aarav Kumar', ph: '98••• 12•••', time: '5:42 PM', items: 3, amt: 248, pay: 'UPI', status: 'Packing', tone: 'blue', rx: 'Verified' },
    { id: '#JN-2840-77', cust: 'Meera Shah', ph: '99••• 03•••', time: '5:38 PM', items: 1, amt: 95, pay: 'COD', status: 'Rx review', tone: 'amber', rx: 'Pending' },
    { id: '#JN-2840-21', cust: 'Rohit Nair', ph: '90••• 88•••', time: '5:21 PM', items: 6, amt: 1284, pay: 'Card', status: 'Out for delivery', tone: 'blue', rx: 'N/A' },
    { id: '#JN-2839-88', cust: 'Sana Khan', ph: '70••• 45•••', time: '4:58 PM', items: 2, amt: 412, pay: 'UPI', status: 'Delivered', tone: 'mint', rx: 'N/A' },
    { id: '#JN-2839-50', cust: 'Vikram Rao', ph: '88••• 12•••', time: '4:40 PM', items: 4, amt: 562, pay: 'Wallet', status: 'Delivered', tone: 'mint', rx: 'Verified' },
    { id: '#JN-2839-12', cust: 'Priya Das', ph: '96••• 77•••', time: '4:12 PM', items: 1, amt: 38, pay: 'UPI', status: 'Cancelled', tone: 'rose', rx: 'N/A' },
    { id: '#JN-2838-90', cust: 'Karan Mehta', ph: '93••• 21•••', time: '3:50 PM', items: 3, amt: 329, pay: 'COD', status: 'Delivered', tone: 'mint', rx: 'Verified' },
  ];
  const rxTone = { Verified: 'mint', Pending: 'amber', 'N/A': 'gray' };
  return (
    <AdminShell active="orders" title="Orders" sub="38 active · 304 total today"
      actions={<button style={{ ...Astyles, background: 'white', color: C.ink700, border: `1px solid ${C.ink200}`, borderRadius: 10, padding: '10px 16px', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 8 }}><IconUpload size={16}/> Export</button>}>
      {/* Tabs + filters */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        {[
          { l: 'All', c: 304, on: false },
          { l: 'New', c: 12, on: true },
          { l: 'Rx review', c: 12, on: false, urgent: true },
          { l: 'Packing', c: 8, on: false },
          { l: 'Out for delivery', c: 6, on: false },
          { l: 'Delivered', c: 260, on: false },
          { l: 'Cancelled', c: 6, on: false },
        ].map((t, i) => (
          <div key={i} style={{ padding: '8px 14px', borderRadius: 10, fontSize: 12, fontWeight: 600, background: t.on ? C.navy800 : 'white', color: t.on ? 'white' : C.ink700, border: t.on ? 'none' : `1px solid ${C.ink200}`, display: 'flex', alignItems: 'center', gap: 6 }}>
            {t.l}
            <span className="mono" style={{ fontSize: 10, padding: '1px 6px', borderRadius: 6, background: t.urgent ? C.rose500 : (t.on ? 'rgba(255,255,255,0.25)' : C.ink100), color: t.urgent ? 'white' : (t.on ? 'white' : C.ink500), fontWeight: 700 }}>{t.c}</span>
          </div>
        ))}
        <div style={{ flex: 1 }}/>
        <div style={{ padding: '8px 14px', borderRadius: 10, background: 'white', border: `1px solid ${C.ink200}`, fontSize: 12, fontWeight: 600, color: C.ink700, display: 'flex', alignItems: 'center', gap: 8 }}>
          <IconFilter size={14}/> Filters
        </div>
      </div>

      {/* Table */}
      <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: C.ink50, color: C.ink500, fontSize: 11, fontWeight: 700 }}>
              <th style={{ padding: '12px 20px', textAlign: 'left', width: 36 }}><div style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${C.ink300}` }}/></th>
              {['ORDER', 'CUSTOMER', 'TIME', 'ITEMS', 'PRESCRIPTION', 'PAYMENT', 'AMOUNT', 'STATUS', ''].map((h, i) => (
                <th key={i} style={{ padding: '12px 16px', textAlign: 'left', fontWeight: 700, letterSpacing: 0.3 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {orders.map((o, i) => (
              <tr key={i} style={{ borderTop: `1px solid ${C.ink100}` }}>
                <td style={{ padding: '14px 20px' }}><div style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${C.ink300}` }}/></td>
                <td style={{ padding: '14px 16px' }}><span className="mono" style={{ fontWeight: 700 }}>{o.id}</span></td>
                <td style={{ padding: '14px 16px' }}>
                  <div style={{ fontWeight: 600, color: C.ink900 }}>{o.cust}</div>
                  <div className="mono" style={{ fontSize: 11, color: C.ink400 }}>{o.ph}</div>
                </td>
                <td style={{ padding: '14px 16px', color: C.ink500 }} className="mono">{o.time}</td>
                <td style={{ padding: '14px 16px', color: C.ink500 }} className="mono">{o.items}</td>
                <td style={{ padding: '14px 16px' }}><AdminStatus label={o.rx} tone={rxTone[o.rx]}/></td>
                <td style={{ padding: '14px 16px', color: C.ink700, fontWeight: 600 }}>{o.pay}</td>
                <td style={{ padding: '14px 16px' }}><span className="mono" style={{ fontWeight: 700 }}>₹{o.amt}</span></td>
                <td style={{ padding: '14px 16px' }}><AdminStatus label={o.status} tone={o.tone}/></td>
                <td style={{ padding: '14px 16px', textAlign: 'right' }}>
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke={C.ink400} strokeWidth="2" strokeLinecap="round"><circle cx="6" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="18" cy="12" r="1.2"/></svg>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {/* Footer */}
        <div style={{ padding: '14px 20px', borderTop: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 12, color: C.ink500 }}>Showing 1–7 of 304 orders</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {['‹', '1', '2', '3', '…', '44', '›'].map((p, i) => (
              <div key={i} style={{ minWidth: 30, height: 30, padding: '0 8px', borderRadius: 8, background: p === '1' ? C.blue600 : 'white', color: p === '1' ? 'white' : C.ink700, border: p === '1' ? 'none' : `1px solid ${C.ink200}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600 }}>{p}</div>
            ))}
          </div>
        </div>
      </div>
    </AdminShell>
  );
}

// ═════════════════════════════════════════════════════════════
// AD-3) Rx VERIFICATION QUEUE (pharmacist workflow)
// ═════════════════════════════════════════════════════════════
function AdminRxVerify() {
  const queue = [
    { id: '#JN-2840-77', cust: 'Meera Shah', age: '58 · F', time: '2 min ago', items: 1, active: true, urgent: true },
    { id: '#JN-2840-65', cust: 'Imran Ali', age: '41 · M', time: '6 min ago', items: 3, active: false },
    { id: '#JN-2840-42', cust: 'Lakshmi N', age: '34 · F', time: '11 min ago', items: 2, active: false },
    { id: '#JN-2840-18', cust: 'Deepak Roy', age: '63 · M', time: '18 min ago', items: 4, active: false, urgent: true },
  ];
  return (
    <AdminShell active="rx" title="Prescription verification" sub="12 in queue · avg review time 3m 20s"
      actions={<div style={{ ...Astyles, display: 'flex', alignItems: 'center', gap: 8, padding: '8px 14px', borderRadius: 10, background: C.mint100, color: '#0F5A48', fontSize: 12, fontWeight: 700 }}><span style={{ width: 7, height: 7, borderRadius: 4, background: C.mint500 }}/> You're on shift</div>}>
      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 20, height: '100%' }}>
        {/* Queue list */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: C.ink500, letterSpacing: 0.3 }}>QUEUE · 12 PENDING</div>
          {queue.map((q, i) => (
            <div key={i} style={{ background: q.active ? C.blue25 : 'white', borderRadius: 14, padding: 14, border: q.active ? `2px solid ${C.blue600}` : `1px solid ${C.ink100}` }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span className="mono" style={{ fontSize: 12, fontWeight: 700 }}>{q.id}</span>
                {q.urgent && <span style={{ fontSize: 9, fontWeight: 700, color: 'white', background: C.rose500, padding: '2px 7px', borderRadius: 6 }}>URGENT</span>}
              </div>
              <div style={{ fontSize: 13, fontWeight: 600, marginTop: 6 }}>{q.cust}</div>
              <div style={{ fontSize: 11, color: C.ink500 }}>{q.age} · {q.items} item{q.items > 1 ? 's' : ''}</div>
              <div style={{ fontSize: 10, color: C.ink400, marginTop: 6 }} className="mono">{q.time}</div>
            </div>
          ))}
        </div>

        {/* Detail / review pane */}
        <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          {/* Header */}
          <div style={{ padding: 18, borderBottom: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span className="mono" style={{ fontSize: 16, fontWeight: 700 }}>#JN-2840-77</span>
                <span style={{ fontSize: 9, fontWeight: 700, color: 'white', background: C.rose500, padding: '2px 7px', borderRadius: 6 }}>URGENT</span>
              </div>
              <div style={{ fontSize: 12, color: C.ink500, marginTop: 3 }}>Meera Shah · 58 · F · uploaded 2 min ago</div>
            </div>
            <div style={{ fontSize: 12, color: C.blue600, fontWeight: 600 }}>View patient history →</div>
          </div>

          <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, overflow: 'hidden' }}>
            {/* Rx image */}
            <div style={{ padding: 18, borderRight: `1px solid ${C.ink100}`, display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: C.ink700, marginBottom: 10 }}>Uploaded prescription</div>
              <div style={{ flex: 1, borderRadius: 12, background: C.ink50, border: `1px solid ${C.ink200}`, padding: 18, position: 'relative', minHeight: 280 }}>
                {/* fake Rx doc */}
                <div style={{ background: 'white', borderRadius: 6, padding: 16, height: '100%', boxShadow: '0 2px 8px rgba(11,31,77,0.06)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `2px solid ${C.blue600}`, paddingBottom: 8 }}>
                    <div>
                      <div style={{ height: 8, width: 90, background: C.ink300, borderRadius: 2 }}/>
                      <div style={{ height: 5, width: 60, background: C.ink200, borderRadius: 2, marginTop: 5 }}/>
                    </div>
                    <div style={{ width: 30, height: 30, borderRadius: 6, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconRx size={18}/></div>
                  </div>
                  <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 7 }}>
                    {[80, 60, 90, 50].map((w, i) => (
                      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ width: 5, height: 5, borderRadius: 3, background: C.ink300 }}/>
                        <div style={{ height: 6, width: `${w}%`, background: C.ink200, borderRadius: 2 }}/>
                      </div>
                    ))}
                  </div>
                  <div style={{ marginTop: 18, display: 'flex', justifyContent: 'flex-end' }}>
                    <div style={{ width: 60, height: 18, borderRadius: 3, background: 'transparent', border: `1px dashed ${C.ink300}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, color: C.ink400, fontStyle: 'italic' }}>signed</div>
                  </div>
                </div>
                {/* zoom controls */}
                <div style={{ position: 'absolute', bottom: 26, right: 26, display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{ width: 30, height: 30, borderRadius: 8, background: 'white', boxShadow: '0 2px 6px rgba(11,31,77,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.ink700 }}><IconPlus size={16}/></div>
                  <div style={{ width: 30, height: 30, borderRadius: 8, background: 'white', boxShadow: '0 2px 6px rgba(11,31,77,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.ink700 }}><IconMinus size={16}/></div>
                </div>
              </div>
              <div style={{ marginTop: 10, fontSize: 11, color: C.ink500, display: 'flex', alignItems: 'center', gap: 6 }}>
                <IconShield size={14} style={{ color: C.mint500 }}/> Encrypted · Dr. R. Bhat, Reg. KMC-48201
              </div>
            </div>

            {/* Requested items + decision */}
            <div style={{ padding: 18, display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: C.ink700, marginBottom: 10 }}>Requested items (1)</div>
              <div style={{ background: C.ink50, borderRadius: 12, padding: 12, display: 'flex', gap: 12 }}>
                <ProductPlaceholder hue="blue" w={48} h={48} radius={10}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 700 }}>Azithromycin 500mg</div>
                  <div style={{ fontSize: 11, color: C.ink500 }}>Azithral · 5 tablets · ×1</div>
                  <div style={{ marginTop: 4 }}><AdminStatus label="Schedule H · Rx required" tone="amber"/></div>
                </div>
              </div>

              {/* Checks */}
              <div style={{ fontSize: 12, fontWeight: 700, color: C.ink700, margin: '18px 0 10px' }}>Verification checklist</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  { l: 'Doctor name & registration valid', ok: true },
                  { l: 'Patient name matches account', ok: true },
                  { l: 'Date within 90 days', ok: true },
                  { l: 'Dosage legible & appropriate', ok: true },
                  { l: 'No controlled-substance flags', ok: true },
                ].map((c, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 20, height: 20, borderRadius: 6, background: c.ok ? C.mint500 : 'white', border: c.ok ? 'none' : `1.5px solid ${C.ink200}`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{c.ok && <IconCheck size={13}/>}</div>
                    <span style={{ fontSize: 12, color: C.ink700 }}>{c.l}</span>
                  </div>
                ))}
              </div>

              {/* Note */}
              <div style={{ marginTop: 16, padding: 12, borderRadius: 10, background: C.ink50, border: `1px solid ${C.ink100}`, fontSize: 12, color: C.ink400 }}>
                Add a note for the customer (optional)…
              </div>

              {/* Decision buttons */}
              <div style={{ marginTop: 'auto', paddingTop: 16, display: 'flex', gap: 10 }}>
                <button style={{ flex: 1, background: 'white', color: C.rose500, border: `1.5px solid ${C.rose100}`, borderRadius: 12, padding: '12px 0', fontSize: 13, fontWeight: 700 }}>Reject</button>
                <button style={{ flex: 2, background: C.mint500, color: 'white', border: 'none', borderRadius: 12, padding: '12px 0', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, boxShadow: '0 6px 14px rgba(34,194,154,0.28)' }}>
                  <IconCheck size={16}/> Approve & dispense
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </AdminShell>
  );
}

Object.assign(window, { AdminDashboard, AdminOrders, AdminRxVerify, MiniBars });