import { useState, useEffect, useMemo } from "react";
import { useSearchParams } from "react-router";
import { Link } from "react-router";
import { useCartStore } from "@/store/cartStore";
import { staticProducts, staticCategories } from "@/data/staticProducts";
import {
  Search,
  ShoppingCart,
  Star,
  SlidersHorizontal,
  X,
  Grid3X3,
  LayoutList,
} from "lucide-react";
import { toast } from "sonner";

export default function Shop() {
  const [searchParams] = useSearchParams();
  const initialCategory = searchParams.get("category") || undefined;

  const [search, setSearch] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string | undefined>(initialCategory);
  const [sort, setSort] = useState<"popular" | "price_asc" | "price_desc" | "newest">("popular");
  const [showFilters, setShowFilters] = useState(!!initialCategory);
  const [gridView, setGridView] = useState(true);

  const addItem = useCartStore((s) => s.addItem);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedSearch(search), 300);
    return () => clearTimeout(timer);
  }, [search]);

  // Filter and sort products client-side
  const allProducts = useMemo(() => {
    let filtered = staticProducts;

    // Filter by category
    if (selectedCategory) {
      filtered = filtered.filter(p => p.categorySlug === selectedCategory);
    }

    // Filter by search
    if (debouncedSearch) {
      const q = debouncedSearch.toLowerCase();
      filtered = filtered.filter(p =>
        p.name.toLowerCase().includes(q) ||
        p.shortDesc.toLowerCase().includes(q) ||
        p.categoryName.toLowerCase().includes(q)
      );
    }

    // Sort
    switch (sort) {
      case "price_asc":
        filtered = [...filtered].sort((a, b) => a.salePrice - b.salePrice);
        break;
      case "price_desc":
        filtered = [...filtered].sort((a, b) => b.salePrice - a.salePrice);
        break;
      case "newest":
        filtered = [...filtered].reverse();
        break;
      default:
        // popular - keep default order
        break;
    }

    return filtered;
  }, [selectedCategory, debouncedSearch, sort]);

  const handleAddToCart = (product: any) => {
    const images = product.images ? JSON.parse(product.images) : [];
    addItem({
      productId: product.id,
      name: product.name,
      slug: product.slug,
      price: product.salePrice,
      originalPrice: product.originalPrice,
      image: images[0] || "",
      productType: product.productType,
    });
    toast.success(`${product.name} added to cart!`);
  };

  const discount = (original: number, sale: number) =>
    original > 0 ? Math.round(((original - sale) / original) * 100) : 0;

  return (
    <main className="min-h-screen bg-[#050505] pt-24 pb-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl sm:text-4xl font-bold text-white mb-2">
            {selectedCategory
              ? staticCategories.find((c) => c.slug === selectedCategory)?.name || "Shop"
              : "All Products"}
          </h1>
          <p className="text-[#a5a5a5]">
            {allProducts.length} premium tools available
          </p>
        </div>

        {/* Toolbar */}
        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 mb-8">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#a5a5a5]" />
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search products..."
              className="w-full pl-10 pr-4 py-2.5 bg-[#141414] border border-white/10 rounded-xl text-sm text-white placeholder:text-[#a5a5a5] focus:outline-none focus:border-[#5b9aff]/50"
            />
            {search && (
              <button
                onClick={() => setSearch("")}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-[#a5a5a5] hover:text-white"
              >
                <X className="w-4 h-4" />
              </button>
            )}
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={() => setShowFilters(!showFilters)}
              className={`flex items-center gap-2 px-4 py-2.5 text-sm rounded-xl border transition-colors ${
                showFilters
                  ? "bg-[#5b9aff]/10 border-[#5b9aff]/30 text-[#5b9aff]"
                  : "bg-[#141414] border-white/10 text-[#a5a5a5] hover:text-white"
              }`}
            >
              <SlidersHorizontal className="w-4 h-4" />
              Filters
            </button>

            <select
              value={sort}
              onChange={(e) => setSort(e.target.value as any)}
              className="px-4 py-2.5 text-sm bg-[#141414] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#5b9aff]/50"
            >
              <option value="popular">Most Popular</option>
              <option value="price_asc">Price: Low to High</option>
              <option value="price_desc">Price: High to Low</option>
              <option value="newest">Newest</option>
            </select>

            <div className="hidden sm:flex items-center bg-[#141414] border border-white/10 rounded-xl overflow-hidden">
              <button
                onClick={() => setGridView(true)}
                className={`p-2.5 ${gridView ? "text-[#5b9aff]" : "text-[#a5a5a5]"}`}
              >
                <Grid3X3 className="w-4 h-4" />
              </button>
              <button
                onClick={() => setGridView(false)}
                className={`p-2.5 ${!gridView ? "text-[#5b9aff]" : "text-[#a5a5a5]"}`}
              >
                <LayoutList className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>

        {/* Category Filters */}
        {showFilters && (
          <div className="flex flex-wrap gap-2 mb-8 p-4 glass-card rounded-xl">
            <button
              onClick={() => setSelectedCategory(undefined)}
              className={`px-4 py-2 text-sm rounded-lg transition-colors ${
                !selectedCategory
                  ? "bg-[#5b9aff] text-[#050505] font-medium"
                  : "bg-[#141414] text-[#a5a5a5] hover:text-white"
              }`}
            >
              All
            </button>
            {staticCategories.map((cat) => (
              <button
                key={cat.id}
                onClick={() => setSelectedCategory(cat.slug)}
                className={`px-4 py-2 text-sm rounded-lg transition-colors ${
                  selectedCategory === cat.slug
                    ? "bg-[#5b9aff] text-[#050505] font-medium"
                    : "bg-[#141414] text-[#a5a5a5] hover:text-white"
                }`}
              >
                {cat.name}
              </button>
            ))}
          </div>
        )}

        {/* Products */}
        {allProducts.length === 0 ? (
          <div className="text-center py-20">
            <p className="text-lg text-[#a5a5a5]">No products found</p>
            <p className="text-sm text-[#a5a5a5] mt-1">Try adjusting your search or filters</p>
          </div>
        ) : (
          <div className={`grid gap-6 ${gridView ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : "grid-cols-1"}`}>
            {allProducts.map((product) => {
              const images = product.images ? JSON.parse(product.images) : [];
              const disc = discount(product.originalPrice, product.salePrice);

              return gridView ? (
                <div key={product.id} className="group glass-card rounded-2xl overflow-hidden hover:border-[#5b9aff]/30 transition-all duration-300 hover:-translate-y-1">
                  <Link to={`/product/${product.slug}`} className="block">
                    <div className="relative aspect-video overflow-hidden">
                      <img src={images[0] || "/products/canva-pro-1-year.jpg"} alt={product.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                      {disc > 0 && (
                        <div className="absolute top-3 left-3 px-2.5 py-1 bg-[#ff6b6b] text-white text-xs font-bold rounded-full">-{disc}%</div>
                      )}
                      {product.badge && (
                        <div className="absolute top-3 right-3 px-2.5 py-1 bg-[#5b9aff] text-white text-xs font-bold rounded-full">{product.badge}</div>
                      )}
                    </div>
                  </Link>
                  <div className="p-4">
                    <Link to={`/product/${product.slug}`}>
                      <h3 className="font-semibold text-white mb-1 group-hover:text-[#5b9aff] transition-colors truncate">{product.name}</h3>
                    </Link>
                    <p className="text-xs text-[#a5a5a5] mb-3 line-clamp-2">{product.shortDesc}</p>
                    <div className="flex items-center gap-1 mb-3">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="w-3 h-3 fill-[#5b9aff] text-[#5b9aff]" />
                      ))}
                      <span className="text-xs text-[#a5a5a5] ml-1">(4.9)</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <span className="text-lg font-bold text-white">${product.salePrice}</span>
                        <span className="text-sm text-[#a5a5a5] line-through ml-2">${product.originalPrice}</span>
                      </div>
                      <button onClick={() => handleAddToCart(product)} className="p-2.5 rounded-xl bg-[#5b9aff]/10 text-[#5b9aff] hover:bg-[#5b9aff] hover:text-[#050505] transition-all">
                        <ShoppingCart className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              ) : (
                <div key={product.id} className="group glass-card rounded-2xl overflow-hidden hover:border-[#5b9aff]/30 transition-all duration-300">
                  <div className="flex">
                    <Link to={`/product/${product.slug}`} className="w-48 sm:w-56 shrink-0">
                      <div className="relative h-full overflow-hidden">
                        <img src={images[0] || "/products/canva-pro-1-year.jpg"} alt={product.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                        {disc > 0 && <div className="absolute top-3 left-3 px-2.5 py-1 bg-[#ff6b6b] text-white text-xs font-bold rounded-full">-{disc}%</div>}
                      </div>
                    </Link>
                    <div className="flex-1 p-5">
                      <Link to={`/product/${product.slug}`}>
                        <h3 className="font-semibold text-white mb-1 group-hover:text-[#5b9aff] transition-colors">{product.name}</h3>
                      </Link>
                      <p className="text-sm text-[#a5a5a5] mb-3">{product.shortDesc}</p>
                      <div className="flex items-center gap-1 mb-3">
                        {[...Array(5)].map((_, i) => <Star key={i} className="w-3 h-3 fill-[#5b9aff] text-[#5b9aff]" />)}
                        <span className="text-xs text-[#a5a5a5] ml-1">(4.9)</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <div>
                          <span className="text-xl font-bold text-white">${product.salePrice}</span>
                          <span className="text-sm text-[#a5a5a5] line-through ml-2">${product.originalPrice}</span>
                        </div>
                        <button onClick={() => handleAddToCart(product)} className="flex items-center gap-2 px-5 py-2.5 bg-[#5b9aff] text-[#050505] font-medium rounded-full hover:glow-blue transition-all">
                          <ShoppingCart className="w-4 h-4" /> Add to Cart
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </main>
  );
}