@hed-hog/lms 0.0.350 → 0.0.353

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

@@ -19,7 +19,9 @@ import {
   Loader2,
   Lock,
   Pencil,
+  Play,
   Plus,
+  RefreshCw,
   Save,
   Trash2,
   Undo2,
@@ -48,6 +50,8 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Select,
@@ -59,7 +63,6 @@ import {
 import { Separator } from '@/components/ui/separator';
 import {
   Sheet,
-  SheetContent,
   SheetFooter,
   SheetHeader,
   SheetTitle,
@@ -86,11 +89,15 @@ import {
 import { CSS } from '@dnd-kit/utilities';
 
 import { RichTextEditor } from '@/components/rich-text-editor';
-import { useApp } from '@hed-hog/next-app-provider';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   deleteFile,
+  enqueueLessonVideoConversion,
+  getQueueJob,
   uploadFile,
+  type QueueJobResponse,
+  type QueueJobStatus,
 } from '../_data/services/course-structure.service';
 import {
   useDeleteLessonMutation,
@@ -128,6 +135,68 @@ function formatFileSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
+function videoProfileResourceType(profileId: number): string {
+  return `video_profile:${profileId}`;
+}
+
+const MAX_VIDEO_UPLOAD_SIZE_BYTES = 100 * 1024 * 1024;
+
+type LessonEditorTab =
+  | 'dados'
+  | 'conteudo'
+  | 'videos'
+  | 'transcricao'
+  | 'recursos';
+
+const ACTIVE_VIDEO_JOB_STATUSES: QueueJobStatus[] = [
+  'pending',
+  'scheduled',
+  'processing',
+  'retrying',
+];
+
+const TERMINAL_VIDEO_JOB_STATUSES: QueueJobStatus[] = [
+  'completed',
+  'failed',
+  'canceled',
+  'dead_letter',
+];
+
+const VIDEO_JOB_STATUS_COLORS: Record<QueueJobStatus, string> = {
+  pending: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+  scheduled: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+  processing: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+  retrying:
+    'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300',
+  completed:
+    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+  failed: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+  canceled: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
+  dead_letter: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
+};
+
+function formatDateTimeLabel(value?: string | null): string | null {
+  if (!value) return null;
+
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return null;
+
+  return new Intl.DateTimeFormat('pt-BR', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(parsed);
+}
+
+function formatDurationLabel(durationMs?: number | null): string | null {
+  if (durationMs == null) return null;
+  if (durationMs < 1000) return `${durationMs} ms`;
+
+  const seconds = durationMs / 1000;
+  if (seconds < 60) return `${seconds.toFixed(1)} s`;
+
+  return `${(seconds / 60).toFixed(1)} min`;
+}
+
 // ── Config maps ───────────────────────────────────────────────────────────────
 
 const TYPE_CONFIG: Record<
@@ -442,6 +511,13 @@ interface EditorLessonProps {
   lessonId: string;
 }
 
+type VideoProfileOption = {
+  id: number;
+  name: string;
+  ffmpeg_params: string;
+  status: string;
+};
+
 export function EditorLesson({ lessonId }: EditorLessonProps) {
   const t = useTranslations('lms.CoursesPage.StructurePage');
   const lesson = useStructureStore((s) =>
@@ -542,15 +618,62 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const [localResources, setLocalResources] = useState<Resource[]>(
     () => lesson?.resources ?? []
   );
-  const [videoResolution, setVideoResolution] = useState('1080p');
+  const [activeTab, setActiveTab] = useState<LessonEditorTab>('dados');
+  const [resourcesDirty, setResourcesDirty] = useState(false);
+  const [conversionJobId, setConversionJobId] = useState<number | null>(null);
+  const [videoUploadError, setVideoUploadError] = useState<string | null>(null);
   const [dragOver, setDragOver] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
+  const [originalUploadProgress, setOriginalUploadProgress] = useState<
+    number | null
+  >(null);
+  const [profileUploadProgress, setProfileUploadProgress] = useState<
+    Record<number, number>
+  >({});
+  const [isResolvingVideoPreview, setIsResolvingVideoPreview] = useState(false);
   const resourceInputRef = useRef<HTMLInputElement>(null);
-  const videoInputRef = useRef<HTMLInputElement>(null);
+  const originalVideoInputRef = useRef<HTMLInputElement>(null);
+  const lastTerminalJobStatusRef = useRef<string | null>(null);
   const [transcriptionSegments, setTranscriptionSegments] = useState<
     TranscriptionSegment[]
   >(() => parseTranscriptionSegments(lesson?.transcription));
 
+  const {
+    data: courseVideoProfiles = [],
+    isFetching: isFetchingCourseVideoProfiles,
+    isError: hasCourseVideoProfilesError,
+    refetch: refetchCourseVideoProfiles,
+  } = useQuery<VideoProfileOption[]>({
+    queryKey: ['lms-course-video-resolution-profiles', courseId],
+    queryFn: async () => {
+      const response = await request<VideoProfileOption[]>({
+        url: `/lms/courses/${courseId}/video-resolution-profiles`,
+        method: 'GET',
+      });
+      return response.data ?? [];
+    },
+    enabled: Boolean(courseId),
+    initialData: [],
+  });
+
+  const {
+    data: conversionJob,
+    isFetching: isFetchingConversionJob,
+    isError: hasConversionJobError,
+    refetch: refetchConversionJob,
+  } = useQuery<QueueJobResponse>({
+    queryKey: ['queue-job', conversionJobId],
+    enabled: Boolean(conversionJobId),
+    retry: 1,
+    queryFn: async () => getQueueJob(request, conversionJobId!),
+    refetchInterval: (query) => {
+      const status = (query.state.data as QueueJobResponse | undefined)?.status;
+      if (!status) return 3000;
+
+      return ACTIVE_VIDEO_JOB_STATUSES.includes(status) ? 3000 : false;
+    },
+  });
+
   // ── Instructors state ────────────────────────────────────────────────────
   const [selectedInstructorIds, setSelectedInstructorIds] = useState<string[]>(
     () => lesson?.instructors?.map((i) => i.id) ?? []
@@ -578,15 +701,62 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
 
   useEffect(() => {
     setLocalResources(lesson?.resources ?? []);
+    setResourcesDirty(false);
+    setConversionJobId(lesson?.videoConversionJobId ?? null);
     setSelectedInstructorIds(lesson?.instructors?.map((i) => i.id) ?? []);
     setTranscriptionSegments(parseTranscriptionSegments(lesson?.transcription));
-  }, [lesson?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [lesson?.id, lesson?.resources, lesson?.videoConversionJobId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (watchedType === 'video') return;
+    if (activeTab === 'videos' || activeTab === 'transcricao') {
+      setActiveTab('conteudo');
+    }
+  }, [activeTab, watchedType]);
+
+  useEffect(() => {
+    lastTerminalJobStatusRef.current = null;
+  }, [conversionJobId]);
+
+  useEffect(() => {
+    if (!conversionJobId || !conversionJob) return;
+    if (!TERMINAL_VIDEO_JOB_STATUSES.includes(conversionJob.status)) return;
+
+    const terminalKey = `${conversionJob.id}:${conversionJob.status}`;
+    if (lastTerminalJobStatusRef.current === terminalKey) return;
+
+    lastTerminalJobStatusRef.current = terminalKey;
+    void queryClient.invalidateQueries({
+      queryKey: courseStructureQueryKey(courseId),
+    });
+  }, [conversionJob, conversionJobId, courseId, queryClient]);
 
   if (!lesson) return null;
 
   const cfg = TYPE_CONFIG[lesson.type];
   const Icon = cfg.icon;
   const lessonTypeLabel = t(cfg.labelKey as any);
+  const originalVideoResource =
+    localResources.find((res) => res.type === 'video_original') ?? null;
+  const profileVideoResources = new Map(
+    localResources
+      .filter((res) => res.type.startsWith('video_profile:'))
+      .map((res) => [Number(res.type.replace('video_profile:', '')), res])
+  );
+  const genericResources = localResources.filter(
+    (res) =>
+      res.type !== 'video_original' && !res.type.startsWith('video_profile:')
+  );
+  const isConversionJobActive = conversionJob
+    ? ACTIVE_VIDEO_JOB_STATUSES.includes(conversionJob.status)
+    : false;
+  const latestConversionAttempt =
+    conversionJob?.queue_job_attempt.at(-1) ?? null;
+  const recentConversionEvents =
+    conversionJob?.queue_job_event.slice(-3).reverse() ?? [];
+  const isOriginalVideoUploadBlocked =
+    originalUploadProgress !== null || isConversionJobActive;
+  const isProfileVideoUploadBlocked = isConversionJobActive;
 
   async function handleResourceFiles(files: File[]) {
     setIsUploading(true);
@@ -594,7 +764,8 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       const results = await Promise.allSettled(
         files.map((f) =>
           uploadFile(request, f).then<Resource>((res) => ({
-            id: String(res.id),
+            id: `new-${res.id}`,
+            fileId: res.id,
             name: f.name,
             size: formatFileSize(f.size),
             type: f.type || f.name.split('.').pop() || 'file',
@@ -615,30 +786,32 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         );
       if (succeeded.length > 0)
         setLocalResources((prev) => [...prev, ...succeeded]);
+      if (succeeded.length > 0) setResourcesDirty(true);
     } finally {
       setIsUploading(false);
     }
   }
 
   async function removeResource(id: string) {
-    const numId = Number(id);
-    if (Number.isInteger(numId) && numId > 0) {
+    const res = localResources.find((r) => r.id === id);
+    const fileId = res?.fileId ?? Number(id);
+    if (Number.isInteger(fileId) && fileId > 0) {
       try {
-        await deleteFile(request, numId);
+        await deleteFile(request, fileId);
       } catch {
         toast.error(t('questionEditor.resourceRemoveError'));
         return;
       }
     } else {
-      const res = localResources.find((r) => r.id === id);
       if (res?.url?.startsWith('blob:')) URL.revokeObjectURL(res.url);
     }
     setLocalResources((prev) => prev.filter((r) => r.id !== id));
+    setResourcesDirty(true);
   }
 
   async function resolveResourceUrl(res: Resource): Promise<string | null> {
     if (res.url) return res.url;
-    const numId = Number(res.id);
+    const numId = res.fileId ?? Number(res.id);
     if (!Number.isInteger(numId) || numId <= 0) return null;
     try {
       const response = await request<{ url?: string }>({
@@ -672,50 +845,131 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     a.click();
   }
 
-  async function handleVideoVariantFiles(files: File[]) {
-    const resolution = videoResolution.trim();
-    if (!resolution) {
-      toast.error(t('questionEditor.videoResolutionRequired'));
+  async function openVideoPreview(res: Resource) {
+    setIsResolvingVideoPreview(true);
+    try {
+      const resourceUrl = await resolveResourceUrl(res);
+      if (!resourceUrl) {
+        toast.error(t('questionEditor.resourceOpenError'));
+        return;
+      }
+      window.open(resourceUrl, '_blank', 'noopener,noreferrer');
+    } finally {
+      setIsResolvingVideoPreview(false);
+    }
+  }
+
+  async function handleVideoProfileFile(profileId: number, file: File) {
+    if (file.size > MAX_VIDEO_UPLOAD_SIZE_BYTES) {
+      const message = t('lessonForm.videoUploadMaxSizeError', {
+        size: '100MB',
+      });
+      setVideoUploadError(message);
+      toast.error(message);
       return;
     }
-    setIsUploading(true);
-    try {
-      const results = await Promise.allSettled(
-        files.map((file) =>
-          uploadFile(request, file).then<Resource>((res) => ({
-            id: String(res.id),
-            name: file.name,
-            size: formatFileSize(file.size),
-            type: `video/${resolution}`,
-            public: false,
-            url: undefined,
-          }))
-        )
-      );
 
-      const succeeded = results
-        .filter(
-          (result): result is PromiseFulfilledResult<Resource> =>
-            result.status === 'fulfilled'
-        )
-        .map((result) => result.value);
-      const failedCount = results.filter(
-        (result) => result.status === 'rejected'
-      ).length;
+    setVideoUploadError(null);
+    setProfileUploadProgress((prev) => ({ ...prev, [profileId]: 0 }));
+    try {
+      const uploaded = await uploadFile(request, file, 'lms/lessons/videos', {
+        onUploadProgress: (event) => {
+          const total = event.total ?? 0;
+          const progress =
+            total > 0 ? Math.round((event.loaded / total) * 100) : 0;
+          setProfileUploadProgress((prev) => ({
+            ...prev,
+            [profileId]: progress,
+          }));
+        },
+      });
+      const type = videoProfileResourceType(profileId);
+      const resource: Resource = {
+        id: `new-${uploaded.id}`,
+        fileId: uploaded.id,
+        name: file.name,
+        size: formatFileSize(file.size),
+        type,
+        public: false,
+        url: undefined,
+      };
+      setLocalResources((prev) => [
+        ...prev.filter((item) => item.type !== type),
+        resource,
+      ]);
+      setResourcesDirty(true);
+    } catch {
+      toast.error(t('questionEditor.videoUploadFailed', { count: 1 }));
+    } finally {
+      setProfileUploadProgress((prev) => {
+        const next = { ...prev };
+        delete next[profileId];
+        return next;
+      });
+    }
+  }
 
-      if (failedCount > 0) {
-        toast.error(
-          t('questionEditor.videoUploadFailed', {
-            count: failedCount,
-          })
-        );
-      }
+  async function handleOriginalVideoFile(file: File) {
+    if (file.size > MAX_VIDEO_UPLOAD_SIZE_BYTES) {
+      const message = t('lessonForm.videoUploadMaxSizeError', {
+        size: '100MB',
+      });
+      setVideoUploadError(message);
+      toast.error(message);
+      return;
+    }
 
-      if (succeeded.length > 0) {
-        setLocalResources((prev) => [...prev, ...succeeded]);
-      }
+    setVideoUploadError(null);
+    setOriginalUploadProgress(0);
+    try {
+      const uploaded = await uploadFile(
+        request,
+        file,
+        'lms/lessons/originals',
+        {
+          onUploadProgress: (event) => {
+            const total = event.total ?? 0;
+            const progress =
+              total > 0 ? Math.round((event.loaded / total) * 100) : 0;
+            setOriginalUploadProgress(progress);
+          },
+        }
+      );
+      const originalResource: Resource = {
+        id: `new-${uploaded.id}`,
+        fileId: uploaded.id,
+        name: file.name,
+        size: formatFileSize(file.size),
+        type: 'video_original',
+        public: false,
+        url: undefined,
+      };
+      setLocalResources((prev) => [
+        ...prev.filter((item) => item.type !== 'video_original'),
+        originalResource,
+      ]);
+      setResourcesDirty(true);
+
+      const queued = await enqueueLessonVideoConversion(
+        request,
+        courseId,
+        lesson!.sessionId,
+        lessonId,
+        uploaded.id
+      );
+      setConversionJobId(queued.queueJobId);
+      toast.success(
+        t('lessonForm.videoConversionQueued', {
+          id: queued.queueJobId,
+        })
+      );
+      void queryClient.invalidateQueries({
+        queryKey: courseStructureQueryKey(courseId),
+      });
+    } catch {
+      toast.error(t('lessonForm.videoConversionFailed'));
     } finally {
-      setIsUploading(false);
+      setOriginalUploadProgress(null);
     }
   }
 
@@ -730,12 +984,18 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       sessionId: lesson!.sessionId,
       formValues: {
         ...values,
+        videoUrl:
+          values.type === 'video' && values.videoProvider === 'file_storage'
+            ? ''
+            : values.videoUrl,
         transcription: transcriptionValue,
+        videoConversionJobId: conversionJobId ?? lesson?.videoConversionJobId,
         resources: localResources,
         instructorIds: selectedInstructorIds.map(Number),
       },
     });
     form.reset({ ...values, transcription: transcriptionValue });
+    setResourcesDirty(false);
   }
 
   // ── Question sheet helpers ────────────────────────────────────────────────
@@ -859,14 +1119,14 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         className="flex flex-col h-full min-h-0"
       >
         {/* ── Header ───────────────────────────────────────────────────────── */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted/30 shrink-0">
+        <div className="flex items-center gap-2 border-b bg-muted/30 px-2 py-2 shrink-0 sm:gap-3 sm:px-4 sm:py-3">
           <div
             className={cn(
-              'flex size-9 items-center justify-center rounded-lg shrink-0',
+              'flex size-8 items-center justify-center rounded-md shrink-0 sm:size-9 sm:rounded-lg',
               cfg.bg
             )}
           >
-            <Icon className={cn('size-4', cfg.color)} />
+            <Icon className={cn('size-3.5 sm:size-4', cfg.color)} />
           </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-1.5">
@@ -910,18 +1170,44 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         </div>
 
         {/* ── Tabs ─────────────────────────────────────────────────────────── */}
-        <Tabs defaultValue="dados" className="flex flex-col flex-1 min-h-0">
-          <TabsList className="mx-3 mt-2 h-8 w-auto justify-start shrink-0 bg-muted/50">
-            <TabsTrigger value="dados" className="text-xs h-7 px-2.5">
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as LessonEditorTab)}
+          className="flex flex-col flex-1 min-h-0 min-w-0"
+        >
+          <TabsList className="mx-2 mt-1.5 h-auto w-[calc(100%-1rem)] justify-start shrink-0 bg-muted/50 overflow-x-auto overflow-y-hidden whitespace-nowrap sm:mx-3 sm:mt-2 sm:w-auto">
+            <TabsTrigger
+              value="dados"
+              className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
+            >
               {t('lessonForm.tabData')}
             </TabsTrigger>
-            <TabsTrigger value="conteudo" className="text-xs h-7 px-2.5">
+            <TabsTrigger
+              value="conteudo"
+              className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
+            >
               {t('lessonForm.postContent')}
             </TabsTrigger>
-            <TabsTrigger value="transcricao" className="text-xs h-7 px-2.5">
-              {t('lessonForm.tabTranscription')}
-            </TabsTrigger>
-            <TabsTrigger value="recursos" className="text-xs h-7 px-2.5">
+            {watchedType === 'video' && (
+              <TabsTrigger
+                value="videos"
+                className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
+              >
+                {t('lessonForm.tabVideos')}
+              </TabsTrigger>
+            )}
+            {watchedType === 'video' && (
+              <TabsTrigger
+                value="transcricao"
+                className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
+              >
+                {t('lessonForm.tabTranscription')}
+              </TabsTrigger>
+            )}
+            <TabsTrigger
+              value="recursos"
+              className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
+            >
               {t('lessonForm.tabResources')}
             </TabsTrigger>
           </TabsList>
@@ -929,7 +1215,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
           {/* ── Tab Dados ────────────────────────────────────────────────── */}
           <TabsContent value="dados" className="flex-1 min-h-0 mt-0">
             <ScrollArea className="h-full">
-              <div className="flex flex-col gap-3 p-3">
+              <div className="flex flex-col gap-2 p-2 sm:gap-3 sm:p-3">
                 {/* Identificação */}
                 <Card className="bg-muted/20 py-2 gap-2">
                   <CardHeader className="px-3 pt-2 pb-0">
@@ -938,7 +1224,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                     </CardTitle>
                   </CardHeader>
                   <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                    <div className="grid grid-cols-3 gap-2">
+                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
                       <FormField
                         control={form.control}
                         name="code"
@@ -1047,7 +1333,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                     </CardTitle>
                   </CardHeader>
                   <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                    <div className="grid grid-cols-2 gap-2">
+                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                       <FormField
                         control={form.control}
                         name="status"
@@ -1228,7 +1514,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
           {/* ── Tab Conteúdo ─────────────────────────────────────────────── */}
           <TabsContent value="conteudo" className="flex-1 min-h-0 mt-0">
             <ScrollArea className="h-full">
-              <div className="flex flex-col gap-3 p-3">
+              <div className="flex flex-col gap-2 p-2 sm:gap-3 sm:p-3">
                 {/* Descrição pública */}
                 <Card className="bg-muted/20 py-2 gap-2">
                   <CardHeader className="px-3 pt-2 pb-1">
@@ -1285,71 +1571,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                 </Card>
 
                 {/* Campos específicos por tipo */}
-                {watchedType === 'video' && (
-                  <Card className="bg-muted/20 py-2 gap-2">
-                    <CardHeader className="px-3 pt-2 pb-1">
-                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
-                        <Video className="size-3 text-blue-500" />{' '}
-                        {t('types.video')}
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                      <FormField
-                        control={form.control}
-                        name="videoProvider"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-xs">
-                              {t('lessonForm.videoProvider')}
-                            </FormLabel>
-                            <Select
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <FormControl>
-                                <SelectTrigger className="h-8 text-xs w-full">
-                                  <SelectValue />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                {videoProviders.map((p) => (
-                                  <SelectItem key={p.value} value={p.value}>
-                                    {p.label}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                            <FormMessage className="text-xs" />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="videoUrl"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-xs">
-                              {t('lessonForm.videoUrl')}
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                value={field.value ?? ''}
-                                className="h-8 text-xs font-mono"
-                                placeholder={t(
-                                  'lessonForm.videoUrlPlaceholder'
-                                )}
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs" />
-                          </FormItem>
-                        )}
-                      />
-                    </CardContent>
-                  </Card>
-                )}
-
                 {watchedType === 'post' && (
                   <Card className="bg-muted/20 py-2 gap-2">
                     <CardHeader className="px-3 pt-2 pb-1">
@@ -1466,19 +1687,635 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             </ScrollArea>
           </TabsContent>
 
-          {/* ── Tab Transcrição ─────────────────────────────────────────── */}
-          <TabsContent value="transcricao" className="flex-1 min-h-0 mt-0">
-            <ScrollArea className="h-full">
-              <div className="flex flex-col gap-3 p-3">
-                {watchedType !== 'video' ? (
+          {watchedType === 'video' && (
+            <TabsContent value="videos" className="flex-1 min-h-0 mt-0">
+              <ScrollArea className="h-full">
+                <div className="flex flex-col gap-2 p-2 sm:gap-3 sm:p-3">
                   <Card className="bg-muted/20 py-2 gap-2">
-                    <CardContent className="px-3 py-4">
-                      <p className="text-xs text-muted-foreground">
-                        {t('lessonForm.transcriptionVideoOnly')}
-                      </p>
+                    <CardHeader className="px-3 pt-2 pb-1">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+                        <Video className="size-3 text-blue-500" />{' '}
+                        {t('lessonForm.tabVideos')}
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                      <FormField
+                        control={form.control}
+                        name="videoProvider"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">
+                              {t('lessonForm.videoProvider')}
+                            </FormLabel>
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <FormControl>
+                                <SelectTrigger className="h-8 text-xs w-full">
+                                  <SelectValue />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                {videoProviders.map((p) => (
+                                  <SelectItem key={p.value} value={p.value}>
+                                    {p.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+
+                      {watchedVideoProvider !== 'file_storage' ? (
+                        <FormField
+                          control={form.control}
+                          name="videoUrl"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-xs">
+                                {t('lessonForm.videoUrl')}
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  value={field.value ?? ''}
+                                  className="h-8 text-xs font-mono"
+                                  placeholder={t(
+                                    'lessonForm.videoUrlPlaceholder'
+                                  )}
+                                />
+                              </FormControl>
+                              <FormMessage className="text-xs" />
+                            </FormItem>
+                          )}
+                        />
+                      ) : (
+                        <p className="text-xs text-muted-foreground">
+                          {t('lessonForm.fileStorageVideoHint')}
+                        </p>
+                      )}
                     </CardContent>
                   </Card>
-                ) : (
+
+                  {watchedVideoProvider === 'file_storage' && (
+                    <>
+                      {videoUploadError ? (
+                        <p className="text-xs text-destructive">
+                          {videoUploadError}
+                        </p>
+                      ) : null}
+
+                      <Card className="bg-muted/20 py-2 gap-2">
+                        <CardHeader className="px-3 pt-2 pb-1">
+                          <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                            {t('lessonForm.originalVideoTitle')}
+                          </CardTitle>
+                        </CardHeader>
+                        <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                          <div className="rounded-lg border bg-background/90 p-3 shadow-sm">
+                            <div className="flex items-start gap-3">
+                              <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-blue-500/10 text-blue-600">
+                                <Video className="size-4" />
+                              </div>
+                              <div className="min-w-0 flex-1 space-y-1">
+                                <div className="flex items-start justify-between gap-2">
+                                  <div className="min-w-0">
+                                    <p className="truncate text-sm font-medium">
+                                      {originalVideoResource
+                                        ? originalVideoResource.name
+                                        : t('lessonForm.originalVideoTitle')}
+                                    </p>
+                                    <p className="text-xs text-muted-foreground">
+                                      {conversionJobId
+                                        ? t('lessonForm.videoConversionJob', {
+                                            id: conversionJobId,
+                                          })
+                                        : t('lessonForm.originalVideoHint')}
+                                    </p>
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      {t('lessonForm.originalVideoPurpose')}
+                                    </p>
+                                  </div>
+                                  {originalVideoResource && (
+                                    <div className="flex shrink-0 items-center gap-1">
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="size-7 shrink-0"
+                                        disabled={isResolvingVideoPreview}
+                                        onClick={() =>
+                                          void openVideoPreview(
+                                            originalVideoResource
+                                          )
+                                        }
+                                        aria-label={t(
+                                          'lessonForm.playVideoAria',
+                                          {
+                                            name: originalVideoResource.name,
+                                          }
+                                        )}
+                                      >
+                                        {isResolvingVideoPreview ? (
+                                          <Loader2 className="size-3 animate-spin" />
+                                        ) : (
+                                          <Play className="size-3" />
+                                        )}
+                                      </Button>
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="size-7 shrink-0"
+                                        onClick={() =>
+                                          void handleResourceDownload(
+                                            originalVideoResource
+                                          )
+                                        }
+                                        aria-label={t(
+                                          'lessonForm.downloadVideoAria',
+                                          {
+                                            name: originalVideoResource.name,
+                                          }
+                                        )}
+                                      >
+                                        <Download className="size-3" />
+                                      </Button>
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="size-7 shrink-0"
+                                        onClick={() =>
+                                          void openResource(
+                                            originalVideoResource
+                                          )
+                                        }
+                                        aria-label={t(
+                                          'lessonForm.openVideoAria',
+                                          {
+                                            name: originalVideoResource.name,
+                                          }
+                                        )}
+                                      >
+                                        <ExternalLink className="size-3" />
+                                      </Button>
+                                    </div>
+                                  )}
+                                </div>
+                                {originalVideoResource?.size ? (
+                                  <div className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground">
+                                    {originalVideoResource.size}
+                                  </div>
+                                ) : null}
+                                <div className="flex flex-wrap items-center gap-2 pt-1">
+                                  <Button
+                                    type="button"
+                                    variant="secondary"
+                                    className="h-8 px-3 text-xs"
+                                    disabled={isOriginalVideoUploadBlocked}
+                                    onClick={() =>
+                                      originalVideoInputRef.current?.click()
+                                    }
+                                  >
+                                    <UploadCloud className="size-3.5 mr-1" />
+                                    {t(
+                                      'lessonForm.uploadOriginalForConversion'
+                                    )}
+                                  </Button>
+                                  <span className="text-[0.65rem] text-muted-foreground">
+                                    {isConversionJobActive
+                                      ? t(
+                                          'lessonForm.videoUploadBlockedWhileProcessing'
+                                        )
+                                      : t('lessonForm.originalVideoHint')}
+                                  </span>
+                                </div>
+                                {originalUploadProgress !== null ? (
+                                  <div className="space-y-1 pt-1">
+                                    <Progress
+                                      value={originalUploadProgress}
+                                      className="h-1.5"
+                                    />
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      {originalUploadProgress}%
+                                    </p>
+                                  </div>
+                                ) : null}
+                              </div>
+                            </div>
+                            <input
+                              ref={originalVideoInputRef}
+                              type="file"
+                              accept="video/*"
+                              className="hidden"
+                              onChange={(event) => {
+                                const file = event.target.files?.[0];
+                                if (file && !isOriginalVideoUploadBlocked) {
+                                  void handleOriginalVideoFile(file);
+                                }
+                                event.target.value = '';
+                              }}
+                            />
+                          </div>
+                        </CardContent>
+                      </Card>
+
+                      {conversionJobId ? (
+                        <Card className="bg-muted/20 py-2 gap-2">
+                          <CardHeader className="px-3 pt-2 pb-1">
+                            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center justify-between gap-2">
+                              <span>
+                                {t('lessonForm.videoJobFeedbackTitle')}
+                              </span>
+                              {conversionJob ? (
+                                <span
+                                  className={cn(
+                                    'rounded-full px-2 py-0.5 text-[0.65rem] font-medium',
+                                    VIDEO_JOB_STATUS_COLORS[
+                                      conversionJob.status
+                                    ]
+                                  )}
+                                >
+                                  {t(
+                                    `lessonForm.videoJobStatuses.${conversionJob.status}` as any
+                                  )}
+                                </span>
+                              ) : null}
+                            </CardTitle>
+                          </CardHeader>
+                          <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                            {hasConversionJobError ? (
+                              <div className="flex flex-col gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-3">
+                                <p className="text-xs text-destructive">
+                                  {t('lessonForm.videoJobLoadError')}
+                                </p>
+                                <Button
+                                  type="button"
+                                  variant="outline"
+                                  size="sm"
+                                  className="h-7 w-fit px-2 text-xs"
+                                  onClick={() => void refetchConversionJob()}
+                                >
+                                  <RefreshCw className="size-3 mr-1" />
+                                  {t('lessonForm.retryLoadVideoJob')}
+                                </Button>
+                              </div>
+                            ) : !conversionJob ? (
+                              <div className="flex items-center gap-2 rounded-md border bg-background/70 px-3 py-2 text-xs text-muted-foreground">
+                                <Loader2 className="size-3.5 animate-spin" />
+                                {isFetchingConversionJob
+                                  ? t('lessonForm.videoJobLoading')
+                                  : t('lessonForm.videoJobPendingLoad')}
+                              </div>
+                            ) : (
+                              <>
+                                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-4">
+                                  <div className="rounded-md border bg-background/70 p-2">
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      {t('lessonForm.videoJobIdLabel')}
+                                    </p>
+                                    <p className="text-xs font-medium">
+                                      #{conversionJob.id}
+                                    </p>
+                                  </div>
+                                  <div className="rounded-md border bg-background/70 p-2">
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      {t('lessonForm.videoJobAttemptsLabel')}
+                                    </p>
+                                    <p className="text-xs font-medium">
+                                      {t('lessonForm.videoJobAttemptsValue', {
+                                        current: conversionJob.attempts,
+                                        total: conversionJob.max_attempts,
+                                      })}
+                                    </p>
+                                  </div>
+                                  <div className="rounded-md border bg-background/70 p-2">
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      {t('lessonForm.videoJobCreatedAt')}
+                                    </p>
+                                    <p className="text-xs font-medium">
+                                      {formatDateTimeLabel(
+                                        conversionJob.created_at
+                                      ) ?? '—'}
+                                    </p>
+                                  </div>
+                                  <div className="rounded-md border bg-background/70 p-2">
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      {TERMINAL_VIDEO_JOB_STATUSES.includes(
+                                        conversionJob.status
+                                      )
+                                        ? t('lessonForm.videoJobFinishedAt')
+                                        : t('lessonForm.videoJobStartedAt')}
+                                    </p>
+                                    <p className="text-xs font-medium">
+                                      {formatDateTimeLabel(
+                                        TERMINAL_VIDEO_JOB_STATUSES.includes(
+                                          conversionJob.status
+                                        )
+                                          ? conversionJob.finished_at
+                                          : conversionJob.started_at
+                                      ) ?? '—'}
+                                    </p>
+                                  </div>
+                                </div>
+
+                                {latestConversionAttempt ? (
+                                  <div className="rounded-md border bg-background/70 p-3">
+                                    <div className="flex items-center justify-between gap-2">
+                                      <p className="text-xs font-medium">
+                                        {t('lessonForm.videoJobLatestAttempt')}
+                                      </p>
+                                      <span className="text-[0.65rem] text-muted-foreground">
+                                        {t(
+                                          `lessonForm.videoAttemptStatuses.${latestConversionAttempt.status}` as any
+                                        )}
+                                      </span>
+                                    </div>
+                                    <p className="mt-1 text-[0.65rem] text-muted-foreground">
+                                      {t('lessonForm.videoJobAttemptValue', {
+                                        count:
+                                          latestConversionAttempt.attempt_number,
+                                      })}
+                                      {formatDurationLabel(
+                                        latestConversionAttempt.duration_ms
+                                      )
+                                        ? ` · ${formatDurationLabel(latestConversionAttempt.duration_ms)}`
+                                        : ''}
+                                    </p>
+                                    {latestConversionAttempt.error_message ? (
+                                      <p className="mt-2 text-xs text-destructive">
+                                        {latestConversionAttempt.error_message}
+                                      </p>
+                                    ) : null}
+                                  </div>
+                                ) : null}
+
+                                {conversionJob.last_error ? (
+                                  <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3">
+                                    <p className="text-[0.65rem] font-medium text-destructive">
+                                      {t('lessonForm.videoJobLastError')}
+                                    </p>
+                                    <p className="mt-1 text-xs text-destructive">
+                                      {conversionJob.last_error}
+                                    </p>
+                                  </div>
+                                ) : null}
+
+                                <div className="rounded-md border bg-background/70 p-3">
+                                  <p className="text-xs font-medium">
+                                    {t('lessonForm.videoJobRecentEvents')}
+                                  </p>
+                                  <div className="mt-2 flex flex-col gap-2">
+                                    {recentConversionEvents.length === 0 ? (
+                                      <p className="text-xs text-muted-foreground">
+                                        {t('lessonForm.videoJobNoEvents')}
+                                      </p>
+                                    ) : (
+                                      recentConversionEvents.map((event) => (
+                                        <div
+                                          key={event.id}
+                                          className="rounded-md border border-border/60 px-2.5 py-2"
+                                        >
+                                          <div className="flex items-center justify-between gap-2">
+                                            <p className="text-xs font-medium">
+                                              {t(
+                                                `lessonForm.videoJobEvents.${event.event_type}` as any
+                                              )}
+                                            </p>
+                                            <span className="text-[0.65rem] text-muted-foreground">
+                                              {formatDateTimeLabel(
+                                                event.created_at
+                                              ) ?? '—'}
+                                            </span>
+                                          </div>
+                                          {event.message ? (
+                                            <p className="mt-1 text-[0.65rem] text-muted-foreground">
+                                              {event.message}
+                                            </p>
+                                          ) : null}
+                                        </div>
+                                      ))
+                                    )}
+                                  </div>
+                                </div>
+                              </>
+                            )}
+                          </CardContent>
+                        </Card>
+                      ) : null}
+
+                      <Card className="bg-muted/20 py-2 gap-2">
+                        <CardHeader className="px-3 pt-2 pb-1">
+                          <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                            {t('lessonForm.fileStorageVideosByResolution')}
+                          </CardTitle>
+                        </CardHeader>
+                        <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                          {isFetchingCourseVideoProfiles ? (
+                            <p className="text-xs text-muted-foreground">
+                              {t('lessonForm.loadingVideoProfiles')}
+                            </p>
+                          ) : hasCourseVideoProfilesError ? (
+                            <div className="flex flex-col gap-2">
+                              <p className="text-xs text-destructive">
+                                {t('lessonForm.videoProfilesLoadError')}
+                              </p>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="h-7 w-fit px-2 text-xs"
+                                onClick={() =>
+                                  void refetchCourseVideoProfiles()
+                                }
+                              >
+                                <RefreshCw className="size-3 mr-1" />
+                                {t('lessonForm.retryLoadVideoProfiles')}
+                              </Button>
+                            </div>
+                          ) : courseVideoProfiles.length === 0 ? (
+                            <p className="text-xs text-muted-foreground">
+                              {t('lessonForm.noVideoProfilesConfigured')}
+                            </p>
+                          ) : (
+                            <>
+                              {isConversionJobActive ? (
+                                <p className="text-xs text-muted-foreground">
+                                  {t(
+                                    'lessonForm.videoProfilesLockedWhileProcessing'
+                                  )}
+                                </p>
+                              ) : null}
+                              <div className="flex flex-col gap-1">
+                                {courseVideoProfiles.map((profile) => {
+                                  const res = profileVideoResources.get(
+                                    profile.id
+                                  );
+                                  const currentUploadProgress =
+                                    profileUploadProgress[profile.id];
+                                  const inputId = `lesson-video-profile-${profile.id}`;
+
+                                  return (
+                                    <div
+                                      key={profile.id}
+                                      className="flex items-center gap-2 rounded-md border bg-background/80 px-2.5 py-2"
+                                    >
+                                      <Video className="size-3.5 shrink-0 text-blue-500" />
+                                      <div className="flex-1 min-w-0">
+                                        <p className="text-xs truncate font-medium">
+                                          {profile.name}
+                                        </p>
+                                        <p className="text-[0.65rem] text-muted-foreground">
+                                          {res
+                                            ? `${res.name}${res.size ? ` · ${res.size}` : ''}`
+                                            : t(
+                                                'lessonForm.videoProfileMissing'
+                                              )}
+                                        </p>
+                                        {currentUploadProgress !== undefined ? (
+                                          <div className="mt-1 space-y-1">
+                                            <Progress
+                                              value={currentUploadProgress}
+                                              className="h-1.5"
+                                            />
+                                            <p className="text-[0.65rem] text-muted-foreground">
+                                              {currentUploadProgress}%
+                                            </p>
+                                          </div>
+                                        ) : null}
+                                      </div>
+                                      <input
+                                        id={inputId}
+                                        type="file"
+                                        accept="video/*"
+                                        className="hidden"
+                                        onChange={(event) => {
+                                          const file = event.target.files?.[0];
+                                          if (
+                                            file &&
+                                            !isProfileVideoUploadBlocked
+                                          ) {
+                                            void handleVideoProfileFile(
+                                              profile.id,
+                                              file
+                                            );
+                                          }
+                                          event.target.value = '';
+                                        }}
+                                      />
+                                      <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        className="h-7 px-2 text-xs"
+                                        disabled={
+                                          currentUploadProgress !== undefined ||
+                                          isProfileVideoUploadBlocked
+                                        }
+                                        onClick={() =>
+                                          document
+                                            .getElementById(inputId)
+                                            ?.click()
+                                        }
+                                      >
+                                        <UploadCloud className="size-3 mr-1" />
+                                        {res
+                                          ? t('lessonForm.replaceVideo')
+                                          : t('lessonForm.upload')}
+                                      </Button>
+                                      {res && (
+                                        <>
+                                          <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon"
+                                            className="size-6 shrink-0"
+                                            disabled={isResolvingVideoPreview}
+                                            onClick={() =>
+                                              void openVideoPreview(res)
+                                            }
+                                            aria-label={t(
+                                              'lessonForm.playVideoAria',
+                                              { name: res.name }
+                                            )}
+                                          >
+                                            {isResolvingVideoPreview ? (
+                                              <Loader2 className="size-3 animate-spin" />
+                                            ) : (
+                                              <Play className="size-3" />
+                                            )}
+                                          </Button>
+                                          <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon"
+                                            className="size-6 shrink-0"
+                                            onClick={() =>
+                                              void openResource(res)
+                                            }
+                                            aria-label={t(
+                                              'lessonForm.openVideoAria',
+                                              { name: res.name }
+                                            )}
+                                          >
+                                            <ExternalLink className="size-3" />
+                                          </Button>
+                                          <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon"
+                                            className="size-6 shrink-0"
+                                            onClick={() =>
+                                              void handleResourceDownload(res)
+                                            }
+                                            aria-label={t(
+                                              'lessonForm.downloadVideoAria',
+                                              { name: res.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 removeResource(res.id)
+                                            }
+                                            aria-label={t(
+                                              'lessonForm.removeVideoAria',
+                                              { name: res.name }
+                                            )}
+                                          >
+                                            <X className="size-3" />
+                                          </Button>
+                                        </>
+                                      )}
+                                    </div>
+                                  );
+                                })}
+                              </div>
+                            </>
+                          )}
+                        </CardContent>
+                      </Card>
+                    </>
+                  )}
+                </div>
+              </ScrollArea>
+            </TabsContent>
+          )}
+
+          {/* ── Tab Transcrição ─────────────────────────────────────────── */}
+          {watchedType === 'video' && (
+            <TabsContent value="transcricao" className="flex-1 min-h-0 mt-0">
+              <ScrollArea className="h-full">
+                <div className="flex flex-col gap-2 p-2 sm:gap-3 sm:p-3">
                   <Card className="bg-muted/20 py-2 gap-2">
                     <CardHeader className="px-3 pt-2 pb-1">
                       <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center justify-between gap-2">
@@ -1602,7 +2439,9 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                 setTranscriptionSegments((prev) => {
                                   if (prev.length === 1) {
                                     const first = prev[0];
-                                    return first ? [{ ...first, text: '' }] : [];
+                                    return first
+                                      ? [{ ...first, text: '' }]
+                                      : [];
                                   }
 
                                   return prev.filter(
@@ -1627,148 +2466,15 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                       </p>
                     </CardContent>
                   </Card>
-                )}
-              </div>
-            </ScrollArea>
-          </TabsContent>
+                </div>
+              </ScrollArea>
+            </TabsContent>
+          )}
 
           {/* ── Tab Recursos ─────────────────────────────────────────────── */}
           <TabsContent value="recursos" className="flex-1 min-h-0 mt-0">
             <ScrollArea className="h-full">
-              <div className="flex flex-col gap-3 p-3">
-                {watchedType === 'video' &&
-                  watchedVideoProvider === 'file_storage' && (
-                    <Card className="bg-muted/20 py-2 gap-2">
-                      <CardHeader className="px-3 pt-2 pb-1">
-                        <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                          {t('lessonForm.fileStorageVideosByResolution')}
-                        </CardTitle>
-                      </CardHeader>
-                      <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                        <div className="grid grid-cols-1 md:grid-cols-[160px_1fr] gap-2">
-                          <Input
-                            value={videoResolution}
-                            onChange={(event) =>
-                              setVideoResolution(event.target.value)
-                            }
-                            className="h-8 text-xs"
-                            placeholder={t(
-                              'lessonForm.videoResolutionPlaceholder'
-                            )}
-                          />
-                          <Button
-                            type="button"
-                            variant="outline"
-                            className="h-8 text-xs"
-                            disabled={isUploading}
-                            onClick={() => videoInputRef.current?.click()}
-                          >
-                            <UploadCloud className="size-3.5 mr-1" />
-                            {t('lessonForm.uploadVideoForResolution')}
-                          </Button>
-                          <input
-                            ref={videoInputRef}
-                            type="file"
-                            multiple
-                            accept="video/*"
-                            className="hidden"
-                            onChange={(event) => {
-                              if (event.target.files) {
-                                void handleVideoVariantFiles(
-                                  Array.from(event.target.files)
-                                );
-                                event.target.value = '';
-                              }
-                            }}
-                          />
-                        </div>
-
-                        {localResources.filter((res) =>
-                          res.type.startsWith('video/')
-                        ).length === 0 ? (
-                          <p className="text-xs text-muted-foreground">
-                            {t('lessonForm.noResolutionVideosYet')}
-                          </p>
-                        ) : (
-                          <div className="flex flex-col gap-1">
-                            {localResources
-                              .filter((res) => res.type.startsWith('video/'))
-                              .map((res) => {
-                                const resolution =
-                                  res.type.replace('video/', '') || 'N/A';
-                                return (
-                                  <div
-                                    key={res.id}
-                                    className="flex items-center gap-2 rounded-md border bg-background/80 px-2.5 py-2"
-                                  >
-                                    <Video className="size-3.5 shrink-0 text-blue-500" />
-                                    <div className="flex-1 min-w-0">
-                                      <p className="text-xs truncate font-medium">
-                                        {res.name}
-                                      </p>
-                                      <p className="text-[0.65rem] text-muted-foreground">
-                                        {resolution}
-                                        {res.size ? ` · ${res.size}` : ''}
-                                      </p>
-                                    </div>
-                                    <Button
-                                      type="button"
-                                      variant="ghost"
-                                      size="icon"
-                                      className="size-6 shrink-0"
-                                      onClick={() => void openResource(res)}
-                                      aria-label={t(
-                                        'lessonForm.openVideoAria',
-                                        {
-                                          name: res.name,
-                                        }
-                                      )}
-                                    >
-                                      <ExternalLink className="size-3" />
-                                    </Button>
-                                    <Button
-                                      type="button"
-                                      variant="ghost"
-                                      size="icon"
-                                      className="size-6 shrink-0"
-                                      onClick={() =>
-                                        void handleResourceDownload(res)
-                                      }
-                                      aria-label={t(
-                                        'lessonForm.downloadVideoAria',
-                                        {
-                                          name: res.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 removeResource(res.id)
-                                      }
-                                      aria-label={t(
-                                        'lessonForm.removeVideoAria',
-                                        {
-                                          name: res.name,
-                                        }
-                                      )}
-                                    >
-                                      <X className="size-3" />
-                                    </Button>
-                                  </div>
-                                );
-                              })}
-                          </div>
-                        )}
-                      </CardContent>
-                    </Card>
-                  )}
-
+              <div className="flex flex-col gap-2 p-2 sm:gap-3 sm:p-3">
                 {/* Drop zone */}
                 <div
                   role="button"
@@ -1846,22 +2552,22 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                 </div>
 
                 {/* Counter */}
-                {localResources.length > 0 && (
+                {genericResources.length > 0 && (
                   <p className="text-xs text-muted-foreground">
                     {t('lessonForm.resourcesCount', {
-                      count: localResources.length,
+                      count: genericResources.length,
                     })}
                   </p>
                 )}
 
                 {/* Resource list */}
-                {localResources.length === 0 ? (
+                {genericResources.length === 0 ? (
                   <p className="text-center text-xs text-muted-foreground py-1">
                     {t('questionEditor.noLinkedResources')}
                   </p>
                 ) : (
                   <div className="flex flex-col gap-1">
-                    {localResources.map((res) => {
+                    {genericResources.map((res) => {
                       const ResIcon = getResourceIcon(res.type);
                       return (
                         <div
@@ -1888,7 +2594,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               aria-label={t('lessonForm.public')}
                             />
                           )}
-                          {/* Abrir em nova aba */}
                           {res.url && (
                             <a
                               href={res.url}
@@ -1903,7 +2608,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               <ExternalLink className="size-3" />
                             </a>
                           )}
-                          {/* Download */}
                           <Button
                             type="button"
                             variant="ghost"
@@ -1916,7 +2620,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                           >
                             <Download className="size-3" />
                           </Button>
-                          {/* Remover */}
                           <Button
                             type="button"
                             variant="ghost"
@@ -1942,14 +2645,18 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         {/* ── Footer ───────────────────────────────────────────────────────── */}
         <div className="shrink-0 border-t bg-background">
           <Separator />
-          <div className="flex items-center gap-2 px-3 py-2">
+          <div className="flex items-center gap-1.5 px-2 py-1.5 sm:gap-2 sm:px-3 sm:py-2">
             <Button
               type="button"
               variant="ghost"
               size="sm"
-              className="h-7 text-xs"
-              disabled={!isDirty || updateLesson.isPending}
-              onClick={() => form.reset()}
+              className="h-6 text-[11px] sm:h-7 sm:text-xs"
+              disabled={(!isDirty && !resourcesDirty) || updateLesson.isPending}
+              onClick={() => {
+                form.reset();
+                setLocalResources(lesson?.resources ?? []);
+                setResourcesDirty(false);
+              }}
             >
               <Undo2 className="size-3 mr-1" />
               {t('lessonForm.cancel')}
@@ -1958,8 +2665,8 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             <Button
               type="submit"
               size="sm"
-              className="h-7 text-xs"
-              disabled={!isDirty || updateLesson.isPending}
+              className="h-6 text-[11px] sm:h-7 sm:text-xs"
+              disabled={(!isDirty && !resourcesDirty) || updateLesson.isPending}
             >
               {updateLesson.isPending ? (
                 <Loader2 className="size-3 mr-1 animate-spin" />
@@ -1973,7 +2680,11 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
 
         {/* ── Question Sheet ──────────────────────────────────────────────── */}
         <Sheet open={questionSheetOpen} onOpenChange={setQuestionSheetOpen}>
-          <SheetContent
+          <ResizableSheetContent
+            sheetId="lms-course-structure-question-sheet"
+            defaultWidth={560}
+            minWidth={420}
+            maxWidth={920}
             side="right"
             className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
           >
@@ -2362,7 +3073,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                   : t('questionEditor.createQuestion')}
               </Button>
             </SheetFooter>
-          </SheetContent>
+          </ResizableSheetContent>
         </Sheet>
       </form>
     </Form>