import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import {
  createDesignControlsFields,
  applyDesignControls,
  type DesignControlsProps,
} from '../../theme';

export interface Logo {
  src: string;
  alt: string;
  href?: string;
}

export interface LogoCloudProps extends DesignControlsProps {
  heading?: string;
  logos: Logo[];
  grayscale: boolean;
  spacingDensity: 'compact' | 'normal' | 'spacious';
}

const LogoCloudRender: React.FC<LogoCloudProps> = (props) => {
  const { heading, logos, grayscale, spacingDensity, ...designControls } = props;

  const applied = applyDesignControls(designControls);

  const gapClasses = {
    compact: 'gap-6',
    normal: 'gap-8 sm:gap-12',
    spacious: 'gap-12 sm:gap-16',
  };

  return (
    <section
      id={designControls.anchorId || undefined}
      className={`${applied.className}`}
      style={applied.style}
    >
      <div
        className={`${applied.containerClassName || 'max-w-7xl'} mx-auto px-4 sm:px-6 lg:px-8`}
      >
        {heading && (
          <p
            className={`text-center text-sm font-medium uppercase tracking-wider mb-8 ${applied.textClassName || 'text-neutral-500'}`}
          >
            {heading}
          </p>
        )}

        {logos && logos.length > 0 && (
          <div
            className={`flex flex-wrap items-center justify-center ${gapClasses[spacingDensity]}`}
          >
            {logos.map((logo, index) => {
            const imgElement = (
              <img
                src={logo.src}
                alt={logo.alt}
                className={`h-8 sm:h-10 w-auto object-contain ${
                  grayscale ? 'grayscale opacity-60 hover:grayscale-0 hover:opacity-100' : ''
                } transition-all duration-200`}
              />
            );

            if (logo.href) {
              return (
                <a
                  key={index}
                  href={logo.href}
                  className="flex-shrink-0"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {imgElement}
                </a>
              );
            }

            return (
              <div key={index} className="flex-shrink-0">
                {imgElement}
              </div>
            );
            })}
          </div>
        )}
      </div>
    </section>
  );
};

const designControlFields = createDesignControlsFields();

export const LogoCloud: ComponentConfig<LogoCloudProps> = {
  label: 'Logo Cloud',
  fields: {
    heading: {
      type: 'text',
      label: 'Heading (optional)',
    },
    logos: {
      type: 'array',
      label: 'Logos',
      arrayFields: {
        src: { type: 'text', label: 'Image URL' },
        alt: { type: 'text', label: 'Alt Text' },
        href: { type: 'text', label: 'Link URL (optional)' },
      },
      defaultItemProps: {
        src: 'https://placehold.co/160x48/e4e4e7/71717a?text=Logo',
        alt: 'Company logo',
      },
    },
    grayscale: {
      type: 'radio',
      label: 'Grayscale Logos',
      options: [
        { label: 'Yes', value: true },
        { label: 'No', value: false },
      ],
    },
    spacingDensity: {
      type: 'select',
      label: 'Spacing Density',
      options: [
        { label: 'Compact', value: 'compact' },
        { label: 'Normal', value: 'normal' },
        { label: 'Spacious', value: 'spacious' },
      ],
    },
    // Design Controls
    padding: designControlFields.padding,
    backgroundVariant: designControlFields.backgroundVariant,
    gradientPreset: designControlFields.gradientPreset,
    contentMaxWidth: designControlFields.contentMaxWidth,
    hideOnMobile: designControlFields.hideOnMobile,
    hideOnTablet: designControlFields.hideOnTablet,
    hideOnDesktop: designControlFields.hideOnDesktop,
    anchorId: designControlFields.anchorId,
  },
  defaultProps: {
    heading: '',
    logos: [
      { src: 'https://placehold.co/160x48/e4e4e7/71717a?text=Logo', alt: 'Logo 1' },
      { src: 'https://placehold.co/160x48/e4e4e7/71717a?text=Logo', alt: 'Logo 2' },
      { src: 'https://placehold.co/160x48/e4e4e7/71717a?text=Logo', alt: 'Logo 3' },
      { src: 'https://placehold.co/160x48/e4e4e7/71717a?text=Logo', alt: 'Logo 4' },
    ],
    grayscale: true,
    spacingDensity: 'normal',
    padding: 'lg',
    backgroundVariant: 'light',
    contentMaxWidth: 'wide',
  },
  render: LogoCloudRender,
};

export default LogoCloud;
