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

export function StudentDashboardLayout() {
  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="/aluno"
            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" />
            Início
          </NavLink>

          <NavLink
            to="/aluno/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" />
            Minhas Histórias
          </NavLink>

          <NavLink
            to="/aluno/conquistas"
            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'
              }`
            }
          >
            <Trophy className="h-5 w-5" />
            Conquistas
          </NavLink>

          <NavLink
            to="/aluno/historico"
            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'
              }`
            }
          >
            <History className="h-5 w-5" />
            Histórico
          </NavLink>

          <NavLink
            to="/aluno/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 mt-4"
          >
            <LogOut className="h-5 w-5" />
            Sair
          </button>
        </nav>

        {/* Footer com informações do aluno */}
        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
              <span className="text-sm font-medium text-purple-600">
                {/* Primeira letra do nome do aluno */}
                A
              </span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900 truncate">
                {/* Nome do aluno */}
                Aluno da Silva
              </p>
              <p className="text-xs text-gray-500 truncate">
                {/* Turma do aluno */}
                5º Ano A
              </p>
            </div>
          </div>
        </div>
      </aside>

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