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

export interface GalleryItem {
  image: string;
  title: string;
  text?: string;
  link?: string;
}

export interface GalleryGridProps extends DesignControlsProps {
  heading?: string;
  items: GalleryItem[];
  columnsMobile: 1 | 2;
  columnsTablet: 2 | 3;
  columnsDesktop: 2 | 3 | 4;
}

const GalleryGridRender: React.FC<GalleryGridProps> = (props) => {
  const {
    heading,
    items,
    columnsMobile,
    columnsTablet,
    columnsDesktop,
    ...designControls
  } = props;

  const applied = applyDesignControls(designControls);

  const gridCols = {
    mobile: { 1: 'grid-cols-1', 2: 'grid-cols-2' },
    tablet: { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3' },
    desktop: { 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4' },
  };

  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 && (
          <h2
            className={`text-3xl font-bold text-center mb-12 ${applied.textClassName || 'text-neutral-900'}`}
          >
            {heading}
          </h2>
        )}
        {items && items.length > 0 && (
          <div
            className={`grid ${gridCols.mobile[columnsMobile]} ${gridCols.tablet[columnsTablet]} ${gridCols.desktop[columnsDesktop]} gap-6 sm:gap-8`}
          >
            {items.map((item, index) => (
              <div
                key={index}
                className="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow"
              >
                <div className="aspect-[4/3] overflow-hidden">
                  <img
                    src={item.image}
                    alt={item.title}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <div className="p-6">
                  <h3 className="font-semibold text-neutral-900 group-hover:text-primary-600 transition-colors">
                    {item.link ? (
                      <a href={item.link}>{item.title}</a>
                    ) : (
                      item.title
                    )}
                  </h3>
                  {item.text && (
                    <p className="mt-2 text-sm text-neutral-600">{item.text}</p>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

const designControlFields = createDesignControlsFields();

export const GalleryGrid: ComponentConfig<GalleryGridProps> = {
  label: 'Gallery Grid',
  fields: {
    heading: {
      type: 'text',
      label: 'Heading (optional)',
    },
    items: {
      type: 'array',
      label: 'Items',
      arrayFields: {
        image: { type: 'text', label: 'Image URL' },
        title: { type: 'text', label: 'Title' },
        text: { type: 'textarea', label: 'Description' },
        link: { type: 'text', label: 'Link URL (optional)' },
      },
      defaultItemProps: {
        image: 'https://placehold.co/400x300/f4f4f5/3f3f46?text=Image',
        title: 'Item Title',
        text: 'Brief description of this item.',
      },
    },
    columnsMobile: {
      type: 'select',
      label: 'Columns (Mobile)',
      options: [
        { label: '1', value: 1 },
        { label: '2', value: 2 },
      ],
    },
    columnsTablet: {
      type: 'select',
      label: 'Columns (Tablet)',
      options: [
        { label: '2', value: 2 },
        { label: '3', value: 3 },
      ],
    },
    columnsDesktop: {
      type: 'select',
      label: 'Columns (Desktop)',
      options: [
        { label: '2', value: 2 },
        { label: '3', value: 3 },
        { label: '4', value: 4 },
      ],
    },
    // 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: '',
    items: [
      {
        image: 'https://placehold.co/400x300/f4f4f5/3f3f46?text=Image',
        title: 'Item title',
        text: 'Add a description here.',
      },
      {
        image: 'https://placehold.co/400x300/f4f4f5/3f3f46?text=Image',
        title: 'Item title',
        text: 'Add a description here.',
      },
      {
        image: 'https://placehold.co/400x300/f4f4f5/3f3f46?text=Image',
        title: 'Item title',
        text: 'Add a description here.',
      },
    ],
    columnsMobile: 1,
    columnsTablet: 2,
    columnsDesktop: 3,
    padding: 'xl',
    backgroundVariant: 'light',
    contentMaxWidth: 'wide',
  },
  render: GalleryGridRender,
};

export default GalleryGrid;
