// Admin screens batch 3 — Delivery dispatch, Analytics

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

// ═════════════════════════════════════════════════════════════
// AD-7) DELIVERY DISPATCH BOARD
// ═════════════════════════════════════════════════════════════
function AdminDelivery() {
  const riders = [
    { name: 'Rohit K', init: 'RK', status: 'On delivery', tone: 'blue', order: '#JN-2841-09', eta: '14 min', deliveries: 8, rating: '4.9', hue: C.blue400 },
    { name: 'Sameer P', init: 'SP', status: 'On delivery', tone: 'blue', order: '#JN-2840-21', eta: '6 min', deliveries: 11, rating: '4.8', hue: C.mint500 },
    { name: 'Anil T', init: 'AT', status: 'Available', tone: 'mint', order: '—', eta: '—', deliveries: 6, rating: '4.7', hue: C.amber500 },
    { name: 'Faisal M', init: 'FM', status: 'Returning', tone: 'amber', order: '—', eta: '4 min', deliveries: 9, rating: '4.9', hue: C.rose500 },
    { name: 'Deepa R', init: 'DR', status: 'Available', tone: 'mint', order: '—', eta: '—', deliveries: 5, rating: '5.0', hue: C.navy700 },
  ];
  const unassigned = [
    { id: '#JN-2841-12', cust: 'Nisha B', area: 'Indiranagar', items: 2, ready: 'Ready now' },
    { id: '#JN-2841-15', cust: 'Arjun M', area: 'Domlur', items: 5, ready: 'Ready now' },
    { id: '#JN-2841-18', cust: 'Tara S', area: 'CV Raman Nagar', items: 1, ready: 'Packing' },
  ];
  return (
    <AdminShell active="delivery" title="Delivery dispatch" sub="2 riders out · 3 unassigned · avg 26 min delivery time"
      actions={<button style={{ ...Astyles3, 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}/> Assign rider</button>}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16, height: '100%' }}>
        {/* Live map */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden', flex: 1, position: 'relative', minHeight: 360 }}>
            <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${C.blue100} 0%, ${C.blue50} 100%)` }}/>
            <svg viewBox="0 0 720 420" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
              <path d="M-20,320 Q180,260 360,290 T740,200" stroke="white" strokeWidth="16" fill="none" strokeLinecap="round" opacity="0.9"/>
              <path d="M120,40 L200,140 L180,260 L360,290" stroke="white" strokeWidth="12" fill="none" strokeLinecap="round" opacity="0.7"/>
              <path d="M480,30 L560,120 L540,240 L660,330" stroke="white" strokeWidth="10" fill="none" strokeLinecap="round" opacity="0.6"/>
              {[[50,60,70,50],[160,30,55,50],[260,80,60,50],[440,130,80,50],[560,60,70,50],[80,260,75,50],[280,230,65,50],[500,280,70,50],[630,160,65,50]].map(([x,y,w,h],i)=><rect key={i} x={x} y={y} width={w} height={h} rx="6" fill="white" opacity="0.5"/>)}
            </svg>
            {/* Store */}
            <div style={{ position: 'absolute', left: 60, top: 290, display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: C.navy800, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid white', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }}><IconLoc size={15}/></div>
            </div>
            {/* Riders */}
            {[{x:300,y:250,c:C.blue600},{x:540,y:240,c:C.mint500}].map((r,i)=>(
              <div key={i} style={{ position: 'absolute', left: r.x, top: r.y }}>
                <div style={{ position: 'absolute', inset: -8, borderRadius: '50%', border: `2px solid ${r.c}`, opacity: 0.3, width: 56, height: 56 }}/>
                <div style={{ width: 40, height: 40, borderRadius: 20, background: 'white', color: r.c, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `3px solid ${r.c}`, boxShadow: '0 6px 14px rgba(11,31,77,0.2)' }}><IconTruck size={20}/></div>
              </div>
            ))}
            {/* Destinations */}
            {[{x:620,y:180},{x:340,y:110}].map((d,i)=>(
              <div key={i} style={{ position: 'absolute', left: d.x, top: d.y, width: 26, height: 26, borderRadius: 13, background: C.rose500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid white', boxShadow: '0 3px 8px rgba(0,0,0,0.18)' }}><IconHome size={13}/></div>
            ))}
            <div style={{ position: 'absolute', top: 14, left: 14, padding: '8px 12px', borderRadius: 10, background: 'white', fontSize: 12, fontWeight: 700, boxShadow: '0 4px 12px rgba(0,0,0,0.12)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: C.mint500 }}/> Live · 2 active deliveries
            </div>
          </div>
        </div>

        {/* Right: unassigned + riders */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, overflow: 'auto' }}>
          {/* Unassigned */}
          <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
            <div style={{ padding: '14px 16px', borderBottom: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Unassigned</div>
              <span className="mono" style={{ fontSize: 11, fontWeight: 700, padding: '2px 8px', borderRadius: 6, background: C.rose100, color: '#7A1C1F' }}>3</span>
            </div>
            {unassigned.map((u, i) => (
              <div key={i} style={{ padding: 14, borderBottom: i < unassigned.length - 1 ? `1px solid ${C.ink100}` : 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className="mono" style={{ fontSize: 12, fontWeight: 700 }}>{u.id}</span>
                    <AdminStatus label={u.ready} tone={u.ready === 'Ready now' ? 'mint' : 'amber'}/>
                  </div>
                  <div style={{ fontSize: 11, color: C.ink500, marginTop: 3 }}>{u.cust} · {u.area} · {u.items} items</div>
                </div>
                <button style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 8, padding: '7px 12px', fontSize: 11, fontWeight: 700 }}>Assign</button>
              </div>
            ))}
          </div>

          {/* Riders */}
          <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
            <div style={{ padding: '14px 16px', borderBottom: `1px solid ${C.ink100}`, fontSize: 14, fontWeight: 700 }}>Riders on shift · 5</div>
            {riders.map((r, i) => (
              <div key={i} style={{ padding: 14, borderBottom: i < riders.length - 1 ? `1px solid ${C.ink100}` : 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 38, height: 38, borderRadius: 19, background: r.hue, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 13 }}>{r.init}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 13, fontWeight: 700 }}>{r.name}</span>
                    <span style={{ fontSize: 11, color: C.ink500, display: 'flex', alignItems: 'center', gap: 2 }}><IconStar size={11} style={{ color: C.amber500 }}/>{r.rating}</span>
                  </div>
                  <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{r.order !== '—' ? <span className="mono">{r.order} · ETA {r.eta}</span> : `${r.deliveries} today`}</div>
                </div>
                <AdminStatus label={r.status} tone={r.tone}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </AdminShell>
  );
}

// ═════════════════════════════════════════════════════════════
// AD-8) ANALYTICS
// ═════════════════════════════════════════════════════════════
function AdminAnalytics() {
  return (
    <AdminShell active="analytics" title="Analytics" sub="May 2026 · vs April 2026"
      actions={<div style={{ ...Astyles3, display: 'flex', gap: 8 }}>
        <div style={{ padding: '9px 14px', borderRadius: 10, background: 'white', border: `1px solid ${C.ink200}`, fontSize: 12, fontWeight: 600, color: C.ink700, display: 'flex', alignItems: 'center', gap: 8 }}><IconClock size={14}/> This month <IconChevD size={14}/></div>
        <button style={{ background: 'white', color: C.ink700, border: `1px solid ${C.ink200}`, borderRadius: 10, padding: '9px 14px', fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 8 }}><IconUpload size={14}/> Export report</button>
      </div>}>
      {/* KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
        {[
          { l: 'Gross revenue', v: '₹52.4L', d: '+18.2%', up: true },
          { l: 'Total orders', v: '9,840', d: '+12.4%', up: true },
          { l: 'New customers', v: '1,240', d: '+22.0%', up: true },
          { l: 'Refund rate', v: '1.8%', d: '−0.4%', up: true },
        ].map((k, i) => (
          <div key={i} style={{ background: 'white', borderRadius: 14, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 12, color: C.ink500 }}>{k.l}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
              <span className="mono" style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.02 }}>{k.v}</span>
              <span style={{ fontSize: 12, fontWeight: 700, color: k.up ? C.mint500 : C.rose500 }}>{k.up ? '▲' : '▼'} {k.d}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Revenue trend (line-ish area via bars) + funnel */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.7fr 1fr', gap: 16, marginBottom: 16 }}>
        <div style={{ background: 'white', borderRadius: 16, padding: 20, border: `1px solid ${C.ink100}` }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
            <div style={{ fontSize: 15, fontWeight: 700 }}>Revenue trend</div>
            <div style={{ display: 'flex', gap: 14, fontSize: 11, color: C.ink500 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: C.blue600 }}/> This month</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: C.ink200 }}/> Last month</span>
            </div>
          </div>
          {/* dual bars */}
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height: 180, marginTop: 10 }}>
            {[
              { l: 'W1', a: 60, b: 52 }, { l: 'W2', a: 78, b: 64 }, { l: 'W3', a: 92, b: 70 }, { l: 'W4', a: 100, b: 82 },
            ].map((d, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, height: '100%', justifyContent: 'flex-end' }}>
                <div style={{ display: 'flex', gap: 5, alignItems: 'flex-end', width: '100%', height: '100%', justifyContent: 'center' }}>
                  <div style={{ width: 22, borderRadius: '5px 5px 0 0', height: `${d.b}%`, background: C.ink200 }}/>
                  <div style={{ width: 22, borderRadius: '5px 5px 0 0', height: `${d.a}%`, background: C.blue600 }}/>
                </div>
                <div style={{ fontSize: 10, color: C.ink400, fontWeight: 600 }}>{d.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Conversion funnel */}
        <div style={{ background: 'white', borderRadius: 16, padding: 20, border: `1px solid ${C.ink100}` }}>
          <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 16 }}>Conversion funnel</div>
          {[
            { l: 'App / site visits', v: '128,400', p: 100, c: C.blue300 },
            { l: 'Product views', v: '84,200', p: 66, c: C.blue400 },
            { l: 'Added to cart', v: '38,100', p: 30, c: C.blue500 },
            { l: 'Checkout started', v: '14,800', p: 12, c: C.blue600 },
            { l: 'Orders placed', v: '9,840', p: 8, c: C.navy800 },
          ].map((s, i) => (
            <div key={i} style={{ marginBottom: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 5 }}>
                <span style={{ color: C.ink700, fontWeight: 600 }}>{s.l}</span>
                <span className="mono" style={{ fontWeight: 700 }}>{s.v}</span>
              </div>
              <div style={{ height: 10, background: C.ink100, borderRadius: 5, overflow: 'hidden' }}>
                <div style={{ width: s.p + '%', height: '100%', background: s.c, borderRadius: 5 }}/>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom: top products + cities */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
          <div style={{ padding: '14px 18px', borderBottom: `1px solid ${C.ink100}`, fontSize: 14, fontWeight: 700 }}>Top-selling products</div>
          {[
            { name: 'Dolo 650', cat: 'Pain relief', units: '4,820', hue: 'blue' },
            { name: 'Metformin SR 500', cat: 'Diabetes', units: '3,640', hue: 'mint' },
            { name: 'Vitamin D3 60K', cat: 'Vitamins', units: '2,910', hue: 'amber' },
            { name: 'Pan-D', cat: 'Digestive', units: '2,180', hue: 'rose' },
          ].map((p, i) => (
            <div key={i} style={{ padding: '12px 18px', borderBottom: i < 3 ? `1px solid ${C.ink100}` : 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
              <span className="mono" style={{ fontSize: 13, fontWeight: 700, color: C.ink400, width: 18 }}>{i + 1}</span>
              <ProductPlaceholder hue={p.hue} w={36} h={36} radius={9}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</div>
                <div style={{ fontSize: 11, color: C.ink500 }}>{p.cat}</div>
              </div>
              <span className="mono" style={{ fontSize: 13, fontWeight: 700 }}>{p.units}</span>
            </div>
          ))}
        </div>
        <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
          <div style={{ padding: '14px 18px', borderBottom: `1px solid ${C.ink100}`, fontSize: 14, fontWeight: 700 }}>Orders by area</div>
          <div style={{ padding: 18 }}>
            {[
              { l: 'Indiranagar', p: 88, v: '2,140' },
              { l: 'Koramangala', p: 72, v: '1,820' },
              { l: 'HSR Layout', p: 64, v: '1,560' },
              { l: 'Whitefield', p: 48, v: '1,180' },
              { l: 'Marathahalli', p: 36, v: '920' },
            ].map((r, i) => (
              <div key={i} style={{ marginBottom: 14 }}>
                <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.v}</span>
                </div>
                <div style={{ height: 7, background: C.ink100, borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{ width: r.p + '%', height: '100%', background: `linear-gradient(90deg, ${C.blue400}, ${C.blue600})` }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </AdminShell>
  );
}

Object.assign(window, { AdminDelivery, AdminAnalytics });