import Link from 'next/link';
import React from 'react';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { cn } from '@/shared/lib/utils';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@/shared/shadcn-ui/navigation-menu';

export function DesktopNav() {
  const { t } = useTextController();

  return (
    <NavigationMenu className='hidden lg:flex'>
      <NavigationMenuList>
        <NavigationMenuItem>
          <Link href='/' scroll>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>{t('common.navigation.home')}</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href='/#stations' scroll>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>{t('common.navigation.stations')}</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>
            {t('common.navigation.clients')}
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]'>
              <li className='row-span-4'>
                <NavigationMenuLink asChild>
                  <Link
                    className='flex h-full w-full flex-col justify-end rounded-md bg-gradient-to-b from-red-500 to-red-700 p-6 no-underline outline-none select-none focus:shadow-md'
                    href='/clients'
                  >
                    <div className='mt-4 mb-2 text-lg font-medium text-white'>
                      {t('clients.title')}
                    </div>
                    <p className='text-sm leading-tight text-white/90'>
                      {t('clients.description')}
                    </p>
                  </Link>
                </NavigationMenuLink>
              </li>
              <ListItem href='/clients/loyalty' title='Программа лояльности'>
                {t('clients.header.loyalty.description')}
              </ListItem>
              <ListItem href='/clients/certificates' title='Сертификаты'>
                {t('clients.header.certificates.description')}
              </ListItem>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href='/#vacancies' scroll={true}>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>{t('common.navigation.vacancies')}</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href='/#promotions' scroll>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>{t('common.navigation.promotions')}</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href='/about' scroll>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>{t('common.navigation.about')}</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

interface ListItemProps extends React.ComponentPropsWithoutRef<'a'> {
  title: string;
  href: string;
}

const ListItem = React.forwardRef<React.ComponentRef<'a'>, ListItemProps>(
  ({ className, title, children, href, ...props }, ref) => {
    return (
      <li>
        <NavigationMenuLink asChild>
          <a
            ref={ref}
            href={href}
            className={cn(
              'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none',
              className,
            )}
            {...props}
          >
            <div className='text-sm leading-none font-medium'>{title}</div>
            <p className='text-muted-foreground line-clamp-2 text-sm leading-snug'>
              {children}
            </p>
          </a>
        </NavigationMenuLink>
      </li>
    );
  },
);
ListItem.displayName = 'ListItem';