"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useCallback, useEffect } from "react";
import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card.js";
import { Input } from "../../ui/input.js";
import { Label } from "../../ui/label.js";
import { Textarea } from "../../ui/textarea.js";
import { Button } from "../../ui/button.js";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from "../../ui/accordion.js";
import { Search, Settings2, Plus, Trash2 } from "lucide-react";
import { sel } from "../../../lib/test/index.js";
function PageSettingsPanel({ settings, onChange }) {
  var _a;
  const t = useTranslations("admin.pages.settings");
  const [seo, setSeo] = useState(settings.seo || {});
  const [customFields, setCustomFields] = useState(
    settings.customFields || []
  );
  useEffect(() => {
    setSeo(settings.seo || {});
    setCustomFields(settings.customFields || []);
  }, [settings]);
  const handleSeoChange = useCallback((field, value) => {
    const newSeo = { ...seo, [field]: value };
    setSeo(newSeo);
    onChange({ seo: newSeo, customFields });
  }, [seo, customFields, onChange]);
  const handleAddCustomField = useCallback(() => {
    const newFields = [...customFields, { key: "", value: "" }];
    setCustomFields(newFields);
    onChange({ seo, customFields: newFields });
  }, [seo, customFields, onChange]);
  const handleUpdateCustomField = useCallback((index, field, value) => {
    const newFields = customFields.map(
      (f, i) => i === index ? { ...f, [field]: value } : f
    );
    setCustomFields(newFields);
    onChange({ seo, customFields: newFields });
  }, [seo, customFields, onChange]);
  const handleRemoveCustomField = useCallback((index) => {
    const newFields = customFields.filter((_, i) => i !== index);
    setCustomFields(newFields);
    onChange({ seo, customFields: newFields });
  }, [seo, customFields, onChange]);
  return /* @__PURE__ */ jsxs("div", { className: "mt-16", "data-cy": sel("blockEditor.entityMetaPanel.container"), children: [
    /* @__PURE__ */ jsx("hr", { className: "border-border/50 mb-6" }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-base font-medium flex items-center gap-2", children: [
        /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" }),
        t("title")
      ] }) }),
      /* @__PURE__ */ jsx(CardContent, { className: "pt-0", children: /* @__PURE__ */ jsxs(Accordion, { type: "multiple", defaultValue: ["seo"], className: "w-full", children: [
        /* @__PURE__ */ jsxs(AccordionItem, { value: "seo", children: [
          /* @__PURE__ */ jsx(AccordionTrigger, { className: "py-3", "data-cy": sel("blockEditor.entityMetaPanel.seoSection.trigger"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-muted-foreground" }),
            /* @__PURE__ */ jsx("span", { children: t("seo.title") })
          ] }) }),
          /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 pt-2", children: [
            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
              /* @__PURE__ */ jsx(Label, { htmlFor: "meta-title", children: t("seo.metaTitle") }),
              /* @__PURE__ */ jsx(
                Input,
                {
                  id: "meta-title",
                  value: seo.metaTitle || "",
                  onChange: (e) => handleSeoChange("metaTitle", e.target.value),
                  placeholder: t("seo.metaTitlePlaceholder"),
                  "data-cy": sel("blockEditor.entityMetaPanel.seoSection.metaTitle")
                }
              ),
              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("seo.metaTitleHint") })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
              /* @__PURE__ */ jsx(Label, { htmlFor: "meta-description", children: t("seo.metaDescription") }),
              /* @__PURE__ */ jsx(
                Textarea,
                {
                  id: "meta-description",
                  value: seo.metaDescription || "",
                  onChange: (e) => handleSeoChange("metaDescription", e.target.value),
                  placeholder: t("seo.metaDescriptionPlaceholder"),
                  rows: 3,
                  "data-cy": sel("blockEditor.entityMetaPanel.seoSection.metaDescription")
                }
              ),
              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
                ((_a = seo.metaDescription) == null ? void 0 : _a.length) || 0,
                "/160 ",
                t("seo.characters")
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
              /* @__PURE__ */ jsx(Label, { htmlFor: "meta-keywords", children: t("seo.metaKeywords") }),
              /* @__PURE__ */ jsx(
                Input,
                {
                  id: "meta-keywords",
                  value: seo.metaKeywords || "",
                  onChange: (e) => handleSeoChange("metaKeywords", e.target.value),
                  placeholder: t("seo.metaKeywordsPlaceholder"),
                  "data-cy": sel("blockEditor.entityMetaPanel.seoSection.metaKeywords")
                }
              ),
              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("seo.metaKeywordsHint") })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
              /* @__PURE__ */ jsx(Label, { htmlFor: "og-image", children: t("seo.ogImage") }),
              /* @__PURE__ */ jsx(
                Input,
                {
                  id: "og-image",
                  value: seo.ogImage || "",
                  onChange: (e) => handleSeoChange("ogImage", e.target.value),
                  placeholder: t("seo.ogImagePlaceholder"),
                  "data-cy": sel("blockEditor.entityMetaPanel.seoSection.ogImage")
                }
              ),
              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("seo.ogImageHint") })
            ] })
          ] }) })
        ] }),
        /* @__PURE__ */ jsxs(AccordionItem, { value: "custom-fields", children: [
          /* @__PURE__ */ jsx(AccordionTrigger, { className: "py-3", "data-cy": sel("blockEditor.entityMetaPanel.customFields.trigger"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4 text-muted-foreground" }),
            /* @__PURE__ */ jsx("span", { children: t("customFields.title") })
          ] }) }),
          /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 pt-2", children: [
            customFields.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center py-4", children: t("customFields.empty") }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: customFields.map((field, index) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-start", children: [
              /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
                Input,
                {
                  value: field.key,
                  onChange: (e) => handleUpdateCustomField(index, "key", e.target.value),
                  placeholder: t("customFields.keyPlaceholder"),
                  className: "font-mono text-sm",
                  "data-cy": sel("blockEditor.entityMetaPanel.customFields.fieldKey", { index })
                }
              ) }),
              /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
                Input,
                {
                  value: field.value,
                  onChange: (e) => handleUpdateCustomField(index, "value", e.target.value),
                  placeholder: t("customFields.valuePlaceholder"),
                  "data-cy": sel("blockEditor.entityMetaPanel.customFields.fieldValue", { index })
                }
              ) }),
              /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  size: "icon",
                  className: "shrink-0 text-muted-foreground hover:text-destructive",
                  onClick: () => handleRemoveCustomField(index),
                  "data-cy": sel("blockEditor.entityMetaPanel.customFields.fieldRemove", { index }),
                  children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
                }
              )
            ] }, index)) }),
            /* @__PURE__ */ jsxs(
              Button,
              {
                variant: "outline",
                size: "sm",
                onClick: handleAddCustomField,
                className: "w-full",
                "data-cy": sel("blockEditor.entityMetaPanel.customFields.addButton"),
                children: [
                  /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
                  t("customFields.add")
                ]
              }
            )
          ] }) })
        ] })
      ] }) })
    ] })
  ] });
}
export {
  PageSettingsPanel
};
