// Admin screens batch 4 — Doctors & labs, Pharmacists/staff, Settings

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

// ═════════════════════════════════════════════════════════════
// AD-9) DOCTORS & LABS (partners)
// ═════════════════════════════════════════════════════════════
function AdminDoctors() {
  const docs = [
    { name: 'Dr. Priya Mehta', spec: 'General physician', reg: 'KMC-48201', consults: 2140, rating: '4.9', fee: 199, status: 'Online', tone: 'mint', hue: C.blue400 },
    { name: 'Dr. Rohan Iyer', spec: 'Dermatologist', reg: 'KMC-39112', consults: 1612, rating: '4.8', fee: 349, status: 'Online', tone: 'mint', hue: C.rose500 },
    { name: 'Dr. Anjali Rao', spec: 'Pediatrician', reg: 'KMC-51904', consults: 3520, rating: '4.9', fee: 299, status: 'Offline', tone: 'gray', hue: C.mint500 },
    { name: 'Dr. Karan Shah', spec: 'Psychiatrist', reg: 'KMC-44820', consults: 982, rating: '4.7', fee: 499, status: 'On call', tone: 'amber', hue: C.amber500 },
  ];
  const labs = [
    { name: 'PathCare Diagnostics', accred: 'NABL · ISO 15189', tests: 820, tat: '12 hrs', status: 'Active', tone: 'mint' },
    { name: 'MetroLabs', accred: 'NABL', tests: 540, tat: '24 hrs', status: 'Active', tone: 'mint' },
    { name: 'CityHealth Labs', accred: 'NABL', tests: 410, tat: '18 hrs', status: 'Onboarding', tone: 'amber' },
  ];
  return (
    <AdminShell active="doctors" title="Doctors & labs" sub="500+ doctors · 14 partner labs"
      actions={<button style={{ ...Astyles4, 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}/> Add partner</button>}>
      {/* Tabs */}
      <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
        {[{ l: 'Doctors', c: 512, on: true }, { l: 'Partner labs', c: 14, on: false }, { l: 'Pending approval', c: 3, on: false, urgent: true }].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>

      {/* Doctors table */}
      <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden', marginBottom: 16 }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: C.ink50, color: C.ink500, fontSize: 11, fontWeight: 700 }}>
              {['DOCTOR', 'SPECIALTY', 'REG. NO.', 'CONSULTS', 'RATING', 'FEE', 'STATUS', ''].map((h, i) => (
                <th key={i} style={{ padding: '12px 18px', textAlign: 'left', fontWeight: 700, letterSpacing: 0.3 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {docs.map((d, i) => (
              <tr key={i} style={{ borderTop: `1px solid ${C.ink100}` }}>
                <td style={{ padding: '12px 18px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <div style={{ width: 38, height: 38, borderRadius: 19, background: d.hue, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12 }}>{d.name.split(' ').slice(1).map(s => s[0]).join('')}</div>
                    <div style={{ fontWeight: 700 }}>{d.name}</div>
                  </div>
                </td>
                <td style={{ padding: '12px 18px', color: C.ink700 }}>{d.spec}</td>
                <td style={{ padding: '12px 18px' }}><span className="mono" style={{ color: C.ink500 }}>{d.reg}</span></td>
                <td style={{ padding: '12px 18px' }}><span className="mono" style={{ fontWeight: 700 }}>{d.consults.toLocaleString()}</span></td>
                <td style={{ padding: '12px 18px' }}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontWeight: 600 }}><IconStar size={13} style={{ color: C.amber500 }}/>{d.rating}</span></td>
                <td style={{ padding: '12px 18px' }}><span className="mono" style={{ fontWeight: 700 }}>₹{d.fee}</span></td>
                <td style={{ padding: '12px 18px' }}><AdminStatus label={d.status} tone={d.tone}/></td>
                <td style={{ padding: '12px 18px', textAlign: 'right' }}><IconChevR size={16} style={{ color: C.ink300 }}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Labs */}
      <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Partner labs</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {labs.map((l, i) => (
          <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: 44, height: 44, borderRadius: 12, background: C.mint100, color: C.mint500, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconScan size={22}/></div>
              <AdminStatus label={l.status} tone={l.tone}/>
            </div>
            <div style={{ fontSize: 15, fontWeight: 700, marginTop: 12 }}>{l.name}</div>
            <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{l.accred}</div>
            <div style={{ display: 'flex', gap: 20, marginTop: 14, paddingTop: 14, borderTop: `1px solid ${C.ink100}` }}>
              <div>
                <div className="mono" style={{ fontSize: 16, fontWeight: 700 }}>{l.tests}</div>
                <div style={{ fontSize: 10, color: C.ink500 }}>tests offered</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 16, fontWeight: 700 }}>{l.tat}</div>
                <div style={{ fontSize: 10, color: C.ink500 }}>avg TAT</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </AdminShell>
  );
}

// ═════════════════════════════════════════════════════════════
// AD-10) PHARMACISTS / STAFF
// ═════════════════════════════════════════════════════════════
function AdminStaff() {
  const staff = [
    { name: 'Suresh Verma', role: 'Store admin', init: 'SV', reg: '—', shift: 'Full day', verified: 312, status: 'On shift', tone: 'mint', hue: C.blue400 },
    { name: 'Dr. Kavya Reddy', role: 'Lead pharmacist', init: 'KR', reg: 'KSP-22014', shift: '9 AM – 6 PM', verified: 1240, status: 'On shift', tone: 'mint', hue: C.mint500 },
    { name: 'Manish Gupta', role: 'Pharmacist', init: 'MG', reg: 'KSP-30881', shift: '12 PM – 9 PM', verified: 820, status: 'On shift', tone: 'mint', hue: C.amber500 },
    { name: 'Ritu Singh', role: 'Pharmacist', init: 'RS', reg: 'KSP-41200', shift: 'Off today', verified: 640, status: 'Off duty', tone: 'gray', hue: C.rose500 },
    { name: 'Arjun Pillai', role: 'Packing & dispatch', init: 'AP', reg: '—', shift: '8 AM – 5 PM', verified: 0, status: 'On shift', tone: 'mint', hue: C.navy700 },
  ];
  return (
    <AdminShell active="staff" title="Pharmacists & staff" sub="5 members · 4 on shift now"
      actions={<button style={{ ...Astyles4, 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}/> Invite member</button>}>
      {/* Summary */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
        {[
          { l: 'Team members', v: '5', Icon: IconUser, hue: 'blue' },
          { l: 'Licensed pharmacists', v: '3', Icon: IconRx, hue: 'mint' },
          { l: 'Rx verified today', v: '46', Icon: IconCheck, hue: 'amber' },
          { l: 'Avg review time', v: '3m 20s', Icon: IconClock, hue: 'rose' },
        ].map((s, i) => {
          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 p = palettes[s.hue];
          return (
            <div key={i} style={{ background: 'white', borderRadius: 14, padding: 16, border: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 40, height: 40, borderRadius: 11, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><s.Icon size={20}/></div>
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.01 }}>{s.v}</div>
                <div style={{ fontSize: 12, color: C.ink500 }}>{s.l}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Staff 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 }}>
              {['MEMBER', 'ROLE', 'LICENSE', 'SHIFT', 'Rx VERIFIED', 'STATUS', 'PERMISSIONS'].map((h, i) => (
                <th key={i} style={{ padding: '12px 18px', textAlign: 'left', fontWeight: 700, letterSpacing: 0.3 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {staff.map((s, i) => (
              <tr key={i} style={{ borderTop: `1px solid ${C.ink100}` }}>
                <td style={{ padding: '12px 18px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <div style={{ width: 38, height: 38, borderRadius: 19, background: s.hue, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12 }}>{s.init}</div>
                    <div style={{ fontWeight: 700 }}>{s.name}</div>
                  </div>
                </td>
                <td style={{ padding: '12px 18px', color: C.ink700 }}>{s.role}</td>
                <td style={{ padding: '12px 18px' }}><span className="mono" style={{ color: C.ink500 }}>{s.reg}</span></td>
                <td style={{ padding: '12px 18px', color: C.ink700 }}>{s.shift}</td>
                <td style={{ padding: '12px 18px' }}><span className="mono" style={{ fontWeight: 700 }}>{s.verified || '—'}</span></td>
                <td style={{ padding: '12px 18px' }}><AdminStatus label={s.status} tone={s.tone}/></td>
                <td style={{ padding: '12px 18px' }}><span style={{ fontSize: 12, fontWeight: 600, color: C.blue600 }}>Manage →</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AdminShell>
  );
}

// ═════════════════════════════════════════════════════════════
// AD-11) SETTINGS
// ═════════════════════════════════════════════════════════════
function AdminSettings() {
  const Toggle = ({ on }) => (
    <div style={{ width: 44, height: 26, borderRadius: 13, background: on ? C.blue600 : C.ink200, position: 'relative', flexShrink: 0 }}>
      <div style={{ position: 'absolute', top: 2, left: on ? 20 : 2, width: 22, height: 22, borderRadius: 11, background: 'white', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }}/>
    </div>
  );
  return (
    <AdminShell active="settings" title="Settings" sub="Store configuration · Indiranagar">
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 24, maxWidth: 1000 }}>
        {/* Settings nav */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {[
            { l: 'Store profile', Icon: IconLoc, on: true },
            { l: 'Delivery zones', Icon: IconTruck },
            { l: 'Payments & payout', Icon: IconCard },
            { l: 'Taxes & invoicing', Icon: IconBox },
            { l: 'Notifications', Icon: IconBell },
            { l: 'Compliance & license', Icon: IconShield },
            { l: 'API & integrations', Icon: IconFilter },
          ].map((m, i) => (
            <div key={i} style={{ padding: '10px 12px', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10, background: m.on ? C.blue50 : 'transparent', color: m.on ? C.blue600 : C.ink700, fontSize: 13, fontWeight: m.on ? 700 : 500 }}>
              <m.Icon size={18}/> {m.l}
            </div>
          ))}
        </div>

        {/* Settings content */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Store profile */}
          <div style={{ background: 'white', borderRadius: 16, padding: 22, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 15, fontWeight: 700 }}>Store profile</div>
            <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>Public details shown to customers</div>
            <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              {[
                { l: 'STORE NAME', v: 'Janaushadhi · Indiranagar' },
                { l: 'LICENSE NO.', v: 'DL-560038-RX', mono: true },
                { l: 'PHONE', v: '+91 80 4710 2200', mono: true },
                { l: 'GSTIN', v: '29AAACJ1234M1Z9', mono: true },
              ].map((f, i) => (
                <div key={i}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: C.ink500, letterSpacing: 0.3, marginBottom: 6 }}>{f.l}</div>
                  <div style={{ padding: '11px 14px', borderRadius: 10, border: `1px solid ${C.ink200}`, fontSize: 13, fontWeight: 600, fontFamily: f.mono ? 'JetBrains Mono, monospace' : 'inherit' }}>{f.v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 16 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: C.ink500, letterSpacing: 0.3, marginBottom: 6 }}>ADDRESS</div>
              <div style={{ padding: '11px 14px', borderRadius: 10, border: `1px solid ${C.ink200}`, fontSize: 13, color: C.ink700 }}>12, 100ft Road, HAL 2nd Stage, Indiranagar, Bengaluru, Karnataka 560038</div>
            </div>
          </div>

          {/* Operating hours */}
          <div style={{ background: 'white', borderRadius: 16, padding: 22, border: `1px solid ${C.ink100}` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700 }}>Operations</div>
                <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>Delivery and availability controls</div>
              </div>
            </div>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 2 }}>
              {[
                { l: 'Accept new orders', s: 'Store is currently open · 8 AM – 11 PM', on: true },
                { l: 'Express delivery (28 min)', s: 'Within 4 km radius', on: true },
                { l: 'Cash on delivery', s: 'For orders under ₹2,000', on: true },
                { l: 'Auto-assign riders', s: 'Assign nearest available rider on pack', on: true },
                { l: 'Pause Rx-only items', s: 'Hide prescription items when no pharmacist on shift', on: false },
              ].map((r, i, a) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', borderBottom: i < a.length - 1 ? `1px solid ${C.ink100}` : 'none' }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{r.l}</div>
                    <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{r.s}</div>
                  </div>
                  <Toggle on={r.on}/>
                </div>
              ))}
            </div>
          </div>

          {/* Compliance */}
          <div style={{ background: 'white', borderRadius: 16, padding: 22, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 15, fontWeight: 700 }}>Compliance & licenses</div>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { l: 'Drug License (Form 20 & 21)', exp: 'Valid till Mar 2028', tone: 'mint' },
                { l: 'GST registration', exp: 'Active', tone: 'mint' },
                { l: 'Pharmacist registration (KSP)', exp: 'Renew in 42 days', tone: 'amber' },
              ].map((c, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: 10, background: C.ink50 }}>
                  <div style={{ width: 34, height: 34, borderRadius: 9, background: 'white', color: c.tone === 'amber' ? C.amber500 : C.mint500, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconShield size={18}/></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{c.l}</div>
                    <div style={{ fontSize: 11, color: C.ink500 }}>{c.exp}</div>
                  </div>
                  <AdminStatus label={c.tone === 'amber' ? 'Action needed' : 'Verified'} tone={c.tone}/>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 18, display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
              <button style={{ background: 'white', color: C.ink700, border: `1px solid ${C.ink200}`, borderRadius: 10, padding: '10px 18px', fontSize: 13, fontWeight: 700 }}>Cancel</button>
              <button style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 10, padding: '10px 18px', fontSize: 13, fontWeight: 700 }}>Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </AdminShell>
  );
}

Object.assign(window, { AdminDoctors, AdminStaff, AdminSettings });