(function (wp) {
  const { registerBlockType } = wp.blocks;
  const { createElement: el, Fragment } = wp.element;
  const { InspectorControls, useBlockProps } = wp.blockEditor;
  const { PanelBody, SelectControl, TextControl } = wp.components;

  registerBlockType('mati/mati-widget', {
    edit: function (props) {
      const { attributes, setAttributes } = props;
      const blockProps = useBlockProps({
        className: 'mati-widget-block-preview',
        style: {
          padding: '1.5rem',
          background: '#f8fafc',
          borderRadius: '0.75rem',
          border: '1px dashed #cbd5e1',
          textAlign: 'center',
        },
      });

      return el(
        Fragment,
        null,
        el(
          InspectorControls,
          null,
          el(
            PanelBody,
            { title: 'Configuración del Widget', initialOpen: true },
            el(SelectControl, {
              label: 'Posición',
              value: attributes.position,
              options: [
                { label: 'En línea (dentro del contenido)', value: 'inline' },
                { label: 'Flotante abajo derecha', value: 'bottom-right' },
                { label: 'Flotante abajo izquierda', value: 'bottom-left' },
              ],
              onChange: function (v) {
                setAttributes({ position: v });
              },
            }),
            el(SelectControl, {
              label: 'Variante',
              value: attributes.variant,
              options: [
                { label: 'Por defecto', value: 'default' },
                { label: 'Clásico', value: 'classic' },
                { label: 'Moderno', value: 'modern' },
                { label: 'Minimal', value: 'minimal' },
              ],
              onChange: function (v) {
                setAttributes({ variant: v });
              },
            }),
            el(TextControl, {
              label: 'Color principal',
              type: 'color',
              value: attributes.color,
              onChange: function (v) {
                setAttributes({ color: v });
              },
            }),
            el(SelectControl, {
              label: 'Idioma',
              value: attributes.language,
              options: [
                { label: 'Español', value: 'es' },
                { label: 'English', value: 'en' },
                { label: 'Português', value: 'pt' },
                { label: 'Français', value: 'fr' },
                { label: 'Deutsch', value: 'de' },
                { label: 'Italiano', value: 'it' },
              ],
              onChange: function (v) {
                setAttributes({ language: v });
              },
            })
          )
        ),
        el(
          'div',
          blockProps,
          el('div', {
            style: {
              width: '56px',
              height: '56px',
              borderRadius: '50%',
              background: 'linear-gradient(135deg, #0722BC, #00BFA5)',
              margin: '0 auto 0.75rem',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            },
          }, el('span', { style: { color: 'white', fontSize: '1.5rem' } }, '🤖')),
          el('strong', null, 'Mati Widget'),
          el(
            'p',
            { style: { margin: '0.25rem 0 0', fontSize: '0.8rem', color: '#64748b' } },
            'Posición: ' + attributes.position + ' · Variante: ' + attributes.variant
          )
        )
      );
    },

    save: function (props) {
      const { attributes } = props;
      const blockProps = useBlockProps.save();

      if (attributes.position === 'inline') {
        return el(
          'div',
          blockProps,
          el('div', { id: 'mati-inline', className: 'mati-w-full mati-mw-420 mati-mx-auto' })
        );
      }
      return el('div', blockProps);
    },
  });
})(window.wp);
