@hed-hog/lms 0.0.361 → 0.0.364

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

@@ -6,12 +6,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   AlertTriangle,
   BookOpen,
+  Briefcase,
   CheckCircle2,
   CircleDot,
   Clock,
   Download,
   Layers,
   Loader2,
+  Mic,
   Pencil,
   Plus,
   Save,
@@ -19,6 +21,7 @@ import {
   UploadCloud,
   Video,
   X,
+  Zap,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
@@ -31,17 +34,27 @@ import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/t
 import { FfmpegParamsEditor } from '@/components/ffmpeg-params-editor';
 import { FileTypeIcon } from '@/components/file-type-icon';
 import { RichTextEditor } from '@/components/rich-text-editor';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
@@ -74,6 +87,7 @@ import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
+import { CourseDeleteDialog } from '../../../_components/CourseDeleteDialog';
 import type {
   CourseEditFormValues,
   PickerOption,
@@ -83,7 +97,6 @@ import { CourseClassificationCard } from '../../_components/CourseClassification
 import { CourseContentCard } from '../../_components/CourseContentCard';
 import { CourseDangerZoneCard } from '../../_components/CourseDangerZoneCard';
 import { CourseFlagsCard } from '../../_components/CourseFlagsCard';
-import { CourseInstructorsSummaryCard } from './CourseInstructorsSummaryCard';
 import { CourseMediaCard } from '../../_components/CourseMediaCard';
 import { CourseRelationsCard } from '../../_components/CourseRelationsCard';
 import {
@@ -94,8 +107,12 @@ import {
 } from '../_data/services/course-structure.service';
 import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
 import { courseStructureQueryKey } from '../_data/use-course-structure-query';
-import { IconActionTooltip } from './icon-action-tooltip';
+import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
 import { CourseOperationsTab } from './course-operations-tab';
+import { CourseOverviewTab } from './course-overview-tab';
+import { CourseXpOverviewTab } from './course-xp-overview-tab';
+import { CourseInstructorsSummaryCard } from './CourseInstructorsSummaryCard';
+import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 import { Resource } from './types';
 
@@ -129,6 +146,8 @@ type ApiCourseDetail = {
   instructors?: Array<{ id: number; name: string; avatarId: number | null }>;
   logoFileId?: number | null;
   logoFilename?: string | null;
+  logoFileSize?: number | null;
+  logoMimeType?: string | null;
   logoImageType?: {
     suggestedWidth: number | null;
     suggestedHeight: number | null;
@@ -137,6 +156,8 @@ type ApiCourseDetail = {
   } | null;
   bannerFileId?: number | null;
   bannerFilename?: string | null;
+  bannerFileSize?: number | null;
+  bannerMimeType?: string | null;
   bannerImageType?: {
     suggestedWidth: number | null;
     suggestedHeight: number | null;
@@ -147,6 +168,26 @@ type ApiCourseDetail = {
   operationsProjectId?: number | null;
   operationsProjectCode?: string | null;
   operationsProjectName?: string | null;
+  deletionImpact?: ApiCourseDeletionImpact;
+};
+
+type ApiCourseDeletionImpact = {
+  fileCount: number;
+  totalBytes: number;
+  formattedSize: string;
+  countsBySource?: Record<string, number>;
+  enrollmentCount?: number;
+};
+
+type ApiQueuedDeleteResponse = {
+  success: boolean;
+  status: 'queued';
+  queueJobId: number;
+  notificationId: number;
+  deletionImpact?: Pick<
+    ApiCourseDeletionImpact,
+    'fileCount' | 'totalBytes' | 'formattedSize'
+  >;
 };
 
 type VideoProfileOption = {
@@ -316,6 +357,24 @@ function formatFileSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
+function formatBytes(bytes: number) {
+  if (!Number.isFinite(bytes) || bytes <= 0) {
+    return '0 B';
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let value = bytes;
+  let unitIndex = 0;
+
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex += 1;
+  }
+
+  const digits = unitIndex === 0 ? 0 : value >= 10 ? 1 : 2;
+  return `${value.toFixed(digits)} ${units[unitIndex]}`;
+}
+
 function mapApiCourseResourceToLocal(
   item: CourseResourceApi
 ): CourseResourceItem {
@@ -378,6 +437,65 @@ function buildSchema(t: (key: string) => string) {
   });
 }
 
+// ── Skeleton ──────────────────────────────────────────────────────────────────
+
+function EditorCourseSkeleton() {
+  return (
+    <div 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">
+        <Skeleton className="size-9 rounded-lg shrink-0" />
+        <div className="flex-1 min-w-0 flex flex-col gap-1">
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-3 w-32" />
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Skeleton className="h-5 w-12 rounded-full" />
+          <Skeleton className="h-5 w-12 rounded-full" />
+          <Skeleton className="h-5 w-14 rounded-full" />
+          <Skeleton className="h-5 w-16 rounded-full" />
+        </div>
+      </div>
+      {/* Tabs bar */}
+      <div className="flex items-center gap-1 px-3 py-1 border-b bg-muted/50 shrink-0 overflow-hidden">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-7 w-16 rounded-md shrink-0" />
+        ))}
+      </div>
+      {/* Tab content — estrutura */}
+      <div className="flex-1 min-h-0 overflow-y-auto p-3 flex flex-col gap-3">
+        <div className="rounded-lg border bg-muted/20 p-3 flex flex-col gap-3">
+          <Skeleton className="h-3 w-28" />
+          {[80, 56, 96].map((w, i) => (
+            <div key={i} className="flex flex-col gap-1">
+              <Skeleton className="h-3 w-20" />
+              <Skeleton className={`h-8 w-full max-w-[${w}%]`} />
+            </div>
+          ))}
+        </div>
+        <div className="rounded-lg border bg-muted/20 p-3 flex flex-col gap-3">
+          <Skeleton className="h-3 w-24" />
+          <div className="flex flex-col gap-1">
+            <Skeleton className="h-3 w-16" />
+            <Skeleton className="h-20 w-full" />
+          </div>
+        </div>
+        <div className="rounded-lg border bg-muted/20 p-3 flex flex-col gap-3">
+          <Skeleton className="h-3 w-20" />
+          <div className="grid grid-cols-2 gap-2">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="flex flex-col gap-1">
+                <Skeleton className="h-3 w-14" />
+                <Skeleton className="h-8 w-full" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 // ── Component ─────────────────────────────────────────────────────────────────
 
 export function EditorCourse() {
@@ -389,6 +507,7 @@ export function EditorCourse() {
 
   const { request, currentLocaleCode, locales } = useApp();
   const t = useTranslations('lms.CursoEditPage');
+  const courseListT = useTranslations('lms.CoursesPage');
   const courseLocaleLabel = currentLocaleCode?.startsWith('en')
     ? 'Course Language'
     : 'Idioma do Curso';
@@ -396,9 +515,12 @@ export function EditorCourse() {
   const isMobile = useIsMobile();
   const queryClient = useQueryClient();
   const createSessionMutation = useCreateSessionMutation();
+  const lmsSettings = useLmsSettingsQuery();
 
   // ── UI state ────────────────────────────────────────────────────────────────
-  const [activeTab, setActiveTab] = useState('estrutura');
+  const [activeTab, setActiveTab] = useState('visao-geral');
+  const [pendingBulkJob, setPendingBulkJob] = useState<'transcription' | 'xp_recalculation' | null>(null);
+  const [isBulkJobPending, setIsBulkJobPending] = useState(false);
   const [categoryEditSheetOpen, setCategoryEditSheetOpen] = useState(false);
   const [editingCategoryId, setEditingCategoryId] = useState<number | null>(
     null
@@ -417,7 +539,15 @@ export function EditorCourse() {
   >('active');
   const [savingCategoryEdit, setSavingCategoryEdit] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [deleting, setDeleting] = useState(false);
+  const [confirmationInput, setConfirmationInput] = useState('');
+  const [archivingCourse, setArchivingCourse] = useState(false);
+  const [queuingDelete, setQueuingDelete] = useState(false);
+  const [loadingDeleteImpact, setLoadingDeleteImpact] = useState(false);
+  const [deleteImpact, setDeleteImpact] =
+    useState<ApiCourseDeletionImpact | null>(null);
+  const [deleteCourseStatus, setDeleteCourseStatus] = useState<
+    CourseEditFormValues['status'] | null
+  >(null);
   const [logoPreview, setLogoPreview] = useState<string | null>(null);
   const [bannerPreview, setBannerPreview] = useState<string | null>(null);
   const [uploadingLogo, setUploadingLogo] = useState(false);
@@ -453,19 +583,21 @@ export function EditorCourse() {
   const [savingVideoProfileEdit, setSavingVideoProfileEdit] = useState(false);
 
   // ── Queries ─────────────────────────────────────────────────────────────────
-  const { data: apiCourse, refetch: refetchCourse } = useQuery<ApiCourseDetail>(
-    {
-      queryKey: ['lms-course-detail', courseId],
-      enabled: Boolean(courseId),
-      queryFn: async () => {
-        const response = await request<ApiCourseDetail>({
-          url: `/lms/courses/${courseId}`,
-          method: 'GET',
-        });
-        return response.data;
-      },
-    }
-  );
+  const {
+    data: apiCourse,
+    refetch: refetchCourse,
+    isLoading: isLoadingCourse,
+  } = useQuery<ApiCourseDetail>({
+    queryKey: ['lms-course-detail', courseId],
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      const response = await request<ApiCourseDetail>({
+        url: `/lms/courses/${courseId}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
 
   const { data: categoryListData, refetch: refetchCategoryOptions } =
     useQuery<ApiCategoryList>({
@@ -571,6 +703,12 @@ export function EditorCourse() {
 
   const showOperationsTab = operationsConfig?.isAvailable === true;
 
+  useEffect(() => {
+    if (apiCourse?.status) {
+      setDeleteCourseStatus(toPtStatus(apiCourse.status));
+    }
+  }, [apiCourse?.status]);
+
   // ── Save mutation ───────────────────────────────────────────────────────────
   const { mutate: saveCourse, isPending: saving } = useMutation({
     mutationFn: async (data: CourseEditFormValues) => {
@@ -913,7 +1051,7 @@ export function EditorCourse() {
 
   useEffect(() => {
     if (!showVideoTab && activeTab === 'videos') {
-      setActiveTab('estrutura');
+      setActiveTab('detalhes');
     }
   }, [showVideoTab, activeTab]);
 
@@ -1380,15 +1518,132 @@ export function EditorCourse() {
     }
   }
 
+  const deleteCourseTitle = apiCourse?.title?.trim() || course.title.trim();
+  const deleteConfirmMatches = confirmationInput === deleteCourseTitle;
+  const deleteRequiresArchive = deleteCourseStatus !== 'arquivado';
+  const canDeleteCourse =
+    Boolean(courseId) &&
+    !deleteRequiresArchive &&
+    deleteConfirmMatches &&
+    !loadingDeleteImpact &&
+    !queuingDelete &&
+    !archivingCourse &&
+    Boolean(deleteImpact);
+
+  async function loadDeleteImpact() {
+    if (!courseId) return;
+
+    setLoadingDeleteImpact(true);
+    setDeleteImpact(null);
+
+    try {
+      const response = await request<ApiCourseDetail>({
+        url: `/lms/courses/${courseId}`,
+        method: 'GET',
+      });
+
+      const impact = response.data.deletionImpact;
+
+      setDeleteCourseStatus(toPtStatus(response.data.status));
+      setDeleteImpact(
+        impact
+          ? {
+              ...impact,
+              formattedSize:
+                impact.formattedSize || formatBytes(impact.totalBytes ?? 0),
+            }
+          : null
+      );
+    } catch {
+      toast.error(courseListT('toasts.courseDeleteImpactLoadError'));
+    } finally {
+      setLoadingDeleteImpact(false);
+    }
+  }
+
+  function openDeleteDialog() {
+    setConfirmationInput('');
+    setDeleteImpact(null);
+    setDeleteDialogOpen(true);
+    void loadDeleteImpact();
+  }
+
+  async function archiveCourseForDelete() {
+    if (!courseId || deleteCourseStatus === 'arquivado') return;
+
+    setArchivingCourse(true);
+    try {
+      await request({
+        url: `/lms/courses/${courseId}`,
+        method: 'PATCH',
+        data: { status: 'archived' },
+      });
+
+      setDeleteCourseStatus('arquivado');
+      form.setValue('status', 'arquivado', {
+        shouldDirty: false,
+        shouldTouch: false,
+        shouldValidate: false,
+      });
+      toast.success(
+        courseListT('toasts.courseArchived', { title: deleteCourseTitle })
+      );
+      await refetchCourse();
+      await loadDeleteImpact();
+    } catch {
+      toast.error(courseListT('toasts.courseArchiveError'));
+    } finally {
+      setArchivingCourse(false);
+    }
+  }
+
   async function handleDelete() {
-    setDeleting(true);
+    if (!courseId) return;
+    if (confirmationInput !== deleteCourseTitle) {
+      toast.error(
+        courseListT('form.validationErrors.confirmationMismatch') ||
+          'Nome do curso não corresponde.'
+      );
+      return;
+    }
+
+    if (deleteCourseStatus !== 'arquivado') {
+      toast.error(courseListT('toasts.deleteOnlyArchived'));
+      return;
+    }
+
+    if (!deleteImpact) {
+      toast.error(courseListT('toasts.courseDeleteImpactLoadError'));
+      return;
+    }
+
+    setQueuingDelete(true);
     try {
-      await request({ url: `/lms/courses/${courseId}`, method: 'DELETE' });
+      const response = await request<ApiQueuedDeleteResponse>({
+        url: `/lms/courses/${courseId}`,
+        method: 'DELETE',
+      });
+
       setDeleteDialogOpen(false);
-      toast.success(t('toasts.courseDeleted'));
+      toast.success(
+        courseListT('toasts.courseDeleteQueued', {
+          title: deleteCourseTitle,
+          files:
+            response.data?.deletionImpact?.fileCount ?? deleteImpact.fileCount,
+        })
+      );
       router.push('/lms/courses');
+    } catch (error) {
+      const message =
+        error instanceof Error && error.message ? error.message : '';
+
+      if (message.includes('ONLY_ARCHIVED_COURSE_CAN_BE_DELETED')) {
+        toast.error(courseListT('toasts.deleteOnlyArchived'));
+      } else {
+        toast.error(courseListT('toasts.courseDeleteQueueError'));
+      }
     } finally {
-      setDeleting(false);
+      setQueuingDelete(false);
     }
   }
 
@@ -1431,7 +1686,29 @@ export function EditorCourse() {
     toast.error(first?.message ?? 'Verifique os campos obrigatórios');
   }
 
+  // ── Bulk jobs ─────────────────────────────────────────────────────────────────
+  const handleBulkJob = async (jobType: 'transcription' | 'xp_recalculation') => {
+    setIsBulkJobPending(true);
+    try {
+      const res = await request<{ queued: number; skipped: number }>({
+        url: `/lms/courses/${courseId}/structure/bulk-jobs`,
+        method: 'POST',
+        data: { jobType },
+      });
+      toast.success(`${res.data?.queued ?? 0} job(s) enfileirado(s), ${res.data?.skipped ?? 0} ignorado(s).`);
+    } catch {
+      toast.error('Erro ao enfileirar jobs em massa.');
+    } finally {
+      setIsBulkJobPending(false);
+      setPendingBulkJob(null);
+    }
+  };
+
   // ── Render ────────────────────────────────────────────────────────────────────
+  if (isLoadingCourse && !apiCourse) {
+    return <EditorCourseSkeleton />;
+  }
+
   return (
     <Form {...form}>
       <form
@@ -1553,6 +1830,73 @@ export function EditorCourse() {
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
+
+            {/* ── Bulk jobs menu ────────────────────────────────────────── */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-6 shrink-0"
+                  disabled={isBulkJobPending}
+                >
+                  {isBulkJobPending ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : (
+                    <Briefcase className="size-3.5" />
+                  )}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuLabel className="text-xs">Jobs em massa</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {lmsSettings.transcriptionEnabled && (
+                  <DropdownMenuItem
+                    onSelect={() => setPendingBulkJob('transcription')}
+                    className="gap-2"
+                  >
+                    <Mic className="size-4 text-muted-foreground" />
+                    Refazer transcrição de todas as aulas
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem
+                  onSelect={() => setPendingBulkJob('xp_recalculation')}
+                  className="gap-2"
+                >
+                  <Zap className="size-4 text-muted-foreground" />
+                  Recalcular XP de todas as aulas
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <AlertDialog
+              open={pendingBulkJob !== null}
+              onOpenChange={(open) => { if (!open) setPendingBulkJob(null); }}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {pendingBulkJob === 'transcription'
+                      ? 'Refazer transcrição de todas as aulas?'
+                      : 'Recalcular XP de todas as aulas?'}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {pendingBulkJob === 'transcription'
+                      ? `Um job de transcrição será enfileirado para cada aula que possuir arquivo de áudio (${lessons.length} aulas no total). Aulas sem áudio serão ignoradas.`
+                      : `Um job de recálculo de XP será enfileirado para cada aula que possuir transcrição (${lessons.length} aulas no total). Aulas sem transcrição serão ignoradas.`}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                  <AlertDialogAction
+                    onClick={() => pendingBulkJob && handleBulkJob(pendingBulkJob)}
+                  >
+                    Confirmar
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
           </div>
         </div>
 
@@ -1573,14 +1917,15 @@ export function EditorCourse() {
           >
             {(
               [
-                'estrutura',
-                'sobre',
+                'visao-geral',
+                'detalhes',
+                'xp',
                 'midia',
                 'recursos',
-                'extra',
                 ...(showVideoTab ? ['videos'] : []),
                 ...(showOperationsTab ? ['operacoes'] : []),
                 'publicacao',
+                'extra',
               ] as const
             ).map((tab) => (
               <TabsTrigger
@@ -1593,30 +1938,40 @@ export function EditorCourse() {
                     : 'h-8 px-3 text-xs'
                 )}
               >
-                {tab === 'estrutura'
-                  ? t('structureEditor.tabs.structure')
-                  : tab === 'sobre'
-                    ? t('structureEditor.tabs.about')
-                    : tab === 'midia'
-                      ? t('structureEditor.tabs.media')
-                      : tab === 'recursos'
-                        ? t('structureEditor.tabs.resources')
-                        : tab === 'extra'
-                          ? t('structureEditor.tabs.extra')
-                          : tab === 'videos'
-                            ? t('structureEditor.tabs.videoProfiles')
-                            : tab === 'operacoes'
-                              ? 'Operações'
-                              : t('structureEditor.tabs.publish')}
+                {tab === 'visao-geral'
+                  ? t('structureEditor.tabs.overview')
+                  : tab === 'detalhes'
+                    ? t('structureEditor.tabs.details')
+                    : tab === 'xp'
+                      ? t('structureEditor.tabs.xp')
+                      : tab === 'midia'
+                        ? t('structureEditor.tabs.media')
+                        : tab === 'recursos'
+                          ? t('structureEditor.tabs.resources')
+                          : tab === 'extra'
+                            ? t('structureEditor.tabs.extra')
+                            : tab === 'videos'
+                              ? t('structureEditor.tabs.videoProfiles')
+                              : tab === 'operacoes'
+                                ? 'Operações'
+                                : t('structureEditor.tabs.publish')}
               </TabsTrigger>
             ))}
           </TabsList>
 
           <div className="flex-1 min-h-0 min-w-0 overflow-x-hidden overflow-y-auto overscroll-contain">
             <div className="flex min-w-0 flex-col gap-3 p-2 sm:p-3">
-              {/* ── Tab: Estrutura ──────────────────────────────────────── */}
+              {/* ── Tab: Visão Geral ─────────────────────────────────────── */}
+              <TabsContent value="visao-geral" className="mt-0 min-w-0">
+                <CourseOverviewTab
+                  courseId={courseId}
+                  locale={currentLocaleCode || 'pt-BR'}
+                />
+              </TabsContent>
+
+              {/* ── Tab: Detalhes ───────────────────────────────────────── */}
               <TabsContent
-                value="estrutura"
+                value="detalhes"
                 className="mt-0 flex min-w-0 flex-col gap-3"
               >
                 {/* Dados principais */}
@@ -1828,13 +2183,6 @@ export function EditorCourse() {
                     />
                   </CardContent>
                 </Card>
-              </TabsContent>
-
-              {/* ── Tab: Sobre ──────────────────────────────────────────── */}
-              <TabsContent
-                value="sobre"
-                className="mt-0 flex min-w-0 flex-col gap-3"
-              >
                 <CourseClassificationCard
                   form={form}
                   t={t}
@@ -1859,6 +2207,13 @@ export function EditorCourse() {
                 <CourseContentCard form={form} compact />
               </TabsContent>
 
+              <TabsContent value="xp" className="mt-0 min-w-0">
+                <CourseXpOverviewTab
+                  courseId={courseId}
+                  locale={currentLocaleCode || 'pt-BR'}
+                />
+              </TabsContent>
+
               {/* ── Tab: Mídia ──────────────────────────────────────────── */}
               <TabsContent value="midia" className="mt-0 min-w-0">
                 <CourseMediaCard
@@ -1879,6 +2234,8 @@ export function EditorCourse() {
                           name:
                             apiCourse.logoFilename ||
                             `#${apiCourse.logoFileId}`,
+                          size: apiCourse.logoFileSize ?? null,
+                          mimeType: apiCourse.logoMimeType ?? null,
                         }
                       : undefined
                   }
@@ -1889,6 +2246,8 @@ export function EditorCourse() {
                           name:
                             apiCourse.bannerFilename ||
                             `#${apiCourse.bannerFileId}`,
+                          size: apiCourse.bannerFileSize ?? null,
+                          mimeType: apiCourse.bannerMimeType ?? null,
                         }
                       : undefined
                   }
@@ -2121,7 +2480,7 @@ export function EditorCourse() {
                 <CourseFlagsCard form={form} t={t} compact />
                 <CourseDangerZoneCard
                   t={t}
-                  onDelete={() => setDeleteDialogOpen(true)}
+                  onDelete={openDeleteDialog}
                   compact
                 />
               </TabsContent>
@@ -2556,53 +2915,32 @@ export function EditorCourse() {
         </ResizableSheetContent>
       </Sheet>
 
-      {/* ── Delete dialog ────────────────────────────────────────────────── */}
-      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="size-5 text-destructive" />
-              {t('deleteDialog.title')}
-            </DialogTitle>
-            <DialogDescription asChild>
-              <div className="flex flex-col gap-3">
-                <p>
-                  {t('deleteDialog.description')}{' '}
-                  <strong className="text-foreground">{course.title}</strong>?
-                </p>
-                {(apiCourse?.enrollmentCount ?? 0) > 0 ? (
-                  <div className="flex items-center gap-2 rounded-md bg-amber-50 px-3 py-2.5 text-xs font-medium text-amber-700">
-                    <AlertTriangle className="size-3.5 shrink-0" />
-                    <span>
-                      {t('deleteDialog.warning', {
-                        students: apiCourse?.enrollmentCount ?? 0,
-                        certificates: apiCourse?.certificatesIssued ?? 0,
-                      })}
-                    </span>
-                  </div>
-                ) : null}
-              </div>
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="gap-2">
-            <Button
-              variant="outline"
-              onClick={() => setDeleteDialogOpen(false)}
-            >
-              {t('deleteDialog.actions.cancel')}
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={handleDelete}
-              disabled={deleting}
-              className="gap-2"
-            >
-              {deleting ? <Loader2 className="size-4 animate-spin" /> : null}
-              {t('deleteDialog.actions.delete')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <CourseDeleteDialog
+        open={deleteDialogOpen}
+        onOpenChange={(open) => {
+          setDeleteDialogOpen(open);
+          if (!open) {
+            setConfirmationInput('');
+            setDeleteImpact(null);
+          }
+        }}
+        course={{
+          title: deleteCourseTitle || course.title,
+          status: deleteCourseStatus ?? 'rascunho',
+          enrollmentCount:
+            deleteImpact?.enrollmentCount ?? apiCourse?.enrollmentCount ?? 0,
+        }}
+        impact={deleteImpact}
+        loadingImpact={loadingDeleteImpact}
+        confirmationInput={confirmationInput}
+        onConfirmationInputChange={setConfirmationInput}
+        archiving={archivingCourse}
+        queuingDelete={queuingDelete}
+        canDelete={canDeleteCourse}
+        onArchive={archiveCourseForDelete}
+        onDelete={handleDelete}
+        t={courseListT}
+      />
     </Form>
   );
 }