"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import type { Product, ProductCategory } from "@/lib/public-product";
import { effectivePrice, resolvePublicMediaUrl } from "@/lib/public-product";
import DataService from "@/config/axios";
import AddToCartButton from "@/components/shop/add-to-cart-button";
import ProductShippingBadges from "@/components/shop/product-shipping-badges";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export default function ShopCatalog() {
  const searchParams = useSearchParams();
  const initialCategory = searchParams.get("category") || "all";

  const [categories, setCategories] = useState<ProductCategory[]>([]);
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [category, setCategory] = useState<string>(initialCategory);
  const [minPrice, setMinPrice] = useState("");
  const [maxPrice, setMaxPrice] = useState("");
  const [q, setQ] = useState("");

  useEffect(() => {
    const next = searchParams.get("category") || "all";
    setCategory((current) => (current === next ? current : next));
  }, [searchParams]);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [catsRes, prodRes] = await Promise.all([
        DataService.get("/public/product-categories"),
        DataService.get("/public/products", {
          params: {
            ...(category !== "all" ? { category } : {}),
            ...(minPrice.trim() ? { minPrice: Number(minPrice) } : {}),
            ...(maxPrice.trim() ? { maxPrice: Number(maxPrice) } : {}),
            ...(q.trim() ? { q: q.trim() } : {}),
          },
        }),
      ]);
      setCategories(catsRes.data?.data || []);
      setProducts(prodRes.data?.data || []);
    } catch {
      setProducts([]);
    } finally {
      setLoading(false);
    }
  }, [category, minPrice, maxPrice, q]);

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

  const categoryOptions = useMemo(
    () => [{ slug: "all", name: "All categories" }, ...categories.map((c) => ({ slug: c.slug, name: c.name }))],
    [categories],
  );

  return (
    <div className="container space-y-5 pb-10 pt-3">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link href="/">Home</Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Products</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <div>
        <h1 className="text-3xl font-bold text-slate-900">Products</h1>
        <p className="mt-2 text-gray-600">Browse products and filter by category or price.</p>
      </div>

      <div className="flex flex-col gap-4 rounded-lg border bg-white p-4 md:flex-row md:flex-wrap md:items-end">
        <div className="grid gap-2 md:min-w-[200px]">
          <Label>Category</Label>
          <Select value={category} onValueChange={setCategory}>
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {categoryOptions.map((c) => (
                <SelectItem key={c.slug} value={c.slug}>
                  {c.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="grid gap-2 md:w-36">
          <Label>Min price</Label>
          <Input
            type="number"
            min={0}
            placeholder="0"
            value={minPrice}
            onChange={(e) => setMinPrice(e.target.value)}
          />
        </div>
        <div className="grid gap-2 md:w-36">
          <Label>Max price</Label>
          <Input
            type="number"
            min={0}
            placeholder="Any"
            value={maxPrice}
            onChange={(e) => setMaxPrice(e.target.value)}
          />
        </div>
        <div className="grid flex-1 gap-2 md:min-w-[200px]">
          <Label>Search</Label>
          <Input
            placeholder="Search title or description"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && load()}
          />
        </div>
        <Button type="button" variant="secondary" onClick={load}>
          Apply filters
        </Button>
      </div>

      {loading ? (
        <p className="text-center text-gray-500">Loading products…</p>
      ) : products.length === 0 ? (
        <p className="text-center text-gray-500">No products match your filters.</p>
      ) : (
        <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {products.map((p) => {
            const img = resolvePublicMediaUrl(p.images?.[0]);
            const price = effectivePrice(p);
            const showStrike = p.salePrice != null && p.salePrice >= 0;
            return (
              <li
                key={p._id}
                className="flex flex-col overflow-hidden rounded-lg border bg-white shadow-sm transition hover:shadow-md"
              >
                <Link href={`/product/${p.slug}`} className="block">
                  <div className="relative aspect-[4/3] bg-gray-100">
                    {img ? (
                      <Image
                        src={img}
                        alt=""
                        fill
                        className="object-cover"
                        sizes="(max-width: 768px) 100vw, 33vw"
                      />
                    ) : (
                      <div className="flex h-full items-center justify-center text-gray-400 text-sm">
                        No image
                      </div>
                    )}
                  </div>
                  <div className="space-y-1 p-4">
                    <h2 className="font-semibold text-slate-900 line-clamp-2">{p.title}</h2>
                    <p className="text-lg">
                      <span className="font-bold text-primary">{price.toFixed(2)}</span>
                      {showStrike ? (
                        <span className="ml-2 text-sm text-gray-400 line-through">
                          {p.price.toFixed(2)}
                        </span>
                      ) : null}
                    </p>
                    <ProductShippingBadges
                      shippingCost={p.shippingCost}
                      freeShipping={p.freeShipping}
                      expressShipping={p.expressShipping}
                    />
                  </div>
                </Link>
                <div className="mt-auto p-4 pt-0">
                  <AddToCartButton product={p} />
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}