import React from 'react';
import { Editor, Frame, Element } from '@craftjs/core';
import { 
  HeroSection, 
  EventDetails, 
  TicketSection, 
  TextBlock, 
  ImageBlock, 
  ButtonBlock,
  SpacerBlock,
  TwoColumnLayout
} from './craft/components';
import TicketCheckout from './TicketCheckout';

interface CustomPageRendererProps {
  pageData: Record<string, unknown> | null;
  event: {
    id: string;
    title: string;
    venue: string;
    description?: string;
    image_url?: string;
    organizations: {
      name: string;
      logo?: string;
    };
  };
  formattedDate: string;
  formattedTime: string;
}

const CustomPageRenderer: React.FC<CustomPageRendererProps> = ({ 
  pageData, 
  event, 
  formattedDate, 
  formattedTime 
}) => {
  // If no custom page data, render default layout
  if (!pageData || Object.keys(pageData).length === 0) {
    return (
      <div className="bg-white shadow-2xl rounded-2xl overflow-hidden border border-slate-200">
        {/* Default Event Image */}
        {event.image_url && (
          <div className="w-full h-48 sm:h-64 md:h-72 lg:h-80 overflow-hidden">
            <img 
              src={event.image_url} 
              alt={event.title}
              className="w-full h-full object-cover"
            />
          </div>
        )}
        
        <div className="px-4 sm:px-6 py-4 sm:py-6">
          {/* Default Header */}
          <div className="bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl p-4 sm:p-6 mb-4 sm:mb-6 text-white">
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
              <div className="flex items-center">
                {event.organizations.logo && (
                  <img 
                    src={event.organizations.logo} 
                    alt={event.organizations.name}
                    className="h-10 w-10 sm:h-12 sm:w-12 rounded-xl mr-3 sm:mr-4 shadow-lg border-2 border-white/20 flex-shrink-0"
                  />
                )}
                <div className="min-w-0 flex-1">
                  <h1 className="text-xl sm:text-2xl font-light mb-1 tracking-wide truncate">{event.title}</h1>
                  <p className="text-slate-200 text-sm font-medium truncate">Presented by {event.organizations.name}</p>
                </div>
              </div>
              <div className="text-left sm:text-right">
                <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20">
                  <p className="text-xs text-slate-300 uppercase tracking-wide font-medium">Event Date</p>
                  <p className="text-base sm:text-lg font-semibold text-white">{formattedDate}</p>
                  <p className="text-slate-200 text-sm">{formattedTime}</p>
                </div>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
            <div>
              <div className="bg-gradient-to-br from-slate-50 to-white rounded-xl p-4 sm:p-5 border border-slate-200 shadow-lg">
                <h2 className="text-base sm:text-lg font-semibold text-slate-900 mb-3 sm:mb-4 flex items-center">
                  <div className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mr-2"></div>
                  Event Details
                </h2>
                
                <div className="space-y-3">
                  <div className="flex items-start p-3 bg-white rounded-lg border border-slate-200">
                    <div className="w-8 h-8 bg-gradient-to-br from-emerald-400 to-green-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                      <svg className="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="font-medium text-slate-900">Venue</p>
                      <p className="text-slate-600 text-sm break-words">{event.venue}</p>
                    </div>
                  </div>

                  <div className="flex items-start p-3 bg-white rounded-lg border border-slate-200">
                    <div className="w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                      <svg className="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="font-medium text-slate-900">Date & Time</p>
                      <p className="text-slate-600 text-sm break-words">{formattedDate} at {formattedTime}</p>
                    </div>
                  </div>
                </div>

                {event.description && (
                  <div className="mt-4 p-3 sm:p-4 bg-white rounded-lg border border-slate-200">
                    <h3 className="text-sm font-semibold text-slate-900 mb-2 flex items-center">
                      <div className="w-1 h-1 bg-gradient-to-r from-amber-400 to-orange-500 rounded-full mr-2"></div>
                      About This Event
                    </h3>
                    <p className="text-slate-600 text-sm whitespace-pre-line leading-relaxed break-words">{event.description}</p>
                  </div>
                )}
              </div>
            </div>

            <div>
              <div className="bg-gradient-to-br from-slate-50 to-white rounded-xl p-4 sm:p-5 border border-slate-200 shadow-lg lg:sticky lg:top-8">
                <h2 className="text-base sm:text-lg font-semibold text-slate-900 mb-3 sm:mb-4 flex items-center">
                  <div className="w-2 h-2 bg-gradient-to-r from-emerald-500 to-green-500 rounded-full mr-2"></div>
                  Get Your Tickets
                </h2>
                <TicketCheckout event={event} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Render custom page with Craft.js
  return (
    <div className="w-full">
      <Editor
        resolver={{
          HeroSection,
          EventDetails,
          TicketSection,
          TextBlock,
          ImageBlock,
          ButtonBlock,
          SpacerBlock,
          TwoColumnLayout
        }}
        enabled={false} // Read-only mode for public viewing
      >
        <Frame data={pageData}>
          <Element 
            is="div" 
            canvas
            className="w-full min-h-screen"
            custom={{ 
              event,
              formattedDate,
              formattedTime 
            }}
          />
        </Frame>
      </Editor>
    </div>
  );
};

export default CustomPageRenderer;