"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import { useTranslations } from "next-intl";
import { Button } from "../../ui/button.js";
import { Card, CardContent } from "../../ui/card.js";
import { Trash2, FileText, Palette, Settings2, X, SlidersHorizontal, Layers, Lock } from "lucide-react";
import Link from "next/link";
import { cn } from "../../../lib/utils/index.js";
import { sel } from "../../../lib/test/index.js";
import { DynamicForm } from "./dynamic-form.js";
import { isPatternReference } from "../../../types/pattern-reference.js";
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,
  onClose
}) {
  const t = useTranslations("admin.builder.settingsPanel");
  const [activeTab, setActiveTab] = useState("content");
  const groupedFields = useMemo(() => {
    if (!block || isPatternReference(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": sel("blockEditor.blockPropertiesPanel.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") })
    ] }) });
  }
  if (isPatternReference(block)) {
    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col bg-card", "data-cy": sel("blockEditor.blockPropertiesPanel.patternLocked"), children: [
      /* @__PURE__ */ jsx("div", { className: "border-b p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(Layers, { className: "h-5 w-5 text-primary" }),
          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: t("pattern.title") })
        ] }),
        onClose && /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "icon",
            className: "h-7 w-7",
            onClick: onClose,
            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
          }
        )
      ] }) }),
      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center p-8", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-xs", children: [
        /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 h-12 w-12 rounded-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-muted-foreground" }) }),
        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground mb-2", children: t("pattern.locked.title") }),
        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-6", children: t("pattern.locked.description") }),
        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "default",
              size: "sm",
              className: "w-full",
              asChild: true,
              children: /* @__PURE__ */ jsxs(Link, { href: `/dashboard/patterns/${block.ref}/edit`, children: [
                t("pattern.actions.edit"),
                " \u2192"
              ] })
            }
          ),
          /* @__PURE__ */ jsxs(
            Button,
            {
              variant: "outline",
              size: "sm",
              className: "w-full",
              onClick: onRemove,
              children: [
                /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5 mr-2" }),
                t("pattern.actions.remove")
              ]
            }
          )
        ] })
      ] }) })
    ] });
  }
  const blockConfig = BLOCK_REGISTRY[block.blockSlug];
  if (!blockConfig) {
    return /* @__PURE__ */ jsx("div", { className: "p-4", "data-cy": sel("blockEditor.blockPropertiesPanel.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": sel("blockEditor.blockPropertiesPanel.container"), children: [
    /* @__PURE__ */ jsxs("div", { className: "border-b p-4", "data-cy": sel("blockEditor.blockPropertiesPanel.header"), children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-5 w-5 text-primary" }),
          /* @__PURE__ */ jsx(
            "h3",
            {
              className: "text-lg font-semibold text-foreground",
              "data-cy": sel("blockEditor.blockPropertiesPanel.blockName"),
              children: t("title")
            }
          )
        ] }),
        onClose && /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "icon",
            className: "h-7 w-7",
            onClick: onClose,
            "data-cy": sel("blockEditor.blockPropertiesPanel.closeBtn"),
            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
          }
        )
      ] }),
      /* @__PURE__ */ jsxs(
        "div",
        {
          className: "flex items-center gap-2 bg-muted/50 px-3 py-2 rounded-md",
          "data-cy": sel("blockEditor.blockPropertiesPanel.blockIcon"),
          children: [
            /* @__PURE__ */ jsx(Layers, { className: "h-4 w-4 text-muted-foreground" }),
            /* @__PURE__ */ jsx(
              "span",
              {
                className: "text-sm text-foreground",
                "data-cy": sel("blockEditor.blockPropertiesPanel.blockName"),
                children: blockConfig.name
              }
            )
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden flex flex-col", children: hasAnyFields ? /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsxs("div", { className: "flex border-b border-border", "data-cy": sel("blockEditor.blockPropertiesPanel.tabs"), children: [
        /* @__PURE__ */ jsxs(
          "button",
          {
            className: cn(
              "flex-1 py-3 text-sm font-medium transition-colors relative flex items-center justify-center gap-1.5",
              activeTab === "content" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
              !hasContentFields && "opacity-50 cursor-not-allowed",
              hasContentFields && "cursor-pointer"
            ),
            onClick: () => hasContentFields && setActiveTab("content"),
            disabled: !hasContentFields,
            "data-cy": sel("blockEditor.blockPropertiesPanel.tabContent"),
            children: [
              /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5" }),
              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("tabs.content") }),
              activeTab === "content" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary" })
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          "button",
          {
            className: cn(
              "flex-1 py-3 text-sm font-medium transition-colors relative flex items-center justify-center gap-1.5",
              activeTab === "design" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
              !hasDesignFields && "opacity-50 cursor-not-allowed",
              hasDesignFields && "cursor-pointer"
            ),
            onClick: () => hasDesignFields && setActiveTab("design"),
            disabled: !hasDesignFields,
            "data-cy": sel("blockEditor.blockPropertiesPanel.tabDesign"),
            children: [
              /* @__PURE__ */ jsx(Palette, { className: "h-3.5 w-3.5" }),
              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("tabs.design") }),
              activeTab === "design" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary" })
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          "button",
          {
            className: cn(
              "flex-1 py-3 text-sm font-medium transition-colors relative flex items-center justify-center gap-1.5",
              activeTab === "advanced" ? "text-primary bg-primary/5" : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
              !hasAdvancedFields && "opacity-50 cursor-not-allowed",
              hasAdvancedFields && "cursor-pointer"
            ),
            onClick: () => hasAdvancedFields && setActiveTab("advanced"),
            disabled: !hasAdvancedFields,
            "data-cy": sel("blockEditor.blockPropertiesPanel.tabAdvanced"),
            children: [
              /* @__PURE__ */ jsx(Settings2, { className: "h-3.5 w-3.5" }),
              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t("tabs.advanced") }),
              activeTab === "advanced" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary" })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [
        activeTab === "content" && (hasContentFields ? /* @__PURE__ */ jsx(
          DynamicForm,
          {
            fieldDefinitions: groupedFields.content,
            values: block.props,
            onChange: onUpdateProps
          }
        ) : /* @__PURE__ */ jsx(EmptyTabMessage, { message: t("tabs.noContentFields") })),
        activeTab === "design" && (hasDesignFields ? /* @__PURE__ */ jsx(
          DynamicForm,
          {
            fieldDefinitions: groupedFields.design,
            values: block.props,
            onChange: onUpdateProps
          }
        ) : /* @__PURE__ */ jsx(EmptyTabMessage, { message: t("tabs.noDesignFields") })),
        activeTab === "advanced" && (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
};
