import React, { CSSProperties } from 'react';
import { useNode, Element, UserComponent } from '@craftjs/core';
import { Container } from './Container';
import { cssPropsToString } from '../../utils/style-helpers';
import { escapeAttr } from '../../utils/escape';

interface BackgroundSectionProps {
  bgImage?: string;
  bgColor?: string;
  overlayColor?: string;
  overlayOpacity?: number;
  innerMaxWidth?: string;
  style?: CSSProperties;
  children?: React.ReactNode;
  anchorId?: string;
}

export const BackgroundSection: UserComponent<BackgroundSectionProps> = ({
  bgImage = '',
  bgColor = '#1e293b',
  overlayColor = '#000000',
  overlayOpacity = 0.4,
  innerMaxWidth = '1200px',
  style = {},
  anchorId,
}) => {
  const { connectors: { connect, drag } } = useNode();

  return (
    <section
      ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
      id={anchorId || undefined}
      style={{
        position: 'relative',
        width: '100%',
        minHeight: '200px',
        backgroundColor: bgColor,
        backgroundImage: bgImage ? `url(${bgImage})` : undefined,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        ...style,
      }}
    >
      {/* Overlay */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          backgroundColor: overlayColor,
          opacity: overlayOpacity,
          pointerEvents: 'none',
        }}
      />
      {/* Content */}
      <Element
        id="bg-section-inner"
        is={Container}
        canvas
        style={{
          position: 'relative',
          zIndex: 1,
          maxWidth: innerMaxWidth,
          margin: '0 auto',
          padding: '60px 20px',
        }}
        tag="div"
      />
    </section>
  );
};

/* ---------- Craft config ---------- */

BackgroundSection.craft = {
  displayName: 'Background Section',
  props: {
    bgImage: '',
    bgColor: '#1e293b',
    overlayColor: '#000000',
    overlayOpacity: 0.4,
    innerMaxWidth: '1200px',
    style: { padding: '0' },
    anchorId: '',
  },
  rules: {
    canDrag: () => true,
    canMoveIn: () => false,
    canMoveOut: () => true,
  },
};

/* ---------- HTML export ---------- */

(BackgroundSection as any).toHtml = (props: BackgroundSectionProps, childrenHtml: string) => {
  const outerStyle = cssPropsToString({
    position: 'relative',
    width: '100%',
    minHeight: '200px',
    backgroundColor: props.bgColor || '#1e293b',
    backgroundImage: props.bgImage ? `url(${props.bgImage})` : undefined,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    ...props.style,
  });
  const overlayStyle = cssPropsToString({
    position: 'absolute',
    inset: '0',
    backgroundColor: props.overlayColor || '#000000',
    opacity: String(props.overlayOpacity ?? 0.4),
    pointerEvents: 'none',
  });
  const innerStyle = cssPropsToString({
    position: 'relative',
    zIndex: '1',
    maxWidth: props.innerMaxWidth || '1200px',
    margin: '0 auto',
    padding: '60px 20px',
  });
  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
  return {
    html: `<section${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}><div${overlayStyle ? ` style="${overlayStyle}"` : ''}></div><div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div></section>`,
  };
};