@hed-hog/lms 0.0.349 → 0.0.351

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useTranslations } from 'next-intl';
 import {
   CircleDot,
   CircleOff,
@@ -20,7 +19,9 @@ import {
   Loader2,
   Lock,
   Pencil,
+  Play,
   Plus,
+  RefreshCw,
   Save,
   Trash2,
   Undo2,
@@ -29,6 +30,7 @@ import {
   X,
   type LucideIcon,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -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<
@@ -251,6 +320,93 @@ type FormValues = {
   questionId?: string | null;
 };
 
+type TranscriptionSegment = {
+  id: string;
+  start: string;
+  end: string;
+  text: string;
+};
+
+function segmentId(): string {
+  return Math.random().toString(36).slice(2, 9);
+}
+
+function parseTimeToSeconds(input: string): number | null {
+  const normalized = input.trim();
+  if (!normalized) return null;
+  const parts = normalized.split(':').map((part) => Number(part));
+  if (parts.some((part) => !Number.isFinite(part) || part < 0)) return null;
+  if (parts.length === 2) {
+    const mm = parts[0];
+    const ss = parts[1];
+    if (mm === undefined || ss === undefined) return null;
+    if (ss > 59) return null;
+    return mm * 60 + ss;
+  }
+  if (parts.length === 3) {
+    const hh = parts[0];
+    const mm = parts[1];
+    const ss = parts[2];
+    if (hh === undefined || mm === undefined || ss === undefined) return null;
+    if (mm > 59 || ss > 59) return null;
+    return hh * 3600 + mm * 60 + ss;
+  }
+  return null;
+}
+
+function normalizeTimeInput(input: string): string {
+  const seconds = parseTimeToSeconds(input);
+  if (seconds === null) return input.trim();
+  const hh = Math.floor(seconds / 3600);
+  const mm = Math.floor((seconds % 3600) / 60);
+  const ss = seconds % 60;
+  if (hh > 0) {
+    return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
+  }
+  return `${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
+}
+
+function parseTranscriptionSegments(raw?: string): TranscriptionSegment[] {
+  const lines = String(raw ?? '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+  if (lines.length === 0) {
+    return [{ id: segmentId(), start: '00:00', end: '00:15', text: '' }];
+  }
+  return lines.map((line) => {
+    const match = line.match(/^\[(.+?)\s*-->\s*(.+?)\]\s*(.*)$/);
+    if (match) {
+      return {
+        id: segmentId(),
+        start: normalizeTimeInput(match[1] ?? ''),
+        end: normalizeTimeInput(match[2] ?? ''),
+        text: match[3] ?? '',
+      };
+    }
+    return {
+      id: segmentId(),
+      start: '00:00',
+      end: '00:15',
+      text: line,
+    };
+  });
+}
+
+function serializeTranscriptionSegments(
+  segments: TranscriptionSegment[]
+): string {
+  return segments
+    .map((segment) => ({
+      start: normalizeTimeInput(segment.start),
+      end: normalizeTimeInput(segment.end),
+      text: segment.text.trim(),
+    }))
+    .filter((segment) => segment.text.length > 0)
+    .map((segment) => `[${segment.start} --> ${segment.end}] ${segment.text}`)
+    .join('\n');
+}
+
 // ── SortableAlternativa ───────────────────────────────────────────────────────
 
 function SortableAlternativa({
@@ -327,9 +483,7 @@ function SortableAlternativa({
             ? 'text-foreground'
             : 'text-muted-foreground hover:text-foreground'
         )}
-        aria-label={
-          alt.correta ? markIncorrectLabel : markCorrectLabel
-        }
+        aria-label={alt.correta ? markIncorrectLabel : markCorrectLabel}
       >
         {alt.correta ? (
           <CircleDot className="size-5" />
@@ -357,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) =>
@@ -378,8 +539,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const videoProviders: { value: VideoProvider; label: string }[] = [
     { value: 'youtube', label: 'YouTube' },
     { value: 'vimeo', label: 'Vimeo' },
-    { value: 'bunny', label: 'Bunny.net' },
-    { value: 'custom', label: t('providers.custom') },
+    { value: 'file_storage', label: t('providers.fileStorage') },
   ];
   const questionTypeLabels: Record<QuestionType, string> = {
     multiple_choice: t('questionEditor.types.multipleChoice'),
@@ -404,7 +564,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     publicDescription: z.string(),
     privateDescription: z.string(),
     videoProvider: z
-      .enum(['youtube', 'vimeo', 'bunny', 'custom'] as const)
+      .enum(['youtube', 'vimeo', 'file_storage'] as const)
       .optional(),
     videoUrl: z.string().optional(),
     transcription: z.string().optional(),
@@ -426,7 +586,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     visibility: lesson?.visibility ?? 'publico',
     publicDescription: lesson?.publicDescription ?? '',
     privateDescription: lesson?.privateDescription ?? '',
-    videoProvider: lesson?.videoProvider ?? 'youtube',
+    videoProvider:
+      lesson?.videoProvider === 'youtube' || lesson?.videoProvider === 'vimeo'
+        ? lesson.videoProvider
+        : 'file_storage',
     videoUrl: lesson?.videoUrl ?? '',
     transcription: lesson?.transcription ?? '',
     postContent: lesson?.postContent ?? '',
@@ -441,6 +604,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const { isDirty } = form.formState;
   const watchedType = useWatch({ control: form.control, name: 'type' });
   const watchedStatus = useWatch({ control: form.control, name: 'status' });
+  const watchedVideoProvider = useWatch({
+    control: form.control,
+    name: 'videoProvider',
+  });
 
   useEffect(() => {
     if (!lesson) return;
@@ -451,9 +618,61 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const [localResources, setLocalResources] = useState<Resource[]>(
     () => lesson?.resources ?? []
   );
+  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 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[]>(
@@ -482,14 +701,62 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
 
   useEffect(() => {
     setLocalResources(lesson?.resources ?? []);
+    setResourcesDirty(false);
+    setConversionJobId(lesson?.videoConversionJobId ?? null);
     setSelectedInstructorIds(lesson?.instructors?.map((i) => i.id) ?? []);
-  }, [lesson?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+    setTranscriptionSegments(parseTranscriptionSegments(lesson?.transcription));
+  }, [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);
@@ -497,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',
@@ -518,49 +786,216 @@ 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);
   }
 
-  function handleResourceDownload(res: Resource) {
-    if (!res.url) {
+  async function resolveResourceUrl(res: Resource): Promise<string | null> {
+    if (res.url) return res.url;
+    const numId = res.fileId ?? Number(res.id);
+    if (!Number.isInteger(numId) || numId <= 0) return null;
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/open/${numId}`,
+        method: 'PUT',
+      });
+      return response?.data?.url ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  async function openResource(res: Resource) {
+    const url = await resolveResourceUrl(res);
+    if (!url) {
+      toast.error(t('questionEditor.resourceOpenError'));
+      return;
+    }
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }
+
+  async function handleResourceDownload(res: Resource) {
+    const resourceUrl = await resolveResourceUrl(res);
+    if (!resourceUrl) {
       toast(t('questionEditor.resourceDownloadSoon', { name: res.name }));
       return;
     }
     const a = document.createElement('a');
-    a.href = res.url;
+    a.href = resourceUrl;
     a.download = res.name;
     a.click();
   }
 
+  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;
+    }
+
+    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;
+      });
+    }
+  }
+
+  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;
+    }
+
+    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 {
+      setOriginalUploadProgress(null);
+    }
+  }
+
   function onSubmit(values: FormValues) {
+    const transcriptionValue =
+      values.type === 'video'
+        ? serializeTranscriptionSegments(transcriptionSegments)
+        : values.transcription;
+
     updateLesson.mutate({
       lessonId,
       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);
+    form.reset({ ...values, transcription: transcriptionValue });
+    setResourcesDirty(false);
   }
 
   // ── Question sheet helpers ────────────────────────────────────────────────
@@ -684,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">
@@ -735,15 +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="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>
@@ -751,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">
@@ -760,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"
@@ -869,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"
@@ -901,10 +1365,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                         STATUS_COLORS[val]
                                       )}
                                     >
-                                  {lbl}
-                                </span>
-                              </SelectItem>
-                            ))}
+                                      {lbl}
+                                    </span>
+                                  </SelectItem>
+                                ))}
                               </SelectContent>
                             </Select>
                             <FormMessage className="text-xs" />
@@ -932,17 +1396,20 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               <SelectContent>
                                 <SelectItem value="publico">
                                   <span className="flex items-center gap-1.5">
-                                    <Eye className="size-3" /> {t('lessonForm.public')}
+                                    <Eye className="size-3" />{' '}
+                                    {t('lessonForm.public')}
                                   </span>
                                 </SelectItem>
                                 <SelectItem value="privado">
                                   <span className="flex items-center gap-1.5">
-                                    <EyeOff className="size-3" /> {t('lessonForm.private')}
+                                    <EyeOff className="size-3" />{' '}
+                                    {t('lessonForm.private')}
                                   </span>
                                 </SelectItem>
                                 <SelectItem value="restrito">
                                   <span className="flex items-center gap-1.5">
-                                    <Lock className="size-3" /> {t('questionEditor.restricted')}
+                                    <Lock className="size-3" />{' '}
+                                    {t('questionEditor.restricted')}
                                   </span>
                                 </SelectItem>
                               </SelectContent>
@@ -1024,9 +1491,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                     prev.filter((id) => id !== sid)
                                   )
                                 }
-                                aria-label={t('questionEditor.removeInstructor', {
-                                  name: displayName,
-                                })}
+                                aria-label={t(
+                                  'questionEditor.removeInstructor',
+                                  {
+                                    name: displayName,
+                                  }
+                                )}
                               >
                                 <X className="size-3" />
                               </Button>
@@ -1044,12 +1514,13 @@ 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">
                     <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
-                      <Eye className="size-3" /> {t('lessonForm.publicDescription')}
+                      <Eye className="size-3" />{' '}
+                      {t('lessonForm.publicDescription')}
                     </CardTitle>
                   </CardHeader>
                   <CardContent className="px-3 pb-2">
@@ -1075,7 +1546,8 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                 <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">
-                      <Lock className="size-3" /> {t('lessonForm.privateDescription')}
+                      <Lock className="size-3" />{' '}
+                      {t('lessonForm.privateDescription')}
                     </CardTitle>
                   </CardHeader>
                   <CardContent className="px-3 pb-2">
@@ -1099,90 +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>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="transcription"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-xs">
-                              {t('lessonForm.tabTranscription')}
-                            </FormLabel>
-                            <FormControl>
-                              <Textarea
-                                {...field}
-                                value={field.value ?? ''}
-                                rows={5}
-                                className="text-xs resize-none font-mono"
-                                placeholder={t('lessonForm.transcriptionPlaceholder')}
-                              />
-                            </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">
@@ -1248,8 +1636,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                   setSelectedQuestion(found);
                                 }}
                                 placeholder={t('questionEditor.selectQuestion')}
-                                searchPlaceholder={t('questionEditor.searchQuestion')}
-                                emptyLabel={t('questionEditor.noQuestionsFound')}
+                                searchPlaceholder={t(
+                                  'questionEditor.searchQuestion'
+                                )}
+                                emptyLabel={t(
+                                  'questionEditor.noQuestionsFound'
+                                )}
                                 entityLabel={t('questionEditor.questionEntity')}
                                 options={MOCK_QUESTIONS}
                                 getOptionValue={(o) => o.id}
@@ -1295,10 +1687,794 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             </ScrollArea>
           </TabsContent>
 
+          {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">
+                    <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">
+                        <span>{t('lessonForm.transcriptionSegments')}</span>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="h-6 text-xs px-2"
+                          onClick={() =>
+                            setTranscriptionSegments((prev) => [
+                              ...prev,
+                              {
+                                id: segmentId(),
+                                start: '00:00',
+                                end: '00:15',
+                                text: '',
+                              },
+                            ])
+                          }
+                        >
+                          <Plus className="size-3 mr-1" />
+                          {t('lessonForm.newTranscriptionSegment')}
+                        </Button>
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-2">
+                      {transcriptionSegments.map((segment, index) => (
+                        <div
+                          key={segment.id}
+                          className="rounded-md border bg-background/80 p-2"
+                        >
+                          <div className="grid grid-cols-1 md:grid-cols-[92px_92px_1fr_auto] gap-2 items-start">
+                            <Input
+                              value={segment.start}
+                              onChange={(event) =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          start: event.target.value,
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              onBlur={() =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          start: normalizeTimeInput(item.start),
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              className="h-8 text-xs font-mono"
+                              placeholder="00:00"
+                            />
+                            <Input
+                              value={segment.end}
+                              onChange={(event) =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          end: event.target.value,
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              onBlur={() =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          end: normalizeTimeInput(item.end),
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              className="h-8 text-xs font-mono"
+                              placeholder="00:15"
+                            />
+                            <Textarea
+                              value={segment.text}
+                              onChange={(event) =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          text: event.target.value,
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              rows={2}
+                              className="text-xs resize-y"
+                              placeholder={t(
+                                'lessonForm.transcriptionSegmentPlaceholder',
+                                {
+                                  count: index + 1,
+                                }
+                              )}
+                            />
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="size-8 text-muted-foreground hover:text-destructive"
+                              onClick={() =>
+                                setTranscriptionSegments((prev) => {
+                                  if (prev.length === 1) {
+                                    const first = prev[0];
+                                    return first
+                                      ? [{ ...first, text: '' }]
+                                      : [];
+                                  }
+
+                                  return prev.filter(
+                                    (item) => item.id !== segment.id
+                                  );
+                                })
+                              }
+                              aria-label={t(
+                                'lessonForm.removeTranscriptionSegment',
+                                {
+                                  count: index + 1,
+                                }
+                              )}
+                            >
+                              <X className="size-3.5" />
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                      <p className="text-[0.65rem] text-muted-foreground">
+                        {t('lessonForm.transcriptionAcceptedFormats')}
+                      </p>
+                    </CardContent>
+                  </Card>
+                </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">
+              <div className="flex flex-col gap-2 p-2 sm:gap-3 sm:p-3">
                 {/* Drop zone */}
                 <div
                   role="button"
@@ -1376,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
@@ -1418,7 +2594,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               aria-label={t('lessonForm.public')}
                             />
                           )}
-                          {/* Abrir em nova aba */}
                           {res.url && (
                             <a
                               href={res.url}
@@ -1433,7 +2608,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               <ExternalLink className="size-3" />
                             </a>
                           )}
-                          {/* Download */}
                           <Button
                             type="button"
                             variant="ghost"
@@ -1446,7 +2620,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                           >
                             <Download className="size-3" />
                           </Button>
-                          {/* Remover */}
                           <Button
                             type="button"
                             variant="ghost"
@@ -1472,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')}
@@ -1488,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" />
@@ -1503,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"
           >
@@ -1548,13 +2729,13 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      {(
-                        Object.keys(questionTypeLabels) as QuestionType[]
-                      ).map((t) => (
-                        <SelectItem key={t} value={t}>
-                          {questionTypeLabels[t]}
-                        </SelectItem>
-                      ))}
+                      {(Object.keys(questionTypeLabels) as QuestionType[]).map(
+                        (t) => (
+                          <SelectItem key={t} value={t}>
+                            {questionTypeLabels[t]}
+                          </SelectItem>
+                        )
+                      )}
                     </SelectContent>
                   </Select>
                 </div>
@@ -1892,7 +3073,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                   : t('questionEditor.createQuestion')}
               </Button>
             </SheetFooter>
-          </SheetContent>
+          </ResizableSheetContent>
         </Sheet>
       </form>
     </Form>