@hed-hog/lms 0.0.306 → 0.0.310

package/hedhog/frontend/app/courses/[id]/structure/page.tsx.ejs

@@ -1,3212 +1,10 @@
-'use client';
-
-import { EmptyState, Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldLabel,
-} from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Separator } from '@/components/ui/separator';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Switch } from '@/components/ui/switch';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Textarea } from '@/components/ui/textarea';
-import {
-  closestCorners,
-  DndContext,
-  DragOverlay,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-  type DragOverEvent,
-  type DragStartEvent,
-  type UniqueIdentifier,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { useApp } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { AnimatePresence, motion } from 'framer-motion';
-import {
-  AlertTriangle,
-  Archive,
-  BarChart3,
-  BookOpen,
-  CheckSquare,
-  ChevronDown,
-  ChevronRight,
-  Clock,
-  Copy,
-  Eye,
-  FileCheck,
-  FileText,
-  FileUp,
-  FolderOpen,
-  Globe,
-  GraduationCap,
-  GripVertical,
-  HelpCircle,
-  Layers,
-  LayoutDashboard,
-  Link2,
-  Loader2,
-  Lock,
-  MessageSquare,
-  Paperclip,
-  Pencil,
-  Plus,
-  Save,
-  Square,
-  Trash2,
-  Upload,
-  Users,
-  Video,
-  X,
-  type LucideIcon,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { usePathname } from 'next/navigation';
-import { use, useCallback, useEffect, useRef, useState } from 'react';
-import { Controller, useForm, useWatch } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-// ── Navigation ──────────────────────────────────────────────────────────────
-
-const NAV_ITEMS = [
-  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
-  { label: 'Cursos', href: '/cursos', icon: BookOpen },
-  { label: 'Turmas', href: '/turmas', icon: Users },
-  { label: 'Exames', href: '/exames', icon: FileCheck },
-  { label: 'Formacoes', href: '/formacoes', icon: GraduationCap },
-  { label: 'Relatorios', href: '/relatorios', icon: BarChart3 },
-];
-
-// ── Types ───────────────────────────────────────────────────────────────────
-
-type AulaTipo = 'video' | 'questao' | 'post' | 'exercicio';
-type VideoProvider = 'youtube' | 'vimeo' | 'bunny' | 'custom';
-
-interface Recurso {
-  id: string;
-  nome: string;
-  tamanho: string;
-  tipo: string;
-  publico: boolean;
-}
-
-interface AulaInstructor {
-  id: string;
-  role?: 'lead' | 'assistant';
-  nome?: string;
-}
-
-interface Aula {
-  id: string;
-  codigo: string;
-  titulo: string;
-  descricaoPublica: string;
-  descricaoPrivada: string;
-  tipo: AulaTipo;
-  duracao: number;
-  sessaoId: string;
-  // Video fields
-  videoProvedor?: VideoProvider;
-  videoUrl?: string;
-  duracaoAutomatica?: boolean;
-  transcricao?: string;
-  // Questao fields
-  exameVinculado?: string;
-  // Post fields
-  conteudoPost?: string;
-  // Recursos
-  recursos: Recurso[];
-  instrutores?: AulaInstructor[];
-}
-
-interface InstructorOption {
-  id: number;
-  name: string;
-}
-
-interface Sessao {
-  id: string;
-  codigo: string;
-  titulo: string;
-  duracao: number;
-  collapsed: boolean;
-}
-
-// ── Schemas ─────────────────────────────────────────────────────────────────
-
-function getSessaoSchema(t: any) {
-  return z.object({
-    codigo: z.string().min(2, t('validation.codeMin')),
-    titulo: z.string().min(3, t('validation.titleMin')),
-    duracao: z.coerce.number().min(1, t('validation.durationMin')),
-  });
-}
-type SessaoForm = {
-  codigo: string;
-  titulo: string;
-  duracao: number;
-};
-
-function getAulaSchema(t: any) {
-  return z.object({
-    codigo: z.string().min(2, t('validation.codeMin')),
-    titulo: z.string().min(3, t('validation.titleMin')),
-    descricaoPublica: z.string(),
-    descricaoPrivada: z.string(),
-    tipo: z.enum(['video', 'questao', 'post', 'exercicio'], {
-      errorMap: () => ({ message: t('validation.typeRequired') }),
-    }),
-    duracao: z.coerce.number().min(1, t('validation.durationMin')),
-    // Video
-    videoProvedor: z.string().optional(),
-    videoUrl: z.string().optional(),
-    duracaoAutomatica: z.boolean().optional(),
-    // Questao
-    exameVinculado: z.string().optional(),
-    // Post
-    conteudoPost: z.string().optional(),
-  });
-}
-type AulaFormType = {
-  codigo: string;
-  titulo: string;
-  descricaoPublica: string;
-  descricaoPrivada: string;
-  tipo: AulaTipo;
-  duracao: number;
-  videoProvedor?: string;
-  videoUrl?: string;
-  duracaoAutomatica?: boolean;
-  exameVinculado?: string;
-  conteudoPost?: string;
-};
-
-type CourseStructureResponse = {
-  sessoes: Sessao[];
-  aulas: Aula[];
-  instructors?: InstructorOption[];
-};
-
-type Locale = {
-  id?: number;
-  code: string;
-  name: string;
-};
-
-// ── Constants ───────────────────────────────────────────────────────────────
-
-function getTipoAulaMap(
-  t: any
-): Record<AulaTipo, { label: string; icon: LucideIcon; color: string }> {
-  return {
-    video: {
-      label: t('types.video'),
-      icon: Video,
-      color: 'bg-blue-100 text-blue-700',
-    },
-    post: {
-      label: t('types.post'),
-      icon: FileText,
-      color: 'bg-emerald-100 text-emerald-700',
-    },
-    questao: {
-      label: t('types.questao'),
-      icon: HelpCircle,
-      color: 'bg-amber-100 text-amber-700',
-    },
-    exercicio: {
-      label: t('types.exercicio'),
-      icon: Layers,
-      color: 'bg-rose-100 text-rose-700',
-    },
-  };
-}
-
-function getProvedores(t: any): { value: VideoProvider; label: string }[] {
-  return [
-    { value: 'youtube', label: 'YouTube' },
-    { value: 'vimeo', label: 'Vimeo' },
-    { value: 'bunny', label: 'Bunny Stream' },
-    { value: 'custom', label: t('providers.custom') },
-  ];
-}
-
-function getMockExames(t: any) {
-  return [
-    { id: 'ex1', titulo: t('mockExams.hooksBasic') },
-    { id: 'ex2', titulo: t('mockExams.hooksAdvanced') },
-    { id: 'ex3', titulo: t('mockExams.reactPatterns') },
-    { id: 'ex4', titulo: t('mockExams.performance') },
-    { id: 'ex5', titulo: t('mockExams.finalEvaluation') },
-  ];
-}
-
-// ── Mock Data ───────────────────────────────────────────────────────────────
-
-const initialSessoes: Sessao[] = [
-  {
-    id: 's1',
-    codigo: 'S01',
-    titulo: 'Introducao ao React Avancado',
-    duracao: 45,
-    collapsed: false,
-  },
-  {
-    id: 's2',
-    codigo: 'S02',
-    titulo: 'Hooks Avancados',
-    duracao: 113,
-    collapsed: false,
-  },
-  {
-    id: 's3',
-    codigo: 'S03',
-    titulo: 'Patterns de Composicao',
-    duracao: 102,
-    collapsed: false,
-  },
-  {
-    id: 's4',
-    codigo: 'S04',
-    titulo: 'Gerenciamento de Estado',
-    duracao: 62,
-    collapsed: false,
-  },
-  {
-    id: 's5',
-    codigo: 'S05',
-    titulo: 'Performance e Otimizacao',
-    duracao: 130,
-    collapsed: false,
-  },
-];
-
-const initialAulas: Aula[] = [
-  {
-    id: 'a1',
-    codigo: 'A01',
-    titulo: 'Bem-vindo ao curso',
-    tipo: 'video',
-    duracao: 8,
-    descricaoPublica: 'Apresentacao do instrutor e roadmap do curso',
-    descricaoPrivada: 'Gravar nova intro',
-    sessaoId: 's1',
-    videoProvedor: 'youtube',
-    videoUrl: 'https://youtube.com/watch?v=abc123',
-    duracaoAutomatica: true,
-    recursos: [
-      {
-        id: 'r1',
-        nome: 'slides-intro.pdf',
-        tamanho: '2.4 MB',
-        tipo: 'pdf',
-        publico: true,
-      },
-    ],
-  },
-  {
-    id: 'a2',
-    codigo: 'A02',
-    titulo: 'Configuracao do ambiente',
-    tipo: 'post',
-    duracao: 15,
-    descricaoPublica: 'Guia passo a passo para configurar o ambiente',
-    descricaoPrivada: '',
-    sessaoId: 's1',
-    conteudoPost: '# Configuracao\n\nSiga os passos abaixo...',
-    recursos: [],
-  },
-  {
-    id: 'a3',
-    codigo: 'A03',
-    titulo: 'Revisao: Componentes e Props',
-    tipo: 'video',
-    duracao: 22,
-    descricaoPublica: 'Revisao rapida dos fundamentos',
-    descricaoPrivada: '',
-    sessaoId: 's1',
-    videoProvedor: 'vimeo',
-    videoUrl: 'https://vimeo.com/123456',
-    duracaoAutomatica: false,
-    transcricao:
-      'Ola, nesta aula vamos revisar os fundamentos de componentes React. Vamos comecar entendendo o que sao componentes, como definir props e como compor interfaces modulares...',
-    recursos: [],
-  },
-  {
-    id: 'a4',
-    codigo: 'A04',
-    titulo: 'useReducer na pratica',
-    tipo: 'video',
-    duracao: 35,
-    descricaoPublica: 'Como usar useReducer para estado complexo',
-    descricaoPrivada: 'Adicionar exemplo de todo list',
-    sessaoId: 's2',
-    videoProvedor: 'youtube',
-    videoUrl: 'https://youtube.com/watch?v=def456',
-    duracaoAutomatica: true,
-    recursos: [
-      {
-        id: 'r2',
-        nome: 'useReducer-exemplos.zip',
-        tamanho: '840 KB',
-        tipo: 'zip',
-        publico: false,
-      },
-      {
-        id: 'r3',
-        nome: 'diagrama-reducer.png',
-        tamanho: '180 KB',
-        tipo: 'png',
-        publico: true,
-      },
-    ],
-  },
-  {
-    id: 'a5',
-    codigo: 'A05',
-    titulo: 'useMemo e useCallback',
-    tipo: 'video',
-    duracao: 28,
-    descricaoPublica: 'Otimizando re-renders com memoizacao',
-    descricaoPrivada: '',
-    sessaoId: 's2',
-    videoProvedor: 'bunny',
-    videoUrl: 'https://stream.bunny.net/xyz',
-    duracaoAutomatica: true,
-    recursos: [],
-  },
-  {
-    id: 'a6',
-    codigo: 'A06',
-    titulo: 'Criando hooks customizados',
-    tipo: 'video',
-    duracao: 40,
-    descricaoPublica: 'Extraindo logica reutilizavel',
-    descricaoPrivada: '',
-    sessaoId: 's2',
-    videoProvedor: 'youtube',
-    videoUrl: 'https://youtube.com/watch?v=ghi789',
-    duracaoAutomatica: false,
-    recursos: [],
-  },
-  {
-    id: 'a7',
-    codigo: 'A07',
-    titulo: 'Quiz: Hooks Avancados',
-    tipo: 'questao',
-    duracao: 10,
-    descricaoPublica: 'Teste seus conhecimentos',
-    descricaoPrivada: 'Revisar questao 5',
-    sessaoId: 's2',
-    exameVinculado: 'ex2',
-    recursos: [],
-  },
-  {
-    id: 'a8',
-    codigo: 'A08',
-    titulo: 'Compound Components',
-    tipo: 'video',
-    duracao: 32,
-    descricaoPublica: 'Pattern para componentes composiveis',
-    descricaoPrivada: '',
-    sessaoId: 's3',
-    videoProvedor: 'youtube',
-    videoUrl: 'https://youtube.com/watch?v=jkl012',
-    duracaoAutomatica: true,
-    recursos: [],
-  },
-  {
-    id: 'a9',
-    codigo: 'A09',
-    titulo: 'Render Props vs HOC',
-    tipo: 'video',
-    duracao: 25,
-    descricaoPublica: 'Comparacao pratica',
-    descricaoPrivada: '',
-    sessaoId: 's3',
-    videoProvedor: 'vimeo',
-    videoUrl: 'https://vimeo.com/789012',
-    duracaoAutomatica: true,
-    recursos: [
-      {
-        id: 'r4',
-        nome: 'comparativo-patterns.pdf',
-        tamanho: '1.1 MB',
-        tipo: 'pdf',
-        publico: true,
-      },
-    ],
-  },
-  {
-    id: 'a10',
-    codigo: 'A10',
-    titulo: 'Exercicio: Refatorar componente',
-    tipo: 'exercicio',
-    duracao: 45,
-    descricaoPublica: 'Refatore um componente monolitico',
-    descricaoPrivada: 'Solucao no repo privado',
-    sessaoId: 's3',
-    recursos: [
-      {
-        id: 'r5',
-        nome: 'codigo-base.zip',
-        tamanho: '520 KB',
-        tipo: 'zip',
-        publico: true,
-      },
-      {
-        id: 'r6',
-        nome: 'solucao.zip',
-        tamanho: '580 KB',
-        tipo: 'zip',
-        publico: false,
-      },
-    ],
-  },
-  {
-    id: 'a11',
-    codigo: 'A11',
-    titulo: 'Context API a fundo',
-    tipo: 'video',
-    duracao: 30,
-    descricaoPublica: 'Context sem re-renders desnecessarios',
-    descricaoPrivada: '',
-    sessaoId: 's4',
-    videoProvedor: 'youtube',
-    videoUrl: 'https://youtube.com/watch?v=mno345',
-    duracaoAutomatica: true,
-    recursos: [],
-  },
-  {
-    id: 'a12',
-    codigo: 'A12',
-    titulo: 'Introducao ao Zustand',
-    tipo: 'video',
-    duracao: 20,
-    descricaoPublica: 'Store global leve',
-    descricaoPrivada: '',
-    sessaoId: 's4',
-    videoProvedor: 'youtube',
-    videoUrl: 'https://youtube.com/watch?v=pqr678',
-    duracaoAutomatica: true,
-    recursos: [],
-  },
-  {
-    id: 'a13',
-    codigo: 'A13',
-    titulo: 'Comparativo de solucoes',
-    tipo: 'post',
-    duracao: 12,
-    descricaoPublica: 'Tabela comparativa',
-    descricaoPrivada: '',
-    sessaoId: 's4',
-    conteudoPost:
-      '# Comparacao\n\n| Feature | Context | Zustand | Jotai |\n|---|---|---|---|\n| Bundle size | 0kb | 1kb | 2kb |',
-    recursos: [],
-  },
-  {
-    id: 'a14',
-    codigo: 'A14',
-    titulo: 'React Profiler',
-    tipo: 'video',
-    duracao: 18,
-    descricaoPublica: 'Identificando gargalos',
-    descricaoPrivada: '',
-    sessaoId: 's5',
-    videoProvedor: 'youtube',
-    videoUrl: 'https://youtube.com/watch?v=stu901',
-    duracaoAutomatica: false,
-    recursos: [],
-  },
-  {
-    id: 'a15',
-    codigo: 'A15',
-    titulo: 'Code Splitting com React.lazy',
-    tipo: 'video',
-    duracao: 22,
-    descricaoPublica: 'Lazy loading de componentes',
-    descricaoPrivada: '',
-    sessaoId: 's5',
-    videoProvedor: 'bunny',
-    videoUrl: 'https://stream.bunny.net/abc',
-    duracaoAutomatica: true,
-    recursos: [],
-  },
-  {
-    id: 'a16',
-    codigo: 'A16',
-    titulo: 'Projeto Final',
-    tipo: 'exercicio',
-    duracao: 90,
-    descricaoPublica: 'Aplicacao completa com todos os conceitos',
-    descricaoPrivada: 'Avaliar com rubrica',
-    sessaoId: 's5',
-    recursos: [
-      {
-        id: 'r7',
-        nome: 'rubrica-avaliacao.pdf',
-        tamanho: '320 KB',
-        tipo: 'pdf',
-        publico: false,
-      },
-      {
-        id: 'r8',
-        nome: 'template-projeto.zip',
-        tamanho: '1.2 MB',
-        tipo: 'zip',
-        publico: true,
-      },
-    ],
-  },
-];
-
-// ── Animations ──────────────────────────────────────────────────────────────
-
-const stagger: any = {
-  hidden: {},
-  show: { transition: { staggerChildren: 0.04 } },
-};
-const fadeUp: any = {
-  hidden: { opacity: 0, y: 12 },
-  show: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.3 },
-  },
-};
-
-// ═══════════════════════════════════════════════════════════════════════════
-// PAGE COMPONENT
-// ═══════════════════════════════════════════════════════════════════════════
-
-export default function EstruturaPage({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const { id } = use(params);
-  const courseId = Number(id);
-  const { request } = useApp();
-  const pathname = usePathname();
-  const t = useTranslations('lms.CoursesPage.StructurePage');
-
-  // ── States ──────────────────────────────────────────────────────────────
-  const [loading, setLoading] = useState(true);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-  // Data
-  const [sessoes, setSessoes] = useState<Sessao[]>([]);
-  const [aulas, setAulas] = useState<Aula[]>([]);
-
-  // Selection
-  const [selectedAulas, setSelectedAulas] = useState<Set<string>>(new Set());
-  const [lastSelectedAula, setLastSelectedAula] = useState<string | null>(null);
-
-  // DnD
-  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
-  const [activeSessaoId, setActiveSessaoId] = useState<string | null>(null);
-
-  // Sheets
-  const [sessaoSheetOpen, setSessaoSheetOpen] = useState(false);
-  const [aulaSheetOpen, setAulaSheetOpen] = useState(false);
-  const [editingSessao, setEditingSessao] = useState<Sessao | null>(null);
-  const [editingAula, setEditingAula] = useState<Aula | null>(null);
-  const [targetSessaoId, setTargetSessaoId] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [aulaSheetTab, setAulaSheetTab] = useState('dados');
-  const [autoSaveStatus, setAutoSaveStatus] = useState<
-    'idle' | 'saving' | 'saved' | 'error'
-  >('idle');
-  const [sessionAutoSaveStatus, setSessionAutoSaveStatus] = useState<
-    'idle' | 'saving' | 'saved' | 'error'
-  >('idle');
-
-  // Dialogs
-  const [deleteSessaoDialog, setDeleteSessaoDialog] = useState(false);
-  const [deleteAulaDialog, setDeleteAulaDialog] = useState(false);
-  const [sessaoToDelete, setSessaoToDelete] = useState<Sessao | null>(null);
-  const [aulaToDelete, setAulaToDelete] = useState<Aula | null>(null);
-  const [bulkDeleteDialog, setBulkDeleteDialog] = useState(false);
-
-  // Recursos management in sheet
-  const [sheetRecursos, setSheetRecursos] = useState<Recurso[]>([]);
-  const [sheetInstructorIds, setSheetInstructorIds] = useState<string[]>([]);
-  const [transcricaoFile, setTranscricaoFile] = useState<string | null>(null);
-  const [videoUploadFile, setVideoUploadFile] = useState<string | null>(null);
-  const [availableInstructors, setAvailableInstructors] = useState<
-    InstructorOption[]
-  >([]);
-  const videoUploadInputRef = useRef<HTMLInputElement | null>(null);
-
-  // Refs for shift-select
-  const aulasOrderRef = useRef<string[]>([]);
-  const autoSaveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const autoSaveBaselineRef = useRef<string>('');
-  const lastAutoSavedRef = useRef<string>('');
-  const sessionAutoSaveTimeoutRef = useRef<ReturnType<
-    typeof setTimeout
-  > | null>(null);
-  const sessionAutoSaveBaselineRef = useRef<string>('');
-  const lastSessionAutoSavedRef = useRef<string>('');
-
-  // Translation functions
-  const sessaoSchema = getSessaoSchema(t);
-  const aulaSchema = getAulaSchema(t);
-  const TIPO_AULA_MAP = getTipoAulaMap(t);
-  const PROVEDORES = getProvedores(t);
-  const MOCK_EXAMES = getMockExames(t);
-
-  // Forms
-  const sessaoForm = useForm<SessaoForm>({
-    resolver: zodResolver(sessaoSchema),
-    defaultValues: { codigo: '', titulo: '', duracao: 30 },
-  });
-
-  const aulaForm = useForm<AulaFormType>({
-    resolver: zodResolver(aulaSchema),
-    defaultValues: {
-      codigo: '',
-      titulo: '',
-      descricaoPublica: '',
-      descricaoPrivada: '',
-      tipo: 'video',
-      duracao: 10,
-      videoProvedor: 'youtube',
-      videoUrl: '',
-      duracaoAutomatica: false,
-      exameVinculado: '',
-      conteudoPost: '',
-    },
-  });
-
-  const watchTipo = aulaForm.watch('tipo');
-  const watchedSessaoValues = useWatch({
-    control: sessaoForm.control,
-  });
-  const watchedAulaValues = useWatch({
-    control: aulaForm.control,
-  });
-
-  const buildLessonPayload = useCallback(
-    (data: AulaFormType) => ({
-      ...data,
-      exameVinculado: data.exameVinculado
-        ? Number(data.exameVinculado)
-        : undefined,
-      recursos: sheetRecursos.map((recurso) => ({
-        nome: recurso.nome,
-        tipo: recurso.tipo,
-        publico: recurso.publico,
-      })),
-      instructorIds: sheetInstructorIds.map((value) => Number(value)),
-    }),
-    [sheetRecursos, sheetInstructorIds]
-  );
-
-  // DnD sensors
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  );
-
-  const loadStructure = useCallback(async () => {
-    setLoading(true);
-    try {
-      const { data } = await request<CourseStructureResponse>({
-        url: `/lms/courses/${courseId}/structure`,
-        method: 'GET',
-      });
-
-      setSessoes(data.sessoes ?? []);
-      setAulas(data.aulas ?? []);
-      setAvailableInstructors(data.instructors ?? []);
-    } catch {
-      toast.error(t('toasts.errorLoadingData'));
-      setSessoes([]);
-      setAulas([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [courseId, request, t]);
-
-  useEffect(() => {
-    loadStructure();
-  }, [loadStructure]);
-
-  // Keep a flat ordered list of aulas for shift-select
-  useEffect(() => {
-    const ordered: string[] = [];
-    sessoes.forEach((s) => {
-      aulas
-        .filter((a) => a.sessaoId === s.id)
-        .forEach((a) => ordered.push(a.id));
-    });
-    aulasOrderRef.current = ordered;
-  }, [sessoes, aulas]);
-
-  useEffect(() => {
-    return () => {
-      if (autoSaveTimeoutRef.current) {
-        clearTimeout(autoSaveTimeoutRef.current);
-      }
-
-      if (sessionAutoSaveTimeoutRef.current) {
-        clearTimeout(sessionAutoSaveTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // ── Helpers ─────────────────────────────────────────────────────────────
-
-  const getAulasBySessao = useCallback(
-    (sessaoId: string) => aulas.filter((a) => a.sessaoId === sessaoId),
-    [aulas]
-  );
-
-  const findSessaoOfAula = useCallback(
-    (aulaId: string) => aulas.find((a) => a.id === aulaId)?.sessaoId ?? null,
-    [aulas]
-  );
-
-  const mapSheetInstructors = useCallback((): AulaInstructor[] => {
-    return sheetInstructorIds.map((id, index) => ({
-      id,
-      role: index === 0 ? 'lead' : 'assistant',
-      nome: availableInstructors.find((item) => String(item.id) === id)?.name,
-    }));
-  }, [sheetInstructorIds, availableInstructors]);
-
-  function isSessaoId(uid: UniqueIdentifier): boolean {
-    return sessoes.some((s) => s.id === String(uid));
-  }
-
-  function isAulaId(uid: UniqueIdentifier): boolean {
-    return aulas.some((a) => a.id === String(uid));
-  }
-
-  function getNextCode(items: Array<{ codigo: string }>, prefix: 'S' | 'A') {
-    const regex = new RegExp(`^${prefix}(\\d+)$`, 'i');
-
-    const maxCodeNumber = items.reduce((maxValue, item) => {
-      const match = item.codigo?.trim().match(regex);
-      if (!match) return maxValue;
-
-      const numericCode = Number(match[1]);
-      if (!Number.isFinite(numericCode)) return maxValue;
-
-      return Math.max(maxValue, numericCode);
-    }, 0);
-
-    return `${prefix}${String(maxCodeNumber + 1).padStart(2, '0')}`;
-  }
-
-  // ── Multi-select ────────────────────────────────────────────────────────
-
-  function handleAulaClick(aulaId: string, e: React.MouseEvent) {
-    if (e.ctrlKey || e.metaKey) {
-      setSelectedAulas((prev) => {
-        const next = new Set(prev);
-        if (next.has(aulaId)) next.delete(aulaId);
-        else next.add(aulaId);
-        return next;
-      });
-      setLastSelectedAula(aulaId);
-    } else if (e.shiftKey && lastSelectedAula) {
-      const order = aulasOrderRef.current;
-      const startIdx = order.indexOf(lastSelectedAula);
-      const endIdx = order.indexOf(aulaId);
-      if (startIdx !== -1 && endIdx !== -1) {
-        const [from, to] =
-          startIdx < endIdx ? [startIdx, endIdx] : [endIdx, startIdx];
-        const range = order.slice(from, to + 1);
-        setSelectedAulas((prev) => {
-          const next = new Set(prev);
-          range.forEach((rid) => next.add(rid));
-          return next;
-        });
-      }
-    } else {
-      setSelectedAulas(new Set([aulaId]));
-      setLastSelectedAula(aulaId);
-    }
-  }
-
-  function clearSelection() {
-    setSelectedAulas(new Set());
-    setLastSelectedAula(null);
-  }
-
-  function selectAllInSessao(sessaoId: string) {
-    const ids = getAulasBySessao(sessaoId).map((a) => a.id);
-    setSelectedAulas((prev) => {
-      const next = new Set(prev);
-      ids.forEach((rid) => next.add(rid));
-      return next;
-    });
-  }
-
-  // ── DnD Handlers ────────────────────────────────────────────────────────
-
-  function handleDragStart(event: DragStartEvent) {
-    const { active } = event;
-    setActiveId(active.id);
-    setActiveSessaoId(isSessaoId(active.id) ? String(active.id) : null);
-  }
-
-  function handleDragOver(event: DragOverEvent) {
-    const { active, over } = event;
-    if (!over || !isAulaId(active.id)) return;
-
-    const activeIdStr = String(active.id);
-    const overIdStr = String(over.id);
-    const activeSessao = findSessaoOfAula(activeIdStr);
-    let overSessao: string | null = null;
-
-    if (isSessaoId(over.id)) overSessao = overIdStr;
-    else if (isAulaId(over.id)) overSessao = findSessaoOfAula(overIdStr);
-
-    if (!activeSessao || !overSessao || activeSessao === overSessao) return;
-
-    setAulas((prev) =>
-      prev.map((a) =>
-        a.id === activeIdStr ? { ...a, sessaoId: overSessao } : a
-      )
-    );
-  }
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-    setActiveId(null);
-    setActiveSessaoId(null);
-
-    if (!over || active.id === over.id) return;
-
-    const activeIdStr = String(active.id);
-    const overIdStr = String(over.id);
-
-    if (isSessaoId(active.id) && isSessaoId(over.id)) {
-      setSessoes((prev) => {
-        const oldIndex = prev.findIndex((s) => s.id === activeIdStr);
-        const newIndex = prev.findIndex((s) => s.id === overIdStr);
-        return arrayMove(prev, oldIndex, newIndex);
-      });
-      return;
-    }
-
-    if (isAulaId(active.id)) {
-      const activeSessao = findSessaoOfAula(activeIdStr);
-      let overSessao: string | null = null;
-      if (isSessaoId(over.id)) overSessao = overIdStr;
-      else if (isAulaId(over.id)) overSessao = findSessaoOfAula(overIdStr);
-
-      if (activeSessao && overSessao && activeSessao === overSessao) {
-        setAulas((prev) => {
-          const sessaoAulas = prev.filter((a) => a.sessaoId === activeSessao);
-          const others = prev.filter((a) => a.sessaoId !== activeSessao);
-          const oldIndex = sessaoAulas.findIndex((a) => a.id === activeIdStr);
-          const newIndex = isAulaId(over.id)
-            ? sessaoAulas.findIndex((a) => a.id === overIdStr)
-            : sessaoAulas.length;
-          return [...others, ...arrayMove(sessaoAulas, oldIndex, newIndex)];
-        });
-      }
-    }
-  }
-
-  function mergeSessao(sourceId: string, targetId: string) {
-    setAulas((prev) =>
-      prev.map((a) =>
-        a.sessaoId === sourceId ? { ...a, sessaoId: targetId } : a
-      )
-    );
-    setSessoes((prev) => prev.filter((s) => s.id !== sourceId));
-    toast.success(t('toasts.sessionsMerged'));
-  }
-
-  // ── CRUD: Sessao ──────────────────────────────────────────────────────
-
-  function openCreateSessao() {
-    setEditingSessao(null);
-    setSessionAutoSaveStatus('idle');
-    sessionAutoSaveBaselineRef.current = '';
-    lastSessionAutoSavedRef.current = '';
-    const nextSessionCode = getNextCode(sessoes, 'S');
-    sessaoForm.reset({ codigo: nextSessionCode, titulo: '', duracao: 30 });
-    setSessaoSheetOpen(true);
-  }
-
-  function openEditSessao(sessao: Sessao) {
-    if (sessionAutoSaveTimeoutRef.current) {
-      clearTimeout(sessionAutoSaveTimeoutRef.current);
-      sessionAutoSaveTimeoutRef.current = null;
-    }
-
-    setEditingSessao(sessao);
-    setSessionAutoSaveStatus('idle');
-    sessaoForm.reset({
-      codigo: sessao.codigo,
-      titulo: sessao.titulo,
-      duracao: sessao.duracao,
-    });
-
-    const initialPayload = {
-      codigo: sessao.codigo,
-      titulo: sessao.titulo,
-      duracao: sessao.duracao,
-    };
-
-    const initialKey = JSON.stringify(initialPayload);
-    sessionAutoSaveBaselineRef.current = initialKey;
-    lastSessionAutoSavedRef.current = initialKey;
-    setSessaoSheetOpen(true);
-  }
-
-  useEffect(() => {
-    if (!sessaoSheetOpen || !editingSessao) return;
-
-    const parsed = sessaoSchema.safeParse(watchedSessaoValues);
-    if (!parsed.success) return;
-
-    const values = parsed.data;
-
-    setSessoes((prev) => {
-      let changed = false;
-
-      const next = prev.map((item) => {
-        if (item.id !== editingSessao.id) return item;
-
-        const nextItem: Sessao = {
-          ...item,
-          codigo: values.codigo,
-          titulo: values.titulo,
-          duracao: values.duracao,
-        };
-
-        const isEqual =
-          item.codigo === nextItem.codigo &&
-          item.titulo === nextItem.titulo &&
-          item.duracao === nextItem.duracao;
-
-        if (isEqual) return item;
-
-        changed = true;
-        return nextItem;
-      });
-
-      return changed ? next : prev;
-    });
-  }, [editingSessao, sessaoSchema, sessaoSheetOpen, watchedSessaoValues]);
-
-  useEffect(() => {
-    if (!sessaoSheetOpen || !editingSessao) return;
-
-    const parsed = sessaoSchema.safeParse(watchedSessaoValues);
-    if (!parsed.success) {
-      setSessionAutoSaveStatus('idle');
-      return;
-    }
-
-    const payload = parsed.data;
-    const payloadKey = JSON.stringify(payload);
-
-    if (
-      payloadKey === sessionAutoSaveBaselineRef.current ||
-      payloadKey === lastSessionAutoSavedRef.current
-    ) {
-      return;
-    }
-
-    if (sessionAutoSaveTimeoutRef.current) {
-      clearTimeout(sessionAutoSaveTimeoutRef.current);
-    }
-
-    sessionAutoSaveTimeoutRef.current = setTimeout(async () => {
-      try {
-        setSessionAutoSaveStatus('saving');
-        await request({
-          url: `/lms/courses/${courseId}/structure/sessions/${Number(editingSessao.id)}`,
-          method: 'PATCH',
-          data: payload,
-        });
-        lastSessionAutoSavedRef.current = payloadKey;
-        setSessionAutoSaveStatus('saved');
-      } catch {
-        setSessionAutoSaveStatus('error');
-        toast.error(t('toasts.sessionAutoSaveFailed'));
-      }
-    }, 800);
-
-    return () => {
-      if (sessionAutoSaveTimeoutRef.current) {
-        clearTimeout(sessionAutoSaveTimeoutRef.current);
-      }
-    };
-  }, [
-    courseId,
-    editingSessao,
-    request,
-    sessaoSchema,
-    sessaoSheetOpen,
-    t,
-    watchedSessaoValues,
-  ]);
-
-  async function onSubmitSessao(data: SessaoForm) {
-    setSaving(true);
-    try {
-      if (editingSessao) {
-        await request({
-          url: `/lms/courses/${courseId}/structure/sessions/${Number(editingSessao.id)}`,
-          method: 'PATCH',
-          data,
-        });
-        lastSessionAutoSavedRef.current = JSON.stringify(data);
-        setSessionAutoSaveStatus('saved');
-        toast.success(t('toasts.sessionUpdated'));
-      } else {
-        await request({
-          url: `/lms/courses/${courseId}/structure/sessions`,
-          method: 'POST',
-          data,
-        });
-        toast.success(t('toasts.sessionCreated'));
-      }
-
-      await loadStructure();
-      setSessaoSheetOpen(false);
-      setSessionAutoSaveStatus('idle');
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  async function confirmDeleteSessao() {
-    if (sessaoToDelete) {
-      await request({
-        url: `/lms/courses/${courseId}/structure/sessions/${Number(sessaoToDelete.id)}`,
-        method: 'DELETE',
-      });
-
-      await loadStructure();
-      toast.success(t('toasts.sessionDeleted'));
-      setSelectedAulas(new Set());
-      setSessaoToDelete(null);
-      setDeleteSessaoDialog(false);
-    }
-  }
-
-  // ── CRUD: Aula ────────────────────────────────────────────────────────
-
-  function openCreateAula(sessaoId: string) {
-    setEditingAula(null);
-    setTargetSessaoId(sessaoId);
-    setAulaSheetTab('dados');
-    setAutoSaveStatus('idle');
-    autoSaveBaselineRef.current = '';
-    lastAutoSavedRef.current = '';
-    setSheetRecursos([]);
-    setSheetInstructorIds([]);
-    setTranscricaoFile(null);
-    setVideoUploadFile(null);
-    const nextLessonCode = getNextCode(getAulasBySessao(sessaoId), 'A');
-    aulaForm.reset({
-      codigo: nextLessonCode,
-      titulo: '',
-      descricaoPublica: '',
-      descricaoPrivada: '',
-      tipo: 'video',
-      duracao: 10,
-      videoProvedor: 'youtube',
-      videoUrl: '',
-      duracaoAutomatica: false,
-      exameVinculado: '',
-      conteudoPost: '',
-    });
-    setAulaSheetOpen(true);
-  }
-
-  function openEditAula(aula: Aula) {
-    if (autoSaveTimeoutRef.current) {
-      clearTimeout(autoSaveTimeoutRef.current);
-      autoSaveTimeoutRef.current = null;
-    }
-
-    setEditingAula(aula);
-    setTargetSessaoId(aula.sessaoId);
-    setAulaSheetTab('dados');
-    setAutoSaveStatus('idle');
-    setSheetRecursos([...aula.recursos]);
-    setSheetInstructorIds((aula.instrutores ?? []).map((item) => item.id));
-    setTranscricaoFile(aula.transcricao ? 'transcricao.txt' : null);
-    setVideoUploadFile(null);
-    aulaForm.reset({
-      codigo: aula.codigo,
-      titulo: aula.titulo,
-      descricaoPublica: aula.descricaoPublica,
-      descricaoPrivada: aula.descricaoPrivada,
-      tipo: aula.tipo,
-      duracao: aula.duracao,
-      videoProvedor: aula.videoProvedor ?? 'youtube',
-      videoUrl: aula.videoUrl ?? '',
-      duracaoAutomatica: aula.duracaoAutomatica ?? false,
-      exameVinculado: aula.exameVinculado ?? '',
-      conteudoPost: aula.conteudoPost ?? '',
-    });
-
-    const initialPayload = {
-      codigo: aula.codigo,
-      titulo: aula.titulo,
-      descricaoPublica: aula.descricaoPublica,
-      descricaoPrivada: aula.descricaoPrivada,
-      tipo: aula.tipo,
-      duracao: aula.duracao,
-      videoProvedor: aula.videoProvedor ?? 'youtube',
-      videoUrl: aula.videoUrl ?? '',
-      duracaoAutomatica: aula.duracaoAutomatica ?? false,
-      exameVinculado: aula.exameVinculado
-        ? Number(aula.exameVinculado)
-        : undefined,
-      conteudoPost: aula.conteudoPost ?? '',
-      recursos: aula.recursos.map((recurso) => ({
-        nome: recurso.nome,
-        tipo: recurso.tipo,
-        publico: recurso.publico,
-      })),
-      instructorIds: (aula.instrutores ?? []).map((item) => Number(item.id)),
-    };
-
-    const initialKey = JSON.stringify(initialPayload);
-    autoSaveBaselineRef.current = initialKey;
-    lastAutoSavedRef.current = initialKey;
-    setAulaSheetOpen(true);
-  }
-
-  useEffect(() => {
-    if (!aulaSheetOpen || !editingAula) return;
-
-    const parsed = aulaSchema.safeParse(watchedAulaValues);
-    if (!parsed.success) return;
-
-    const values = parsed.data;
-    const mappedInstructors = mapSheetInstructors();
-
-    setAulas((prev) => {
-      let changed = false;
-
-      const next = prev.map((item) => {
-        if (item.id !== editingAula.id) return item;
-
-        const nextItem: Aula = {
-          ...item,
-          codigo: values.codigo,
-          titulo: values.titulo,
-          descricaoPublica: values.descricaoPublica,
-          descricaoPrivada: values.descricaoPrivada,
-          tipo: values.tipo,
-          duracao: values.duracao,
-          videoProvedor: values.videoProvedor as VideoProvider | undefined,
-          videoUrl: values.videoUrl,
-          duracaoAutomatica: values.duracaoAutomatica,
-          exameVinculado: values.exameVinculado,
-          conteudoPost: values.conteudoPost,
-          recursos: sheetRecursos,
-          instrutores: mappedInstructors,
-        };
-
-        const isEqual =
-          item.codigo === nextItem.codigo &&
-          item.titulo === nextItem.titulo &&
-          item.descricaoPublica === nextItem.descricaoPublica &&
-          item.descricaoPrivada === nextItem.descricaoPrivada &&
-          item.tipo === nextItem.tipo &&
-          item.duracao === nextItem.duracao &&
-          item.videoProvedor === nextItem.videoProvedor &&
-          item.videoUrl === nextItem.videoUrl &&
-          item.duracaoAutomatica === nextItem.duracaoAutomatica &&
-          item.exameVinculado === nextItem.exameVinculado &&
-          item.conteudoPost === nextItem.conteudoPost &&
-          JSON.stringify(item.recursos) === JSON.stringify(nextItem.recursos) &&
-          JSON.stringify(item.instrutores ?? []) ===
-            JSON.stringify(nextItem.instrutores ?? []);
-
-        if (isEqual) return item;
-
-        changed = true;
-        return nextItem;
-      });
-
-      return changed ? next : prev;
-    });
-  }, [
-    aulaSchema,
-    aulaSheetOpen,
-    editingAula,
-    mapSheetInstructors,
-    sheetRecursos,
-    watchedAulaValues,
-  ]);
-
-  useEffect(() => {
-    if (!aulaSheetOpen || !editingAula) return;
-
-    const parsed = aulaSchema.safeParse(watchedAulaValues);
-    if (!parsed.success) {
-      setAutoSaveStatus('idle');
-      return;
-    }
-
-    const payload = buildLessonPayload(parsed.data);
-    const payloadKey = JSON.stringify(payload);
-
-    if (
-      payloadKey === autoSaveBaselineRef.current ||
-      payloadKey === lastAutoSavedRef.current
-    ) {
-      return;
-    }
-
-    if (autoSaveTimeoutRef.current) {
-      clearTimeout(autoSaveTimeoutRef.current);
-    }
-
-    autoSaveTimeoutRef.current = setTimeout(async () => {
-      try {
-        setAutoSaveStatus('saving');
-        await request({
-          url: `/lms/courses/${courseId}/structure/sessions/${Number(editingAula.sessaoId)}/lessons/${Number(editingAula.id)}`,
-          method: 'PATCH',
-          data: payload,
-        });
-        lastAutoSavedRef.current = payloadKey;
-        setAutoSaveStatus('saved');
-      } catch {
-        setAutoSaveStatus('error');
-        toast.error(t('toasts.autoSaveFailed'));
-      }
-    }, 800);
-
-    return () => {
-      if (autoSaveTimeoutRef.current) {
-        clearTimeout(autoSaveTimeoutRef.current);
-      }
-    };
-  }, [
-    aulaSchema,
-    aulaSheetOpen,
-    buildLessonPayload,
-    courseId,
-    editingAula,
-    request,
-    t,
-    watchedAulaValues,
-  ]);
-
-  async function onSubmitAula(data: AulaFormType) {
-    setSaving(true);
-    const payload = buildLessonPayload(data);
-
-    try {
-      if (editingAula) {
-        await request({
-          url: `/lms/courses/${courseId}/structure/sessions/${Number(editingAula.sessaoId)}/lessons/${Number(editingAula.id)}`,
-          method: 'PATCH',
-          data: payload,
-        });
-        lastAutoSavedRef.current = JSON.stringify(payload);
-        setAutoSaveStatus('saved');
-        toast.success(t('toasts.lessonUpdated'));
-      } else {
-        await request({
-          url: `/lms/courses/${courseId}/structure/sessions/${Number(targetSessaoId)}/lessons`,
-          method: 'POST',
-          data: payload,
-        });
-        toast.success(t('toasts.lessonCreated'));
-      }
-
-      await loadStructure();
-      setAulaSheetOpen(false);
-      setAutoSaveStatus('idle');
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  async function confirmDeleteAula() {
-    if (aulaToDelete) {
-      await request({
-        url: `/lms/courses/${courseId}/structure/sessions/${Number(aulaToDelete.sessaoId)}/lessons/${Number(aulaToDelete.id)}`,
-        method: 'DELETE',
-      });
-
-      await loadStructure();
-      toast.success(t('toasts.lessonDeleted'));
-      setSelectedAulas(new Set());
-      setAulaToDelete(null);
-      setDeleteAulaDialog(false);
-    }
-  }
-
-  // ── Recursos helpers ──────────────────────────────────────────────────
-
-  function addRecurso() {
-    const newRecurso: Recurso = {
-      id: `r-${Date.now()}`,
-      nome: `arquivo-${sheetRecursos.length + 1}.pdf`,
-      tamanho: `${(Math.random() * 5 + 0.1).toFixed(1)} MB`,
-      tipo: 'pdf',
-      publico: true,
-    };
-    setSheetRecursos((prev) => [...prev, newRecurso]);
-    toast.success(t('toasts.resourceAdded'));
-  }
-
-  function toggleRecursoVisibilidade(recursoId: string) {
-    setSheetRecursos((prev) =>
-      prev.map((r) => (r.id === recursoId ? { ...r, publico: !r.publico } : r))
-    );
-  }
-
-  function removeRecurso(recursoId: string) {
-    const removed = sheetRecursos.find((r) => r.id === recursoId);
-
-    if (removed && videoUploadFile === removed.nome) {
-      setVideoUploadFile(null);
-    }
-
-    setSheetRecursos((prev) => prev.filter((r) => r.id !== recursoId));
-    toast.success(t('toasts.resourceRemoved'));
-  }
-
-  function clearVideoUpload() {
-    if (videoUploadFile) {
-      setSheetRecursos((prev) =>
-        prev.filter((resource) => resource.nome !== videoUploadFile)
-      );
-    }
-
-    setVideoUploadFile(null);
-    toast.success(t('toasts.resourceRemoved'));
-  }
-
-  // ── Bulk operations ───────────────────────────────────────────────────
-
-  function confirmBulkDelete() {
-    setAulas((prev) => prev.filter((a) => !selectedAulas.has(a.id)));
-    toast.success(t('toasts.lessonsDeleted', { count: selectedAulas.size }));
-    setSelectedAulas(new Set());
-    setLastSelectedAula(null);
-    setBulkDeleteDialog(false);
-  }
-
-  function bulkMoveToSessao(target: string) {
-    setAulas((prev) =>
-      prev.map((a) =>
-        selectedAulas.has(a.id) ? { ...a, sessaoId: target } : a
-      )
-    );
-    toast.success(t('toasts.lessonsMoved', { count: selectedAulas.size }));
-    setSelectedAulas(new Set());
-  }
-
-  function bulkDuplicate() {
-    const newAulas: Aula[] = [];
-    aulas.forEach((a) => {
-      if (selectedAulas.has(a.id)) {
-        newAulas.push({
-          ...a,
-          id: `a-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
-          titulo: `${a.titulo} (copia)`,
-          codigo: `${a.codigo}-C`,
-          recursos: a.recursos.map((r) => ({
-            ...r,
-            id: `r-${Date.now()}-${Math.random().toString(36).slice(2, 4)}`,
-          })),
-        });
-      }
-    });
-    setAulas((prev) => [...prev, ...newAulas]);
-    toast.success(t('toasts.lessonsDuplicated', { count: newAulas.length }));
-    setSelectedAulas(new Set());
-  }
-
-  // ── Toggle collapse ───────────────────────────────────────────────────
-
-  function toggleCollapse(sessaoId: string) {
-    setSessoes((prev) =>
-      prev.map((s) =>
-        s.id === sessaoId ? { ...s, collapsed: !s.collapsed } : s
-      )
-    );
-  }
-
-  // ── Stats ─────────────────────────────────────────────────────────────
-
-  const totalAulas = aulas.length;
-  const totalDuracao = aulas.reduce((sum, a) => sum + a.duracao, 0);
-  const totalHoras = Math.floor(totalDuracao / 60);
-  const totalMin = totalDuracao % 60;
-
-  // ── Active drag items ─────────────────────────────────────────────────
-
-  const activeAula = activeId
-    ? aulas.find((a) => a.id === String(activeId))
-    : null;
-  const activeSessaoItem = activeId
-    ? sessoes.find((s) => s.id === String(activeId))
-    : null;
-
-  const { locales } = useApp();
-
-  const handleNewOrder = (): void => {
-    const nextLocaleData: Record<string, { name: string }> = {};
-    locales.forEach((locale: Locale) => {
-      nextLocaleData[locale.code] = {
-        name: '',
-      };
-    });
-    void nextLocaleData;
-    toast.success(t('toasts.structureSaved'));
-  };
-
-  const handleNewSection = (): void => {
-    const nextLocaleData: Record<string, { name: string }> = {};
-    locales.forEach((locale: Locale) => {
-      nextLocaleData[locale.code] = {
-        name: '',
-      };
-    });
-    void nextLocaleData;
-
-    openCreateSessao();
-  };
-
-  // ── Render ────────────────────────────────────────────────────────────
-
-  return (
-    <Page>
-      {/* ── Header ─────────────────────────────────────────────────────────── */}
-      <PageHeader
-        title={t('pageHeader.title')}
-        description={t('pageHeader.description', {
-          sessions: sessoes.length,
-          lessons: totalAulas,
-          hours: totalHoras,
-          minutes: totalMin,
-        })}
-        breadcrumbs={[
-          {
-            label: t('breadcrumbs.home'),
-            href: '/',
-          },
-          {
-            label: t('breadcrumbs.courses'),
-            href: '/lms/courses',
-          },
-          {
-            label: t('breadcrumbs.structure'),
-          },
-        ]}
-        actions={[
-          {
-            label: t('actions.saveOrder'),
-            icon: <Save className="size-4" />,
-            onClick: () => handleNewOrder(),
-            variant: 'default',
-          },
-          {
-            label: t('actions.newSession'),
-            icon: <Plus className="size-4" />,
-            onClick: () => handleNewSection(),
-            variant: 'default',
-          },
-        ]}
-      />
-
-      {/* ── Main ───────────────────────────────────────────────────────────── */}
-      <div>
-        {loading ? (
-          <LoadingSkeleton />
-        ) : (
-          <motion.div initial="hidden" animate="show" variants={stagger}>
-            {/* Selection bar */}
-            <AnimatePresence>
-              {selectedAulas.size > 0 && (
-                <motion.div
-                  initial={{ opacity: 0, y: -8 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -8 }}
-                  transition={{ duration: 0.2 }}
-                  className="mb-4"
-                >
-                  <Card className="border-foreground/20 bg-muted/50">
-                    <CardContent className="flex flex-wrap items-center gap-3 p-3">
-                      <span className="text-sm font-medium">
-                        {t('selection.lessonsSelected', {
-                          count: selectedAulas.size,
-                        })}
-                      </span>
-                      <Separator orientation="vertical" className="h-5" />
-                      <Select onValueChange={(val) => bulkMoveToSessao(val)}>
-                        <SelectTrigger className="h-8 w-auto gap-2 text-xs">
-                          <SelectValue placeholder={t('selection.moveTo')} />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {sessoes.map((s) => (
-                            <SelectItem
-                              key={s.id}
-                              value={s.id}
-                              className="text-xs"
-                            >
-                              {s.titulo}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-8 gap-1.5 text-xs"
-                        onClick={bulkDuplicate}
-                      >
-                        <Copy className="size-3.5" />
-                        {t('selection.duplicate')}
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-8 gap-1.5 text-xs text-destructive hover:text-destructive"
-                        onClick={() => setBulkDeleteDialog(true)}
-                      >
-                        <Trash2 className="size-3.5" />
-                        {t('selection.delete')}
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="ml-auto h-8 text-xs"
-                        onClick={clearSelection}
-                      >
-                        {t('selection.clear')}
-                      </Button>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-              )}
-            </AnimatePresence>
-
-            <motion.p
-              variants={fadeUp}
-              className="mb-4 text-xs text-muted-foreground"
-            >
-              {t('instructions.dragToReorder')}
-            </motion.p>
-
-            {/* ── DnD Area ─────────────────────────────────────────────────────── */}
-            <motion.div variants={fadeUp}>
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCorners}
-                onDragStart={handleDragStart}
-                onDragOver={handleDragOver}
-                onDragEnd={handleDragEnd}
-              >
-                <SortableContext
-                  items={sessoes.map((s) => s.id)}
-                  strategy={verticalListSortingStrategy}
-                >
-                  <div className="flex flex-col gap-4">
-                    {sessoes.map((sessao, sIndex) => {
-                      const sessaoAulas = getAulasBySessao(sessao.id);
-                      return (
-                        <SortableSessao
-                          key={sessao.id}
-                          sessao={sessao}
-                          index={sIndex}
-                          aulas={sessaoAulas}
-                          allSessoes={sessoes}
-                          selectedAulas={selectedAulas}
-                          tipoAulaMap={TIPO_AULA_MAP}
-                          t={t}
-                          onToggleCollapse={() => toggleCollapse(sessao.id)}
-                          onEditSessao={() => openEditSessao(sessao)}
-                          onDeleteSessao={() => {
-                            setSessaoToDelete(sessao);
-                            setDeleteSessaoDialog(true);
-                          }}
-                          onMergeSessao={(targetIdVal) =>
-                            mergeSessao(sessao.id, targetIdVal)
-                          }
-                          onCreateAula={() => openCreateAula(sessao.id)}
-                          onEditAula={openEditAula}
-                          onDeleteAula={(aula) => {
-                            setAulaToDelete(aula);
-                            setDeleteAulaDialog(true);
-                          }}
-                          onAulaClick={handleAulaClick}
-                          onSelectAllInSessao={() =>
-                            selectAllInSessao(sessao.id)
-                          }
-                        />
-                      );
-                    })}
-                  </div>
-                </SortableContext>
-
-                <DragOverlay>
-                  {activeAula && (
-                    <div className="rounded-lg border bg-background p-3 shadow-lg opacity-90">
-                      <div className="flex items-center gap-2">
-                        <GripVertical className="size-4 text-muted-foreground" />
-                        <div
-                          className={`flex size-6 items-center justify-center rounded ${TIPO_AULA_MAP[activeAula.tipo].color}`}
-                        >
-                          {(() => {
-                            const Icon = TIPO_AULA_MAP[activeAula.tipo].icon;
-                            return <Icon className="size-3.5" />;
-                          })()}
-                        </div>
-                        <span className="text-sm font-medium">
-                          {activeAula.titulo}
-                        </span>
-                        {selectedAulas.size > 1 &&
-                          selectedAulas.has(activeAula.id) && (
-                            <Badge
-                              variant="secondary"
-                              className="ml-auto text-xs"
-                            >
-                              +{selectedAulas.size - 1}
-                            </Badge>
-                          )}
-                      </div>
-                    </div>
-                  )}
-                  {activeSessaoItem && (
-                    <div className="rounded-xl border bg-background p-4 shadow-lg opacity-90">
-                      <div className="flex items-center gap-2">
-                        <GripVertical className="size-4 text-muted-foreground" />
-                        <FolderOpen className="size-4 text-muted-foreground" />
-                        <span className="font-semibold">
-                          {activeSessaoItem.titulo}
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                </DragOverlay>
-              </DndContext>
-            </motion.div>
-
-            {/* Empty state */}
-            {sessoes.length === 0 && (
-              <motion.div variants={fadeUp} className="mt-8">
-                <EmptyState
-                  icon={<Layers className="h-12 w-12" />}
-                  title={t('empty.title')}
-                  description={t('empty.description')}
-                  actionLabel={t('empty.action')}
-                  actionIcon={<Plus className="size-4" />}
-                  onAction={openCreateSessao}
-                  className="py-16"
-                />
-              </motion.div>
-            )}
-          </motion.div>
-        )}
-      </div>
-
-      {/* ═══════════════════════════════════════════════════════════════════════
-          SHEET: SESSAO
-      ═══════════════════════════════════════════════════════════════════════ */}
-      <Sheet open={sessaoSheetOpen} onOpenChange={setSessaoSheetOpen}>
-        <SheetContent
-          side="right"
-          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
-        >
-          <SheetHeader>
-            <SheetTitle>
-              {editingSessao
-                ? t('sessionForm.titleEdit')
-                : t('sessionForm.titleCreate')}
-            </SheetTitle>
-            <SheetDescription>
-              {editingSessao
-                ? t('sessionForm.descriptionEdit')
-                : t('sessionForm.descriptionCreate')}
-            </SheetDescription>
-          </SheetHeader>
-          <form
-            onSubmit={sessaoForm.handleSubmit(onSubmitSessao)}
-            className="flex flex-1 flex-col gap-5 py-4 px-4"
-          >
-            <Field data-invalid={!!sessaoForm.formState.errors.codigo}>
-              <FieldLabel htmlFor="sessao-codigo">
-                {t('sessionForm.code')}
-              </FieldLabel>
-              <Input
-                id="sessao-codigo"
-                placeholder={t('sessionForm.codePlaceholder')}
-                {...sessaoForm.register('codigo')}
-              />
-              <FieldDescription>
-                {t('sessionForm.codeDescription')}
-              </FieldDescription>
-              {sessaoForm.formState.errors.codigo && (
-                <FieldError>
-                  {sessaoForm.formState.errors.codigo.message}
-                </FieldError>
-              )}
-            </Field>
-
-            <Field data-invalid={!!sessaoForm.formState.errors.titulo}>
-              <FieldLabel htmlFor="sessao-titulo">
-                {t('sessionForm.title')}
-              </FieldLabel>
-              <Input
-                id="sessao-titulo"
-                placeholder={t('sessionForm.titlePlaceholder')}
-                {...sessaoForm.register('titulo')}
-              />
-              {sessaoForm.formState.errors.titulo && (
-                <FieldError>
-                  {sessaoForm.formState.errors.titulo.message}
-                </FieldError>
-              )}
-            </Field>
-
-            <Field data-invalid={!!sessaoForm.formState.errors.duracao}>
-              <FieldLabel htmlFor="sessao-duracao">
-                {t('sessionForm.duration')}
-              </FieldLabel>
-              <Input
-                id="sessao-duracao"
-                type="number"
-                min={1}
-                {...sessaoForm.register('duracao')}
-              />
-              <FieldDescription>
-                {t('sessionForm.durationDescription')}
-              </FieldDescription>
-              {sessaoForm.formState.errors.duracao && (
-                <FieldError>
-                  {sessaoForm.formState.errors.duracao.message}
-                </FieldError>
-              )}
-            </Field>
-
-            <SheetFooter className="mt-auto p-0">
-              {editingSessao && (
-                <span className="mr-auto text-xs text-muted-foreground">
-                  {sessionAutoSaveStatus === 'saving' &&
-                    t('sessionForm.autoSaveSaving')}
-                  {sessionAutoSaveStatus === 'saved' &&
-                    t('sessionForm.autoSaveSaved')}
-                  {sessionAutoSaveStatus === 'error' &&
-                    t('sessionForm.autoSaveError')}
-                </span>
-              )}
-              <Button type="submit" disabled={saving} className="gap-2">
-                {saving && <Loader2 className="size-4 animate-spin" />}
-                {editingSessao
-                  ? t('sessionForm.update')
-                  : t('sessionForm.create')}
-              </Button>
-            </SheetFooter>
-          </form>
-        </SheetContent>
-      </Sheet>
-
-      {/* ═══════════════════════════════════════════════════════════════════════
-          SHEET: AULA (com abas)
-      ═══════════════════════════════════════════════════════════════════════ */}
-      <Sheet open={aulaSheetOpen} onOpenChange={setAulaSheetOpen}>
-        <SheetContent className="flex flex-col overflow-y-auto sm:max-w-lg">
-          <SheetHeader>
-            <SheetTitle>
-              {editingAula
-                ? t('lessonForm.titleEdit')
-                : t('lessonForm.titleCreate')}
-            </SheetTitle>
-            <SheetDescription>
-              {editingAula
-                ? t('lessonForm.descriptionEdit')
-                : t('lessonForm.descriptionCreate')}
-            </SheetDescription>
-          </SheetHeader>
-
-          <Tabs
-            value={aulaSheetTab}
-            onValueChange={setAulaSheetTab}
-            className="flex flex-1 flex-col px-4"
-          >
-            <TabsList className="grid w-full grid-cols-3">
-              <TabsTrigger value="dados" className="text-xs">
-                {t('lessonForm.tabs.data')}
-              </TabsTrigger>
-              <TabsTrigger value="transcricao" className="text-xs">
-                {t('lessonForm.tabs.transcription')}
-              </TabsTrigger>
-              <TabsTrigger value="recursos" className="text-xs">
-                {t('lessonForm.tabs.resources')}
-              </TabsTrigger>
-            </TabsList>
-
-            {/* ── Tab: Dados ─────────────────────────────────────── */}
-            <TabsContent value="dados" className="flex-1 mt-0">
-              <form
-                id="aula-form"
-                onSubmit={aulaForm.handleSubmit(onSubmitAula)}
-                className="flex flex-col gap-4 py-4"
-              >
-                <div className="grid grid-cols-2 gap-4">
-                  <Field data-invalid={!!aulaForm.formState.errors.codigo}>
-                    <FieldLabel htmlFor="aula-codigo">
-                      {t('lessonForm.code')}
-                    </FieldLabel>
-                    <Input
-                      id="aula-codigo"
-                      placeholder={t('lessonForm.codePlaceholder')}
-                      {...aulaForm.register('codigo')}
-                    />
-                    {aulaForm.formState.errors.codigo && (
-                      <FieldError>
-                        {aulaForm.formState.errors.codigo.message}
-                      </FieldError>
-                    )}
-                  </Field>
-                  <Field data-invalid={!!aulaForm.formState.errors.duracao}>
-                    <FieldLabel htmlFor="aula-duracao">
-                      {t('lessonForm.duration')}
-                    </FieldLabel>
-                    <Input
-                      id="aula-duracao"
-                      type="number"
-                      min={1}
-                      {...aulaForm.register('duracao')}
-                    />
-                    {aulaForm.formState.errors.duracao && (
-                      <FieldError>
-                        {aulaForm.formState.errors.duracao.message}
-                      </FieldError>
-                    )}
-                  </Field>
-                </div>
-
-                <Field data-invalid={!!aulaForm.formState.errors.titulo}>
-                  <FieldLabel htmlFor="aula-titulo">
-                    {t('lessonForm.title')}
-                  </FieldLabel>
-                  <Input
-                    id="aula-titulo"
-                    placeholder={t('lessonForm.titlePlaceholder')}
-                    {...aulaForm.register('titulo')}
-                  />
-                  {aulaForm.formState.errors.titulo && (
-                    <FieldError>
-                      {aulaForm.formState.errors.titulo.message}
-                    </FieldError>
-                  )}
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="aula-desc-pub">
-                    {t('lessonForm.publicDescription')}
-                  </FieldLabel>
-                  <Textarea
-                    id="aula-desc-pub"
-                    placeholder={t('lessonForm.publicDescriptionPlaceholder')}
-                    rows={2}
-                    {...aulaForm.register('descricaoPublica')}
-                  />
-                  <FieldDescription>
-                    {t('lessonForm.publicDescriptionHelp')}
-                  </FieldDescription>
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="aula-desc-priv">
-                    {t('lessonForm.privateDescription')}
-                  </FieldLabel>
-                  <Textarea
-                    id="aula-desc-priv"
-                    placeholder={t('lessonForm.privateDescriptionPlaceholder')}
-                    rows={2}
-                    {...aulaForm.register('descricaoPrivada')}
-                  />
-                  <FieldDescription>
-                    {t('lessonForm.privateDescriptionHelp')}
-                  </FieldDescription>
-                </Field>
-
-                <Field data-invalid={!!aulaForm.formState.errors.tipo}>
-                  <FieldLabel>{t('lessonForm.type')}</FieldLabel>
-                  <Controller
-                    name="tipo"
-                    control={aulaForm.control}
-                    render={({ field }) => (
-                      <Select
-                        value={field.value}
-                        onValueChange={field.onChange}
-                      >
-                        <SelectTrigger>
-                          <SelectValue
-                            placeholder={t('lessonForm.typePlaceholder')}
-                          />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {(
-                            Object.entries(TIPO_AULA_MAP) as [
-                              AulaTipo,
-                              (typeof TIPO_AULA_MAP)[AulaTipo],
-                            ][]
-                          ).map(([key, val]) => (
-                            <SelectItem key={key} value={key}>
-                              <span className="flex items-center gap-2">
-                                <val.icon className="size-3.5" />
-                                {val.label}
-                              </span>
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    )}
-                  />
-                  {aulaForm.formState.errors.tipo && (
-                    <FieldError>
-                      {aulaForm.formState.errors.tipo.message}
-                    </FieldError>
-                  )}
-                </Field>
-
-                <Field>
-                  <FieldLabel>{t('lessonForm.lessonInstructors')}</FieldLabel>
-                  {availableInstructors.length === 0 ? (
-                    <FieldDescription>
-                      {t('lessonForm.noInstructors')}
-                    </FieldDescription>
-                  ) : (
-                    <div className="grid grid-cols-1 gap-2 rounded-lg border bg-muted/20 p-3 sm:grid-cols-2">
-                      {availableInstructors.map((instructor) => {
-                        const selected = sheetInstructorIds.includes(
-                          String(instructor.id)
-                        );
-
-                        return (
-                          <label
-                            key={instructor.id}
-                            className="flex cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2"
-                          >
-                            <Switch
-                              checked={selected}
-                              onCheckedChange={(checked) => {
-                                setSheetInstructorIds((prev) => {
-                                  const idValue = String(instructor.id);
-                                  if (checked) {
-                                    if (prev.includes(idValue)) return prev;
-                                    return [...prev, idValue];
-                                  }
-
-                                  return prev.filter(
-                                    (value) => value !== idValue
-                                  );
-                                });
-                              }}
-                            />
-                            <span className="text-sm">{instructor.name}</span>
-                          </label>
-                        );
-                      })}
-                    </div>
-                  )}
-                  <FieldDescription>
-                    {t('lessonForm.leadInstructorHint')}
-                  </FieldDescription>
-                </Field>
-
-                {/* ── Conditional: VIDEO ──────────────────────────── */}
-                <AnimatePresence mode="wait">
-                  {watchTipo === 'video' && (
-                    <motion.div
-                      key="video-fields"
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: 'auto' }}
-                      exit={{ opacity: 0, height: 0 }}
-                      transition={{ duration: 0.2 }}
-                      className="overflow-hidden"
-                    >
-                      <div className="flex flex-col gap-4 rounded-lg border bg-muted/30 p-4">
-                        <div className="flex items-center gap-2">
-                          <Video className="size-4 text-blue-600" />
-                          <span className="text-sm font-medium">
-                            {t('lessonForm.videoConfig')}
-                          </span>
-                        </div>
-
-                        <Field>
-                          <FieldLabel>{t('lessonForm.provider')}</FieldLabel>
-                          <Controller
-                            name="videoProvedor"
-                            control={aulaForm.control}
-                            render={({ field }) => (
-                              <Select
-                                value={field.value ?? 'youtube'}
-                                onValueChange={field.onChange}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {PROVEDORES.map((p) => (
-                                    <SelectItem key={p.value} value={p.value}>
-                                      {p.label}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            )}
-                          />
-                        </Field>
-
-                        <Field>
-                          <FieldLabel htmlFor="aula-video-url">
-                            {t('lessonForm.videoUrl')}
-                          </FieldLabel>
-                          <div className="relative">
-                            <Link2 className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-                            <Input
-                              id="aula-video-url"
-                              className="pl-10"
-                              placeholder={t('lessonForm.videoUrlPlaceholder')}
-                              {...aulaForm.register('videoUrl')}
-                            />
-                          </div>
-                        </Field>
-
-                        <Field>
-                          <div className="flex items-center justify-between">
-                            <div>
-                              <FieldLabel
-                                htmlFor="aula-duracao-auto"
-                                className="mb-0"
-                              >
-                                {t('lessonForm.autoDuration')}
-                              </FieldLabel>
-                              <FieldDescription>
-                                {t('lessonForm.autoDurationHelp')}
-                              </FieldDescription>
-                            </div>
-                            <Controller
-                              name="duracaoAutomatica"
-                              control={aulaForm.control}
-                              render={({ field }) => (
-                                <Switch
-                                  id="aula-duracao-auto"
-                                  checked={field.value ?? false}
-                                  onCheckedChange={field.onChange}
-                                />
-                              )}
-                            />
-                          </div>
-                        </Field>
-
-                        <Field>
-                          <FieldLabel>
-                            {t('lessonForm.transcriptionUpload')}
-                          </FieldLabel>
-                          {transcricaoFile ? (
-                            <div className="flex items-center justify-between rounded-md border bg-background px-3 py-2">
-                              <div className="flex items-center gap-2">
-                                <FileText className="size-4 text-muted-foreground" />
-                                <span className="text-sm">
-                                  {transcricaoFile}
-                                </span>
-                              </div>
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                className="size-7"
-                                onClick={() => setTranscricaoFile(null)}
-                              >
-                                <X className="size-3.5" />
-                              </Button>
-                            </div>
-                          ) : (
-                            <label className="flex cursor-pointer flex-col items-center gap-2 rounded-lg border-2 border-dashed bg-background px-4 py-6 text-center transition-colors hover:border-foreground/30 hover:bg-muted/50">
-                              <Upload className="size-6 text-muted-foreground" />
-                              <span className="text-sm text-muted-foreground">
-                                {t('lessonForm.transcriptionUploadText')}
-                              </span>
-                              <input
-                                type="file"
-                                accept=".txt,.srt,.vtt"
-                                className="hidden"
-                                onChange={(e) => {
-                                  const file = e.target.files?.[0];
-                                  if (file) {
-                                    setTranscricaoFile(file.name);
-                                    toast.success(
-                                      t('toasts.transcriptionUploaded')
-                                    );
-                                  }
-                                }}
-                              />
-                            </label>
-                          )}
-                        </Field>
-                      </div>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-
-                {/* ── Conditional: QUESTAO ────────────────────────── */}
-                <AnimatePresence mode="wait">
-                  {watchTipo === 'questao' && (
-                    <motion.div
-                      key="questao-fields"
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: 'auto' }}
-                      exit={{ opacity: 0, height: 0 }}
-                      transition={{ duration: 0.2 }}
-                      className="overflow-hidden"
-                    >
-                      <div className="flex flex-col gap-4 rounded-lg border bg-muted/30 p-4">
-                        <div className="flex items-center gap-2">
-                          <HelpCircle className="size-4 text-amber-600" />
-                          <span className="text-sm font-medium">
-                            {t('lessonForm.linkExam')}
-                          </span>
-                        </div>
-
-                        <Field>
-                          <FieldLabel>{t('lessonForm.linkedExam')}</FieldLabel>
-                          <Controller
-                            name="exameVinculado"
-                            control={aulaForm.control}
-                            render={({ field }) => (
-                              <Select
-                                value={field.value ?? ''}
-                                onValueChange={field.onChange}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue
-                                    placeholder={t(
-                                      'lessonForm.linkedExamPlaceholder'
-                                    )}
-                                  />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {MOCK_EXAMES.map((ex) => (
-                                    <SelectItem key={ex.id} value={ex.id}>
-                                      {ex.titulo}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            )}
-                          />
-                          <FieldDescription>
-                            {t('lessonForm.linkedExamHelp')}
-                          </FieldDescription>
-                        </Field>
-                      </div>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-
-                {/* ── Conditional: POST ───────────────────────────── */}
-                <AnimatePresence mode="wait">
-                  {watchTipo === 'post' && (
-                    <motion.div
-                      key="post-fields"
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: 'auto' }}
-                      exit={{ opacity: 0, height: 0 }}
-                      transition={{ duration: 0.2 }}
-                      className="overflow-hidden"
-                    >
-                      <div className="flex flex-col gap-4 rounded-lg border bg-muted/30 p-4">
-                        <div className="flex items-center gap-2">
-                          <MessageSquare className="size-4 text-emerald-600" />
-                          <span className="text-sm font-medium">
-                            {t('lessonForm.postContent')}
-                          </span>
-                        </div>
-
-                        <Field>
-                          <FieldLabel htmlFor="aula-post-content">
-                            {t('lessonForm.contentEditor')}
-                          </FieldLabel>
-                          <div className="flex items-center gap-1 rounded-t-md border border-b-0 bg-muted/50 px-2 py-1.5">
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="size-7"
-                              title={t('lessonForm.bold')}
-                              onClick={() =>
-                                toast.info(t('toasts.boldApplied'))
-                              }
-                            >
-                              <span className="text-xs font-bold">B</span>
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="size-7"
-                              title={t('lessonForm.italic')}
-                              onClick={() =>
-                                toast.info(t('toasts.italicApplied'))
-                              }
-                            >
-                              <span className="text-xs italic">I</span>
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="size-7"
-                              title={t('lessonForm.underline')}
-                              onClick={() =>
-                                toast.info(t('toasts.underlineApplied'))
-                              }
-                            >
-                              <span className="text-xs underline">U</span>
-                            </Button>
-                            <Separator
-                              orientation="vertical"
-                              className="mx-1 h-4"
-                            />
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="size-7"
-                              title={t('lessonForm.link')}
-                              onClick={() => toast.info(t('toasts.insertLink'))}
-                            >
-                              <Link2 className="size-3.5" />
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="size-7"
-                              title={t('lessonForm.image')}
-                              onClick={() =>
-                                toast.info(t('toasts.insertImage'))
-                              }
-                            >
-                              <FileUp className="size-3.5" />
-                            </Button>
-                          </div>
-                          <Textarea
-                            id="aula-post-content"
-                            placeholder={t('lessonForm.postContentPlaceholder')}
-                            rows={8}
-                            className="rounded-t-none font-mono text-sm"
-                            {...aulaForm.register('conteudoPost')}
-                          />
-                          <FieldDescription>
-                            {t('lessonForm.postContentHelp')}
-                          </FieldDescription>
-                        </Field>
-                      </div>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </form>
-            </TabsContent>
-
-            {/* ── Tab: Transcricao ────────────────────────────────── */}
-            <TabsContent value="transcricao" className="flex-1 mt-0">
-              <div
-                className={`flex flex-col gap-4 py-4 ${watchTipo === 'video' ? 'cursor-pointer' : ''}`}
-                onClick={(event) => {
-                  if (watchTipo !== 'video') return;
-
-                  const target = event.target as HTMLElement;
-                  if (
-                    target.closest(
-                      'button, input, textarea, select, [role="button"], a, label'
-                    )
-                  ) {
-                    return;
-                  }
-
-                  videoUploadInputRef.current?.click();
-                }}
-              >
-                {watchTipo === 'video' && (
-                  <div className="rounded-lg border bg-muted/30 p-4">
-                    <Field>
-                      <FieldLabel>{t('lessonForm.videoUpload')}</FieldLabel>
-                      {videoUploadFile ? (
-                        <div className="flex items-center justify-between rounded-md border bg-background px-3 py-2">
-                          <div className="flex items-center gap-2">
-                            <Video className="size-4 text-muted-foreground" />
-                            <span className="text-sm">{videoUploadFile}</span>
-                          </div>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="size-7"
-                            onClick={clearVideoUpload}
-                          >
-                            <X className="size-3.5" />
-                          </Button>
-                        </div>
-                      ) : (
-                        <div
-                          className="flex cursor-pointer flex-col items-center gap-2 rounded-lg border-2 border-dashed bg-background px-4 py-6 text-center transition-colors hover:border-foreground/30 hover:bg-muted/50"
-                          onClick={() => videoUploadInputRef.current?.click()}
-                        >
-                          <Upload className="size-6 text-muted-foreground" />
-                          <span className="text-sm text-muted-foreground">
-                            {t('lessonForm.videoUploadText')}
-                          </span>
-                        </div>
-                      )}
-                      <FieldDescription>
-                        {t('lessonForm.videoUploadHelp')}
-                      </FieldDescription>
-                    </Field>
-                  </div>
-                )}
-
-                {editingAula?.transcricao ? (
-                  <>
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <Eye className="size-4 text-muted-foreground" />
-                        <span className="text-sm font-medium">
-                          {t('lessonForm.fullTranscription')}
-                        </span>
-                      </div>
-                      <Badge variant="secondary" className="text-xs">
-                        {t('lessonForm.wordCount', {
-                          count: editingAula.transcricao.split(' ').length,
-                        })}
-                      </Badge>
-                    </div>
-                    <div className="max-h-96 overflow-y-auto rounded-lg border bg-muted/30 p-4">
-                      <p className="whitespace-pre-wrap text-sm leading-relaxed text-muted-foreground">
-                        {editingAula.transcricao}
-                      </p>
-                    </div>
-                    <div className="flex gap-2">
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        className="gap-2"
-                        onClick={() => {
-                          navigator.clipboard.writeText(
-                            editingAula.transcricao ?? ''
-                          );
-                          toast.success(t('toasts.transcriptionCopied'));
-                        }}
-                      >
-                        <Copy className="size-3.5" />
-                        {t('lessonForm.copyText')}
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        className="gap-2"
-                        onClick={() => toast.info(t('toasts.downloadStarted'))}
-                      >
-                        <FileUp className="size-3.5" />
-                        {t('lessonForm.downloadTxt')}
-                      </Button>
-                    </div>
-                  </>
-                ) : (
-                  <div className="flex flex-col items-center gap-4 rounded-lg border-2 border-dashed py-12 text-center">
-                    <div className="flex size-12 items-center justify-center rounded-full bg-muted">
-                      <FileText className="size-6 text-muted-foreground" />
-                    </div>
-                    <div>
-                      <h4 className="text-sm font-medium">
-                        {t('lessonForm.noTranscription')}
-                      </h4>
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        {t('lessonForm.noTranscriptionHelp')}
-                      </p>
-                    </div>
-                  </div>
-                )}
-
-                {watchTipo === 'video' && (
-                  <input
-                    ref={videoUploadInputRef}
-                    type="file"
-                    accept="video/*"
-                    className="hidden"
-                    onChange={(e) => {
-                      const file = e.target.files?.[0];
-                      if (!file) return;
-
-                      if (!file.type.startsWith('video/')) {
-                        toast.error(t('toasts.invalidVideoType'));
-                        e.target.value = '';
-                        return;
-                      }
-
-                      const extension =
-                        file.name.split('.').pop()?.toLowerCase() ?? 'video';
-
-                      setVideoUploadFile(file.name);
-                      setSheetRecursos((prev) => {
-                        const exists = prev.some(
-                          (resource) => resource.nome === file.name
-                        );
-                        if (exists) return prev;
-
-                        return [
-                          ...prev,
-                          {
-                            id: `video-${Date.now()}`,
-                            nome: file.name,
-                            tamanho: `${(file.size / 1024 / 1024).toFixed(1)} MB`,
-                            tipo: extension,
-                            publico: true,
-                          },
-                        ];
-                      });
-
-                      toast.success(t('toasts.videoUploaded'));
-                      e.target.value = '';
-                    }}
-                  />
-                )}
-              </div>
-            </TabsContent>
-
-            {/* ── Tab: Recursos ───────────────────────────────────── */}
-            <TabsContent value="recursos" className="flex-1 mt-0">
-              <div className="flex flex-col gap-4 py-4">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <Paperclip className="size-4 text-muted-foreground" />
-                    <span className="text-sm font-medium">
-                      {t('lessonForm.resources', {
-                        count: sheetRecursos.length,
-                      })}
-                    </span>
-                  </div>
-                </div>
-
-                {/* Upload zone */}
-                <label className="flex cursor-pointer flex-col items-center gap-2 rounded-lg border-2 border-dashed px-4 py-6 text-center transition-colors hover:border-foreground/30 hover:bg-muted/50">
-                  <Upload className="size-6 text-muted-foreground" />
-                  <span className="text-sm text-muted-foreground">
-                    {t('lessonForm.dragOrClick')}
-                  </span>
-                  <span className="text-xs text-muted-foreground/70">
-                    {t('lessonForm.fileTypes')}
-                  </span>
-                  <input
-                    type="file"
-                    multiple
-                    className="hidden"
-                    onChange={(e) => {
-                      const files = e.target.files;
-                      if (files) {
-                        const newRecursos: Recurso[] = Array.from(files).map(
-                          (f) => ({
-                            id: `r-${Date.now()}-${Math.random().toString(36).slice(2, 4)}`,
-                            nome: f.name,
-                            tamanho: `${(f.size / 1024 / 1024).toFixed(1)} MB`,
-                            tipo: f.name.split('.').pop() ?? 'file',
-                            publico: true,
-                          })
-                        );
-                        setSheetRecursos((prev) => [...prev, ...newRecursos]);
-                        toast.success(
-                          t('toasts.filesAdded', { count: files.length })
-                        );
-                      }
-                    }}
-                  />
-                </label>
-
-                {/* Resources list */}
-                {sheetRecursos.length === 0 ? (
-                  <div className="flex flex-col items-center gap-2 py-6 text-center">
-                    <Paperclip className="size-8 text-muted-foreground/30" />
-                    <p className="text-xs text-muted-foreground">
-                      {t('lessonForm.noResources')}
-                    </p>
-                  </div>
-                ) : (
-                  <div className="flex flex-col gap-2">
-                    {sheetRecursos.map((recurso) => (
-                      <div
-                        key={recurso.id}
-                        className="flex items-center gap-3 rounded-lg border bg-background px-3 py-2.5 transition-colors hover:bg-muted/50"
-                      >
-                        <div className="flex size-8 shrink-0 items-center justify-center rounded bg-muted">
-                          <FileText className="size-4 text-muted-foreground" />
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <p className="truncate text-sm font-medium">
-                            {recurso.nome}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            {recurso.tamanho} &middot; .{recurso.tipo}
-                          </p>
-                        </div>
-                        <div className="flex shrink-0 items-center gap-1">
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="size-7"
-                            onClick={() =>
-                              toggleRecursoVisibilidade(recurso.id)
-                            }
-                            title={
-                              recurso.publico
-                                ? t('lessonForm.publicTooltip')
-                                : t('lessonForm.privateTooltip')
-                            }
-                          >
-                            {recurso.publico ? (
-                              <Globe className="size-3.5 text-emerald-600" />
-                            ) : (
-                              <Lock className="size-3.5 text-amber-600" />
-                            )}
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="size-7 text-destructive hover:text-destructive"
-                            onClick={() => removeRecurso(recurso.id)}
-                          >
-                            <Trash2 className="size-3.5" />
-                          </Button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </TabsContent>
-          </Tabs>
-
-          <SheetFooter className="mt-auto border-t pt-4">
-            {editingAula && (
-              <span className="mr-auto text-xs text-muted-foreground">
-                {autoSaveStatus === 'saving' && t('lessonForm.autoSaveSaving')}
-                {autoSaveStatus === 'saved' && t('lessonForm.autoSaveSaved')}
-                {autoSaveStatus === 'error' && t('lessonForm.autoSaveError')}
-              </span>
-            )}
-            <Button
-              type="submit"
-              form="aula-form"
-              disabled={saving}
-              className="gap-2"
-            >
-              {saving && <Loader2 className="size-4 animate-spin" />}
-              {editingAula ? t('lessonForm.update') : t('lessonForm.create')}
-            </Button>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-
-      {/* ═══════════════════════════════════════════════════════════════════════
-          DIALOGS
-      ═══════════════════════════════════════════════════════════════════════ */}
-
-      {/* Delete Sessao */}
-      <Dialog open={deleteSessaoDialog} onOpenChange={setDeleteSessaoDialog}>
-        <DialogContent className="max-w-3xl">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="size-5 text-destructive" />
-              {t('deleteSession.title')}
-            </DialogTitle>
-            <DialogDescription asChild>
-              <div className="flex flex-col gap-3">
-                <p>
-                  {t('deleteSession.message')}{' '}
-                  <strong className="text-foreground">
-                    {sessaoToDelete?.titulo}
-                  </strong>
-                  ?
-                </p>
-                {sessaoToDelete &&
-                  getAulasBySessao(sessaoToDelete.id).length > 0 && (
-                    <div className="flex items-center gap-1.5 rounded-md bg-amber-50 px-3 py-2.5 text-xs font-medium text-amber-700">
-                      <AlertTriangle className="size-3.5 shrink-0" />
-                      <span>
-                        {t('deleteSession.warning', {
-                          count: getAulasBySessao(sessaoToDelete.id).length,
-                        })}
-                      </span>
-                    </div>
-                  )}
-              </div>
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="gap-2">
-            <Button
-              variant="outline"
-              onClick={() => setDeleteSessaoDialog(false)}
-            >
-              {t('deleteSession.cancel')}
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={confirmDeleteSessao}
-              className="gap-2"
-            >
-              <Trash2 className="size-4" />
-              {t('deleteSession.confirm')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Delete Aula */}
-      <Dialog open={deleteAulaDialog} onOpenChange={setDeleteAulaDialog}>
-        <DialogContent className="max-w-3xl">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="size-5 text-destructive" />
-              {t('deleteLesson.title')}
-            </DialogTitle>
-            <DialogDescription>
-              {t('deleteLesson.message')}{' '}
-              <strong className="text-foreground">
-                {aulaToDelete?.titulo}
-              </strong>
-              ? {t('deleteLesson.warning')}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="gap-2">
-            <Button
-              variant="outline"
-              onClick={() => setDeleteAulaDialog(false)}
-            >
-              {t('deleteLesson.cancel')}
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={confirmDeleteAula}
-              className="gap-2"
-            >
-              <Trash2 className="size-4" />
-              {t('deleteLesson.confirm')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Bulk Delete */}
-      <Dialog open={bulkDeleteDialog} onOpenChange={setBulkDeleteDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="size-5 text-destructive" />
-              {t('bulkDelete.title', { count: selectedAulas.size })}
-            </DialogTitle>
-            <DialogDescription>
-              {t('bulkDelete.message', { count: selectedAulas.size })}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="gap-2">
-            <Button
-              variant="outline"
-              onClick={() => setBulkDeleteDialog(false)}
-            >
-              {t('bulkDelete.cancel')}
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={confirmBulkDelete}
-              className="gap-2"
-            >
-              <Trash2 className="size-4" />
-              {t('bulkDelete.confirm', { count: selectedAulas.size })}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Page>
-  );
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// SORTABLE SESSAO
-// ═══════════════════════════════════════════════════════════════════════════
-
-function SortableSessao({
-  sessao,
-  index,
-  aulas,
-  allSessoes,
-  selectedAulas,
-  tipoAulaMap,
-  t,
-  onToggleCollapse,
-  onEditSessao,
-  onDeleteSessao,
-  onMergeSessao,
-  onCreateAula,
-  onEditAula,
-  onDeleteAula,
-  onAulaClick,
-  onSelectAllInSessao,
-}: {
-  sessao: Sessao;
-  index: number;
-  aulas: Aula[];
-  allSessoes: Sessao[];
-  selectedAulas: Set<string>;
-  tipoAulaMap: Record<
-    AulaTipo,
-    { label: string; icon: LucideIcon; color: string }
-  >;
-  t: any;
-  onToggleCollapse: () => void;
-  onEditSessao: () => void;
-  onDeleteSessao: () => void;
-  onMergeSessao: (targetId: string) => void;
-  onCreateAula: () => void;
-  onEditAula: (aula: Aula) => void;
-  onDeleteAula: (aula: Aula) => void;
-  onAulaClick: (aulaId: string, e: React.MouseEvent) => void;
-  onSelectAllInSessao: () => void;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: sessao.id });
-  const [mergeMenuOpen, setMergeMenuOpen] = useState(false);
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.4 : 1,
-  };
-  const totalDuracao = aulas.reduce((sum, a) => sum + a.duracao, 0);
-  const selectedInSessao = aulas.filter((a) => selectedAulas.has(a.id)).length;
-  const allSelected = aulas.length > 0 && selectedInSessao === aulas.length;
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className="rounded-xl border bg-card transition-shadow hover:shadow-sm"
-    >
-      {/* Session header */}
-      <div className="flex items-center gap-2 border-b px-3 py-3 sm:px-4">
-        <button
-          {...attributes}
-          {...listeners}
-          className="flex cursor-grab items-center text-muted-foreground transition-colors hover:text-foreground active:cursor-grabbing"
-          aria-label={t('lesson.dragSession')}
-        >
-          <GripVertical className="size-4" />
-        </button>
-
-        <button
-          onClick={onToggleCollapse}
-          className="flex items-center text-muted-foreground transition-colors hover:text-foreground"
-          aria-label={
-            sessao.collapsed ? t('session.expand') : t('session.collapse')
-          }
-        >
-          {sessao.collapsed ? (
-            <ChevronRight className="size-4" />
-          ) : (
-            <ChevronDown className="size-4" />
-          )}
-        </button>
-
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <Badge variant="outline" className="shrink-0 text-[0.65rem]">
-              {sessao.codigo}
-            </Badge>
-            <span className="truncate text-sm font-semibold">
-              {sessao.titulo}
-            </span>
-          </div>
-          {!sessao.collapsed && (
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              {t('session.estimatedDuration', { minutes: sessao.duracao })}
-            </p>
-          )}
-        </div>
-
-        <div className="flex shrink-0 items-center gap-1">
-          <span className="hidden text-xs text-muted-foreground sm:inline">
-            {t('session.lessonsAndDuration', {
-              lessons: aulas.length,
-              minutes: totalDuracao,
-            })}
-          </span>
-
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7"
-            onClick={onSelectAllInSessao}
-            title={t('session.selectAll')}
-          >
-            {allSelected ? (
-              <CheckSquare className="size-3.5" />
-            ) : (
-              <Square className="size-3.5" />
-            )}
-          </Button>
-
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7"
-            onClick={onCreateAula}
-            title={t('session.addLesson')}
-          >
-            <Plus className="size-3.5" />
-          </Button>
-
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7"
-            onClick={onEditSessao}
-            title={t('session.edit')}
-          >
-            <Pencil className="size-3.5" />
-          </Button>
-
-          {/* Merge dropdown */}
-          <div className="relative">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-7"
-              onClick={() => setMergeMenuOpen(!mergeMenuOpen)}
-              title={t('session.merge')}
-            >
-              <Archive className="size-3.5" />
-            </Button>
-            <AnimatePresence>
-              {mergeMenuOpen && (
-                <motion.div
-                  initial={{ opacity: 0, scale: 0.95 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.95 }}
-                  transition={{ duration: 0.15 }}
-                  className="absolute right-0 top-full z-30 mt-1 w-56 rounded-md border bg-popover p-1 shadow-md"
-                >
-                  <p className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
-                    {t('session.mergeWith')}
-                  </p>
-                  {allSessoes
-                    .filter((s) => s.id !== sessao.id)
-                    .map((s) => (
-                      <button
-                        key={s.id}
-                        className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent"
-                        onClick={() => {
-                          onMergeSessao(s.id);
-                          setMergeMenuOpen(false);
-                        }}
-                      >
-                        <FolderOpen className="size-3.5 text-muted-foreground" />
-                        <span className="truncate">{s.titulo}</span>
-                      </button>
-                    ))}
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7 text-destructive hover:text-destructive"
-            onClick={onDeleteSessao}
-            title={t('session.delete')}
-          >
-            <Trash2 className="size-3.5" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Aulas list */}
-      <AnimatePresence initial={false}>
-        {!sessao.collapsed && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.2 }}
-            className="overflow-hidden"
-          >
-            <SortableContext
-              items={aulas.map((a) => a.id)}
-              strategy={verticalListSortingStrategy}
-            >
-              <div className="flex flex-col gap-0 p-2">
-                {aulas.length === 0 ? (
-                  <EmptyState
-                    icon={<Layers className="h-10 w-10" />}
-                    title={t('session.noLessons')}
-                    description={t('session.noLessonsDescription')}
-                    actionLabel={t('session.addLesson')}
-                    actionIcon={<Plus className="size-3.5" />}
-                    onAction={onCreateAula}
-                    className="py-8"
-                  />
-                ) : (
-                  aulas.map((aula) => (
-                    <SortableAula
-                      key={aula.id}
-                      aula={aula}
-                      t={t}
-                      tipoAulaMap={tipoAulaMap}
-                      isSelected={selectedAulas.has(aula.id)}
-                      onEdit={() => onEditAula(aula)}
-                      onDelete={() => onDeleteAula(aula)}
-                      onClick={(e) => onAulaClick(aula.id, e)}
-                    />
-                  ))
-                )}
-              </div>
-            </SortableContext>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// SORTABLE AULA
-// ═══════════════════════════════════════════════════════════════════════════
-
-function SortableAula({
-  aula,
-  t,
-  tipoAulaMap,
-  isSelected,
-  onEdit,
-  onDelete,
-  onClick,
-}: {
-  aula: Aula;
-  t: any;
-  tipoAulaMap: Record<
-    AulaTipo,
-    { label: string; icon: LucideIcon; color: string }
-  >;
-  isSelected: boolean;
-  onEdit: () => void;
-  onDelete: () => void;
-  onClick: (e: React.MouseEvent) => void;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: aula.id });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.3 : 1,
-  };
-  const tipoInfo = tipoAulaMap[aula.tipo];
-  const TipoIcon = tipoInfo.icon;
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      onClick={onClick}
-      className={`group flex items-center gap-2 rounded-lg px-2 py-2 transition-colors sm:px-3 ${
-        isSelected
-          ? 'bg-foreground/5 ring-1 ring-foreground/20'
-          : 'hover:bg-muted/50'
-      } ${isDragging ? 'z-10' : ''}`}
-    >
-      <button
-        {...attributes}
-        {...listeners}
-        className="flex shrink-0 cursor-grab items-center text-muted-foreground/50 transition-colors hover:text-muted-foreground active:cursor-grabbing"
-        aria-label={t('lesson.dragLesson')}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <GripVertical className="size-4" />
-      </button>
-
-      <div
-        className={`flex size-7 shrink-0 items-center justify-center rounded ${tipoInfo.color}`}
-      >
-        <TipoIcon className="size-3.5" />
-      </div>
-
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-1.5">
-          <Badge
-            variant="outline"
-            className="shrink-0 text-[0.55rem] px-1 py-0"
-          >
-            {aula.codigo}
-          </Badge>
-          <p className="truncate text-sm font-medium">{aula.titulo}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Badge variant="secondary" className="text-[0.6rem]">
-            {tipoInfo.label}
-          </Badge>
-          <span className="flex items-center gap-1 text-[0.65rem] text-muted-foreground">
-            <Clock className="size-3" />
-            {aula.duracao}min
-          </span>
-          {aula.recursos.length > 0 && (
-            <span className="flex items-center gap-1 text-[0.65rem] text-muted-foreground">
-              <Paperclip className="size-3" />
-              {aula.recursos.length}
-            </span>
-          )}
-        </div>
-      </div>
-
-      <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="size-7"
-          onClick={(e) => {
-            e.stopPropagation();
-            onEdit();
-          }}
-          title={t('lesson.edit')}
-        >
-          <Pencil className="size-3" />
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="size-7 text-destructive hover:text-destructive"
-          onClick={(e) => {
-            e.stopPropagation();
-            onDelete();
-          }}
-          title={t('lesson.delete')}
-        >
-          <Trash2 className="size-3" />
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// LOADING SKELETON
-// ═══════════════════════════════════════════════════════════════════════════
-
-function LoadingSkeleton() {
-  return (
-    <div className="flex flex-col gap-6">
-      <Skeleton className="h-4 w-32" />
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-8 w-64" />
-          <Skeleton className="h-4 w-44" />
-        </div>
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-9 w-32 rounded-md" />
-          <Skeleton className="h-9 w-32 rounded-md" />
-        </div>
-      </div>
-      <Skeleton className="h-4 w-80" />
-      {Array.from({ length: 4 }).map((_, i) => (
-        <div key={i} className="flex flex-col gap-0 rounded-xl border">
-          <div className="flex items-center gap-3 border-b p-4">
-            <Skeleton className="h-4 w-4" />
-            <Skeleton className="h-5 w-48" />
-            <div className="ml-auto flex items-center gap-2">
-              <Skeleton className="h-7 w-7 rounded-md" />
-              <Skeleton className="h-7 w-7 rounded-md" />
-              <Skeleton className="h-7 w-7 rounded-md" />
-            </div>
-          </div>
-          <div className="flex flex-col gap-1 p-2">
-            {Array.from({ length: 3 }).map((_, j) => (
-              <div
-                key={j}
-                className="flex items-center gap-3 rounded-lg px-3 py-2"
-              >
-                <Skeleton className="h-4 w-4" />
-                <Skeleton className="h-7 w-7 rounded" />
-                <div className="flex flex-1 flex-col gap-1">
-                  <Skeleton className="h-4 w-40" />
-                  <Skeleton className="h-3 w-24" />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
+import { redirect } from 'next/navigation';
+
+export default async function CourseStructureRedirectPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  redirect(`/lms/courses/${id}`);
+}