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

interface TicketSectionProps {
  title?: string;
  subtitle?: string;
  showStats?: boolean;
  className?: string;
}

export const TicketSection: React.FC<TicketSectionProps> = ({
  title = 'Get Your Tickets',
  subtitle = '',
  showStats = false,
  className = ''
}) => {
  const { connectors: { connect, drag }, custom } = useNode();
  const { event } = custom || {};

  return (
    <div
      ref={(ref) => connect(drag(ref))}
      className={`bg-gradient-to-br from-slate-50 to-white rounded-xl p-4 sm:p-5 border border-slate-200 shadow-lg ${className}`}
    >
      <div className="mb-3 sm:mb-4">
        <h2 className="text-base sm:text-lg font-semibold text-slate-900 flex items-center">
          <div className="w-2 h-2 bg-gradient-to-r from-emerald-500 to-green-500 rounded-full mr-2"></div>
          {title}
        </h2>
        {subtitle && (
          <p className="text-slate-600 text-sm mt-1">{subtitle}</p>
        )}
      </div>
      
      {showStats && event?.ticket_types && (
        <div className="mb-4 p-3 bg-white rounded-lg border border-slate-200">
          <div className="grid grid-cols-2 gap-4 text-center">
            <div>
              <p className="text-xs text-slate-500 uppercase tracking-wide">Available</p>
              <p className="text-lg font-semibold text-slate-900">
                {event.ticket_types.reduce((sum: number, type: { quantity_available: number; quantity_sold: number }) => sum + (type.quantity_available - type.quantity_sold), 0)}
              </p>
            </div>
            <div>
              <p className="text-xs text-slate-500 uppercase tracking-wide">Sold</p>
              <p className="text-lg font-semibold text-slate-900">
                {event.ticket_types.reduce((sum: number, type: { quantity_sold: number }) => sum + type.quantity_sold, 0)}
              </p>
            </div>
          </div>
        </div>
      )}
      
      {event && <TicketCheckout event={event} />}
    </div>
  );
};

TicketSection.craft = {
  displayName: 'Ticket Section',
  props: {
    title: 'Get Your Tickets',
    subtitle: '',
    showStats: false,
    className: ''
  },
  related: {
    toolbar: () => (
      <div className="p-4 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Section Title
          </label>
          <input
            type="text"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            placeholder="Get Your Tickets"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Subtitle
          </label>
          <input
            type="text"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            placeholder="Optional subtitle"
          />
        </div>
        <div>
          <label className="flex items-center">
            <input type="checkbox" className="mr-2" />
            Show Ticket Statistics
          </label>
        </div>
      </div>
    )
  }
};