import React, { useState, useEffect } from 'react';
import { Button } from "@/components/ui/button";
import { LogOut, Menu, Moon, Sun } from 'lucide-react';
import { useAuth } from '@/contexts/AuthContext';
import { useTheme } from '@/contexts/ThemeContext';
import { useNavigate } from 'react-router-dom';
import  DashboardContainer  from '../dashboard/DashboardContainer';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { HeaderProvider, useHeader } from '@/contexts/HeaderContext';

const MainShell: React.FC = () => {
  const { header, resetHeader } = useHeader();

  useEffect(() => {
    return () => {
      resetHeader();
    };
  }, [resetHeader]);

  const { logout } = useAuth();
  const { theme, toggleTheme } = useTheme();
  const navigate = useNavigate();
  const [hasActiveEvent, setHasActiveEvent] = useState(false);
  // header is already available above
  
  // Check for active events - This will be replaced with actual API call
  useEffect(() => {
    // TODO: Replace with actual API call to check for active events
    const checkActiveEvents = async () => {
      try {
        // const response = await fetch('/api/events/active');
        // const data = await response.json();
        // setHasActiveEvent(data.hasActiveEvent);
        
        // For now, we'll set it to false
        setHasActiveEvent(false);
      } catch (error) {
        console.error('Error checking active events:', error);
      }
    };

    checkActiveEvents();
  }, []);

  const handleAction = (action: string) => {
    console.log('Selected action:', action);
    // Handle navigation or other actions based on the selected card
    switch (action) {
      case 'event':
        // Navigate to events page or open event form
        break;
      case 'blog':
        // Navigate to blog page or open blog form
        break;
      case 'quick-post':
        // Open quick post dialog
        break;
      default:
        break;
    }
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pointer-events-none">
        <div className="container grid h-16 grid-cols-[auto,1fr,auto] items-center px-4">
          <div className="flex items-center gap-2 pointer-events-auto">
            <div
              className="flex items-center gap-2 cursor-pointer"
              onClick={() => navigate('/')}
            >
              <img
                src="/icon.png"
                alt="Logo"
                className="h-9 w-9 object-contain dark:invert dark:brightness-125"
              />
              {!header.left && (
                <img
                  src="/Logo.png"
                  alt="Logo"
                  className="hidden md:block h-10 w-auto object-contain dark:invert dark:brightness-125"
                />
              )}
            </div>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="md:hidden" aria-label="Menü">
                  <Menu className="h-5 w-5" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start">
                {header.mobileMenu}
                {header.mobileMenu ? <DropdownMenuSeparator /> : null}
                <DropdownMenuItem onClick={toggleTheme} className="gap-2">
                  {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
                  <span>{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
                </DropdownMenuItem>
                <DropdownMenuItem onClick={logout} className="gap-2">
                  <LogOut className="h-4 w-4" />
                  <span>Abmelden</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

            {header.left ? (
              <div className="hidden md:flex items-center gap-2">{header.left}</div>
            ) : null}
          </div>

          <div className="text-center text-sm font-medium pointer-events-none">
            {header.title || ''}
          </div>
          
          <div className="flex items-center gap-2 pointer-events-auto">
            <Button
              variant="ghost"
              size="icon"
              className="hidden md:inline-flex"
              onClick={toggleTheme}
              aria-label={theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren'}
            >
              {theme === 'dark' ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="gap-1.5 text-sm hidden md:inline-flex"
              onClick={logout}
            >
              <LogOut className="h-4 w-4" />
              <span className="hidden sm:inline">Abmelden</span>
            </Button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container py-6 px-0 md:px-4">
        <div className="mx-auto md:max-w-5xl">
          <DashboardContainer 
            onActionClick={handleAction} 
            hasActiveEvent={hasActiveEvent} 
          />
        </div>
      </main>
    </div>
  );
};

const Main: React.FC = () => {
  return (
    <HeaderProvider>
      <MainShell />
    </HeaderProvider>
  );
};

export default Main;