/* BottomNav → window. 4 tabs: Feed, Radar, Agenda, Perfil.
   SVG inline locales (no depende de MotoLogo.jsx). Activo: #2563EB. Inactivo: #9AA0A6. */
(function () {
  const ACTIVE   = "#2563EB";
  const INACTIVE = "#9AA0A6";

  const HomeSvg = ({ c }) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M3.5 10.5L12 3.5l8.5 7V20a1.5 1.5 0 01-1.5 1.5h-4V14h-6v7.5H5A1.5 1.5 0 013.5 20v-9.5z"
            stroke={c} strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );

  const RadarSvg = ({ c }) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke={c} strokeWidth="1.6" />
      <circle cx="12" cy="12" r="6" stroke={c} strokeWidth="1.3" strokeDasharray="1.5 1.5" />
      <circle cx="12" cy="12" r="3" stroke={c} strokeWidth="1.2" strokeDasharray="1.5 1.5" />
      <line x1="12" y1="12" x2="20" y2="7" stroke={c} strokeWidth="1.8" strokeLinecap="round" />
      <circle cx="12" cy="12" r="1.4" fill={c} />
    </svg>
  );

  const AgendaSvg = ({ c }) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="3.5" y="5" width="17" height="16" rx="2.5" stroke={c} strokeWidth="1.8" />
      <path d="M3.5 10h17M8 3.5v3M16 3.5v3" stroke={c} strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );

  const UserSvg = ({ c }) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="8.5" r="3.8" stroke={c} strokeWidth="1.8" />
      <path d="M4.5 20.5c.9-3.6 4-6 7.5-6s6.6 2.4 7.5 6"
            stroke={c} strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );

  function BottomNav({ tab, setTab, extraTab }) {
    const tabs = [
      { id: "home",   label: "Feed",    Svg: HomeSvg },
      { id: "mapa",   label: "Radar",   Svg: RadarSvg },
      { id: "agenda", label: "Agenda",  Svg: AgendaSvg },
      { id: "perf",   label: "Perfil",  Svg: UserSvg },
    ];
    // Entrada opcional (ej: Panel Superadmin). Se comporta como tab normal:
    // tapearla hace `setTab(extraTab.id)` y el parent decide qué renderizar.
    if (extraTab && extraTab.id) {
      tabs.push({
        id: extraTab.id,
        label: extraTab.label || "Panel",
        emoji: extraTab.emoji || "👑",
      });
    }

    return (
      <nav className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[430px] bg-white dark:bg-gray-900 border-t border-[#EEE] dark:border-gray-800 z-30">
        <div className="grid" style={{ gridTemplateColumns: "repeat(" + tabs.length + ", 1fr)" }}>
          {tabs.map((t) => {
            const active = tab === t.id;
            const color = active ? ACTIVE : INACTIVE;
            const onClick = () => setTab(t.id);
            return (
              <button
                key={t.id}
                onClick={onClick}
                aria-label={t.label}
                aria-current={active ? "page" : undefined}
                className="flex flex-col items-center justify-center gap-1 py-2 min-h-[56px] active:bg-[#F0F0F0] dark:active:bg-gray-800 transition"
              >
                {t.emoji
                  ? <div style={{ fontSize: 22, lineHeight: 1 }} aria-hidden="true">{t.emoji}</div>
                  : <t.Svg c={color} />}
                <span
                  className="text-[10px] font-black uppercase tracking-wide"
                  style={{ color }}
                >
                  {t.label}
                </span>
              </button>
            );
          })}
        </div>
      </nav>
    );
  }

  window.BottomNav = BottomNav;
})();