import { useAuth } from "@/_core/hooks/useAuth";
import { assetUrl } from "@/lib/asset";
import { Link, useLocation, useSearch } from "wouter";

type NavItem = {
  id: string;
  label: string;
  icon: string;
  path: string;
};

const navegarItems: NavItem[] = [
  { id: "inicio", label: "Início", icon: "⌂", path: "/" },
  { id: "explorar", label: "Explorar", icon: "⊞", path: "/explorar" },
];

const bibliotecaItems: NavItem[] = [
  {
    id: "biblioteca",
    label: "Minha Biblioteca",
    icon: "◫",
    path: "/biblioteca",
  },
  {
    id: "favoritas",
    label: "Favoritas",
    icon: "♥",
    path: "/biblioteca?tab=favoritas",
  },
  {
    id: "playlists",
    label: "Playlists",
    icon: "♫",
    path: "/biblioteca?tab=playlists",
  },
  {
    id: "historico",
    label: "Histórico",
    icon: "↺",
    path: "/biblioteca?tab=historico",
  },
];

const catalogoItems: NavItem[] = [
  {
    id: "episodios",
    label: "Episódios",
    icon: "♪",
    path: "/episodios",
  },
  {
    id: "apresentadores",
    label: "Apresentadores",
    icon: "✦",
    path: "/apresentadores",
  },
  {
    id: "series",
    label: "Séries",
    icon: "◈",
    path: "/series",
  },
];

const musicaItems: NavItem[] = [
  {
    id: "musica-faixas",
    label: "Faixas",
    icon: "🎵",
    path: "/musica",
  },
  {
    id: "musica-artistas",
    label: "Artistas",
    icon: "🎤",
    path: "/musica/artistas",
  },
  {
    id: "musica-albuns",
    label: "Álbuns",
    icon: "💿",
    path: "/musica/albuns",
  },
];

export default function Sidebar() {
  const [location] = useLocation();
  const search = useSearch();
  const { user } = useAuth();

  const currentTab = new URLSearchParams(search).get("tab");

  const isItemActive = (item: NavItem) => {
    const [path, qs] = item.path.split("?");
    const tab = qs
      ? new URLSearchParams(qs).get("tab")
      : null;

    return (
      location === path &&
      (tab ? currentTab === tab : !currentTab)
    );
  };

  const renderGroup = (
    title: string,
    items: NavItem[]
  ) => (
    <div className="space-y-1">
      <p
        className="
          px-3
          mb-2
          text-[10px]
          uppercase
          tracking-[0.25em]
          text-white/30
          font-semibold
        "
      >
        {title}
      </p>

      {items.map(item => {
        const isActive = isItemActive(item);

        return (
          <Link
            key={item.id}
            href={item.path}
          >
            <div
              className={`
                group
                relative
                flex
                items-center
                gap-4
                h-12
                px-3
                rounded-xl
                cursor-pointer
                transition-all
                duration-200
                ${
                  isActive
                    ? "bg-white/10 text-sof-gold"
                    : "text-white/70 hover:text-white hover:bg-white/6"
                }
              `}
            >
              <span
                className="
                  w-6
                  text-lg
                  text-center
                  flex-shrink-0
                "
              >
                {item.icon}
              </span>

              <span
                className={`
                  text-sm
                  font-ui
                  truncate
                  ${
                    isActive
                      ? "font-semibold"
                      : "font-medium"
                  }
                `}
              >
                {item.label}
              </span>

              {isActive && (
                <span
                  className="
                    ml-auto
                    w-1
                    h-5
                    rounded-full
                    bg-sof-gold
                    flex-shrink-0
                  "
                />
              )}
            </div>
          </Link>
        );
      })}
    </div>
  );

  return (
    <aside
      className="
        fixed
        left-0
        top-0
        h-screen
        w-64
        hidden
        lg:flex
        flex-col
        overflow-y-auto
        z-40
        bg-sof-sidebar
        border-r
        border-white/5
      "
    >
      {/* Logo */}
      <Link href="/">
        <div
          className="
            p-5
            border-b
            border-white/5
            cursor-pointer
          "
        >
          <img
            src={assetUrl("/logo_hz.jpg")}
            alt="SpotOnFide"
            className="
              w-full
              rounded-xl
              shadow-lg
            "
          />
        </div>
      </Link>

      {/* Navegação */}
      <nav
        className="
          flex-1
          px-4
          py-6
          space-y-8
        "
      >
        {renderGroup(
          "Navegar",
          navegarItems
        )}

        {renderGroup(
          "Biblioteca de Podcasts",
          bibliotecaItems
        )}

        {renderGroup(
          "Catálogo",
          catalogoItems
        )}

        {renderGroup(
          "Música",
          musicaItems
        )}

        {user?.role === "admin" && (
          <div className="space-y-1">
            <p
              className="
                px-3
                mb-2
                text-[10px]
                uppercase
                tracking-[0.25em]
                text-white/30
                font-semibold
              "
            >
              Administração
            </p>

            <Link href="/admin">
              <div
                className={`
                  relative
                  flex
                  items-center
                  gap-4
                  h-12
                  px-3
                  rounded-xl
                  cursor-pointer
                  transition-all
                  duration-200
                  ${
                    location.startsWith("/admin")
                      ? "bg-white/10 text-sof-gold"
                      : "text-white/70 hover:text-white hover:bg-white/6"
                  }
                `}
              >
                <span
                  className="
                    w-6
                    text-lg
                    text-center
                    flex-shrink-0
                  "
                >
                  ⚙
                </span>

                <span className="text-sm font-ui font-medium">
                  Painel Admin
                </span>

                {location.startsWith("/admin") && (
                  <span
                    className="
                      ml-auto
                      w-1
                      h-5
                      rounded-full
                      bg-sof-gold
                      flex-shrink-0
                    "
                  />
                )}
              </div>
            </Link>
          </div>
        )}
      </nav>

      {/* Rodapé */}
      <div
        className="
          p-5
          border-t
          border-white/5
        "
      >
        <a
          href="https://filadelfia.onfide.com.br/"
          target="_blank"
          rel="noopener noreferrer"
          className="
            block
            rounded-xl
            bg-white/5
            px-4
            py-3
            text-center
            text-xs
            font-medium
            text-white/50
            hover:bg-white/10
            hover:text-sof-gold
            transition-all
          "
        >
          ⬡ Comunidade Filadélfia
        </a>
      </div>
    </aside>
  );
}