@hed-hog/lms 0.0.349 → 0.0.351

package/hedhog/frontend/app/courses/[id]/structure/_components/editor-course.tsx.ejs

@@ -9,21 +9,29 @@ import {
   CheckCircle2,
   CircleDot,
   Clock,
+  Download,
+  File as FileIcon,
+  FileImage,
+  FileText,
   Layers,
   Loader2,
+  Pencil,
   Plus,
   Save,
   Undo2,
+  UploadCloud,
   Video,
+  X,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
-import { type ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
+import { FfmpegParamsEditor } from '@/components/ffmpeg-params-editor';
 import { RichTextEditor } from '@/components/rich-text-editor';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -36,6 +44,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
   FormControl,
@@ -45,17 +54,25 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
@@ -71,9 +88,16 @@ import { CourseDangerZoneCard } from '../../_components/CourseDangerZoneCard';
 import { CourseFlagsCard } from '../../_components/CourseFlagsCard';
 import { CourseMediaCard } from '../../_components/CourseMediaCard';
 import { CourseRelationsCard } from '../../_components/CourseRelationsCard';
+import {
+  deleteFile,
+  getCourseResources,
+  updateCourseResources,
+  uploadFile,
+} from '../_data/services/course-structure.service';
 import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
 import { courseStructureQueryKey } from '../_data/use-course-structure-query';
 import { useStructureStore } from './store';
+import { Resource } from './types';
 
 // ── API types (local to this component) ──────────────────────────────────────
 
@@ -81,13 +105,14 @@ type ApiCourseDetail = {
   id: number;
   name: string;
   slug: string;
+  code?: string | null;
   title: string;
   description: string;
   primaryColor?: string | null;
   secondaryColor?: string | null;
   level: 'beginner' | 'intermediate' | 'advanced';
   status: 'draft' | 'published' | 'archived';
-  offeringType: 'scheduled' | 'on_demand' | 'blended';
+  offeringType?: 'scheduled' | 'on_demand' | 'blended' | null;
   categories: string[];
   isFeatured: boolean;
   hasCertificate: boolean;
@@ -119,6 +144,16 @@ type ApiCourseDetail = {
     aspectRatio: string | null;
   } | null;
   certificateModel?: string | null;
+  operationsProjectId?: number | null;
+  operationsProjectCode?: string | null;
+  operationsProjectName?: string | null;
+};
+
+type VideoProfileOption = {
+  id: number;
+  name: string;
+  ffmpeg_params: string;
+  status: string;
 };
 
 type ApiCategory = { id: number; slug: string; name: string };
@@ -165,6 +200,27 @@ type ApiCertificateTemplateList = {
   pageSize: number;
   lastPage?: number;
 };
+type ApiOperationsProjectOption = {
+  id: number;
+  code?: string | null;
+  name: string;
+  label?: string;
+  clientName?: string | null;
+  status?: string;
+};
+
+type CourseResourceApi = {
+  id: number;
+  nome: string;
+  fileId?: number | null;
+  tipo?: string | null;
+  publico?: boolean;
+};
+
+type CourseResourceItem = Resource & {
+  fileId?: number | null;
+};
+
 type Locale = { id?: number; code: string; name: string };
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
@@ -208,12 +264,23 @@ function toApiStatus(status: CourseEditFormValues['status']) {
 }
 
 function toPtOfferingType(
-  value: ApiCourseDetail['offeringType']
+  value?: ApiCourseDetail['offeringType'] | string | null
 ): CourseEditFormValues['tipoOferta'] {
   const n = normalizeEnumValue(value);
   if (n === 'scheduled' || n === 'agendado') return 'agendado';
   if (n === 'blended' || n === 'hibrido') return 'hibrido';
-  return 'sob_demanda';
+  if (
+    n === 'on_demand' ||
+    n === 'ondemand' ||
+    n === 'on-demand' ||
+    n === 'sob_demanda' ||
+    n === 'sob demanda'
+  ) {
+    return 'sob_demanda';
+  }
+
+  // Safe fallback: keep video profiles tab hidden when backend sends invalid data.
+  return 'agendado';
 }
 
 function toApiOfferingType(value: CourseEditFormValues['tipoOferta']) {
@@ -248,6 +315,37 @@ function getInstructorAvatarUrl(avatarId?: number | null) {
     : null;
 }
 
+function getResourceIcon(type: string): typeof FileIcon {
+  if (type === 'application/pdf' || type.endsWith('pdf')) return FileText;
+  if (type.startsWith('image/')) return FileImage;
+  return FileIcon;
+}
+
+function getResourceIconColor(type: string): string {
+  if (type === 'application/pdf' || type.endsWith('pdf')) return 'text-red-500';
+  if (type.startsWith('image/')) return 'text-blue-500';
+  return 'text-muted-foreground';
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function mapApiCourseResourceToLocal(
+  item: CourseResourceApi
+): CourseResourceItem {
+  return {
+    id: String(item.id),
+    fileId: item.fileId ?? undefined,
+    name: item.nome,
+    size: '',
+    type: item.tipo ?? 'file',
+    public: item.publico ?? true,
+  };
+}
+
 // ── Schema ────────────────────────────────────────────────────────────────────
 
 function buildSchema(t: (key: string) => string) {
@@ -257,10 +355,12 @@ function buildSchema(t: (key: string) => string) {
       .trim()
       .min(2, t('validation.codeMin'))
       .max(32, t('validation.codeMax'))
-      .regex(
-        /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
-        'Código: apenas letras minúsculas, números e hífens'
-      ),
+      .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, t('validation.codeFormat')),
+    code: z
+      .string()
+      .regex(/^[A-Z0-9]{2,}$/, t('validation.editionCodeFormat'))
+      .or(z.literal(''))
+      .optional(),
     nomeInterno: z.string().trim().min(3, t('validation.internalNameMin')),
     tituloComercial: z.string().trim().min(3, t('validation.titleMin')),
     descricaoPublica: z.string().trim(),
@@ -270,6 +370,7 @@ function buildSchema(t: (key: string) => string) {
     status: z.enum(['ativo', 'rascunho', 'arquivado']),
     tipoOferta: z.enum(['agendado', 'sob_demanda', 'hibrido']),
     categorias: z.array(z.string()).optional().default([]),
+    operationsProjectId: z.string().optional(),
     primaryColor: z
       .string()
       .regex(/^#([0-9A-Fa-f]{6})$/, t('validation.colorInvalid')),
@@ -297,6 +398,7 @@ export function EditorCourse() {
   const { request, currentLocaleCode, locales } = useApp();
   const t = useTranslations('lms.CursoEditPage');
   const router = useRouter();
+  const isMobile = useIsMobile();
   const queryClient = useQueryClient();
   const createSessionMutation = useCreateSessionMutation();
 
@@ -337,6 +439,25 @@ export function EditorCourse() {
   >([]);
   const [persistedCertificateModel, setPersistedCertificateModel] =
     useState('');
+  const [courseResources, setCourseResources] = useState<CourseResourceItem[]>(
+    []
+  );
+  const [resourcesDragOver, setResourcesDragOver] = useState(false);
+  const [isUploadingResources, setIsUploadingResources] = useState(false);
+  const [isSavingResources, setIsSavingResources] = useState(false);
+  const resourcesInputRef = useRef<HTMLInputElement>(null);
+  const [linkedProfileIds, setLinkedProfileIds] = useState<number[]>([]);
+  const [videoProfilePickerResetKey, setVideoProfilePickerResetKey] =
+    useState(0);
+  const [videoProfileEditSheetOpen, setVideoProfileEditSheetOpen] =
+    useState(false);
+  const [editingVideoProfileId, setEditingVideoProfileId] = useState<
+    number | null
+  >(null);
+  const [editingVideoProfileName, setEditingVideoProfileName] = useState('');
+  const [editingVideoProfileParams, setEditingVideoProfileParams] =
+    useState('');
+  const [savingVideoProfileEdit, setSavingVideoProfileEdit] = useState(false);
 
   // ── Queries ─────────────────────────────────────────────────────────────────
   const { data: apiCourse, refetch: refetchCourse } = useQuery<ApiCourseDetail>(
@@ -412,7 +533,7 @@ export function EditorCourse() {
       >({
         url: '/lms/certificates/templates',
         method: 'GET',
-        params: { page: 1, pageSize: 100 },
+        params: { page: 1, pageSize: 100, status: 'all' },
       });
       const payload = response.data;
       if (Array.isArray(payload))
@@ -428,6 +549,42 @@ export function EditorCourse() {
     initialData: { data: [], total: 0, page: 1, pageSize: 100, lastPage: 1 },
   });
 
+  const { data: operationsProjectOptionsData } = useQuery<
+    { data: ApiOperationsProjectOption[] } | ApiOperationsProjectOption[]
+  >({
+    queryKey: ['lms-course-operations-project-options'],
+    queryFn: async () => {
+      try {
+        const response = await request<
+          { data: ApiOperationsProjectOption[] } | ApiOperationsProjectOption[]
+        >({
+          url: '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc',
+          method: 'GET',
+        });
+        return response.data;
+      } catch {
+        return { data: [] };
+      }
+    },
+    initialData: { data: [] },
+  });
+
+  const {
+    data: allVideoProfiles = [],
+    refetch: refetchVideoProfiles,
+    isFetching: isFetchingVideoProfiles,
+  } = useQuery<VideoProfileOption[]>({
+    queryKey: ['lms-video-resolution-profiles-all'],
+    queryFn: async () => {
+      const response = await request<VideoProfileOption[]>({
+        url: '/lms/video-resolution-profiles/all',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    initialData: [],
+  });
+
   // ── Save mutation ───────────────────────────────────────────────────────────
   const { mutate: saveCourse, isPending: saving } = useMutation({
     mutationFn: async (data: CourseEditFormValues) => {
@@ -437,6 +594,7 @@ export function EditorCourse() {
         data: {
           name: data.nomeInterno.trim(),
           slug: data.slug.trim().toLowerCase(),
+          code: data.code?.trim() || undefined,
           title: data.tituloComercial.trim(),
           description: data.descricaoPublica.trim(),
           requirements: data.preRequisitos?.trim() || undefined,
@@ -455,11 +613,23 @@ export function EditorCourse() {
           isListed: data.listado,
           certificateModel: data.modeloCertificado.trim() || null,
           instructorIds: (data.instrutores ?? []).map(Number),
+          operationsProjectId: data.operationsProjectId
+            ? Number(data.operationsProjectId)
+            : null,
         },
       });
       return data;
     },
     onSuccess: (data) => {
+      if (courseId) {
+        void request({
+          url: `/lms/courses/${courseId}/video-resolution-profiles/sync`,
+          method: 'POST',
+          data: { profileIds: linkedProfileIds },
+        }).catch(() => {
+          toast.error('Erro ao sincronizar perfis de vídeo.');
+        });
+      }
       setPersistedCertificateModel(data.modeloCertificado || '');
       updateCourseInStore({
         title: data.tituloComercial,
@@ -486,6 +656,7 @@ export function EditorCourse() {
     resolver: zodResolver(schema),
     defaultValues: {
       slug: '',
+      code: '',
       nomeInterno: '',
       tituloComercial: '',
       descricaoPublica: '',
@@ -495,6 +666,7 @@ export function EditorCourse() {
       status: 'rascunho',
       tipoOferta: 'sob_demanda',
       categorias: [],
+      operationsProjectId: '',
       primaryColor: '#1D4ED8',
       secondaryColor: '#111827',
       instrutores: [],
@@ -556,6 +728,35 @@ export function EditorCourse() {
     );
   }, [categoryListData, createdCategoryOptions]);
 
+  const projectOptions = useMemo<PickerOption[]>(() => {
+    const payload = Array.isArray(operationsProjectOptionsData)
+      ? operationsProjectOptionsData
+      : (operationsProjectOptionsData?.data ?? []);
+
+    const currentOption =
+      apiCourse?.operationsProjectId && apiCourse?.operationsProjectName
+        ? [
+            {
+              value: String(apiCourse.operationsProjectId),
+              label: apiCourse.operationsProjectName,
+              description: apiCourse.operationsProjectCode ?? null,
+            },
+          ]
+        : [];
+
+    const remoteOptions = payload.map((project) => ({
+      value: String(project.id),
+      label: project.name,
+      description: project.code ?? project.clientName ?? null,
+      meta: project.status ?? null,
+    }));
+
+    return [...currentOption, ...remoteOptions].filter(
+      (item, index, list) =>
+        list.findIndex((candidate) => candidate.value === item.value) === index
+    );
+  }, [apiCourse, operationsProjectOptionsData]);
+
   const instructorOptions = useMemo(() => {
     const fromCourse = (apiCourse?.instructors ?? []).map((item) => ({
       value: String(item.id),
@@ -586,14 +787,84 @@ export function EditorCourse() {
     );
   }, [certificateTemplateData, createdTemplateOptions]);
 
+  const availableVideoProfiles = useMemo(
+    () =>
+      allVideoProfiles.filter(
+        (profile) => !linkedProfileIds.includes(profile.id)
+      ),
+    [allVideoProfiles, linkedProfileIds]
+  );
+
   // ── Structural stats ─────────────────────────────────────────────────────────
   const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
   const hours = Math.floor(totalMinutes / 60);
   const minutes = totalMinutes % 60;
+  const durationLabel = hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
   const publishedCount = lessons.filter(
     (l) => l.visibility === 'publico' || l.status === 'publicada'
   ).length;
 
+  const formValues = form.watch();
+  const showVideoTab =
+    formValues.tipoOferta === 'sob_demanda' ||
+    formValues.tipoOferta === 'hibrido';
+  const descriptionText = String(formValues.descricaoPublica ?? '')
+    .replace(/<[^>]+>/g, '')
+    .trim();
+  const checklistItems = [
+    {
+      id: 'title',
+      label: t('structureEditor.publishChecklist.items.title'),
+      done: formValues.tituloComercial.trim().length >= 3,
+      required: true,
+    },
+    {
+      id: 'description',
+      label: t('structureEditor.publishChecklist.items.description'),
+      done: descriptionText.length > 0,
+      required: true,
+    },
+    {
+      id: 'media',
+      label: t('structureEditor.publishChecklist.items.media'),
+      done: Boolean(apiCourse?.logoFileId || apiCourse?.bannerFileId),
+      required: true,
+    },
+    {
+      id: 'session',
+      label: t('structureEditor.publishChecklist.items.session'),
+      done: sessions.length > 0,
+      required: true,
+    },
+    {
+      id: 'lesson',
+      label: t('structureEditor.publishChecklist.items.lesson'),
+      done: lessons.length > 0,
+      required: true,
+    },
+    {
+      id: 'published-lessons',
+      label: t('structureEditor.publishChecklist.items.publishedLessons'),
+      done: publishedCount > 0,
+      required: true,
+    },
+    {
+      id: 'certificate',
+      label: t('structureEditor.publishChecklist.items.certificate'),
+      done:
+        !formValues.certificado ||
+        String(formValues.modeloCertificado ?? '').trim().length > 0,
+      required: formValues.certificado,
+    },
+  ];
+  const requiredChecklist = checklistItems.filter((item) => item.required);
+  const completedRequired = requiredChecklist.filter(
+    (item) => item.done
+  ).length;
+  const isReadyToPublish =
+    requiredChecklist.length > 0 &&
+    completedRequired === requiredChecklist.length;
+
   // ── Effects ──────────────────────────────────────────────────────────────────
   useEffect(() => {
     if (!apiCourse) return;
@@ -601,6 +872,7 @@ export function EditorCourse() {
       apiCourse.certificateModel ?? persistedCertificateModel ?? '';
     form.reset({
       slug: apiCourse.slug,
+      code: apiCourse.code ?? '',
       nomeInterno: apiCourse.name,
       tituloComercial: apiCourse.title,
       descricaoPublica: apiCourse.description ?? '',
@@ -610,6 +882,9 @@ export function EditorCourse() {
       status: toPtStatus(apiCourse.status),
       tipoOferta: toPtOfferingType(apiCourse.offeringType),
       categorias: apiCourse.categories ?? [],
+      operationsProjectId: apiCourse.operationsProjectId
+        ? String(apiCourse.operationsProjectId)
+        : '',
       primaryColor: apiCourse.primaryColor || '#1D4ED8',
       secondaryColor: apiCourse.secondaryColor || '#111827',
       instrutores: (apiCourse.instructorIds ?? []).map(String),
@@ -643,6 +918,164 @@ export function EditorCourse() {
     });
   }, [apiCourse?.bannerFileId, apiCourse?.logoFileId, request]);
 
+  useEffect(() => {
+    if (!courseId) return;
+
+    let active = true;
+
+    void getCourseResources(request, courseId)
+      .then((items) => {
+        if (!active) return;
+        setCourseResources(items.map(mapApiCourseResourceToLocal));
+      })
+      .catch(() => {
+        if (!active) return;
+        setCourseResources([]);
+        toast.error('Nao foi possivel carregar os recursos do curso.');
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [courseId, request]);
+
+  useEffect(() => {
+    if (!showVideoTab && activeTab === 'videos') {
+      setActiveTab('estrutura');
+    }
+  }, [showVideoTab, activeTab]);
+
+  useEffect(() => {
+    if (!courseId) return;
+    let active = true;
+    void request<VideoProfileOption[]>({
+      url: `/lms/courses/${courseId}/video-resolution-profiles`,
+      method: 'GET',
+    })
+      .then((res) => {
+        if (!active) return;
+        setLinkedProfileIds((res.data ?? []).map((p) => p.id));
+      })
+      .catch(() => {
+        if (!active) return;
+        setLinkedProfileIds([]);
+      });
+    return () => {
+      active = false;
+    };
+  }, [courseId, request]);
+
+  async function syncCourseResources(nextResources: CourseResourceItem[]) {
+    setIsSavingResources(true);
+    try {
+      const saved = await updateCourseResources(request, courseId, {
+        recursos: nextResources.map((item) => ({
+          nome: item.name,
+          ...(typeof item.fileId === 'number' && item.fileId > 0
+            ? { fileId: item.fileId }
+            : {}),
+          ...(item.type ? { tipo: item.type } : {}),
+          publico: item.public,
+        })),
+      });
+
+      setCourseResources(saved.map(mapApiCourseResourceToLocal));
+      toast.success('Recursos do curso atualizados.');
+    } catch {
+      toast.error('Nao foi possivel salvar os recursos do curso.');
+      void getCourseResources(request, courseId)
+        .then((items) =>
+          setCourseResources(items.map(mapApiCourseResourceToLocal))
+        )
+        .catch(() => undefined);
+    } finally {
+      setIsSavingResources(false);
+    }
+  }
+
+  async function handleCourseResourceFiles(files: File[]) {
+    if (files.length === 0) return;
+
+    setIsUploadingResources(true);
+    try {
+      const results = await Promise.allSettled(
+        files.map((file) =>
+          uploadFile(request, file, 'lms/courses/resources').then(
+            (uploaded): CourseResourceItem => ({
+              id: `new-${uploaded.id}`,
+              fileId: uploaded.id,
+              name: file.name,
+              size: formatFileSize(file.size),
+              type: file.type || file.name.split('.').pop() || 'file',
+              public: true,
+            })
+          )
+        )
+      );
+
+      const succeeded = results
+        .filter(
+          (result): result is PromiseFulfilledResult<CourseResourceItem> =>
+            result.status === 'fulfilled'
+        )
+        .map((result) => result.value);
+
+      const failedCount = results.filter(
+        (result) => result.status === 'rejected'
+      ).length;
+
+      if (failedCount > 0) {
+        toast.error(`Falha ao enviar ${failedCount} arquivo(s).`);
+      }
+
+      if (succeeded.length > 0) {
+        const nextResources = [...courseResources, ...succeeded];
+        await syncCourseResources(nextResources);
+      }
+    } finally {
+      setIsUploadingResources(false);
+    }
+  }
+
+  async function handleRemoveCourseResource(item: CourseResourceItem) {
+    const nextResources = courseResources.filter(
+      (resource) => resource.id !== item.id
+    );
+    await syncCourseResources(nextResources);
+
+    if (item.fileId) {
+      try {
+        await deleteFile(request, item.fileId);
+      } catch {
+        toast.error(
+          'Recurso removido do curso, mas nao foi possivel apagar o arquivo fisico.'
+        );
+      }
+    }
+  }
+
+  async function handleDownloadCourseResource(item: CourseResourceItem) {
+    if (!item.fileId) {
+      toast.error('Recurso sem arquivo para download.');
+      return;
+    }
+
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/open/${item.fileId}`,
+        method: 'PUT',
+      });
+      const url = response?.data?.url;
+      if (!url) {
+        toast.error('Nao foi possivel gerar o link de download.');
+        return;
+      }
+      window.open(url, '_blank', 'noopener,noreferrer');
+    } catch {
+      toast.error('Nao foi possivel baixar o recurso.');
+    }
+  }
+
   // ── File handlers ────────────────────────────────────────────────────────────
   async function openUploadedFile(fileId?: number | null) {
     if (!fileId) return;
@@ -817,6 +1250,38 @@ export function EditorCourse() {
     setInstructorEditSheetOpen(true);
   }
 
+  function handleEditVideoProfile(profileId: number) {
+    const profile = allVideoProfiles.find((p) => p.id === profileId);
+    if (!profile) return;
+    setEditingVideoProfileId(profileId);
+    setEditingVideoProfileName(profile.name);
+    setEditingVideoProfileParams(profile.ffmpeg_params);
+    setVideoProfileEditSheetOpen(true);
+  }
+
+  async function handleSaveVideoProfileEdit() {
+    if (!editingVideoProfileId) return;
+    try {
+      setSavingVideoProfileEdit(true);
+      await request({
+        url: `/lms/video-resolution-profiles/${editingVideoProfileId}`,
+        method: 'PATCH',
+        data: {
+          name: editingVideoProfileName,
+          ffmpeg_params: editingVideoProfileParams,
+        },
+      });
+      await refetchVideoProfiles();
+      setVideoProfileEditSheetOpen(false);
+      setEditingVideoProfileId(null);
+      toast.success('Perfil de vídeo atualizado com sucesso.');
+    } catch {
+      toast.error('Erro ao atualizar o perfil de vídeo.');
+    } finally {
+      setSavingVideoProfileEdit(false);
+    }
+  }
+
   async function handleEditCategory(categorySlug: string) {
     const category = (categoryListData?.data ?? []).find(
       (item) => item.slug === categorySlug
@@ -922,6 +1387,33 @@ export function EditorCourse() {
   }
 
   function onSubmit(data: CourseEditFormValues) {
+    if (data.status === 'ativo') {
+      const requiredProfileIds = new Set(linkedProfileIds);
+      const invalidLesson = lessons.find((lesson) => {
+        if (lesson.type !== 'video' || lesson.videoProvider !== 'file_storage') {
+          return false;
+        }
+
+        if (requiredProfileIds.size === 0) {
+          return true;
+        }
+
+        const resourceTypes = new Set(lesson.resources.map((res) => res.type));
+        return [...requiredProfileIds].some(
+          (profileId) => !resourceTypes.has(`video_profile:${profileId}`)
+        );
+      });
+
+      if (invalidLesson) {
+        toast.error(
+          linkedProfileIds.length === 0
+            ? 'Configure ao menos um perfil de vídeo antes de publicar o curso.'
+            : `A aula "${invalidLesson.title}" precisa de um vídeo para cada perfil antes da publicação.`
+        );
+        return;
+      }
+    }
+
     saveCourse(data);
   }
 
@@ -953,263 +1445,759 @@ export function EditorCourse() {
               {course.slug}
             </p>
           </div>
-          <Badge
-            variant={course.published ? 'default' : 'secondary'}
-            className="shrink-0 text-xs"
-          >
-            {course.published ? 'Publicado' : 'Rascunho'}
-          </Badge>
+          <div className="flex min-w-0 max-w-[56%] flex-wrap justify-end gap-1 sm:max-w-none sm:flex-nowrap sm:items-center sm:gap-1.5 sm:shrink-0">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      'h-5 gap-1 font-normal bg-sky-500/15 text-sky-700 dark:text-sky-400 border-sky-500/30 cursor-help',
+                      isMobile ? 'px-1 text-[0.6rem]' : 'px-1.5 text-[0.65rem]'
+                    )}
+                  >
+                    <Layers className="size-3" />
+                    {sessions.length}
+                    {!isMobile && (
+                      <> {sessions.length === 1 ? 'sessão' : 'sessões'}</>
+                    )}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  Total de sessões cadastradas neste curso.
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      'h-5 gap-1 font-normal bg-violet-500/15 text-violet-700 dark:text-violet-400 border-violet-500/30 cursor-help',
+                      isMobile ? 'px-1 text-[0.6rem]' : 'px-1.5 text-[0.65rem]'
+                    )}
+                  >
+                    <Video className="size-3" />
+                    {lessons.length}
+                    {!isMobile && (
+                      <> {lessons.length === 1 ? 'aula' : 'aulas'}</>
+                    )}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  Quantidade total de aulas do curso.
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      'h-5 gap-1 font-normal bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/30 cursor-help',
+                      isMobile ? 'px-1 text-[0.6rem]' : 'px-1.5 text-[0.65rem]'
+                    )}
+                  >
+                    <Clock className="size-3" />
+                    {durationLabel}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  Duração somada de todas as aulas.
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge
+                    className={cn(
+                      'h-5 gap-1 font-normal bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-0 hover:bg-emerald-500/20 cursor-help',
+                      isMobile ? 'px-1 text-[0.6rem]' : 'px-1.5 text-[0.65rem]'
+                    )}
+                  >
+                    <span className="size-1.5 rounded-full bg-emerald-500 inline-block" />
+                    {publishedCount}
+                    {!isMobile && ' publicadas'}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  Quantidade de aulas visiveis para os alunos.
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      'text-xs border-0 cursor-help',
+                      course.published
+                        ? 'bg-cyan-500/15 text-cyan-700 dark:text-cyan-400 hover:bg-cyan-500/20'
+                        : 'bg-slate-500/15 text-slate-700 dark:text-slate-400 hover:bg-slate-500/20'
+                    )}
+                  >
+                    {course.published ? 'Publicado' : 'Rascunho'}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  Status atual do curso.
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         </div>
 
         {/* ── Tabs ─────────────────────────────────────────────────────────── */}
         <Tabs
           value={activeTab}
           onValueChange={setActiveTab}
-          className="flex flex-col flex-1 min-h-0"
+          className="flex flex-1 min-h-0 min-w-0 flex-col"
         >
-          <TabsList className="mx-3 mt-3 h-auto shrink-0 grid w-[calc(100%-1.5rem)] grid-cols-4 rounded-lg bg-muted/80 p-1">
-            {(['estrutura', 'sobre', 'midia', 'extra'] as const).map((tab) => (
+          <TabsList
+            className={cn(
+              'mx-3 mt-3 h-auto shrink-0 w-[calc(100%-1.5rem)] rounded-lg bg-muted/80 p-1',
+              'flex items-center gap-1 overflow-x-auto overflow-y-hidden whitespace-nowrap',
+              isMobile
+                ? 'touch-pan-x snap-x snap-mandatory [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/35'
+                : '[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden'
+            )}
+          >
+            {(
+              [
+                'estrutura',
+                'sobre',
+                'midia',
+                'recursos',
+                'extra',
+                ...(showVideoTab ? ['videos'] : []),
+                'publicacao',
+              ] as const
+            ).map((tab) => (
               <TabsTrigger
                 key={tab}
                 value={tab}
-                className="h-8 px-2 text-xs font-medium"
+                className={cn(
+                  'shrink-0 font-medium',
+                  isMobile
+                    ? 'h-7 snap-start px-2.5 text-[11px]'
+                    : 'h-8 px-3 text-xs'
+                )}
               >
                 {tab === 'estrutura'
-                  ? 'Estrutura'
+                  ? t('structureEditor.tabs.structure')
                   : tab === 'sobre'
-                    ? 'Sobre'
+                    ? t('structureEditor.tabs.about')
                     : tab === 'midia'
-                      ? 'Mídia'
-                      : 'Extra'}
+                      ? t('structureEditor.tabs.media')
+                      : tab === 'recursos'
+                        ? t('structureEditor.tabs.resources')
+                        : tab === 'extra'
+                          ? t('structureEditor.tabs.extra')
+                          : tab === 'videos'
+                            ? t('structureEditor.tabs.videoProfiles')
+                            : t('structureEditor.tabs.publish')}
               </TabsTrigger>
             ))}
           </TabsList>
 
-          <div className="flex-1 min-h-0 overflow-hidden">
-            <ScrollArea className="h-full">
-              <div className="p-3 flex flex-col gap-3">
-                {/* ── Tab: Estrutura ──────────────────────────────────────── */}
-                <TabsContent
-                  value="estrutura"
-                  className="mt-0 flex flex-col gap-3"
-                >
-                  {/* Stat chips */}
-                  <Card className="bg-muted/20 py-2 gap-2">
-                    <CardHeader className="px-3 pt-2 pb-0">
-                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Resumo do conteúdo
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="px-3 pb-2">
-                      <div className="grid grid-cols-2 gap-2">
-                        <StatChip
-                          icon={<Layers className="size-3 text-blue-500" />}
-                          label="Sessões"
-                          value={sessions.length}
-                        />
-                        <StatChip
-                          icon={<Video className="size-3 text-violet-500" />}
-                          label="Aulas"
-                          value={lessons.length}
-                        />
-                        <StatChip
-                          icon={<Clock className="size-3 text-amber-500" />}
-                          label="Duração"
-                          value={
-                            hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`
-                          }
-                        />
-                        <StatChip
-                          icon={
-                            <CheckCircle2 className="size-3 text-emerald-500" />
-                          }
-                          label="Publicadas"
-                          value={publishedCount}
-                        />
-                      </div>
-                    </CardContent>
-                  </Card>
-
-                  {/* Dados principais */}
-                  <Card className="bg-muted/20 py-2 gap-2">
-                    <CardHeader className="px-3 pt-2 pb-0">
-                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Dados principais
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="px-3 pb-2 flex flex-col gap-3">
+          <div className="flex-1 min-h-0 min-w-0 overflow-x-hidden overflow-y-auto overscroll-contain">
+            <div className="flex min-w-0 flex-col gap-3 p-2 sm:p-3">
+              {/* ── Tab: Estrutura ──────────────────────────────────────── */}
+              <TabsContent
+                value="estrutura"
+                className="mt-0 flex min-w-0 flex-col gap-3"
+              >
+                {/* Dados principais */}
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-0">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      {t('structureEditor.structureTab.mainInfo.title')}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                    <FormField
+                      control={form.control}
+                      name="tituloComercial"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-xs">
+                            {t(
+                              'structureEditor.structureTab.mainInfo.fields.title'
+                            )}
+                          </FormLabel>
+                          <FormControl>
+                            <Input {...field} className="h-8 text-sm" />
+                          </FormControl>
+                          <FormMessage className="text-xs" />
+                        </FormItem>
+                      )}
+                    />
+                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                       <FormField
                         control={form.control}
-                        name="tituloComercial"
+                        name="nomeInterno"
                         render={({ field }) => (
                           <FormItem>
-                            <FormLabel className="text-xs">Título</FormLabel>
+                            <FormLabel className="text-xs">
+                              {t(
+                                'structureEditor.structureTab.mainInfo.fields.internalName'
+                              )}
+                            </FormLabel>
                             <FormControl>
-                              <Input {...field} className="h-8 text-sm" />
+                              <Input {...field} className="h-8 text-xs" />
                             </FormControl>
                             <FormMessage className="text-xs" />
                           </FormItem>
                         )}
                       />
-                      <div className="grid grid-cols-2 gap-2">
-                        <FormField
-                          control={form.control}
-                          name="nomeInterno"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel className="text-xs">
-                                Nome Interno
-                              </FormLabel>
-                              <FormControl>
-                                <Input {...field} className="h-8 text-xs" />
-                              </FormControl>
-                              <FormMessage className="text-xs" />
-                            </FormItem>
-                          )}
-                        />
-                        <FormField
-                          control={form.control}
-                          name="slug"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel className="text-xs">Slug</FormLabel>
-                              <FormControl>
-                                <Input
-                                  {...field}
-                                  className="h-8 text-xs font-mono"
-                                  onChange={(e) =>
-                                    field.onChange(e.target.value.toLowerCase())
-                                  }
-                                />
-                              </FormControl>
-                              <FormMessage className="text-xs" />
-                            </FormItem>
-                          )}
-                        />
-                      </div>
-                    </CardContent>
-                  </Card>
-
-                  {/* Descrição */}
-                  <Card className="bg-muted/20 py-2 gap-2">
-                    <CardHeader className="px-3 pt-2 pb-0">
-                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Descrição
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="px-3 pb-2">
                       <FormField
                         control={form.control}
-                        name="descricaoPublica"
+                        name="slug"
                         render={({ field }) => (
                           <FormItem>
+                            <FormLabel className="text-xs">
+                              {t(
+                                'structureEditor.structureTab.mainInfo.fields.slug'
+                              )}
+                            </FormLabel>
                             <FormControl>
-                              <RichTextEditor
-                                value={field.value}
-                                onChange={field.onChange}
+                              <Input
+                                {...field}
+                                className="h-8 text-xs font-mono"
+                                onChange={(e) =>
+                                  field.onChange(e.target.value.toLowerCase())
+                                }
                               />
                             </FormControl>
                             <FormMessage className="text-xs" />
                           </FormItem>
                         )}
                       />
-                    </CardContent>
-                  </Card>
-                </TabsContent>
-
-                {/* ── Tab: Sobre ──────────────────────────────────────────── */}
-                <TabsContent value="sobre" className="mt-0 flex flex-col gap-3">
-                  <CourseClassificationCard
-                    form={form}
-                    t={t}
-                    levels={NIVEIS}
-                    statuses={STATUS_OPTIONS}
-                    offeringTypes={OFFERING_TYPE_OPTIONS}
-                  />
-                  <CourseRelationsCard
-                    form={form}
-                    t={t}
-                    categoryOptions={categoryOptions}
-                    instructorOptions={instructorOptions}
-                    onCreateCategory={handleCreateCategory}
-                    onCreateInstructor={handleCreateInstructor}
-                    onEditCategory={handleEditCategory}
-                    onEditInstructor={handleEditInstructor}
-                  />
-                  <CourseContentCard form={form} />
-                </TabsContent>
-
-                {/* ── Tab: Mídia ──────────────────────────────────────────── */}
-                <TabsContent value="midia" className="mt-0">
-                  <CourseMediaCard
-                    logoPreview={logoPreview}
-                    bannerPreview={bannerPreview}
-                    uploadingLogo={uploadingLogo}
-                    uploadingBanner={uploadingBanner}
-                    onLogoSelect={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      handleFileSelect(e, setLogoPreview, 'logo')
-                    }
-                    onBannerSelect={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      handleFileSelect(e, setBannerPreview, 'banner')
-                    }
-                    logoFile={
-                      apiCourse?.logoFileId
-                        ? {
-                            id: apiCourse.logoFileId,
-                            name:
-                              apiCourse.logoFilename ||
-                              `#${apiCourse.logoFileId}`,
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Descrição */}
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-0">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      {t('structureEditor.structureTab.description.title')}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2">
+                    <FormField
+                      control={form.control}
+                      name="descricaoPublica"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <RichTextEditor
+                              value={field.value}
+                              onChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormMessage className="text-xs" />
+                        </FormItem>
+                      )}
+                    />
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              {/* ── Tab: Sobre ──────────────────────────────────────────── */}
+              <TabsContent
+                value="sobre"
+                className="mt-0 flex min-w-0 flex-col gap-3"
+              >
+                <CourseClassificationCard
+                  form={form}
+                  t={t}
+                  levels={NIVEIS}
+                  statuses={STATUS_OPTIONS}
+                  offeringTypes={OFFERING_TYPE_OPTIONS}
+                />
+                <CourseRelationsCard
+                  form={form}
+                  t={t}
+                  categoryOptions={categoryOptions}
+                  projectOptions={projectOptions}
+                  instructorOptions={instructorOptions}
+                  onCreateCategory={handleCreateCategory}
+                  onCreateInstructor={handleCreateInstructor}
+                  onEditCategory={handleEditCategory}
+                  onEditInstructor={handleEditInstructor}
+                />
+                <CourseContentCard form={form} />
+              </TabsContent>
+
+              {/* ── Tab: Mídia ──────────────────────────────────────────── */}
+              <TabsContent value="midia" className="mt-0 min-w-0">
+                <CourseMediaCard
+                  logoPreview={logoPreview}
+                  bannerPreview={bannerPreview}
+                  uploadingLogo={uploadingLogo}
+                  uploadingBanner={uploadingBanner}
+                  onLogoSelect={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleFileSelect(e, setLogoPreview, 'logo')
+                  }
+                  onBannerSelect={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleFileSelect(e, setBannerPreview, 'banner')
+                  }
+                  logoFile={
+                    apiCourse?.logoFileId
+                      ? {
+                          id: apiCourse.logoFileId,
+                          name:
+                            apiCourse.logoFilename ||
+                            `#${apiCourse.logoFileId}`,
+                        }
+                      : undefined
+                  }
+                  bannerFile={
+                    apiCourse?.bannerFileId
+                      ? {
+                          id: apiCourse.bannerFileId,
+                          name:
+                            apiCourse.bannerFilename ||
+                            `#${apiCourse.bannerFileId}`,
+                        }
+                      : undefined
+                  }
+                  onOpenLogoFile={() => openUploadedFile(apiCourse?.logoFileId)}
+                  onOpenBannerFile={() =>
+                    openUploadedFile(apiCourse?.bannerFileId)
+                  }
+                  onRemoveLogoFile={
+                    apiCourse?.logoFileId
+                      ? () => handleRemoveFile('logo')
+                      : undefined
+                  }
+                  onRemoveBannerFile={
+                    apiCourse?.bannerFileId
+                      ? () => handleRemoveFile('banner')
+                      : undefined
+                  }
+                  logoImageType={apiCourse?.logoImageType}
+                  bannerImageType={apiCourse?.bannerImageType}
+                  t={t}
+                />
+              </TabsContent>
+
+              {/* ── Tab: Recursos ─────────────────────────────────────── */}
+              <TabsContent
+                value="recursos"
+                className="mt-0 flex min-w-0 flex-col gap-3"
+              >
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-0">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      {t('structureEditor.resources.title')}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      aria-label={t(
+                        'structureEditor.resources.dropzoneAriaLabel'
+                      )}
+                      aria-disabled={isUploadingResources || isSavingResources}
+                      onDragOver={(event) => {
+                        event.preventDefault();
+                        if (!isUploadingResources && !isSavingResources)
+                          setResourcesDragOver(true);
+                      }}
+                      onDragLeave={() => setResourcesDragOver(false)}
+                      onDrop={(event) => {
+                        event.preventDefault();
+                        setResourcesDragOver(false);
+                        if (!isUploadingResources && !isSavingResources) {
+                          void handleCourseResourceFiles(
+                            Array.from(event.dataTransfer.files)
+                          );
+                        }
+                      }}
+                      onClick={() => {
+                        if (!isUploadingResources && !isSavingResources) {
+                          resourcesInputRef.current?.click();
+                        }
+                      }}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault();
+                          if (!isUploadingResources && !isSavingResources) {
+                            resourcesInputRef.current?.click();
                           }
-                        : undefined
-                    }
-                    bannerFile={
-                      apiCourse?.bannerFileId
-                        ? {
-                            id: apiCourse.bannerFileId,
-                            name:
-                              apiCourse.bannerFilename ||
-                              `#${apiCourse.bannerFileId}`,
+                        }
+                      }}
+                      className={cn(
+                        'flex flex-col items-center justify-center gap-2 py-7 rounded-lg border-2 border-dashed transition-colors select-none',
+                        isUploadingResources || isSavingResources
+                          ? 'cursor-wait border-border opacity-60'
+                          : 'cursor-pointer',
+                        !isUploadingResources &&
+                          !isSavingResources &&
+                          resourcesDragOver
+                          ? 'border-primary/70 bg-primary/5'
+                          : !isUploadingResources && !isSavingResources
+                            ? 'border-border hover:border-primary/40 hover:bg-muted/30'
+                            : ''
+                      )}
+                    >
+                      {isUploadingResources || isSavingResources ? (
+                        <Loader2 className="size-7 animate-spin text-muted-foreground/50" />
+                      ) : (
+                        <UploadCloud
+                          className={cn(
+                            'size-7 transition-colors',
+                            resourcesDragOver
+                              ? 'text-primary'
+                              : 'text-muted-foreground/50'
+                          )}
+                        />
+                      )}
+                      <div className="text-center">
+                        <p className="text-xs font-medium">
+                          {isUploadingResources
+                            ? t('structureEditor.resources.uploading')
+                            : isSavingResources
+                              ? t('structureEditor.resources.saving')
+                              : t('structureEditor.resources.idle')}
+                        </p>
+                        {!isUploadingResources && !isSavingResources && (
+                          <p className="text-xs text-muted-foreground">
+                            {t('structureEditor.resources.helper')}
+                          </p>
+                        )}
+                      </div>
+                      <input
+                        ref={resourcesInputRef}
+                        type="file"
+                        multiple
+                        className="hidden"
+                        onChange={(event) => {
+                          if (event.target.files) {
+                            void handleCourseResourceFiles(
+                              Array.from(event.target.files)
+                            );
+                            event.target.value = '';
                           }
-                        : undefined
-                    }
-                    onOpenLogoFile={() =>
-                      openUploadedFile(apiCourse?.logoFileId)
-                    }
-                    onOpenBannerFile={() =>
-                      openUploadedFile(apiCourse?.bannerFileId)
-                    }
-                    onRemoveLogoFile={
-                      apiCourse?.logoFileId
-                        ? () => handleRemoveFile('logo')
-                        : undefined
-                    }
-                    onRemoveBannerFile={
-                      apiCourse?.bannerFileId
-                        ? () => handleRemoveFile('banner')
-                        : undefined
-                    }
-                    logoImageType={apiCourse?.logoImageType}
-                    bannerImageType={apiCourse?.bannerImageType}
-                    t={t}
-                  />
-                </TabsContent>
+                        }}
+                      />
+                    </div>
+
+                    {courseResources.length === 0 ? (
+                      <p className="text-center text-xs text-muted-foreground py-1">
+                        {t('structureEditor.resources.empty')}
+                      </p>
+                    ) : (
+                      <div className="flex flex-col gap-1">
+                        {courseResources.map((item) => {
+                          const ItemIcon = getResourceIcon(item.type);
+                          return (
+                            <div
+                              key={item.id}
+                              className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2"
+                            >
+                              <ItemIcon
+                                className={cn(
+                                  'size-3.5 shrink-0',
+                                  getResourceIconColor(item.type)
+                                )}
+                              />
+                              <div className="flex-1 min-w-0">
+                                <p className="text-xs truncate font-medium">
+                                  {item.name}
+                                </p>
+                                <p className="text-[0.65rem] text-muted-foreground">
+                                  {item.size ||
+                                    t('structureEditor.resources.attachedFile')}
+                                </p>
+                              </div>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                                onClick={() =>
+                                  void handleDownloadCourseResource(item)
+                                }
+                                aria-label={t(
+                                  'structureEditor.resources.downloadAria',
+                                  { name: item.name }
+                                )}
+                              >
+                                <Download className="size-3" />
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                                onClick={() =>
+                                  void handleRemoveCourseResource(item)
+                                }
+                                aria-label={t(
+                                  'structureEditor.resources.removeAria',
+                                  { name: item.name }
+                                )}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              {/* ── Tab: Extra ──────────────────────────────────────────── */}
+              <TabsContent
+                value="extra"
+                className="mt-0 flex min-w-0 flex-col gap-3"
+              >
+                <CourseCertificateCard
+                  form={form}
+                  t={t}
+                  options={certificateOptions}
+                  onCreateTemplate={handleCreateCertificateTemplate}
+                />
+                <CourseFlagsCard form={form} t={t} />
+                <CourseDangerZoneCard
+                  t={t}
+                  onDelete={() => setDeleteDialogOpen(true)}
+                />
+              </TabsContent>
+
+              {/* ── Tab: Vídeos (on_demand / blended only) ─────────────── */}
+              {showVideoTab && (
+                <TabsContent
+                  value="videos"
+                  className="mt-0 flex min-w-0 flex-col gap-3"
+                >
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-0">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        {t('structureEditor.videoProfiles.title')}
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-2">
+                      <EntityPicker
+                        key={videoProfilePickerResetKey}
+                        placeholder={t(
+                          'structureEditor.videoProfiles.placeholder'
+                        )}
+                        options={availableVideoProfiles}
+                        getOptionValue={(opt) => opt.id}
+                        getOptionLabel={(opt) => opt.name}
+                        onChange={(_val, opt) => {
+                          if (opt && !linkedProfileIds.includes(opt.id)) {
+                            setLinkedProfileIds((prev) => [...prev, opt.id]);
+                            setVideoProfilePickerResetKey(
+                              (current) => current + 1
+                            );
+                          }
+                        }}
+                        showCreateButton
+                        createTitle={t(
+                          'structureEditor.videoProfiles.createTitle'
+                        )}
+                        createFields={[
+                          {
+                            name: 'name',
+                            label: t(
+                              'structureEditor.videoProfiles.createFields.name.label'
+                            ),
+                            placeholder: t(
+                              'structureEditor.videoProfiles.createFields.name.placeholder'
+                            ),
+                            required: true,
+                          },
+                          {
+                            name: 'ffmpeg_params',
+                            label: t(
+                              'structureEditor.videoProfiles.createFields.ffmpegParams.label'
+                            ),
+                            placeholder: t(
+                              'structureEditor.videoProfiles.createFields.ffmpegParams.placeholder'
+                            ),
+                            required: true,
+                          },
+                        ]}
+                        onCreate={async (values) => {
+                          try {
+                            const response = await request<VideoProfileOption>({
+                              url: '/lms/video-resolution-profiles',
+                              method: 'POST',
+                              data: {
+                                name: values.name,
+                                ffmpeg_params: values.ffmpeg_params,
+                              },
+                            });
+                            await refetchVideoProfiles();
+                            return response.data;
+                          } catch {
+                            toast.error(
+                              t('structureEditor.videoProfiles.createError')
+                            );
+                            return null;
+                          }
+                        }}
+                      />
 
-                {/* ── Tab: Extra ──────────────────────────────────────────── */}
-                <TabsContent value="extra" className="mt-0 flex flex-col gap-3">
-                  <CourseCertificateCard
-                    form={form}
-                    t={t}
-                    options={certificateOptions}
-                    onCreateTemplate={handleCreateCertificateTemplate}
-                  />
-                  <CourseFlagsCard form={form} t={t} />
-                  <CourseDangerZoneCard
-                    t={t}
-                    onDelete={() => setDeleteDialogOpen(true)}
-                  />
+                      {isFetchingVideoProfiles ? (
+                        <div className="flex flex-col gap-1">
+                          {Array.from({ length: 3 }).map((_, index) => (
+                            <div
+                              key={`video-profile-skeleton-${index}`}
+                              className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2"
+                            >
+                              <Skeleton className="size-3.5 rounded-full shrink-0" />
+                              <Skeleton className="h-3 w-full max-w-56" />
+                            </div>
+                          ))}
+                        </div>
+                      ) : linkedProfileIds.length === 0 ? (
+                        <p className="text-center text-xs text-muted-foreground py-1">
+                          {t('structureEditor.videoProfiles.empty')}
+                        </p>
+                      ) : (
+                        <div className="flex flex-col gap-1">
+                          {linkedProfileIds.map((profileId) => {
+                            const profile = allVideoProfiles.find(
+                              (p) => p.id === profileId
+                            );
+                            return (
+                              <div
+                                key={profileId}
+                                className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2"
+                              >
+                                <Video className="size-3.5 shrink-0 text-violet-500" />
+                                <div className="flex-1 min-w-0">
+                                  <p className="text-xs font-medium truncate">
+                                    {profile?.name?.trim()
+                                      ? profile.name
+                                      : t(
+                                          'structureEditor.videoProfiles.fallbackName',
+                                          {
+                                            id: profileId,
+                                          }
+                                        )}
+                                  </p>
+                                </div>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                                  onClick={() =>
+                                    handleEditVideoProfile(profileId)
+                                  }
+                                  aria-label={t(
+                                    'structureEditor.videoProfiles.editAria'
+                                  )}
+                                >
+                                  <Pencil className="size-3" />
+                                </Button>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                                  onClick={() =>
+                                    setLinkedProfileIds((prev) =>
+                                      prev.filter((id) => id !== profileId)
+                                    )
+                                  }
+                                  aria-label={t(
+                                    'structureEditor.videoProfiles.removeAria'
+                                  )}
+                                >
+                                  <X className="size-3" />
+                                </Button>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
                 </TabsContent>
-              </div>
-            </ScrollArea>
+              )}
+
+              {/* ── Tab: Publicação ─────────────────────────────────────── */}
+              <TabsContent
+                value="publicacao"
+                className="mt-0 flex min-w-0 flex-col gap-3"
+              >
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-0">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      {t('structureEditor.publishChecklist.title')}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2 flex flex-col gap-2">
+                    {checklistItems.map((item) => (
+                      <div
+                        key={item.id}
+                        className="flex items-center gap-2 rounded-md border bg-background/80 px-2.5 py-2"
+                      >
+                        {item.done ? (
+                          <CheckCircle2 className="size-4 shrink-0 text-emerald-500" />
+                        ) : (
+                          <AlertTriangle className="size-4 shrink-0 text-amber-500" />
+                        )}
+                        <div className="flex-1 min-w-0">
+                          <p className="text-xs font-medium truncate">
+                            {item.label}
+                          </p>
+                          {!item.done && (
+                            <p className="text-[0.65rem] text-muted-foreground">
+                              {item.required
+                                ? t('structureEditor.publishChecklist.required')
+                                : t(
+                                    'structureEditor.publishChecklist.recommended'
+                                  )}
+                            </p>
+                          )}
+                        </div>
+                        <Badge
+                          variant={item.done ? 'default' : 'secondary'}
+                          className="text-[0.65rem]"
+                        >
+                          {item.done
+                            ? t('structureEditor.publishChecklist.done')
+                            : t('structureEditor.publishChecklist.missing')}
+                        </Badge>
+                      </div>
+                    ))}
+                  </CardContent>
+                </Card>
+
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-0">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      {t('structureEditor.publishChecklist.statusTitle')}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2 flex items-center justify-between gap-2">
+                    <p className="text-xs text-muted-foreground">
+                      {t('structureEditor.publishChecklist.statusProgress', {
+                        completed: completedRequired,
+                        total: requiredChecklist.length,
+                      })}
+                    </p>
+                    <Badge variant={isReadyToPublish ? 'default' : 'secondary'}>
+                      {isReadyToPublish
+                        ? t('structureEditor.publishChecklist.ready')
+                        : t('structureEditor.publishChecklist.notReady')}
+                    </Badge>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+            </div>
           </div>
         </Tabs>
 
@@ -1226,7 +2214,7 @@ export function EditorCourse() {
               onClick={() => form.reset()}
             >
               <Undo2 className="size-3 mr-1" />
-              Cancelar
+              {t('structureEditor.footer.cancel')}
             </Button>
             <div className="flex-1" />
             <Button
@@ -1238,7 +2226,7 @@ export function EditorCourse() {
               onClick={() => createSessionMutation.mutate()}
             >
               <Plus className="size-3 mr-1" />
-              Nova sessão
+              {t('structureEditor.footer.newSession')}
             </Button>
             <Button
               type="submit"
@@ -1251,7 +2239,7 @@ export function EditorCourse() {
               ) : (
                 <Save className="size-3 mr-1" />
               )}
-              Salvar
+              {t('structureEditor.footer.save')}
             </Button>
           </div>
         </div>
@@ -1284,6 +2272,68 @@ export function EditorCourse() {
         }}
       />
 
+      <Sheet
+        open={videoProfileEditSheetOpen}
+        onOpenChange={(open) => {
+          setVideoProfileEditSheetOpen(open);
+          if (!open) setEditingVideoProfileId(null);
+        }}
+      >
+        <ResizableSheetContent
+          sheetId="lms-course-structure-video-profile-edit-sheet"
+          defaultWidth={560}
+          minWidth={420}
+          maxWidth={920}
+          className="sm:max-w-lg"
+        >
+          <SheetHeader>
+            <SheetTitle>
+              {t('structureEditor.videoProfiles.sheet.title')}
+            </SheetTitle>
+            <SheetDescription>
+              {t('structureEditor.videoProfiles.sheet.description')}
+            </SheetDescription>
+          </SheetHeader>
+          <div className="space-y-3 px-4 pb-4 pt-2">
+            <div className="space-y-1.5">
+              <FormLabel>
+                {t('structureEditor.videoProfiles.createFields.name.label')}
+              </FormLabel>
+              <Input
+                value={editingVideoProfileName}
+                onChange={(e) => setEditingVideoProfileName(e.target.value)}
+                placeholder={t(
+                  'structureEditor.videoProfiles.createFields.name.placeholder'
+                )}
+              />
+            </div>
+            <FfmpegParamsEditor
+              value={editingVideoProfileParams}
+              onChange={setEditingVideoProfileParams}
+            />
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setVideoProfileEditSheetOpen(false)}
+                disabled={savingVideoProfileEdit}
+              >
+                {t('structureEditor.videoProfiles.sheet.actions.cancel')}
+              </Button>
+              <Button
+                type="button"
+                disabled={savingVideoProfileEdit}
+                onClick={() => void handleSaveVideoProfileEdit()}
+              >
+                {savingVideoProfileEdit
+                  ? t('structureEditor.videoProfiles.sheet.actions.saving')
+                  : t('structureEditor.videoProfiles.sheet.actions.save')}
+              </Button>
+            </div>
+          </div>
+        </ResizableSheetContent>
+      </Sheet>
+
       <Sheet
         open={categoryEditSheetOpen}
         onOpenChange={(open) => {
@@ -1300,7 +2350,13 @@ export function EditorCourse() {
           }
         }}
       >
-        <SheetContent className="sm:max-w-lg">
+        <ResizableSheetContent
+          sheetId="lms-course-structure-category-edit-sheet"
+          defaultWidth={560}
+          minWidth={420}
+          maxWidth={920}
+          className="sm:max-w-lg"
+        >
           <SheetHeader>
             <SheetTitle>Editar categoria</SheetTitle>
             <SheetDescription>
@@ -1350,7 +2406,7 @@ export function EditorCourse() {
               Salvar
             </Button>
           </SheetFooter>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       {/* ── Delete dialog ────────────────────────────────────────────────── */}