import React, { useState } from 'react';
import PageHeader from '../components/PageHeader';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const FleetPage: React.FC = () => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  // Список всех фотографий из папки cars
  const carImages = [
    '/media/cars/33725959_1920_q70.webp',
    '/media/cars/33725960_1920_q70.webp',
    '/media/cars/33725961_1920_q70.webp',
    '/media/cars/33725962_1920_q70.webp',
    '/media/cars/33725963_1920_q70.webp',
    '/media/cars/33725964_1920_q70.webp',
    '/media/cars/33725965_1920_q70.webp',
    '/media/cars/33725966_1920_q70.webp',
    '/media/cars/33725967_1920_q70.webp',
    '/media/cars/33725968_1920_q70.webp',
    '/media/cars/33725969_1920_q70.webp',
    '/media/cars/33725970_1920_q70.webp',
    '/media/cars/33725971_1920_q70.webp',
    '/media/cars/33725972_1920_q70.webp',
    '/media/cars/33725973_1920_q70.webp',
    '/media/cars/33725974_1920_q70.webp',
    '/media/cars/33725975_1920_q70.webp',
    '/media/cars/33725976_1920_q70.webp',
    '/media/cars/33725977_1920_q70.webp',
    '/media/cars/33725978_1920_q70.webp',
    '/media/cars/33725979_1920_q70.webp',
    '/media/cars/33725980_1920_q70.webp',
    '/media/cars/33725981_1920_q70.webp',
    '/media/cars/33725982_1920_q70.webp',
    '/media/cars/33725983_1920_q70.webp',
    '/media/cars/33725984_1920_q70.webp',
    '/media/cars/33725985_1920_q70.webp',
    '/media/cars/33725986_1920_q70.webp',
  ];

  // Список транспортных средств
  const vehicles = [
    { type: 'Установка разведочного бурения', brand: 'КАМАЗ 5350-42  УРБ-2А-2' },
    { type: 'Установка разведочного бурения', brand: 'КАМАЗ 43118 013-10 УРБ-2А-2' },
    { type: 'Установка разведочного бурения', brand: 'КАМАЗ 5350-42 УРБ-2А-2' },
    { type: 'Специальное пассажирское ТС', brand: 'УАЗ-29892' },
    { type: 'Грузовой бортовой', brand: 'ГАЗ 33081' },
    { type: 'УБШМ 1.20', brand: 'ГАЗ 33081' },
    { type: 'УБШМ 1.20', brand: 'ГАЗ 33081' },
    { type: 'Специальное пассажирское ТС', brand: 'УАЗ-220695-04' },
    { type: 'Грузовое ТС, Фермер грузопассажирский УБШМ 1-13', brand: 'УАЗ-390945' },
    { type: 'Грузовой фургон', brand: 'УАЗ-390995-04' },
    { type: 'Установка разведочного бурения УРБ-2Д3', brand: 'МТЛБу (Снегоболотоход гусеничный ТГМ 21-04)' },
    { type: 'Седельный тягач', brand: 'УРАЛ 44202-0311-41' },
    { type: 'Полуприцеп низкорамный трал', brand: '993920' },
    { type: 'Снегоход', brand: 'YAMAHA VK540E' },
    { type: 'Прицеп для перевозки водной техники, грузов', brand: 'МЗСА, 81771С' },
    { type: 'Специальная установка каротажной станции СК 1-74-II', brand: 'ЗИЛ-131' },
    { type: 'Фермер грузопассажирский УБШМ 1-13', brand: 'УАЗ 390945' },
    { type: 'Болотовездеход', brand: 'Caiman' },
  ];

  const nextImage = () => {
    setCurrentImageIndex((prev) => (prev + 1) % carImages.length);
  };

  const prevImage = () => {
    setCurrentImageIndex((prev) => (prev - 1 + carImages.length) % carImages.length);
  };

  return (
    <div className="bg-white pb-20">
      <PageHeader 
        title="Автопарк" 
        description="Современная техника для выполнения работ любой сложности"
        image="/media/images/headers/header-fleet.png"
      />

      <div className="container mx-auto px-6 py-20">
        {/* Карусель фотографий */}
        <div className="mb-20">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
            Галерея техники
          </h2>
          
          <div className="relative max-w-5xl mx-auto">
            {/* Главное изображение */}
            <div className="relative aspect-[16/9] rounded-2xl overflow-hidden bg-gray-100">
              <img 
                src={carImages[currentImageIndex]} 
                alt={`Транспортное средство ${currentImageIndex + 1}`}
                className="w-full h-full object-cover"
              />
              
              {/* Кнопки навигации */}
              <button
                onClick={prevImage}
                className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white p-3 rounded-full shadow-lg transition-all duration-300 group"
                aria-label="Предыдущее фото"
              >
                <ChevronLeft size={24} className="text-brand-orange" />
              </button>
              
              <button
                onClick={nextImage}
                className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white p-3 rounded-full shadow-lg transition-all duration-300 group"
                aria-label="Следующее фото"
              >
                <ChevronRight size={24} className="text-brand-orange" />
              </button>

              {/* Индикатор */}
              <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 text-white px-4 py-2 rounded-full text-sm">
                {currentImageIndex + 1} / {carImages.length}
              </div>
            </div>

            {/* Миниатюры */}
            <div className="mt-6 flex gap-3 overflow-x-auto pb-4">
              {carImages.map((image, index) => (
                <button
                  key={index}
                  onClick={() => setCurrentImageIndex(index)}
                  className={`flex-shrink-0 w-24 h-16 rounded-lg overflow-hidden transition-all duration-300 ${
                    index === currentImageIndex 
                      ? 'ring-4 ring-brand-orange scale-105' 
                      : 'opacity-60 hover:opacity-100'
                  }`}
                >
                  <img 
                    src={image} 
                    alt={`Миниатюра ${index + 1}`}
                    className="w-full h-full object-cover"
                  />
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Список транспортных средств */}
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
            Список транспортных средств ООО «ГЕОВЕКТОР»
          </h2>

          <div className="overflow-x-auto shadow-lg rounded-2xl">
            <table className="w-full bg-white">
              <thead>
                <tr className="bg-brand-orange text-white">
                  <th className="px-6 py-4 text-left font-bold w-20">№</th>
                  <th className="px-6 py-4 text-left font-bold">Тип авто</th>
                  <th className="px-6 py-4 text-left font-bold">Марка машины</th>
                </tr>
              </thead>
              <tbody>
                {vehicles.map((vehicle, index) => (
                  <tr 
                    key={index}
                    className={`border-b border-gray-200 hover:bg-gray-50 transition-colors ${
                      index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
                    }`}
                  >
                    <td className="px-6 py-4 font-semibold text-brand-orange text-center">
                      {index + 1}
                    </td>
                    <td className="px-6 py-4 text-gray-700">
                      {vehicle.type || ''}
                    </td>
                    <td className="px-6 py-4 font-semibold text-gray-900">
                      {vehicle.brand}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Статистика */}
          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-brand-orange text-white rounded-2xl p-6 text-center">
              <div className="text-4xl font-bold mb-2">{vehicles.length}</div>
              <div className="text-lg">Единиц техники</div>
            </div>
            <div className="bg-gray-900 text-white rounded-2xl p-6 text-center">
              <div className="text-4xl font-bold mb-2">{carImages.length}</div>
              <div className="text-lg">Фотографий</div>
            </div>
            <div className="bg-brand-orange text-white rounded-2xl p-6 text-center">
              <div className="text-4xl font-bold mb-2">24/7</div>
              <div className="text-lg">Готовность к работе</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FleetPage;