import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useNavigate, Link } from "@tanstack/react-router";
import * as React from "react";
import { ChevronDown, Check, ChevronUp, Package, ShieldCheck, Truck, ArrowRight, Search, X } from "lucide-react";
import { I as Input } from "./input-Cu7YTZO_.js";
import { m as cn, R as Route, x as useProducts, v as useCategories, t as useBrands } from "./router-D4ixsMHb.js";
import { P as ProductCard } from "./ProductCard-Dsg5zzJ_.js";
import * as SelectPrimitive from "@radix-ui/react-select";
import { h as heroImg } from "./hero-TkSUT3Ve.js";
import "@tanstack/react-query";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "clsx";
import "tailwind-merge";
import "cmdk";
import "@radix-ui/react-dialog";
import "@supabase/supabase-js";
import "sonner";
const Select = SelectPrimitive.Root;
const SelectValue = SelectPrimitive.Value;
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  SelectPrimitive.Trigger,
  {
    ref,
    className: cn(
      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background cursor-pointer data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    ),
    ...props,
    children: [
      children,
      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
    ]
  }
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SelectPrimitive.ScrollUpButton,
  {
    ref,
    className: cn("flex cursor-default items-center justify-center py-1", className),
    ...props,
    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
  }
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SelectPrimitive.ScrollDownButton,
  {
    ref,
    className: cn("flex cursor-default items-center justify-center py-1", className),
    ...props,
    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
  }
));
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
  SelectPrimitive.Content,
  {
    ref,
    className: cn(
      "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)",
      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
      className
    ),
    position,
    ...props,
    children: [
      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
      /* @__PURE__ */ jsx(
        SelectPrimitive.Viewport,
        {
          className: cn(
            "p-1",
            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
          ),
          children
        }
      ),
      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
    ]
  }
) }));
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SelectPrimitive.Label,
  {
    ref,
    className: cn("px-2 py-1.5 text-sm font-semibold", className),
    ...props
  }
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  SelectPrimitive.Item,
  {
    ref,
    className: cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
    ]
  }
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SelectPrimitive.Separator,
  {
    ref,
    className: cn("-mx-1 my-1 h-px bg-muted", className),
    ...props
  }
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
function ProductsPage() {
  const {
    q,
    category,
    brand
  } = Route.useSearch();
  const navigate = useNavigate();
  const [term, setTerm] = React.useState(q ?? "");
  const {
    data: products
  } = useProducts();
  const {
    data: categories
  } = useCategories();
  const {
    data: brands
  } = useBrands();
  const cats = categories ?? [];
  const catById = {};
  for (const c of cats) catById[c.id] = {
    name: c.name
  };
  const brandBySlug = {};
  for (const b of brands ?? []) brandBySlug[b.slug] = {
    name: b.name
  };
  React.useEffect(() => setTerm(q ?? ""), [q]);
  const list = React.useMemo(() => {
    const needle = (q ?? "").toLowerCase().trim();
    return (products ?? []).filter((p) => {
      if (category && p.categoryId !== category) return false;
      if (brand && p.brandSlug !== brand) return false;
      if (!needle) return true;
      return p.name.toLowerCase().includes(needle) || p.short.toLowerCase().includes(needle) || (p.sku ?? "").toLowerCase().includes(needle) || (p.lot ?? "").toLowerCase().includes(needle) || (catById[p.categoryId]?.name ?? "").toLowerCase().includes(needle);
    });
  }, [q, category, brand, products, cats]);
  const setCategory = (c) => navigate({
    to: "/products",
    search: {
      q,
      brand,
      category: c
    }
  });
  const setBrand = (b) => navigate({
    to: "/products",
    search: {
      q,
      category,
      brand: b
    }
  });
  const clearAll = () => navigate({
    to: "/products",
    search: {}
  });
  const hasFilter = Boolean(q || category || brand);
  const activeCatName = category ? catById[category]?.name : void 0;
  const activeBrandName = brand ? brandBySlug[brand]?.name : void 0;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs("section", { className: "relative overflow-hidden", children: [
      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
        /* @__PURE__ */ jsx("img", { src: heroImg, alt: "", className: "h-full w-full object-cover", width: 1600, height: 600 }),
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-brand/95 via-brand/80 to-brand/30" }),
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-tooth-pattern-light opacity-60" })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "relative container mx-auto px-4 py-14 md:px-6 md:py-20", children: /* @__PURE__ */ jsxs("div", { className: "max-w-2xl text-brand-foreground", children: [
        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-medium backdrop-blur", children: [
          /* @__PURE__ */ jsx(Package, { className: "h-3.5 w-3.5" }),
          brand ? brandBySlug[brand]?.name ?? "Brand" : category ? catById[category]?.name ?? "All Products" : "All Products"
        ] }),
        /* @__PURE__ */ jsx("h1", { className: "mt-4 font-display text-3xl font-extrabold leading-tight md:text-4xl lg:text-5xl", children: brand ? `${brandBySlug[brand]?.name ?? "Brand"} Products` : category ? catById[category]?.name ?? "All Products" : "Browse Our Catalog" }),
        /* @__PURE__ */ jsxs("p", { className: "mt-3 max-w-lg text-sm text-white/85 md:text-base", children: [
          list.length,
          " ",
          list.length === 1 ? "product" : "products",
          " available",
          q ? /* @__PURE__ */ jsxs(Fragment, { children: [
            " matching “",
            q,
            "”"
          ] }) : null,
          ". Equipment, implants, consumables and more — delivered nationwide."
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "mt-5 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-white/80", children: [
          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
            /* @__PURE__ */ jsx(ShieldCheck, { className: "h-3.5 w-3.5" }),
            " Authentic stock"
          ] }),
          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
            /* @__PURE__ */ jsx(Truck, { className: "h-3.5 w-3.5" }),
            " Nationwide delivery"
          ] })
        ] }),
        !brand && !category && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-wrap gap-2", children: [
          cats.slice(0, 5).map((c) => /* @__PURE__ */ jsx(Link, { to: "/products", search: {
            category: c.id
          }, className: "inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-3 py-1.5 text-xs font-medium text-white backdrop-blur transition hover:bg-white/20", children: c.name }, c.id)),
          /* @__PURE__ */ jsxs(Link, { to: "/categories", className: "inline-flex items-center gap-1 rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-brand transition hover:bg-white/90", children: [
            "All categories ",
            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" })
          ] })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 pt-8 pb-10 md:px-6", children: [
      /* @__PURE__ */ jsxs("form", { onSubmit: (e) => {
        e.preventDefault();
        navigate({
          to: "/products",
          search: {
            q: term,
            category,
            brand
          }
        });
      }, className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-2", children: [
        /* @__PURE__ */ jsxs("div", { className: "relative w-full sm:max-w-md sm:flex-1", children: [
          /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
          /* @__PURE__ */ jsx(Input, { value: term, onChange: (e) => setTerm(e.target.value), placeholder: "Search products…", className: "h-10 w-full pl-9" })
        ] }),
        /* @__PURE__ */ jsxs(Select, { value: category ?? "all", onValueChange: (v) => setCategory(v === "all" ? void 0 : v), children: [
          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-10 w-full sm:w-[180px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "All categories" }) }),
          /* @__PURE__ */ jsxs(SelectContent, { children: [
            /* @__PURE__ */ jsx(SelectItem, { value: "all", children: "All categories" }),
            cats.map((c) => /* @__PURE__ */ jsx(SelectItem, { value: c.id, children: c.name }, c.id))
          ] })
        ] })
      ] }),
      hasFilter && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [
        q && /* @__PURE__ */ jsx(FilterChip, { label: `“${q}”`, onClear: () => {
          setTerm("");
          navigate({
            to: "/products",
            search: {
              category,
              brand
            }
          });
        } }),
        activeCatName && /* @__PURE__ */ jsx(FilterChip, { label: activeCatName, onClear: () => setCategory(void 0) }),
        activeBrandName && /* @__PURE__ */ jsx(FilterChip, { label: activeBrandName, onClear: () => setBrand(void 0) }),
        /* @__PURE__ */ jsx("button", { type: "button", onClick: clearAll, className: "text-xs font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline", children: "Clear all" })
      ] }),
      list.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-12 rounded border border-dashed border-border bg-card p-12 text-center", children: [
        /* @__PURE__ */ jsx("p", { className: "text-foreground", children: "No products match your search." }),
        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Try a different keyword or clear the filters." })
      ] }) : /* @__PURE__ */ jsx("div", { className: "mt-8 grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-6 lg:grid-cols-4", children: list.map((p) => /* @__PURE__ */ jsx(ProductCard, { product: p }, p.id)) })
    ] })
  ] });
}
function FilterChip({
  label,
  onClear
}) {
  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-foreground", children: [
    label,
    /* @__PURE__ */ jsx("button", { type: "button", onClick: onClear, className: "ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": `Clear ${label}`, children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
  ] });
}
export {
  ProductsPage as component
};
