'use client';

import { ChevronLeft, ChevronRight, Maximize } from 'lucide-react';
import Image from 'next/image';
import { useState } from 'react';

import { Stations } from '@/app/api-utlities/@types';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/shared/shadcn-ui/dialog';

export interface StationGalleryProps {
  stations: Stations;
}

export function StationGallery({ stations }: StationGalleryProps) {
  const [currentImage, setCurrentImage] = useState(0);
  const [selectedStation, setSelectedStation] = useState<Stations[0] | null>(
    null,
  );

  const nextImage = () => {
    setCurrentImage((prev) => (prev === stations.length - 1 ? 0 : prev + 1));
  };

  const prevImage = () => {
    setCurrentImage((prev) => (prev === 0 ? stations.length - 1 : prev - 1));
  };

  const { t } = useTextController();

  return (
    <div className='space-y-8 px-2'>
      <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl md:h-[500px]'>
        <Image
          src={stations[currentImage].image || '/placeholder.svg'}
          alt={stations[currentImage].name}
          fill
          className='object-cover'
        />
        <div className='absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/70 to-transparent p-6 text-white'>
          <h3 className='text-2xl font-bold'>{stations[currentImage].name}</h3>
          <p className='text-white/80'>{stations[currentImage].address}</p>
        </div>

        <Button
          variant='outline'
          size='icon'
          className='absolute top-1/2 left-4 -translate-y-1/2 bg-white/80 hover:bg-white'
          onClick={prevImage}
        >
          <ChevronLeft className='h-6 w-6' />
          <span className='sr-only'>{t('about.gallery.previous')}</span>
        </Button>

        <Button
          variant='outline'
          size='icon'
          className='absolute top-1/2 right-4 -translate-y-1/2 bg-white/80 hover:bg-white'
          onClick={nextImage}
        >
          <ChevronRight className='h-6 w-6' />
          <span className='sr-only'>{t('about.gallery.next')}</span>
        </Button>

        <Dialog>
          <DialogTrigger asChild>
            <Button
              variant='outline'
              size='icon'
              className='absolute top-4 right-4 bg-white/80 hover:bg-white'
              onClick={() => setSelectedStation(stations[currentImage])}
            >
              <Maximize className='h-5 w-5' />
              <span className='sr-only'>Увеличить</span>
            </Button>
          </DialogTrigger>
          <DialogContent className='max-w-4xl'>
            <DialogHeader>
              <DialogTitle>{stations[currentImage].name}</DialogTitle>
              <DialogDescription>
                {stations[currentImage].address}
              </DialogDescription>
            </DialogHeader>
            <div className='relative h-[60vh] w-full'>
              <Image
                src={stations[currentImage].image || '/placeholder.svg'}
                alt={stations[currentImage].name}
                fill
                className='object-contain'
              />
            </div>
          </DialogContent>
        </Dialog>
      </div>

      <div className='grid grid-cols-3 gap-4 md:grid-cols-6'>
        {stations.map((station, index) => (
          <div
            key={station.id}
            className={`relative h-20 cursor-pointer overflow-hidden rounded-md transition-all ${
              index === currentImage
                ? 'ring-2 ring-red-600 ring-offset-2'
                : 'opacity-70 hover:opacity-100'
            }`}
            onClick={() => setCurrentImage(index)}
          >
            <Image
              src={station.image || '/placeholder.svg'}
              alt={station.name}
              fill
              className='object-cover'
            />
          </div>
        ))}
      </div>
    </div>
  );
}
