import React from 'react';
import { Button } from './ui/button';
import { Eye, Calendar, ArrowRight, Building } from 'lucide-react';
import { navigateTo } from './Router';

interface CTAPopupModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function CTAPopupModal({ isOpen, onClose }: CTAPopupModalProps) {
  console.log('CTAPopupModal render - isOpen:', isOpen); // Debug log
  
  const handleVirtualTour = () => {
    navigateTo('/services/learning-facility');
    onClose();
    // Add a small delay to ensure navigation completes before triggering tour
    setTimeout(() => {
      // Trigger virtual tour start if on facility page
      const startTourBtn = document.querySelector('[data-tour-trigger]') as HTMLButtonElement;
      if (startTourBtn) {
        startTourBtn.click();
      }
    }, 100);
  };

  const handleBooking = () => {
    console.log('Booking button clicked in modal'); // Debug log
    
    // Use URL parameter approach for more reliable booking modal triggering
    navigateTo('/services/learning-facility?autoBooking=true');
    onClose();
    
    // Also try the element-based approach as backup
    const attemptBookingTrigger = (attempt = 1, maxAttempts = 5) => {
      console.log(`Booking trigger attempt #${attempt}`); // Debug log
      
      // Look for the booking trigger element
      const bookingBtn = document.querySelector('[data-booking-trigger]') as HTMLButtonElement;
      console.log('Found booking trigger:', bookingBtn); // Debug log
      
      if (bookingBtn) {
        console.log('Clicking booking trigger...'); // Debug log
        bookingBtn.click();
        return;
      }
      
      // If not found and we haven't reached max attempts, try again
      if (attempt < maxAttempts) {
        setTimeout(() => attemptBookingTrigger(attempt + 1, maxAttempts), 200);
      } else {
        console.log('Element-based approach failed, relying on URL parameter approach'); // Debug log
      }
    };
    
    // Start the booking trigger attempts after initial navigation delay
    setTimeout(() => attemptBookingTrigger(), 500);
  };

  const handleContactUs = () => {
    navigateTo('/contact');
    onClose();
  };

  // Simple modal implementation that bypasses Dialog component issues
  if (!isOpen) {
    return null;
  }

  return (
    <div 
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: 'rgba(0, 0, 0, 0.5)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 9999
      }}
      onClick={onClose}
    >
      <div 
        style={{
          background: 'white',
          padding: '2rem',
          borderRadius: '8px',
          maxWidth: '500px',
          width: '90%',
          maxHeight: '80vh',
          overflow: 'auto'
        }}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="text-center space-y-4 mb-6">
          <div 
            className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto"
            style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
          >
            <Building className="w-10 h-10 text-primary" />
          </div>
          <h2 className="text-h3">
            Explore Our Learning Facility
          </h2>
          <p className="text-body text-muted">
            Discover our world-class learning environment. Take a virtual tour to see our facilities or book your space for an upcoming event.
          </p>
        </div>

        {/* Content */}
        <div className="py-6 space-y-4">
          {/* Test Message */}
          <div className="text-center p-4 bg-green-100 rounded-lg">
            <p className="text-body text-green-800">
              🎉 Simple Modal is working! This popup opened successfully.
            </p>
          </div>

          {/* Virtual Tour Option */}
          <div className="rounded-lg border p-6 space-y-4 hover:shadow-md transition-shadow">
            <div className="flex items-center gap-3">
              <div 
                className="w-12 h-12 rounded-lg flex items-center justify-center"
                style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
              >
                <Eye className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h4 className="text-h4 mb-1">Virtual Tour</h4>
                <p className="text-body text-muted">
                  Explore our four distinct learning environments
                </p>
              </div>
            </div>
            <Button
              onClick={handleVirtualTour}
              className="w-full"
              style={{
                backgroundColor: 'var(--color-primary)',
                color: 'white'
              }}
            >
              <Eye className="w-5 h-5 mr-2" />
              Start Virtual Tour
              <ArrowRight className="w-5 h-5 ml-2" />
            </Button>
          </div>

          {/* Booking Option */}
          <div className="rounded-lg border p-6 space-y-4 hover:shadow-md transition-shadow">
            <div className="flex items-center gap-3">
              <div 
                className="w-12 h-12 rounded-lg flex items-center justify-center"
                style={{ backgroundColor: 'rgba(248, 195, 1, 0.1)' }}
              >
                <Calendar className="w-6 h-6" style={{ color: '#F8C301' }} />
              </div>
              <div>
                <h4 className="text-h4 mb-1">Book Facility</h4>
                <p className="text-body text-muted">
                  Reserve our learning spaces for your next event
                </p>
              </div>
            </div>
            <Button
              onClick={handleBooking}
              variant="outline"
              className="w-full"
              style={{
                borderColor: 'var(--color-primary)',
                color: 'var(--color-primary)'
              }}
            >
              <Calendar className="w-5 h-5 mr-2" />
              Book Now
              <ArrowRight className="w-5 h-5 ml-2" />
            </Button>
          </div>

          {/* Contact Us Option */}
          <div className="pt-4 border-t">
            <p className="text-center text-small text-muted mb-3">
              Need more information or have specific requirements?
            </p>
            <Button
              onClick={handleContactUs}
              variant="ghost"
              className="w-full text-body"
              style={{ color: 'var(--color-primary)' }}
            >
              Contact Us
            </Button>
          </div>

          {/* Close Button */}
          <div className="pt-4">
            <Button
              onClick={onClose}
              variant="outline"
              className="w-full"
            >
              Close
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}