import { useState } from 'react';
import { AppProvider } from './contexts/AppContext';
import { KanbanBoard } from './components/KanbanBoard';
import { ProductBacklog } from './components/ProductBacklog';
import { SprintManagement } from './components/SprintManagement';
import { Dashboard } from './components/Dashboard';
import { Button } from './components/ui/button';
import { LayoutDashboard, KanbanSquare, ListTodo, Calendar } from 'lucide-react';

type View = 'dashboard' | 'kanban' | 'backlog' | 'sprints';

function AppContent() {
  const [activeView, setActiveView] = useState<View>('dashboard');

  const navigation = [
    { id: 'dashboard' as View, label: 'Dashboard', icon: LayoutDashboard },
    { id: 'kanban' as View, label: 'Kanban Board', icon: KanbanSquare },
    { id: 'backlog' as View, label: 'Product Backlog', icon: ListTodo },
    { id: 'sprints' as View, label: 'Sprint Management', icon: Calendar }
  ];

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-white sticky top-0 z-10">
        <div className="container mx-auto px-4 py-4">
          <h1 className="mb-4">Agile Project Manager</h1>
          <nav className="flex gap-2 overflow-x-auto pb-2">
            {navigation.map(({ id, label, icon: Icon }) => (
              <Button
                key={id}
                variant={activeView === id ? 'default' : 'outline'}
                onClick={() => setActiveView(id)}
                className="flex items-center gap-2 whitespace-nowrap"
              >
                <Icon className="h-4 w-4" />
                {label}
              </Button>
            ))}
          </nav>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto">
        {activeView === 'dashboard' && <Dashboard />}
        {activeView === 'kanban' && <KanbanBoard />}
        {activeView === 'backlog' && <ProductBacklog />}
        {activeView === 'sprints' && <SprintManagement />}
      </main>
    </div>
  );
}

export default function App() {
  return (
    <AppProvider>
      <AppContent />
    </AppProvider>
  );
}