import { useState } from 'react';
import VenueTab from './VenueTab';
import MarketingTab from './MarketingTab';
import SettingsTab from './SettingsTab';
import EmbedCodeModal from '../modals/EmbedCodeModal';

interface EventSettingsTabProps {
  eventId: string;
  organizationId: string;
  eventSlug?: string;
}

export default function EventSettingsTab({ eventId, organizationId, eventSlug }: EventSettingsTabProps) {
  const [activeSubTab, setActiveSubTab] = useState<'details' | 'venue' | 'marketing' | 'embed'>('details');
  const [showEmbedModal, setShowEmbedModal] = useState(false);

  const subTabs = [
    { id: 'details', label: 'Event Details' },
    { id: 'venue', label: 'Venue' },
    { id: 'marketing', label: 'Marketing' },
    { id: 'embed', label: 'Embed Code' }
  ];

  return (
    <div>
      {/* Sub-navigation */}
      <div className="flex flex-wrap border-b border-white/20 mb-6">
        {subTabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => {
              if (tab.id === 'embed') {
                setShowEmbedModal(true);
              } else {
                setActiveSubTab(tab.id as string);
              }
            }}
            className={`px-4 py-2 text-sm font-medium transition-colors duration-200 border-b-2 ${
              activeSubTab === tab.id
                ? 'border-blue-500 text-white'
                : 'border-transparent text-white/60 hover:text-white'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Sub-tab content */}
      <div>
        {activeSubTab === 'details' && (
          <SettingsTab eventId={eventId} organizationId={organizationId} />
        )}
        {activeSubTab === 'venue' && (
          <VenueTab eventId={eventId} organizationId={organizationId} />
        )}
        {activeSubTab === 'marketing' && (
          <MarketingTab eventId={eventId} organizationId={organizationId} />
        )}
      </div>

      {/* Embed Code Modal */}
      <EmbedCodeModal
        isOpen={showEmbedModal}
        onClose={() => setShowEmbedModal(false)}
        eventId={eventId}
        eventSlug={eventSlug || ''}
      />
    </div>
  );
}