'use client';

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

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

interface Station {
  id: number;
  name: string;
  image: string;
  location: string;
}

const stations: Array<Station> = [
  {
    id: 1,
    name: 'АЗС Душанбе-Центр',
    image: '/placeholder.svg?height=400&width=600&text=АЗС+Душанбе-Центр',
    location: 'ул. Рудаки 150, Душанбе',
  },
  {
    id: 2,
    name: 'АЗС Худжанд',
    image: '/placeholder.svg?height=400&width=600&text=АЗС+Худжанд',
    location: 'ул. Ленина 45, Худжанд',
  },
  {
    id: 3,
    name: 'АЗС Куляб',
    image: '/placeholder.svg?height=400&width=600&text=АЗС+Куляб',
    location: 'ул. Сомони 78, Куляб',
  },
  {
    id: 4,
    name: 'АЗС Бохтар',
    image: '/placeholder.svg?height=400&width=600&text=АЗС+Бохтар',
    location: 'ул. Айни 23, Бохтар',
  },
  {
    id: 5,
    name: 'АЗС Хорог',
    image: '/placeholder.svg?height=400&width=600&text=АЗС+Хорог',
    location: 'ул. Горная 12, Хорог',
  },
  {
    id: 6,
    name: 'АЗС Истаравшан',
    image: '/placeholder.svg?height=400&width=600&text=АЗС+Истаравшан',
    location: 'ул. Исмоили Сомони 34, Истаравшан',
  },
];

export function StationGallery() {
  const [currentImage, setCurrentImage] = useState(0);
  const [selectedStation, setSelectedStation] = useState<Station | 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].location}</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].location}
              </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>
  );
}