'use client';

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

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);

  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'
          >
            Главная
          </Link>
          <Link
            href='/about'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            О нас
          </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'>
              <span>Клиентам</span>
              {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'
              >
                Программа лояльности
              </Link>
              <Link
                href='/clients/fuel-card'
                onClick={() => setOpen(false)}
                className='block py-1 text-base transition-colors hover:text-red-600'
              >
                Топливная карта
              </Link>
              <Link
                href='/clients/certificates'
                onClick={() => setOpen(false)}
                className='block py-1 text-base transition-colors hover:text-red-600'
              >
                Сертификаты
              </Link>
              <Link
                href='/clients/payment'
                onClick={() => setOpen(false)}
                className='block py-1 text-base transition-colors hover:text-red-600'
              >
                Способы оплаты
              </Link>
            </CollapsibleContent>
          </Collapsible>

          <Link
            href='/#stations'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            Наши заправки
          </Link>
          <Link
            href='/#vacancies'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            Вакансии
          </Link>
          <Link
            href='/#promotions'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            Акции
          </Link>
          <Link
            href='/#partners'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            Партнеры
          </Link>
          <Link
            href='/#charity'
            onClick={() => setOpen(false)}
            className='text-lg font-medium transition-colors hover:text-red-600'
          >
            Благотворительность
          </Link>
        </nav>
      </SheetContent>
    </Sheet>
  );
}