import React from 'react';
import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import {
  LayoutDashboard,
  Users,
  GraduationCap,
  BookOpen,
  Settings,
  LogOut,
  School,
  UserRound
} from 'lucide-react';
import { useAuth } from '../../hooks/useAuth';

export function DashboardLayout() {
  const navigate = useNavigate();
  const { signOut } = useAuth();

  const handleLogout = async () => {
    await signOut();
    navigate('/');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Sidebar */}
      <aside className="fixed left-0 top-0 h-full w-64 bg-white border-r border-gray-200">
        <div className="flex items-center gap-2 p-6 border-b border-gray-200">
          <School className="h-8 w-8 text-purple-600" />
          <span className="font-semibold text-gray-900">Histórias Mágicas</span>
        </div>
        
        <nav className="p-4 space-y-1">
          <NavLink
            to="/dashboard"
            end
            className={({ isActive }) =>
              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
                isActive
                  ? 'bg-purple-50 text-purple-700'
                  : 'text-gray-600 hover:bg-gray-50'
              }`
            }
          >
            <LayoutDashboard className="h-5 w-5" />
            Visão Geral
          </NavLink>

          <NavLink
            to="/dashboard/turmas"
            className={({ isActive }) =>
              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
                isActive
                  ? 'bg-purple-50 text-purple-700'
                  : 'text-gray-600 hover:bg-gray-50'
              }`
            }
          >
            <Users className="h-5 w-5" />
            Turmas
          </NavLink>

          <NavLink
            to="/dashboard/professores"
            className={({ isActive }) =>
              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
                isActive
                  ? 'bg-purple-50 text-purple-700'
                  : 'text-gray-600 hover:bg-gray-50'
              }`
            }
          >
            <GraduationCap className="h-5 w-5" />
            Professores
          </NavLink>

          <NavLink
            to="/dashboard/alunos"
            className={({ isActive }) =>
              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
                isActive
                  ? 'bg-purple-50 text-purple-700'
                  : 'text-gray-600 hover:bg-gray-50'
              }`
            }
          >
            <UserRound className="h-5 w-5" />
            Alunos
          </NavLink>

          <NavLink
            to="/dashboard/historias"
            className={({ isActive }) =>
              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
                isActive
                  ? 'bg-purple-50 text-purple-700'
                  : 'text-gray-600 hover:bg-gray-50'
              }`
            }
          >
            <BookOpen className="h-5 w-5" />
            Histórias
          </NavLink>

          <NavLink
            to="/dashboard/configuracoes"
            className={({ isActive }) =>
              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
                isActive
                  ? 'bg-purple-50 text-purple-700'
                  : 'text-gray-600 hover:bg-gray-50'
              }`
            }
          >
            <Settings className="h-5 w-5" />
            Configurações
          </NavLink>

          <button
            onClick={handleLogout}
            className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 w-full"
          >
            <LogOut className="h-5 w-5" />
            Sair
          </button>
        </nav>
      </aside>

      {/* Main Content */}
      <main className="ml-64 p-8">
        <Outlet />
      </main>
    </div>
  );
}