/**
 * BottomNav — Navegação mobile do SpotOnFide
 *
 * ARQUITETURA (não alterar sem aprovação do Arquiteto):
 *
 * 5 slots fixos, definidos para toda a vida do produto:
 *   Início | Explorar | Biblioteca | Buscar | Perfil
 *
 * Os slots são agnósticos de tipo de mídia.
 * Quando Música (F2), Rádio (F3) e Audiolivros (F4) chegarem,
 * o ModeSwitcher no Topbar controla o modo — a BottomNav não muda.
 *
 * "Explorar" sempre mostra o catálogo do modo ativo.
 * "Biblioteca" sempre mostra os favoritos/histórico do modo ativo.
 * "Buscar" recebe a página de busca na Fase 1.
 * "Perfil" recebe a página de perfil na Fase 1 e o SSO na Fase 7.
 *
 * Visível apenas em mobile (< lg). Desktop usa Sidebar.
 *
 * HUB-INTEGRATION-POINT (Fase 7): quando o SSO ONFIDE chegar,
 * o slot "Perfil" redireciona para o login centralizado do HUB.
 * Nenhuma mudança estrutural na BottomNav será necessária.
 */

import { Link, useLocation } from "wouter";

type NavSlot = {
  id: string;
  label: string;
  path: string;
  /** SVG path para o ícone — não usar emojis para garantir consistência cross-platform */
  icon: React.ReactNode;
  iconActive: React.ReactNode;
};

// Ícone: Casa
const IconHome = ({ active }: { active: boolean }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill={active ? "currentColor" : "none"}
    stroke="currentColor"
    strokeWidth={active ? 0 : 1.8}
    className="w-6 h-6"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
    />
  </svg>
);

// Ícone: Compasso / Explorar
const IconExplore = ({ active }: { active: boolean }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill={active ? "currentColor" : "none"}
    stroke="currentColor"
    strokeWidth={active ? 0 : 1.8}
    className="w-6 h-6"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
    />
  </svg>
);

// Ícone: Biblioteca / Estante
const IconLibrary = ({ active }: { active: boolean }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill={active ? "currentColor" : "none"}
    stroke="currentColor"
    strokeWidth={active ? 0 : 1.8}
    className="w-6 h-6"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
    />
  </svg>
);

// Ícone: Lupa / Buscar
const IconSearch = ({ active }: { active: boolean }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill={active ? "currentColor" : "none"}
    stroke="currentColor"
    strokeWidth={active ? 0 : 1.8}
    className="w-6 h-6"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803 7.5 7.5 0 0015.803 15.803z"
    />
  </svg>
);

// Ícone: Pessoa / Perfil
const IconProfile = ({ active }: { active: boolean }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill={active ? "currentColor" : "none"}
    stroke="currentColor"
    strokeWidth={active ? 0 : 1.8}
    className="w-6 h-6"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
    />
  </svg>
);

const SLOTS: NavSlot[] = [
  {
    id: "inicio",
    label: "Início",
    path: "/",
    icon: <IconHome active={false} />,
    iconActive: <IconHome active={true} />,
  },
  {
    id: "explorar",
    label: "Explorar",
    path: "/explorar",
    icon: <IconExplore active={false} />,
    iconActive: <IconExplore active={true} />,
  },
  {
    id: "biblioteca",
    label: "Biblioteca",
    path: "/biblioteca",
    icon: <IconLibrary active={false} />,
    iconActive: <IconLibrary active={true} />,
  },
  {
    id: "buscar",
    label: "Buscar",
    path: "/buscar",
    icon: <IconSearch active={false} />,
    iconActive: <IconSearch active={true} />,
  },
  {
    id: "perfil",
    // HUB-INTEGRATION-POINT (Fase 7): label pode mudar para "Conta ONFIDE"
    label: "Perfil",
    path: "/perfil",
    icon: <IconProfile active={false} />,
    iconActive: <IconProfile active={true} />,
  },
];

export default function BottomNav() {
  const [location] = useLocation();

  const isActive = (slot: NavSlot) => {
    if (slot.path === "/") return location === "/";
    return location.startsWith(slot.path);
  };

  return (
    /**
     * Posicionamento:
     * - fixed bottom-0: ancora no rodapé
     * - left-0 right-0: largura total
     * - h-14: 56px de altura (thumb-friendly, acima do mínimo de 44px por item)
     * - pb-safe: padding adicional para o home indicator do iOS
     *   (definido em index.css como env(safe-area-inset-bottom))
     * - z-40: abaixo do Topbar (z-40) mas acima do conteúdo
     * - lg:hidden: visível apenas em mobile — desktop usa Sidebar
     *
     * O MiniPlayer (Player.tsx) fica posicionado ACIMA desta barra
     * usando bottom: calc(56px + env(safe-area-inset-bottom))
     */
    <nav
      className="fixed bottom-0 left-0 right-0 h-14 pb-safe bg-[#2a0110] border-t border-white/10 flex items-center z-40 lg:hidden"
      aria-label="Navegação principal"
    >
      {SLOTS.map(slot => {
        const active = isActive(slot);
        return (
          <Link key={slot.id} href={slot.path} className="flex-1">
            <div
              className={`flex flex-col items-center justify-center gap-0.5 h-full py-1 transition-colors ${
                active ? "text-sof-gold" : "text-sof-text-3"
              }`}
              aria-current={active ? "page" : undefined}
            >
              {active ? slot.iconActive : slot.icon}
              <span className="text-[10px] font-medium font-ui leading-none">
                {slot.label}
              </span>
            </div>
          </Link>
        );
      })}
    </nav>
  );
}
