const { registerBlockTypes } = wp.blocks;
const { RichText, MediaUpload, InspectorControls, ColorPalette, useBlockProps } = wp.blockEditor;
const { PanelBody, SelectControl, Button } = wp.components;
const { __ } = wp.i18n;
const { createElement: el } = wp.element;

const iconOptions = [
  { label: 'Graduation Cap', value: 'graduation-cap' },
  { label: 'Users', value: 'users' },
  { label: 'User', value: 'user' },
  { label: 'Handshake', value: 'handshake' },
  { label: 'Trophy', value: 'trophy' },
  { label: 'Flask', value: 'flask' },
  { label: 'Chart Bar', value: 'chart-bar' },
  { label: 'Building', value: 'building' },
  { label: 'Book', value: 'book' },
  { label: 'Globe', value: 'globe' },
  { label: 'Star', value: 'star' },
  { label: 'Heart', value: 'heart' },
  { label: 'Upload Custom', value: 'custom' }
];

const IconComponent = ({ icon, bgColor, customImage }) => {
  const iconPaths = {
    'chart-bar': 'M3 13h4v7H3v-7zM10 8h4v12h-4V8zM17 3h4v17h-4V3z',
    'users': 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m3 5.197v1M13 7a4 4 0 11-8 0 4 4 0 018 0z',
    'trophy': 'M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A6.02 6.02 0 003 12c0 1.605.629 3.065 1.686 4.143...',
    // Add more if needed
  };

  return el(
    'div',
    {
      className: 'stats-icon',
      style: {
        backgroundColor: bgColor || '#4ECDC4',
        width: '60px',
        height: '60px',
        borderRadius: '12px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: '16px'
      }
    },
    icon === 'custom' && customImage
      ? el('img', {
          src: customImage,
          alt: 'Custom icon',
          style: { width: '32px', height: '32px', objectFit: 'contain' }
        })
      : el('svg', {
          width: '24',
          height: '24',
          viewBox: '0 0 24 24',
          fill: 'none',
          stroke: 'white',
          strokeWidth: '2',
          strokeLinecap: 'round',
          strokeLinejoin: 'round'
        }, el('path', { d: iconPaths[icon] || iconPaths['chart-bar'] }))
  );
};

registerBlockTypes('custom/statistics-block', {
  title: __('Statistics Block'),
  icon: 'chart-bar',
  category: 'widgets',
  attributes: {
    stats: {
      type: 'array',
      default: [
        {
          number: '123',
          description: 'Students',
          icon: 'users',
          bgColor: '#4ECDC4',
          customImage: null
        }
      ]
    },
    backgroundColor: {
      type: 'string',
      default: '#f8f9fa'
    },
    textColor: {
      type: 'string',
      default: '#2c3e50'
    },
    numberColor: {
      type: 'string',
      default: '#4ECDC4'
    }
  },

  edit: (props) => {
    const { attributes, setAttributes } = props;
    const { stats, backgroundColor, textColor, numberColor } = attributes;
    const blockProps = useBlockProps();

    const updateStat = (index, field, value) => {
      const newStats = [...stats];
      newStats[index][field] = value;
      setAttributes({ stats: newStats });
    };

    const addStat = () => {
      setAttributes({
        stats: [...stats, {
          number: '0',
          description: 'New Stat',
          icon: 'chart-bar',
          bgColor: '#4ECDC4',
          customImage: null
        }]
      });
    };

    const removeStat = (index) => {
      setAttributes({
        stats: stats.filter((_, i) => i !== index)
      });
    };

    return el(
      'div',
      blockProps,
      el(
        InspectorControls,
        null,
        el(PanelBody, { title: 'Settings', initialOpen: true },
          el(ColorPalette, {
            value: backgroundColor,
            onChange: (value) => setAttributes({ backgroundColor: value })
          }),
          el(Button, { isPrimary: true, onClick: addStat }, 'Add Stat')
        )
      ),
      el('div', {
        className: 'statistics-block-wrapper',
        style: { backgroundColor, padding: '40px 20px', borderRadius: '8px' }
      },
        el('div', { className: 'statistics-grid' },
          ...stats.map((stat, index) =>
            el('div', { key: index, className: 'stat-item' },
              el(IconComponent, {
                icon: stat.icon,
                bgColor: stat.bgColor,
                customImage: stat.customImage
              }),
              el(RichText, {
                tagName: 'div',
                value: stat.number,
                onChange: (value) => updateStat(index, 'number', value),
                placeholder: 'Enter number...',
                style: { color: numberColor, fontSize: '2rem', fontWeight: 'bold' }
              }),
              el(RichText, {
                tagName: 'div',
                value: stat.description,
                onChange: (value) => updateStat(index, 'description', value),
                placeholder: 'Enter description...',
                style: { color: textColor }
              }),
              el(Button, {
                isDestructive: true,
                onClick: () => removeStat(index),
                style: { marginTop: '10px' }
              }, 'Remove')
            )
          )
        )
      )
    );
  },

  save: ({ attributes }) => {
    const { stats, backgroundColor, textColor, numberColor } = attributes;

    return el('div', {
      className: 'statistics-block-wrapper',
      style: { backgroundColor, padding: '40px 20px', borderRadius: '8px' }
    },
      el('div', { className: 'statistics-grid' },
        ...stats.map((stat, index) =>
          el('div', { key: index, className: 'stat-item' },
            el(IconComponent, {
              icon: stat.icon,
              bgColor: stat.bgColor,
              customImage: stat.customImage
            }),
            el(RichText.Content, {
              tagName: 'div',
              value: stat.number,
              style: {
                fontSize: '2rem',
                fontWeight: 'bold',
                color: numberColor,
                marginBottom: '0.5rem'
              }
            }),
            el(RichText.Content, {
              tagName: 'div',
              value: stat.description,
              style: {
                color: textColor
              }
            })
          )
        )
      )
    );
  }
});