/**
 * ProPanelShell - Lightweight PRO feature placeholder for free version.
 *
 * Renders a PanelBody with the same visual design as ProFeatureOverlay
 * (dark overlay with PRO badge, message, and Learn More link) but WITHOUT
 * importing any heavy PRO settings modules.
 *
 * When zenblocks-pro is active, addFilter replaces this with the real panel.
 *
 * @package ZenBlocks
 */

import { __ } from "@wordpress/i18n";
import { getLocaleData } from "@wordpress/i18n";
import { PanelBody } from "@wordpress/components";
import PanelBodyWithSync from "./PanelBodyWithSync";
import "./pro-feature-overlay.css";

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 "#";
  if (/^https?:\/\//i.test(learnMorePath)) return learnMorePath;

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

/**
 * The inner overlay content (PRO badge + message + learn more link).
 * Uses the same CSS classes as ProFeatureOverlay for identical appearance.
 */
const ProOverlayContent = ({ featureName, learnMorePath }) => {
  const learnMoreUrl = resolveLearnMoreUrl(learnMorePath);

  return (
    <div className="zenblocks-pro-feature-wrapper">
      <div className="zenblocks-pro-feature-content">
        <div style={{ minHeight: "60px" }} />
      </div>
      <div className="zenblocks-pro-feature-overlay">
        <div className="zenblocks-pro-feature-badge">
          <span className="zenblocks-pro-feature-badge-text">PRO</span>
        </div>
        <p className="zenblocks-pro-feature-message">
          {__("Available in Pro version", "zenblocks")}
        </p>
        <a href={learnMoreUrl} className="zenblocks-pro-feature-link" target="_blank" rel="noopener noreferrer">
          {__("Learn More", "zenblocks")}
          <svg className="zenblocks-pro-feature-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>
  );
};

/**
 * ProPanelShell - renders a collapsible panel with PRO overlay inside.
 *
 * Props:
 *   title       - Panel title (translatable)
 *   opened      - Whether panel is open
 *   onToggle    - Toggle callback
 *   className   - Additional panel class name
 *   featureName - Feature name shown in overlay
 *   learnMorePath - Docs path for Learn More link
 *   useSync     - If true, uses PanelBodyWithSync instead of PanelBody
 *   onSync      - Sync callback (only with useSync)
 *   level       - Panel nesting level (only with useSync)
 *   panelType   - Panel type (only with useSync)
 *   hasSubpanel - Has subpanel flag (only with useSync)
 *   panelName   - Panel name (only with useSync)
 */
const ProPanelShell = ({
  title,
  opened,
  onToggle,
  className = "",
  featureName = "",
  learnMorePath = "",
  useSync = false,
  onSync,
  level,
  panelType,
  hasSubpanel,
  panelName,
}) => {
  const content = (
    <ProOverlayContent featureName={featureName} learnMorePath={learnMorePath} />
  );

  if (useSync) {
    return (
      <PanelBodyWithSync
        title={title}
        opened={opened}
        onToggle={onToggle}
        onSync={onSync}
        className={className}
        level={level}
        panelType={panelType}
        hasSubpanel={hasSubpanel}
        panelName={panelName}
      >
        {content}
      </PanelBodyWithSync>
    );
  }

  return (
    <PanelBody
      title={title}
      opened={opened}
      onToggle={onToggle}
      className={className}
    >
      {content}
    </PanelBody>
  );
};

/**
 * ProOverlayOnly - renders just the PRO overlay content without a wrapping panel.
 * Used inside existing PanelBody/PanelBodyWithSync wrappers.
 */
export const ProOverlayOnly = ({ featureName = "", learnMorePath = "" }) => {
  return <ProOverlayContent featureName={featureName} learnMorePath={learnMorePath} />;
};

export default ProPanelShell;
