@hed-hog/lms 0.0.268 → 0.0.270

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

@@ -0,0 +1,2642 @@
+'use client';
+
+import { 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 { 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 } 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 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[];
+}
+
+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;
+};
+
+// ── 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 = { hidden: {}, show: { transition: { staggerChildren: 0.04 } } };
+const fadeUp = {
+  hidden: { opacity: 0, y: 12 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.3, ease: 'easeOut' } },
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// PAGE COMPONENT
+// ═══════════════════════════════════════════════════════════════════════════
+
+export default function EstruturaPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  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[]>(initialSessoes);
+  const [aulas, setAulas] = useState<Aula[]>(initialAulas);
+
+  // 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');
+
+  // 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 [transcricaoFile, setTranscricaoFile] = useState<string | null>(null);
+
+  // Refs for shift-select
+  const aulasOrderRef = 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');
+
+  // DnD sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  useEffect(() => {
+    const t = setTimeout(() => setLoading(false), 700);
+    return () => clearTimeout(t);
+  }, []);
+
+  // 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]);
+
+  // ── 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]
+  );
+
+  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));
+  }
+
+  // ── 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);
+    sessaoForm.reset({ codigo: '', titulo: '', duracao: 30 });
+    setSessaoSheetOpen(true);
+  }
+
+  function openEditSessao(sessao: Sessao) {
+    setEditingSessao(sessao);
+    sessaoForm.reset({
+      codigo: sessao.codigo,
+      titulo: sessao.titulo,
+      duracao: sessao.duracao,
+    });
+    setSessaoSheetOpen(true);
+  }
+
+  async function onSubmitSessao(data: SessaoForm) {
+    setSaving(true);
+    await new Promise((r) => setTimeout(r, 400));
+    if (editingSessao) {
+      setSessoes((prev) =>
+        prev.map((s) => (s.id === editingSessao.id ? { ...s, ...data } : s))
+      );
+      toast.success(t('toasts.sessionUpdated'));
+    } else {
+      const newSessao: Sessao = {
+        id: `s-${Date.now()}`,
+        ...data,
+        collapsed: false,
+      };
+      setSessoes((prev) => [...prev, newSessao]);
+      toast.success(t('toasts.sessionCreated'));
+    }
+    setSaving(false);
+    setSessaoSheetOpen(false);
+  }
+
+  function confirmDeleteSessao() {
+    if (sessaoToDelete) {
+      setAulas((prev) => prev.filter((a) => a.sessaoId !== sessaoToDelete.id));
+      setSessoes((prev) => prev.filter((s) => s.id !== sessaoToDelete.id));
+      setSelectedAulas((prev) => {
+        const next = new Set(prev);
+        aulas
+          .filter((a) => a.sessaoId === sessaoToDelete.id)
+          .forEach((a) => next.delete(a.id));
+        return next;
+      });
+      toast.success(t('toasts.sessionDeleted'));
+      setSessaoToDelete(null);
+      setDeleteSessaoDialog(false);
+    }
+  }
+
+  // ── CRUD: Aula ────────────────────────────────────────────────────────
+
+  function openCreateAula(sessaoId: string) {
+    setEditingAula(null);
+    setTargetSessaoId(sessaoId);
+    setAulaSheetTab('dados');
+    setSheetRecursos([]);
+    setTranscricaoFile(null);
+    aulaForm.reset({
+      codigo: '',
+      titulo: '',
+      descricaoPublica: '',
+      descricaoPrivada: '',
+      tipo: 'video',
+      duracao: 10,
+      videoProvedor: 'youtube',
+      videoUrl: '',
+      duracaoAutomatica: false,
+      exameVinculado: '',
+      conteudoPost: '',
+    });
+    setAulaSheetOpen(true);
+  }
+
+  function openEditAula(aula: Aula) {
+    setEditingAula(aula);
+    setTargetSessaoId(aula.sessaoId);
+    setAulaSheetTab('dados');
+    setSheetRecursos([...aula.recursos]);
+    setTranscricaoFile(aula.transcricao ? 'transcricao.txt' : 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 ?? '',
+    });
+    setAulaSheetOpen(true);
+  }
+
+  async function onSubmitAula(data: AulaFormType) {
+    setSaving(true);
+    await new Promise((r) => setTimeout(r, 400));
+    if (editingAula) {
+      setAulas((prev) =>
+        prev.map((a) =>
+          a.id === editingAula.id
+            ? {
+                ...a,
+                codigo: data.codigo,
+                titulo: data.titulo,
+                descricaoPublica: data.descricaoPublica,
+                descricaoPrivada: data.descricaoPrivada,
+                tipo: data.tipo as AulaTipo,
+                duracao: data.duracao,
+                videoProvedor: data.videoProvedor as VideoProvider | undefined,
+                videoUrl: data.videoUrl,
+                duracaoAutomatica: data.duracaoAutomatica,
+                exameVinculado: data.exameVinculado,
+                conteudoPost: data.conteudoPost,
+                recursos: sheetRecursos,
+              }
+            : a
+        )
+      );
+      toast.success(t('toasts.lessonUpdated'));
+    } else {
+      const newAula: Aula = {
+        id: `a-${Date.now()}`,
+        codigo: data.codigo,
+        titulo: data.titulo,
+        descricaoPublica: data.descricaoPublica,
+        descricaoPrivada: data.descricaoPrivada,
+        tipo: data.tipo as AulaTipo,
+        duracao: data.duracao,
+        sessaoId: targetSessaoId!,
+        videoProvedor: data.videoProvedor as VideoProvider | undefined,
+        videoUrl: data.videoUrl,
+        duracaoAutomatica: data.duracaoAutomatica,
+        exameVinculado: data.exameVinculado,
+        conteudoPost: data.conteudoPost,
+        recursos: sheetRecursos,
+      };
+      setAulas((prev) => [...prev, newAula]);
+      toast.success(t('toasts.lessonCreated'));
+    }
+    setSaving(false);
+    setAulaSheetOpen(false);
+  }
+
+  function confirmDeleteAula() {
+    if (aulaToDelete) {
+      setAulas((prev) => prev.filter((a) => a.id !== aulaToDelete.id));
+      setSelectedAulas((prev) => {
+        const next = new Set(prev);
+        next.delete(aulaToDelete.id);
+        return next;
+      });
+      toast.success(t('toasts.lessonDeleted'));
+      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) {
+    setSheetRecursos((prev) => prev.filter((r) => r.id !== recursoId));
+    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;
+
+  // ── 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={
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={() => toast.success(t('toasts.structureSaved'))}
+            >
+              <Save className="size-4" />
+              {t('actions.saveOrder')}
+            </Button>
+            <Button className="gap-2" onClick={openCreateSessao}>
+              <Plus className="size-4" />
+              {t('actions.newSession')}
+            </Button>
+          </div>
+        }
+      />
+
+      {/* ── 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 flex flex-col items-center gap-4 py-16 text-center"
+              >
+                <div className="flex size-16 items-center justify-center rounded-full bg-muted">
+                  <Layers className="size-8 text-muted-foreground" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold">{t('empty.title')}</h3>
+                  <p className="text-sm text-muted-foreground">
+                    {t('empty.description')}
+                  </p>
+                </div>
+                <Button className="gap-2" onClick={openCreateSessao}>
+                  <Plus className="size-4" />
+                  {t('empty.action')}
+                </Button>
+              </motion.div>
+            )}
+          </motion.div>
+        )}
+      </div>
+
+      {/* ═══════════════════════════════════════════════════════════════════════
+          SHEET: SESSAO
+      ═══════════════════════════════════════════════════════════════════════ */}
+      <Sheet open={sessaoSheetOpen} onOpenChange={setSessaoSheetOpen}>
+        <SheetContent className="flex flex-col overflow-y-auto sm:max-w-md">
+          <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">
+              <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>
+
+                {/* ── 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">
+                {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>
+                )}
+              </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>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-2"
+                    onClick={addRecurso}
+                  >
+                    <Plus className="size-3.5" />
+                    {t('lessonForm.upload')}
+                  </Button>
+                </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">
+            <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>
+          <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 ? (
+                  <div className="flex flex-col items-center gap-2 py-6 text-center">
+                    <p className="text-xs text-muted-foreground">
+                      {t('session.noLessons')}
+                    </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="gap-1.5 text-xs"
+                      onClick={onCreateAula}
+                    >
+                      <Plus className="size-3" />
+                      {t('session.addLesson')}
+                    </Button>
+                  </div>
+                ) : (
+                  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>
+  );
+}