import { Node, mergeAttributes } from '@tiptap/core';

export interface ButtonOptions {
  HTMLAttributes: Record<string, any>;
}

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    button: {
      setButton: (options: { text: string; href: string; style?: 'solid' | 'outline' }) => ReturnType;
    };
  }
}

export const ButtonExtension = Node.create<ButtonOptions>({
  name: 'button',

  group: 'inline',

  inline: true,

  atom: true,

  addAttributes() {
    return {
      text: {
        default: 'Click Here',
      },
      href: {
        default: '#',
      },
      style: {
        default: 'solid',
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: 'a[data-button]',
        getAttrs: (node: HTMLElement) => ({
          text: node.getAttribute('data-text') || node.textContent || 'Click Here',
          href: node.getAttribute('data-href') || node.getAttribute('href') || '#',
          style: node.getAttribute('data-style') || 'solid',
        }),
      },
      {
        tag: 'a.button',
        getAttrs: (node: HTMLElement) => ({
          text: node.textContent || 'Click Here',
          href: node.getAttribute('href') || '#',
          style: 'solid',
        }),
      },
      {
        tag: 'a.button-outline',
        getAttrs: (node: HTMLElement) => ({
          text: node.textContent || 'Click Here',
          href: node.getAttribute('href') || '#',
          style: 'outline',
        }),
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    const { text, href, style } = HTMLAttributes;

    // Simple link styling - no fancy button appearance in editor
    // The actual button styling happens in email rendering (EmailRenderer.php)
    // In editor, just show as a styled link (differentiable from regular links)
    return [
      'a',
      mergeAttributes(this.options.HTMLAttributes, {
        href,
        class: 'button-node',
        style: 'color: #7f54b3; text-decoration: underline; cursor: pointer; font-weight: 600; background: rgba(127,84,179,0.1); padding: 2px 6px; border-radius: 3px;',
        'data-button': '',
        'data-text': text,
        'data-href': href,
        'data-style': style,
        title: `Button: ${text} → ${href}`,
      }),
      text,
    ];
  },

  addCommands() {
    return {
      setButton:
        (options) =>
          ({ commands }) => {
            return commands.insertContent({
              type: this.name,
              attrs: options,
            });
          },
    };
  },
});
