/**
 * PlusPanelShell - Lightweight PLUS feature placeholder for WP.org version.
 *
 * Same pattern as ProPanelShell but with "PLUS" badge.
 * When zenblocks-plus is active, addFilter replaces this with the real panel.
 */

import { __ } from "@wordpress/i18n";
import { PanelBody } from "@wordpress/components";
import PanelBodyWithSync from "./PanelBodyWithSync";
import { getLocalizedUrl } from "../../../utils/localized-url";
import "./plus-feature-overlay.css";

const PlusOverlayContent = ({ featureName, learnMorePath }) => {
  const learnMoreUrl = getLocalizedUrl(learnMorePath);

  return (
    <div className="zenblocks-plus-feature-wrapper">
      <div className="zenblocks-plus-feature-content">
        <div style={{ minHeight: "60px" }} />
      </div>
      <div className="zenblocks-plus-feature-overlay">
        <div className="zenblocks-plus-feature-badge">
          <span className="zenblocks-plus-feature-badge-text">PLUS</span>
        </div>
        <p className="zenblocks-plus-feature-message">
          {__("Free Addon", "zenblocks")}
        </p>
        <a href={learnMoreUrl} className="zenblocks-plus-feature-link" target="_blank" rel="noopener noreferrer">
          ZenBlocks Plus
          <svg className="zenblocks-plus-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>
  );
};

const PlusPanelShell = ({
  title,
  opened,
  onToggle,
  className = "",
  featureName = "",
  learnMorePath = "",
  useSync = false,
  onSync,
  level,
  panelType,
  hasSubpanel,
  panelName,
}) => {
  const content = (
    <PlusOverlayContent 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>
  );
};

/**
 * PlusOverlayOnly - renders just the PLUS overlay content without a wrapping panel.
 */
export const PlusOverlayOnly = ({ featureName = "", learnMorePath = "" }) => {
  return <PlusOverlayContent featureName={featureName} learnMorePath={learnMorePath} />;
};

export default PlusPanelShell;
