"use client";

import React, { useState, useMemo } from "react";
import { PRODUCTS, Product, CATEGORIES, CategoryType } from "@/data/products";
import { ProductCard } from "@/components/ProductCard";
import { Sparkles, SlidersHorizontal, ArrowUpDown } from "lucide-react";

export function PanettonesShowcase({
  onOpenDetails,
}: {
  onOpenDetails: (product: Product) => void;
}) {
  const [selectedCategory, setSelectedCategory] = useState<CategoryType>("Todos");
  const [sortBy, setSortBy] = useState<"featured" | "price-asc" | "price-desc">("featured");

  const filteredProducts = useMemo(() => {
    let list = PRODUCTS.filter((p) => {
      if (selectedCategory === "Todos") return true;
      return p.category === selectedCategory;
    });

    if (sortBy === "price-asc") {
      list = [...list].sort((a, b) => a.price - b.price);
    } else if (sortBy === "price-desc") {
      list = [...list].sort((a, b) => b.price - a.price);
    }
    return list;
  }, [selectedCategory, sortBy]);

  return (
    <section id="catalogo" className="py-16 sm:py-20 bg-stone-50/50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-10 sm:mb-12">
          <div className="inline-flex items-center gap-1.5 bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-3">
            <Sparkles className="w-3.5 h-3.5 text-amber-700" />
            <span>Tienda Online Oficial</span>
          </div>
          <h2 className="font-serif text-3xl sm:text-4xl font-bold text-stone-900 tracking-tight">
            Nuestras Creaciones Artesanales
          </h2>
          <p className="text-stone-600 text-sm sm:text-base mt-2 font-light">
            Panettones elaborados con masa madre de cultivo natural y bollería tradicional horneada en nuestro obrador de Aspe (Alicante).
          </p>
        </div>

        {/* Category Filters & Sort Controls */}
        <div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-8 pb-4 border-b border-stone-200">
          {/* Category Tabs */}
          <div id="ra-category-tabs" className="flex flex-wrap items-center justify-center gap-2">
            {CATEGORIES.map((cat) => (
              <button
                key={cat}
                data-category-btn={cat}
                onClick={() => setSelectedCategory(cat)}
                className={`px-4 py-2 rounded-full text-xs font-bold transition-all duration-200 cursor-pointer ${
                  selectedCategory === cat
                    ? "bg-amber-900 text-amber-50 shadow-md transform scale-105"
                    : "bg-white text-stone-700 border border-stone-200 hover:bg-amber-50 hover:text-amber-900"
                }`}
              >
                {cat}
              </button>
            ))}
          </div>

          {/* Sort selector */}
          <div className="flex items-center gap-2 text-xs text-stone-600">
            <ArrowUpDown className="w-3.5 h-3.5 text-amber-800" />
            <span className="font-medium">Ordenar por:</span>
            <select
              id="ra-sort-select"
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value as any)}
              className="bg-white border border-stone-200 rounded-lg px-2.5 py-1.5 text-xs font-semibold text-stone-800 outline-none focus:border-amber-700 cursor-pointer shadow-2xs"
            >
              <option value="featured">Destacados del Maestro</option>
              <option value="price-asc">Precio: de menor a mayor</option>
              <option value="price-desc">Precio: de mayor a menor</option>
            </select>
          </div>
        </div>

        {/* Product Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
          {filteredProducts.map((product) => (
            <ProductCard
              key={product.id}
              product={product}
              onOpenDetails={onOpenDetails}
            />
          ))}
        </div>

      </div>
    </section>
  );
}