"use client";
import React from "react";
import { ThemeProvider } from "@/components/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import Image from "next/image";
import { Sparkles, Star } from "lucide-react";

interface RingDetails {
  id: string;
  category: string;
  name: string;
  price: string;
  rating: number;
  reviewCount: string;
  imageSrc: string;
  imageAlt: string;
  description: string;
  features: string[];
}

const getRingDetails = (productId: string): RingDetails | null => {
  const basePrice = parseInt(productId.split('-')[1]) * 150 + 2500;
  const rating = Math.min(5, 3 + Math.floor(parseInt(productId.split('-')[1]) / 10) + (parseInt(productId.split('-')[1]) % 5) / 5);
  const reviewCount = `${Math.floor(parseInt(productId.split('-')[1]) * 3.7) + 10} reviews`;

  if (productId.startsWith("ring-")) {
    return {
      id: productId,
      category: "Luxury Diamond Rings",      name: `Exquisite ${productId.replace('ring-', 'Ring ')}`,
      price: `$${basePrice.toLocaleString()}`,
      rating: rating,
      reviewCount: reviewCount,
      imageSrc: `https://source.unsplash.com/random/1200x900/?diamond-ring,${productId}`,
      imageAlt: `Exquisite Diamond Ring ${productId}`,
      description: `Behold the ${productId.replace('ring-', 'Ring ')}, a masterpiece of design and craftsmanship. This magnificent piece features a scintillating ${Math.round(Math.random() * 2 + 1.5)}-carat center diamond, flanked by an array of meticulously set smaller diamonds. The setting, available in platinum or 18k white gold, is engineered to maximize light return, ensuring unparalleled brilliance from every angle. Perfect for engagements, anniversaries, or as a timeless heirloom.`,
      features: [
        `Center Stone: ${Math.round(Math.random() * 2 + 1.5)}-carat natural diamond`,
        "Accent Stones: Pave-set conflict-free diamonds",        "Metal: Choose from Platinum, 18k White Gold, or Rose Gold",        "Clarity: VS1-VVS2",        "Color: D-F (Colorless)",        "Certification: GIA or IGI certified",        "Hand-polished for a mirror-like finish",        "Includes a complimentary resizing service"
      ]
    };
  }
  return null;
};

export default function ProductDetailsPage({ params }: { params: { productId: string } }) {
  const { productId } = params;
  const product = getRingDetails(productId);

  const navbarNavItems = [
    { name: "Home", id: "/" },
    { name: "Rings Collection", id: "/rings-collection" },
    { name: product ? product.name : "Product Details", id: `/rings-collection/${productId}` }
  ];

  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"
      >
        <NavbarStyleFullscreen
          navItems={navbarNavItems}
          brandName="Luxury Jewels"
          logoSrc="/placeholder-logo.svg"
        />
        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-100px)] text-center p-8">
          <h1 className="text-4xl font-bold mb-4">Product Not Found</h1>
          <p className="text-lg">The ring you are looking for does not exist.</p>
        </div>
      </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"
    >
      <NavbarStyleFullscreen
        navItems={navbarNavItems}
        brandName="Luxury Jewels"
        logoSrc="/placeholder-logo.svg"
      />
      <div className="container mx-auto px-4 py-16">
        <div id="product-details" data-section="product-details" className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
          <div className="relative w-full h-[500px] bg-gray-100 rounded-lg overflow-hidden shadow-xl">
            <Image
              src={product.imageSrc}
              alt={product.imageAlt}
              fill
              style={{ objectFit: "cover" }}
              className="transition-transform duration-300 hover:scale-105"
            />
          </div>
          <div className="flex flex-col gap-6">
            <h1 className="text-5xl font-extrabold leading-tight text-foreground">{product.name}</h1>
            <p className="text-xl text-primary-cta">{product.category}</p>
            <div className="flex items-center gap-2 text-2xl font-semibold text-accent">
              <span className="flex items-center">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star key={i} fill={i < product.rating ? "currentColor" : "none"} stroke="currentColor" size={24} />
                ))}
              </span>
              <span>({product.reviewCount})</span>
            </div>
            <p className="text-6xl font-bold text-foreground mt-4">{product.price}</p>
            <p className="text-lg leading-relaxed text-foreground/80">{product.description}</p>

            <div className="mt-8">
              <h2 className="text-3xl font-bold mb-4 text-foreground">Key Features</h2>
              <ul className="space-y-3 text-lg text-foreground/80">
                {product.features.map((feature, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <Sparkles className="flex-shrink-0 text-primary-cta mt-1" size={20} />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="mt-8 flex gap-4">
              <button className="px-8 py-4 bg-primary-cta text-white rounded-full text-xl font-semibold hover:bg-opacity-90 transition-colors duration-300">
                Add to Cart
              </button>
              <button className="px-8 py-4 bg-secondary-cta text-white rounded-full text-xl font-semibold hover:bg-opacity-90 transition-colors duration-300">
                Contact for Inquiry
              </button>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}
