import React from 'react';
import { useNode } from '@craftjs/core';

interface HeroSectionProps {
  backgroundImage?: string;
  title?: string;
  subtitle?: string;
  showEventLogo?: boolean;
  showEventDate?: boolean;
  className?: string;
}

export const HeroSection: React.FC<HeroSectionProps> = ({
  backgroundImage,
  title,
  subtitle,
  showEventLogo = true,
  showEventDate = true,
  className = ''
}) => {
  const { connectors: { connect, drag }, custom } = useNode();
  const { event, formattedDate, formattedTime } = custom || {};

  return (
    <div
      ref={(ref) => connect(drag(ref))}
      className={`relative overflow-hidden ${className}`}
    >
      {/* Background Image */}
      {(backgroundImage || event?.image_url) && (
        <div className="absolute inset-0">
          <img
            src={backgroundImage || event?.image_url}
            alt={title || event?.title}
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-black bg-opacity-40"></div>
        </div>
      )}
      
      {/* Content */}
      <div className="relative z-10 px-4 sm:px-6 py-8 sm:py-12 lg:py-16">
        <div className="max-w-4xl mx-auto text-center text-white">
          {/* Event Logo */}
          {showEventLogo && event?.organizations?.logo && (
            <div className="mb-6">
              <img
                src={event.organizations.logo}
                alt={event.organizations.name}
                className="h-16 w-16 sm:h-20 sm:w-20 rounded-xl mx-auto shadow-lg border-2 border-white/20"
              />
            </div>
          )}
          
          {/* Title */}
          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-light mb-4 tracking-wide">
            {title || event?.title || 'Event Title'}
          </h1>
          
          {/* Subtitle */}
          {(subtitle || event?.organizations?.name) && (
            <p className="text-xl sm:text-2xl text-white/90 mb-6">
              {subtitle || `Presented by ${event?.organizations?.name}`}
            </p>
          )}
          
          {/* Event Date */}
          {showEventDate && formattedDate && (
            <div className="inline-block bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
              <p className="text-sm text-white/80 uppercase tracking-wide font-medium mb-1">Event Date</p>
              <p className="text-lg sm:text-xl font-semibold text-white">{formattedDate}</p>
              {formattedTime && (
                <p className="text-white/90 text-sm">{formattedTime}</p>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

HeroSection.craft = {
  displayName: 'Hero Section',
  props: {
    backgroundImage: '',
    title: '',
    subtitle: '',
    showEventLogo: true,
    showEventDate: true,
    className: 'min-h-96'
  },
  related: {
    toolbar: () => (
      <div className="p-4 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Background Image URL
          </label>
          <input
            type="url"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            placeholder="https://..."
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Custom Title
          </label>
          <input
            type="text"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            placeholder="Leave empty to use event title"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Custom Subtitle
          </label>
          <input
            type="text"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            placeholder="Leave empty to use organization name"
          />
        </div>
        <div className="flex items-center space-x-4">
          <label className="flex items-center">
            <input type="checkbox" className="mr-2" />
            Show Event Logo
          </label>
          <label className="flex items-center">
            <input type="checkbox" className="mr-2" />
            Show Event Date
          </label>
        </div>
      </div>
    )
  }
};