/**
 * ProTeaser - Compact upgrade prompt for Pro features.
 *
 * Replaces ProFeatureOverlay in the Kadence-pattern code separation.
 * Shows a simple card with PRO badge, feature name, and Learn More link.
 * Pro plugin uses addFilter to replace this with the actual settings panel.
 *
 * @package ZenBlocks
 */

import { __ } from "@wordpress/i18n";
import { getLocaleData } from "@wordpress/i18n";

const getDocsLanguageSegment = () => {
  const data = getLocaleData("zenblocks") || getLocaleData();
  const rawLocale = String((data && data[""] && data[""].lang) || "").toLowerCase().replace("-", "_");

  if (rawLocale.startsWith("ja")) return "ja";
  if (rawLocale.startsWith("de")) return "de";
  if (rawLocale.startsWith("es")) return "es";
  if (rawLocale.startsWith("fr")) return "fr";
  if (rawLocale.startsWith("id")) return "id";
  if (rawLocale.startsWith("it")) return "it";
  if (rawLocale.startsWith("ko")) return "ko";
  if (rawLocale.startsWith("nl")) return "nl";
  if (rawLocale.startsWith("pt")) return "pt-br";
  if (rawLocale.startsWith("zh")) return "zh-tw";
  return "en";
};

const resolveLearnMoreUrl = (learnMorePath) => {
  if (!learnMorePath) return "https://zenblockswp.com/pro/";
  if (/^https?:\/\//i.test(learnMorePath)) return learnMorePath;

  const lang = getDocsLanguageSegment();
  const normalizedPath = learnMorePath.startsWith("/") ? learnMorePath : `/${learnMorePath}`;
  return `https://zenblockswp.com/${lang}${normalizedPath}`;
};

const ProTeaser = ({ featureName = "", learnMorePath = "" }) => {
  const learnMoreUrl = resolveLearnMoreUrl(learnMorePath);

  return (
    <div className="zenblocks-pro-teaser">
      <div className="zenblocks-pro-teaser__badge">
        <span className="zenblocks-pro-teaser__badge-text">PRO</span>
      </div>
      <div className="zenblocks-pro-teaser__body">
        {featureName && (
          <p className="zenblocks-pro-teaser__feature-name">{featureName}</p>
        )}
        <p className="zenblocks-pro-teaser__message">
          {__("Available in Pro version", "zenblocks")}
        </p>
        <a
          href={learnMoreUrl}
          className="zenblocks-pro-teaser__link"
          target="_blank"
          rel="noopener noreferrer"
        >
          {__("Learn More", "zenblocks")}
          <svg
            className="zenblocks-pro-teaser__link-icon"
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
            <polyline points="15 3 21 3 21 9"></polyline>
            <line x1="10" y1="14" x2="21" y2="3"></line>
          </svg>
        </a>
      </div>
    </div>
  );
};

export default ProTeaser;
