// app/products/page.tsx
"use client";

import { useState, useEffect, Suspense, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import { Search, Layers } from "lucide-react";
import ProductCard from "@/components/ProductCard";

const CATEGORIES = [
  "All",
  "Visiting Cards",
  "Wedding Cards",
  "Posters & Banners",
  "Bill Books",
  "Vector Clipart",
  "Line Art & Border",
  "Dividers & Corners",
  "Flex Banners",
  "Social Media Posts",
];

const FILE_FILTERS = ["ALL", "CDR", "PSD", "PNG"];

function ProductsContent() {
  const searchParams = useSearchParams();

  const [products, setProducts] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [selectedFormat, setSelectedFormat] = useState("ALL");

  // Fetch directly using active URL parameters
  const loadFilteredProducts = useCallback(async (cat: string, fmt: string, q: string) => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      if (cat && cat !== "All") params.append("category", cat);
      if (fmt && fmt !== "ALL") params.append("format", fmt);
      if (q.trim()) params.append("search", q.trim());

      const res = await fetch(`/api/products?${params.toString()}`);
      if (res.ok) {
        const data = await res.json();
        setProducts(data);
      }
    } catch (e) {
      console.error("Failed to load products", e);
    } finally {
      setLoading(false);
    }
  }, []);

  // Listen to navigation events via searchParams
  useEffect(() => {
    const rawCat = searchParams.get("category");
    const rawFmt = searchParams.get("format");

    let activeCat = "All";
    let activeFmt = "ALL";

    if (rawCat) {
      const upper = rawCat.toUpperCase();
      if (["CDR", "PSD", "PNG"].includes(upper)) {
        activeFmt = upper;
        activeCat = "All";
      } else {
        const matched = CATEGORIES.find((c) =>
          c.toLowerCase().includes(rawCat.toLowerCase())
        );
        activeCat = matched || rawCat;
      }
    }

    if (rawFmt) {
      activeFmt = rawFmt.toUpperCase();
    }

    setSelectedCategory(activeCat);
    setSelectedFormat(activeFmt);

    loadFilteredProducts(activeCat, activeFmt, search);
  }, [searchParams, loadFilteredProducts]);

  // Handle manual category button click
  const handleCategoryClick = (cat: string) => {
    setSelectedCategory(cat);
    loadFilteredProducts(cat, selectedFormat, search);
  };

  // Handle manual format button click
  const handleFormatClick = (fmt: string) => {
    setSelectedFormat(fmt);
    loadFilteredProducts(selectedCategory, fmt, search);
  };

  // Handle search input with debounce
  const handleSearchChange = (val: string) => {
    setSearch(val);
    const timer = setTimeout(() => {
      loadFilteredProducts(selectedCategory, selectedFormat, val);
    }, 300);
    return () => clearTimeout(timer);
  };

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100 pb-24 pt-8 px-4 sm:px-6 max-w-7xl mx-auto space-y-8">
      {/* Header & Search */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-zinc-900 pb-6">
        <div>
          <h1 className="text-3xl font-black text-white tracking-tight">Graphic Templates Library</h1>
          <p className="text-xs text-zinc-400 mt-1">Browse all ready-to-print vector and raster designs.</p>
        </div>

        <div className="relative w-full md:w-80">
          <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
          <input
            type="text"
            value={search}
            onChange={(e) => handleSearchChange(e.target.value)}
            placeholder="Search templates..."
            className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-zinc-900 border border-zinc-800 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-indigo-500 transition"
          />
        </div>
      </div>

      {/* Category Pills & Format Buttons */}
      <div className="space-y-4">
        <div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-none">
          {CATEGORIES.map((cat) => (
            <button
              key={cat}
              onClick={() => handleCategoryClick(cat)}
              className={`px-4 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all ${
                selectedCategory.toLowerCase() === cat.toLowerCase()
                  ? "bg-indigo-600 text-white shadow-lg shadow-indigo-600/30"
                  : "bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-zinc-200 hover:border-zinc-700"
              }`}
            >
              {cat}
            </button>
          ))}
        </div>

        <div className="flex items-center justify-between border-t border-zinc-900 pt-4">
          <div className="flex items-center gap-2">
            <span className="text-xs font-bold text-zinc-500 uppercase tracking-wider mr-2">Format:</span>
            {FILE_FILTERS.map((fmt) => (
              <button
                key={fmt}
                onClick={() => handleFormatClick(fmt)}
                className={`px-3 py-1 rounded-lg text-xs font-bold transition ${
                  selectedFormat === fmt
                    ? "bg-zinc-100 text-zinc-950 font-extrabold"
                    : "bg-zinc-900 text-zinc-400 hover:text-white"
                }`}
              >
                {fmt}
              </button>
            ))}
          </div>

          <span className="text-xs text-zinc-500 font-medium">
            Found {products.length} designs
          </span>
        </div>
      </div>

      {/* Grid */}
      {loading ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="h-72 rounded-2xl bg-zinc-900 animate-pulse" />
          ))}
        </div>
      ) : products.length === 0 ? (
        <div className="text-center py-20 bg-zinc-900/30 rounded-3xl border border-zinc-900">
          <Layers className="h-12 w-12 text-zinc-600 mx-auto mb-3" />
          <p className="text-lg font-semibold text-white">No designs found</p>
          <p className="text-xs text-zinc-500 mt-1">Try switching category or format filter.</p>
        </div>
      ) : (
        <motion.div layout className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          <AnimatePresence>
            {products.map((item) => (
              <ProductCard
                key={item.id}
                id={item.id}
                title={item.title}
                slug={item.slug}
                category={item.category}
                fileType={item.fileType}
                price={Number(item.price)}
                discountPrice={item.discountPrice ? Number(item.discountPrice) : null}
                thumbnailUrl={item.thumbnailUrl}
                fileSize={item.fileSize}
              />
            ))}
          </AnimatePresence>
        </motion.div>
      )}
    </div>
  );
}

export default function ProductsPage() {
  return (
    <Suspense fallback={<div className="min-h-screen bg-zinc-950" />}>
      <ProductsContent />
    </Suspense>
  );
}