import { Button, Sheet, SheetContent, SheetTrigger } from "@/ui";

import SupportModal from "@/app/support/components/SupportModal";
import { cn } from "@/lib/utils";
import { MenuIcon, Package2Icon } from "lucide-react";
import { useCallback } from "react";
import { Trans } from "react-i18next";
import { Link, useLocation } from "react-router-dom";
import { UeckoLogo } from "../UeckoLogo";
import { UserButton } from "./components";

const mainMenu = [
  {
    label: "main_menu.quotes",
    to: "/quotes",
  },
  {
    label: "main_menu.catalog",
    to: "/catalog",
  },
  {
    label: "main_menu.settings",
    to: "/settings",
  },
];

export const LayoutHeader = () => {
  const location = useLocation();

  const isActiveLink = useCallback(
    (path: string) => location.pathname === path,
    [location.pathname]
  );

  return (
    <header className='sticky top-0 z-20 flex items-center h-16 gap-6 px-4 border-b shadow bg-accent md:px-6'>
      <nav className='flex-col hidden gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:text-sm'>
        <Link to='/' className='flex items-center mr-6 font-semibold'>
          <UeckoLogo className='w-24' />
          <span className='sr-only'>Uecko</span>
        </Link>
        {mainMenu.map((menuItem) => (
          <Link
            to={menuItem.to}
            className={cn(
              "transition-colors text-muted-foreground hover:text-foreground",
              isActiveLink(menuItem.to)
                ? "text-foreground font-bold"
                : "text-muted-foreground  font-semibold"
            )}
          >
            <Trans i18nKey={menuItem.label} />
          </Link>
        ))}
      </nav>
      <Sheet>
        <SheetTrigger asChild>
          <Button variant='outline' size='icon' className='shrink-0 md:hidden'>
            <MenuIcon className='w-5 h-5' />
            <span className='sr-only'>Toggle navigation menu</span>
          </Button>
        </SheetTrigger>
        <SheetContent side='left'>
          <nav className='grid gap-6 text-lg font-medium'>
            <Link to='/' className='flex items-center gap-2 text-lg font-semibold'>
              <Package2Icon className='w-6 h-6' />
              <span className='sr-only'>Uecko</span>
            </Link>
            {mainMenu.map((menuItem) => (
              <Link
                key={menuItem.to}
                to={menuItem.to}
                className={cn(
                  "flex items-center gap-4 px-4 py-3 rounded-lg transition-colors",
                  "hover:bg-primary-light hover:text-primary text-muted-foreground"
                )}
              >
                <Trans i18nKey={menuItem.label} />
              </Link>
            ))}
          </nav>
        </SheetContent>
      </Sheet>

      <Link to='/' className='flex items-center font-semibold shrink-0 md:hidden'>
        <UeckoLogo className='w-24' />
        <span className='sr-only'>Uecko</span>
      </Link>

      <div className='flex items-center justify-end w-full gap-4 md:ml-auto md:gap-2 lg:gap-4'>
        <UserButton />
        <SupportModal />
      </div>
    </header>
  );
};

LayoutHeader.displayName = "LayoutHeader";