"use client";

import { useState, useEffect, useMemo } from "react";
import { useCart } from "@/context/CartContext";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Navbar from "@/components/Navbar";
import WhatsAppButton from "@/components/WhatsAppButton";

type Product = {
  _id: string;
  title?: string;
  itc1?: string;
  itn?: string;
  sku?: string;
  bcode1?: string | number;
  description?: string;
  shortDescription?: string;
  fullDescription?: string;
  productDetails?: string;
  qty?: number;
  stock?: number;
  cost?: number;
  price?: number;
  supplier?: string;
  rack?: string;
  lastSell?: number;
  newCost?: number;
  category?: string;
  itc?: string;
  cat?: string;
  scat?: string;
  photoUrl?: string;
  images?: string[];
  mfg?: string;
  photoThumb?: string;
  thumbnails?: string[];
};

export default function ShopPage() {
  const router = useRouter();
  const { addItem, items, updateQuantity, removeItem } = useCart();
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("all");

  useEffect(() => {
    fetchProducts();
  }, []);

  const fetchProducts = async () => {
    setLoading(true);
    try {
      const [productsResponse, ecommersResponse] = await Promise.all([
        fetch("/api/products?limit=1000"),
        fetch("/api/ecommers?limit=1000"),
      ]);

      const allProducts: Product[] = [];

      if (productsResponse.ok) {
        const productsData = await productsResponse.json();
        allProducts.push(...(productsData.products || []));
      }

      if (ecommersResponse.ok) {
        const ecommersData = await ecommersResponse.json();
        allProducts.push(...(ecommersData.products || []));
      }

      setProducts(allProducts);
    } catch (error) {
      console.error("Error fetching products:", error);
    } finally {
      setLoading(false);
    }
  };

  const categories = useMemo(() => {
    const categorySet = new Set<string>();
    products.forEach((product) => {
      const cat = product.scat || product.cat || product.category || product.itc || product.itc1;
      if (cat && cat.trim()) {
        categorySet.add(cat.trim());
      }
    });
    return Array.from(categorySet).sort();
  }, [products]);

  const filteredProducts = useMemo(() => {
    let filtered = products;

    if (selectedCategory !== "all") {
      filtered = filtered.filter((product) => {
        const productCategory = (product.scat || product.cat || product.category || product.itc || product.itc1 || "").trim().toLowerCase();
        return productCategory === selectedCategory.toLowerCase();
      });
    }

    if (search.trim()) {
      const searchLower = search.toLowerCase();
      filtered = filtered.filter((product) => {
        // Try to parse productDetails for search
        let productDetailsText = "";
        try {
          if (product.productDetails) {
            const details = typeof product.productDetails === "string" 
              ? JSON.parse(product.productDetails) 
              : product.productDetails;
            if (typeof details === "object") {
              productDetailsText = Object.values(details).join(" ");
            } else {
              productDetailsText = String(product.productDetails);
            }
          }
        } catch (e) {
          productDetailsText = String(product.productDetails || "");
        }

        const searchableText = [
          product.title,
          product.description,
          product.shortDescription,
          product.fullDescription,
          productDetailsText,
          product.sku,
          product.bcode1,
          product.scat,
          product.cat,
          product.category,
          product.itc,
          product.itc1,
          product.itn,
          product.supplier,
          product.mfg,
        ]
          .filter(Boolean)
          .join(" ")
          .toLowerCase();
        return searchableText.includes(searchLower);
      });
    }

    return filtered;
  }, [products, search, selectedCategory]);

  const handleAddToCart = (product: Product) => {
    addItem({
      productId: product._id,
      title: product.title || "Product",
      price: product.price || 0,
      quantity: 1,
      sku: product.sku,
      itc1: product.itc1,
      itn: product.itn,
    });
  };

  const getCartQty = (productId: string) => items.find((i) => i.productId === productId)?.quantity || 0;

  const inc = (product: Product) => handleAddToCart(product);
  const dec = (productId: string) => {
    const existing = items.find((i) => i.productId === productId);
    if (!existing) return;
    const next = existing.quantity - 1;
    if (next <= 0) removeItem(productId);
    else updateQuantity(productId, next);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-6">Shop - Server Zone Computer</h1>

        {/* Search and Filter */}
        <div className="bg-white rounded-lg shadow p-4 mb-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search products..."
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
            />
            <select
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
            >
              <option value="all">All Categories</option>
              {categories.map((cat) => (
                <option key={cat} value={cat}>
                  {cat}
                </option>
              ))}
            </select>
          </div>
        </div>

        {/* Products Grid */}
        {loading ? (
          <div className="text-center py-12">
            <p className="text-gray-600">Loading products...</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
            {filteredProducts.map((product) => {
              const qty = getCartQty(product._id);
              return (
                <div key={product._id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition flex flex-col">
                  <Link href={`/product/${product._id}`}>
                    <div className="aspect-square bg-gray-100 overflow-hidden">
                      {product.photoUrl || product.images?.[0] || product.photoThumb || product.thumbnails?.[0] ? (
                        <img
                          src={(product.photoThumb as any) || (product.thumbnails?.[0] as any) || (product.photoUrl as any) || (product.images?.[0] as any) || ""}
                          alt={product.title || "Product"}
                          className="w-full h-full object-contain p-2"
                        />
                      ) : (
                        <div className="w-full h-full flex items-center justify-center">
                          <span className="text-gray-400">No Image</span>
                        </div>
                      )}
                    </div>
                  </Link>
                  <div className="p-3 flex flex-col flex-1">
                    <Link href={`/product/${product._id}`}>
                      <h3 className="font-semibold text-sm text-gray-900 mb-1 hover:text-blue-600 line-clamp-2">
                        {product.title || "Product"}
                      </h3>
                    </Link>
                    <p className="text-xs text-gray-600 mb-2 line-clamp-2">
                      {product.shortDescription || product.description || ""}
                    </p>
                    <div className="flex items-center justify-between gap-2 mt-auto pt-2">
                      <span className="text-lg font-bold text-blue-600">
                        ${product.price?.toFixed(2) || "0.00"}
                      </span>
                      {qty > 0 ? (
                        <div className="flex items-center gap-2">
                          <button
                            onClick={(e) => { e.preventDefault(); dec(product._id); }}
                            className="w-8 h-8 rounded border border-gray-300 bg-white hover:bg-gray-100 flex items-center justify-center"
                            aria-label="Decrease"
                          >
                            −
                          </button>
                          <span className="min-w-[1.5rem] text-center text-sm font-semibold">{qty}</span>
                          <button
                            onClick={(e) => { e.preventDefault(); inc(product); }}
                            className="w-8 h-8 rounded border border-gray-300 bg-white hover:bg-gray-100 flex items-center justify-center"
                            aria-label="Increase"
                          >
                            +
                          </button>
                        </div>
                      ) : (
                        <button
                          onClick={(e) => { e.preventDefault(); handleAddToCart(product); }}
                          className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold rounded-lg transition whitespace-nowrap"
                        >
                          Add to Cart
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {!loading && filteredProducts.length === 0 && (
          <div className="text-center py-12">
            <p className="text-gray-600">No products found</p>
          </div>
        )}
      </div>
      <WhatsAppButton />
    </div>
  );
}