import React, { useState } from 'react';
import type { EventData } from '../../lib/event-management';

interface Tab {
  id: string;
  name: string;
  icon: React.ReactNode;
  component: React.ComponentType<Record<string, unknown>>;
}

interface TabNavigationProps {
  tabs: Tab[];
  activeTab: string;
  onTabChange: (tabId: string) => void;
  eventId: string;
  organizationId: string;
  eventData: EventData | null;
  eventSlug?: string | null;
}

export default function TabNavigation({ 
  tabs, 
  activeTab, 
  onTabChange, 
  eventId, 
  organizationId,
  eventData,
  eventSlug
}: TabNavigationProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const currentTab = tabs.find(tab => tab.id === activeTab);
  const CurrentTabComponent = currentTab?.component;

  return (
    <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl overflow-hidden">
      {/* Tab Navigation */}
      <div className="border-b border-white/20">
        {/* Mobile Tab Dropdown */}
        <div className="lg:hidden px-4 py-3">
          <div className="relative">
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="flex items-center justify-between w-full bg-white/10 backdrop-blur-lg border border-white/20 text-white px-4 py-3 rounded-xl focus:ring-2 transition-all duration-200"
              style={{
                '--tw-ring-color': 'var(--glass-border-focus)'
              } as React.CSSProperties}
            >
              <span className="flex items-center gap-2">
                <span>{currentTab?.icon}</span>
                <span>{currentTab?.name}</span>
              </span>
              <svg 
                className={`w-5 h-5 transition-transform duration-200 ${mobileMenuOpen ? 'rotate-180' : ''}`}
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            
            {mobileMenuOpen && (
              <div className="absolute top-full left-0 right-0 mt-2 bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl z-50">
                {tabs.map((tab) => (
                  <button
                    key={tab.id}
                    onClick={() => {
                      onTabChange(tab.id);
                      setMobileMenuOpen(false);
                    }}
                    className={`w-full text-left px-4 py-3 text-white hover:bg-white/20 transition-colors duration-200 flex items-center gap-2 ${
                      activeTab === tab.id ? 'bg-white/20' : ''
                    } ${tab.id === tabs[0].id ? 'rounded-t-xl' : ''} ${tab.id === tabs[tabs.length - 1].id ? 'rounded-b-xl' : ''}`}
                  >
                    <span>{tab.icon}</span>
                    <span>{tab.name}</span>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Desktop Tab Navigation */}
        <div className="hidden lg:flex overflow-x-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => onTabChange(tab.id)}
              className={`flex items-center gap-2 px-6 py-4 text-sm font-medium transition-colors duration-200 whitespace-nowrap border-b-2 ${
                activeTab === tab.id
                  ? 'border-transparent bg-white/5'
                  : 'border-transparent text-white/60 hover:text-white hover:bg-white/5'
              }`}
              style={activeTab === tab.id ? {
                borderBottomColor: 'var(--glass-text-accent)',
                color: 'var(--glass-text-accent)'
              } : {}}
            >
              <span>{tab.icon}</span>
              <span>{tab.name}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Tab Content */}
      <div className="p-6 min-h-[600px]">
        {CurrentTabComponent && eventData ? (
          <CurrentTabComponent 
            eventId={eventId} 
            organizationId={organizationId}
            eventSlug={eventSlug}
          />
        ) : (
          <div className="flex items-center justify-center py-12">
            <div className="text-center">
              <div className="text-white/60 mb-4">
                {!CurrentTabComponent ? 'Tab component not found' : 'Event data not loaded'}
              </div>
              <div className="text-white/40 text-sm">
                Debug: activeTab={activeTab}, eventData={eventData ? 'loaded' : 'null'}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}