import { NavLink } from "react-router-dom";
import { useTranslation } from "react-i18next";
import type { NavIconName } from "@/theme/appearance.config";
import { NavIcon } from "@/components/ui/NavIcon";

export type SidebarVariant = "default" | "compact" | "wide";

interface NavItem {
  to: string;
  labelKey: string;
  icon: NavIconName;
}

const NAV_ITEMS: NavItem[] = [
  { to: "/", labelKey: "nav.dashboard", icon: "dashboard" },
  { to: "/breakfast", labelKey: "nav.breakfast", icon: "coffee" },
  { to: "/second-breakfast", labelKey: "nav.secondBreakfast", icon: "croissant" },
  { to: "/lunch", labelKey: "nav.lunch", icon: "soup" },
  { to: "/dinner", labelKey: "nav.dinner", icon: "moon" },
  { to: "/all-meals", labelKey: "nav.allMeals", icon: "list" },
    { to: "/manage-meals", labelKey: "nav.manageMeals", icon: "book" },
    { to: "/ingredients", labelKey: "nav.ingredientCatalog", icon: "leaf" },
    { to: "/diet", labelKey: "nav.dietTracker", icon: "diet" },
    { to: "/meal-planner", labelKey: "nav.mealPlanner", icon: "calendar" },
    { to: "/diet-generator", labelKey: "nav.dietGenerator", icon: "diet" },
    { to: "/recipe-generator", labelKey: "nav.recipeGenerator", icon: "book" },
    { to: "/shopping-list", labelKey: "nav.shoppingList", icon: "cart" },
];

interface SidebarProps {
  open: boolean;
  variant?: SidebarVariant;
  onNavigate?: () => void;
}

export function Sidebar({ open, variant = "default", onNavigate }: SidebarProps) {
  const { t } = useTranslation();

  const widthClass =
    variant === "compact" ? "w-16" : variant === "wide" ? "w-72" : "w-64";
  const asideBg =
    variant === "wide"
      ? "bg-gradient-to-b from-white to-brand-50/40 dark:from-slate-900 dark:to-brand-950/20"
      : "bg-white dark:bg-slate-900";

  return (
    <>
      {open && (
        <div
          className="fixed inset-0 z-30 bg-slate-900/40 lg:hidden"
          onClick={onNavigate}
          aria-hidden="true"
        />
      )}
      <aside
        className={`fixed inset-y-0 left-0 z-40 transform border-r border-slate-200 px-3 py-6 transition-transform dark:border-slate-800 lg:static lg:translate-x-0 ${widthClass} ${asideBg} ${
          open ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        {variant === "wide" && (
          <div className="mb-6 hidden rounded-2xl bg-gradient-to-br from-brand-600 to-brand-800 p-4 text-white lg:block">
            <p className="text-lg font-extrabold tracking-tight">{t("app.name")}</p>
            <p className="mt-1 text-xs text-brand-100">{t("layout.wideTagline")}</p>
          </div>
        )}

        <nav
          className={`mt-16 lg:mt-0 ${variant === "compact" ? "flex flex-col items-center gap-2" : "flex flex-col gap-1"}`}
          aria-label="Main"
        >
          {NAV_ITEMS.map(({ to, labelKey, icon }) => (
            <NavLink
              key={to}
              to={to}
              end={to === "/"}
              onClick={onNavigate}
              title={variant === "compact" ? t(labelKey) : undefined}
              className={({ isActive }) => {
                const base = `flex items-center rounded-xl text-sm font-medium transition ${
                  isActive
                    ? "bg-brand-600 text-white"
                    : "text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
                }`;
                if (variant === "compact") return `${base} justify-center p-2.5`;
                if (variant === "wide") return `${base} gap-3 px-4 py-3`;
                return `${base} gap-3 px-3.5 py-2.5`;
              }}
            >
              <NavIcon name={icon} />
              {variant !== "compact" && t(labelKey)}
            </NavLink>
          ))}
        </nav>
      </aside>
    </>
  );
}
