"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { useTranslations } from "next-intl";
import { Button } from "../../ui/button";
import { Card, CardContent } from "../../ui/card";
import { Badge } from "../../ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
import { Trash2, RotateCcw, FileText, Palette, Settings2 } from "lucide-react";
import { DynamicForm } from "./dynamic-form";
import { BLOCK_REGISTRY } from "@nextsparkjs/registries/block-registry";
function groupFieldsByTab(fields) {
  const grouped = {
    content: [],
    design: [],
    advanced: []
  };
  for (const field of fields) {
    const tab = field.tab || "content";
    grouped[tab].push(field);
  }
  return grouped;
}
function BlockSettingsPanel({
  block,
  onUpdateProps,
  onRemove
}) {
  const t = useTranslations("admin.blockEditor.settings");
  const groupedFields = useMemo(() => {
    if (!block) return null;
    const blockConfig2 = BLOCK_REGISTRY[block.blockSlug];
    if (!(blockConfig2 == null ? void 0 : blockConfig2.fieldDefinitions)) return null;
    return groupFieldsByTab(blockConfig2.fieldDefinitions);
  }, [block]);
  if (!block) {
    return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-8 bg-muted/10", "data-cy": "settings-panel-empty", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("empty.message") }),
      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: t("empty.hint") })
    ] }) });
  }
  const blockConfig = BLOCK_REGISTRY[block.blockSlug];
  if (!blockConfig) {
    return /* @__PURE__ */ jsx("div", { className: "p-4", "data-cy": "settings-panel-error", children: /* @__PURE__ */ jsx(Card, { className: "border-destructive", children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: t("error.notFound", { slug: block.blockSlug }) }) }) }) });
  }
  const handleReset = () => {
    onUpdateProps({});
  };
  const hasContentFields = groupedFields && groupedFields.content.length > 0;
  const hasDesignFields = groupedFields && groupedFields.design.length > 0;
  const hasAdvancedFields = groupedFields && groupedFields.advanced.length > 0;
  const hasAnyFields = hasContentFields || hasDesignFields || hasAdvancedFields;
  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col bg-card", "data-cy": "block-settings-panel", children: [
    /* @__PURE__ */ jsxs("div", { className: "border-b p-4", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 mb-2", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground truncate", children: blockConfig.name }),
          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: blockConfig.description })
        ] }),
        /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "capitalize", children: blockConfig.category })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-4", children: [
        /* @__PURE__ */ jsxs(
          Button,
          {
            variant: "outline",
            size: "sm",
            onClick: handleReset,
            className: "flex-1",
            "data-cy": "reset-block-props",
            children: [
              /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4 mr-2" }),
              t("actions.reset")
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          Button,
          {
            variant: "destructive",
            size: "sm",
            onClick: onRemove,
            "data-cy": "remove-block-settings",
            children: [
              /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
              t("actions.remove")
            ]
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: hasAnyFields ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: "content", className: "h-full flex flex-col", children: [
      /* @__PURE__ */ jsx("div", { className: "border-b px-4 pt-2", children: /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-3", children: [
        /* @__PURE__ */ jsxs(
          TabsTrigger,
          {
            value: "content",
            className: "flex items-center gap-1.5",
            disabled: !hasContentFields,
            "data-cy": "tab-content",
            children: [
              /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5" }),
              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("tabs.content") })
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          TabsTrigger,
          {
            value: "design",
            className: "flex items-center gap-1.5",
            disabled: !hasDesignFields,
            "data-cy": "tab-design",
            children: [
              /* @__PURE__ */ jsx(Palette, { className: "h-3.5 w-3.5" }),
              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("tabs.design") })
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          TabsTrigger,
          {
            value: "advanced",
            className: "flex items-center gap-1.5",
            disabled: !hasAdvancedFields,
            "data-cy": "tab-advanced",
            children: [
              /* @__PURE__ */ jsx(Settings2, { className: "h-3.5 w-3.5" }),
              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("tabs.advanced") })
            ]
          }
        )
      ] }) }),
      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
        /* @__PURE__ */ jsx(TabsContent, { value: "content", className: "p-4 m-0 h-full", children: hasContentFields ? /* @__PURE__ */ jsx(
          DynamicForm,
          {
            fieldDefinitions: groupedFields.content,
            values: block.props,
            onChange: onUpdateProps
          }
        ) : /* @__PURE__ */ jsx(EmptyTabMessage, { message: t("tabs.noContentFields") }) }),
        /* @__PURE__ */ jsx(TabsContent, { value: "design", className: "p-4 m-0 h-full", children: hasDesignFields ? /* @__PURE__ */ jsx(
          DynamicForm,
          {
            fieldDefinitions: groupedFields.design,
            values: block.props,
            onChange: onUpdateProps
          }
        ) : /* @__PURE__ */ jsx(EmptyTabMessage, { message: t("tabs.noDesignFields") }) }),
        /* @__PURE__ */ jsx(TabsContent, { value: "advanced", className: "p-4 m-0 h-full", children: hasAdvancedFields ? /* @__PURE__ */ jsx(
          DynamicForm,
          {
            fieldDefinitions: groupedFields.advanced,
            values: block.props,
            onChange: onUpdateProps
          }
        ) : /* @__PURE__ */ jsx(EmptyTabMessage, { message: t("tabs.noAdvancedFields") }) })
      ] })
    ] }) : /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: t("noFields") }) }) }) })
  ] });
}
function EmptyTabMessage({ message }) {
  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: message }) });
}
export {
  BlockSettingsPanel
};
