// Android (Material 3) shared components and screens
// Wrapped in AndroidDevice (412 × 892), inner content ~396 × 820.

const M = {
  // Material 3 token mapping for our blue brand
  primary: '#1B5BFF',
  onPrimary: '#FFFFFF',
  primaryContainer: '#DCE7FF',
  onPrimaryContainer: '#0B1F4D',
  secondary: '#5B9EFF',
  tertiary: '#22C29A',
  error: '#E5484D',
  surface: '#FAFBFE',
  surfaceDim: '#EFF3FA',
  surfaceContainer: '#EEF3FF',
  surfaceContainerHigh: '#E2EAFA',
  surfaceContainerLow: '#F5F7FC',
  surfaceVariant: '#E4E8F2',
  onSurface: '#0B132B',
  onSurfaceVariant: '#5B6784',
  outline: '#B5BFD4',
  outlineVar: '#D9DFEC',
};

// ── Material Top App Bar ──────────────────────────────────────
function MdAppBar({ title, leading = 'back', trailing = ['bell'], subtitle, tone = 'surface' }) {
  const bg = tone === 'primary' ? M.primary : (tone === 'surfaceContainer' ? M.surfaceContainer : M.surface);
  const fg = tone === 'primary' ? 'white' : M.onSurface;
  const muted = tone === 'primary' ? 'rgba(255,255,255,0.85)' : M.onSurfaceVariant;
  const Leading = { back: IconChevL, menu: IconFilter, none: null }[leading];
  return (
    <div style={{
      background: bg, padding: '6px 4px 6px',
      display: 'flex', alignItems: 'center', minHeight: 64, color: fg,
      fontFamily: 'Roboto, "Roboto Flex", system-ui, sans-serif',
    }}>
      {Leading && (
        <div style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Leading size={24} />
        </div>
      )}
      <div style={{ flex: 1, paddingLeft: leading === 'none' ? 16 : 4 }}>
        <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: 0, lineHeight: 1.15 }}>{title}</div>
        {subtitle && <div style={{ fontSize: 13, color: muted, marginTop: 2 }}>{subtitle}</div>}
      </div>
      {trailing.map((t, i) => {
        const I = { bell: IconBell, search: IconSearch, cart: IconCart, more: null, heart: IconHeart, close: IconClose }[t];
        return (
          <div key={i} style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            {I ? <I size={22} /> : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                <div style={{ width: 4, height: 4, borderRadius: 2, background: fg }}/>
                <div style={{ width: 4, height: 4, borderRadius: 2, background: fg }}/>
                <div style={{ width: 4, height: 4, borderRadius: 2, background: fg }}/>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

// ── Material 3 bottom navigation bar (with active pill) ──────
function MdBottomNav({ active = 'home' }) {
  const items = [
    { id: 'home', label: 'Home', Icon: IconHome },
    { id: 'browse', label: 'Browse', Icon: IconSearch },
    { id: 'cart', label: 'Cart', Icon: IconCart, badge: 3 },
    { id: 'orders', label: 'Orders', Icon: IconBox },
    { id: 'profile', label: 'You', Icon: IconUser },
  ];
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 24,
      background: M.surfaceContainer, height: 80,
      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-around',
      paddingTop: 12, zIndex: 20,
      fontFamily: 'Roboto, system-ui, sans-serif',
    }}>
      {items.map((it) => {
        const isActive = it.id === active;
        return (
          <div key={it.id} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, width: 64,
          }}>
            <div style={{
              width: 64, height: 32, borderRadius: 16,
              background: isActive ? M.primaryContainer : 'transparent',
              color: isActive ? M.onPrimaryContainer : M.onSurfaceVariant,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative',
            }}>
              <it.Icon size={22} />
              {it.badge && (
                <div style={{
                  position: 'absolute', top: 2, right: 14, minWidth: 16, height: 16,
                  borderRadius: 8, background: M.error, color: 'white',
                  fontSize: 10, fontWeight: 700, display: 'flex',
                  alignItems: 'center', justifyContent: 'center', padding: '0 4px',
                  border: `2px solid ${M.surfaceContainer}`,
                }}>{it.badge}</div>
              )}
            </div>
            <span style={{
              fontSize: 12, fontWeight: isActive ? 600 : 500,
              color: isActive ? M.onSurface : M.onSurfaceVariant,
              letterSpacing: 0.4,
            }}>{it.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// ── M3 FAB ───────────────────────────────────────────────────
function MdFab({ icon: I = IconRx, label, extended = false, bottom = 116, right = 16 }) {
  if (extended) {
    return (
      <div style={{
        position: 'absolute', right, bottom, height: 56, borderRadius: 16,
        background: M.primaryContainer, color: M.onPrimaryContainer,
        padding: '0 20px', display: 'flex', alignItems: 'center', gap: 12,
        boxShadow: '0 6px 12px rgba(11,31,77,0.18)', zIndex: 25, fontWeight: 600, fontSize: 14,
        fontFamily: 'Roboto, system-ui',
      }}>
        <I size={22} /> {label}
      </div>
    );
  }
  return (
    <div style={{
      position: 'absolute', right, bottom, width: 56, height: 56, borderRadius: 16,
      background: M.primaryContainer, color: M.onPrimaryContainer,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 6px 12px rgba(11,31,77,0.18)', zIndex: 25,
    }}><I size={22} /></div>
  );
}

// ── M3 Filled / Tonal / Outlined / Text buttons ──────────────
function MdButton({ children, variant = 'filled', icon: I, full = false, style = {} }) {
  const base = {
    height: 40, borderRadius: 20, padding: '0 24px', border: 'none',
    fontSize: 14, fontWeight: 600, letterSpacing: 0.1,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    fontFamily: 'Roboto, system-ui, sans-serif', cursor: 'pointer',
    width: full ? '100%' : 'auto',
    ...style,
  };
  const variants = {
    filled:   { background: M.primary, color: 'white' },
    tonal:    { background: M.primaryContainer, color: M.onPrimaryContainer },
    outlined: { background: 'transparent', color: M.primary, border: `1px solid ${M.outline}` },
    text:     { background: 'transparent', color: M.primary, padding: '0 12px' },
    elevated: { background: M.surfaceContainerLow, color: M.primary, boxShadow: '0 1px 3px rgba(0,0,0,0.10)' },
  };
  return <button style={{ ...base, ...variants[variant] }}>{I && <I size={18} />}{children}</button>;
}

// ── M3 Filter / Assist chip ──────────────────────────────────
function MdChip({ children, selected = false, icon = null, style = {} }) {
  return (
    <div style={{
      height: 32, padding: selected ? '0 16px 0 8px' : '0 16px',
      borderRadius: 8, display: 'inline-flex', alignItems: 'center', gap: 8,
      background: selected ? M.primaryContainer : 'transparent',
      color: selected ? M.onPrimaryContainer : M.onSurface,
      border: selected ? 'none' : `1px solid ${M.outline}`,
      fontSize: 13, fontWeight: 500, letterSpacing: 0.1,
      fontFamily: 'Roboto, system-ui',
      flexShrink: 0,
      ...style,
    }}>
      {selected && <IconCheck size={18} />}
      {icon && !selected && icon}
      {children}
    </div>
  );
}

// ── Search bar (M3 docked) ───────────────────────────────────
function MdSearchBar({ value = 'Search medicines, brands, tests', leading = 'menu' }) {
  const L = { menu: IconFilter, search: IconSearch, back: IconChevL }[leading];
  return (
    <div style={{
      margin: '0 16px', height: 56, borderRadius: 28, background: M.surfaceContainer,
      display: 'flex', alignItems: 'center', padding: '0 4px 0 16px', gap: 16,
      fontFamily: 'Roboto, system-ui',
    }}>
      <L size={22} style={{ color: M.onSurfaceVariant }} />
      <div style={{ flex: 1, fontSize: 14, color: M.onSurfaceVariant }}>{value}</div>
      <div style={{ width: 40, height: 40, borderRadius: 20, color: M.onSurfaceVariant, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <IconMic size={22} />
      </div>
      <div style={{ width: 32, height: 32, borderRadius: 16, background: M.primary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: 8 }}>
        <IconScan size={18} />
      </div>
    </div>
  );
}

// ── Section header (Material style) ──────────────────────────
function MdSection({ title, action = 'View all' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '24px 16px 12px', fontFamily: 'Roboto, system-ui' }}>
      <div style={{ fontSize: 16, fontWeight: 600, color: M.onSurface, letterSpacing: 0.15 }}>{title}</div>
      {action && <div style={{ fontSize: 13, color: M.primary, fontWeight: 600 }}>{action}</div>}
    </div>
  );
}

Object.assign(window, {
  M, MdAppBar, MdBottomNav, MdFab, MdButton, MdChip, MdSearchBar, MdSection,
});