'use client';

import { ThemeProvider } from 'next-themes';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TextAnimation from '@/components/text/TextAnimation';
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import { Sparkles, Star } from 'lucide-react';

export default function ProductDetailPage() {
  const book = {
    id: 'the-alchemist',
    title: 'The Alchemist',
    author: 'Paulo Coelho',
    description: 'A captivating novel about a young shepherd who journeys to the Egyptian desert in search of a treasure. His quest leads him to discover a different kind of treasure than he originally envisioned.',
    price: '$12.99',
    imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-alchemist.png',
    imageAlt: 'The Alchemist book cover',
    rating: 4.8,
    reviewCount: 1500,
  };

  const reviews = [
    {
      id: '1',
      name: 'Sophia M.',
      role: 'Avid Reader',
      testimonial: 'An inspiring and thought-provoking read that I couldn\'t put down. Highly recommended!',
      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-1.jpg',
      icon: Star,
    },
    {
      id: '2',
      name: 'John D.',
      role: 'Book Enthusiast',
      testimonial: 'The story is beautifully written and full of wisdom. A true classic that everyone should read.',
      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-2.jpg',
      icon: Star,
    },
    {
      id: '3',
      name: 'Emily R.',
      role: 'Philosophy Student',
      testimonial: 'Changed my perspective on life and destiny. Deeply moving and thought-provoking.',
      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-3.jpg',
      icon: Star,
    },
  ];

  const relatedProducts = [
    {
      id: 'little-prince',
      name: 'The Little Prince',
      price: '$9.99',
      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-little-prince.png',
      imageAlt: 'The Little Prince book cover',
    },
    {
      id: 'siddhartha',
      name: 'Siddhartha',
      price: '$11.50',
      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-siddhartha.png',
      imageAlt: 'Siddhartha book cover',
    },
    {
      id: 'jonathan-seagull',
      name: 'Jonathan Livingston Seagull',
      price: '$8.75',
      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-jonathan-seagull.png',
      imageAlt: 'Jonathan Livingston Seagull book cover',
    },
    {
      id: 'the-prophet',
      name: 'The Prophet',
      price: '$10.25',
      imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-prophet.png',
      imageAlt: 'The Prophet book cover',
    },
  ];

  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <NavbarLayoutFloatingInline
        navItems={[
          { name: 'Home', id: '/' },
          { name: 'Products', id: '/products' },
          { name: 'About', id: '/#about' }
        ]}
        brandName="Bookish"
        button={{ text: 'Sign Up', href: '/#contact' }}
      />
      <main className="flex min-h-screen flex-col items-center justify-start p-8 md:p-16 relative z-10">
        {/* Book Information Section */}
        <section id="book-info" data-section="book-info" className="w-full max-w-6xl py-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          <div className="flex justify-center md:justify-end">
            <img
              src={book.imageSrc}
              alt={book.imageAlt}
              className="w-full max-w-xs md:max-w-sm rounded-lg shadow-2xl transition-transform duration-300 hover:scale-105"
            />
          </div>
          <div className="flex flex-col gap-6 text-center md:text-left">
            <TextAnimation
              title={book.title}
              type="entrance-slide"
              className="text-5xl md:text-6xl font-extrabold text-foreground leading-tight"
            />
            <p className="text-xl text-primary-cta font-medium">By {book.author}</p>
            <p className="text-lg text-foreground-lighter">{book.description}</p>
            <div className="flex items-center justify-center md:justify-start gap-2 text-xl text-yellow-500">
              {Array.from({ length: Math.floor(book.rating) }).map((_, i) => (
                <Star key={i} fill="currentColor" stroke="none" size={20} />
              ))}
              <span className="text-foreground text-base ml-1">({book.rating} / {book.reviewCount} reviews)</span>
            </div>
            <p className="text-4xl font-bold text-foreground mt-4">{book.price}</p>
            <div className="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4 mt-6">
              <input
                type="number"
                defaultValue={1}
                min={1}
                className="w-20 p-3 border border-border-light rounded-md text-center bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all duration-200"
              />
              <ButtonTextShift text="Add to Cart" className="w-full sm:w-auto px-8 py-3 rounded-lg font-semibold" />
            </div>
          </div>
        </section>

        {/* Reviews Section */}
        <div id="reviews" data-section="reviews" className="w-full py-16">
          <TestimonialCardTwo
            testimonials={reviews}
            title="What Our Readers Say"
            description="Hear from our satisfied customers about their experience with this book."
            animationType="blur-reveal"
            carouselMode="buttons"
            uniformGridCustomHeightClasses="min-h-none"
            tag="Reviews"
            tagIcon={Sparkles}
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>

        {/* Related Products Section */}
        <div id="related-products" data-section="related-products" className="w-full py-16">
          <ProductCardThree
            products={relatedProducts}
            title="You Might Also Like"
            description="Discover other captivating titles that share similar themes."
            gridVariant="four-items-2x2-equal-grid"
            animationType="slide-up"
            tag="More Books"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>
      </main>
    </ThemeProvider>
  );
}