import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import { DropZone } from '@measured/puck';
import type { SectionProps } from '../../types';

const PADDING_CLASSES = {
  none: 'py-0',
  small: 'py-8',
  medium: 'py-16',
  large: 'py-24',
  xlarge: 'py-32',
};

const CONTAINER_CLASSES = {
  narrow: 'max-w-3xl',
  default: 'max-w-6xl',
  wide: 'max-w-7xl',
  full: 'max-w-full px-0',
};

export const Section: ComponentConfig<SectionProps> = {
  label: 'Section',
  fields: {
    background: {
      type: 'object',
      objectFields: {
        type: {
          type: 'select',
          options: [
            { label: 'None', value: 'none' },
            { label: 'Color', value: 'color' },
            { label: 'Image', value: 'image' },
            { label: 'Gradient', value: 'gradient' },
          ],
        },
        value: { type: 'text', label: 'Color / Gradient' },
        imageUrl: { type: 'text', label: 'Image URL' },
      },
    },
    overlay: {
      type: 'object',
      objectFields: {
        color: { type: 'text', label: 'Overlay Color' },
        opacity: { type: 'number', label: 'Overlay Opacity (0-1)' },
      },
    },
    padding: {
      type: 'select',
      options: [
        { label: 'None', value: 'none' },
        { label: 'Small', value: 'small' },
        { label: 'Medium', value: 'medium' },
        { label: 'Large', value: 'large' },
        { label: 'Extra Large', value: 'xlarge' },
      ],
    },
    containerWidth: {
      type: 'select',
      options: [
        { label: 'Narrow', value: 'narrow' },
        { label: 'Default', value: 'default' },
        { label: 'Wide', value: 'wide' },
        { label: 'Full Width', value: 'full' },
      ],
    },
    anchorId: { type: 'text', label: 'Anchor ID (for navigation)' },
    hideOnMobile: {
      type: 'radio',
      label: 'Hide on Mobile',
      options: [
        { label: 'No', value: false },
        { label: 'Yes', value: true },
      ],
    },
    hideOnTablet: {
      type: 'radio',
      label: 'Hide on Tablet',
      options: [
        { label: 'No', value: false },
        { label: 'Yes', value: true },
      ],
    },
    hideOnDesktop: {
      type: 'radio',
      label: 'Hide on Desktop',
      options: [
        { label: 'No', value: false },
        { label: 'Yes', value: true },
      ],
    },
  },
  defaultProps: {
    background: { type: 'none' },
    padding: 'large',
    containerWidth: 'default',
    hideOnMobile: false,
    hideOnTablet: false,
    hideOnDesktop: false,
  },
  render: ({
    background,
    overlay,
    padding,
    containerWidth,
    anchorId,
    hideOnMobile,
    hideOnTablet,
    hideOnDesktop,
  }) => {
    const paddingClass = PADDING_CLASSES[padding] || PADDING_CLASSES.large;
    const containerClass = CONTAINER_CLASSES[containerWidth] || CONTAINER_CLASSES.default;

    // Build background style
    let backgroundStyle: React.CSSProperties = {};
    if (background.type === 'color' && background.value) {
      backgroundStyle.backgroundColor = background.value;
    } else if (background.type === 'image' && background.imageUrl) {
      backgroundStyle.backgroundImage = `url(${background.imageUrl})`;
      backgroundStyle.backgroundSize = 'cover';
      backgroundStyle.backgroundPosition = 'center';
    } else if (background.type === 'gradient' && background.value) {
      backgroundStyle.background = background.value;
    }

    // Build visibility classes
    const visibilityClasses = [
      hideOnMobile ? 'hidden sm:block' : '',
      hideOnTablet ? 'sm:hidden md:block' : '',
      hideOnDesktop ? 'md:hidden' : '',
    ].filter(Boolean).join(' ');

    return (
      <section
        id={anchorId || undefined}
        className={`relative ${paddingClass} ${visibilityClasses}`}
        style={backgroundStyle}
      >
        {/* Overlay */}
        {overlay && overlay.color && (
          <div
            className="absolute inset-0 pointer-events-none"
            style={{
              backgroundColor: overlay.color,
              opacity: overlay.opacity || 0.5,
            }}
          />
        )}

        {/* Content container */}
        <div className={`relative ${containerClass} mx-auto px-4 sm:px-6 lg:px-8`}>
          <DropZone zone="content" />
        </div>
      </section>
    );
  },
};

export default Section;
