'use client';

import { ChevronDown, ChevronRight, Menu } from 'lucide-react';
import Link from 'next/link';
import { useState } from 'react';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/shared/shadcn-ui/collapsible';
import { Sheet, SheetContent, SheetTrigger } from '@/shared/shadcn-ui/sheet';

export function MobileNav() {
  const [open, setOpen] = useState(false);
  const [clientsOpen, setClientsOpen] = useState(false);

  const { t } = useTextController();

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button variant='ghost' className='lg:hidden' size='icon'>
          <Menu className='h-6 w-6' />
          <span className='sr-only'>Открыть меню</span>
        </Button>
      </SheetTrigger>
      <SheetContent side='left' className='w-[300px] sm:w-[400px]'>
        <nav className='mt-8 flex flex-col gap-4'>
          <Link
            href='/'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            {t('common.navigation.home')}
          </Link>
          <Link
            href='/about'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            {t('common.navigation.about')}
          </Link>

          <Collapsible open={clientsOpen} onOpenChange={setClientsOpen}>
            <CollapsibleTrigger className='data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up flex w-full items-center justify-between text-lg font-medium transition-all hover:text-red-600'>
              <Link href='/clients' onClick={() => setOpen(false)}><span>{t('common.navigation.clients')}</span></Link>
              {clientsOpen ? (
                <ChevronDown className='h-5 w-5' />
              ) : (
                <ChevronRight className='h-5 w-5' />
              )}
            </CollapsibleTrigger>
            <CollapsibleContent className='mt-2 space-y-2 border-l-2 border-gray-200 pl-4'>
              <Link
                href='/clients/loyalty'
                onClick={() => setOpen(false)}
                className='block py-1 text-base transition-colors hover:text-red-600'
              >
                {t('common.navigation.loyatly')}
              </Link>
              <Link
                href='/clients/certificates'
                onClick={() => setOpen(false)}
                className='block py-1 text-base transition-colors hover:text-red-600'
              >
                {t('common.navigation.certificates')}
              </Link>
            </CollapsibleContent>
          </Collapsible>

          <Link
            href='/#stations'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            {t('common.navigation.stations')}
          </Link>
          <Link
            href='/#vacancies'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            {t('common.navigation.vacancies')}
          </Link>
          <Link
            href='/#promotions'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            {t('common.navigation.promotions')}
          </Link>
          <Link
            href='/#partners'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            {t('common.navigation.partners')}
          </Link>
          <Link
            href='/#charity'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            {t('common.navigation.charity')}
          </Link>
        </nav>
      </SheetContent>
    </Sheet>
  );
}
