"use client";
import { useState } from "react";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { products, categories } from "@/lib/data";
import { ProductCard } from "@/components/product-card";
import { Footer } from "@/components/footer";
import { Input } from "@/components/ui/input";
import { Search, SlidersHorizontal } from "lucide-react";

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

  const filteredProducts = products.filter((p) => {
    const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategory === "All" || p.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  return (
    <main className="min-h-screen bg-neutral-50">
      <div className="bg-white border-b py-8">
        <Container>
          <Heading className="mb-6">Our Products</Heading>
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
              <Input 
                placeholder="Search products..." 
                className="pl-10 rounded-full bg-neutral-50 border-none"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex gap-2 overflow-x-auto pb-2 md:pb-0 no-scrollbar">
              <button
                onClick={() => setSelectedCategory("All")}
                className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${
                  selectedCategory === "All" 
                    ? "bg-blue-600 text-white" 
                    : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
                }`}
              >
                All
              </button>
              {categories.map((cat) => (
                <button
                  key={cat.name}
                  onClick={() => setSelectedCategory(cat.name)}
                  className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${
                    selectedCategory === cat.name 
                      ? "bg-blue-600 text-white" 
                      : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
                  }`}
                >
                  {cat.name}
                </button>
              ))}
            </div>
          </div>
        </Container>
      </div>

      <section className="py-12">
        <Container>
          <div className="flex items-center justify-between mb-8">
            <p className="text-sm text-neutral-500">
              Showing {filteredProducts.length} products
            </p>
          </div>
          
          {filteredProducts.length > 0 ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {filteredProducts.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          ) : (
            <div className="text-center py-20">
              <Heading level={3} className="text-xl text-neutral-400">No products found</Heading>
              <p className="text-neutral-500 mt-2">Try adjusting your search or filters</p>
            </div>
          )}
        </Container>
      </section>
      <Footer />
    </main>
  );
}