const { addFilter } = wp.hooks;
const { createElement, Fragment } = wp.element;
const { PanelBody, Button } = wp.components;
const { InspectorControls } = wp.blockEditor;

const isLocked = parseInt(Theme?.lock_move || 0, 10);
const themeLink = Theme?.theme_uri || "https://wordpress.org/themes/";
const settingsThemeLink  = Theme?.settings_theme_uri || "https://wordpress.org/themes/";

addFilter(
    'editor.BlockEdit',
    'themes-machine/lock-blocks',
    (BlockEdit) => (props) => {
        
        if (!props.attributes.lock) props.attributes.lock = {};
        
        if (isLocked) {
            props.attributes.lock.move = true;
            props.attributes.lock.remove = true;
        } else {
            delete props.attributes.lock.move;
            delete props.attributes.lock.remove;
        }

        return createElement(BlockEdit, props);
    }
);

wp.data.subscribe(() => {
    if (!isLocked) return;

    const { getSelectedBlockClientId, getBlockAttributes } = wp.data.select('core/block-editor');
    const { updateBlockAttributes } = wp.data.dispatch('core/block-editor');

    const selected = getSelectedBlockClientId();
    if (!selected) return;

    const attrs = getBlockAttributes(selected);

    if (!attrs?.lock?.move || !attrs?.lock?.remove) {
        updateBlockAttributes(selected, { lock: { move: true, remove: true } });
    }
});

const unlockBlocks = () =>
  createElement(
    "div",
    {
      style: {
        display: "flex",
        flexDirection: "column",
        gap: "14px",
        background: "#f8f9fa",
        border: "1px solid #e0e0e0",
        borderRadius: "8px",
        padding: "16px",
        boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
      },
    },
    createElement(
      "div",
      {
        style: {
          display: "flex",
          alignItems: "flex-start",
          gap: "10px",
        },
      },
      createElement("span", {
        className: "dashicons dashicons-lock",
        style: {
          fontSize: "20px",
          color: "#d63638",
          flexShrink: 0,
          marginTop: "2px",
        },
      }),
      createElement(
        "p",
        {
          style: {
            lineHeight: "1.4",
            margin: 0,
            color: "#23282d",
            fontSize: "13px",
          },
        },
        "Unlock the full potential of this theme with the ",
        createElement("strong", null, "PRO version"),
        ". Access advanced templates, patterns, and effects to freely customize your website while maintaining perfect design."
      )
    ),

    createElement(
      Button,
      {
        variant: "primary",
        onClick: () => window.open(themeLink, "_blank"),
        style: {
          width: "100%",
          textAlign: "center",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: "36px",
          borderRadius: "6px",
        },
      },
      "✨ Get PRO"
    ),

    createElement(
      Button,
      {
        variant: "secondary",
        onClick: () => window.open(settingsThemeLink, "_blank"),
        style: {
          width: "100%",
          textAlign: "center",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: "36px",
          borderRadius: "6px",
        },
      },
      "⚙️ Configure block settings"
    )
  );


wp.hooks.addFilter(
  "editor.BlockEdit",
  "themes-machine/add-unlock-blocks-notice",
  (BlockEdit) => (props) => {
    return createElement(
      Fragment,
      {},
      createElement(BlockEdit, props),
      createElement(
        InspectorControls,
        {},
        createElement(
          PanelBody,
          { title: "PRO Theme", initialOpen: true },
          createElement(unlockBlocks, {})
        )
      )
    );
  }
);