import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { LogOut, Moon, Sun, UtensilsCrossed } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { themeStore, toggleTheme } from "@/store/themeStore";
import { AppearanceSwitcher } from "@/components/ui/AppearanceSwitcher";
import { LanguageSwitcher } from "@/components/ui/LanguageSwitcher";
import { LayoutSwitcher } from "@/components/ui/LayoutSwitcher";

interface NavbarProps {
  onToggleSidebar?: () => void;
  showMenuToggle?: boolean;
}

export function Navbar({ onToggleSidebar, showMenuToggle = true }: NavbarProps) {
  const { t } = useTranslation();
  const { user, logout } = useAuth();
  const theme = themeStore.useStore((s) => s.theme);

  return (
    <header className="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-900/80">
      <div className="flex h-16 items-center justify-between gap-4 px-4 sm:px-6">
        <div className="flex items-center gap-3">
          {showMenuToggle && (
            <button
              type="button"
              onClick={onToggleSidebar}
              className="btn-secondary !px-2.5 !py-2 lg:hidden"
              aria-label={t("nav.toggleNav")}
            >
              <span className="block h-0.5 w-5 bg-current shadow-[0_6px_0_currentColor,0_-6px_0_currentColor]" />
            </button>
          )}
          <Link to="/" className="flex items-center gap-2 font-extrabold tracking-tight">
            <span className="grid h-9 w-9 place-items-center rounded-xl bg-brand-600 text-white">
              <UtensilsCrossed className="h-5 w-5" />
            </span>
            <span className="text-lg">{t("app.name")}</span>
          </Link>
        </div>

        <div className="flex items-center gap-2 sm:gap-3">
          <AppearanceSwitcher />
          <LayoutSwitcher />
          <LanguageSwitcher />

          <button
            type="button"
            onClick={toggleTheme}
            className="btn-secondary !px-2.5 !py-2"
            aria-label={theme === "dark" ? t("nav.lightMode") : t("nav.darkMode")}
          >
            {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
          </button>

          <div className="hidden text-right sm:block">
            <p className="text-sm font-semibold leading-tight">{user?.userName ?? t("nav.user")}</p>
            <p className="text-xs text-slate-500 dark:text-slate-400">{user?.email}</p>
          </div>

          <button type="button" onClick={() => void logout()} className="btn-secondary">
            <LogOut className="h-4 w-4" />
            <span className="hidden sm:inline">{t("nav.logout")}</span>
          </button>
        </div>
      </div>
    </header>
  );
}
