"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Phone, MessageCircle, ChevronRight } from "lucide-react";
import Image from "next/image";

interface ProductDetailPageProps {
  params: {
    modelName: string;
  };
}

export default function ProductDetailPage({ params }: ProductDetailPageProps) {
  const modelName = decodeURIComponent(params.modelName);
  const [selectedImage, setSelectedImage] = useState(0);

  const navItems = [
    { name: "Hizmetler", id: "services" },
    { name: "Araçlarımız", id: "products" },
    { name: "Neden Biz", id: "metrics" },
    { name: "SSS", id: "faq" },
    { name: "İletişim", id: "contact" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Ana Sayfa", href: "/" },
        { label: "Hakkımızda", href: "/hakkimizda" },
        { label: "Hizmetler", href: "/hizmetler" },
        { label: "Ürünler", href: "/urunler" },
      ],
    },
    {
      items: [
        { label: "Kiralama", href: "/hizmetler" },
        { label: "Satış", href: "/urunler" },
        { label: "Servis", href: "/hizmetler" },
        { label: "Bakım", href: "/hizmetler" },
      ],
    },
    {
      items: [
        { label: "Sık Sorulan Sorular", href: "#faq" },
        { label: "İletişim", href: "/iletisim" },
        { label: "Gizlilik Politikası", href: "#" },
        { label: "Kullanım Şartları", href: "#" },
      ],
    },
    {
      items: [
        { label: "Bize Yazın", href: "mailto:info@timforklift.com.tr" },
        { label: "Çağrı Merkezi: 0532 402 1146", href: "tel:+905324021146" },
        { label: "Tel: 0216 537 1439", href: "tel:+902165371439" },
        { label: "WhatsApp Destek", href: "https://wa.me/905324021146" },
      ],
    },
  ];

  const productImages = [
    "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg",    "http://img.b2bpic.net/free-photo/forklift-operator-loading-cargo-while-working-warehouse-his-colleagues-are-background_637285-4210.jpg",    "http://img.b2bpic.net/free-photo/car-mechanic-repairs-blue-car-garage-with-tools_1157-46532.jpg"];

  const specifications = [
    { label: "Model Adı", value: modelName },
    { label: "Seri", value: "E-Pro 3000 Series" },
    { label: "Taşıma Kapasitesi", value: "3.000 kg" },
    { label: "Kaldırma Yüksekliği", value: "4.800 mm" },
    { label: "Çatal Uzunluğu", value: "1.200 mm" },
    { label: "Motor Türü", value: "AC Elektrik Motor" },
    { label: "Motor Gücü", value: "48 kW" },
    { label: "Batarya Türü", value: "Lityum-İon (LiFePO4)" },
    { label: "Batarya Voltajı", value: "48V / 100Ah" },
    { label: "Dönüş Yarıçapı", value: "2.200 mm" },
    { label: "Makine Ağırlığı", value: "4.500 kg" },
    { label: "Lastik Türü", value: "Pneumatik", value2: "Rulmanlı" },
    { label: "Direksiyon Sistemi", value: "Hidrolik Elektrik Geçişli" },
    { label: "Hidrolik Sistem", value: "Kuvvetlendirilmiş Körüklü Sistem" },
    { label: "Fren Sistemi", value: "Elektrik Rejeneratif + Mekanik" },
    { label: "Güvenlik Sensörleri", value: "Çarpışma + Kötü Kullanım Algılama" },
    { label: "Kabin Özellikleri", value: "Işıklandırmalı LCD Ekran" },
    { label: "Operatör Konfor Özellikleri", value: "Ergonomik Koltuk + Titreşim Damping" },
    { label: "Eğimlilik Yüzdesi", value: "%15" },
    { label: "Enerji Tüketimi", value: "8 kWh / 100 saat çalışma" },
    { label: "Çalışma Süresi", value: "8 saat sürekli" },
    { label: "Şarj Süresi", value: "4 saat (80% kapasiteye)" },
    { label: "İsteğe Bağlı Ataşmanlar", value: "Klasör, Fınca, Döner Kopya, Kova" },
    { label: "CE Sertifikasyonu", value: "Evet - 2006/42/EC Direktifi" },
    { label: "Garanti Süresi", value: "2 yıl veya 2.000 çalışma saati" },
    { label: "Bakım Planı", value: "Her 250 saat veya 3 ay" },
    { label: "Satış Sonrası Hizmet", value: "Türkiye Geneli 2 Saat Müdahale" },
  ];

  const otherModels = [
    { name: "E-Pro 2000", image: "http://img.b2bpic.net/free-photo/factory-worker-protective-suit-with-hardhat-driving-forklift_342744-43.jpg" },
    { name: "E-Pro 2500", image: "http://img.b2bpic.net/free-photo/forklift-operator-loading-cargo-while-working-warehouse-his-colleagues-are-background_637285-4210.jpg" },
    { name: "E-Pro 3500", image: "http://img.b2bpic.net/free-photo/car-mechanic-repairs-blue-car-garage-with-tools_1157-46532.jpg" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="medium"
      background="blurBottom"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div className="min-h-screen flex flex-col">
        {/* Navbar */}
        <div id="nav" data-section="nav">
          <NavbarStyleApple brandName="Tim Forklift" navItems={navItems} />
        </div>

        {/* Main Content */}
        <div className="flex-1 w-full py-12 px-4 md:px-8 lg:px-16">
          <div className="max-w-6xl mx-auto">
            {/* Breadcrumb */}
            <div className="flex items-center gap-2 text-sm text-gray-600 mb-8">
              <a href="/" className="hover:text-red-600">
                Ana Sayfa
              </a>
              <ChevronRight size={16} />
              <a href="/#products" className="hover:text-red-600">
                Ürünler
              </a>
              <ChevronRight size={16} />
              <span className="text-red-600 font-semibold">{modelName}</span>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
              {/* Product Image Section */}
              <div className="lg:col-span-2">
                <div className="bg-white rounded-lg p-6 mb-6 flex items-center justify-center">
                  <img
                    src={productImages[selectedImage]}
                    alt={modelName}
                    className="w-full h-auto max-h-96 object-contain"
                  />
                </div>
                <div className="flex gap-4 overflow-x-auto">
                  {productImages.map((img, idx) => (
                    <button
                      key={idx}
                      onClick={() => setSelectedImage(idx)}
                      className={`flex-shrink-0 w-24 h-24 rounded-lg border-2 overflow-hidden ${
                        selectedImage === idx ? "border-red-600" : "border-gray-300"
                      }`}
                    >
                      <img src={img} alt="thumbnail" className="w-full h-full object-cover" />
                    </button>
                  ))}
                </div>
              </div>

              {/* CTA Box */}
              <div className="bg-red-600 text-white rounded-lg p-6 h-fit">
                <h3 className="text-2xl font-bold mb-6">Detaylı Bilgi</h3>
                <p className="text-sm mb-6 text-red-100">
                  Bu model hakkında detaylı fiyat ve kiralama seçenekleri için bize ulaşın. Türkiye genelinde hızlı teslimat ve kurulum hizmeti sağlarız.
                </p>

                <div className="space-y-4 mb-6">
                  <a
                    href="tel:+902165371439"
                    className="flex items-center justify-center gap-2 bg-white text-red-600 font-semibold py-3 px-4 rounded-lg hover:bg-red-50 transition-colors"
                  >
                    <Phone size={20} />
                    0216 537 14 39
                  </a>
                  <a
                    href="https://wa.me/905324021146"
                    className="flex items-center justify-center gap-2 bg-white text-red-600 font-semibold py-3 px-4 rounded-lg hover:bg-red-50 transition-colors"
                  >
                    <MessageCircle size={20} />
                    WhatsApp Temas
                  </a>
                </div>

                <div className="border-t border-red-500 pt-4">
                  <p className="text-xs text-red-100 mb-2">📍 Türkiye Geneli Servis</p>
                  <p className="text-xs text-red-100">⏱️ 2 Saat Müdahale Garantisi</p>
                </div>
              </div>
            </div>

            {/* Specifications Table */}
            <div className="mb-12">
              <h2 className="text-3xl font-bold mb-6 text-gray-800">Teknik Özellikleri</h2>
              <div className="overflow-x-auto">
                <table className="w-full border-collapse">
                  <tbody>
                    {specifications.map((spec, idx) => (
                      <tr key={idx} className={idx % 2 === 0 ? "bg-gray-50" : "bg-white"}>
                        <td className="border border-gray-200 px-4 py-3 font-semibold text-gray-700 w-1/3">
                          {spec.label}
                        </td>
                        <td className="border border-gray-200 px-4 py-3 text-gray-600">
                          {spec.value}
                        </td>
                        {spec.value2 && (
                          <td className="border border-gray-200 px-4 py-3 text-gray-600">
                            {spec.value2}
                          </td>
                        )}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Other Models Carousel */}
            <div className="mb-12">
              <h2 className="text-3xl font-bold mb-6 text-gray-800">Diğer Elektrikli Forklift Modelleri</h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {otherModels.map((model, idx) => (
                  <a
                    key={idx}
                    href={`/elektrikli-forklift/${encodeURIComponent(model.name)}`}
                    className="bg-white rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
                  >
                    <img src={model.image} alt={model.name} className="w-full h-48 object-cover" />
                    <div className="p-4">
                      <h3 className="font-semibold text-gray-800 mb-2">{model.name}</h3>
                      <div className="flex items-center text-red-600 hover:text-red-700">
                        Detaylı Bilgi
                        <ChevronRight size={16} className="ml-1" />
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div id="footer" data-section="footer">
          <FooterLogoEmphasis logoText="Tim Forklift A.Ş." columns={footerColumns} />
        </div>
      </div>
    </ThemeProvider>
  );
}
