frontend/src/components/MobileNav.jsx

import { NavLink, useLocation, useNavigate } from "react-router-dom";

const ICON = {
  home: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 10.5 12 3l9 7.5" />
      <path d="M5 9.5V21h14V9.5" />
    </svg>
  ),
  browse: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  ),
  search: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  ),
  schedule: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2" />
      <path d="M16 2v4M8 2v4M3 10h18" />
    </svg>
  ),
  movies: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="20" height="16" rx="2" />
      <path d="M7 4v16M17 4v16M2 9h5M2 15h5M17 9h5M17 15h5" />
    </svg>
  ),
  manga: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
    </svg>
  ),
  music: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 18V5l12-2v13" />
      <circle cx="6" cy="18" r="3" />
      <circle cx="18" cy="16" r="3" />
    </svg>
  ),
  profile: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
      <circle cx="12" cy="7" r="4" />
    </svg>
  ),
};

const ITEMS = [
  { to: "/home", label: "Home", icon: ICON.home },
  { to: "/browse", label: "Browse", icon: ICON.browse },
  { to: "/movies", label: "Movies", icon: ICON.movies },
  { to: "/schedule", label: "Schedule", icon: ICON.schedule },
  { to: "/manga", label: "Manga", icon: ICON.manga },
  { to: "/music", label: "Music", icon: ICON.music },
  { to: "/home", label: "Profile", icon: ICON.profile, action: "profile" },
];

export default function MobileNav() {
  const { pathname } = useLocation();
  const navigate = useNavigate();

  const isFullscreen =
    pathname.startsWith("/watch") ||
    pathname === "/manga/read" ||
    pathname.startsWith("/manga/read/") ||
    /^\/movies\/.+\/watch$/.test(pathname);
  if (isFullscreen) return null;

  const isActive = (to, action) => {
    if (action === "profile") return pathname === "/home" || pathname === "/";
    if (to === "/browse") return pathname === "/browse" || pathname === "/search";
    return pathname === to;
  };

  const handleClick = (item) => {
    if (item.action === "profile") {
      window.dispatchEvent(new CustomEvent("open-auth-modal"));
      return;
    }
    if (item.to) navigate(item.to);
  };

  return (
    <nav className="mobile-nav" aria-label="Mobile navigation">
      {ITEMS.map(({ to, label, icon, action }) => (
        <button
          key={`${label}-${to}`}
          type="button"
          onClick={() => handleClick({ to, action })}
          className={`mobile-nav-item${isActive(to, action) ? " active" : ""}`}
          aria-label={label}
        >
          {icon}
          <span className="mobile-nav-label">{label}</span>
        </button>
      ))}
    </nav>
  );
}