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

export interface Bullet {
  text: string;
  icon?: 'check' | 'chart' | 'file' | 'bell';
}

export interface FeatureCta {
  text: string;
  href: string;
}

export interface Media {
  src: string;
  alt: string;
}

export interface SplitContentProps extends DesignControlsProps {
  eyebrow?: string;
  heading: string;
  content: string;
  bullets?: Bullet[];
  cta?: FeatureCta;
  media: Media;
  mediaPosition: 'left' | 'right';
  variant: 'light' | 'dark';
}

const iconMap = {
  check: Check,
  chart: BarChart2,
  file: FileText,
  bell: Bell,
};

const SplitContentRender: React.FC<SplitContentProps> = (props) => {
  const {
    eyebrow,
    heading,
    content,
    bullets,
    cta,
    media,
    mediaPosition,
    variant,
    ...designControls
  } = props;

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

  const textContent = (
    <div className="max-w-lg">
      {eyebrow && (
        <p
          className={`text-sm font-semibold uppercase tracking-wider mb-4 ${
            isDark ? 'text-primary-400' : 'text-primary-600'
          }`}
        >
          {eyebrow}
        </p>
      )}
      <h2
        className={`text-3xl sm:text-4xl font-bold ${
          isDark ? 'text-white' : 'text-neutral-900'
        }`}
      >
        {heading}
      </h2>
      <p
        className={`mt-4 text-lg ${
          isDark ? 'text-neutral-300' : 'text-neutral-600'
        }`}
      >
        {content}
      </p>
      {bullets && bullets.length > 0 && (
        <ul className="mt-8 space-y-4">
          {bullets.map((bullet, index) => {
            const IconComponent = bullet.icon ? iconMap[bullet.icon] : Check;
            return (
              <li key={index} className="flex items-start gap-3">
                <div
                  className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center ${
                    isDark ? 'bg-primary-900 text-primary-400' : 'bg-primary-100 text-primary-600'
                  }`}
                >
                  <IconComponent className="w-4 h-4" />
                </div>
                <span
                  className={isDark ? 'text-neutral-300' : 'text-neutral-700'}
                >
                  {bullet.text}
                </span>
              </li>
            );
          })}
        </ul>
      )}
      {cta && (
        <div className="mt-8">
          <a
            href={cta.href}
            className={`inline-flex items-center font-semibold ${
              isDark ? 'text-primary-400 hover:text-primary-300' : 'text-primary-600 hover:text-primary-700'
            }`}
          >
            {cta.text}
            <svg
              className="ml-2 w-4 h-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 5l7 7-7 7"
              />
            </svg>
          </a>
        </div>
      )}
    </div>
  );

  const mediaContent = media?.src ? (
    <div className="relative">
      <img
        src={media.src}
        alt={media.alt || ''}
        className="rounded-xl shadow-xl"
      />
    </div>
  ) : null;

  return (
    <section
      id={designControls.anchorId || undefined}
      className={`${applied.className} ${isDark ? 'bg-neutral-900' : ''}`}
      style={applied.style}
    >
      <div
        className={`${applied.containerClassName || 'max-w-7xl'} mx-auto px-4 sm:px-6 lg:px-8`}
      >
        <div
          className={`grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center ${
            mediaPosition === 'left' ? 'lg:flex-row-reverse' : ''
          }`}
        >
          {mediaPosition === 'left' ? (
            <>
              {mediaContent}
              {textContent}
            </>
          ) : (
            <>
              {textContent}
              {mediaContent}
            </>
          )}
        </div>
      </div>
    </section>
  );
};

const designControlFields = createDesignControlsFields();

export const SplitContent: ComponentConfig<SplitContentProps> = {
  label: 'Split Content',
  fields: {
    eyebrow: {
      type: 'text',
      label: 'Eyebrow Label',
    },
    heading: {
      type: 'text',
      label: 'Heading',
    },
    content: {
      type: 'textarea',
      label: 'Content',
    },
    bullets: {
      type: 'array',
      label: 'Bullet Points',
      arrayFields: {
        text: { type: 'text', label: 'Text' },
        icon: {
          type: 'select',
          label: 'Icon',
          options: [
            { label: 'Check', value: 'check' },
            { label: 'Chart', value: 'chart' },
            { label: 'File', value: 'file' },
            { label: 'Bell', value: 'bell' },
          ],
        },
      },
      defaultItemProps: {
        text: 'Feature benefit',
        icon: 'check',
      },
    },
    cta: {
      type: 'object',
      label: 'CTA (optional)',
      objectFields: {
        text: { type: 'text', label: 'Text' },
        href: { type: 'text', label: 'URL' },
      },
    },
    media: {
      type: 'object',
      label: 'Media',
      objectFields: {
        src: { type: 'text', label: 'Image URL' },
        alt: { type: 'text', label: 'Alt Text' },
      },
    },
    mediaPosition: {
      type: 'select',
      label: 'Media Position',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Right', value: 'right' },
      ],
    },
    variant: {
      type: 'select',
      label: 'Variant',
      options: [
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
      ],
    },
    // 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: {
    eyebrow: '',
    heading: 'Your heading here',
    content: 'Add your content description here. Explain the value or benefits.',
    bullets: [
      { text: 'First key point', icon: 'check' },
      { text: 'Second key point', icon: 'check' },
      { text: 'Third key point', icon: 'check' },
    ],
    cta: {
      text: 'Learn more',
      href: '#',
    },
    media: {
      src: 'https://placehold.co/600x400/f4f4f5/3f3f46?text=Image',
      alt: 'Image description',
    },
    mediaPosition: 'right',
    variant: 'light',
    padding: 'xl',
    contentMaxWidth: 'wide',
  },
  render: SplitContentRender,
};

export default SplitContent;
