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

interface CallToActionProps {
  heading?: string;
  description?: string;
  buttonText?: string;
  buttonHref?: string;
  secondaryButtonText?: string;
  secondaryButtonHref?: string;
  bgType?: 'color' | 'gradient' | 'image';
  bgValue?: string;
  overlayColor?: string;
  overlayOpacity?: number;
  textColor?: string;
  buttonColor?: string;
  style?: CSSProperties;
}

const defaultGradient = 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)';

export const CallToAction: UserComponent<CallToActionProps> = ({
  heading = 'Ready to Get Started?',
  description = 'Join thousands of satisfied users and start building your dream website today.',
  buttonText = 'Get Started',
  buttonHref = '#',
  secondaryButtonText = '',
  secondaryButtonHref = '#',
  bgType = 'gradient',
  bgValue = defaultGradient,
  overlayColor = '#000000',
  overlayOpacity = 0,
  textColor = '#ffffff',
  buttonColor = '#ffffff',
  style = {},
}) => {
  const {
    connectors: { connect, drag },
    selected,
  } = useNode((node) => ({
    selected: node.events.selected,
  }));

  const bgStyle: CSSProperties = {};
  if (bgType === 'color') {
    bgStyle.backgroundColor = bgValue;
  } else if (bgType === 'gradient') {
    bgStyle.background = bgValue;
  } else if (bgType === 'image') {
    bgStyle.backgroundImage = `url(${bgValue})`;
    bgStyle.backgroundSize = 'cover';
    bgStyle.backgroundPosition = 'center';
  }

  const isButtonDark = buttonColor === '#ffffff' || buttonColor === '#f8fafc';
  const buttonTextColor = isButtonDark ? '#18181b' : '#ffffff';

  return (
    <section
      ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
      style={{
        position: 'relative',
        padding: '80px 20px',
        textAlign: 'center',
        outline: selected ? '2px solid #3b82f6' : 'none',
        ...bgStyle,
        ...style,
      }}
    >
      {/* Overlay */}
      {bgType === 'image' && overlayOpacity > 0 && (
        <div
          style={{
            position: 'absolute',
            inset: 0,
            backgroundColor: overlayColor,
            opacity: overlayOpacity / 100,
            pointerEvents: 'none',
          }}
        />
      )}

      <div style={{ maxWidth: '700px', margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <h2 style={{ fontSize: '36px', fontWeight: '700', color: textColor, marginBottom: '12px' }}>
          {heading}
        </h2>
        <p style={{ fontSize: '18px', color: textColor, opacity: 0.85, marginBottom: '28px', lineHeight: '1.6' }}>
          {description}
        </p>
        <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
          <a
            href={buttonHref}
            onClick={(e) => e.preventDefault()}
            style={{
              display: 'inline-block',
              padding: '14px 36px',
              backgroundColor: buttonColor,
              color: buttonTextColor,
              textDecoration: 'none',
              borderRadius: '8px',
              fontWeight: '600',
              fontSize: '16px',
            }}
          >
            {buttonText}
          </a>
          {secondaryButtonText && (
            <a
              href={secondaryButtonHref}
              onClick={(e) => e.preventDefault()}
              style={{
                display: 'inline-block',
                padding: '14px 36px',
                backgroundColor: 'transparent',
                color: textColor,
                textDecoration: 'none',
                borderRadius: '8px',
                fontWeight: '600',
                fontSize: '16px',
                border: `2px solid ${textColor}`,
              }}
            >
              {secondaryButtonText}
            </a>
          )}
        </div>
      </div>
    </section>
  );
};

/* ---------- Settings panel ---------- */

const CallToActionSettings: React.FC = () => {
  const { actions: { setProp }, props } = useNode((node) => ({
    props: node.data.props as CallToActionProps,
  }));

  const gradientPresets = [
    { label: 'Blue-Purple', value: 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)' },
    { label: 'Purple', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
    { label: 'Teal', value: 'linear-gradient(135deg, #0d9488 0%, #0f766e 100%)' },
    { label: 'Sunset', value: 'linear-gradient(135deg, #f97316 0%, #ec4899 100%)' },
    { label: 'Dark', value: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)' },
    { label: 'Ocean', value: 'linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)' },
  ];

  const colorPresets = ['#2563eb', '#7c3aed', '#0d9488', '#18181b', '#0f172a', '#1e293b', '#dc2626', '#f97316'];
  const buttonColorPresets = ['#ffffff', '#18181b', '#3b82f6', '#10b981', '#ef4444', '#8b5cf6', '#f59e0b', '#ec4899'];
  const textColorPresets = ['#ffffff', '#f8fafc', '#e2e8f0', '#18181b', '#1e293b', '#fef3c7'];

  const inputStyle: CSSProperties = {
    width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7',
    border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12,
  };

  return (
    <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Heading</label>
        <input
          type="text"
          value={props.heading || ''}
          onChange={(e) => setProp((p: CallToActionProps) => { p.heading = e.target.value; })}
          style={inputStyle}
        />
      </div>

      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Description</label>
        <textarea
          value={props.description || ''}
          onChange={(e) => setProp((p: CallToActionProps) => { p.description = e.target.value; })}
          rows={2}
          style={{ ...inputStyle, resize: 'vertical' }}
        />
      </div>

      {/* Primary Button */}
      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Primary Button Text</label>
        <input
          type="text"
          value={props.buttonText || ''}
          onChange={(e) => setProp((p: CallToActionProps) => { p.buttonText = e.target.value; })}
          style={inputStyle}
        />
      </div>

      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Primary Button URL</label>
        <input
          type="text"
          value={props.buttonHref || ''}
          onChange={(e) => setProp((p: CallToActionProps) => { p.buttonHref = e.target.value; })}
          placeholder="https://..."
          style={inputStyle}
        />
      </div>

      {/* Secondary Button */}
      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Secondary Button Text <span style={{ opacity: 0.5 }}>(leave empty to hide)</span></label>
        <input
          type="text"
          value={props.secondaryButtonText || ''}
          onChange={(e) => setProp((p: CallToActionProps) => { p.secondaryButtonText = e.target.value; })}
          placeholder="e.g. Learn More"
          style={inputStyle}
        />
      </div>

      {props.secondaryButtonText && (
        <div>
          <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Secondary Button URL</label>
          <input
            type="text"
            value={props.secondaryButtonHref || ''}
            onChange={(e) => setProp((p: CallToActionProps) => { p.secondaryButtonHref = e.target.value; })}
            placeholder="https://..."
            style={inputStyle}
          />
        </div>
      )}

      {/* Background Type */}
      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Background Type</label>
        <div style={{ display: 'flex', gap: 4 }}>
          {(['color', 'gradient', 'image'] as const).map((t) => (
            <button
              key={t}
              onClick={() => {
                setProp((p: CallToActionProps) => {
                  p.bgType = t;
                  if (t === 'color') p.bgValue = '#2563eb';
                  if (t === 'gradient') p.bgValue = defaultGradient;
                  if (t === 'image') p.bgValue = '';
                });
              }}
              style={{
                padding: '4px 10px', fontSize: 11, borderRadius: 4, cursor: 'pointer',
                border: '1px solid #3f3f46',
                background: props.bgType === t ? '#3b82f6' : '#27272a',
                color: '#e4e4e7',
                textTransform: 'capitalize',
              }}
            >
              {t}
            </button>
          ))}
        </div>
      </div>

      {/* Background sub-controls */}
      {props.bgType === 'color' && (
        <div>
          <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Background Color</label>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {colorPresets.map((c) => (
              <button
                key={c}
                onClick={() => setProp((p: CallToActionProps) => { p.bgValue = c; })}
                style={{
                  width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
                  backgroundColor: c, cursor: 'pointer',
                  outline: props.bgValue === c ? '2px solid #3b82f6' : 'none',
                  outlineOffset: 1,
                }}
              />
            ))}
          </div>
        </div>
      )}

      {props.bgType === 'gradient' && (
        <div>
          <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Gradient</label>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {gradientPresets.map((g) => (
              <button
                key={g.label}
                onClick={() => setProp((p: CallToActionProps) => { p.bgValue = g.value; })}
                title={g.label}
                style={{
                  width: 32, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
                  background: g.value, cursor: 'pointer',
                  outline: props.bgValue === g.value ? '2px solid #3b82f6' : 'none',
                  outlineOffset: 1,
                }}
              />
            ))}
          </div>
        </div>
      )}

      {props.bgType === 'image' && (
        <>
          <div>
            <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Image URL</label>
            <input
              type="text"
              value={props.bgValue || ''}
              onChange={(e) => setProp((p: CallToActionProps) => { p.bgValue = e.target.value; })}
              placeholder="https://..."
              style={inputStyle}
            />
          </div>
          <div>
            <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>
              Overlay Opacity: {props.overlayOpacity ?? 0}%
            </label>
            <input
              type="range"
              min={0}
              max={100}
              value={props.overlayOpacity ?? 0}
              onChange={(e) => setProp((p: CallToActionProps) => { p.overlayOpacity = parseInt(e.target.value); })}
              style={{ width: '100%', accentColor: '#3b82f6' }}
            />
          </div>
          <div>
            <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Overlay Color</label>
            <input
              type="color"
              value={props.overlayColor || '#000000'}
              onChange={(e) => setProp((p: CallToActionProps) => { p.overlayColor = e.target.value; })}
              style={{ width: 32, height: 24, border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer', background: 'none', padding: 0 }}
            />
          </div>
        </>
      )}

      {/* Text Color */}
      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Text Color</label>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {textColorPresets.map((c) => (
            <button
              key={c}
              onClick={() => setProp((p: CallToActionProps) => { p.textColor = c; })}
              style={{
                width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
                backgroundColor: c, cursor: 'pointer',
                outline: props.textColor === c ? '2px solid #3b82f6' : 'none',
                outlineOffset: 1,
              }}
            />
          ))}
        </div>
      </div>

      {/* Button Color */}
      <div>
        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Button Color</label>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {buttonColorPresets.map((c) => (
            <button
              key={c}
              onClick={() => setProp((p: CallToActionProps) => { p.buttonColor = c; })}
              style={{
                width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
                backgroundColor: c, cursor: 'pointer',
                outline: props.buttonColor === c ? '2px solid #3b82f6' : 'none',
                outlineOffset: 1,
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

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

CallToAction.craft = {
  displayName: 'Call to Action',
  props: {
    heading: 'Ready to Get Started?',
    description: 'Join thousands of satisfied users and start building your dream website today.',
    buttonText: 'Get Started',
    buttonHref: '#',
    secondaryButtonText: 'Learn More',
    secondaryButtonHref: '#',
    bgType: 'gradient',
    bgValue: defaultGradient,
    overlayColor: '#000000',
    overlayOpacity: 0,
    textColor: '#ffffff',
    buttonColor: '#ffffff',
    style: {},
  },
  rules: {
    canDrag: () => true,
    canMoveIn: () => false,
    canMoveOut: () => true,
  },
  related: {
    settings: CallToActionSettings,
  },
};

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

(CallToAction as any).toHtml = (props: CallToActionProps, _childrenHtml: string) => {
  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;');

  const bgType = props.bgType || 'gradient';
  const bgValue = props.bgValue || defaultGradient;
  const textColor = props.textColor || '#ffffff';
  const buttonColor = props.buttonColor || '#ffffff';
  const isButtonDark = buttonColor === '#ffffff' || buttonColor === '#f8fafc';
  const buttonTextColor = isButtonDark ? '#18181b' : '#ffffff';

  const sectionCss: CSSProperties = {
    position: 'relative',
    padding: '80px 20px',
    textAlign: 'center',
    ...props.style,
  };

  if (bgType === 'color') {
    sectionCss.backgroundColor = bgValue;
  } else if (bgType === 'gradient') {
    sectionCss.background = bgValue;
  } else if (bgType === 'image') {
    sectionCss.backgroundImage = `url(${bgValue})`;
    sectionCss.backgroundSize = 'cover';
    sectionCss.backgroundPosition = 'center';
  }

  const sectionStyle = cssPropsToString(sectionCss);

  let overlayHtml = '';
  if (bgType === 'image' && (props.overlayOpacity || 0) > 0) {
    const overlayStyle = cssPropsToString({
      position: 'absolute',
      inset: '0',
      backgroundColor: props.overlayColor || '#000000',
      opacity: String((props.overlayOpacity || 0) / 100) as any,
      pointerEvents: 'none',
    });
    overlayHtml = `<div${overlayStyle ? ` style="${overlayStyle}"` : ''}></div>`;
  }

  let secondaryBtnHtml = '';
  if (props.secondaryButtonText) {
    const secStyle = cssPropsToString({
      display: 'inline-block',
      padding: '14px 36px',
      backgroundColor: 'transparent',
      color: textColor,
      textDecoration: 'none',
      borderRadius: '8px',
      fontWeight: '600',
      fontSize: '16px',
      border: `2px solid ${textColor}`,
    });
    secondaryBtnHtml = `\n      <a href="${props.secondaryButtonHref || '#'}"${secStyle ? ` style="${secStyle}"` : ''}>${esc(props.secondaryButtonText)}</a>`;
  }

  const btnStyle = cssPropsToString({
    display: 'inline-block',
    padding: '14px 36px',
    backgroundColor: buttonColor,
    color: buttonTextColor,
    textDecoration: 'none',
    borderRadius: '8px',
    fontWeight: '600',
    fontSize: '16px',
  });

  return {
    html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
  ${overlayHtml}<div style="max-width:700px;margin:0 auto;position:relative;z-index:1">
    <h2 style="font-size:36px;font-weight:700;color:${textColor};margin-bottom:12px">${esc(props.heading || '')}</h2>
    <p style="font-size:18px;color:${textColor};opacity:0.85;margin-bottom:28px;line-height:1.6">${esc(props.description || '')}</p>
    <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
      <a href="${props.buttonHref || '#'}"${btnStyle ? ` style="${btnStyle}"` : ''}>${esc(props.buttonText || '')}</a>${secondaryBtnHtml}
    </div>
  </div>
</section>`,
  };
};