@hed-hog/lms 0.0.350 → 0.0.351

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

@@ -15,6 +15,7 @@ import {
   FileText,
   Layers,
   Loader2,
+  Pencil,
   Plus,
   Save,
   Undo2,
@@ -30,6 +31,7 @@ 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';
@@ -42,6 +44,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
   FormControl,
@@ -51,17 +54,24 @@ 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';
@@ -95,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;
@@ -138,6 +149,13 @@ type ApiCourseDetail = {
   operationsProjectName?: string | null;
 };
 
+type VideoProfileOption = {
+  id: number;
+  name: string;
+  ffmpeg_params: string;
+  status: string;
+};
+
 type ApiCategory = { id: number; slug: string; name: string };
 type ApiCategoryDetail = {
   id: number;
@@ -246,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']) {
@@ -309,7 +338,7 @@ function mapApiCourseResourceToLocal(
 ): CourseResourceItem {
   return {
     id: String(item.id),
-    fileId: item.fileId ?? null,
+    fileId: item.fileId ?? undefined,
     name: item.nome,
     size: '',
     type: item.tipo ?? 'file',
@@ -326,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(),
@@ -367,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();
 
@@ -414,6 +446,18 @@ export function EditorCourse() {
   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>(
@@ -525,6 +569,22 @@ export function EditorCourse() {
     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) => {
@@ -534,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,
@@ -560,6 +621,15 @@ export function EditorCourse() {
       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,
@@ -586,6 +656,7 @@ export function EditorCourse() {
     resolver: zodResolver(schema),
     defaultValues: {
       slug: '',
+      code: '',
       nomeInterno: '',
       tituloComercial: '',
       descricaoPublica: '',
@@ -716,15 +787,27 @@ 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();
@@ -789,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 ?? '',
@@ -855,6 +939,32 @@ export function EditorCourse() {
     };
   }, [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 {
@@ -1140,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
@@ -1245,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);
   }
 
@@ -1276,21 +1445,123 @@ 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-6 rounded-lg bg-muted/80 p-1">
+          <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',
@@ -1298,13 +1569,19 @@ export function EditorCourse() {
                 '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'
                   ? t('structureEditor.tabs.structure')
@@ -1316,349 +1593,498 @@ export function EditorCourse() {
                         ? t('structureEditor.tabs.resources')
                         : tab === 'extra'
                           ? t('structureEditor.tabs.extra')
-                          : t('structureEditor.tabs.publish')}
+                          : 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}
-                    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">
-                  <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>
 
-                {/* ── Tab: Recursos ─────────────────────────────────────── */}
+                    {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="recursos"
-                  className="mt-0 flex flex-col gap-3"
+                  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">
-                        Recursos para download do curso
+                        {t('structureEditor.videoProfiles.title')}
                       </CardTitle>
                     </CardHeader>
-                    <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        aria-label="Soltar arquivo ou clicar para selecionar"
-                        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)
+                    <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
                             );
                           }
                         }}
-                        onClick={() => {
-                          if (!isUploadingResources && !isSavingResources) {
-                            resourcesInputRef.current?.click();
-                          }
-                        }}
-                        onKeyDown={(event) => {
-                          if (event.key === 'Enter' || event.key === ' ') {
-                            event.preventDefault();
-                            if (!isUploadingResources && !isSavingResources) {
-                              resourcesInputRef.current?.click();
-                            }
+                        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;
                           }
                         }}
-                        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
-                              ? 'Enviando arquivos...'
-                              : isSavingResources
-                                ? 'Salvando recursos...'
-                                : 'Arraste arquivos para adicionar'}
-                          </p>
-                          {!isUploadingResources && !isSavingResources && (
-                            <p className="text-xs text-muted-foreground">
-                              Clique para selecionar arquivos
-                            </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 = '';
-                            }
-                          }}
-                        />
-                      </div>
+                      />
 
-                      {courseResources.length === 0 ? (
+                      {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">
-                          Nenhum recurso de curso cadastrado ainda.
+                          {t('structureEditor.videoProfiles.empty')}
                         </p>
                       ) : (
                         <div className="flex flex-col gap-1">
-                          {courseResources.map((item) => {
-                            const ItemIcon = getResourceIcon(item.type);
+                          {linkedProfileIds.map((profileId) => {
+                            const profile = allVideoProfiles.find(
+                              (p) => p.id === profileId
+                            );
                             return (
                               <div
-                                key={item.id}
+                                key={profileId}
                                 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)
-                                  )}
-                                />
+                                <Video className="size-3.5 shrink-0 text-violet-500" />
                                 <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 || 'Arquivo anexado'}
+                                  <p className="text-xs font-medium truncate">
+                                    {profile?.name?.trim()
+                                      ? profile.name
+                                      : t(
+                                          'structureEditor.videoProfiles.fallbackName',
+                                          {
+                                            id: profileId,
+                                          }
+                                        )}
                                   </p>
                                 </div>
                                 <Button
@@ -1667,11 +2093,13 @@ export function EditorCourse() {
                                   size="icon"
                                   className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
                                   onClick={() =>
-                                    void handleDownloadCourseResource(item)
+                                    handleEditVideoProfile(profileId)
                                   }
-                                  aria-label={`Baixar ${item.name}`}
+                                  aria-label={t(
+                                    'structureEditor.videoProfiles.editAria'
+                                  )}
                                 >
-                                  <Download className="size-3" />
+                                  <Pencil className="size-3" />
                                 </Button>
                                 <Button
                                   type="button"
@@ -1679,9 +2107,13 @@ export function EditorCourse() {
                                   size="icon"
                                   className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
                                   onClick={() =>
-                                    void handleRemoveCourseResource(item)
+                                    setLinkedProfileIds((prev) =>
+                                      prev.filter((id) => id !== profileId)
+                                    )
                                   }
-                                  aria-label={`Remover ${item.name}`}
+                                  aria-label={t(
+                                    'structureEditor.videoProfiles.removeAria'
+                                  )}
                                 >
                                   <X className="size-3" />
                                 </Button>
@@ -1693,98 +2125,79 @@ export function EditorCourse() {
                     </CardContent>
                   </Card>
                 </TabsContent>
+              )}
 
-                {/* ── 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)}
-                  />
-                </TabsContent>
-
-                {/* ── Tab: Publicação ─────────────────────────────────────── */}
-                <TabsContent
-                  value="publicacao"
-                  className="mt-0 flex 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}
+              {/* ── 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>
-                            {!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>
-            </ScrollArea>
+                        <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>
 
@@ -1801,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
@@ -1813,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"
@@ -1826,7 +2239,7 @@ export function EditorCourse() {
               ) : (
                 <Save className="size-3 mr-1" />
               )}
-              Salvar
+              {t('structureEditor.footer.save')}
             </Button>
           </div>
         </div>
@@ -1859,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) => {
@@ -1875,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>
@@ -1925,7 +2406,7 @@ export function EditorCourse() {
               Salvar
             </Button>
           </SheetFooter>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       {/* ── Delete dialog ────────────────────────────────────────────────── */}