"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { useState } from 'react';

export default function ProductsPage() {
  const [searchValue, setSearchValue] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("All");

  const allProducts = [
    {
      id: "1",      category: "Men's Sneakers",      name: "AirMax Alpha",      price: "$120.00",      rating: 4.5,
      reviewCount: "87",      imageSrc: "http://img.b2bpic.net/free-photo/stylish-sneakers_114579-2469.jpg",      imageAlt: "Stylish AirMax Alpha sneakers"
    },
    {
      id: "2",      category: "Women's Heels",      name: "Elegant Stiletto",      price: "$95.00",      rating: 4.8,
      reviewCount: "123",      imageSrc: "http://img.b2bpic.net/free-photo/elegant-high-heel-shoes-wooden-floor_107420-63625.jpg",      imageAlt: "Elegant Stiletto high heels"
    },
    {
      id: "3",      category: "Unisex Sandals",      name: "CloudGlide Sandals",      price: "$55.00",      rating: 4.2,
      reviewCount: "210",      imageSrc: "http://img.b2bpic.net/free-photo/pair-blue-suede-sandals_23-2149595873.jpg",      imageAlt: "Comfortable CloudGlide sandals"
    },
    {
      id: "4",      category: "Men's Dress Shoes",      name: "Classic Leather Brogue",      price: "$175.00",      rating: 4.7,
      reviewCount: "64",      imageSrc: "http://img.b2bpic.net/free-photo/elegant-modern-classic-mens-shoes_107420-56933.jpg",      imageAlt: "Classic Leather Brogue dress shoes"
    },
    {
      id: "5",      category: "Women's Boots",      name: "Winter Explorer Boots",      price: "$140.00",      rating: 4.6,
      reviewCount: "91",      imageSrc: "http://img.b2bpic.net/free-photo/winter-boots_1203-9118.jpg",      imageAlt: "Durable Winter Explorer boots"
    },
    {
      id: "6",      category: "Kids' Sneakers",      name: "Rainbow Dash Trainers",      price: "$60.00",      rating: 4.9,
      reviewCount: "150",      imageSrc: "http://img.b2bpic.net/free-photo/pink-sneaker-children-s-shoe_1203-5182.jpg",      imageAlt: "Colorful Rainbow Dash trainers for kids"
    },
    {
      id: "7",      category: "Men's Loafers",      name: "Velvet Comfort Loafers",      price: "$110.00",      rating: 4.3,
      reviewCount: "78",      imageSrc: "http://img.b2bpic.net/free-photo/elegant-shoes-with-brown-trousers_107420-56937.jpg",      imageAlt: "Velvet Comfort Loafers"
    },
    {
      id: "8",      category: "Women's Flats",      name: "Ballet Dream Flats",      price: "$70.00",      rating: 4.4,
      reviewCount: "105",      imageSrc: "http://img.b2bpic.net/free-photo/womens-leather-shoes-black_1203-9121.jpg",      imageAlt: "Ballet Dream Flats"
    },
    {
      id: "9",      category: "Unisex Running Shoes",      name: "SpeedForm Pro",      price: "$130.00",      rating: 4.7,
      reviewCount: "112",      imageSrc: "http://img.b2bpic.net/free-photo/blue-sport-shoe_1203-5188.jpg",      imageAlt: "SpeedForm Pro running shoes"
    },
    {
      id: "10",      category: "Women's Wedges",      name: "Summer Breeze Wedges",      price: "$85.00",      rating: 4.1,
      reviewCount: "60",      imageSrc: "http://img.b2bpic.net/free-photo/summer-shoes_1203-5186.jpg",      imageAlt: "Summer Breeze Wedges"
    },
    {
      id: "11",      category: "Men's Boots",      name: "Rugged Trail Boots",      price: "$160.00",      rating: 4.6,
      reviewCount: "70",      imageSrc: "http://img.b2bpic.net/free-photo/male-shoes_1203-9125.jpg",      imageAlt: "Rugged Trail hiking boots"
    },
    {
      id: "12",      category: "Kids' Sandals",      name: "Ocean Play Sandals",      price: "$45.00",      rating: 4.0,
      reviewCount: "95",      imageSrc: "http://img.b2bpic.net/free-photo/children-s-red-sandals_1203-9132.jpg",      imageAlt: "Ocean Play sandals for kids"
    }
  ];

  const filteredProducts = allProducts.filter(product => {
    const matchesSearch = product.name.toLowerCase().includes(searchValue.toLowerCase());
    const matchesCategory = selectedCategory === "All" || product.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const categories = ["All", ...new Set(allProducts.map(p => p.category))];

  const filters = [
    {
      label: "Category",      options: categories,
      selected: selectedCategory,
      onChange: (value: string) => setSelectedCategory(value)
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="medium"
      background="noise"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Home", id: "/" },
              { name: "Products", id: "/products" },
              { name: "Features", id: "/#features" },
              { name: "About", id: "/#about" },
              { name: "Testimonials", id: "/#testimonials" },
              { name: "FAQ", id: "/#faq" },
              { name: "Contact", id: "/#contact" }
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/flat-design-cross-country-template_23-2149493304.jpg"
            logoAlt="Sole & Style Logo"
            brandName="Sole & Style"
            bottomLeftText="Luxury Footwear"
            bottomRightText="info@solenstyle.com"
          />
        </div>

        <div id="product-catalog" data-section="product-catalog">
          <ProductCatalog
            layout="page"
            products={filteredProducts}
            searchValue={searchValue}
            onSearchChange={setSearchValue}
            searchPlaceholder="Search shoes..."
            filters={filters}
            emptyMessage="No shoes found matching your criteria."
            className="py-16 md:py-24"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoReveal
            logoSrc="http://img.b2bpic.net/free-vector/flat-design-cross-country-template_23-2149493304.jpg"
            logoText="Sole & Style"
            leftLink={{
              text: "Privacy Policy",              href: "#"
            }}
            rightLink={{
              text: "Terms of Service",              href: "#"
            }}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}