"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

type Modules = {
  services: boolean;
  classifieds: boolean;
  jobs: boolean;
};

const allTabs = [
  {
    href: "/",
    label: "Inicio",
    match: (p: string) => p === "/",
    icon: HomeIcon,
    module: null as null | keyof Modules,
  },
  {
    href: "/servicios",
    label: "Servicios",
    match: (p: string) => p.startsWith("/servicios") || p.startsWith("/perfil"),
    icon: ServicesIcon,
    module: "services" as const,
  },
  {
    href: "/clasificados",
    label: "Clasificados",
    match: (p: string) => p.startsWith("/clasificados"),
    icon: TagIcon,
    module: "classifieds" as const,
  },
  {
    href: "/empleos",
    label: "Empleos",
    match: (p: string) => p.startsWith("/empleos"),
    icon: BriefcaseIcon,
    module: "jobs" as const,
  },
  {
    href: "/dashboard",
    label: "Cuenta",
    match: (p: string) =>
      p.startsWith("/dashboard") ||
      p.startsWith("/configuracion") ||
      p.startsWith("/chat") ||
      p.startsWith("/login") ||
      p.startsWith("/register"),
    icon: UserIcon,
    module: null as null | keyof Modules,
  },
];

function HomeIcon({ active }: { active: boolean }) {
  return (
    <svg viewBox="0 0 24 24" className="app-tab__icon" aria-hidden>
      <path
        fill={active ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinejoin="round"
        d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5z"
      />
    </svg>
  );
}

function ServicesIcon({ active }: { active: boolean }) {
  return (
    <svg viewBox="0 0 24 24" className="app-tab__icon" aria-hidden>
      <circle
        cx="12"
        cy="12"
        r="3"
        fill={active ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth="1.8"
      />
      <path
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        d="M12 3v2.2M12 18.8V21M3 12h2.2M18.8 12H21M5.6 5.6l1.6 1.6M16.8 16.8l1.6 1.6M18.4 5.6l-1.6 1.6M7.2 16.8l-1.6 1.6"
      />
    </svg>
  );
}

function TagIcon({ active }: { active: boolean }) {
  return (
    <svg viewBox="0 0 24 24" className="app-tab__icon" aria-hidden>
      <path
        fill={active ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinejoin="round"
        d="M12 2H4v8l9.3 9.3a1 1 0 0 0 1.4 0l6.6-6.6a1 1 0 0 0 0-1.4L12 2z"
      />
      <circle cx="7.5" cy="7.5" r="1.2" fill="currentColor" />
    </svg>
  );
}

function BriefcaseIcon({ active }: { active: boolean }) {
  return (
    <svg viewBox="0 0 24 24" className="app-tab__icon" aria-hidden>
      <rect
        x="3"
        y="7"
        width="18"
        height="13"
        rx="2"
        fill={active ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth="1.8"
      />
      <path
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"
      />
    </svg>
  );
}

function UserIcon({ active }: { active: boolean }) {
  return (
    <svg viewBox="0 0 24 24" className="app-tab__icon" aria-hidden>
      <circle
        cx="12"
        cy="8"
        r="3.5"
        fill={active ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth="1.8"
      />
      <path
        fill={active ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        d="M5 19.5c1.8-3.2 4.2-4.5 7-4.5s5.2 1.3 7 4.5"
      />
    </svg>
  );
}

export function MobileTabs({ modules }: { modules: Modules }) {
  const pathname = usePathname();

  if (pathname.startsWith("/admin")) return null;

  const tabs = allTabs.filter(
    (t) => !t.module || modules[t.module]
  );

  return (
    <nav className="app-tabs" aria-label="Navegacion principal">
      {tabs.map((t) => {
        const active = t.match(pathname);
        const Icon = t.icon;
        return (
          <Link
            key={t.href}
            href={t.href}
            className={`app-tab ${active ? "is-active" : ""}`}
            aria-current={active ? "page" : undefined}
          >
            <Icon active={active} />
            <span className="app-tab__label">{t.label}</span>
          </Link>
        );
      })}
    </nav>
  );
}