import { useState } from 'react';
import TicketsTab from './TicketsTab';
import PresaleTab from './PresaleTab';
import DiscountTab from './DiscountTab';
import PrintedTab from './PrintedTab';

interface TicketingAccessTabProps {
  eventId: string;
  organizationId: string;
}

export default function TicketingAccessTab({ eventId, organizationId }: TicketingAccessTabProps) {
  const [activeSubTab, setActiveSubTab] = useState<'tickets' | 'presale' | 'discount' | 'printed'>('tickets');

  const subTabs = [
    { id: 'tickets', label: 'Ticket Types' },
    { id: 'presale', label: 'Access Codes' },
    { id: 'discount', label: 'Discounts' },
    { id: 'printed', label: 'Printed Tickets' }
  ];

  return (
    <div>
      {/* Sub-navigation */}
      <div className="flex border-b border-white/20 mb-6">
        {subTabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveSubTab(tab.id as any)}
            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 === 'tickets' && (
          <TicketsTab eventId={eventId} organizationId={organizationId} />
        )}
        {activeSubTab === 'presale' && (
          <PresaleTab eventId={eventId} organizationId={organizationId} />
        )}
        {activeSubTab === 'discount' && (
          <DiscountTab eventId={eventId} organizationId={organizationId} />
        )}
        {activeSubTab === 'printed' && (
          <PrintedTab eventId={eventId} organizationId={organizationId} />
        )}
      </div>
    </div>
  );
}