'use client';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
import TextAnimation from '@/components/text/TextAnimation';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

import { usePathname } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductDetailPage() {
  const pathname = usePathname();
  const productId = pathname.split('/').pop();

  const [product, setProduct] = useState<any>(null);

  useEffect(() => {
    // Simulate fetching product details
    const dummyProducts = [
      {
        id: "prod1", brand: "BrandA", name: "Stylish Shirt", price: "$29.99", rating: 4.5,
        reviewCount: "120", imageSrc: "https://via.placeholder.com/600x400?text=Product+1", imageAlt: "Stylish Shirt",        description: "A very stylish shirt made from premium cotton. Perfect for any occasion.",        details: ["100% Cotton", "Machine Washable", "Available in S, M, L, XL"],
        reviews: [
            { author: "Alice", text: "Great shirt, very comfortable!", rating: 5 },
            { author: "Bob", text: "Good quality for the price.", rating: 4 },
        ]
      },
      {
        id: "prod2", brand: "BrandB", name: "Comfy Jeans", price: "$49.99", rating: 4.2,
        reviewCount: "85", imageSrc: "https://via.placeholder.com/600x400?text=Product+2", imageAlt: "Comfy Jeans",        description: "Comfortable and durable jeans, perfect for everyday wear.",        details: ["98% Cotton, 2% Spandex", "Regular Fit", "Multiple sizes available"],
        reviews: [
            { author: "Charlie", text: "My new favorite jeans!", rating: 5 },
            { author: "Diana", text: "A bit snug, but good overall.", rating: 3 },
        ]
      },
      {
        id: "prod3", brand: "BrandC", name: "Running Shoes", price: "$79.99", rating: 4.8,
        reviewCount: "200", imageSrc: "https://via.placeholder.com/600x400?text=Product+3", imageAlt: "Running Shoes",        description: "High-performance running shoes designed for ultimate comfort and speed.",        details: ["Lightweight design", "Breathable mesh", "Shock-absorbing sole"],
        reviews: [
            { author: "Eve", text: "Amazing shoes for long runs.", rating: 5 },
            { author: "Frank", text: "Worth every penny.", rating: 5 },
        ]
      },
    ];

    const foundProduct = dummyProducts.find(p => p.id === productId);
    setProduct(foundProduct);
  }, [productId]);

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Cart", id: "/cart" },
    { name: "Checkout", id: "/checkout" },
    { name: "Order Conf", id: "/order-confirmation" },
    { name: "Products", id: "/products/1" },
    { name: "Collections", id: "/collections/all" }
  ];

  if (!product) {
    return (
      <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="medium"
        background="none"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
      >
        <div id="nav" data-section="nav">
          <NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
        </div>
        <main className="flex min-h-screen flex-col items-center justify-center p-24">
          <p>Loading product details...</p>
        </main>
        <FooterBaseReveal
          logoText="Webild"
          columns={[
            {
              title: "Company", items: [
                { label: "About Us", href: "/" },
                { label: "Contact", href: "/" },
              ],
            },
            {
              title: "Legal", items: [
                { label: "Privacy Policy", href: "/" },
                { label: "Terms of Service", href: "/" },
              ],
            },
          ]}
          copyrightText="© 2023 Webild. All rights reserved."
        />
      </ThemeProvider>
    );
  }

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
      </div>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div id="product-detail-hero" data-section="product-detail-hero" className="w-full max-w-4xl mx-auto">
          <div className="text-center my-8">
            <TextAnimation
              type="entrance-slide"
              className="text-4xl font-bold mb-4"
              text={`Details for ${product?.name || 'Product'}`}
            />
          </div>

          <div className="grid md:grid-cols-2 gap-8 my-10">
            <div className="relative aspect-video">
              <img src={product.imageSrc} alt={product.imageAlt} className="w-full h-full object-cover rounded-lg shadow-lg" />
            </div>
            <div>
              <h2 className="text-3xl font-bold mb-2">{product.name}</h2>
              <p className="text-2xl text-primary-cta font-semibold mb-4">{product.price}</p>
              <div className="flex items-center mb-4">
                <span className="text-yellow-500 mr-1">{'★'.repeat(Math.floor(product.rating))}</span>
                <span className="text-gray-400">{'★'.repeat(5 - Math.floor(product.rating))}</span>
                <span className="ml-2 text-sm text-gray-600">({product.reviewCount} Reviews)</span>
              </div>
              <p className="text-gray-700 mb-6">{product.description}</p>
              <h3 className="text-xl font-semibold mb-2">Product Details</h3>
              <ul className="list-disc list-inside text-gray-600 mb-6">
                {product.details.map((detail: string, index: number) => (
                  <li key={index}>{detail}</li>
                ))}
              </ul>
              <ButtonTextShift
                text="Add to Cart"
                onClick={() => alert(`Added ${product.name} to cart!`)}
                className="w-full py-3 text-lg"
                textClassName="font-bold"
              />
            </div>
          </div>

          <div className="my-10">
            <h3 className="text-2xl font-bold mb-4 text-center">Customer Reviews</h3>
            {product.reviews.length > 0 ? (
              <div className="grid md:grid-cols-2 gap-6">
                {product.reviews.map((review: any, index: number) => (
                  <div key={index} className="bg-card p-6 rounded-lg shadow-md">
                    <div className="flex items-center mb-2">
                      <span className="text-yellow-500 mr-1">{'★'.repeat(review.rating)}</span>
                      <span className="text-gray-400">{'★'.repeat(5 - review.rating)}</span>
                      <span className="ml-2 font-semibold">{review.author}</span>
                    </div>
                    <p className="text-gray-700">{review.text}</p>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-center text-gray-600">No reviews yet for this product.</p>
            )}
          </div>
        </div>
      </main>
      <FooterBaseReveal
        logoText="Webild"
        columns={[
          {
            title: "Company",            items: [
              { label: "About Us", href: "/" },
              { label: "Contact", href: "/" }
            ]
          },
          {
            title: "Legal",            items: [
              { label: "Privacy Policy", href: "/" },
              { label: "Terms of Service", href: "/" }
            ]
          }
        ]}
        copyrightText="© 2023 Webild. All rights reserved."
      />
    </ThemeProvider>
  );
}
