const { useState, useEffect } = React;

window.App = function App() {
  const [events, setEvents] = useState(() => window.DataManager.getEvents());
  const [currentView, setCurrentView] = useState('calendar'); // 'calendar', 'admin', 'login'
  const [selectedEvent, setSelectedEvent] = useState(null);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  // Sync with remote API on mount and on tab focus
  useEffect(() => {
    const syncData = async () => {
      const { events: remoteEvents } = await window.DataManager.syncWithRemote();
      if (remoteEvents) {
        setEvents(remoteEvents);
      }
    };

    syncData();

    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        syncData();
      }
    };

    window.addEventListener('visibilitychange', handleVisibilityChange);
    window.addEventListener('focus', syncData);

    const interval = setInterval(syncData, 60000);

    return () => {
      window.removeEventListener('visibilitychange', handleVisibilityChange);
      window.removeEventListener('focus', syncData);
      clearInterval(interval);
    };
  }, []);

  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  useEffect(() => {
    const handleHashChange = () => {
      if (window.location.hash === '#/amadeus') {
        setCurrentView(isAuthenticated ? 'admin' : 'login');
      } else {
        setCurrentView('calendar');
      }
    };
    
    window.addEventListener('hashchange', handleHashChange);
    handleHashChange(); // Check on initial load
    
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, [isAuthenticated]);

  const handleEventClick = (event) => {
    setSelectedEvent(event);
  };

  const handleLogin = () => {
    setIsAuthenticated(true);
    setCurrentView('admin');
  };

  return (
    <div className="min-h-screen pb-12 flex flex-col">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-40 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.location.hash = ''}>
              <img src="logo.png" alt="MYJ Logo" className="w-9 h-11 sm:w-10 sm:h-12 object-contain" />
              <h1 className="text-lg sm:text-xl font-bold text-gray-900 tracking-tight">MYJ Mumbai Calendar</h1>
            </div>
            
            {(currentView === 'admin' || currentView === 'login') && (
              <nav className="flex items-center gap-1">
                <button 
                  onClick={() => window.location.hash = ''}
                  className="px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-all flex items-center gap-1.5 bg-gray-100 text-gray-700 hover:bg-gray-200"
                >
                  <i data-lucide="arrow-left" className="w-4 h-4"></i>
                  Exit Admin
                </button>
              </nav>
            )}
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-8 w-full">
        {currentView === 'calendar' && <window.CalendarView events={events} onEventClick={handleEventClick} />}
        {currentView === 'admin' && <window.AdminDashboard events={events} setEvents={setEvents} />}
        {currentView === 'login' && <window.Login onLogin={handleLogin} />}
      </main>

      {/* Modal */}
      {selectedEvent && (
        <window.EventModal 
          event={selectedEvent} 
          onClose={() => setSelectedEvent(null)} 
        />
      )}
    </div>
  );
};