'use client';

import React, { useState } from 'react';
import { tsProducts } from '@/lib/tsProducts';
import { ArrowLeft, Download } from 'lucide-react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

type Product = (typeof tsProducts)[number];

const transformerCataloguePdfUrl =
  'https://drive.google.com/uc?export=download&id=1iWVOGtKT2gcxo8F9MU9MFNHASJHRfWJN';

const ProductDetailsClient = ({ initialProduct }: { initialProduct: Product }) => {
  const [selectedProduct, setSelectedProduct] = useState<Product>(initialProduct);
  const [mainImage, setMainImage] = useState(initialProduct.images[0].src);

  const handleThumbnailClick = (image: Product['images'][number]) => {
    setMainImage(image.src);
  };

  const handleProductSelect = (product: Product) => {
    setSelectedProduct(product);
    setMainImage(product.images[0].src);
  };

  const handleDownload = () => {
    const downloadLink = document.createElement('a');
    downloadLink.href = transformerCataloguePdfUrl;
    downloadLink.download = `${selectedProduct.name}-transformer-details.pdf`;
    downloadLink.target = '_blank';
    downloadLink.rel = 'noopener noreferrer';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    downloadLink.remove();
  };

  const router = useRouter();

  return (
    <section className="py-16 bg-gray-50">
      <div className="container mx-auto px-6 lg:pt-0 pt-20">
        <button
        onClick={() => router.back()}
        className="flex items-center gap-2 lg:px-4 px-2 lg:py-2 py-1 hover:bg-blue-50 hover:text-blue-600 rounded-lg border-2 border-blue-600/30 text-blue-500 font-bold transition cursor-pointer "
        >
        <ArrowLeft size={20} />
        Back
        </button>
        <div className="flex text-nowrap overflow-auto lg:gap-3 gap-2 lg:mb-8 mb-3 lg:justify-center lg:mt-0 mt-3 scrollbar-width pb-2">
          {tsProducts.map((product) => (
            <button
              key={product.id}
              onClick={() => handleProductSelect(product)}
              className={`lg:px-6 px-3 lg:py-2 py-1 rounded-full lg:text-base text-sm font-semibold transition cursor-pointer ${
                selectedProduct.id === product.id
                  ? 'bg-blue-500 text-white'
                  : 'bg-white text-gray-700 hover:bg-blue-100 border border-gray-200'
              }`}
            >
              {product.name}
            </button>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 bg-white rounded-2xl shadow-lg p-8">
          <div className="space-y-4">
            <div className="bg-gray-100 rounded-2xl aspect-[4/4]">
              <img
                src={mainImage.src}
                alt={selectedProduct.title}
                className="w-full h-full"
              />
            </div>

            <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-width">
              {selectedProduct.images.map((img, index) => (
                <button
                  key={index}
                  onClick={() => handleThumbnailClick(img)}
                  className={`flex-shrink-0 w-24 h-24 p-2 rounded-xl cursor-pointer overflow-hidden border-3 transition ${
                    mainImage === img.src ? 'border-blue-400' : 'border-transparent hover:border-gray-300'
                  }`}
                >
                  <img src={img.src.src} alt={img.alt} className="w-full h-full object-cover" />
                </button>
              ))}
            </div>
          </div>

          <div className="space-y-6">
            <span className="inline-block bg-blue-100 text-blue-600 text-sm font-semibold px-4 py-1 rounded-full">
              {selectedProduct.name}
            </span>
            <h1 className="text-3xl md:text-4xl font-bold text-gray-900">{selectedProduct.title}</h1>
            <p className="text-lg text-gray-600 border-l-4 border-blue-500 pl-4">
              {selectedProduct.shortDescription}
            </p>
            <div className="bg-gray-50 rounded-xl p-4">
              <p className="text-gray-700 leading-relaxed">{selectedProduct.fullDescription}</p>
            </div>

            {selectedProduct.technicalSpecifications && (
              <div>
                <h3 className="text-xl font-bold text-gray-900 mb-3 flex items-center gap-2">
                  <span className="w-1 h-6 bg-blue-500 rounded-full"></span>
                  Technical Specifications
                </h3>
                <div className="bg-gray-50 rounded-xl p-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {Object.entries(selectedProduct.technicalSpecifications).map(([key, value]) => (
                    <div key={key} className="flex flex-col">
                      <span className="text-sm text-gray-500 font-medium">
                        {key.replace(/([A-Z])/g, ' $1').replace(/^./, (value) => value.toUpperCase())}
                      </span>
                      <span className="text-gray-800 font-semibold">{value}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            <div className="flex flex-wrap gap-4 pt-4 border-t border-gray-200">
              <button
                type="button"
                onClick={handleDownload}
                className="cursor-pointer bg-blue-500 hover:bg-blue-600 text-white font-semibold px-8 py-3 rounded-full transition shadow-lg hover:shadow-blue-200 inline-flex items-center gap-2"
              >
                <Download size={18} />
                Download Details
              </button>
              <Link href={'/contact'} className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold px-8 py-3 rounded-full cursor-pointer transition">
                Contact Us
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProductDetailsClient;