@hed-hog/lms 0.0.314 → 0.0.315

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

@@ -1,1216 +1,1216 @@
-'use client';
-
-// ── Imports ───────────────────────────────────────────────────────────────────
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  AlertTriangle,
-  BookOpen,
-  CheckCircle2,
-  CircleDot,
-  Clock,
-  Layers,
-  Loader2,
-  Plus,
-  Save,
-  Undo2,
-  Video,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { type ChangeEvent, useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-import { CreateLmsPersonSheet } from '@/app/(app)/(libraries)/lms/_components/create-lms-person-sheet';
-import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
-import { RichTextEditor } from '@/components/rich-text-editor';
-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';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
-import type {
-  CourseEditFormValues,
-  PickerOption,
-} from '../../_components/course-edit-types';
-import { CourseCertificateCard } from '../../_components/CourseCertificateCard';
-import { CourseClassificationCard } from '../../_components/CourseClassificationCard';
-import { CourseContentCard } from '../../_components/CourseContentCard';
-import { CourseDangerZoneCard } from '../../_components/CourseDangerZoneCard';
-import { CourseFlagsCard } from '../../_components/CourseFlagsCard';
-import { CourseMediaCard } from '../../_components/CourseMediaCard';
-import { CourseRelationsCard } from '../../_components/CourseRelationsCard';
-import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
-import { courseStructureQueryKey } from '../_data/use-course-structure-query';
-import { useStructureStore } from './store';
-
-// ── API types (local to this component) ──────────────────────────────────────
-
-type ApiCourseDetail = {
-  id: number;
-  name: string;
-  slug: string;
-  title: string;
-  description: string;
-  primaryColor?: string | null;
-  secondaryColor?: string | null;
-  level: 'beginner' | 'intermediate' | 'advanced';
-  status: 'draft' | 'published' | 'archived';
-  offeringType: 'scheduled' | 'on_demand' | 'blended';
-  categories: string[];
-  isFeatured: boolean;
-  hasCertificate: boolean;
-  isListed: boolean;
-  enrollmentCount: number;
-  requirements: string;
-  objectives: string;
-  targetAudience: string;
-  lessonCount: number;
-  sessionCount: number;
-  averageCompletion: number;
-  certificatesIssued: number;
-  instructorIds?: number[];
-  instructors?: Array<{ id: number; name: string; avatarId: number | null }>;
-  logoFileId?: number | null;
-  logoFilename?: string | null;
-  logoImageType?: {
-    suggestedWidth: number | null;
-    suggestedHeight: number | null;
-    allowedExtensions: string | null;
-    aspectRatio: string | null;
-  } | null;
-  bannerFileId?: number | null;
-  bannerFilename?: string | null;
-  bannerImageType?: {
-    suggestedWidth: number | null;
-    suggestedHeight: number | null;
-    allowedExtensions: string | null;
-    aspectRatio: string | null;
-  } | null;
-  certificateModel?: string | null;
-};
-
-type ApiCategory = { id: number; slug: string; name: string };
-type ApiCategoryList = {
-  data: ApiCategory[];
-  total: number;
-  page: number;
-  pageSize: number;
-};
-type ApiInstructor = {
-  id: number;
-  personId: number;
-  name: string;
-  avatarId?: number | null;
-  qualificationSlugs: string[];
-};
-type ApiInstructorList = {
-  data: ApiInstructor[];
-  total: number;
-  page: number;
-  pageSize: number;
-};
-type ApiCertificateTemplate = {
-  id: number;
-  name: string;
-  slug?: string | null;
-  description?: string | null;
-  status?: 'draft' | 'active' | 'inactive';
-};
-type ApiCertificateTemplateList = {
-  data: ApiCertificateTemplate[];
-  total: number;
-  page: number;
-  pageSize: number;
-  lastPage?: number;
-};
-type Locale = { id?: number; code: string; name: string };
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function normalizeEnumValue(value?: string | null) {
-  return String(value ?? '')
-    .trim()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .toLowerCase();
-}
-
-function toPtLevel(
-  level: ApiCourseDetail['level']
-): CourseEditFormValues['nivel'] {
-  const n = normalizeEnumValue(level);
-  if (n === 'beginner' || n === 'iniciante') return 'iniciante';
-  if (n === 'intermediate' || n === 'intermediario') return 'intermediario';
-  return 'avancado';
-}
-
-function toApiLevel(level: CourseEditFormValues['nivel']) {
-  if (level === 'iniciante') return 'beginner';
-  if (level === 'intermediario') return 'intermediate';
-  return 'advanced';
-}
-
-function toPtStatus(
-  status: ApiCourseDetail['status']
-): CourseEditFormValues['status'] {
-  const n = normalizeEnumValue(status);
-  if (n === 'published' || n === 'active' || n === 'ativo') return 'ativo';
-  if (n === 'archived' || n === 'arquivado') return 'arquivado';
-  return 'rascunho';
-}
-
-function toApiStatus(status: CourseEditFormValues['status']) {
-  if (status === 'ativo') return 'published';
-  if (status === 'arquivado') return 'archived';
-  return 'draft';
-}
-
-function toPtOfferingType(
-  value: ApiCourseDetail['offeringType']
-): CourseEditFormValues['tipoOferta'] {
-  const n = normalizeEnumValue(value);
-  if (n === 'scheduled' || n === 'agendado') return 'agendado';
-  if (n === 'blended' || n === 'hibrido') return 'hibrido';
-  return 'sob_demanda';
-}
-
-function toApiOfferingType(value: CourseEditFormValues['tipoOferta']) {
-  if (value === 'agendado') return 'scheduled';
-  if (value === 'hibrido') return 'blended';
-  return 'on_demand';
-}
-
-function getContrastColor(hex: string) {
-  const cleaned = hex.replace('#', '');
-  if (cleaned.length !== 6) return '#FFFFFF';
-  const r = parseInt(cleaned.slice(0, 2), 16);
-  const g = parseInt(cleaned.slice(2, 4), 16);
-  const b = parseInt(cleaned.slice(4, 6), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.6 ? '#111827' : '#FFFFFF';
-}
-
-function slugify(value: string) {
-  return value
-    .trim()
-    .toLowerCase()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-}
-
-function getInstructorAvatarUrl(avatarId?: number | null) {
-  return typeof avatarId === 'number' && avatarId > 0
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : null;
-}
-
-// ── Schema ────────────────────────────────────────────────────────────────────
-
-function buildSchema(t: (key: string) => string) {
-  return z.object({
-    slug: z
-      .string()
-      .trim()
-      .min(2, t('validation.codeMin'))
-      .max(32, t('validation.codeMax'))
-      .regex(
-        /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
-        'Código: apenas letras minúsculas, números e hífens'
-      ),
-    nomeInterno: z.string().trim().min(3, t('validation.internalNameMin')),
-    tituloComercial: z.string().trim().min(3, t('validation.titleMin')),
-    descricaoPublica: z.string().trim(),
-    objetivos: z.string().optional(),
-    publicoAlvo: z.string().optional(),
-    nivel: z.enum(['iniciante', 'intermediario', 'avancado']),
-    status: z.enum(['ativo', 'rascunho', 'arquivado']),
-    tipoOferta: z.enum(['agendado', 'sob_demanda', 'hibrido']),
-    categorias: z.array(z.string()).optional().default([]),
-    primaryColor: z
-      .string()
-      .regex(/^#([0-9A-Fa-f]{6})$/, t('validation.colorInvalid')),
-    secondaryColor: z
-      .string()
-      .regex(/^#([0-9A-Fa-f]{6})$/, t('validation.colorInvalid')),
-    instrutores: z.array(z.string()).optional(),
-    preRequisitos: z.string().optional(),
-    modeloCertificado: z.string().optional(),
-    certificado: z.boolean().default(false),
-    destaque: z.boolean().default(false),
-    listado: z.boolean().default(false),
-  });
-}
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-export function EditorCourse() {
-  const courseId = useStructureStore((s) => s.courseId);
-  const course = useStructureStore((s) => s.course);
-  const sessions = useStructureStore((s) => s.sessions);
-  const lessons = useStructureStore((s) => s.lessons);
-  const updateCourseInStore = useStructureStore((s) => s.updateCourse);
-
-  const { request, currentLocaleCode, locales } = useApp();
-  const t = useTranslations('lms.CursoEditPage');
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const createSessionMutation = useCreateSessionMutation();
-
-  // ── UI state ────────────────────────────────────────────────────────────────
-  const [activeTab, setActiveTab] = useState('estrutura');
-  const [instructorSheetOpen, setInstructorSheetOpen] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [deleting, setDeleting] = useState(false);
-  const [logoPreview, setLogoPreview] = useState<string | null>(null);
-  const [bannerPreview, setBannerPreview] = useState<string | null>(null);
-  const [uploadingLogo, setUploadingLogo] = useState(false);
-  const [uploadingBanner, setUploadingBanner] = useState(false);
-  const [createdCategoryOptions, setCreatedCategoryOptions] = useState<
-    PickerOption[]
-  >([]);
-  const [createdTemplateOptions, setCreatedTemplateOptions] = useState<
-    PickerOption[]
-  >([]);
-  const [persistedCertificateModel, setPersistedCertificateModel] =
-    useState('');
-
-  // ── 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: categoryListData, refetch: refetchCategoryOptions } =
-    useQuery<ApiCategoryList>({
-      queryKey: ['lms-edit-course-categories'],
-      queryFn: async () => {
-        const response = await request<ApiCategoryList | ApiCategory[]>({
-          url: '/category',
-          method: 'GET',
-          params: { page: 1, pageSize: 500, status: 'all' },
-        });
-        const payload = response.data;
-        if (Array.isArray(payload))
-          return {
-            data: payload,
-            total: payload.length,
-            page: 1,
-            pageSize: payload.length,
-          };
-        return payload;
-      },
-      initialData: { data: [], total: 0, page: 1, pageSize: 500 },
-    });
-
-  const { data: instructorListData, refetch: refetchInstructorOptions } =
-    useQuery<ApiInstructorList>({
-      queryKey: ['lms-course-edit-instructors'],
-      queryFn: async () => {
-        const response = await request<ApiInstructorList | ApiInstructor[]>({
-          url: '/lms/instructors',
-          method: 'GET',
-          params: {
-            page: 1,
-            pageSize: 500,
-            qualificationSlugs: ['course-lessons'],
-          },
-        });
-        const payload = response.data;
-        if (Array.isArray(payload))
-          return {
-            data: payload,
-            total: payload.length,
-            page: 1,
-            pageSize: payload.length,
-          };
-        return payload;
-      },
-      initialData: { data: [], total: 0, page: 1, pageSize: 500 },
-    });
-
-  const {
-    data: certificateTemplateData,
-    refetch: refetchCertificateTemplates,
-  } = useQuery<ApiCertificateTemplateList>({
-    queryKey: ['lms-course-certificate-templates'],
-    queryFn: async () => {
-      const response = await request<
-        ApiCertificateTemplateList | ApiCertificateTemplate[]
-      >({
-        url: '/lms/certificates/templates',
-        method: 'GET',
-        params: { page: 1, pageSize: 100 },
-      });
-      const payload = response.data;
-      if (Array.isArray(payload))
-        return {
-          data: payload,
-          total: payload.length,
-          page: 1,
-          pageSize: payload.length,
-          lastPage: 1,
-        };
-      return payload;
-    },
-    initialData: { data: [], total: 0, page: 1, pageSize: 100, lastPage: 1 },
-  });
-
-  // ── Save mutation ───────────────────────────────────────────────────────────
-  const { mutate: saveCourse, isPending: saving } = useMutation({
-    mutationFn: async (data: CourseEditFormValues) => {
-      await request({
-        url: `/lms/courses/${courseId}`,
-        method: 'PATCH',
-        data: {
-          name: data.nomeInterno.trim(),
-          slug: data.slug.trim().toLowerCase(),
-          title: data.tituloComercial.trim(),
-          description: data.descricaoPublica.trim(),
-          requirements: data.preRequisitos?.trim() || undefined,
-          objectives: data.objetivos?.trim() || undefined,
-          targetAudience: data.publicoAlvo?.trim() || undefined,
-          level: toApiLevel(data.nivel),
-          status: toApiStatus(data.status),
-          offeringType: toApiOfferingType(data.tipoOferta),
-          categorySlugs: data.categorias,
-          primaryColor: data.primaryColor,
-          primaryContrastColor: getContrastColor(data.primaryColor),
-          secondaryColor: data.secondaryColor,
-          secondaryContrastColor: getContrastColor(data.secondaryColor),
-          hasCertificate: data.certificado,
-          isFeatured: data.destaque,
-          isListed: data.listado,
-          certificateModel: data.modeloCertificado || undefined,
-          instructorIds: (data.instrutores ?? []).map(Number),
-        },
-      });
-      return data;
-    },
-    onSuccess: (data) => {
-      setPersistedCertificateModel(data.modeloCertificado || '');
-      updateCourseInStore({
-        title: data.tituloComercial,
-        slug: data.slug,
-        name: data.nomeInterno,
-        description: data.descricaoPublica,
-        published: data.status === 'ativo',
-      });
-      void queryClient.invalidateQueries({
-        queryKey: courseStructureQueryKey(courseId),
-      });
-      form.reset(data);
-      toast.success(t('toasts.courseUpdated'));
-    },
-    onError: () => {
-      toast.error('Erro ao salvar curso');
-    },
-  });
-
-  // ── Form ─────────────────────────────────────────────────────────────────────
-  const schema = useMemo(() => buildSchema(t), [t]);
-
-  const form = useForm<CourseEditFormValues>({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      slug: '',
-      nomeInterno: '',
-      tituloComercial: '',
-      descricaoPublica: '',
-      objetivos: '',
-      publicoAlvo: '',
-      nivel: 'iniciante',
-      status: 'rascunho',
-      tipoOferta: 'sob_demanda',
-      categorias: [],
-      primaryColor: '#1D4ED8',
-      secondaryColor: '#111827',
-      instrutores: [],
-      preRequisitos: '',
-      modeloCertificado: '',
-      certificado: false,
-      destaque: false,
-      listado: false,
-    },
-  });
-
-  const { isDirty } = form.formState;
-
-  const NIVEIS = useMemo(
-    () => [
-      { value: 'iniciante', label: t('levels.beginner') },
-      { value: 'intermediario', label: t('levels.intermediate') },
-      { value: 'avancado', label: t('levels.advanced') },
-    ],
-    [t]
-  );
-  const STATUS_OPTIONS = useMemo(
-    () => [
-      { value: 'ativo', label: t('status.active') },
-      { value: 'rascunho', label: t('status.draft') },
-      { value: 'arquivado', label: t('status.archived') },
-    ],
-    [t]
-  );
-  const OFFERING_TYPE_OPTIONS = useMemo(
-    () =>
-      [
-        {
-          value: 'sob_demanda',
-          label: t('offeringType.options.onDemand.label'),
-          description: t('offeringType.options.onDemand.description'),
-        },
-        {
-          value: 'agendado',
-          label: t('offeringType.options.scheduled.label'),
-          description: t('offeringType.options.scheduled.description'),
-        },
-        {
-          value: 'hibrido',
-          label: t('offeringType.options.blended.label'),
-          description: t('offeringType.options.blended.description'),
-        },
-      ] as const,
-    [t]
-  );
-
-  // ── Derived options ──────────────────────────────────────────────────────────
-  const categoryOptions = useMemo(() => {
-    const serverOptions = (categoryListData?.data ?? [])
-      .filter((item) => !!item.slug)
-      .map((item) => ({ value: item.slug, label: item.name || item.slug }));
-    return [...serverOptions, ...createdCategoryOptions].filter(
-      (item, i, arr) => arr.findIndex((c) => c.value === item.value) === i
-    );
-  }, [categoryListData, createdCategoryOptions]);
-
-  const instructorOptions = useMemo(() => {
-    const fromCourse = (apiCourse?.instructors ?? []).map((item) => ({
-      value: String(item.id),
-      label: item.name,
-      avatarUrl: getInstructorAvatarUrl(item.avatarId),
-      meta: `ID ${item.id}`,
-    }));
-    const fromDirectory = (instructorListData?.data ?? []).map((item) => ({
-      value: String(item.id),
-      label: item.name,
-      avatarUrl: getInstructorAvatarUrl(item.avatarId),
-      meta: item.qualificationSlugs?.join(' • ') || `ID ${item.id}`,
-    }));
-    return [...fromCourse, ...fromDirectory].filter(
-      (item, i, arr) => arr.findIndex((c) => c.value === item.value) === i
-    );
-  }, [apiCourse?.instructors, instructorListData]);
-
-  const certificateOptions = useMemo(() => {
-    const serverOptions = (certificateTemplateData?.data ?? []).map((item) => ({
-      value: item.slug || String(item.id),
-      label: item.name,
-      description: item.description || null,
-      meta: item.status ? `Status: ${item.status}` : null,
-    }));
-    return [...serverOptions, ...createdTemplateOptions].filter(
-      (item, i, arr) => arr.findIndex((c) => c.value === item.value) === i
-    );
-  }, [certificateTemplateData, createdTemplateOptions]);
-
-  // ── Structural stats ─────────────────────────────────────────────────────────
-  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
-  const hours = Math.floor(totalMinutes / 60);
-  const minutes = totalMinutes % 60;
-  const publishedCount = lessons.filter(
-    (l) => l.visibility === 'publico' || l.status === 'publicada'
-  ).length;
-
-  // ── Effects ──────────────────────────────────────────────────────────────────
-  useEffect(() => {
-    if (!apiCourse) return;
-    const nextCertificateModel =
-      apiCourse.certificateModel ?? persistedCertificateModel ?? '';
-    form.reset({
-      slug: apiCourse.slug,
-      nomeInterno: apiCourse.name,
-      tituloComercial: apiCourse.title,
-      descricaoPublica: apiCourse.description ?? '',
-      objetivos: apiCourse.objectives ?? '',
-      publicoAlvo: apiCourse.targetAudience ?? '',
-      nivel: toPtLevel(apiCourse.level),
-      status: toPtStatus(apiCourse.status),
-      tipoOferta: toPtOfferingType(apiCourse.offeringType),
-      categorias: apiCourse.categories ?? [],
-      primaryColor: apiCourse.primaryColor || '#1D4ED8',
-      secondaryColor: apiCourse.secondaryColor || '#111827',
-      instrutores: (apiCourse.instructorIds ?? []).map(String),
-      preRequisitos: apiCourse.requirements ?? '',
-      modeloCertificado: nextCertificateModel,
-      certificado: apiCourse.hasCertificate ?? false,
-      destaque: apiCourse.isFeatured ?? false,
-      listado: apiCourse.isListed ?? false,
-    });
-    setPersistedCertificateModel(nextCertificateModel);
-  }, [apiCourse]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    const previews = [
-      { fileId: apiCourse?.logoFileId, setter: setLogoPreview },
-      { fileId: apiCourse?.bannerFileId, setter: setBannerPreview },
-    ];
-    previews.forEach(({ fileId, setter }) => {
-      if (!fileId) return;
-      void (async () => {
-        try {
-          const response = await request<{ url?: string }>({
-            url: `/file/open/${fileId}`,
-            method: 'PUT',
-          });
-          if (response?.data?.url) setter(response.data.url);
-        } catch {
-          // ignore preview failures
-        }
-      })();
-    });
-  }, [apiCourse?.bannerFileId, apiCourse?.logoFileId, request]);
-
-  // ── File handlers ────────────────────────────────────────────────────────────
-  async function openUploadedFile(fileId?: number | null) {
-    if (!fileId) return;
-    try {
-      const response = await request<{ url?: string }>({
-        url: `/file/open/${fileId}`,
-        method: 'PUT',
-      });
-      const url = response?.data?.url;
-      if (!url) {
-        toast.error(t('toasts.openFileError'));
-        return;
-      }
-      window.open(url, '_blank', 'noopener,noreferrer');
-    } catch {
-      toast.error(t('toasts.openFileError'));
-    }
-  }
-
-  async function handleFileSelect(
-    event: ChangeEvent<HTMLInputElement>,
-    setter: (v: string | null) => void,
-    type: 'logo' | 'banner'
-  ) {
-    const file = event.target.files?.[0];
-    if (!file) return;
-    if (!file.type.startsWith('image/')) {
-      toast.error(t('toasts.onlyImages'));
-      return;
-    }
-    if (file.size > 5 * 1024 * 1024) {
-      toast.error(t('toasts.maxSize'));
-      return;
-    }
-    const objectUrl = URL.createObjectURL(file);
-    setter(objectUrl);
-    type === 'logo' ? setUploadingLogo(true) : setUploadingBanner(true);
-    try {
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('destination', 'lms/courses');
-      const uploadResponse = await request<{ id: number; filename: string }>({
-        url: '/file',
-        method: 'POST',
-        data: formData,
-        headers: { 'Content-Type': 'multipart/form-data' },
-      });
-      const fileId = uploadResponse?.data?.id;
-      if (!fileId) throw new Error('invalid file id');
-      await request({
-        url: `/lms/courses/${courseId}`,
-        method: 'PATCH',
-        data:
-          type === 'logo' ? { logoFileId: fileId } : { bannerFileId: fileId },
-      });
-      await refetchCourse();
-      toast.success(t('toasts.fileSelected', { name: file.name }));
-    } catch {
-      toast.error(t('toasts.fileUploadError'));
-    } finally {
-      type === 'logo' ? setUploadingLogo(false) : setUploadingBanner(false);
-    }
-  }
-
-  async function handleRemoveFile(type: 'logo' | 'banner') {
-    const fileId =
-      type === 'logo' ? apiCourse?.logoFileId : apiCourse?.bannerFileId;
-    try {
-      await request({
-        url: `/lms/courses/${courseId}`,
-        method: 'PATCH',
-        data: type === 'logo' ? { logoFileId: null } : { bannerFileId: null },
-      });
-      if (fileId) {
-        await request({ url: `/file/${fileId}`, method: 'DELETE' });
-      }
-      if (type === 'logo') setLogoPreview(null);
-      else setBannerPreview(null);
-      await refetchCourse();
-    } catch {
-      toast.error(t('toasts.fileUploadError'));
-    }
-  }
-
-  async function handleCreateCategory(values: Record<string, string>) {
-    const name = String(values.name ?? '').trim();
-    const slug = slugify(values.slug || values.name || '');
-    if (!name || !slug) {
-      toast.error('Informe nome e slug para criar a categoria.');
-      return null;
-    }
-    const localeCode =
-      currentLocaleCode ||
-      (locales?.[0] as Locale | undefined)?.code ||
-      'pt-BR';
-    try {
-      await request({
-        url: '/category',
-        method: 'POST',
-        data: {
-          locale: { [localeCode]: { name } },
-          slug,
-          category_id: null,
-          color: '#000000',
-          icon: '',
-          status: 'active',
-        },
-      });
-      const option = { value: slug, label: name };
-      setCreatedCategoryOptions((current) => [option, ...current]);
-      await refetchCategoryOptions();
-      toast.success('Categoria criada com sucesso.');
-      return option;
-    } catch {
-      toast.error('Não foi possível criar a categoria.');
-      return null;
-    }
-  }
-
-  async function handleCreateCertificateTemplate(
-    values: Record<string, string>
-  ) {
-    const name = String(values.name ?? '').trim();
-    const description = String(values.description ?? '').trim();
-    if (!name) {
-      toast.error('Informe o nome do modelo.');
-      return null;
-    }
-    const initialTemplate = createDefaultTemplate();
-    initialTemplate.name = name;
-    try {
-      const response = await request<ApiCertificateTemplate>({
-        url: '/lms/certificates/templates',
-        method: 'POST',
-        data: {
-          name,
-          description: description || undefined,
-          status: 'draft',
-          templateContent: JSON.stringify(initialTemplate),
-        },
-      });
-      const created = response.data;
-      const option = {
-        value: created.slug || String(created.id),
-        label: created.name,
-        description: created.description || null,
-        meta: created.status ? `Status: ${created.status}` : null,
-      };
-      setCreatedTemplateOptions((current) => [option, ...current]);
-      setPersistedCertificateModel(option.value);
-      await refetchCertificateTemplates();
-      toast.success('Modelo de certificado criado com sucesso.');
-      return option;
-    } catch {
-      toast.error('Não foi possível criar o modelo de certificado.');
-      return null;
-    }
-  }
-
-  const handleInstructorCreated = async (instructor: {
-    id: number;
-    personId: number;
-    name: string;
-    avatarId?: number | null;
-    email?: string | null;
-    phone?: string | null;
-    qualificationSlugs: string[];
-  }) => {
-    const createdId = String(instructor.id);
-    const current = form.getValues('instrutores') ?? [];
-    if (!current.includes(createdId)) {
-      form.setValue('instrutores', [...current, createdId], {
-        shouldDirty: true,
-        shouldTouch: true,
-        shouldValidate: true,
-      });
-    }
-    await refetchInstructorOptions();
-  };
-
-  async function handleDelete() {
-    setDeleting(true);
-    try {
-      await request({ url: `/lms/courses/${courseId}`, method: 'DELETE' });
-      setDeleteDialogOpen(false);
-      toast.success(t('toasts.courseDeleted'));
-      router.push('/lms/courses');
-    } finally {
-      setDeleting(false);
-    }
-  }
-
-  function onSubmit(data: CourseEditFormValues) {
-    saveCourse(data);
-  }
-
-  function onFormError(errors: Record<string, unknown>) {
-    const first = Object.values(errors)[0] as { message?: string } | undefined;
-    toast.error(first?.message ?? 'Verifique os campos obrigatórios');
-  }
-
-  // ── Render ────────────────────────────────────────────────────────────────────
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit, onFormError)}
-        className="flex flex-col h-full min-h-0"
-      >
-        {/* ── Header ───────────────────────────────────────────────────────── */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted/30 shrink-0">
-          <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 shrink-0">
-            <BookOpen className="size-4 text-primary" />
-          </div>
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-1.5">
-              <span className="text-sm font-semibold truncate">Curso</span>
-              {isDirty && (
-                <CircleDot className="size-3 text-amber-500 shrink-0" />
-              )}
-            </div>
-            <p className="text-[0.65rem] text-muted-foreground truncate">
-              {course.slug}
-            </p>
-          </div>
-          <Badge
-            variant={course.published ? 'default' : 'secondary'}
-            className="shrink-0 text-xs"
-          >
-            {course.published ? 'Publicado' : 'Rascunho'}
-          </Badge>
-        </div>
-
-        {/* ── Tabs ─────────────────────────────────────────────────────────── */}
-        <Tabs
-          value={activeTab}
-          onValueChange={setActiveTab}
-          className="flex flex-col flex-1 min-h-0"
-        >
-          <TabsList>
-            {(['estrutura', 'sobre', 'midia', 'extra'] as const).map((tab) => (
-              <TabsTrigger key={tab} value={tab}>
-                {tab === 'estrutura'
-                  ? 'Estrutura'
-                  : tab === 'sobre'
-                    ? 'Sobre'
-                    : tab === 'midia'
-                      ? 'Mídia'
-                      : 'Extra'}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-
-          <div className="flex-1 min-h-0 overflow-hidden">
-            <ScrollArea className="h-full">
-              <div className="p-3 flex flex-col gap-3">
-                {/* ── Tab: Estrutura ──────────────────────────────────────── */}
-                <TabsContent
-                  value="estrutura"
-                  className="mt-0 flex flex-col gap-3"
-                >
-                  {/* Stat chips */}
-                  <Card className="bg-muted/20 py-2 gap-2">
-                    <CardHeader className="px-3 pt-2 pb-0">
-                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Resumo do conteúdo
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="px-3 pb-2">
-                      <div className="grid grid-cols-2 gap-2">
-                        <StatChip
-                          icon={<Layers className="size-3 text-blue-500" />}
-                          label="Sessões"
-                          value={sessions.length}
-                        />
-                        <StatChip
-                          icon={<Video className="size-3 text-violet-500" />}
-                          label="Aulas"
-                          value={lessons.length}
-                        />
-                        <StatChip
-                          icon={<Clock className="size-3 text-amber-500" />}
-                          label="Duração"
-                          value={
-                            hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`
-                          }
-                        />
-                        <StatChip
-                          icon={
-                            <CheckCircle2 className="size-3 text-emerald-500" />
-                          }
-                          label="Publicadas"
-                          value={publishedCount}
-                        />
-                      </div>
-                    </CardContent>
-                  </Card>
-
-                  {/* Dados principais */}
-                  <Card className="bg-muted/20 py-2 gap-2">
-                    <CardHeader className="px-3 pt-2 pb-0">
-                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Dados principais
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                      <FormField
-                        control={form.control}
-                        name="tituloComercial"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-xs">Título</FormLabel>
-                            <FormControl>
-                              <Input {...field} className="h-8 text-sm" />
-                            </FormControl>
-                            <FormMessage className="text-xs" />
-                          </FormItem>
-                        )}
-                      />
-                      <div className="grid grid-cols-2 gap-2">
-                        <FormField
-                          control={form.control}
-                          name="nomeInterno"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel className="text-xs">
-                                Nome Interno
-                              </FormLabel>
-                              <FormControl>
-                                <Input {...field} className="h-8 text-xs" />
-                              </FormControl>
-                              <FormMessage className="text-xs" />
-                            </FormItem>
-                          )}
-                        />
-                        <FormField
-                          control={form.control}
-                          name="slug"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel className="text-xs">Slug</FormLabel>
-                              <FormControl>
-                                <Input
-                                  {...field}
-                                  className="h-8 text-xs font-mono"
-                                  onChange={(e) =>
-                                    field.onChange(e.target.value.toLowerCase())
-                                  }
-                                />
-                              </FormControl>
-                              <FormMessage className="text-xs" />
-                            </FormItem>
-                          )}
-                        />
-                      </div>
-                    </CardContent>
-                  </Card>
-
-                  {/* Descrição */}
-                  <Card className="bg-muted/20 py-2 gap-2">
-                    <CardHeader className="px-3 pt-2 pb-0">
-                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Descrição
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="px-3 pb-2">
-                      <FormField
-                        control={form.control}
-                        name="descricaoPublica"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <RichTextEditor
-                                value={field.value}
-                                onChange={field.onChange}
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs" />
-                          </FormItem>
-                        )}
-                      />
-                    </CardContent>
-                  </Card>
-                </TabsContent>
-
-                {/* ── Tab: Sobre ──────────────────────────────────────────── */}
-                <TabsContent value="sobre" className="mt-0 flex flex-col gap-3">
-                  <CourseClassificationCard
-                    form={form}
-                    t={t}
-                    levels={NIVEIS}
-                    statuses={STATUS_OPTIONS}
-                    offeringTypes={OFFERING_TYPE_OPTIONS}
-                  />
-                  <CourseRelationsCard
-                    form={form}
-                    t={t}
-                    categoryOptions={categoryOptions}
-                    instructorOptions={instructorOptions}
-                    onCreateCategory={handleCreateCategory}
-                    onCreateInstructor={() => setInstructorSheetOpen(true)}
-                  />
-                  <CourseContentCard form={form} />
-                </TabsContent>
-
-                {/* ── Tab: Mídia ──────────────────────────────────────────── */}
-                <TabsContent value="midia" className="mt-0">
-                  <CourseMediaCard
-                    logoPreview={logoPreview}
-                    bannerPreview={bannerPreview}
-                    uploadingLogo={uploadingLogo}
-                    uploadingBanner={uploadingBanner}
-                    onLogoSelect={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      handleFileSelect(e, setLogoPreview, 'logo')
-                    }
-                    onBannerSelect={(e: React.ChangeEvent<HTMLInputElement>) =>
-                      handleFileSelect(e, setBannerPreview, 'banner')
-                    }
-                    logoFile={
-                      apiCourse?.logoFileId
-                        ? {
-                            id: apiCourse.logoFileId,
-                            name:
-                              apiCourse.logoFilename ||
-                              `#${apiCourse.logoFileId}`,
-                          }
-                        : undefined
-                    }
-                    bannerFile={
-                      apiCourse?.bannerFileId
-                        ? {
-                            id: apiCourse.bannerFileId,
-                            name:
-                              apiCourse.bannerFilename ||
-                              `#${apiCourse.bannerFileId}`,
-                          }
-                        : undefined
-                    }
-                    onOpenLogoFile={() =>
-                      openUploadedFile(apiCourse?.logoFileId)
-                    }
-                    onOpenBannerFile={() =>
-                      openUploadedFile(apiCourse?.bannerFileId)
-                    }
-                    onRemoveLogoFile={
-                      apiCourse?.logoFileId
-                        ? () => handleRemoveFile('logo')
-                        : undefined
-                    }
-                    onRemoveBannerFile={
-                      apiCourse?.bannerFileId
-                        ? () => handleRemoveFile('banner')
-                        : undefined
-                    }
-                    logoImageType={apiCourse?.logoImageType}
-                    bannerImageType={apiCourse?.bannerImageType}
-                    t={t}
-                  />
-                </TabsContent>
-
-                {/* ── Tab: Extra ──────────────────────────────────────────── */}
-                <TabsContent value="extra" className="mt-0 flex flex-col gap-3">
-                  <CourseCertificateCard
-                    form={form}
-                    t={t}
-                    options={certificateOptions}
-                    onCreateTemplate={handleCreateCertificateTemplate}
-                  />
-                  <CourseFlagsCard form={form} t={t} />
-                  <CourseDangerZoneCard
-                    t={t}
-                    onDelete={() => setDeleteDialogOpen(true)}
-                  />
-                </TabsContent>
-              </div>
-            </ScrollArea>
-          </div>
-        </Tabs>
-
-        {/* ── Footer ───────────────────────────────────────────────────────── */}
-        <div className="shrink-0 border-t bg-background">
-          <Separator />
-          <div className="flex items-center gap-2 px-3 py-2">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="h-7 text-xs"
-              disabled={!isDirty || saving}
-              onClick={() => form.reset()}
-            >
-              <Undo2 className="size-3 mr-1" />
-              Cancelar
-            </Button>
-            <div className="flex-1" />
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-7 text-xs"
-              disabled={createSessionMutation.isPending}
-              onClick={() => createSessionMutation.mutate()}
-            >
-              <Plus className="size-3 mr-1" />
-              Nova sessão
-            </Button>
-            <Button
-              type="submit"
-              size="sm"
-              className="h-7 text-xs"
-              disabled={saving}
-            >
-              {saving ? (
-                <Loader2 className="size-3 mr-1 animate-spin" />
-              ) : (
-                <Save className="size-3 mr-1" />
-              )}
-              Salvar
-            </Button>
-          </div>
-        </div>
-      </form>
-
-      {/* ── Instructor sheet ─────────────────────────────────────────────── */}
-      <CreateLmsPersonSheet
-        open={instructorSheetOpen}
-        onOpenChange={setInstructorSheetOpen}
-        onCreated={handleInstructorCreated}
-        title="Cadastrar instrutor"
-        description="Cadastre um novo instrutor e adicione-o ao curso."
-        submitLabel="Cadastrar instrutor"
-        successMessage="Instrutor cadastrado com sucesso."
-        errorMessage="Não foi possível cadastrar o instrutor."
-        defaultQualificationSlugs={['course-lessons']}
-      />
-
-      {/* ── 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>
-    </Form>
-  );
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function StatChip({
-  icon,
-  label,
-  value,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  value: string | number;
-}) {
-  return (
-    <div className="flex items-center gap-2 rounded-md border bg-background px-2.5 py-2">
-      <span className="text-muted-foreground shrink-0">{icon}</span>
-      <div className="min-w-0">
-        <p className="text-[0.65rem] text-muted-foreground truncate">{label}</p>
-        <p className="text-sm font-semibold tabular-nums leading-none">
-          {value}
-        </p>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+// ── Imports ───────────────────────────────────────────────────────────────────
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  AlertTriangle,
+  BookOpen,
+  CheckCircle2,
+  CircleDot,
+  Clock,
+  Layers,
+  Loader2,
+  Plus,
+  Save,
+  Undo2,
+  Video,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { type ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { CreateLmsPersonSheet } from '@/app/(app)/(libraries)/lms/_components/create-lms-person-sheet';
+import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
+import { RichTextEditor } from '@/components/rich-text-editor';
+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';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import type {
+  CourseEditFormValues,
+  PickerOption,
+} from '../../_components/course-edit-types';
+import { CourseCertificateCard } from '../../_components/CourseCertificateCard';
+import { CourseClassificationCard } from '../../_components/CourseClassificationCard';
+import { CourseContentCard } from '../../_components/CourseContentCard';
+import { CourseDangerZoneCard } from '../../_components/CourseDangerZoneCard';
+import { CourseFlagsCard } from '../../_components/CourseFlagsCard';
+import { CourseMediaCard } from '../../_components/CourseMediaCard';
+import { CourseRelationsCard } from '../../_components/CourseRelationsCard';
+import { useCreateSessionMutation } from '../_data/use-course-structure-mutations';
+import { courseStructureQueryKey } from '../_data/use-course-structure-query';
+import { useStructureStore } from './store';
+
+// ── API types (local to this component) ──────────────────────────────────────
+
+type ApiCourseDetail = {
+  id: number;
+  name: string;
+  slug: string;
+  title: string;
+  description: string;
+  primaryColor?: string | null;
+  secondaryColor?: string | null;
+  level: 'beginner' | 'intermediate' | 'advanced';
+  status: 'draft' | 'published' | 'archived';
+  offeringType: 'scheduled' | 'on_demand' | 'blended';
+  categories: string[];
+  isFeatured: boolean;
+  hasCertificate: boolean;
+  isListed: boolean;
+  enrollmentCount: number;
+  requirements: string;
+  objectives: string;
+  targetAudience: string;
+  lessonCount: number;
+  sessionCount: number;
+  averageCompletion: number;
+  certificatesIssued: number;
+  instructorIds?: number[];
+  instructors?: Array<{ id: number; name: string; avatarId: number | null }>;
+  logoFileId?: number | null;
+  logoFilename?: string | null;
+  logoImageType?: {
+    suggestedWidth: number | null;
+    suggestedHeight: number | null;
+    allowedExtensions: string | null;
+    aspectRatio: string | null;
+  } | null;
+  bannerFileId?: number | null;
+  bannerFilename?: string | null;
+  bannerImageType?: {
+    suggestedWidth: number | null;
+    suggestedHeight: number | null;
+    allowedExtensions: string | null;
+    aspectRatio: string | null;
+  } | null;
+  certificateModel?: string | null;
+};
+
+type ApiCategory = { id: number; slug: string; name: string };
+type ApiCategoryList = {
+  data: ApiCategory[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+type ApiInstructor = {
+  id: number;
+  personId: number;
+  name: string;
+  avatarId?: number | null;
+  qualificationSlugs: string[];
+};
+type ApiInstructorList = {
+  data: ApiInstructor[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+type ApiCertificateTemplate = {
+  id: number;
+  name: string;
+  slug?: string | null;
+  description?: string | null;
+  status?: 'draft' | 'active' | 'inactive';
+};
+type ApiCertificateTemplateList = {
+  data: ApiCertificateTemplate[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage?: number;
+};
+type Locale = { id?: number; code: string; name: string };
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function normalizeEnumValue(value?: string | null) {
+  return String(value ?? '')
+    .trim()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase();
+}
+
+function toPtLevel(
+  level: ApiCourseDetail['level']
+): CourseEditFormValues['nivel'] {
+  const n = normalizeEnumValue(level);
+  if (n === 'beginner' || n === 'iniciante') return 'iniciante';
+  if (n === 'intermediate' || n === 'intermediario') return 'intermediario';
+  return 'avancado';
+}
+
+function toApiLevel(level: CourseEditFormValues['nivel']) {
+  if (level === 'iniciante') return 'beginner';
+  if (level === 'intermediario') return 'intermediate';
+  return 'advanced';
+}
+
+function toPtStatus(
+  status: ApiCourseDetail['status']
+): CourseEditFormValues['status'] {
+  const n = normalizeEnumValue(status);
+  if (n === 'published' || n === 'active' || n === 'ativo') return 'ativo';
+  if (n === 'archived' || n === 'arquivado') return 'arquivado';
+  return 'rascunho';
+}
+
+function toApiStatus(status: CourseEditFormValues['status']) {
+  if (status === 'ativo') return 'published';
+  if (status === 'arquivado') return 'archived';
+  return 'draft';
+}
+
+function toPtOfferingType(
+  value: ApiCourseDetail['offeringType']
+): CourseEditFormValues['tipoOferta'] {
+  const n = normalizeEnumValue(value);
+  if (n === 'scheduled' || n === 'agendado') return 'agendado';
+  if (n === 'blended' || n === 'hibrido') return 'hibrido';
+  return 'sob_demanda';
+}
+
+function toApiOfferingType(value: CourseEditFormValues['tipoOferta']) {
+  if (value === 'agendado') return 'scheduled';
+  if (value === 'hibrido') return 'blended';
+  return 'on_demand';
+}
+
+function getContrastColor(hex: string) {
+  const cleaned = hex.replace('#', '');
+  if (cleaned.length !== 6) return '#FFFFFF';
+  const r = parseInt(cleaned.slice(0, 2), 16);
+  const g = parseInt(cleaned.slice(2, 4), 16);
+  const b = parseInt(cleaned.slice(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.6 ? '#111827' : '#FFFFFF';
+}
+
+function slugify(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+function getInstructorAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : null;
+}
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+function buildSchema(t: (key: string) => string) {
+  return z.object({
+    slug: z
+      .string()
+      .trim()
+      .min(2, t('validation.codeMin'))
+      .max(32, t('validation.codeMax'))
+      .regex(
+        /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
+        'Código: apenas letras minúsculas, números e hífens'
+      ),
+    nomeInterno: z.string().trim().min(3, t('validation.internalNameMin')),
+    tituloComercial: z.string().trim().min(3, t('validation.titleMin')),
+    descricaoPublica: z.string().trim(),
+    objetivos: z.string().optional(),
+    publicoAlvo: z.string().optional(),
+    nivel: z.enum(['iniciante', 'intermediario', 'avancado']),
+    status: z.enum(['ativo', 'rascunho', 'arquivado']),
+    tipoOferta: z.enum(['agendado', 'sob_demanda', 'hibrido']),
+    categorias: z.array(z.string()).optional().default([]),
+    primaryColor: z
+      .string()
+      .regex(/^#([0-9A-Fa-f]{6})$/, t('validation.colorInvalid')),
+    secondaryColor: z
+      .string()
+      .regex(/^#([0-9A-Fa-f]{6})$/, t('validation.colorInvalid')),
+    instrutores: z.array(z.string()).optional(),
+    preRequisitos: z.string().optional(),
+    modeloCertificado: z.string().optional(),
+    certificado: z.boolean().default(false),
+    destaque: z.boolean().default(false),
+    listado: z.boolean().default(false),
+  });
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EditorCourse() {
+  const courseId = useStructureStore((s) => s.courseId);
+  const course = useStructureStore((s) => s.course);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+  const updateCourseInStore = useStructureStore((s) => s.updateCourse);
+
+  const { request, currentLocaleCode, locales } = useApp();
+  const t = useTranslations('lms.CursoEditPage');
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const createSessionMutation = useCreateSessionMutation();
+
+  // ── UI state ────────────────────────────────────────────────────────────────
+  const [activeTab, setActiveTab] = useState('estrutura');
+  const [instructorSheetOpen, setInstructorSheetOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [bannerPreview, setBannerPreview] = useState<string | null>(null);
+  const [uploadingLogo, setUploadingLogo] = useState(false);
+  const [uploadingBanner, setUploadingBanner] = useState(false);
+  const [createdCategoryOptions, setCreatedCategoryOptions] = useState<
+    PickerOption[]
+  >([]);
+  const [createdTemplateOptions, setCreatedTemplateOptions] = useState<
+    PickerOption[]
+  >([]);
+  const [persistedCertificateModel, setPersistedCertificateModel] =
+    useState('');
+
+  // ── 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: categoryListData, refetch: refetchCategoryOptions } =
+    useQuery<ApiCategoryList>({
+      queryKey: ['lms-edit-course-categories'],
+      queryFn: async () => {
+        const response = await request<ApiCategoryList | ApiCategory[]>({
+          url: '/category',
+          method: 'GET',
+          params: { page: 1, pageSize: 500, status: 'all' },
+        });
+        const payload = response.data;
+        if (Array.isArray(payload))
+          return {
+            data: payload,
+            total: payload.length,
+            page: 1,
+            pageSize: payload.length,
+          };
+        return payload;
+      },
+      initialData: { data: [], total: 0, page: 1, pageSize: 500 },
+    });
+
+  const { data: instructorListData, refetch: refetchInstructorOptions } =
+    useQuery<ApiInstructorList>({
+      queryKey: ['lms-course-edit-instructors'],
+      queryFn: async () => {
+        const response = await request<ApiInstructorList | ApiInstructor[]>({
+          url: '/lms/instructors',
+          method: 'GET',
+          params: {
+            page: 1,
+            pageSize: 500,
+            qualificationSlugs: ['course-lessons'],
+          },
+        });
+        const payload = response.data;
+        if (Array.isArray(payload))
+          return {
+            data: payload,
+            total: payload.length,
+            page: 1,
+            pageSize: payload.length,
+          };
+        return payload;
+      },
+      initialData: { data: [], total: 0, page: 1, pageSize: 500 },
+    });
+
+  const {
+    data: certificateTemplateData,
+    refetch: refetchCertificateTemplates,
+  } = useQuery<ApiCertificateTemplateList>({
+    queryKey: ['lms-course-certificate-templates'],
+    queryFn: async () => {
+      const response = await request<
+        ApiCertificateTemplateList | ApiCertificateTemplate[]
+      >({
+        url: '/lms/certificates/templates',
+        method: 'GET',
+        params: { page: 1, pageSize: 100 },
+      });
+      const payload = response.data;
+      if (Array.isArray(payload))
+        return {
+          data: payload,
+          total: payload.length,
+          page: 1,
+          pageSize: payload.length,
+          lastPage: 1,
+        };
+      return payload;
+    },
+    initialData: { data: [], total: 0, page: 1, pageSize: 100, lastPage: 1 },
+  });
+
+  // ── Save mutation ───────────────────────────────────────────────────────────
+  const { mutate: saveCourse, isPending: saving } = useMutation({
+    mutationFn: async (data: CourseEditFormValues) => {
+      await request({
+        url: `/lms/courses/${courseId}`,
+        method: 'PATCH',
+        data: {
+          name: data.nomeInterno.trim(),
+          slug: data.slug.trim().toLowerCase(),
+          title: data.tituloComercial.trim(),
+          description: data.descricaoPublica.trim(),
+          requirements: data.preRequisitos?.trim() || undefined,
+          objectives: data.objetivos?.trim() || undefined,
+          targetAudience: data.publicoAlvo?.trim() || undefined,
+          level: toApiLevel(data.nivel),
+          status: toApiStatus(data.status),
+          offeringType: toApiOfferingType(data.tipoOferta),
+          categorySlugs: data.categorias,
+          primaryColor: data.primaryColor,
+          primaryContrastColor: getContrastColor(data.primaryColor),
+          secondaryColor: data.secondaryColor,
+          secondaryContrastColor: getContrastColor(data.secondaryColor),
+          hasCertificate: data.certificado,
+          isFeatured: data.destaque,
+          isListed: data.listado,
+          certificateModel: data.modeloCertificado || undefined,
+          instructorIds: (data.instrutores ?? []).map(Number),
+        },
+      });
+      return data;
+    },
+    onSuccess: (data) => {
+      setPersistedCertificateModel(data.modeloCertificado || '');
+      updateCourseInStore({
+        title: data.tituloComercial,
+        slug: data.slug,
+        name: data.nomeInterno,
+        description: data.descricaoPublica,
+        published: data.status === 'ativo',
+      });
+      void queryClient.invalidateQueries({
+        queryKey: courseStructureQueryKey(courseId),
+      });
+      form.reset(data);
+      toast.success(t('toasts.courseUpdated'));
+    },
+    onError: () => {
+      toast.error('Erro ao salvar curso');
+    },
+  });
+
+  // ── Form ─────────────────────────────────────────────────────────────────────
+  const schema = useMemo(() => buildSchema(t), [t]);
+
+  const form = useForm<CourseEditFormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      slug: '',
+      nomeInterno: '',
+      tituloComercial: '',
+      descricaoPublica: '',
+      objetivos: '',
+      publicoAlvo: '',
+      nivel: 'iniciante',
+      status: 'rascunho',
+      tipoOferta: 'sob_demanda',
+      categorias: [],
+      primaryColor: '#1D4ED8',
+      secondaryColor: '#111827',
+      instrutores: [],
+      preRequisitos: '',
+      modeloCertificado: '',
+      certificado: false,
+      destaque: false,
+      listado: false,
+    },
+  });
+
+  const { isDirty } = form.formState;
+
+  const NIVEIS = useMemo(
+    () => [
+      { value: 'iniciante', label: t('levels.beginner') },
+      { value: 'intermediario', label: t('levels.intermediate') },
+      { value: 'avancado', label: t('levels.advanced') },
+    ],
+    [t]
+  );
+  const STATUS_OPTIONS = useMemo(
+    () => [
+      { value: 'ativo', label: t('status.active') },
+      { value: 'rascunho', label: t('status.draft') },
+      { value: 'arquivado', label: t('status.archived') },
+    ],
+    [t]
+  );
+  const OFFERING_TYPE_OPTIONS = useMemo(
+    () =>
+      [
+        {
+          value: 'sob_demanda',
+          label: t('offeringType.options.onDemand.label'),
+          description: t('offeringType.options.onDemand.description'),
+        },
+        {
+          value: 'agendado',
+          label: t('offeringType.options.scheduled.label'),
+          description: t('offeringType.options.scheduled.description'),
+        },
+        {
+          value: 'hibrido',
+          label: t('offeringType.options.blended.label'),
+          description: t('offeringType.options.blended.description'),
+        },
+      ] as const,
+    [t]
+  );
+
+  // ── Derived options ──────────────────────────────────────────────────────────
+  const categoryOptions = useMemo(() => {
+    const serverOptions = (categoryListData?.data ?? [])
+      .filter((item) => !!item.slug)
+      .map((item) => ({ value: item.slug, label: item.name || item.slug }));
+    return [...serverOptions, ...createdCategoryOptions].filter(
+      (item, i, arr) => arr.findIndex((c) => c.value === item.value) === i
+    );
+  }, [categoryListData, createdCategoryOptions]);
+
+  const instructorOptions = useMemo(() => {
+    const fromCourse = (apiCourse?.instructors ?? []).map((item) => ({
+      value: String(item.id),
+      label: item.name,
+      avatarUrl: getInstructorAvatarUrl(item.avatarId),
+      meta: `ID ${item.id}`,
+    }));
+    const fromDirectory = (instructorListData?.data ?? []).map((item) => ({
+      value: String(item.id),
+      label: item.name,
+      avatarUrl: getInstructorAvatarUrl(item.avatarId),
+      meta: item.qualificationSlugs?.join(' • ') || `ID ${item.id}`,
+    }));
+    return [...fromCourse, ...fromDirectory].filter(
+      (item, i, arr) => arr.findIndex((c) => c.value === item.value) === i
+    );
+  }, [apiCourse?.instructors, instructorListData]);
+
+  const certificateOptions = useMemo(() => {
+    const serverOptions = (certificateTemplateData?.data ?? []).map((item) => ({
+      value: item.slug || String(item.id),
+      label: item.name,
+      description: item.description || null,
+      meta: item.status ? `Status: ${item.status}` : null,
+    }));
+    return [...serverOptions, ...createdTemplateOptions].filter(
+      (item, i, arr) => arr.findIndex((c) => c.value === item.value) === i
+    );
+  }, [certificateTemplateData, createdTemplateOptions]);
+
+  // ── Structural stats ─────────────────────────────────────────────────────────
+  const totalMinutes = lessons.reduce((sum, l) => sum + l.duration, 0);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  const publishedCount = lessons.filter(
+    (l) => l.visibility === 'publico' || l.status === 'publicada'
+  ).length;
+
+  // ── Effects ──────────────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!apiCourse) return;
+    const nextCertificateModel =
+      apiCourse.certificateModel ?? persistedCertificateModel ?? '';
+    form.reset({
+      slug: apiCourse.slug,
+      nomeInterno: apiCourse.name,
+      tituloComercial: apiCourse.title,
+      descricaoPublica: apiCourse.description ?? '',
+      objetivos: apiCourse.objectives ?? '',
+      publicoAlvo: apiCourse.targetAudience ?? '',
+      nivel: toPtLevel(apiCourse.level),
+      status: toPtStatus(apiCourse.status),
+      tipoOferta: toPtOfferingType(apiCourse.offeringType),
+      categorias: apiCourse.categories ?? [],
+      primaryColor: apiCourse.primaryColor || '#1D4ED8',
+      secondaryColor: apiCourse.secondaryColor || '#111827',
+      instrutores: (apiCourse.instructorIds ?? []).map(String),
+      preRequisitos: apiCourse.requirements ?? '',
+      modeloCertificado: nextCertificateModel,
+      certificado: apiCourse.hasCertificate ?? false,
+      destaque: apiCourse.isFeatured ?? false,
+      listado: apiCourse.isListed ?? false,
+    });
+    setPersistedCertificateModel(nextCertificateModel);
+  }, [apiCourse]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const previews = [
+      { fileId: apiCourse?.logoFileId, setter: setLogoPreview },
+      { fileId: apiCourse?.bannerFileId, setter: setBannerPreview },
+    ];
+    previews.forEach(({ fileId, setter }) => {
+      if (!fileId) return;
+      void (async () => {
+        try {
+          const response = await request<{ url?: string }>({
+            url: `/file/open/${fileId}`,
+            method: 'PUT',
+          });
+          if (response?.data?.url) setter(response.data.url);
+        } catch {
+          // ignore preview failures
+        }
+      })();
+    });
+  }, [apiCourse?.bannerFileId, apiCourse?.logoFileId, request]);
+
+  // ── File handlers ────────────────────────────────────────────────────────────
+  async function openUploadedFile(fileId?: number | null) {
+    if (!fileId) return;
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/open/${fileId}`,
+        method: 'PUT',
+      });
+      const url = response?.data?.url;
+      if (!url) {
+        toast.error(t('toasts.openFileError'));
+        return;
+      }
+      window.open(url, '_blank', 'noopener,noreferrer');
+    } catch {
+      toast.error(t('toasts.openFileError'));
+    }
+  }
+
+  async function handleFileSelect(
+    event: ChangeEvent<HTMLInputElement>,
+    setter: (v: string | null) => void,
+    type: 'logo' | 'banner'
+  ) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    if (!file.type.startsWith('image/')) {
+      toast.error(t('toasts.onlyImages'));
+      return;
+    }
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error(t('toasts.maxSize'));
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setter(objectUrl);
+    type === 'logo' ? setUploadingLogo(true) : setUploadingBanner(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('destination', 'lms/courses');
+      const uploadResponse = await request<{ id: number; filename: string }>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+      const fileId = uploadResponse?.data?.id;
+      if (!fileId) throw new Error('invalid file id');
+      await request({
+        url: `/lms/courses/${courseId}`,
+        method: 'PATCH',
+        data:
+          type === 'logo' ? { logoFileId: fileId } : { bannerFileId: fileId },
+      });
+      await refetchCourse();
+      toast.success(t('toasts.fileSelected', { name: file.name }));
+    } catch {
+      toast.error(t('toasts.fileUploadError'));
+    } finally {
+      type === 'logo' ? setUploadingLogo(false) : setUploadingBanner(false);
+    }
+  }
+
+  async function handleRemoveFile(type: 'logo' | 'banner') {
+    const fileId =
+      type === 'logo' ? apiCourse?.logoFileId : apiCourse?.bannerFileId;
+    try {
+      await request({
+        url: `/lms/courses/${courseId}`,
+        method: 'PATCH',
+        data: type === 'logo' ? { logoFileId: null } : { bannerFileId: null },
+      });
+      if (fileId) {
+        await request({ url: `/file/${fileId}`, method: 'DELETE' });
+      }
+      if (type === 'logo') setLogoPreview(null);
+      else setBannerPreview(null);
+      await refetchCourse();
+    } catch {
+      toast.error(t('toasts.fileUploadError'));
+    }
+  }
+
+  async function handleCreateCategory(values: Record<string, string>) {
+    const name = String(values.name ?? '').trim();
+    const slug = slugify(values.slug || values.name || '');
+    if (!name || !slug) {
+      toast.error('Informe nome e slug para criar a categoria.');
+      return null;
+    }
+    const localeCode =
+      currentLocaleCode ||
+      (locales?.[0] as Locale | undefined)?.code ||
+      'pt-BR';
+    try {
+      await request({
+        url: '/category',
+        method: 'POST',
+        data: {
+          locale: { [localeCode]: { name } },
+          slug,
+          category_id: null,
+          color: '#000000',
+          icon: '',
+          status: 'active',
+        },
+      });
+      const option = { value: slug, label: name };
+      setCreatedCategoryOptions((current) => [option, ...current]);
+      await refetchCategoryOptions();
+      toast.success('Categoria criada com sucesso.');
+      return option;
+    } catch {
+      toast.error('Não foi possível criar a categoria.');
+      return null;
+    }
+  }
+
+  async function handleCreateCertificateTemplate(
+    values: Record<string, string>
+  ) {
+    const name = String(values.name ?? '').trim();
+    const description = String(values.description ?? '').trim();
+    if (!name) {
+      toast.error('Informe o nome do modelo.');
+      return null;
+    }
+    const initialTemplate = createDefaultTemplate();
+    initialTemplate.name = name;
+    try {
+      const response = await request<ApiCertificateTemplate>({
+        url: '/lms/certificates/templates',
+        method: 'POST',
+        data: {
+          name,
+          description: description || undefined,
+          status: 'draft',
+          templateContent: JSON.stringify(initialTemplate),
+        },
+      });
+      const created = response.data;
+      const option = {
+        value: created.slug || String(created.id),
+        label: created.name,
+        description: created.description || null,
+        meta: created.status ? `Status: ${created.status}` : null,
+      };
+      setCreatedTemplateOptions((current) => [option, ...current]);
+      setPersistedCertificateModel(option.value);
+      await refetchCertificateTemplates();
+      toast.success('Modelo de certificado criado com sucesso.');
+      return option;
+    } catch {
+      toast.error('Não foi possível criar o modelo de certificado.');
+      return null;
+    }
+  }
+
+  const handleInstructorCreated = async (instructor: {
+    id: number;
+    personId: number;
+    name: string;
+    avatarId?: number | null;
+    email?: string | null;
+    phone?: string | null;
+    qualificationSlugs: string[];
+  }) => {
+    const createdId = String(instructor.id);
+    const current = form.getValues('instrutores') ?? [];
+    if (!current.includes(createdId)) {
+      form.setValue('instrutores', [...current, createdId], {
+        shouldDirty: true,
+        shouldTouch: true,
+        shouldValidate: true,
+      });
+    }
+    await refetchInstructorOptions();
+  };
+
+  async function handleDelete() {
+    setDeleting(true);
+    try {
+      await request({ url: `/lms/courses/${courseId}`, method: 'DELETE' });
+      setDeleteDialogOpen(false);
+      toast.success(t('toasts.courseDeleted'));
+      router.push('/lms/courses');
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  function onSubmit(data: CourseEditFormValues) {
+    saveCourse(data);
+  }
+
+  function onFormError(errors: Record<string, unknown>) {
+    const first = Object.values(errors)[0] as { message?: string } | undefined;
+    toast.error(first?.message ?? 'Verifique os campos obrigatórios');
+  }
+
+  // ── Render ────────────────────────────────────────────────────────────────────
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit, onFormError)}
+        className="flex flex-col h-full min-h-0"
+      >
+        {/* ── Header ───────────────────────────────────────────────────────── */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted/30 shrink-0">
+          <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 shrink-0">
+            <BookOpen className="size-4 text-primary" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-1.5">
+              <span className="text-sm font-semibold truncate">Curso</span>
+              {isDirty && (
+                <CircleDot className="size-3 text-amber-500 shrink-0" />
+              )}
+            </div>
+            <p className="text-[0.65rem] text-muted-foreground truncate">
+              {course.slug}
+            </p>
+          </div>
+          <Badge
+            variant={course.published ? 'default' : 'secondary'}
+            className="shrink-0 text-xs"
+          >
+            {course.published ? 'Publicado' : 'Rascunho'}
+          </Badge>
+        </div>
+
+        {/* ── Tabs ─────────────────────────────────────────────────────────── */}
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="flex flex-col flex-1 min-h-0"
+        >
+          <TabsList>
+            {(['estrutura', 'sobre', 'midia', 'extra'] as const).map((tab) => (
+              <TabsTrigger key={tab} value={tab}>
+                {tab === 'estrutura'
+                  ? 'Estrutura'
+                  : tab === 'sobre'
+                    ? 'Sobre'
+                    : tab === 'midia'
+                      ? 'Mídia'
+                      : 'Extra'}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          <div className="flex-1 min-h-0 overflow-hidden">
+            <ScrollArea className="h-full">
+              <div className="p-3 flex flex-col gap-3">
+                {/* ── Tab: Estrutura ──────────────────────────────────────── */}
+                <TabsContent
+                  value="estrutura"
+                  className="mt-0 flex flex-col gap-3"
+                >
+                  {/* Stat chips */}
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-0">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        Resumo do conteúdo
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2">
+                      <div className="grid grid-cols-2 gap-2">
+                        <StatChip
+                          icon={<Layers className="size-3 text-blue-500" />}
+                          label="Sessões"
+                          value={sessions.length}
+                        />
+                        <StatChip
+                          icon={<Video className="size-3 text-violet-500" />}
+                          label="Aulas"
+                          value={lessons.length}
+                        />
+                        <StatChip
+                          icon={<Clock className="size-3 text-amber-500" />}
+                          label="Duração"
+                          value={
+                            hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`
+                          }
+                        />
+                        <StatChip
+                          icon={
+                            <CheckCircle2 className="size-3 text-emerald-500" />
+                          }
+                          label="Publicadas"
+                          value={publishedCount}
+                        />
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Dados principais */}
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-0">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        Dados principais
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                      <FormField
+                        control={form.control}
+                        name="tituloComercial"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">Título</FormLabel>
+                            <FormControl>
+                              <Input {...field} className="h-8 text-sm" />
+                            </FormControl>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+                      <div className="grid grid-cols-2 gap-2">
+                        <FormField
+                          control={form.control}
+                          name="nomeInterno"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-xs">
+                                Nome Interno
+                              </FormLabel>
+                              <FormControl>
+                                <Input {...field} className="h-8 text-xs" />
+                              </FormControl>
+                              <FormMessage className="text-xs" />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="slug"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-xs">Slug</FormLabel>
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  className="h-8 text-xs font-mono"
+                                  onChange={(e) =>
+                                    field.onChange(e.target.value.toLowerCase())
+                                  }
+                                />
+                              </FormControl>
+                              <FormMessage className="text-xs" />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Descrição */}
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-0">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        Descrição
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2">
+                      <FormField
+                        control={form.control}
+                        name="descricaoPublica"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <RichTextEditor
+                                value={field.value}
+                                onChange={field.onChange}
+                              />
+                            </FormControl>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+
+                {/* ── Tab: Sobre ──────────────────────────────────────────── */}
+                <TabsContent value="sobre" className="mt-0 flex flex-col gap-3">
+                  <CourseClassificationCard
+                    form={form}
+                    t={t}
+                    levels={NIVEIS}
+                    statuses={STATUS_OPTIONS}
+                    offeringTypes={OFFERING_TYPE_OPTIONS}
+                  />
+                  <CourseRelationsCard
+                    form={form}
+                    t={t}
+                    categoryOptions={categoryOptions}
+                    instructorOptions={instructorOptions}
+                    onCreateCategory={handleCreateCategory}
+                    onCreateInstructor={() => setInstructorSheetOpen(true)}
+                  />
+                  <CourseContentCard form={form} />
+                </TabsContent>
+
+                {/* ── Tab: Mídia ──────────────────────────────────────────── */}
+                <TabsContent value="midia" className="mt-0">
+                  <CourseMediaCard
+                    logoPreview={logoPreview}
+                    bannerPreview={bannerPreview}
+                    uploadingLogo={uploadingLogo}
+                    uploadingBanner={uploadingBanner}
+                    onLogoSelect={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleFileSelect(e, setLogoPreview, 'logo')
+                    }
+                    onBannerSelect={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleFileSelect(e, setBannerPreview, 'banner')
+                    }
+                    logoFile={
+                      apiCourse?.logoFileId
+                        ? {
+                            id: apiCourse.logoFileId,
+                            name:
+                              apiCourse.logoFilename ||
+                              `#${apiCourse.logoFileId}`,
+                          }
+                        : undefined
+                    }
+                    bannerFile={
+                      apiCourse?.bannerFileId
+                        ? {
+                            id: apiCourse.bannerFileId,
+                            name:
+                              apiCourse.bannerFilename ||
+                              `#${apiCourse.bannerFileId}`,
+                          }
+                        : undefined
+                    }
+                    onOpenLogoFile={() =>
+                      openUploadedFile(apiCourse?.logoFileId)
+                    }
+                    onOpenBannerFile={() =>
+                      openUploadedFile(apiCourse?.bannerFileId)
+                    }
+                    onRemoveLogoFile={
+                      apiCourse?.logoFileId
+                        ? () => handleRemoveFile('logo')
+                        : undefined
+                    }
+                    onRemoveBannerFile={
+                      apiCourse?.bannerFileId
+                        ? () => handleRemoveFile('banner')
+                        : undefined
+                    }
+                    logoImageType={apiCourse?.logoImageType}
+                    bannerImageType={apiCourse?.bannerImageType}
+                    t={t}
+                  />
+                </TabsContent>
+
+                {/* ── Tab: Extra ──────────────────────────────────────────── */}
+                <TabsContent value="extra" className="mt-0 flex flex-col gap-3">
+                  <CourseCertificateCard
+                    form={form}
+                    t={t}
+                    options={certificateOptions}
+                    onCreateTemplate={handleCreateCertificateTemplate}
+                  />
+                  <CourseFlagsCard form={form} t={t} />
+                  <CourseDangerZoneCard
+                    t={t}
+                    onDelete={() => setDeleteDialogOpen(true)}
+                  />
+                </TabsContent>
+              </div>
+            </ScrollArea>
+          </div>
+        </Tabs>
+
+        {/* ── Footer ───────────────────────────────────────────────────────── */}
+        <div className="shrink-0 border-t bg-background">
+          <Separator />
+          <div className="flex items-center gap-2 px-3 py-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              disabled={!isDirty || saving}
+              onClick={() => form.reset()}
+            >
+              <Undo2 className="size-3 mr-1" />
+              Cancelar
+            </Button>
+            <div className="flex-1" />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-7 text-xs"
+              disabled={createSessionMutation.isPending}
+              onClick={() => createSessionMutation.mutate()}
+            >
+              <Plus className="size-3 mr-1" />
+              Nova sessão
+            </Button>
+            <Button
+              type="submit"
+              size="sm"
+              className="h-7 text-xs"
+              disabled={saving}
+            >
+              {saving ? (
+                <Loader2 className="size-3 mr-1 animate-spin" />
+              ) : (
+                <Save className="size-3 mr-1" />
+              )}
+              Salvar
+            </Button>
+          </div>
+        </div>
+      </form>
+
+      {/* ── Instructor sheet ─────────────────────────────────────────────── */}
+      <CreateLmsPersonSheet
+        open={instructorSheetOpen}
+        onOpenChange={setInstructorSheetOpen}
+        onCreated={handleInstructorCreated}
+        title="Cadastrar instrutor"
+        description="Cadastre um novo instrutor e adicione-o ao curso."
+        submitLabel="Cadastrar instrutor"
+        successMessage="Instrutor cadastrado com sucesso."
+        errorMessage="Não foi possível cadastrar o instrutor."
+        defaultQualificationSlugs={['course-lessons']}
+      />
+
+      {/* ── 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>
+    </Form>
+  );
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function StatChip({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string | number;
+}) {
+  return (
+    <div className="flex items-center gap-2 rounded-md border bg-background px-2.5 py-2">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
+      <div className="min-w-0">
+        <p className="text-[0.65rem] text-muted-foreground truncate">{label}</p>
+        <p className="text-sm font-semibold tabular-nums leading-none">
+          {value}
+        </p>
+      </div>
+    </div>
+  );
+}