"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { subscribeProductSeoValidation, setProductSeoTranslator } from "./state.js";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { StatusBadge } from "@open-mercato/ui/primitives/status-badge";
import { Alert } from "@open-mercato/ui/primitives/alert";
function computeIssueKeys(title, description) {
  const issues = [];
  if (!title) {
    issues.push("addTitle");
  } else {
    if (title.length < 10) issues.push("titleTooShort");
    if (title.length > 60) issues.push("titleTooLong");
  }
  if (!description) {
    issues.push("addDescription");
  } else if (description.length < 50) {
    issues.push("descriptionTooShort");
  }
  return issues;
}
function ProductSeoWidget({ data }) {
  const t = useT();
  React.useEffect(() => {
    setProductSeoTranslator(t);
    return () => setProductSeoTranslator(null);
  }, [t]);
  const title = (data?.title || data?.name || "") ?? "";
  const description = data?.description ?? "";
  const baselineIssueKeys = React.useMemo(() => computeIssueKeys(title, description), [title, description]);
  const [validation, setValidation] = React.useState({ ok: baselineIssueKeys.length === 0, issues: baselineIssueKeys });
  React.useEffect(() => {
    setValidation({ ok: baselineIssueKeys.length === 0, issues: baselineIssueKeys });
  }, [baselineIssueKeys]);
  React.useEffect(() => {
    return subscribeProductSeoValidation((payload) => {
      setValidation({
        ok: payload.ok,
        issues: payload.issues,
        message: payload.message
      });
    });
  }, []);
  const titleScore = React.useMemo(() => {
    if (!title) return { text: t("catalog.products.create.seoWidget.missing", "Missing"), variant: "error" };
    if (title.length < 10) return { text: t("catalog.products.create.seoWidget.tooShort", "Too short"), variant: "warning" };
    if (title.length > 60) return { text: t("catalog.products.create.seoWidget.tooLong", "Too long"), variant: "warning" };
    return { text: t("catalog.products.create.seoWidget.good", "Good"), variant: "success" };
  }, [title, t]);
  const descScore = React.useMemo(() => {
    if (!description) return { text: t("catalog.products.create.seoWidget.missing", "Missing"), variant: "error" };
    if (description.length < 50) return { text: t("catalog.products.create.seoWidget.tooShort", "Too short"), variant: "warning" };
    return { text: t("catalog.products.create.seoWidget.good", "Good"), variant: "success" };
  }, [description, t]);
  const statusBadge = validation.ok ? /* @__PURE__ */ jsx(StatusBadge, { variant: "success", children: t("catalog.products.create.seoWidget.ready", "Ready") }) : /* @__PURE__ */ jsx(StatusBadge, { variant: "warning", children: t("catalog.products.create.seoWidget.needsAttention", "Needs attention") });
  const translateIssue = (issueKey) => {
    return t(`catalog.products.create.seoWidget.issues.${issueKey}`, issueKey);
  };
  return /* @__PURE__ */ jsxs("div", { className: "mt-4 w-full space-y-3 rounded-lg border bg-card p-4 shadow-sm", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: t("catalog.products.create.seoWidget.title", "SEO Optimization") }),
        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("catalog.products.create.seoWidget.hint", "Keep titles 10\u201360 chars and descriptions 50+ chars.") })
      ] }),
      statusBadge
    ] }),
    validation.message || validation.issues.length ? /* @__PURE__ */ jsxs(
      Alert,
      {
        status: validation.ok ? "success" : "warning",
        style: "lighter",
        size: "sm",
        showIcon: false,
        className: "text-xs",
        children: [
          validation.message ? /* @__PURE__ */ jsx("div", { className: "font-medium", children: validation.message }) : null,
          validation.issues.length ? /* @__PURE__ */ jsx("ul", { className: "ml-4 list-disc space-y-1 pt-1", children: validation.issues.map((issue) => /* @__PURE__ */ jsx("li", { children: translateIssue(issue) }, issue)) }) : null
        ]
      }
    ) : null,
    /* @__PURE__ */ jsxs("div", { className: "rounded border bg-muted/30 p-3 text-sm", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("catalog.products.create.seoWidget.titleLabel", "Title ({{count}} chars)", { count: title.length }) }),
        /* @__PURE__ */ jsx(StatusBadge, { variant: titleScore.variant, children: titleScore.text })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("catalog.products.create.seoWidget.descriptionLabel", "Description ({{count}} chars)", { count: description.length }) }),
        /* @__PURE__ */ jsx(StatusBadge, { variant: descScore.variant, children: descScore.text })
      ] })
    ] }),
    /* @__PURE__ */ jsxs("p", { className: "text-overline text-muted-foreground", children: [
      t("catalog.products.create.seoWidget.footer", "Example widget powered by the injection system."),
      " ",
      /* @__PURE__ */ jsx("a", { className: "text-primary underline", href: "/docs/framework/admin-ui/widget-injection", target: "_blank", rel: "noreferrer", children: t("catalog.products.create.seoWidget.learnMore", "Learn how to build your own") }),
      "."
    ] })
  ] });
}
export {
  ProductSeoWidget as default
};
//# sourceMappingURL=widget.client.js.map
