// Admin screens batch 2 — Catalog/Inventory, Customers, Promotions

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

// ═════════════════════════════════════════════════════════════
// AD-4) CATALOG / INVENTORY
// ═════════════════════════════════════════════════════════════
function AdminCatalog() {
  const products = [
    { name: 'Metformin SR 500mg', brand: 'Glycomet-SR · USV', sku: '248-12', cat: 'Diabetes', price: 78, stock: 420, rx: true, hue: 'blue', status: 'Active', tone: 'mint' },
    { name: 'Dolo 650', brand: 'Micro Labs', sku: '101-04', cat: 'Pain relief', price: 32, stock: 1240, rx: false, hue: 'mint', status: 'Active', tone: 'mint' },
    { name: 'Azithromycin 500', brand: 'Azithral · Alembic', sku: '332-09', cat: 'Antibiotic', price: 92, stock: 18, rx: true, hue: 'amber', status: 'Low stock', tone: 'amber' },
    { name: 'Vitamin D3 60K', brand: 'HealthKart', sku: '512-21', cat: 'Vitamins', price: 149, stock: 0, rx: false, hue: 'rose', status: 'Out of stock', tone: 'rose' },
    { name: 'Pan-D', brand: 'Alkem', sku: '208-77', cat: 'Digestive', price: 108, stock: 340, rx: true, hue: 'mint', status: 'Active', tone: 'mint' },
    { name: 'Cetirizine 10mg', brand: 'Cetzine · GSK', sku: '144-02', cat: 'Allergy', price: 24, stock: 89, rx: false, hue: 'blue', status: 'Active', tone: 'mint' },
    { name: 'Atorvastatin 10', brand: 'Atorlip · Cipla', sku: '419-33', cat: 'Heart', price: 86, stock: 12, rx: true, hue: 'amber', status: 'Low stock', tone: 'amber' },
  ];
  return (
    <AdminShell active="catalog" title="Products" sub="2,418 SKUs · 7 low on stock · 3 out of stock"
      actions={<button style={{ ...Astyles2, 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 product</button>}>
      {/* Summary cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
        {[
          { l: 'Total SKUs', v: '2,418', Icon: IconPill, hue: 'blue' },
          { l: 'In stock', v: '2,408', Icon: IconCheck, hue: 'mint' },
          { l: 'Low stock', v: '7', Icon: IconScan, hue: 'amber' },
          { l: 'Out of stock', v: '3', Icon: IconClose, 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>

      {/* Filters */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        {['All categories', 'Diabetes', 'Pain relief', 'Antibiotics', 'Vitamins'].map((f, i) => (
          <div key={f} style={{ padding: '8px 14px', borderRadius: 10, fontSize: 12, fontWeight: 600, background: i === 0 ? C.navy800 : 'white', color: i === 0 ? 'white' : C.ink700, border: i === 0 ? 'none' : `1px solid ${C.ink200}` }}>{f}</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}/> Rx only</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 }}>
              {['PRODUCT', 'SKU', 'CATEGORY', 'Rx', 'PRICE', 'STOCK', 'STATUS', ''].map((h, i) => (
                <th key={i} style={{ padding: '12px 18px', textAlign: 'left', fontWeight: 700, letterSpacing: 0.3 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {products.map((p, i) => (
              <tr key={i} style={{ borderTop: `1px solid ${C.ink100}` }}>
                <td style={{ padding: '12px 18px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <ProductPlaceholder hue={p.hue} w={40} h={40} radius={9}/>
                    <div>
                      <div style={{ fontWeight: 700, color: C.ink900 }}>{p.name}</div>
                      <div style={{ fontSize: 11, color: C.ink500 }}>{p.brand}</div>
                    </div>
                  </div>
                </td>
                <td style={{ padding: '12px 18px' }}><span className="mono" style={{ color: C.ink500 }}>{p.sku}</span></td>
                <td style={{ padding: '12px 18px', color: C.ink700 }}>{p.cat}</td>
                <td style={{ padding: '12px 18px' }}>{p.rx ? <span style={{ color: C.blue600 }}><IconRx size={16}/></span> : <span style={{ color: C.ink300 }}>—</span>}</td>
                <td style={{ padding: '12px 18px' }}><span className="mono" style={{ fontWeight: 700 }}>₹{p.price}</span></td>
                <td style={{ padding: '12px 18px' }}><span className="mono" style={{ fontWeight: 700, color: p.stock === 0 ? C.rose500 : (p.stock < 30 ? C.amber500 : C.ink900) }}>{p.stock}</span></td>
                <td style={{ padding: '12px 18px' }}><AdminStatus label={p.status} tone={p.tone}/></td>
                <td style={{ padding: '12px 18px', textAlign: 'right' }}>
                  <div style={{ display: 'inline-flex', gap: 4 }}>
                    <div style={{ width: 30, height: 30, borderRadius: 8, background: C.ink50, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.ink500 }}><IconFilter size={14}/></div>
                    <div style={{ width: 30, height: 30, borderRadius: 8, background: C.ink50, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.ink500 }}><IconChevR size={14}/></div>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <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 2,418 products</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {['‹', '1', '2', '3', '›'].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-5) CUSTOMERS
// ═════════════════════════════════════════════════════════════
function AdminCustomers() {
  const custs = [
    { name: 'Aarav Kumar', ph: '98••• 12•••', tier: 'Gold', tone: 'amber', orders: 24, spend: '14,820', last: 'Today', city: 'Indiranagar' },
    { name: 'Meera Shah', ph: '99••• 03•••', tier: 'Silver', tone: 'gray', orders: 12, spend: '6,240', last: '2 days ago', city: 'Koramangala' },
    { name: 'Rohit Nair', ph: '90••• 88•••', tier: 'Gold', tone: 'amber', orders: 41, spend: '28,100', last: 'Today', city: 'HSR Layout' },
    { name: 'Sana Khan', ph: '70••• 45•••', tier: 'Bronze', tone: 'rose', orders: 4, spend: '1,820', last: '1 week ago', city: 'Whitefield' },
    { name: 'Vikram Rao', ph: '88••• 12•••', tier: 'Gold', tone: 'amber', orders: 33, spend: '19,450', last: 'Today', city: 'Indiranagar' },
    { name: 'Priya Das', ph: '96••• 77•••', tier: 'Silver', tone: 'gray', orders: 9, spend: '4,100', last: '3 days ago', city: 'Marathahalli' },
  ];
  return (
    <AdminShell active="customers" title="Customers" sub="48,210 total · 1,240 active this week"
      actions={<button style={{ ...Astyles2, 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>}>
      {/* Summary */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
        {[
          { l: 'Total customers', v: '48,210', d: '+340 this week', Icon: IconUser, hue: 'blue' },
          { l: 'JANA+ members', v: '12,840', d: '27% of base', Icon: IconStar, hue: 'amber' },
          { l: 'Repeat rate', v: '64%', d: '+3% MoM', Icon: IconHeart, hue: 'mint' },
          { l: 'Avg lifetime value', v: '₹8,420', d: 'per customer', Icon: IconCart, 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}` }}>
              <div style={{ width: 38, height: 38, borderRadius: 11, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><s.Icon size={20}/></div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 700, marginTop: 12, letterSpacing: -0.01 }}>{s.v}</div>
              <div style={{ fontSize: 12, color: C.ink500 }}>{s.l}</div>
              <div style={{ fontSize: 11, color: C.ink400, marginTop: 2 }}>{s.d}</div>
            </div>
          );
        })}
      </div>

      {/* Filters */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        {['All', 'Gold', 'Silver', 'Bronze', 'New', 'At risk'].map((f, i) => (
          <div key={f} style={{ padding: '8px 14px', borderRadius: 10, fontSize: 12, fontWeight: 600, background: i === 0 ? C.navy800 : 'white', color: i === 0 ? 'white' : C.ink700, border: i === 0 ? 'none' : `1px solid ${C.ink200}` }}>{f}</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 }}>
              {['CUSTOMER', 'TIER', 'ORDERS', 'TOTAL SPEND', 'LAST ORDER', 'LOCATION', ''].map((h, i) => (
                <th key={i} style={{ padding: '12px 18px', textAlign: 'left', fontWeight: 700, letterSpacing: 0.3 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {custs.map((c, i) => {
              const init = c.name.split(' ').map(s => s[0]).join('');
              const hues = [C.blue400, C.mint500, C.amber500, C.rose500, C.navy700, C.blue600];
              return (
                <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: hues[i % hues.length], color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 13 }}>{init}</div>
                      <div>
                        <div style={{ fontWeight: 700 }}>{c.name}</div>
                        <div className="mono" style={{ fontSize: 11, color: C.ink400 }}>{c.ph}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ padding: '12px 18px' }}><AdminStatus label={c.tier} tone={c.tone}/></td>
                  <td style={{ padding: '12px 18px' }}><span className="mono" style={{ fontWeight: 700 }}>{c.orders}</span></td>
                  <td style={{ padding: '12px 18px' }}><span className="mono" style={{ fontWeight: 700 }}>₹{c.spend}</span></td>
                  <td style={{ padding: '12px 18px', color: C.ink500 }}>{c.last}</td>
                  <td style={{ padding: '12px 18px', color: C.ink700 }}>{c.city}</td>
                  <td style={{ padding: '12px 18px', textAlign: 'right' }}><IconChevR size={16} style={{ color: C.ink300 }}/></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </AdminShell>
  );
}

// ═════════════════════════════════════════════════════════════
// AD-6) PROMOTIONS / COUPONS
// ═════════════════════════════════════════════════════════════
function AdminPromos() {
  const promos = [
    { code: 'JAN20', desc: 'Flat 20% off first order', type: 'New users', used: '4,210', cap: '10,000', disc: '20%', status: 'Active', tone: 'mint', ends: 'Jun 30' },
    { code: 'VIT20', desc: '20% off all vitamins', type: 'Category', used: '1,840', cap: '5,000', disc: '20%', status: 'Active', tone: 'mint', ends: 'Jun 02' },
    { code: 'REFILL10', desc: '10% off subscription refills', type: 'Loyalty', used: '920', cap: '∞', disc: '10%', status: 'Active', tone: 'mint', ends: 'No expiry' },
    { code: 'LABS499', desc: 'Full body checkup at ₹499', type: 'Lab tests', used: '2,100', cap: '3,000', disc: '₹1,001', status: 'Ending soon', tone: 'amber', ends: 'May 31' },
    { code: 'MONSOON15', desc: '15% off cold & flu range', type: 'Seasonal', used: '0', cap: '8,000', disc: '15%', status: 'Scheduled', tone: 'blue', ends: 'Jul 15' },
    { code: 'WELCOME50', desc: '₹50 off above ₹299', type: 'New users', used: '6,400', cap: '6,400', disc: '₹50', status: 'Exhausted', tone: 'rose', ends: 'Expired' },
  ];
  return (
    <AdminShell active="promos" title="Promotions" sub="4 active · 1 scheduled · ₹2.4L discount given this month"
      actions={<button style={{ ...Astyles2, 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}/> Create coupon</button>}>
      {/* Active campaign highlights */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 18 }}>
        {[
          { code: 'JAN20', tag: 'Top performer', redeemed: '4,210', rev: '₹8.4L', g: `linear-gradient(135deg, ${C.blue600}, ${C.navy800})`, light: true },
          { code: 'VIT20', tag: 'Trending', redeemed: '1,840', rev: '₹3.1L', g: `linear-gradient(135deg, ${C.mint500}, #0F5A48)`, light: true },
          { code: 'LABS499', tag: 'Ending soon', redeemed: '2,100', rev: '₹10.5L', g: `linear-gradient(135deg, ${C.amber500}, #B5740A)`, light: true },
        ].map((c, i) => (
          <div key={i} style={{ borderRadius: 16, padding: 18, background: c.g, color: 'white', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -20, bottom: -20, width: 100, height: 100, borderRadius: 70, background: 'rgba(255,255,255,0.1)' }}/>
            <div style={{ fontSize: 11, opacity: 0.85, fontWeight: 600 }}>{c.tag}</div>
            <div className="mono" style={{ fontSize: 22, fontWeight: 700, marginTop: 6, letterSpacing: 0.5 }}>{c.code}</div>
            <div style={{ display: 'flex', gap: 20, marginTop: 14 }}>
              <div>
                <div className="mono" style={{ fontSize: 16, fontWeight: 700 }}>{c.redeemed}</div>
                <div style={{ fontSize: 10, opacity: 0.75 }}>redeemed</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 16, fontWeight: 700 }}>{c.rev}</div>
                <div style={{ fontSize: 10, opacity: 0.75 }}>revenue</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Table */}
      <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
        <div style={{ padding: '16px 20px', borderBottom: `1px solid ${C.ink100}`, fontSize: 15, fontWeight: 700 }}>All coupons</div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: C.ink50, color: C.ink500, fontSize: 11, fontWeight: 700 }}>
              {['CODE', 'DESCRIPTION', 'TYPE', 'DISCOUNT', 'REDEEMED', 'ENDS', 'STATUS', ''].map((h, i) => (
                <th key={i} style={{ padding: '12px 18px', textAlign: 'left', fontWeight: 700, letterSpacing: 0.3 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {promos.map((p, i) => (
              <tr key={i} style={{ borderTop: `1px solid ${C.ink100}` }}>
                <td style={{ padding: '13px 18px' }}>
                  <span className="mono" style={{ fontWeight: 700, padding: '3px 8px', borderRadius: 6, background: C.blue50, color: C.blue600, letterSpacing: 0.5 }}>{p.code}</span>
                </td>
                <td style={{ padding: '13px 18px', color: C.ink700 }}>{p.desc}</td>
                <td style={{ padding: '13px 18px', color: C.ink500 }}>{p.type}</td>
                <td style={{ padding: '13px 18px' }}><span className="mono" style={{ fontWeight: 700 }}>{p.disc}</span></td>
                <td style={{ padding: '13px 18px' }}>
                  <div style={{ fontSize: 12 }}>
                    <span className="mono" style={{ fontWeight: 700 }}>{p.used}</span>
                    <span className="mono" style={{ color: C.ink400 }}> / {p.cap}</span>
                  </div>
                  {p.cap !== '∞' && p.cap !== '6,400' && (
                    <div style={{ marginTop: 4, width: 80, height: 4, background: C.ink100, borderRadius: 2, overflow: 'hidden' }}>
                      <div style={{ width: `${Math.min(100, (parseInt(p.used.replace(/,/g,'')) / parseInt(p.cap.replace(/,/g,''))) * 100)}%`, height: '100%', background: C.blue600 }}/>
                    </div>
                  )}
                </td>
                <td style={{ padding: '13px 18px', color: C.ink500 }}>{p.ends}</td>
                <td style={{ padding: '13px 18px' }}><AdminStatus label={p.status} tone={p.tone}/></td>
                <td style={{ padding: '13px 18px', textAlign: 'right' }}>
                  {/* toggle */}
                  <div style={{ width: 38, height: 22, borderRadius: 11, background: (p.tone === 'mint' || p.tone === 'amber') ? C.blue600 : C.ink200, position: 'relative', display: 'inline-block' }}>
                    <div style={{ position: 'absolute', top: 2, left: (p.tone === 'mint' || p.tone === 'amber') ? 18 : 2, width: 18, height: 18, borderRadius: 9, background: 'white', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }}/>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AdminShell>
  );
}

Object.assign(window, { AdminCatalog, AdminCustomers, AdminPromos });