import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import * as React from "react";
import { Check, ClipboardList, MessageCircle, ShieldCheck, Truck, BadgeCheck, ChevronLeft, ChevronRight } from "lucide-react";
import { i as Route, A as useSiteSettings, y as useProductsByCategorySlug, B as Button, H as waLinkFor, S as SITE, L as LOCATIONS, C as CATEGORIES } from "./router-D4ixsMHb.js";
import { P as ProductCard } from "./ProductCard-Dsg5zzJ_.js";
import { T as ToothIcon } from "./ToothIcon-C3uToVex.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";
function CategoryDetail() {
  const data = Route.useLoaderData();
  const {
    category
  } = data;
  const site = useSiteSettings();
  const {
    data: dbProducts
  } = useProductsByCategorySlug(category.slug);
  const products = dbProducts.length > 0 ? dbProducts : data.products;
  const image = category.image;
  const [sort, setSort] = React.useState("name");
  const [page, setPage] = React.useState(1);
  const PER_PAGE = 8;
  const sorted = React.useMemo(() => {
    const list = [...products];
    if (sort === "price-asc") list.sort((a, b) => a.price - b.price);
    else if (sort === "price-desc") list.sort((a, b) => b.price - a.price);
    else list.sort((a, b) => a.name.localeCompare(b.name));
    return list;
  }, [products, sort]);
  const totalPages = Math.max(1, Math.ceil(sorted.length / PER_PAGE));
  const currentPage = Math.min(page, totalPages);
  const paginated = sorted.slice((currentPage - 1) * PER_PAGE, currentPage * PER_PAGE);
  React.useEffect(() => {
    setPage(1);
  }, [sort, category.id]);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "container mx-auto px-4 pt-6 text-xs text-muted-foreground md:px-6", children: /* @__PURE__ */ jsxs("ol", { className: "flex flex-wrap items-center gap-1.5", children: [
      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: "/", className: "hover:text-brand-bright", children: "Home" }) }),
      /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: "/" }),
      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: "/categories", className: "hover:text-brand-bright", children: "Categories" }) }),
      /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: "/" }),
      /* @__PURE__ */ jsx("li", { className: "font-medium text-foreground", children: category.h1 })
    ] }) }),
    /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden bg-tooth-pattern", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto grid gap-8 px-4 py-10 md:grid-cols-2 md:items-center md:px-6 md:py-16", children: [
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-brand-bright/10 px-3 py-1 text-xs font-semibold text-brand-bright", children: [
          /* @__PURE__ */ jsx(ToothIcon, { className: "h-3.5 w-3.5" }),
          " ",
          category.name
        ] }),
        /* @__PURE__ */ jsx("h1", { className: "mt-3 font-display text-3xl font-extrabold text-foreground md:text-5xl", children: category.h1 }),
        /* @__PURE__ */ jsx("p", { className: "mt-4 text-base leading-relaxed text-foreground/80", children: category.intro }),
        /* @__PURE__ */ jsx("ul", { className: "mt-6 grid gap-2 sm:grid-cols-2", children: category.highlights.map((h) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground/85", children: [
          /* @__PURE__ */ jsx(Check, { className: "mt-0.5 h-4 w-4 flex-none text-brand-bright" }),
          h
        ] }, h)) }),
        /* @__PURE__ */ jsxs("div", { className: "mt-7 flex flex-wrap gap-3", children: [
          /* @__PURE__ */ jsx(Link, { to: "/quote", children: /* @__PURE__ */ jsxs(Button, { size: "lg", className: "gap-2 bg-brand text-brand-foreground hover:bg-brand/90", children: [
            /* @__PURE__ */ jsx(ClipboardList, { className: "h-4 w-4" }),
            " Request a quote"
          ] }) }),
          /* @__PURE__ */ jsx("a", { href: waLinkFor(site.whatsapp, `Hello ${site.name}, I'd like a quote for ${category.name}.`), target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(Button, { size: "lg", className: "gap-2 text-white", style: {
            background: "#25D366"
          }, children: [
            /* @__PURE__ */ jsx(MessageCircle, { className: "h-4 w-4" }),
            " WhatsApp"
          ] }) })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded border border-border shadow-[var(--shadow-elevated)]", children: [
        /* @__PURE__ */ jsx("img", { src: image, alt: `${category.name} — dental supplies in Kenya`, width: 1024, height: 768, className: "aspect-[4/3] h-full w-full object-cover" }),
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-tr from-brand/40 via-transparent to-transparent" })
      ] })
    ] }) }),
    /* @__PURE__ */ jsx("section", { className: "bg-surface py-14", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 md:px-6", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: "Who it's for" }),
      /* @__PURE__ */ jsx("div", { className: "mt-6 grid gap-4 md:grid-cols-3", children: category.uses.map((u, i) => {
        const Icon = [ShieldCheck, Truck, BadgeCheck][i % 3];
        return /* @__PURE__ */ jsxs("div", { className: "rounded border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
          /* @__PURE__ */ jsx("div", { className: "inline-flex h-10 w-10 items-center justify-center rounded-sm bg-brand-bright/10 text-brand-bright", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }) }),
          /* @__PURE__ */ jsx("h3", { className: "mt-4 font-display text-base font-bold text-foreground", children: u.t }),
          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: u.d })
        ] }, u.t);
      }) })
    ] }) }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-14 md:px-6", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: [
            category.name,
            " products"
          ] }),
          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [
            products.length,
            " ",
            products.length === 1 ? "product" : "products"
          ] })
        ] }),
        /* @__PURE__ */ jsxs("select", { value: sort, onChange: (e) => setSort(e.target.value), className: "h-10 rounded-sm border border-border bg-surface px-3 text-sm font-medium text-foreground", "aria-label": "Sort products", children: [
          /* @__PURE__ */ jsx("option", { value: "name", children: "Name: A–Z" }),
          /* @__PURE__ */ jsx("option", { value: "price-asc", children: "Price: low to high" }),
          /* @__PURE__ */ jsx("option", { value: "price-desc", children: "Price: high to low" })
        ] })
      ] }),
      products.length === 0 ? /* @__PURE__ */ jsx("div", { className: "mt-8 rounded border border-dashed border-border bg-card p-10 text-center text-muted-foreground", children: "Restock incoming — contact us for current availability." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("div", { className: "mt-6 grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-6 xl:grid-cols-4", children: paginated.map((p) => /* @__PURE__ */ jsx(ProductCard, { product: p }, p.id)) }),
        totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-10 flex items-center justify-center gap-2", children: [
          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "gap-1", onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: currentPage === 1, children: [
            /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
            " Prev"
          ] }),
          Array.from({
            length: totalPages
          }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsx("button", { onClick: () => setPage(n), "aria-current": n === currentPage ? "page" : void 0, className: `h-9 min-w-9 rounded-sm border px-3 text-sm font-medium transition ${n === currentPage ? "border-brand-bright bg-brand-bright text-white" : "border-border bg-card text-foreground hover:border-brand-bright"}`, children: n }, n)),
          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "gap-1", onClick: () => setPage((p) => Math.min(totalPages, p + 1)), disabled: currentPage === totalPages, children: [
            "Next ",
            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsx("section", { className: "bg-surface py-14", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto max-w-3xl px-4 md:px-6", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: "Frequently asked questions" }),
      /* @__PURE__ */ jsx("div", { className: "mt-6 divide-y divide-border overflow-hidden rounded border border-border bg-card", children: category.faqs.map((f) => /* @__PURE__ */ jsxs("details", { className: "group p-5", children: [
        /* @__PURE__ */ jsx("summary", { className: "cursor-pointer list-none font-semibold text-foreground transition group-open:text-brand-bright", children: f.q }),
        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-foreground/80", children: f.a })
      ] }, f.q)) })
    ] }) }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-14 md:px-6", children: [
      /* @__PURE__ */ jsxs("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: [
        category.name,
        " delivered across Kenya"
      ] }),
      /* @__PURE__ */ jsxs("p", { className: "mt-2 max-w-2xl text-sm text-muted-foreground", children: [
        SITE.name,
        " supplies ",
        category.name.toLowerCase(),
        " to dental clinics in:"
      ] }),
      /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-2", children: LOCATIONS.map((l) => /* @__PURE__ */ jsxs(Link, { to: "/locations/$city", params: {
        city: l.slug
      }, className: "rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-foreground/80 transition hover:border-brand-bright hover:text-brand-bright", children: [
        category.name,
        " in ",
        l.city
      ] }, l.slug)) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-14 md:px-6", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: "Explore other categories" }),
      /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-2", children: CATEGORIES.filter((c) => c.id !== category.id).map((c) => /* @__PURE__ */ jsx(Link, { to: "/categories/$slug", params: {
        slug: c.slug
      }, className: "rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-foreground/80 transition hover:border-brand-bright hover:text-brand-bright", children: c.name }, c.id)) })
    ] })
  ] });
}
export {
  CategoryDetail as component
};
