@hed-hog/lms 0.0.361 → 0.0.365

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

@@ -8,7 +8,6 @@ import {
   ChevronUp,
   CircleDot,
   CircleOff,
-  ClipboardList,
   Clock,
   Download,
   ExternalLink,
@@ -20,6 +19,7 @@ import {
   ListChecks,
   Loader2,
   Lock,
+  Mic,
   Pencil,
   Play,
   Plus,
@@ -40,7 +40,6 @@ import { z } from 'zod';
 
 import { CopyButton } from '@/components/copy-button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -78,6 +77,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
@@ -113,12 +113,16 @@ import {
   getQueueJob,
   updateLessonFrame,
   uploadFile,
+  type ApiQuestion,
   type QueueJobResponse,
   type QueueJobStatus,
 } from '../_data/services/course-structure.service';
 import {
+  useCreateQuestionMutation,
   useDeleteLessonMutation,
+  useQuestionsQuery,
   useUpdateLessonMutation,
+  useUpdateResourceTypeMutation,
 } from '../_data/use-course-structure-mutations';
 import {
   courseStructureQueryKey,
@@ -126,9 +130,11 @@ import {
 } from '../_data/use-course-structure-query';
 import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
 import {
+  useStartTranscriptionMutation,
   useTranscriptionSegmentsQuery,
   useUpdateTranscriptionSegmentsMutation,
 } from '../_data/use-transcription-segments';
+import { LessonXpTab } from './detail-lesson-xp-tab';
 import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 import type {
@@ -182,10 +188,6 @@ function getInstructorAvatarUrl(avatarId?: number | null): string | undefined {
     : `/person/avatar/${avatarId}`;
 }
 
-function videoProfileResourceType(profileId: number): string {
-  return `video_profile:${profileId}`;
-}
-
 const MAX_VIDEO_UPLOAD_SIZE_BYTES = 100 * 1024 * 1024;
 
 type LessonTypeLabelKey = `types.${LessonType}`;
@@ -200,7 +202,8 @@ type VideoJobEventMessageKey = `lessonForm.videoJobEvents.${VideoJobEventType}`;
 type VideoJobProgressPhase =
   | 'download_original'
   | 'probe_duration'
-  | 'convert_profile'
+  | 'hls_encode'
+  | 'hls_upload'
   | 'extract_frames'
   | 'extract_frames_done'
   | 'extract_audio'
@@ -219,6 +222,43 @@ type TranslateFn = (
   key: string,
   values?: Record<string, string | number>
 ) => string;
+type GenericResourceType =
+  | 'supplementary_material'
+  | 'student_download'
+  | 'attachment'
+  | 'document'
+  | 'lesson_audio';
+
+const GENERIC_RESOURCE_TYPES: GenericResourceType[] = [
+  'supplementary_material',
+  'student_download',
+  'attachment',
+  'document',
+];
+
+const GENERIC_RESOURCE_TYPE_LABEL_KEYS: Record<GenericResourceType, string> = {
+  supplementary_material: 'lessonForm.resourceTypes.supplementary_material',
+  student_download: 'lessonForm.resourceTypes.student_download',
+  attachment: 'lessonForm.resourceTypes.attachment',
+  document: 'lessonForm.resourceTypes.document',
+  lesson_audio: 'lessonForm.resourceTypes.lesson_audio',
+};
+
+function humanizeResourceType(type: string): string {
+  return type
+    .split(/[_:./-]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function getResourceTypeLabel(t: TranslateFn, type: string): string {
+  if (type in GENERIC_RESOURCE_TYPE_LABEL_KEYS) {
+    return t(GENERIC_RESOURCE_TYPE_LABEL_KEYS[type as GenericResourceType]);
+  }
+
+  return humanizeResourceType(type);
+}
 
 type LessonEditorTab =
   | 'dados'
@@ -227,7 +267,8 @@ type LessonEditorTab =
   | 'imagens'
   | 'transcricao'
   | 'audios'
-  | 'recursos';
+  | 'recursos'
+  | 'xp';
 
 const ACTIVE_VIDEO_JOB_STATUSES: QueueJobStatus[] = [
   'pending',
@@ -274,7 +315,8 @@ const VIDEO_JOB_STATUS_COLORS: Record<QueueJobStatus, string> = {
 const VIDEO_JOB_PROGRESS_PHASES = new Set<VideoJobProgressPhase>([
   'download_original',
   'probe_duration',
-  'convert_profile',
+  'hls_encode',
+  'hls_upload',
   'extract_frames',
   'extract_frames_done',
   'extract_audio',
@@ -367,19 +409,6 @@ function getVideoJobProgressMessage(
   const phase = getVideoJobProgressPhase(event);
   const metadata = event.metadata ?? {};
 
-  if (phase === 'convert_profile') {
-    const profileName =
-      typeof metadata.profileName === 'string' && metadata.profileName.trim()
-        ? metadata.profileName.trim()
-        : typeof metadata.profileId === 'number'
-          ? `#${metadata.profileId}`
-          : '—';
-
-    return t('lessonForm.videoJobProgress.convert_profile', {
-      profileName,
-    });
-  }
-
   if (phase === 'extract_frames_done') {
     const count =
       typeof metadata.frames === 'number' && Number.isFinite(metadata.frames)
@@ -461,12 +490,6 @@ const TYPE_CONFIG: Record<
     bg: 'bg-amber-500/10',
     labelKey: 'types.questao',
   },
-  exercicio: {
-    icon: ClipboardList,
-    color: 'text-purple-500',
-    bg: 'bg-purple-500/10',
-    labelKey: 'types.exercicio',
-  },
 };
 
 const STATUS_COLORS: Record<LessonStatus, string> = {
@@ -510,39 +533,15 @@ function generateAltId(): string {
   return Math.random().toString(36).slice(2, 9);
 }
 
-const MOCK_QUESTIONS: MockQuestion[] = [
-  {
-    id: 'q1',
-    title: 'O que é React?',
-    type: 'multiple_choice',
-    points: 1,
-    alternatives: [
-      {
-        id: 'a1',
-        texto: 'Uma biblioteca JavaScript para interfaces',
-        correta: true,
-      },
-      { id: 'a2', texto: 'Um framework CSS', correta: false },
-      { id: 'a3', texto: 'Um banco de dados', correta: false },
-    ],
-  },
-  {
-    id: 'q2',
-    title: 'Defina componente funcional',
-    type: 'essay',
-    points: 2,
-  },
-  {
-    id: 'q3',
-    title: 'TypeScript é um superset de JavaScript?',
-    type: 'true_false',
-    points: 1,
-    alternatives: [
-      { id: 'true', texto: 'Verdadeiro', correta: true },
-      { id: 'false', texto: 'Falso', correta: false },
-    ],
-  },
-];
+function apiQuestionToMock(q: ApiQuestion): MockQuestion {
+  return {
+    id: String(q.id),
+    title: q.statement.replace(/<[^>]+>/g, '').slice(0, 80),
+    type: (q.questionType as QuestionType) ?? 'multiple_choice',
+    statement: q.statement,
+    points: q.points,
+  };
+}
 
 type FormValues = {
   code: string;
@@ -557,7 +556,7 @@ type FormValues = {
   videoUrl?: string;
   transcription?: string;
   postContent?: string;
-  questionId?: string | null;
+  linkedExam?: string | null;
 };
 
 type EditableTranscriptionSegment = {
@@ -749,17 +748,23 @@ function SortableAlternativa({
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
+const LESSON_TABS: LessonEditorTab[] = [
+  'dados',
+  'conteudo',
+  'videos',
+  'imagens',
+  'transcricao',
+  'audios',
+  'recursos',
+  'xp',
+];
+
 interface EditorLessonProps {
   lessonId: string;
+  defaultTab?: string;
+  onTabChange?: (tab: string) => void;
 }
 
-type VideoProfileOption = {
-  id: number;
-  name: string;
-  ffmpeg_params: string;
-  status: string;
-};
-
 type FramePreviewSource = {
   key: string;
   label: string;
@@ -776,7 +781,7 @@ type FrameAssetMetadata = {
   sizeLabel: string;
 };
 
-export function EditorLesson({ lessonId }: EditorLessonProps) {
+export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLessonProps) {
   const t = useTranslations('lms.CoursesPage.StructurePage');
   const tabAudiosLabel = (() => {
     try {
@@ -788,6 +793,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const lesson = useStructureStore((s) =>
     s.lessons.find((l) => l.id === lessonId)
   );
+  const updateLessonInStore = useStructureStore((s) => s.updateLesson);
   const sessions = useStructureStore((s) => s.sessions);
   const persistedVideoProvider: VideoProvider | undefined =
     lesson?.videoProvider === 'youtube' || lesson?.videoProvider === 'vimeo'
@@ -800,6 +806,9 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const updateTranscriptionSegments = useUpdateTranscriptionSegmentsMutation(
     lesson?.id ?? null
   );
+  const { mutate: startTranscription, isPending: isStartingTranscription } =
+    useStartTranscriptionMutation(lesson?.id ?? null);
+  const updateResourceTypeMutation = useUpdateResourceTypeMutation();
   const deleteLesson = useDeleteLessonMutation();
   const showConfirm = useStructureStore((s) => s.showConfirm);
   const courseId = useStructureStore((s) => s.courseId);
@@ -834,11 +843,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     fill_blank: t('questionEditor.types.fillBlank'),
     matching: t('questionEditor.types.matching'),
   };
-  const isVideoConversionEnabled = lmsSettings.videoConversionEnabled;
   const schema = z.object({
     code: z.string().min(1, t('questionEditor.validation.codeRequired')),
     title: z.string().min(1, t('questionEditor.validation.titleRequired')),
-    type: z.enum(['video', 'post', 'questao', 'exercicio'] as const),
+    type: z.enum(['video', 'post', 'questao'] as const),
     duration: z.coerce.number().min(0),
     status: z.enum([
       'preparada',
@@ -856,7 +864,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     videoUrl: z.string().optional(),
     transcription: z.string().optional(),
     postContent: z.string().optional(),
-    questionId: z.string().nullable().optional(),
+    linkedExam: z.string().nullable().optional(),
   });
 
   const instructorPool =
@@ -880,7 +888,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     videoUrl: lesson?.videoUrl ?? '',
     transcription: lesson?.transcription ?? '',
     postContent: lesson?.postContent ?? '',
-    questionId: null,
+    linkedExam: lesson?.linkedExam ?? null,
   });
 
   const form = useForm<FormValues>({
@@ -891,6 +899,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 watchedPublished = useWatch({
+    control: form.control,
+    name: 'published',
+  });
   const watchedVideoProvider = useWatch({
     control: form.control,
     name: 'videoProvider',
@@ -906,12 +918,21 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     () => lesson?.resources ?? []
   );
   const [jobTimerNowMs, setJobTimerNowMs] = useState<number>(() => Date.now());
-  const [activeTab, setActiveTab] = useState<LessonEditorTab>('dados');
+  const [activeTab, setActiveTab] = useState<LessonEditorTab>(() =>
+    defaultTab && LESSON_TABS.includes(defaultTab as LessonEditorTab)
+      ? (defaultTab as LessonEditorTab)
+      : 'dados'
+  );
   const [isJobFeedbackCollapsed, setIsJobFeedbackCollapsed] = useState<boolean>(
     () => readVideoJobFeedbackCollapsedPreference()
   );
   const [jobDetailOpen, setJobDetailOpen] = useState(false);
   const [resourcesDirty, setResourcesDirty] = useState(false);
+  // 🆕 Filtro de tipo de recurso (estado de sessão)
+  const [resourceTypeFilter, setResourceTypeFilter] = useState<string>('all');
+  const [isUpdatingResourceType, setIsUpdatingResourceType] = useState<
+    string | null
+  >(null);
   const [conversionJobId, setConversionJobId] = useState<number | null>(null);
   const [videoUploadError, setVideoUploadError] = useState<string | null>(null);
   const [dragOver, setDragOver] = useState(false);
@@ -921,9 +942,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   >(null);
   const [isRequeueingOriginalVideo, setIsRequeueingOriginalVideo] =
     useState(false);
-  const [profileUploadProgress, setProfileUploadProgress] = useState<
-    Record<number, number>
-  >({});
   const [isResolvingVideoPreview, setIsResolvingVideoPreview] = useState(false);
   const [videoPreviewOpen, setVideoPreviewOpen] = useState(false);
   const [videoPreviewResource, setVideoPreviewResource] =
@@ -1056,26 +1074,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   >(() => toEditableTranscriptionSegments());
   const [transcriptionDirty, setTranscriptionDirty] = useState(false);
 
-  const { data: fetchedTranscriptionSegments = [] } =
-    useTranscriptionSegmentsQuery(lesson?.id ?? null);
-
   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: [],
-  });
+    data: fetchedTranscriptionSegments = [],
+    isLoading: isLoadingTranscription,
+  } = useTranscriptionSegmentsQuery(lesson?.id ?? null);
 
   const {
     data: conversionJob,
@@ -1126,13 +1128,19 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   );
 
   // ── Question sheet state ────────────────────────────────────────────────────
+  const { data: questionsData, isLoading: questionsLoading } = useQuestionsQuery();
+  const createQuestionMutation = useCreateQuestionMutation();
   const [questionSheetOpen, setQuestionSheetOpen] = useState(false);
   const [editingQuestion, setEditingQuestion] = useState<MockQuestion | null>(
     null
   );
-  const [selectedQuestion, setSelectedQuestion] = useState<MockQuestion | null>(
-    null
-  );
+  const [selectedQuestion, setSelectedQuestion] = useState<MockQuestion | null>(null);
+
+  useEffect(() => {
+    if (!lesson?.linkedExam || !questionsData) return;
+    const found = questionsData.data.find((q) => String(q.id) === lesson.linkedExam);
+    if (found) setSelectedQuestion(apiQuestionToMock(found));
+  }, [lesson?.linkedExam, questionsData]);
   const [qSheetStatement, setQSheetStatement] = useState('');
   const [qSheetType, setQSheetType] = useState<QuestionType>('multiple_choice');
   const [qSheetPoints, setQSheetPoints] = useState(1);
@@ -1164,7 +1172,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       toEditableTranscriptionSegments(fetchedTranscriptionSegments)
     );
     setTranscriptionDirty(false);
-  }, [lesson?.id, fetchedTranscriptionSegments]);
+    if (lesson?.id) {
+      updateLessonInStore(lesson.id, {
+        transcriptionSegments: fetchedTranscriptionSegments,
+      });
+    }
+  }, [lesson?.id, fetchedTranscriptionSegments, updateLessonInStore]);
 
   useEffect(() => {
     const frameIds = new Set(videoFrames.map((frame) => frame.id));
@@ -1420,11 +1433,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         String(originalVideoResource.fileId ?? originalVideoResource.id)
       )
     : false;
-  const profileVideoResources = new Map(
-    localResources
-      .filter((res) => res.type.startsWith('video_profile:'))
-      .map((res) => [Number(res.type.replace('video_profile:', '')), res])
-  );
   const audioResources = localResources.filter(
     (res) => res.type === 'lesson_audio'
   );
@@ -1432,9 +1440,26 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     (res) =>
       res.type !== 'video_original' && !res.type.startsWith('video_profile:')
   );
-  const supplementaryResources = genericResources.filter(
-    (res) => res.type === 'supplementary_material'
-  );
+  // Todos os recursos genéricos aparecem na aba Recursos
+  const supplementaryResources = genericResources;
+
+  // 🆕 Recursos filtrados baseado no tipo selecionado
+  const filteredSupplementaryResources =
+    resourceTypeFilter === 'all'
+      ? supplementaryResources
+      : supplementaryResources.filter((res) => res.type === resourceTypeFilter);
+
+  // 🆕 Tipos únicos presentes nos recursos atuais
+  const availableResourceTypes = Array.from(
+    new Set(supplementaryResources.map((res) => res.type).filter(Boolean))
+  ).sort();
+
+  const resourceTypeFilterOptions = availableResourceTypes.map((type) => ({
+    type,
+    count: supplementaryResources.filter((res) => res.type === type).length,
+    label: getResourceTypeLabel(t, type),
+  }));
+
   const isConversionJobActive = conversionJob
     ? ACTIVE_VIDEO_JOB_STATUSES.includes(conversionJob.status)
     : false;
@@ -1509,7 +1534,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       persistedVideoProvider !== 'file_storage');
   const canRequeueSavedOriginalVideo =
     Boolean(originalVideoResource?.fileId) && !isOriginalVideoUploadBlocked;
-  const isProfileVideoUploadBlocked = isConversionJobActive;
   const currentQueueJobId =
     focusedPipelineJob?.id ?? transcriptionJobId ?? conversionJobId;
   const isTranscriptionJobActive = transcriptionJob
@@ -1550,18 +1574,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
           },
         ]
       : []),
-    ...courseVideoProfiles.flatMap((profile) => {
-      const resource = profileVideoResources.get(profile.id);
-      if (!resource) return [];
-
-      return [
-        {
-          key: `profile:${profile.id}`,
-          label: profile.name,
-          resource,
-        },
-      ];
-    }),
   ];
   const activeFramePreviewSource =
     framePreviewSources.find(
@@ -1785,6 +1797,24 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     }
   }
 
+  // 🆕 Handler para atualizar tipo de recurso
+  function handleUpdateResourceType(resourceId: string, newType: string) {
+    if (!lesson?.id) return;
+
+    setIsUpdatingResourceType(resourceId);
+    updateResourceTypeMutation.mutate(
+      {
+        lessonId: lesson.id,
+        resourceId,
+        newType,
+        newTypeLabel: getResourceTypeLabel(t, newType),
+      },
+      {
+        onSettled: () => setIsUpdatingResourceType(null),
+      }
+    );
+  }
+
   async function openVideoPreview(res: Resource) {
     const requestId = ++videoPreviewRequestIdRef.current;
     setVideoPreviewResource(res);
@@ -2302,63 +2332,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     return frameAssetMetadataById[frame.id]?.sizeLabel ?? '—';
   }
 
-  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,
-        uploadedAt: new Date().toISOString(),
-        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 (!isVideoConversionEnabled) {
-      toast.error(t('lessonForm.videoConversionFailed'));
-      return;
-    }
-
     if (
       watchedVideoProvider === 'file_storage' &&
       persistedVideoProvider !== 'file_storage'
@@ -2485,6 +2459,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
           videoConversionJobId: conversionJobId ?? lesson?.videoConversionJobId,
           resources: localResources,
           instructorIds: selectedInstructorIds.map(Number),
+          linkedExam: values.linkedExam ?? undefined,
         },
       },
       {
@@ -2602,28 +2577,43 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       setQSheetErrors(errors);
       return;
     }
-    const saved: MockQuestion = {
-      id: editingQuestion?.id ?? `q-${Date.now()}`,
-      title: qSheetStatement.replace(/<[^>]+>/g, '').slice(0, 80),
-      type: qSheetType,
+
+    const dto = {
       statement: qSheetStatement,
+      questionType: qSheetType,
       points: qSheetPoints,
       alternatives:
         qSheetType === 'multiple_choice' || qSheetType === 'true_false'
-          ? qSheetAlts
+          ? qSheetAlts.map((a) => ({ text: a.texto, isCorrect: a.correta }))
           : undefined,
       fillBlankAnswers:
-        qSheetType === 'fill_blank' ? qSheetFillBlanks : undefined,
-      matchingPairs: qSheetType === 'matching' ? qSheetPairs : undefined,
+        qSheetType === 'fill_blank'
+          ? qSheetFillBlanks.map((f) => ({
+              answer: f.answer,
+              alternatives: f.alternativesText
+                ? f.alternativesText.split(',').map((s) => s.trim()).filter(Boolean)
+                : undefined,
+            }))
+          : undefined,
+      matchingPairs:
+        qSheetType === 'matching'
+          ? qSheetPairs.map((p) => ({ id: p.id, leftText: p.leftText, rightText: p.rightText }))
+          : undefined,
     };
-    setSelectedQuestion(saved);
-    form.setValue('questionId', saved.id, { shouldDirty: true });
-    setQuestionSheetOpen(false);
-    toast.success(
-      editingQuestion
-        ? t('questionEditor.updated')
-        : t('questionEditor.created')
-    );
+
+    createQuestionMutation.mutate(dto, {
+      onSuccess: (result) => {
+        const mock = apiQuestionToMock(result);
+        setSelectedQuestion(mock);
+        form.setValue('linkedExam', String(result.id), { shouldDirty: true });
+        setQuestionSheetOpen(false);
+        toast.success(
+          editingQuestion
+            ? t('questionEditor.updated')
+            : t('questionEditor.created')
+        );
+      },
+    });
   }
 
   function handleDelete() {
@@ -2713,7 +2703,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         {/* ── Tabs ─────────────────────────────────────────────────────────── */}
         <Tabs
           value={activeTab}
-          onValueChange={(value) => setActiveTab(value as LessonEditorTab)}
+          onValueChange={(value) => {
+            setActiveTab(value as LessonEditorTab);
+            onTabChange?.(value);
+          }}
           className="flex flex-col flex-1 min-h-0 min-w-0"
         >
           <TabsList className="mt-0 h-auto w-full justify-start shrink-0 rounded-none border-b bg-muted/50 px-2 py-1 overflow-x-auto overflow-y-hidden whitespace-nowrap sm:px-3">
@@ -2767,6 +2760,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             >
               {t('lessonForm.tabResources')}
             </TabsTrigger>
+            <TabsTrigger
+              value="xp"
+              className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
+            >
+              XP
+            </TabsTrigger>
           </TabsList>
 
           {/* ── Tab Dados ────────────────────────────────────────────────── */}
@@ -2890,48 +2889,57 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                     </CardTitle>
                   </CardHeader>
                   <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-                      <FormField
-                        control={form.control}
-                        name="status"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-xs">
-                              {t('questionEditor.productionStatus')}
-                            </FormLabel>
-                            <Select
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <FormControl>
-                                <SelectTrigger className="h-8 text-xs w-full">
-                                  <SelectValue />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                {(
-                                  Object.entries(statusLabels) as [
-                                    LessonStatus,
-                                    string,
-                                  ][]
-                                ).map(([val, lbl]) => (
-                                  <SelectItem key={val} value={val}>
-                                    <span
-                                      className={cn(
-                                        'text-xs px-1.5 py-0.5 rounded',
-                                        STATUS_COLORS[val]
-                                      )}
-                                    >
-                                      {lbl}
-                                    </span>
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                            <FormMessage className="text-xs" />
-                          </FormItem>
-                        )}
-                      />
+                    <div
+                      className={cn(
+                        'grid grid-cols-1 gap-2',
+                        watchedType === 'video' && !watchedPublished
+                          ? 'sm:grid-cols-2'
+                          : 'sm:grid-cols-1'
+                      )}
+                    >
+                      {watchedType === 'video' && !watchedPublished && (
+                        <FormField
+                          control={form.control}
+                          name="status"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-xs">
+                                {t('questionEditor.productionStatus')}
+                              </FormLabel>
+                              <Select
+                                value={field.value}
+                                onValueChange={field.onChange}
+                              >
+                                <FormControl>
+                                  <SelectTrigger className="h-8 text-xs w-full">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                </FormControl>
+                                <SelectContent>
+                                  {(
+                                    Object.entries(statusLabels) as [
+                                      LessonStatus,
+                                      string,
+                                    ][]
+                                  ).map(([val, lbl]) => (
+                                    <SelectItem key={val} value={val}>
+                                      <span
+                                        className={cn(
+                                          'text-xs px-1.5 py-0.5 rounded',
+                                          STATUS_COLORS[val]
+                                        )}
+                                      >
+                                        {lbl}
+                                      </span>
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <FormMessage className="text-xs" />
+                            </FormItem>
+                          )}
+                        />
+                      )}
 
                       <FormField
                         control={form.control}
@@ -3211,20 +3219,25 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                     <CardContent className="px-3 pb-2 flex flex-col gap-2">
                       <FormField
                         control={form.control}
-                        name="questionId"
+                        name="linkedExam"
                         render={({ field }) => (
                           <FormItem>
                             <FormControl>
-                              <EntityPicker<MockQuestion>
+                              <EntityPicker<ApiQuestion>
                                 value={field.value ?? null}
                                 onChange={(val) => {
                                   field.onChange(val);
                                   const found =
-                                    MOCK_QUESTIONS.find((q) => q.id === val) ??
-                                    null;
-                                  setSelectedQuestion(found);
+                                    (questionsData?.data ?? []).find(
+                                      (q) => String(q.id) === val
+                                    ) ?? null;
+                                  setSelectedQuestion(found ? apiQuestionToMock(found) : null);
                                 }}
-                                placeholder={t('questionEditor.selectQuestion')}
+                                placeholder={
+                                  questionsLoading
+                                    ? t('questionEditor.loadingQuestions')
+                                    : t('questionEditor.selectQuestion')
+                                }
                                 searchPlaceholder={t(
                                   'questionEditor.searchQuestion'
                                 )}
@@ -3232,11 +3245,14 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                   'questionEditor.noQuestionsFound'
                                 )}
                                 entityLabel={t('questionEditor.questionEntity')}
-                                options={MOCK_QUESTIONS}
-                                getOptionValue={(o) => o.id}
-                                getOptionLabel={(o) => o.title}
+                                options={questionsData?.data ?? []}
+                                getOptionValue={(o) => String(o.id)}
+                                getOptionLabel={(o) =>
+                                  o.statement.replace(/<[^>]+>/g, '').slice(0, 80)
+                                }
                                 getOptionDescription={(o) =>
-                                  questionTypeLabels[o.type]
+                                  questionTypeLabels[o.questionType as QuestionType] ??
+                                  o.questionType
                                 }
                               />
                             </FormControl>
@@ -3361,181 +3377,140 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                         </p>
                       ) : null}
 
-                      {isVideoConversionEnabled ? (
-                        <Card className="bg-muted/20 py-2 gap-2 order-3">
-                          <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">
-                                        <IconActionTooltip
-                                          label={t('lessonForm.playVideoAria', {
-                                            name: originalVideoResource.name,
-                                          })}
-                                          asWrapper={isResolvingVideoPreview}
-                                        >
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-emerald-600"
-                                            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>
-                                        </IconActionTooltip>
-                                        <IconActionTooltip
-                                          label={t(
-                                            'lessonForm.downloadVideoAria',
+                      <Card className="bg-muted/20 py-2 gap-2 order-3">
+                        <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">
+                                      <IconActionTooltip
+                                        label={t('lessonForm.playVideoAria', {
+                                          name: originalVideoResource.name,
+                                        })}
+                                        asWrapper={isResolvingVideoPreview}
+                                      >
+                                        <Button
+                                          type="button"
+                                          variant="ghost"
+                                          size="icon"
+                                          className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-emerald-600"
+                                          disabled={isResolvingVideoPreview}
+                                          onClick={() =>
+                                            void openVideoPreview(
+                                              originalVideoResource
+                                            )
+                                          }
+                                          aria-label={t(
+                                            'lessonForm.playVideoAria',
                                             {
                                               name: originalVideoResource.name,
                                             }
                                           )}
-                                          asWrapper={isDownloadingOriginalVideo}
                                         >
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-amber-600"
-                                            disabled={
-                                              isDownloadingOriginalVideo
-                                            }
-                                            onClick={() =>
-                                              void handleResourceDownload(
-                                                originalVideoResource
-                                              )
-                                            }
-                                            aria-label={t(
-                                              'lessonForm.downloadVideoAria',
-                                              {
-                                                name: originalVideoResource.name,
-                                              }
-                                            )}
-                                          >
-                                            {isDownloadingOriginalVideo ? (
-                                              <Loader2 className="size-3 animate-spin" />
-                                            ) : (
-                                              <Download className="size-3" />
-                                            )}
-                                          </Button>
-                                        </IconActionTooltip>
-                                        <IconActionTooltip
-                                          label={t('lessonForm.openVideoAria', {
+                                          {isResolvingVideoPreview ? (
+                                            <Loader2 className="size-3 animate-spin" />
+                                          ) : (
+                                            <Play className="size-3" />
+                                          )}
+                                        </Button>
+                                      </IconActionTooltip>
+                                      <IconActionTooltip
+                                        label={t(
+                                          'lessonForm.downloadVideoAria',
+                                          {
                                             name: originalVideoResource.name,
-                                          })}
-                                        >
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-blue-600"
-                                            onClick={() =>
-                                              void openResource(
-                                                originalVideoResource
-                                              )
-                                            }
-                                            aria-label={t(
-                                              'lessonForm.openVideoAria',
-                                              {
-                                                name: originalVideoResource.name,
-                                              }
-                                            )}
-                                          >
-                                            <ExternalLink className="size-3" />
-                                          </Button>
-                                        </IconActionTooltip>
-                                      </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">
-                                    {originalVideoResource ? (
-                                      <>
+                                          }
+                                        )}
+                                        asWrapper={isDownloadingOriginalVideo}
+                                      >
                                         <Button
                                           type="button"
-                                          variant="secondary"
-                                          className="h-8 px-3 text-xs"
-                                          disabled={
-                                            isOriginalVideoUploadBlocked
-                                          }
+                                          variant="ghost"
+                                          size="icon"
+                                          className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-amber-600"
+                                          disabled={isDownloadingOriginalVideo}
                                           onClick={() =>
-                                            originalVideoInputRef.current?.click()
+                                            void handleResourceDownload(
+                                              originalVideoResource
+                                            )
                                           }
+                                          aria-label={t(
+                                            'lessonForm.downloadVideoAria',
+                                            {
+                                              name: originalVideoResource.name,
+                                            }
+                                          )}
                                         >
-                                          <UploadCloud className="size-3.5 mr-1" />
-                                          {t(
-                                            'lessonForm.replaceOriginalForConversion'
+                                          {isDownloadingOriginalVideo ? (
+                                            <Loader2 className="size-3 animate-spin" />
+                                          ) : (
+                                            <Download className="size-3" />
                                           )}
                                         </Button>
+                                      </IconActionTooltip>
+                                      <IconActionTooltip
+                                        label={t('lessonForm.openVideoAria', {
+                                          name: originalVideoResource.name,
+                                        })}
+                                      >
                                         <Button
                                           type="button"
-                                          variant="outline"
-                                          className="h-8 px-3 text-xs"
-                                          disabled={
-                                            !canRequeueSavedOriginalVideo
-                                          }
+                                          variant="ghost"
+                                          size="icon"
+                                          className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-blue-600"
                                           onClick={() =>
-                                            void handleRequeueOriginalVideo()
+                                            void openResource(
+                                              originalVideoResource
+                                            )
                                           }
-                                        >
-                                          {isRequeueingOriginalVideo ? (
-                                            <Loader2 className="size-3.5 mr-1 animate-spin" />
-                                          ) : (
-                                            <RefreshCw className="size-3.5 mr-1" />
-                                          )}
-                                          {t(
-                                            'lessonForm.retryConversionWithSavedOriginal'
+                                          aria-label={t(
+                                            'lessonForm.openVideoAria',
+                                            {
+                                              name: originalVideoResource.name,
+                                            }
                                           )}
+                                        >
+                                          <ExternalLink className="size-3" />
                                         </Button>
-                                      </>
-                                    ) : (
+                                      </IconActionTooltip>
+                                    </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">
+                                  {originalVideoResource ? (
+                                    <>
                                       <Button
                                         type="button"
                                         variant="secondary"
@@ -3547,50 +3522,83 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                       >
                                         <UploadCloud className="size-3.5 mr-1" />
                                         {t(
-                                          'lessonForm.uploadOriginalForConversion'
+                                          'lessonForm.replaceOriginalForConversion'
                                         )}
                                       </Button>
-                                    )}
-                                    <span className="text-[0.65rem] text-muted-foreground">
-                                      {isConversionJobActive
-                                        ? t(
-                                            'lessonForm.videoUploadBlockedWhileProcessing'
-                                          )
-                                        : isConversionJobStatusResolving
-                                          ? t('lessonForm.videoJobStateLoading')
-                                          : 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}
+                                      <Button
+                                        type="button"
+                                        variant="outline"
+                                        className="h-8 px-3 text-xs"
+                                        disabled={!canRequeueSavedOriginalVideo}
+                                        onClick={() =>
+                                          void handleRequeueOriginalVideo()
+                                        }
+                                      >
+                                        {isRequeueingOriginalVideo ? (
+                                          <Loader2 className="size-3.5 mr-1 animate-spin" />
+                                        ) : (
+                                          <RefreshCw className="size-3.5 mr-1" />
+                                        )}
+                                        {t(
+                                          'lessonForm.retryConversionWithSavedOriginal'
+                                        )}
+                                      </Button>
+                                    </>
+                                  ) : (
+                                    <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'
+                                        )
+                                      : isConversionJobStatusResolving
+                                        ? t('lessonForm.videoJobStateLoading')
+                                        : 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>
-                              <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>
-                      ) : null}
+                            <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 && !shouldHidePipelineCard ? (
                         <Card className="bg-muted/20 py-2 gap-2 order-4">
@@ -3947,259 +3955,43 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                       <Card className="bg-muted/20 py-2 gap-2 order-2">
                         <CardHeader className="px-3 pt-2 pb-1">
                           <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                            {t('lessonForm.fileStorageVideosByResolution')}
+                            {t('lessonForm.hlsStatusTitle')}
                           </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 ? (
+                        <CardContent className="px-3 pb-2">
+                          {(() => {
+                            const hlsResource = localResources.find(
+                              (r) => r.type === 'video_hls'
+                            );
+                            if (hlsResource) {
+                              return (
+                                <div className="flex items-center gap-2">
+                                  <div className="size-2 rounded-full bg-emerald-500 shrink-0" />
+                                  <p className="text-xs text-emerald-700 dark:text-emerald-400">
+                                    {t('lessonForm.hlsStatusReady')}
+                                  </p>
+                                </div>
+                              );
+                            }
+                            if (isConversionJobActive) {
+                              return (
+                                <div className="flex items-center gap-2">
+                                  <Loader2 className="size-3.5 animate-spin text-muted-foreground shrink-0" />
+                                  <p className="text-xs text-muted-foreground">
+                                    {t('lessonForm.hlsStatusProcessing')}
+                                  </p>
+                                </div>
+                              );
+                            }
+                            return (
+                              <div className="flex items-center gap-2">
+                                <div className="size-2 rounded-full bg-muted-foreground/40 shrink-0" />
                                 <p className="text-xs text-muted-foreground">
-                                  {t(
-                                    'lessonForm.videoProfilesLockedWhileProcessing'
-                                  )}
+                                  {t('lessonForm.hlsStatusPending')}
                                 </p>
-                              ) : null}
-                              <div className="flex flex-col gap-1">
-                                {courseVideoProfiles.map((profile) => {
-                                  const res = profileVideoResources.get(
-                                    profile.id
-                                  );
-                                  const hasVideo = Boolean(res);
-                                  const isDownloadingResource = res
-                                    ? downloadingResourceKeys.has(
-                                        String(res.fileId ?? res.id)
-                                      )
-                                    : false;
-                                  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={cn(
-                                          'size-3.5 shrink-0',
-                                          hasVideo
-                                            ? 'text-emerald-600'
-                                            : 'text-blue-600'
-                                        )}
-                                      />
-                                      <div className="flex-1 min-w-0">
-                                        <p className="text-xs truncate font-medium">
-                                          {profile.name}
-                                        </p>
-                                        {res ? (
-                                          (() => {
-                                            const metadata =
-                                              resolveResourceMetadata(res);
-
-                                            return (
-                                              <p className="text-[0.65rem] text-muted-foreground">
-                                                {`${metadata.sizeLabel} · ${metadata.uploadedAtLabel}`}
-                                              </p>
-                                            );
-                                          })()
-                                        ) : (
-                                          <Badge className="mt-1 inline-flex items-center gap-1 border border-blue-200 bg-blue-100 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200 dark:hover:bg-blue-950/50">
-                                            {isConversionJobActive ? (
-                                              <Loader2 className="size-3 animate-spin" />
-                                            ) : (
-                                              <Clock className="size-3" />
-                                            )}
-                                            {t('lessonForm.awaitingConversion')}
-                                          </Badge>
-                                        )}
-                                        {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 && (
-                                        <>
-                                          <IconActionTooltip
-                                            label={t(
-                                              'lessonForm.playVideoAria',
-                                              { name: res.name }
-                                            )}
-                                            asWrapper={isResolvingVideoPreview}
-                                          >
-                                            <Button
-                                              type="button"
-                                              variant="ghost"
-                                              size="icon"
-                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-emerald-600"
-                                              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>
-                                          </IconActionTooltip>
-                                          <IconActionTooltip
-                                            label={t(
-                                              'lessonForm.openVideoAria',
-                                              { name: res.name }
-                                            )}
-                                          >
-                                            <Button
-                                              type="button"
-                                              variant="ghost"
-                                              size="icon"
-                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-blue-600"
-                                              onClick={() =>
-                                                void openResource(res)
-                                              }
-                                              aria-label={t(
-                                                'lessonForm.openVideoAria',
-                                                { name: res.name }
-                                              )}
-                                            >
-                                              <ExternalLink className="size-3" />
-                                            </Button>
-                                          </IconActionTooltip>
-                                          <IconActionTooltip
-                                            label={t(
-                                              'lessonForm.downloadVideoAria',
-                                              { name: res.name }
-                                            )}
-                                            asWrapper={isDownloadingResource}
-                                          >
-                                            <Button
-                                              type="button"
-                                              variant="ghost"
-                                              size="icon"
-                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-amber-600"
-                                              disabled={isDownloadingResource}
-                                              onClick={() =>
-                                                void handleResourceDownload(res)
-                                              }
-                                              aria-label={t(
-                                                'lessonForm.downloadVideoAria',
-                                                { name: res.name }
-                                              )}
-                                            >
-                                              {isDownloadingResource ? (
-                                                <Loader2 className="size-3 animate-spin" />
-                                              ) : (
-                                                <Download className="size-3" />
-                                              )}
-                                            </Button>
-                                          </IconActionTooltip>
-                                          <IconActionTooltip
-                                            label={t(
-                                              'lessonForm.removeVideoAria',
-                                              { name: res.name }
-                                            )}
-                                          >
-                                            <Button
-                                              type="button"
-                                              variant="ghost"
-                                              size="icon"
-                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-destructive"
-                                              onClick={() =>
-                                                void removeResource(res.id)
-                                              }
-                                              aria-label={t(
-                                                'lessonForm.removeVideoAria',
-                                                { name: res.name }
-                                              )}
-                                            >
-                                              <X className="size-3" />
-                                            </Button>
-                                          </IconActionTooltip>
-                                        </>
-                                      )}
-                                    </div>
-                                  );
-                                })}
                               </div>
-                            </>
-                          )}
+                            );
+                          })()}
                         </CardContent>
                       </Card>
                     </>
@@ -4474,29 +4266,79 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                     <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={() =>
-                            updateTranscriptionSegmentsState((prev) => [
-                              ...prev,
-                              {
-                                id: segmentId(),
-                                start: '00:00',
-                                end: '00:15',
-                                text: '',
-                              },
-                            ])
-                          }
-                        >
-                          <Plus className="size-3 mr-1" />
-                          {t('lessonForm.newTranscriptionSegment')}
-                        </Button>
+                        <div className="flex items-center gap-1.5">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-6 text-xs px-2"
+                            disabled={isStartingTranscription}
+                            onClick={() =>
+                              startTranscription({
+                                onSuccess: () => {
+                                  toast.success('Transcrição iniciada!');
+                                  queryClient.invalidateQueries({
+                                    queryKey: [
+                                      'lesson-transcription-segments',
+                                      lesson?.id,
+                                    ],
+                                  });
+                                },
+                                onError: (err) => {
+                                  toast.error(
+                                    err.message ||
+                                      'Erro ao iniciar a transcrição.'
+                                  );
+                                },
+                              })
+                            }
+                          >
+                            {isStartingTranscription ? (
+                              <Loader2 className="size-3 mr-1 animate-spin" />
+                            ) : (
+                              <Mic className="size-3 mr-1" />
+                            )}
+                            Iniciar transcrição
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-6 text-xs px-2"
+                            onClick={() =>
+                              updateTranscriptionSegmentsState((prev) => [
+                                ...prev,
+                                {
+                                  id: segmentId(),
+                                  start: '00:00',
+                                  end: '00:15',
+                                  text: '',
+                                },
+                              ])
+                            }
+                          >
+                            <Plus className="size-3 mr-1" />
+                            {t('lessonForm.newTranscriptionSegment')}
+                          </Button>
+                        </div>
                       </CardTitle>
                     </CardHeader>
                     <CardContent className="px-3 pb-2 flex flex-col gap-2">
+                      {isLoadingTranscription
+                        ? Array.from({ length: 3 }).map((_, i) => (
+                            <div
+                              key={i}
+                              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">
+                                <Skeleton className="h-8 w-full" />
+                                <Skeleton className="h-8 w-full" />
+                                <Skeleton className="h-8 w-full" />
+                                <Skeleton className="h-8 w-8 rounded-md" />
+                              </div>
+                            </div>
+                          ))
+                        : null}
                       {transcriptionSegments.map((segment, index) => (
                         <div
                           key={segment.id}
@@ -4733,18 +4575,60 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                   </p>
                 )}
 
+                {/* 🆕 Filtro de tipo de recurso */}
+                {supplementaryResources.length > 0 && (
+                  <div className="flex items-center gap-2 px-1">
+                    <label
+                      htmlFor="resource-type-filter"
+                      className="text-xs font-medium"
+                    >
+                      {t('lessonForm.filterBy')}:
+                    </label>
+                    <Select
+                      value={resourceTypeFilter}
+                      onValueChange={setResourceTypeFilter}
+                    >
+                      <SelectTrigger
+                        id="resource-type-filter"
+                        className="h-8 w-56 text-xs"
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">
+                          {t('common.all')} ({supplementaryResources.length})
+                        </SelectItem>
+                        {resourceTypeFilterOptions.map(
+                          ({ type, count, label }) => (
+                            <SelectItem key={type} value={type}>
+                              {label} ({count})
+                            </SelectItem>
+                          )
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+
                 {/* Resource list */}
-                {supplementaryResources.length === 0 ? (
+                {filteredSupplementaryResources.length === 0 ? (
                   <p className="text-center text-xs text-muted-foreground py-1">
                     {t('questionEditor.noLinkedResources')}
                   </p>
                 ) : (
                   <div className="flex flex-col gap-1">
-                    {supplementaryResources.map((res) => {
+                    {filteredSupplementaryResources.map((res) => {
                       const metadata = resolveResourceMetadata(res);
                       const isDownloadingResource = downloadingResourceKeys.has(
                         String(res.fileId ?? res.id)
                       );
+                      const resourceTypeOptions =
+                        !res.type ||
+                        GENERIC_RESOURCE_TYPES.includes(
+                          res.type as GenericResourceType
+                        )
+                          ? GENERIC_RESOURCE_TYPES
+                          : [...GENERIC_RESOURCE_TYPES, res.type];
 
                       return (
                         <div
@@ -4767,26 +4651,69 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                             </div>
                           </div>
 
-                          <div className="flex items-center gap-1.5 pr-1">
-                            <Switch
-                              checked={Boolean(res.public)}
-                              onCheckedChange={(checked) => {
-                                setLocalResources((prev) =>
-                                  prev.map((item) =>
-                                    item.id === res.id
-                                      ? { ...item, public: checked }
-                                      : item
-                                  )
-                                );
-                                setResourcesDirty(true);
-                              }}
-                              aria-label={t('lessonForm.public')}
-                            />
-                            <span className="text-[0.65rem] text-muted-foreground whitespace-nowrap">
-                              {res.public
-                                ? t('lessonForm.public')
-                                : t('lessonForm.private')}
-                            </span>
+                          <div className="flex shrink-0 items-center gap-1.5 pr-1">
+                            <div className="flex items-center gap-1">
+                              <label
+                                htmlFor={`type-${res.id}`}
+                                className="sr-only"
+                              >
+                                {t('lessonForm.resourceType')}
+                              </label>
+                              <Select
+                                value={res.type || undefined}
+                                disabled={isUpdatingResourceType === res.id}
+                                onValueChange={(value) =>
+                                  handleUpdateResourceType(res.id, value)
+                                }
+                              >
+                                <SelectTrigger
+                                  id={`type-${res.id}`}
+                                  className="h-4 w-32 px-1.5 py-0 text-[0.56rem] leading-none [&>svg]:size-2.5"
+                                >
+                                  <SelectValue
+                                    placeholder={t(
+                                      'lessonForm.typePlaceholder'
+                                    )}
+                                  />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {resourceTypeOptions.map((type) => (
+                                    <SelectItem
+                                      key={type}
+                                      value={type}
+                                      className="text-xs"
+                                    >
+                                      {getResourceTypeLabel(t, type)}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              {isUpdatingResourceType === res.id && (
+                                <Loader2 className="size-2.5 animate-spin text-muted-foreground" />
+                              )}
+                            </div>
+
+                            <div className="flex items-center gap-1">
+                              <Switch
+                                checked={Boolean(res.public)}
+                                onCheckedChange={(checked) => {
+                                  setLocalResources((prev) =>
+                                    prev.map((item) =>
+                                      item.id === res.id
+                                        ? { ...item, public: checked }
+                                        : item
+                                    )
+                                  );
+                                  setResourcesDirty(true);
+                                }}
+                                aria-label={t('lessonForm.public')}
+                              />
+                              <span className="text-[0.65rem] text-muted-foreground whitespace-nowrap">
+                                {res.public
+                                  ? t('lessonForm.public')
+                                  : t('lessonForm.private')}
+                              </span>
+                            </div>
                           </div>
 
                           <IconActionTooltip
@@ -4857,6 +4784,18 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
               </div>
             </ScrollArea>
           </TabsContent>
+
+          {/* ── Tab XP ───────────────────────────────────────────────────── */}
+          <TabsContent
+            value="xp"
+            className="flex-1 min-h-0 mt-0 overflow-y-auto p-2 sm:p-3"
+          >
+            <LessonXpTab
+              lessonId={lessonId}
+              activeTab={activeTab}
+              hasTranscription={transcriptionSegments.length > 0}
+            />
+          </TabsContent>
         </Tabs>
 
         <Dialog
@@ -4870,11 +4809,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
               <DialogTitle className="text-base">
                 {videoPreviewResource?.name ?? t('lessonForm.tabVideos')}
               </DialogTitle>
-              <DialogDescription>
-                {videoPreviewResource
-                  ? t('lessonForm.fileStorageVideosByResolution')
-                  : t('lessonForm.tabVideos')}
-              </DialogDescription>
+              <DialogDescription>{t('lessonForm.tabVideos')}</DialogDescription>
             </DialogHeader>
             <div className="px-5 pb-5">
               {videoPreviewError ? (
@@ -4893,7 +4828,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
               ) : (
                 <div className="flex min-h-72 items-center justify-center rounded-lg border border-dashed bg-muted/30 px-6 text-center text-sm text-muted-foreground">
                   {isResolvingVideoPreview
-                    ? t('lessonForm.loadingVideoProfiles')
+                    ? t('lessonForm.videoJobLoading')
                     : t('questionEditor.resourceOpenError')}
                 </div>
               )}