"use client"
import { Eye, Download, X, FileText } from 'lucide-react';
import { useState, useEffect } from 'react';
import { BsFilePdf } from 'react-icons/bs';
import { toast } from 'sonner';
import { Button } from './ui/button';

import cablesImg from '../../public/assets/catalogue/cable-3.png'
import lightsImg from '../../public/assets/catalogue/lights-catalogue.jpg'
import fanhImg from '../../public/assets/catalogue/fan-catalogue.jpg'
import switchImg from '../../public/assets/catalogue/switch-catalogue.jpg'
import accessoriesImg from '../../public/assets/catalogue/accessories.jpg'
import pianoImg from '../../public/assets/catalogue/piano-series.png'
import transformerImg from '../../public/assets/catalogue/tsTransformer.png'
import busbarImg from '../../public/assets/catalogue/busbarCatalogue.png'
import superEnamelledImg from '../../public/assets/catalogue/Super-Enamelled.jpeg'

interface Product {
  id: number;
  name: string;
  description: string;
  image: string;
  pdfUrl: string;
}

interface PDFModalProps {
  isOpen: boolean;
  onClose: () => void;
  productName: string;
  pdfUrl: string;
  onDownload: () => void;
}

function PDFModal({ isOpen, onClose, productName, pdfUrl, onDownload }: PDFModalProps) {
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }

    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [isOpen]);

  if (!isOpen) return null;

  const getPreviewUrl = (url: string) => {
  const match = url.match(/\/d\/(.*?)\//);
  if (!match) return url;
  return `https://drive.google.com/file/d/${match[1]}/preview`;
};

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />

      <div className="relative bg-white rounded-lg shadow-2xl w-[90vw] h-[90vh] max-w-6xl flex flex-col animate-in fade-in zoom-in-95 duration-200">
        <div className="lg:flex items-center justify-between px-6 py-4 border-b border-gray-200">
          <h2 className="lg:mb-0 mb-5 text-xl font-semibold text-gray-900">{productName} - Product Details</h2>
          <div className="flex items-center gap-2">
            <button
              onClick={onDownload}
              className="flex items-center gap-2 bg-btnPrimary hover:bg-btnSecondary text-white px-4 py-2 rounded-lg transition-colors duration-200 cursor-pointer"
            >
              <Download className="w-4 h-4" />
              Download PDF
            </button>
            <button
              onClick={onClose}
              className="p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200"
              aria-label="Close"
            >
              <X className="w-6 h-6 text-gray-600" />
            </button>
          </div>
        </div>

        <div className="flex-1 overflow-hidden">
         <iframe
          src={getPreviewUrl(pdfUrl)}
          className="w-full h-full border-0"
          title={productName}
        />
        </div>
      </div>
    </div>
  );
}

function ProductCatalogueCard({ product }: { product: Product }) {
  const [isHovered, setIsHovered] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleView = () => {
    setIsModalOpen(true);
  };

const handleDownload = () => {
  window.open(product.pdfUrl, "_blank"); 

  toast.success("PDF Opened!", {
    description: `${product.name} product details opened in a new tab.`,
    duration: 3000,
  });
};

  return (
    <div className="group relative rounded-lg p-6 flex flex-col items-center justify-between transition-all duration-300 border-2 hover:shadow-lg">
      <div className="relative w-full h-48 flex items-center justify-center mb-4 overflow-hidden rounded-lg">
        <img
            src={product.image}
            alt={product.name}
            className="w-full h-full object-cover rounded-md transition-transform duration-300 group-hover:scale-105 "
        />

        <div
            className="
            absolute inset-0
            bg-black/40
            rounded-lg
            flex items-center justify-center gap-4
            lg:opacity-0 lg:invisible
            transition-all duration-300
            lg:group-hover:opacity-100
            lg:group-hover:visible
            "
        >
            <Button
            onClick={handleView}
            className="bg-btnPrimary h-10 w-10 hover:bg-gray-100 group/button  rounded-full transition-all duration-200 hover:scale-110 cursor-pointer"
            aria-label="View PDF"
            >
            <FileText className="w-6 h-6 text-white group-hover/button:text-btnPrimary duration-200" />
            </Button>

            <Button
              onClick={handleDownload}
              className="bg-btnPrimary h-10 w-10 hover:bg-gray-100 group/button rounded-full transition-all duration-200 hover:scale-110 cursor-pointer"
              aria-label="Open PDF"
            >
              <Download className="w-6 h-6 text-white group-hover/button:text-btnPrimary duration-200" />
            </Button>
        </div>
        {/* <div
            className="
            absolute inset-0
            bg-black/40
            rounded-lg
            flex items-center justify-center gap-4
            transition-all duration-300
            lg:hidden visible
            "
        >
            <Button
            onClick={handleView}
            className="bg-btnPrimary h-10 w-10 hover:bg-gray-100 group/button  rounded-full transition-all duration-200 hover:scale-110 cursor-pointer"
            aria-label="View PDF"
            >
            <FileText className="w-6 h-6 text-white group-hover/button:text-btnPrimary duration-200" />
            </Button>

            <Button
              onClick={handleDownload}
              className="bg-btnPrimary h-10 w-10 hover:bg-gray-100 group/button rounded-full transition-all duration-200 hover:scale-110 cursor-pointer"
              aria-label="Open PDF"
            >
              <Download className="w-6 h-6 text-white group-hover/button:text-btnPrimary duration-200" />
            </Button>
        </div> */}
        </div>

      <div className="w-full text-center">
        <h3 className="text-gray-900 font-semibold mb-2">{product.name}</h3>
        <p className="text-gray-600 text-sm mb-4">{product.description}</p>
      </div>

      <PDFModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        productName={product.name}
        pdfUrl={product.pdfUrl}
        onDownload={handleDownload}
      />
    </div>
  );
}

export default function ProductCatalogue() {
  const products: Product[] = [
  {
    id: 1,
    name: "Cables",
    description: "Engineered for safety, reliability, and performance.",
    image: cablesImg.src,
    pdfUrl: "https://drive.google.com/file/d/1dOLF7gz2yyarYXLwPBnjOfYXrH8Snh92/view?usp=drive_link"
  },
  {
    id: 2,
    name: "Super Enamelled",
    description: "Premium Enamelled Copper Wire",
    image: superEnamelledImg.src,
    pdfUrl: "https://drive.google.com/file/d/1zdhuSrfXIjC-Mxe5KtSqJ9e3zkcJRsnq/view?usp=sharing"
  },
  {
    id: 3,
    name: "Lights",
    description: "Smart lighting for brighter living.",
    image: lightsImg.src,
    pdfUrl: "https://drive.google.com/file/d/1Xy4nKvENEdVBGXzv4DouUYAw3QqwHlYu/view?usp=sharing"
  },
  {
    id: 4,
    name: "Fan",
    description: "Comfort powered by innovation.",
    image: fanhImg.src,
    pdfUrl: "https://drive.google.com/file/d/1qoAOTpKOWYYwgwiB7pEh97qn4FW7GUNX/view?usp=sharing"
  },
  {
    id: 5,
    name: "Switch Socket",
    description: "Safety, style, and dependable performance.",
    image: switchImg.src,
    pdfUrl: "https://drive.google.com/file/d/10CuG33wrXH0V1fdqfsJv3nazWgC5pBEM/view?usp=sharing"
  },
  {
    id: 6,
    name: "Accessories",
    description: "Essential solutions for every electrical system.",
    image: accessoriesImg.src,
    pdfUrl: "https://drive.google.com/file/d/1Uk8hh-90a3NmiQQxen1fF8pvZ9_6HRlu/view?usp=sharing"
  },
  {
    id: 7,
    name: "Piano Series",
    description: "Modern design meets everyday functionality.",
    image: pianoImg.src,
    pdfUrl: "https://drive.google.com/file/d/1Q7XjImVWunTHXBh1UnBNoEeVcGqBTzF-/view?usp=sharing"
  },
  {
    id: 8,
    name: "TS Transformers",
    description: "Powering reliable energy distribution.",
    image: transformerImg.src,
    pdfUrl: "https://drive.google.com/file/d/1iWVOGtKT2gcxo8F9MU9MFNHASJHRfWJN/view?usp=sharing"
  },
   {
    id: 9,
    name: "Busbar",
    description: "Copper Busbars & Flats – Superior Electrical Conductivity",
    image: busbarImg.src,
    pdfUrl: "https://drive.google.com/file/d/1K6bwCr-sxf9H0GBuMaUz808m8Zoi65f1/view?usp=sharing"
  }
];

  return (
    <div className="min-h-screen bg-gray-50 px-8 pt-5 pb-10 lg:py-15">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {products.map((product) => (
            <ProductCatalogueCard key={product.id} product={product} />
          ))}
        </div>
      </div>
    </div>
  );
}