// Shared components for Janaushadhi app screens
// All screens are 402 x 874 inside an IOSDevice.
// App content area is approx 402 x 786 (status 54 + home indicator 34).

const C = {
  navy900: '#0A1733', navy800: '#0B1F4D', navy700: '#143278',
  blue600: '#1B5BFF', blue500: '#2F6BFF', blue400: '#5B9EFF',
  blue300: '#8FB8FF', blue100: '#DCE7FF', blue50: '#EEF3FF', blue25: '#F6F9FF',
  mint500: '#22C29A', mint100: '#D6F5EA',
  amber500: '#F5A524', amber100: '#FFEFD1',
  rose500: '#E5484D', rose100: '#FFE4E4',
  ink900: '#0B132B', ink700: '#2E3957', ink500: '#5B6784',
  ink400: '#8693B0', ink300: '#B5BFD4', ink200: '#D9DFEC',
  ink100: '#ECF0F8', ink50: '#F5F7FC', white: '#FFFFFF',
};

// ── Striped placeholder for product imagery ───────────────────
function ProductPlaceholder({ hue = 'blue', label, w = '100%', h = 110, radius = 14 }) {
  const palettes = {
    blue:   [C.blue50, C.blue100, C.blue300],
    mint:   [C.mint100, '#B3EAD7', C.mint500],
    amber:  [C.amber100, '#F8DDA0', C.amber500],
    rose:   [C.rose100, '#F8C7C9', C.rose500],
    navy:   ['#E2E8FA', C.blue100, C.navy800],
  };
  const [bg, stripe, glyph] = palettes[hue] || palettes.blue;
  return (
    <div style={{
      width: w, height: h, borderRadius: radius, position: 'relative',
      background: `repeating-linear-gradient(135deg, ${bg} 0 8px, ${stripe} 8px 16px)`,
      overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 22, background: 'rgba(255,255,255,0.85)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: glyph,
        boxShadow: '0 4px 10px rgba(11,31,77,0.10)',
      }}>
        <IconPill size={22} />
      </div>
      {label && (
        <div style={{
          position: 'absolute', bottom: 6, left: 8, right: 8,
          fontFamily: 'JetBrains Mono, ui-monospace, monospace',
          fontSize: 9, color: 'rgba(10,23,51,0.55)', textTransform: 'uppercase',
          letterSpacing: 0.4, textAlign: 'center',
        }}>{label}</div>
      )}
    </div>
  );
}

// ── Bottom Nav (used on Home, Rx, Cart, Orders, Profile) ──────
function BottomNav({ active = 'home' }) {
  const items = [
    { id: 'home',    label: 'Home',    Icon: IconHome },
    { id: 'rx',      label: 'Rx',      Icon: IconRx, prominent: true },
    { id: 'cart',    label: 'Cart',    Icon: IconCart, badge: 3 },
    { id: 'orders',  label: 'Orders',  Icon: IconBox },
    { id: 'profile', label: 'Profile', Icon: IconUser },
  ];
  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 12,
      borderRadius: 26, background: 'rgba(255,255,255,0.92)',
      backdropFilter: 'blur(20px)',
      boxShadow: '0 12px 30px rgba(11,31,77,0.10), 0 0 0 1px rgba(11,31,77,0.05)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '10px 12px 14px', zIndex: 40,
    }}>
      {items.map((it) => {
        const isActive = it.id === active;
        if (it.prominent) {
          return (
            <div key={it.id} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              transform: 'translateY(-14px)',
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 26,
                background: `linear-gradient(160deg, ${C.blue500}, ${C.navy800})`,
                color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 10px 22px rgba(27,91,255,0.45)',
              }}>
                <IconRx size={24} />
              </div>
              <span style={{ fontSize: 10, color: C.ink500, fontWeight: 600 }}>{it.label}</span>
            </div>
          );
        }
        const color = isActive ? C.blue600 : C.ink400;
        return (
          <div key={it.id} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            flex: 1, color, position: 'relative',
          }}>
            <div style={{ position: 'relative' }}>
              <it.Icon size={22} />
              {it.badge && (
                <div style={{
                  position: 'absolute', top: -4, right: -8, minWidth: 16, height: 16,
                  borderRadius: 8, background: C.blue600, color: 'white',
                  fontSize: 10, fontWeight: 700, display: 'flex',
                  alignItems: 'center', justifyContent: 'center', padding: '0 4px',
                  border: '2px solid white',
                }}>{it.badge}</div>
              )}
            </div>
            <span style={{ fontSize: 10, fontWeight: isActive ? 700 : 500 }}>{it.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// ── Top bar (location + bell) ─────────────────────────────────
function TopBar({ location = 'Bengaluru — Indiranagar', count = 2, dark = false }) {
  const text = dark ? 'white' : C.ink900;
  const muted = dark ? 'rgba(255,255,255,0.7)' : C.ink500;
  return (
    <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: 11, color: muted, fontWeight: 500, letterSpacing: 0.2 }}>DELIVER TO</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: text, fontWeight: 700, fontSize: 14, letterSpacing: -0.01 }}>
          <IconLoc size={16} />
          <span>{location}</span>
          <IconChevD size={14} />
        </div>
      </div>
      <div style={{
        width: 38, height: 38, borderRadius: 19, background: dark ? 'rgba(255,255,255,0.12)' : C.blue50,
        color: dark ? 'white' : C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative',
      }}>
        <IconBell size={20} />
        {count > 0 && (
          <div style={{
            position: 'absolute', top: 6, right: 6, width: 8, height: 8, borderRadius: 4,
            background: C.rose500, border: '2px solid ' + (dark ? C.navy800 : 'white'),
          }}/>
        )}
      </div>
    </div>
  );
}

// ── Search bar ────────────────────────────────────────────────
function SearchBar({ placeholder = 'Search medicines, brands, wellness', onMic = true, onScan = true }) {
  return (
    <div style={{
      margin: '14px 20px 0', display: 'flex', alignItems: 'center', gap: 10,
      padding: '12px 14px', background: 'white', borderRadius: 16,
      boxShadow: '0 1px 0 rgba(11,31,77,0.04), 0 8px 18px rgba(11,31,77,0.06)',
    }}>
      <IconSearch size={20} style={{ color: C.ink400 }} />
      <span style={{ flex: 1, fontSize: 14, color: C.ink400 }}>{placeholder}</span>
      {onMic && <IconMic size={20} style={{ color: C.blue600 }} />}
      {onScan && (
        <>
          <div style={{ width: 1, height: 18, background: C.ink100 }} />
          <IconScan size={20} style={{ color: C.blue600 }} />
        </>
      )}
    </div>
  );
}

// ── Status banner (Rx active / refill due) ────────────────────
function StatusBanner({ title, sub, cta = 'View', tone = 'blue' }) {
  const palettes = {
    blue: { bg: C.blue50, text: C.navy800, accent: C.blue600 },
    mint: { bg: C.mint100, text: '#0F5A48', accent: C.mint500 },
    amber:{ bg: C.amber100, text: '#7A4500', accent: C.amber500 },
  };
  const p = palettes[tone] || palettes.blue;
  return (
    <div style={{
      margin: '16px 20px 0', padding: '14px 16px', borderRadius: 18,
      background: p.bg, display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,0.7)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: p.accent,
      }}>
        <IconRx size={22} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: p.text, letterSpacing: -0.01 }}>{title}</div>
        <div style={{ fontSize: 12, color: p.text, opacity: 0.7, marginTop: 2 }}>{sub}</div>
      </div>
      <button style={{
        background: p.accent, color: 'white', border: 'none', borderRadius: 12,
        padding: '8px 14px', fontWeight: 700, fontSize: 12, letterSpacing: -0.01,
      }}>{cta}</button>
    </div>
  );
}

// ── Section header ────────────────────────────────────────────
function SectionHeader({ title, action = 'See all' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '0 20px', marginTop: 22, marginBottom: 12 }}>
      <div style={{ fontSize: 17, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>{title}</div>
      {action && <div style={{ fontSize: 13, color: C.blue600, fontWeight: 600 }}>{action}</div>}
    </div>
  );
}

Object.assign(window, {
  C, ProductPlaceholder, BottomNav, TopBar, SearchBar, StatusBanner, SectionHeader,
});