"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useTranslations } from "next-intl";
import { useQuery } from "@tanstack/react-query";
import { Input } from "../../ui/input";
import { Textarea } from "../../ui/textarea";
import { Label } from "../../ui/label";
import { Badge } from "../../ui/badge";
import { ScrollArea } from "../../ui/scroll-area";
import { Checkbox } from "../../ui/checkbox";
import { FileText, Image, Tag, Loader2 } from "lucide-react";
function EntityFieldsSidebar({
  entityConfig,
  fields,
  onChange,
  selectedCategories = [],
  onCategoryToggle
}) {
  var _a, _b, _c, _d;
  const t = useTranslations("admin.builder");
  const sidebarFields = ((_a = entityConfig.builder) == null ? void 0 : _a.sidebarFields) || [];
  const taxonomyTypes = ((_b = entityConfig.taxonomies) == null ? void 0 : _b.types) || [];
  const taxonomiesEnabled = ((_c = entityConfig.taxonomies) == null ? void 0 : _c.enabled) && taxonomyTypes.length > 0;
  const firstTaxonomy = taxonomyTypes[0];
  const taxonomyApiPath = ((_d = firstTaxonomy == null ? void 0 : firstTaxonomy.type) == null ? void 0 : _d.replace("_", "-")) + "s";
  const { data: taxonomyData, isLoading: taxonomyLoading } = useQuery({
    queryKey: ["taxonomies", taxonomyApiPath],
    queryFn: async () => {
      const response = await fetch(`/api/v1/${taxonomyApiPath}`);
      if (!response.ok) return { data: [] };
      return response.json();
    },
    enabled: taxonomiesEnabled && !!taxonomyApiPath
  });
  const taxonomyItems = (taxonomyData == null ? void 0 : taxonomyData.data) || [];
  const renderField = (fieldName) => {
    const value = fields[fieldName];
    const isTextarea = fieldName.toLowerCase().includes("excerpt") || fieldName.toLowerCase().includes("description") || fieldName.toLowerCase().includes("summary");
    const isImage = fieldName.toLowerCase().includes("image") || fieldName.toLowerCase().includes("thumbnail") || fieldName.toLowerCase().includes("photo");
    const fieldLabel = fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/([A-Z])/g, " $1");
    if (isTextarea) {
      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-muted-foreground" }),
          fieldLabel
        ] }),
        /* @__PURE__ */ jsx(
          Textarea,
          {
            id: fieldName,
            value: value || "",
            onChange: (e) => onChange(fieldName, e.target.value),
            placeholder: t("placeholders.excerpt"),
            rows: 4,
            className: "resize-none",
            "data-cy": `field-${fieldName}`
          }
        )
      ] }, fieldName);
    }
    if (isImage) {
      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(Image, { className: "h-4 w-4 text-muted-foreground" }),
          fieldLabel
        ] }),
        /* @__PURE__ */ jsx(
          Input,
          {
            id: fieldName,
            type: "url",
            value: value || "",
            onChange: (e) => onChange(fieldName, e.target.value),
            placeholder: t("placeholders.imageUrl"),
            "data-cy": `field-${fieldName}`
          }
        ),
        value && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-md border overflow-hidden", children: /* @__PURE__ */ jsx(
          "img",
          {
            src: value,
            alt: fieldLabel,
            className: "w-full h-32 object-cover",
            onError: (e) => {
              e.target.style.display = "none";
            }
          }
        ) })
      ] }, fieldName);
    }
    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
      /* @__PURE__ */ jsx(Label, { htmlFor: fieldName, children: fieldLabel }),
      /* @__PURE__ */ jsx(
        Input,
        {
          id: fieldName,
          value: value || "",
          onChange: (e) => onChange(fieldName, e.target.value),
          "data-cy": `field-${fieldName}`
        }
      )
    ] }, fieldName);
  };
  const currentCategories = fields.categories || [];
  const handleCategoryClick = (categoryId) => {
    const newCategories = currentCategories.includes(categoryId) ? currentCategories.filter((id) => id !== categoryId) : [...currentCategories, categoryId];
    onChange("categories", newCategories);
  };
  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col bg-card", "data-cy": "entity-fields-sidebar", children: [
    /* @__PURE__ */ jsxs("div", { className: "border-b p-4", children: [
      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: t("sidebar.fieldsTitle") }),
      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("sidebar.fieldsDescription") })
    ] }),
    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
      sidebarFields.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: sidebarFields.map((fieldName) => renderField(fieldName)) }),
      taxonomiesEnabled && firstTaxonomy && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(Tag, { className: "h-4 w-4 text-muted-foreground" }),
          /* @__PURE__ */ jsx(Label, { children: firstTaxonomy.label || "Categories" })
        ] }),
        taxonomyLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : taxonomyItems.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("sidebar.noCategories") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: taxonomyItems.map((item) => /* @__PURE__ */ jsxs(
          "div",
          {
            className: "flex items-center gap-2 rounded-md border p-2 hover:bg-accent transition-colors cursor-pointer",
            onClick: () => handleCategoryClick(item.id),
            "data-cy": `category-${item.slug}`,
            children: [
              /* @__PURE__ */ jsx(
                Checkbox,
                {
                  checked: currentCategories.includes(item.id),
                  onCheckedChange: () => handleCategoryClick(item.id)
                }
              ),
              /* @__PURE__ */ jsx("span", { className: "text-sm flex-1", children: item.name }),
              item.color && /* @__PURE__ */ jsx(
                "div",
                {
                  className: "h-3 w-3 rounded-full",
                  style: { backgroundColor: item.color }
                }
              )
            ]
          },
          item.id
        )) }),
        currentCategories.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 pt-2", children: currentCategories.map((catId) => {
          const cat = taxonomyItems.find((t2) => t2.id === catId);
          return cat ? /* @__PURE__ */ jsxs(
            Badge,
            {
              variant: "secondary",
              className: "cursor-pointer",
              onClick: () => handleCategoryClick(cat.id),
              style: cat.color ? { backgroundColor: cat.color, color: "#fff" } : void 0,
              children: [
                cat.name,
                " \xD7"
              ]
            },
            cat.id
          ) : null;
        }) })
      ] }),
      sidebarFields.length === 0 && !taxonomiesEnabled && /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { children: t("sidebar.noFields") }) })
    ] }) })
  ] });
}
export {
  EntityFieldsSidebar
};
