"use client";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { fetchStoreProducts, fetchStoreCategories, StoreProduct, StoreCategory } from "./_lib/storeApiCalls";
import ProductCard from "./components/ProductCard";

export default function StoreHomePage() {
  const params = useParams<{ orgSlug: string }>();
  const orgSlug = params.orgSlug;

  const [products, setProducts] = useState<StoreProduct[]>([]);
  const [categories, setCategories] = useState<StoreCategory[]>([]);
  const [search, setSearch] = useState("");
  const [category, setCategory] = useState<number | "">("");
  const [ordering, setOrdering] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchStoreCategories(orgSlug).then(setCategories).catch(() => {});
  }, [orgSlug]);

  useEffect(() => {
    setLoading(true);
    const t = setTimeout(() => {
      fetchStoreProducts(orgSlug, { search, category: category || undefined, ordering: ordering || undefined })
        .then((res) => setProducts(res.results))
        .catch(() => setProducts([]))
        .finally(() => setLoading(false));
    }, 250);
    return () => clearTimeout(t);
  }, [orgSlug, search, category, ordering]);

  return (
    <>
      <div className="row g-3 mb-4 align-items-center">
        <div className="col-12 col-md-5">
          <div className="input-group">
            <span className="input-group-text bg-white"><span className="fa-solid fa-magnifying-glass" /></span>
            <input className="form-control" placeholder="Search products..." value={search} onChange={(e) => setSearch(e.target.value)} />
          </div>
        </div>
        <div className="col-6 col-md-3">
          <select className="form-select" value={category} onChange={(e) => setCategory(e.target.value ? Number(e.target.value) : "")}>
            <option value="">All Categories</option>
            {categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>
        <div className="col-6 col-md-3">
          <select className="form-select" value={ordering} onChange={(e) => setOrdering(e.target.value)}>
            <option value="">Sort: Newest</option>
            <option value="price_asc">Price: Low to High</option>
            <option value="price_desc">Price: High to Low</option>
            <option value="name">Name A-Z</option>
          </select>
        </div>
      </div>

      <div className="row g-3">
        {products.map((p) => (
          <ProductCard key={p.id} orgSlug={orgSlug} product={p} />
        ))}
        {!loading && products.length === 0 && (
          <div className="col-12 text-center py-9 text-body-tertiary">
            <span className="fa-solid fa-box-open fs-1 mb-3 d-block" />
            No products found.
          </div>
        )}
        {loading && (
          <div className="col-12 text-center py-9">
            <div className="spinner-border text-primary" />
          </div>
        )}
      </div>
    </>
  );
}