"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import Image from 'next/image';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

interface ProductDetail {
  id: string;
  name: string;
  price: string;
  imageSrc: string;
  imageAlt: string;
  description: string;
  details: string[]; // e.g., features, benefits
}

const mockProducts: ProductDetail[] = [
  {
    id: "nasal-strips-1",    name: "Original Nasal Strips (30-pack)",    price: "$19.99",    imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-girl-black-sportswear-with-headband-puzzled-standing-white-wall_141793-56736.jpg?_wi=1",    imageAlt: "TAPE IT Original Nasal Strips 30-pack",    description: "Enhance your breathing instantly with our original nasal strips. Designed for comfort and effective airflow improvement.",    details: [
      "30 count pack for daily use",      "Hypoallergenic adhesive",      "Increases nasal airflow by up to 30%",      "Reduces snoring and improves sleep quality",      "Ideal for exercise and daily wear"
    ]
  },
  {
    id: "nasal-strips-2",    name: "Sensitive Skin Nasal Strips (30-pack)",    price: "$22.99",    imageSrc: "http://img.b2bpic.net/free-photo/future-mother-keeps-shoes-baby_8353-5121.jpg?_wi=1",    imageAlt: "TAPE IT Sensitive Skin Nasal Strips 30-pack",    description: "Gentle yet effective, our sensitive skin nasal strips provide optimal breathing support without irritation.",    details: [
      "30 count pack",      "Extra gentle, latex-free adhesive",      "Dermatologist tested for sensitive skin",      "Improves breathing without causing redness",      "Perfect for extended wear"
    ]
  },
  {
    id: "nasal-strips-3",    name: "Extra Strength Nasal Strips (30-pack)",    price: "$21.99",    imageSrc: "http://img.b2bpic.net/free-photo/woman-folding-menstrual-cup-medium-shot_23-2149734183.jpg?_wi=1",    imageAlt: "TAPE IT Extra Strength Nasal Strips 30-pack",    description: "For maximum support, choose our extra strength nasal strips. Designed to provide powerful lift for severe congestion or intense activity.",    details: [
      "30 count pack for robust support",      "Stronger adhesive for secure fit",      "Maximizes nasal passage opening",      "Ideal for athletes and heavy snorers",      "Long-lasting hold during vigorous activities"
    ]
  },
  {
    id: "nasal-strips-4",    name: "Original Nasal Strips (90-pack)",    price: "$49.99",    imageSrc: "http://img.b2bpic.net/free-photo/young-female-doctor-holding-hands-head-medical-uniform-mask-looking-confident_176474-81552.jpg?_wi=1",    imageAlt: "TAPE IT Original Nasal Strips 90-pack",    description: "Stock up and save with our 90-pack of original nasal strips, ensuring you never run out of breath-enhancing support.",    details: [
      "90 count bulk pack",      "Economical and convenient",      "Same great original formula",      "Continuous supply for consistent relief",      "Perfect for regular users"
    ]
  },
  {
    id: "nasal-strips-5",    name: "Travel Pack Assorted (10-pack)",    price: "$8.99",    imageSrc: "http://img.b2bpic.net/free-photo/collagen-white-stick-with-glass-water_185193-162486.jpg?_wi=1",    imageAlt: "TAPE IT Travel Pack Assorted Nasal Strips 10-pack",    description: "Don't let travel disrupt your breathing. Our assorted travel pack offers a convenient mix of strips for any situation.",    details: [
      "10 count assorted pack",      "Compact for travel",      "Includes a mix of original and sensitive strips",      "Always be prepared for better breathing on the go",      " resealable pouch"
    ]
  },
  {
    id: "nasal-strips-6",    name: "Kids Nasal Strips (20-pack)",    price: "$14.99",    imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-putting-medical-mask-face-protection_23-2148802176.jpg?_wi=1",    imageAlt: "TAPE IT Kids Nasal Strips 20-pack",    description: "Help your little ones breathe easier with our specially designed kids nasal strips. Gentle and perfectly sized for smaller noses.",    details: [
      "20 count pack, kid-friendly design",      "Smaller size for children's noses",      "Hypoallergenic and gentle adhesive",      "Helps reduce nighttime stuffiness for better sleep",      "Fun, colorful designs"
    ]
  }
];

export default function ProductDetailPage() {
  const params = useParams();
  const router = useRouter();
  const productId = params.productId as string;
  const [product, setProduct] = useState<ProductDetail | null>(null);

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Shop Now", id: "/products" },
    { name: "How It Works", id: "/#features" },
    { name: "Our Mission", id: "/#about" },
    { name: "Contact Us", id: "/#contact" }
  ];

  useEffect(() => {
    const foundProduct = mockProducts.find(p => p.id === productId);
    if (foundProduct) {
      setProduct(foundProduct);
    } else {
      // Optionally redirect to a 404 page or products list if not found
      router.push('/products');
    }
  }, [productId, router]);

  if (!product) {
    return null; // Or a loading spinner
  }

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={navItems}
            brandName="TAPE IT JO"
          />
        </div>

        <div className="container mx-auto px-4 py-16" id="product-detail" data-section="product-detail">
          <button
            onClick={() => router.back()}
            className="mb-8 text-primary-cta hover:underline focus:outline-none"
          >
            &larr; Back to Products
          </button>
          <div className="flex flex-col lg:flex-row gap-8 items-start">
            <div className="w-full lg:w-1/2 relative bg-card rounded-lg overflow-hidden shadow-lg">
              <Image
                src={product.imageSrc.replace('?_wi=1', '?w=800&h=800&q=80')}
                alt={product.imageAlt}
                width={800}
                height={800}
                layout="responsive"
                objectFit="contain"
                className="rounded-lg"
              />
            </div>
            <div className="w-full lg:w-1/2 p-4 md:p-8 bg-card rounded-lg shadow-lg">
              <h1 className="text-4xl md:text-5xl font-bold mb-4 text-foreground leading-tight">
                {product.name}
              </h1>
              <p className="text-3xl md:text-4xl font-semibold mb-6 text-primary-cta">
                {product.price}
              </p>
              <p className="text-lg mb-6 text-foreground/80 leading-relaxed">
                {product.description}
              </p>
              <h2 className="text-2xl font-semibold mb-3 text-foreground">
                Product Features:
              </h2>
              <ul className="list-disc list-inside space-y-2 text-foreground/70">
                {product.details.map((detail, index) => (
                  <li key={index}>{detail}</li>
                ))}
              </ul>
              <button
                className="mt-8 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-md text-lg font-medium hover:opacity-90 transition-opacity duration-300"
              >
                Add to Cart
              </button>
            </div>
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/yoga-mat-water-bottle-assortment_23-2149442713.jpg?_wi=1"
            imageAlt="Gym product nasal strips lifestyle"
            logoText="TAPE IT JO"
            columns={[
              {
                title: "Product",                items: [
                  { label: "Shop Now", href: "/products" },
                  { label: "How It Works", href: "/#features" },
                  { label: "FAQs", href: "/#faq" }
                ]
              },
              {
                title: "Company",                items: [
                  { label: "Our Mission", href: "/#about" },
                  { label: "Contact Us", href: "/#contact" },
                  { label: "Where to Find Us", href: "/locations" }
                ]
              },
              {
                title: "Legal",                items: [
                  { label: "Privacy Policy", href: "/privacy" },
                  { label: "Terms of Service", href: "/terms" }
                ]
              }
            ]}
            copyrightText="© 2024 TAPE IT JO. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
