import React, { useState, useEffect } from 'react';
import { Button } from "@/components/ui/button";
import { LogOut, Menu } from 'lucide-react';
import { useAuth } from '@/contexts/AuthContext';
import { useNavigate } from 'react-router-dom';
import  DashboardContainer  from '../dashboard/DashboardContainer';
import { cn } from '@/lib/utils';
const Main: React.FC = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [hasActiveEvent, setHasActiveEvent] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  
  // 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">
        <div className="container flex h-16 items-center justify-between px-4">
          <div className="flex items-center gap-2">
            <Button
              variant="ghost"
              size="icon"
              className="md:hidden"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              <Menu className="h-5 w-5" />
              <span className="sr-only">Toggle menu</span>
            </Button>
            <div 
              className="flex items-center gap-2 cursor-pointer"
              onClick={() => navigate('/')}
            >
              <img 
                src="/Logo.png" 
                alt="Logo" 
                className="h-10 w-auto object-contain"
              />
            </div>
          </div>
          
          <div className="flex items-center gap-2">
            <div className="hidden md:block text-sm text-muted-foreground">
              Hallo, {user?.name?.split(' ')[0] || 'Benutzer'}
            </div>
            <Button
              variant="outline"
              size="sm"
              className="gap-1.5 text-sm"
              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>
  );
};

export default Main;