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

export interface Feature {
  heading: string;
  text: string;
  bullets?: string[];
  image: string;
}

export interface ContentBlocksProps extends DesignControlsProps {
  sectionHeading?: string;
  features: Feature[];
}

const ContentBlocksRender: React.FC<ContentBlocksProps> = (props) => {
  const { sectionHeading, features, ...designControls } = props;

  const applied = applyDesignControls(designControls);

  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`}
      >
        {sectionHeading && (
          <h2
            className={`text-3xl sm:text-4xl font-bold text-center mb-16 ${applied.textClassName || 'text-neutral-900'}`}
          >
            {sectionHeading}
          </h2>
        )}

        {features && features.length > 0 && (
          <div className="space-y-24">
            {features.map((feature, index) => {
            const isEven = index % 2 === 0;

            return (
              <div
                key={index}
                className={`grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center`}
              >
                {/* Text content */}
                <div className={isEven ? 'lg:order-1' : 'lg:order-2'}>
                  <h3 className="text-2xl sm:text-3xl font-bold text-neutral-900">
                    {feature.heading}
                  </h3>
                  <p className="mt-4 text-lg text-neutral-600">
                    {feature.text}
                  </p>
                  {feature.bullets && feature.bullets.length > 0 && (
                    <ul className="mt-8 space-y-3">
                      {feature.bullets.map((bullet, bulletIndex) => (
                        <li key={bulletIndex} className="flex items-start gap-3">
                          <div className="flex-shrink-0 w-5 h-5 rounded-full bg-primary-100 flex items-center justify-center mt-0.5">
                            <Check className="w-3 h-3 text-primary-600" />
                          </div>
                          <span className="text-neutral-700">{bullet}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>

                {/* Image */}
                <div className={isEven ? 'lg:order-2' : 'lg:order-1'}>
                  <img
                    src={feature.image}
                    alt={feature.heading}
                    className="rounded-xl shadow-lg"
                  />
                </div>
              </div>
            );
            })}
          </div>
        )}
      </div>
    </section>
  );
};

const designControlFields = createDesignControlsFields();

export const ContentBlocks: ComponentConfig<ContentBlocksProps> = {
  label: 'Content Blocks',
  fields: {
    sectionHeading: {
      type: 'text',
      label: 'Section Heading (optional)',
    },
    features: {
      type: 'array',
      label: 'Features',
      arrayFields: {
        heading: { type: 'text', label: 'Heading' },
        text: { type: 'textarea', label: 'Description' },
        bullets: {
          type: 'array',
          label: 'Bullet Points',
          arrayFields: {
            // Using external field for string arrays
          },
        },
        image: { type: 'text', label: 'Image URL' },
      },
      defaultItemProps: {
        heading: 'Feature Heading',
        text: 'Description of this feature and its benefits.',
        bullets: ['Benefit one', 'Benefit two', 'Benefit three'],
        image: 'https://placehold.co/500x350/f4f4f5/3f3f46?text=Feature',
      },
    },
    // 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: {
    sectionHeading: '',
    features: [
      {
        heading: 'First content block',
        text: 'Add a description for this content block.',
        bullets: ['First point', 'Second point', 'Third point'],
        image: 'https://placehold.co/500x350/f4f4f5/3f3f46?text=Image',
      },
      {
        heading: 'Second content block',
        text: 'Add a description for this content block.',
        bullets: ['First point', 'Second point', 'Third point'],
        image: 'https://placehold.co/500x350/f4f4f5/3f3f46?text=Image',
      },
    ],
    padding: 'xl',
    contentMaxWidth: 'wide',
  },
  render: ContentBlocksRender,
};

export default ContentBlocks;
