@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -60,8 +60,9 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useApp } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { AnimatePresence, motion, type Variants } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
   AlertTriangle,
   Archive,
@@ -102,7 +103,7 @@ import {
 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 { Controller, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -130,6 +131,12 @@ interface Recurso {
   publico: boolean;
 }
 
+interface AulaInstructor {
+  id: string;
+  role?: 'lead' | 'assistant';
+  nome?: string;
+}
+
 interface Aula {
   id: string;
   codigo: string;
@@ -150,6 +157,12 @@ interface Aula {
   conteudoPost?: string;
   // Recursos
   recursos: Recurso[];
+  instrutores?: AulaInstructor[];
+}
+
+interface InstructorOption {
+  id: number;
+  name: string;
 }
 
 interface Sessao {
@@ -209,6 +222,18 @@ type AulaFormType = {
   conteudoPost?: string;
 };
 
+type CourseStructureResponse = {
+  sessoes: Sessao[];
+  aulas: Aula[];
+  instructors?: InstructorOption[];
+};
+
+type Locale = {
+  id?: number;
+  code: string;
+  name: string;
+};
+
 // ── Constants ───────────────────────────────────────────────────────────────
 
 function getTipoAulaMap(
@@ -578,10 +603,17 @@ const initialAulas: Aula[] = [
 
 // ── Animations ──────────────────────────────────────────────────────────────
 
-const stagger = { hidden: {}, show: { transition: { staggerChildren: 0.04 } } };
-const fadeUp: Variants = {
+const stagger: any = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.04 } },
+};
+const fadeUp: any = {
   hidden: { opacity: 0, y: 12 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.3, ease: 'easeOut' } },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.3 },
+  },
 };
 
 // ═══════════════════════════════════════════════════════════════════════════
@@ -594,6 +626,8 @@ export default function EstruturaPage({
   params: Promise<{ id: string }>;
 }) {
   const { id } = use(params);
+  const courseId = Number(id);
+  const { request } = useApp();
   const pathname = usePathname();
   const t = useTranslations('lms.CoursesPage.StructurePage');
 
@@ -602,8 +636,8 @@ export default function EstruturaPage({
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   // Data
-  const [sessoes, setSessoes] = useState<Sessao[]>(initialSessoes);
-  const [aulas, setAulas] = useState<Aula[]>(initialAulas);
+  const [sessoes, setSessoes] = useState<Sessao[]>([]);
+  const [aulas, setAulas] = useState<Aula[]>([]);
 
   // Selection
   const [selectedAulas, setSelectedAulas] = useState<Set<string>>(new Set());
@@ -621,6 +655,12 @@ export default function EstruturaPage({
   const [targetSessaoId, setTargetSessaoId] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
   const [aulaSheetTab, setAulaSheetTab] = useState('dados');
+  const [autoSaveStatus, setAutoSaveStatus] = useState<
+    'idle' | 'saving' | 'saved' | 'error'
+  >('idle');
+  const [sessionAutoSaveStatus, setSessionAutoSaveStatus] = useState<
+    'idle' | 'saving' | 'saved' | 'error'
+  >('idle');
 
   // Dialogs
   const [deleteSessaoDialog, setDeleteSessaoDialog] = useState(false);
@@ -631,10 +671,24 @@ export default function EstruturaPage({
 
   // Recursos management in sheet
   const [sheetRecursos, setSheetRecursos] = useState<Recurso[]>([]);
+  const [sheetInstructorIds, setSheetInstructorIds] = useState<string[]>([]);
   const [transcricaoFile, setTranscricaoFile] = useState<string | null>(null);
+  const [videoUploadFile, setVideoUploadFile] = useState<string | null>(null);
+  const [availableInstructors, setAvailableInstructors] = useState<
+    InstructorOption[]
+  >([]);
+  const videoUploadInputRef = useRef<HTMLInputElement | null>(null);
 
   // Refs for shift-select
   const aulasOrderRef = useRef<string[]>([]);
+  const autoSaveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const autoSaveBaselineRef = useRef<string>('');
+  const lastAutoSavedRef = useRef<string>('');
+  const sessionAutoSaveTimeoutRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+  const sessionAutoSaveBaselineRef = useRef<string>('');
+  const lastSessionAutoSavedRef = useRef<string>('');
 
   // Translation functions
   const sessaoSchema = getSessaoSchema(t);
@@ -667,6 +721,28 @@ export default function EstruturaPage({
   });
 
   const watchTipo = aulaForm.watch('tipo');
+  const watchedSessaoValues = useWatch({
+    control: sessaoForm.control,
+  });
+  const watchedAulaValues = useWatch({
+    control: aulaForm.control,
+  });
+
+  const buildLessonPayload = useCallback(
+    (data: AulaFormType) => ({
+      ...data,
+      exameVinculado: data.exameVinculado
+        ? Number(data.exameVinculado)
+        : undefined,
+      recursos: sheetRecursos.map((recurso) => ({
+        nome: recurso.nome,
+        tipo: recurso.tipo,
+        publico: recurso.publico,
+      })),
+      instructorIds: sheetInstructorIds.map((value) => Number(value)),
+    }),
+    [sheetRecursos, sheetInstructorIds]
+  );
 
   // DnD sensors
   const sensors = useSensors(
@@ -674,10 +750,29 @@ export default function EstruturaPage({
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
 
+  const loadStructure = useCallback(async () => {
+    setLoading(true);
+    try {
+      const { data } = await request<CourseStructureResponse>({
+        url: `/lms/courses/${courseId}/structure`,
+        method: 'GET',
+      });
+
+      setSessoes(data.sessoes ?? []);
+      setAulas(data.aulas ?? []);
+      setAvailableInstructors(data.instructors ?? []);
+    } catch {
+      toast.error(t('toasts.errorLoadingData'));
+      setSessoes([]);
+      setAulas([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [courseId, request, t]);
+
   useEffect(() => {
-    const t = setTimeout(() => setLoading(false), 700);
-    return () => clearTimeout(t);
-  }, []);
+    loadStructure();
+  }, [loadStructure]);
 
   // Keep a flat ordered list of aulas for shift-select
   useEffect(() => {
@@ -690,6 +785,18 @@ export default function EstruturaPage({
     aulasOrderRef.current = ordered;
   }, [sessoes, aulas]);
 
+  useEffect(() => {
+    return () => {
+      if (autoSaveTimeoutRef.current) {
+        clearTimeout(autoSaveTimeoutRef.current);
+      }
+
+      if (sessionAutoSaveTimeoutRef.current) {
+        clearTimeout(sessionAutoSaveTimeoutRef.current);
+      }
+    };
+  }, []);
+
   // ── Helpers ─────────────────────────────────────────────────────────────
 
   const getAulasBySessao = useCallback(
@@ -702,6 +809,14 @@ export default function EstruturaPage({
     [aulas]
   );
 
+  const mapSheetInstructors = useCallback((): AulaInstructor[] => {
+    return sheetInstructorIds.map((id, index) => ({
+      id,
+      role: index === 0 ? 'lead' : 'assistant',
+      nome: availableInstructors.find((item) => String(item.id) === id)?.name,
+    }));
+  }, [sheetInstructorIds, availableInstructors]);
+
   function isSessaoId(uid: UniqueIdentifier): boolean {
     return sessoes.some((s) => s.id === String(uid));
   }
@@ -710,6 +825,22 @@ export default function EstruturaPage({
     return aulas.some((a) => a.id === String(uid));
   }
 
+  function getNextCode(items: Array<{ codigo: string }>, prefix: 'S' | 'A') {
+    const regex = new RegExp(`^${prefix}(\\d+)$`, 'i');
+
+    const maxCodeNumber = items.reduce((maxValue, item) => {
+      const match = item.codigo?.trim().match(regex);
+      if (!match) return maxValue;
+
+      const numericCode = Number(match[1]);
+      if (!Number.isFinite(numericCode)) return maxValue;
+
+      return Math.max(maxValue, numericCode);
+    }, 0);
+
+    return `${prefix}${String(maxCodeNumber + 1).padStart(2, '0')}`;
+  }
+
   // ── Multi-select ────────────────────────────────────────────────────────
 
   function handleAulaClick(aulaId: string, e: React.MouseEvent) {
@@ -837,53 +968,169 @@ export default function EstruturaPage({
 
   function openCreateSessao() {
     setEditingSessao(null);
-    sessaoForm.reset({ codigo: '', titulo: '', duracao: 30 });
+    setSessionAutoSaveStatus('idle');
+    sessionAutoSaveBaselineRef.current = '';
+    lastSessionAutoSavedRef.current = '';
+    const nextSessionCode = getNextCode(sessoes, 'S');
+    sessaoForm.reset({ codigo: nextSessionCode, titulo: '', duracao: 30 });
     setSessaoSheetOpen(true);
   }
 
   function openEditSessao(sessao: Sessao) {
+    if (sessionAutoSaveTimeoutRef.current) {
+      clearTimeout(sessionAutoSaveTimeoutRef.current);
+      sessionAutoSaveTimeoutRef.current = null;
+    }
+
     setEditingSessao(sessao);
+    setSessionAutoSaveStatus('idle');
     sessaoForm.reset({
       codigo: sessao.codigo,
       titulo: sessao.titulo,
       duracao: sessao.duracao,
     });
+
+    const initialPayload = {
+      codigo: sessao.codigo,
+      titulo: sessao.titulo,
+      duracao: sessao.duracao,
+    };
+
+    const initialKey = JSON.stringify(initialPayload);
+    sessionAutoSaveBaselineRef.current = initialKey;
+    lastSessionAutoSavedRef.current = initialKey;
     setSessaoSheetOpen(true);
   }
 
+  useEffect(() => {
+    if (!sessaoSheetOpen || !editingSessao) return;
+
+    const parsed = sessaoSchema.safeParse(watchedSessaoValues);
+    if (!parsed.success) return;
+
+    const values = parsed.data;
+
+    setSessoes((prev) => {
+      let changed = false;
+
+      const next = prev.map((item) => {
+        if (item.id !== editingSessao.id) return item;
+
+        const nextItem: Sessao = {
+          ...item,
+          codigo: values.codigo,
+          titulo: values.titulo,
+          duracao: values.duracao,
+        };
+
+        const isEqual =
+          item.codigo === nextItem.codigo &&
+          item.titulo === nextItem.titulo &&
+          item.duracao === nextItem.duracao;
+
+        if (isEqual) return item;
+
+        changed = true;
+        return nextItem;
+      });
+
+      return changed ? next : prev;
+    });
+  }, [editingSessao, sessaoSchema, sessaoSheetOpen, watchedSessaoValues]);
+
+  useEffect(() => {
+    if (!sessaoSheetOpen || !editingSessao) return;
+
+    const parsed = sessaoSchema.safeParse(watchedSessaoValues);
+    if (!parsed.success) {
+      setSessionAutoSaveStatus('idle');
+      return;
+    }
+
+    const payload = parsed.data;
+    const payloadKey = JSON.stringify(payload);
+
+    if (
+      payloadKey === sessionAutoSaveBaselineRef.current ||
+      payloadKey === lastSessionAutoSavedRef.current
+    ) {
+      return;
+    }
+
+    if (sessionAutoSaveTimeoutRef.current) {
+      clearTimeout(sessionAutoSaveTimeoutRef.current);
+    }
+
+    sessionAutoSaveTimeoutRef.current = setTimeout(async () => {
+      try {
+        setSessionAutoSaveStatus('saving');
+        await request({
+          url: `/lms/courses/${courseId}/structure/sessions/${Number(editingSessao.id)}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        lastSessionAutoSavedRef.current = payloadKey;
+        setSessionAutoSaveStatus('saved');
+      } catch {
+        setSessionAutoSaveStatus('error');
+        toast.error(t('toasts.sessionAutoSaveFailed'));
+      }
+    }, 800);
+
+    return () => {
+      if (sessionAutoSaveTimeoutRef.current) {
+        clearTimeout(sessionAutoSaveTimeoutRef.current);
+      }
+    };
+  }, [
+    courseId,
+    editingSessao,
+    request,
+    sessaoSchema,
+    sessaoSheetOpen,
+    t,
+    watchedSessaoValues,
+  ]);
+
   async function onSubmitSessao(data: SessaoForm) {
     setSaving(true);
-    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'));
+    try {
+      if (editingSessao) {
+        await request({
+          url: `/lms/courses/${courseId}/structure/sessions/${Number(editingSessao.id)}`,
+          method: 'PATCH',
+          data,
+        });
+        lastSessionAutoSavedRef.current = JSON.stringify(data);
+        setSessionAutoSaveStatus('saved');
+        toast.success(t('toasts.sessionUpdated'));
+      } else {
+        await request({
+          url: `/lms/courses/${courseId}/structure/sessions`,
+          method: 'POST',
+          data,
+        });
+        toast.success(t('toasts.sessionCreated'));
+      }
+
+      await loadStructure();
+      setSessaoSheetOpen(false);
+      setSessionAutoSaveStatus('idle');
+    } finally {
+      setSaving(false);
     }
-    setSaving(false);
-    setSessaoSheetOpen(false);
   }
 
-  function confirmDeleteSessao() {
+  async 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;
+      await request({
+        url: `/lms/courses/${courseId}/structure/sessions/${Number(sessaoToDelete.id)}`,
+        method: 'DELETE',
       });
+
+      await loadStructure();
       toast.success(t('toasts.sessionDeleted'));
+      setSelectedAulas(new Set());
       setSessaoToDelete(null);
       setDeleteSessaoDialog(false);
     }
@@ -895,10 +1142,16 @@ export default function EstruturaPage({
     setEditingAula(null);
     setTargetSessaoId(sessaoId);
     setAulaSheetTab('dados');
+    setAutoSaveStatus('idle');
+    autoSaveBaselineRef.current = '';
+    lastAutoSavedRef.current = '';
     setSheetRecursos([]);
+    setSheetInstructorIds([]);
     setTranscricaoFile(null);
+    setVideoUploadFile(null);
+    const nextLessonCode = getNextCode(getAulasBySessao(sessaoId), 'A');
     aulaForm.reset({
-      codigo: '',
+      codigo: nextLessonCode,
       titulo: '',
       descricaoPublica: '',
       descricaoPrivada: '',
@@ -914,11 +1167,19 @@ export default function EstruturaPage({
   }
 
   function openEditAula(aula: Aula) {
+    if (autoSaveTimeoutRef.current) {
+      clearTimeout(autoSaveTimeoutRef.current);
+      autoSaveTimeoutRef.current = null;
+    }
+
     setEditingAula(aula);
     setTargetSessaoId(aula.sessaoId);
     setAulaSheetTab('dados');
+    setAutoSaveStatus('idle');
     setSheetRecursos([...aula.recursos]);
+    setSheetInstructorIds((aula.instrutores ?? []).map((item) => item.id));
     setTranscricaoFile(aula.transcricao ? 'transcricao.txt' : null);
+    setVideoUploadFile(null);
     aulaForm.reset({
       codigo: aula.codigo,
       titulo: aula.titulo,
@@ -932,68 +1193,196 @@ export default function EstruturaPage({
       exameVinculado: aula.exameVinculado ?? '',
       conteudoPost: aula.conteudoPost ?? '',
     });
+
+    const initialPayload = {
+      codigo: aula.codigo,
+      titulo: aula.titulo,
+      descricaoPublica: aula.descricaoPublica,
+      descricaoPrivada: aula.descricaoPrivada,
+      tipo: aula.tipo,
+      duracao: aula.duracao,
+      videoProvedor: aula.videoProvedor ?? 'youtube',
+      videoUrl: aula.videoUrl ?? '',
+      duracaoAutomatica: aula.duracaoAutomatica ?? false,
+      exameVinculado: aula.exameVinculado
+        ? Number(aula.exameVinculado)
+        : undefined,
+      conteudoPost: aula.conteudoPost ?? '',
+      recursos: aula.recursos.map((recurso) => ({
+        nome: recurso.nome,
+        tipo: recurso.tipo,
+        publico: recurso.publico,
+      })),
+      instructorIds: (aula.instrutores ?? []).map((item) => Number(item.id)),
+    };
+
+    const initialKey = JSON.stringify(initialPayload);
+    autoSaveBaselineRef.current = initialKey;
+    lastAutoSavedRef.current = initialKey;
     setAulaSheetOpen(true);
   }
 
+  useEffect(() => {
+    if (!aulaSheetOpen || !editingAula) return;
+
+    const parsed = aulaSchema.safeParse(watchedAulaValues);
+    if (!parsed.success) return;
+
+    const values = parsed.data;
+    const mappedInstructors = mapSheetInstructors();
+
+    setAulas((prev) => {
+      let changed = false;
+
+      const next = prev.map((item) => {
+        if (item.id !== editingAula.id) return item;
+
+        const nextItem: Aula = {
+          ...item,
+          codigo: values.codigo,
+          titulo: values.titulo,
+          descricaoPublica: values.descricaoPublica,
+          descricaoPrivada: values.descricaoPrivada,
+          tipo: values.tipo,
+          duracao: values.duracao,
+          videoProvedor: values.videoProvedor as VideoProvider | undefined,
+          videoUrl: values.videoUrl,
+          duracaoAutomatica: values.duracaoAutomatica,
+          exameVinculado: values.exameVinculado,
+          conteudoPost: values.conteudoPost,
+          recursos: sheetRecursos,
+          instrutores: mappedInstructors,
+        };
+
+        const isEqual =
+          item.codigo === nextItem.codigo &&
+          item.titulo === nextItem.titulo &&
+          item.descricaoPublica === nextItem.descricaoPublica &&
+          item.descricaoPrivada === nextItem.descricaoPrivada &&
+          item.tipo === nextItem.tipo &&
+          item.duracao === nextItem.duracao &&
+          item.videoProvedor === nextItem.videoProvedor &&
+          item.videoUrl === nextItem.videoUrl &&
+          item.duracaoAutomatica === nextItem.duracaoAutomatica &&
+          item.exameVinculado === nextItem.exameVinculado &&
+          item.conteudoPost === nextItem.conteudoPost &&
+          JSON.stringify(item.recursos) === JSON.stringify(nextItem.recursos) &&
+          JSON.stringify(item.instrutores ?? []) ===
+            JSON.stringify(nextItem.instrutores ?? []);
+
+        if (isEqual) return item;
+
+        changed = true;
+        return nextItem;
+      });
+
+      return changed ? next : prev;
+    });
+  }, [
+    aulaSchema,
+    aulaSheetOpen,
+    editingAula,
+    mapSheetInstructors,
+    sheetRecursos,
+    watchedAulaValues,
+  ]);
+
+  useEffect(() => {
+    if (!aulaSheetOpen || !editingAula) return;
+
+    const parsed = aulaSchema.safeParse(watchedAulaValues);
+    if (!parsed.success) {
+      setAutoSaveStatus('idle');
+      return;
+    }
+
+    const payload = buildLessonPayload(parsed.data);
+    const payloadKey = JSON.stringify(payload);
+
+    if (
+      payloadKey === autoSaveBaselineRef.current ||
+      payloadKey === lastAutoSavedRef.current
+    ) {
+      return;
+    }
+
+    if (autoSaveTimeoutRef.current) {
+      clearTimeout(autoSaveTimeoutRef.current);
+    }
+
+    autoSaveTimeoutRef.current = setTimeout(async () => {
+      try {
+        setAutoSaveStatus('saving');
+        await request({
+          url: `/lms/courses/${courseId}/structure/sessions/${Number(editingAula.sessaoId)}/lessons/${Number(editingAula.id)}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        lastAutoSavedRef.current = payloadKey;
+        setAutoSaveStatus('saved');
+      } catch {
+        setAutoSaveStatus('error');
+        toast.error(t('toasts.autoSaveFailed'));
+      }
+    }, 800);
+
+    return () => {
+      if (autoSaveTimeoutRef.current) {
+        clearTimeout(autoSaveTimeoutRef.current);
+      }
+    };
+  }, [
+    aulaSchema,
+    aulaSheetOpen,
+    buildLessonPayload,
+    courseId,
+    editingAula,
+    request,
+    t,
+    watchedAulaValues,
+  ]);
+
   async function onSubmitAula(data: AulaFormType) {
     setSaving(true);
-    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'));
+    const payload = buildLessonPayload(data);
+
+    try {
+      if (editingAula) {
+        await request({
+          url: `/lms/courses/${courseId}/structure/sessions/${Number(editingAula.sessaoId)}/lessons/${Number(editingAula.id)}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        lastAutoSavedRef.current = JSON.stringify(payload);
+        setAutoSaveStatus('saved');
+        toast.success(t('toasts.lessonUpdated'));
+      } else {
+        await request({
+          url: `/lms/courses/${courseId}/structure/sessions/${Number(targetSessaoId)}/lessons`,
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('toasts.lessonCreated'));
+      }
+
+      await loadStructure();
+      setAulaSheetOpen(false);
+      setAutoSaveStatus('idle');
+    } finally {
+      setSaving(false);
     }
-    setSaving(false);
-    setAulaSheetOpen(false);
   }
 
-  function confirmDeleteAula() {
+  async 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;
+      await request({
+        url: `/lms/courses/${courseId}/structure/sessions/${Number(aulaToDelete.sessaoId)}/lessons/${Number(aulaToDelete.id)}`,
+        method: 'DELETE',
       });
+
+      await loadStructure();
       toast.success(t('toasts.lessonDeleted'));
+      setSelectedAulas(new Set());
       setAulaToDelete(null);
       setDeleteAulaDialog(false);
     }
@@ -1020,10 +1409,27 @@ export default function EstruturaPage({
   }
 
   function removeRecurso(recursoId: string) {
+    const removed = sheetRecursos.find((r) => r.id === recursoId);
+
+    if (removed && videoUploadFile === removed.nome) {
+      setVideoUploadFile(null);
+    }
+
     setSheetRecursos((prev) => prev.filter((r) => r.id !== recursoId));
     toast.success(t('toasts.resourceRemoved'));
   }
 
+  function clearVideoUpload() {
+    if (videoUploadFile) {
+      setSheetRecursos((prev) =>
+        prev.filter((resource) => resource.nome !== videoUploadFile)
+      );
+    }
+
+    setVideoUploadFile(null);
+    toast.success(t('toasts.resourceRemoved'));
+  }
+
   // ── Bulk operations ───────────────────────────────────────────────────
 
   function confirmBulkDelete() {
@@ -1091,6 +1497,31 @@ export default function EstruturaPage({
     ? sessoes.find((s) => s.id === String(activeId))
     : null;
 
+  const { locales } = useApp();
+
+  const handleNewOrder = (): void => {
+    const nextLocaleData: Record<string, { name: string }> = {};
+    locales.forEach((locale: Locale) => {
+      nextLocaleData[locale.code] = {
+        name: '',
+      };
+    });
+    void nextLocaleData;
+    toast.success(t('toasts.structureSaved'));
+  };
+
+  const handleNewSection = (): void => {
+    const nextLocaleData: Record<string, { name: string }> = {};
+    locales.forEach((locale: Locale) => {
+      nextLocaleData[locale.code] = {
+        name: '',
+      };
+    });
+    void nextLocaleData;
+
+    openCreateSessao();
+  };
+
   // ── Render ────────────────────────────────────────────────────────────
 
   return (
@@ -1117,22 +1548,20 @@ export default function EstruturaPage({
             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>
-        }
+        actions={[
+          {
+            label: t('actions.saveOrder'),
+            icon: <Save className="size-4" />,
+            onClick: () => handleNewOrder(),
+            variant: 'default',
+          },
+          {
+            label: t('actions.newSession'),
+            icon: <Plus className="size-4" />,
+            onClick: () => handleNewSection(),
+            variant: 'default',
+          },
+        ]}
       />
 
       {/* ── Main ───────────────────────────────────────────────────────────── */}
@@ -1330,7 +1759,10 @@ export default function EstruturaPage({
           SHEET: SESSAO
       ═══════════════════════════════════════════════════════════════════════ */}
       <Sheet open={sessaoSheetOpen} onOpenChange={setSessaoSheetOpen}>
-        <SheetContent className="flex flex-col overflow-y-auto sm:max-w-md">
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+        >
           <SheetHeader>
             <SheetTitle>
               {editingSessao
@@ -1403,6 +1835,16 @@ export default function EstruturaPage({
             </Field>
 
             <SheetFooter className="mt-auto p-0">
+              {editingSessao && (
+                <span className="mr-auto text-xs text-muted-foreground">
+                  {sessionAutoSaveStatus === 'saving' &&
+                    t('sessionForm.autoSaveSaving')}
+                  {sessionAutoSaveStatus === 'saved' &&
+                    t('sessionForm.autoSaveSaved')}
+                  {sessionAutoSaveStatus === 'error' &&
+                    t('sessionForm.autoSaveError')}
+                </span>
+              )}
               <Button type="submit" disabled={saving} className="gap-2">
                 {saving && <Loader2 className="size-4 animate-spin" />}
                 {editingSessao
@@ -1576,6 +2018,51 @@ export default function EstruturaPage({
                   )}
                 </Field>
 
+                <Field>
+                  <FieldLabel>{t('lessonForm.lessonInstructors')}</FieldLabel>
+                  {availableInstructors.length === 0 ? (
+                    <FieldDescription>
+                      {t('lessonForm.noInstructors')}
+                    </FieldDescription>
+                  ) : (
+                    <div className="grid grid-cols-1 gap-2 rounded-lg border bg-muted/20 p-3 sm:grid-cols-2">
+                      {availableInstructors.map((instructor) => {
+                        const selected = sheetInstructorIds.includes(
+                          String(instructor.id)
+                        );
+
+                        return (
+                          <label
+                            key={instructor.id}
+                            className="flex cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2"
+                          >
+                            <Switch
+                              checked={selected}
+                              onCheckedChange={(checked) => {
+                                setSheetInstructorIds((prev) => {
+                                  const idValue = String(instructor.id);
+                                  if (checked) {
+                                    if (prev.includes(idValue)) return prev;
+                                    return [...prev, idValue];
+                                  }
+
+                                  return prev.filter(
+                                    (value) => value !== idValue
+                                  );
+                                });
+                              }}
+                            />
+                            <span className="text-sm">{instructor.name}</span>
+                          </label>
+                        );
+                      })}
+                    </div>
+                  )}
+                  <FieldDescription>
+                    {t('lessonForm.leadInstructorHint')}
+                  </FieldDescription>
+                </Field>
+
                 {/* ── Conditional: VIDEO ──────────────────────────── */}
                 <AnimatePresence mode="wait">
                   {watchTipo === 'video' && (
@@ -1874,7 +2361,61 @@ export default function EstruturaPage({
 
             {/* ── Tab: Transcricao ────────────────────────────────── */}
             <TabsContent value="transcricao" className="flex-1 mt-0">
-              <div className="flex flex-col gap-4 py-4">
+              <div
+                className={`flex flex-col gap-4 py-4 ${watchTipo === 'video' ? 'cursor-pointer' : ''}`}
+                onClick={(event) => {
+                  if (watchTipo !== 'video') return;
+
+                  const target = event.target as HTMLElement;
+                  if (
+                    target.closest(
+                      'button, input, textarea, select, [role="button"], a, label'
+                    )
+                  ) {
+                    return;
+                  }
+
+                  videoUploadInputRef.current?.click();
+                }}
+              >
+                {watchTipo === 'video' && (
+                  <div className="rounded-lg border bg-muted/30 p-4">
+                    <Field>
+                      <FieldLabel>{t('lessonForm.videoUpload')}</FieldLabel>
+                      {videoUploadFile ? (
+                        <div className="flex items-center justify-between rounded-md border bg-background px-3 py-2">
+                          <div className="flex items-center gap-2">
+                            <Video className="size-4 text-muted-foreground" />
+                            <span className="text-sm">{videoUploadFile}</span>
+                          </div>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="size-7"
+                            onClick={clearVideoUpload}
+                          >
+                            <X className="size-3.5" />
+                          </Button>
+                        </div>
+                      ) : (
+                        <div
+                          className="flex cursor-pointer flex-col items-center gap-2 rounded-lg border-2 border-dashed bg-background px-4 py-6 text-center transition-colors hover:border-foreground/30 hover:bg-muted/50"
+                          onClick={() => videoUploadInputRef.current?.click()}
+                        >
+                          <Upload className="size-6 text-muted-foreground" />
+                          <span className="text-sm text-muted-foreground">
+                            {t('lessonForm.videoUploadText')}
+                          </span>
+                        </div>
+                      )}
+                      <FieldDescription>
+                        {t('lessonForm.videoUploadHelp')}
+                      </FieldDescription>
+                    </Field>
+                  </div>
+                )}
+
                 {editingAula?.transcricao ? (
                   <>
                     <div className="flex items-center justify-between">
@@ -1938,6 +2479,50 @@ export default function EstruturaPage({
                     </div>
                   </div>
                 )}
+
+                {watchTipo === 'video' && (
+                  <input
+                    ref={videoUploadInputRef}
+                    type="file"
+                    accept="video/*"
+                    className="hidden"
+                    onChange={(e) => {
+                      const file = e.target.files?.[0];
+                      if (!file) return;
+
+                      if (!file.type.startsWith('video/')) {
+                        toast.error(t('toasts.invalidVideoType'));
+                        e.target.value = '';
+                        return;
+                      }
+
+                      const extension =
+                        file.name.split('.').pop()?.toLowerCase() ?? 'video';
+
+                      setVideoUploadFile(file.name);
+                      setSheetRecursos((prev) => {
+                        const exists = prev.some(
+                          (resource) => resource.nome === file.name
+                        );
+                        if (exists) return prev;
+
+                        return [
+                          ...prev,
+                          {
+                            id: `video-${Date.now()}`,
+                            nome: file.name,
+                            tamanho: `${(file.size / 1024 / 1024).toFixed(1)} MB`,
+                            tipo: extension,
+                            publico: true,
+                          },
+                        ];
+                      });
+
+                      toast.success(t('toasts.videoUploaded'));
+                      e.target.value = '';
+                    }}
+                  />
+                )}
               </div>
             </TabsContent>
 
@@ -1953,16 +2538,6 @@ export default function EstruturaPage({
                       })}
                     </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 */}
@@ -2065,6 +2640,13 @@ export default function EstruturaPage({
           </Tabs>
 
           <SheetFooter className="mt-auto border-t pt-4">
+            {editingAula && (
+              <span className="mr-auto text-xs text-muted-foreground">
+                {autoSaveStatus === 'saving' && t('lessonForm.autoSaveSaving')}
+                {autoSaveStatus === 'saved' && t('lessonForm.autoSaveSaved')}
+                {autoSaveStatus === 'error' && t('lessonForm.autoSaveError')}
+              </span>
+            )}
             <Button
               type="submit"
               form="aula-form"
@@ -2134,7 +2716,7 @@ export default function EstruturaPage({
 
       {/* Delete Aula */}
       <Dialog open={deleteAulaDialog} onOpenChange={setDeleteAulaDialog}>
-        <DialogContent>
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <AlertTriangle className="size-5 text-destructive" />