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

export interface CTAButton {
  text: string;
  href: string;
  variant?: 'primary' | 'secondary';
}

export interface CTASectionProps extends DesignControlsProps {
  heading: string;
  supportingText?: string;
  buttons: CTAButton[];
  variant: 'light' | 'dark' | 'gradient';
}

const CTASectionRender: React.FC<CTASectionProps> = (props) => {
  const { heading, supportingText, buttons, variant, ...designControls } = props;

  const applied = applyDesignControls(designControls);
  const isDark = variant === 'dark' || variant === 'gradient';

  const sectionClasses = {
    light: 'bg-neutral-50',
    dark: 'bg-neutral-900',
    gradient: '', // Applied via applied.style
  };

  return (
    <section
      id={designControls.anchorId || undefined}
      className={`${applied.className} ${sectionClasses[variant]}`}
      style={applied.style}
    >
      <div
        className={`${applied.containerClassName || 'max-w-4xl'} mx-auto px-4 sm:px-6 lg:px-8 text-center`}
      >
        <h2
          className={`text-3xl sm:text-4xl font-bold ${
            isDark ? 'text-white' : 'text-neutral-900'
          }`}
        >
          {heading}
        </h2>
        {supportingText && (
          <p
            className={`mt-4 text-lg max-w-2xl mx-auto ${
              isDark ? 'text-neutral-300' : 'text-neutral-600'
            }`}
          >
            {supportingText}
          </p>
        )}
        {buttons && buttons.length > 0 && (
          <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
            {buttons.map((button, index) => {
              const isPrimary = button.variant === 'primary' || (!button.variant && index === 0);
              return (
                <a
                  key={index}
                  href={button.href}
                  className={`w-full sm:w-auto px-8 py-3 rounded-lg font-semibold text-center transition-colors ${
                    isPrimary
                      ? isDark
                        ? 'bg-white text-neutral-900 hover:bg-neutral-100'
                        : 'bg-primary-600 text-white hover:bg-primary-700'
                      : isDark
                        ? 'bg-transparent text-white border border-white/30 hover:bg-white/10'
                        : 'bg-transparent text-neutral-700 border border-neutral-300 hover:bg-neutral-100'
                  }`}
                >
                  {button.text}
                </a>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
};

const designControlFields = createDesignControlsFields();

export const CTASection: ComponentConfig<CTASectionProps> = {
  label: 'CTA Section',
  fields: {
    heading: {
      type: 'text',
      label: 'Heading',
    },
    supportingText: {
      type: 'textarea',
      label: 'Supporting Text',
    },
    buttons: {
      type: 'array',
      label: 'Buttons',
      arrayFields: {
        text: { type: 'text', label: 'Text' },
        href: { type: 'text', label: 'URL' },
        variant: {
          type: 'select',
          label: 'Variant',
          options: [
            { label: 'Primary', value: 'primary' },
            { label: 'Secondary', value: 'secondary' },
          ],
        },
      },
      defaultItemProps: {
        text: 'Get Started',
        href: '#',
        variant: 'primary',
      },
    },
    variant: {
      type: 'select',
      label: 'Variant',
      options: [
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
        { label: 'Gradient', value: 'gradient' },
      ],
    },
    // Design Controls
    padding: designControlFields.padding,
    backgroundVariant: designControlFields.backgroundVariant,
    gradientPreset: designControlFields.gradientPreset,
    contentMaxWidth: designControlFields.contentMaxWidth,
    alignment: designControlFields.alignment,
    hideOnMobile: designControlFields.hideOnMobile,
    hideOnTablet: designControlFields.hideOnTablet,
    hideOnDesktop: designControlFields.hideOnDesktop,
    anchorId: designControlFields.anchorId,
  },
  defaultProps: {
    heading: 'Ready to take the next step?',
    supportingText: 'Add a supporting message here.',
    buttons: [
      { text: 'Get Started', href: '#', variant: 'primary' },
    ],
    variant: 'gradient',
    padding: 'lg',
    contentMaxWidth: 'normal',
    backgroundVariant: 'gradient',
    gradientPreset: 'dark-purple',
  },
  render: CTASectionRender,
};

export default CTASection;
