import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { Switch } from "@/components/ui/switch";
import { FaTelegramPlane, FaWhatsapp, FaInstagram, FaYoutube } from "react-icons/fa";

const carData = [
  { id: 1, name: "Toyota Crown", year: 2020, mileage: "30,000 км", price: "$25,000", imageUrl: "https://global.toyota/pages/news/images/2018/06/26/1600_crown/crw1806_01_s.jpg" },
  { id: 2, name: "Nissan Skyline", year: 2019, mileage: "20,000 км", price: "$30,000", imageUrl: "https://www.valleyhitoyota.com/blogs/3072/wp-content/uploads/2024/07/2025_Crown_Platinum_BronzeAgeBiTone_H-1500x789_converted.webp" },
  { id: 3, name: "Mazda RX-8", year: 2018, mileage: "50,000 км", price: "$18,000", imageUrl: "https://autoseu.com/wp-content/uploads/2022/10/2023-toyota-crown_100847955_h.jpg" },
  { id: 4, name: "Honda Civic", year: 2021, mileage: "10,000 км", price: "$22,000", imageUrl: "https://www.toyotahawaii.com/on/demandware.static/-/Sites-Servco_master/default/dw59523e8f/images/model/Crown/360/oxygen-white/23_Crown_XLE_OxygenWhite_4.webp" },
  { id: 5, name: "Subaru Impreza", year: 2017, mileage: "40,000 км", price: "$20,000", imageUrl: "https://tmna.aemassets.toyota.com/is/image/toyota/toyota/jellies/max/2025/toyotacrown/platinum/4030/2yz/36/5.png?fmt=png-alpha&wid=930&qlt=90" },
  { id: 6, name: "Lexus RX", year: 2022, mileage: "5,000 км", price: "$50,000", imageUrl: "https://images.unsplash.com/photo-1592928300063-61b5e1b9e023" }
];

const itemsPerPage = 3;

export default function CarImportSite() {
  const [searchTerm, setSearchTerm] = useState("");
  const [darkMode, setDarkMode] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);

  const filteredCars = carData.filter(car =>
    car.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const totalPages = Math.ceil(filteredCars.length / itemsPerPage);
  const displayedCars = filteredCars.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);

  return (
    <motion.div className={`container mx-auto p-8 min-h-screen ${darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-black'}`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
      <header className="text-center mb-8 p-6 rounded-lg flex flex-col items-center bg-gradient-to-r from-blue-500 to-purple-500 text-white">
        <div className="flex space-x-4 mb-4">
          <a href="#" className="text-2xl hover:text-gray-300"><FaTelegramPlane /></a>
          <a href="#" className="text-2xl hover:text-gray-300"><FaWhatsapp /></a>
          <a href="#" className="text-2xl hover:text-gray-300"><FaInstagram /></a>
          <a href="#" className="text-2xl hover:text-gray-300"><FaYoutube /></a>
        </div>
        <motion.h1 className="text-4xl font-bold">Импорт автомобилей из-за границы</motion.h1>
        <div className="flex items-center mt-4">
          <span className="mr-2">Тёмный режим</span>
          <Switch checked={darkMode} onCheckedChange={() => setDarkMode(!darkMode)} />
        </div>
      </header>

      <section className="mb-8">
        <Input placeholder="Поиск автомобилей" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="border-2 border-blue-300 p-2 rounded-lg w-full" />
      </section>

      <section id="catalog" className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {displayedCars.map(car => (
          <motion.div key={car.id} whileHover={{ scale: 1.05 }} className="rounded-lg shadow-md p-4 bg-white hover:bg-blue-50 transition-transform">
            <CardContent>
              <h3 className="text-xl font-bold text-blue-700">{car.name}</h3>
              <img src={car.imageUrl} alt={car.name} className="w-full h-40 object-cover rounded-lg" />
              <p className="mt-2">Год: {car.year} | Пробег: {car.mileage}</p>
              <p className="mt-2 text-green-600">Цена: {car.price}</p>
              <Button className="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white">Подробнее</Button>
            </CardContent>
          </motion.div>
        ))}
      </section>

      <div className="flex justify-center mt-8">
        <Button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} disabled={currentPage === 1}>Предыдущая</Button>
        <span className="mx-4">Страница {currentPage} из {totalPages}</span>
        <Button onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} disabled={currentPage === totalPages}>Следующая</Button>
      </div>

      <footer className="mt-12 text-center text-sm bg-gray-200 p-4 rounded-lg">
        <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>© 2025 Импорт Авто. Все права защищены.</motion.p>
        <p>Телефон: +7 (999) 123-45-67</p>
        <p>Адрес: г. Москва, ул. Примерная, д. 10</p>
        <p>Email: info@importauto.ru</p>
      </footer>
    </motion.div>
  );
}