"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { useLocale, useTranslations } from "next-intl";
function TranslationDebugger() {
  const [isEnabled, setIsEnabled] = useState(false);
  const [debugInfo, setDebugInfo] = useState({
    locale: "",
    timestamp: "",
    namespaces: {}
  });
  const locale = useLocale();
  const tCommon = useTranslations("common");
  const tDashboard = useTranslations("dashboard");
  const tSettings = useTranslations("settings");
  const tAuth = useTranslations("auth");
  const tPublic = useTranslations("public");
  const tValidation = useTranslations("validation");
  const tAdmin = useTranslations("admin");
  useEffect(() => {
    if (process.env.NODE_ENV !== "development") return;
    const params = new URLSearchParams(window.location.search);
    setIsEnabled(params.get("debug-i18n") === "true");
  }, []);
  useEffect(() => {
    if (!isEnabled) return;
    const testTranslations = () => {
      const info = {
        locale,
        timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
        namespaces: {}
      };
      const namespacesToTest = [
        { name: "common", t: tCommon },
        { name: "dashboard", t: tDashboard },
        { name: "settings", t: tSettings },
        { name: "auth", t: tAuth },
        { name: "public", t: tPublic },
        { name: "validation", t: tValidation },
        { name: "admin", t: tAdmin }
      ];
      namespacesToTest.forEach(({ name: namespace, t }) => {
        try {
          const testKeys = ["title", "description", "name", "loading", "error"];
          info.namespaces[namespace] = {
            available: true,
            testKeys: testKeys.reduce((acc, key) => {
              try {
                const value = t(key);
                acc[key] = value !== key;
              } catch {
                acc[key] = false;
              }
              return acc;
            }, {})
          };
        } catch (error) {
          info.namespaces[namespace] = {
            available: false,
            error: error instanceof Error ? error.message : "Unknown error"
          };
        }
      });
      setDebugInfo(info);
    };
    testTranslations();
    const interval = setInterval(testTranslations, 5e3);
    return () => clearInterval(interval);
  }, [isEnabled, locale, tCommon, tDashboard, tSettings, tAuth, tPublic, tValidation, tAdmin]);
  if (!isEnabled || process.env.NODE_ENV !== "development") {
    return null;
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      style: {
        position: "fixed",
        top: "10px",
        right: "10px",
        backgroundColor: "rgba(0, 0, 0, 0.9)",
        color: "white",
        padding: "12px",
        borderRadius: "8px",
        fontSize: "12px",
        fontFamily: "monospace",
        zIndex: 9999,
        maxWidth: "400px",
        maxHeight: "300px",
        overflow: "auto",
        border: "2px solid #00ff00"
      },
      children: [
        /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#00ff00" }, children: "\u{1F30D} i18n Debug Panel" }),
        /* @__PURE__ */ jsxs("div", { style: { marginBottom: "4px" }, children: [
          /* @__PURE__ */ jsx("strong", { children: "Locale:" }),
          " ",
          debugInfo.locale
        ] }),
        /* @__PURE__ */ jsxs("div", { style: { marginBottom: "4px" }, children: [
          /* @__PURE__ */ jsx("strong", { children: "Last Check:" }),
          " ",
          debugInfo.timestamp
        ] }),
        /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx("strong", { children: "Namespaces:" }) }),
        Object.entries(debugInfo.namespaces || {}).map(([namespace, info]) => /* @__PURE__ */ jsxs("div", { style: { marginLeft: "8px", marginBottom: "4px" }, children: [
          /* @__PURE__ */ jsx("span", { style: { color: info.available ? "#00ff00" : "#ff0000" }, children: info.available ? "\u2713" : "\u2717" }),
          /* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: namespace }),
          info.available && info.testKeys && /* @__PURE__ */ jsx("div", { style: { marginLeft: "16px", fontSize: "10px" }, children: Object.entries(info.testKeys).map(([key, works]) => /* @__PURE__ */ jsxs("span", { style: {
            color: works ? "#90EE90" : "#FFB6C1",
            marginRight: "4px"
          }, children: [
            key,
            ":",
            works ? "\u2713" : "\u2717"
          ] }, key)) }),
          !info.available && /* @__PURE__ */ jsxs("div", { style: { marginLeft: "16px", color: "#ff0000", fontSize: "10px" }, children: [
            "Error: ",
            info.error
          ] })
        ] }, namespace)),
        /* @__PURE__ */ jsxs("div", { style: {
          marginTop: "8px",
          padding: "4px",
          backgroundColor: "rgba(255, 255, 255, 0.1)",
          borderRadius: "4px",
          fontSize: "10px"
        }, children: [
          "Para ocultar: remueve ",
          /* @__PURE__ */ jsx("code", { children: "?debug-i18n=true" }),
          " de la URL"
        ] })
      ]
    }
  );
}
export {
  TranslationDebugger
};
