@hed-hog/lms 0.0.303 → 0.0.305

package/hedhog/frontend/app/courses/[id]/page.tsx.ejs

@@ -1,16 +1,9 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
+import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
+import { CreateLmsPersonSheet } from '@/app/(app)/(libraries)/lms/_components/create-lms-person-sheet';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -19,235 +12,175 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldLabel,
-} from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Separator } from '@/components/ui/separator';
+import { Form } from '@/components/ui/form';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { motion } from 'framer-motion';
-import {
-  AlertTriangle,
-  Award,
-  BarChart3,
-  BookOpen,
-  CalendarDays,
-  FileCheck,
-  GraduationCap,
-  Hash,
-  ImageIcon,
-  Layers,
-  LayoutDashboard,
-  Loader2,
-  Percent,
-  Save,
-  Trash2,
-  TrendingUp,
-  Upload,
-  UserCheck,
-  Users,
-  Video,
-  XCircle,
-} from 'lucide-react';
+import { AlertTriangle, BookOpen, Loader2, Save } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { usePathname, useRouter } from 'next/navigation';
-import { use, useEffect, useRef, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
+import { useRouter } from 'next/navigation';
+import { type ChangeEvent, use, useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-type MediaUploadFieldProps = {
-  label: string;
+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 { CourseMainInfoCard } from './_components/CourseMainInfoCard';
+import { CourseMediaCard } from './_components/CourseMediaCard';
+import { CourseRelationsCard } from './_components/CourseRelationsCard';
+import { CourseSummaryCard } from './_components/CourseSummaryCard';
+import type {
+  CourseEditFormValues,
+  PickerOption,
+} from './_components/course-edit-types';
+
+const API_COURSES_CACHE_KEY = 'lms:courses:api-cache';
+
+type ApiCourseDetail = {
+  id: number;
+  code: string;
+  slug: string;
+  title: string;
   description: string;
-  uploadLabel: string;
-  changeLabel: string;
-  removeLabel: string;
-  emptyTitle: string;
-  preview: string | null;
-  previewAlt: string;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onClear: () => void;
-  icon: React.ComponentType<{ className?: string }>;
-  aspectClassName: string;
-  compactPreview?: boolean;
+  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;
+  bannerFileId?: number | null;
+  bannerFilename?: string | null;
+  certificateModel?: string | null;
 };
 
-function MediaUploadField({
-  label,
-  description,
-  uploadLabel,
-  changeLabel,
-  removeLabel,
-  emptyTitle,
-  preview,
-  previewAlt,
-  inputRef,
-  onInputChange,
-  onClear,
-  icon: Icon,
-  aspectClassName,
-  compactPreview = false,
-}: MediaUploadFieldProps) {
-  return (
-    <Field>
-      <FieldLabel>{label}</FieldLabel>
-      <FieldDescription>{description}</FieldDescription>
-      <input
-        ref={inputRef}
-        type="file"
-        accept="image/*"
-        className="hidden"
-        onChange={onInputChange}
-      />
-      <div className="rounded-xl border border-border/70 bg-muted/20 p-4">
-        <div
-          className={
-            compactPreview
-              ? 'flex flex-col gap-4 sm:flex-row'
-              : 'flex flex-col gap-4'
-          }
-        >
-          <div
-            className={[
-              'overflow-hidden rounded-xl border border-dashed border-border/80 bg-background',
-              compactPreview ? 'w-full shrink-0 sm:w-28' : 'w-full',
-            ].join(' ')}
-          >
-            {preview ? (
-              <img
-                src={preview}
-                alt={previewAlt}
-                className={`${aspectClassName} w-full object-cover`}
-              />
-            ) : (
-              <div
-                className={`${aspectClassName} flex w-full flex-col items-center justify-center gap-2 px-4 text-center`}
-              >
-                <div className="flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground">
-                  <Icon className="size-5" />
-                </div>
-                <div className="space-y-1">
-                  <p className="text-sm font-medium">{emptyTitle}</p>
-                  <p className="text-xs text-muted-foreground">{uploadLabel}</p>
-                </div>
-              </div>
-            )}
-          </div>
+type ApiCategory = {
+  id: number;
+  slug: string;
+  name: string;
+};
 
-          <div className="flex min-w-0 flex-1 flex-col justify-between gap-3">
-            <div className="space-y-1">
-              <p className="text-sm font-medium text-foreground">{label}</p>
-              <p className="text-sm text-muted-foreground">{description}</p>
-            </div>
+type ApiCategoryList = {
+  data: ApiCategory[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
 
-            <div className="flex flex-col gap-2 sm:flex-row">
-              <Button
-                type="button"
-                variant={preview ? 'outline' : 'default'}
-                className="w-full gap-2 sm:w-auto"
-                onClick={() => inputRef.current?.click()}
-              >
-                <Upload className="size-4" />
-                {preview ? changeLabel : uploadLabel}
-              </Button>
-              {preview && (
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="w-full gap-2 text-destructive hover:text-destructive sm:w-auto"
-                  onClick={onClear}
-                >
-                  <XCircle className="size-4" />
-                  {removeLabel}
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </Field>
-  );
-}
+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';
+};
 
-// ── Navigation ──────────────────────────────────────────────────────────────────
+type ApiCertificateTemplateList = {
+  data: ApiCertificateTemplate[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage?: number;
+};
 
-const NAV_ITEMS = [
-  { label: 'Dashboard', href: '/', icon: LayoutDashboard },
-  { label: 'Cursos', href: '/cursos', icon: BookOpen },
-  { label: 'Turmas', href: '/turmas', icon: Users },
-  { label: 'Exames', href: '/exames', icon: FileCheck },
-  { label: 'Formacoes', href: '/formacoes', icon: GraduationCap },
-  { label: 'Relatorios', href: '/relatorios', icon: BarChart3 },
-];
+type Locale = {
+  id?: number;
+  code: string;
+  name: string;
+};
 
-// ── Schema ──────────────────────────────────────────────────────────────────────
+type CursoDetailView = {
+  id: number;
+  codigo: string;
+  nomeInterno: string;
+  tituloComercial: string;
+  descricaoPublica: string;
+  nivel: CourseEditFormValues['nivel'];
+  status: CourseEditFormValues['status'];
+  tipoOferta: CourseEditFormValues['tipoOferta'];
+  categorias: string[];
+  primaryColor: string;
+  secondaryColor: string;
+  instrutores: string[];
+  preRequisitos: string;
+  modeloCertificado: string;
+  certificado: boolean;
+  destaque: boolean;
+  listado: boolean;
+  objetivos: string;
+  publicoAlvo: string;
+  totalAlunos: number;
+  conclusaoMedia: number;
+  totalAulas: number;
+  totalSessoes: number;
+  certificadosEmitidos: number;
+};
 
 function getCursoEditSchema(t: (key: string) => string) {
   return z.object({
     codigo: z
       .string()
+      .trim()
       .min(2, t('validation.codeMin'))
       .max(16, t('validation.codeMax'))
-      .regex(/^[A-Z0-9-]+$/i, t('validation.codeFormat')),
-    nomeInterno: z.string().min(3, t('validation.internalNameMin')),
-    tituloComercial: z.string().min(3, t('validation.titleMin')),
-    descricaoPublica: z.string().min(10, t('validation.descriptionMin')),
-    nivel: z.enum(['iniciante', 'intermediario', 'avancado'], {
-      errorMap: () => ({ message: t('validation.levelRequired') }),
-    }),
-    status: z.enum(['ativo', 'rascunho', 'arquivado'], {
-      errorMap: () => ({ message: t('validation.statusRequired') }),
-    }),
+      .regex(/^[A-Za-z0-9-]+$/, t('validation.codeFormat')),
+    nomeInterno: z.string().trim().min(3, t('validation.internalNameMin')),
+    tituloComercial: z.string().trim().min(3, t('validation.titleMin')),
+    descricaoPublica: z.string().trim().min(10, t('validation.descriptionMin')),
+    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()).min(1, t('validation.categoryRequired')),
-    instrutores: z.array(z.string()),
-    preRequisitos: z.string(),
-    modeloCertificado: z.string(),
-    destaque: z.boolean(),
-    certificado: z.boolean(),
-    listado: z.boolean(),
+    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),
   });
 }
 
-type CursoEditForm = z.infer<ReturnType<typeof getCursoEditSchema>>;
-
-// ── Constants ───────────────────────────────────────────────────────────────────
-
-function getCategorias(t: (key: string) => string) {
-  return [
-    t('categories.technology'),
-    t('categories.design'),
-    t('categories.management'),
-    t('categories.marketing'),
-    t('categories.finance'),
-    t('categories.health'),
-    t('categories.languages'),
-    t('categories.law'),
-  ];
-}
-
 function getNiveis(t: (key: string) => string) {
   return [
     { value: 'iniciante', label: t('levels.beginner') },
@@ -264,88 +197,171 @@ function getStatusOptions(t: (key: string) => string) {
   ];
 }
 
-function getStatusMap(
-  t: (key: string) => string
-): Record<
-  string,
-  { label: string; variant: 'default' | 'secondary' | 'outline' }
-> {
-  return {
-    ativo: { label: t('status.active'), variant: 'default' },
-    rascunho: { label: t('status.draft'), variant: 'secondary' },
-    arquivado: { label: t('status.archived'), variant: 'outline' },
-  };
+function getOfferingTypeOptions(t: (key: string) => string) {
+  return [
+    {
+      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;
 }
 
-const INSTRUTORES = [
-  { id: 'inst-1', nome: 'Ana Paula Mendes' },
-  { id: 'inst-2', nome: 'Carlos Ferreira' },
-  { id: 'inst-3', nome: 'Juliana Santos' },
-  { id: 'inst-4', nome: 'Roberto Lima' },
-  { id: 'inst-5', nome: 'Mariana Costa' },
-  { id: 'inst-6', nome: 'Pedro Almeida' },
-];
+function normalizeEnumValue(value?: string | null) {
+  return String(value ?? '')
+    .trim()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase();
+}
 
-function getModelosCertificado(t: (key: string) => string) {
-  return [
-    { value: 'padrao', label: t('certificateModels.standard') },
-    { value: 'premium', label: t('certificateModels.premium') },
-    { value: 'minimalista', label: t('certificateModels.minimalist') },
-    { value: 'tecnologia', label: t('certificateModels.technology') },
-    { value: 'corporativo', label: t('certificateModels.corporate') },
-  ];
+function toPtLevel(level: ApiCourseDetail['level']): CourseEditFormValues['nivel'] {
+  const normalized = normalizeEnumValue(level);
+  if (normalized === 'beginner' || normalized === 'iniciante') return 'iniciante';
+  if (normalized === 'intermediate' || normalized === 'intermediario') {
+    return 'intermediario';
+  }
+  return 'avancado';
 }
 
-// ── Mock Data ───────────────────────────────────────────────────────────────────
-
-const MOCK_CURSO = {
-  id: 1,
-  codigo: 'REACT-ADV',
-  nomeInterno: 'react-avancado',
-  tituloComercial: 'React Avancado',
-  descricaoPublica:
-    'Curso completo de React com hooks, context e patterns avancados para aplicacoes modernas. Aprenda a construir interfaces performaticas e escalaveis com as melhores praticas do mercado.',
-  nivel: 'avancado' as const,
-  status: 'ativo' as const,
-  categorias: ['Tecnologia'],
-  instrutores: ['inst-1', 'inst-3'],
-  preRequisitos: 'JavaScript ES6+, HTML/CSS basico, React Fundamentals',
-  modeloCertificado: 'premium',
-  destaque: true,
-  certificado: true,
-  listado: true,
-  // KPIs
-  totalAlunos: 245,
-  conclusaoMedia: 78,
-  totalAulas: 48,
-  totalSessoes: 96,
-  certificadosEmitidos: 191,
-};
+function toApiLevel(level: CourseEditFormValues['nivel']) {
+  if (level === 'iniciante') return 'beginner';
+  if (level === 'intermediario') return 'intermediate';
+  return 'advanced';
+}
 
-const progressData = [
-  { modulo: 'Mod 1', progresso: 95 },
-  { modulo: 'Mod 2', progresso: 88 },
-  { modulo: 'Mod 3', progresso: 82 },
-  { modulo: 'Mod 4', progresso: 74 },
-  { modulo: 'Mod 5', progresso: 68 },
-  { modulo: 'Mod 6', progresso: 55 },
-  { modulo: 'Mod 7', progresso: 42 },
-  { modulo: 'Mod 8', progresso: 31 },
-];
-
-// ── Animations ──────────────────────────────────────────────────────────────────
-
-const stagger = {
-  hidden: {},
-  show: { transition: { staggerChildren: 0.06 } },
-};
+function toPtStatus(status: ApiCourseDetail['status']): CourseEditFormValues['status'] {
+  const normalized = normalizeEnumValue(status);
+  if (normalized === 'published' || normalized === 'active' || normalized === 'ativo') {
+    return 'ativo';
+  }
+  if (normalized === 'archived' || normalized === 'arquivado') {
+    return 'arquivado';
+  }
+  return 'rascunho';
+}
 
-const fadeUp = {
-  hidden: { opacity: 0, y: 16 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.35 } },
-};
+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 normalized = normalizeEnumValue(value);
+  if (normalized === 'scheduled' || normalized === 'agendado') {
+    return 'agendado';
+  }
+  if (normalized === 'blended' || normalized === '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 clearCoursesListCache() {
+  if (typeof window === 'undefined') return;
+  window.localStorage.removeItem(API_COURSES_CACHE_KEY);
+}
+
+function getInstructorAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : null;
+}
+
+function mapApiCourseToView(course: ApiCourseDetail): CursoDetailView {
+  return {
+    id: course.id,
+    codigo: course.code,
+    nomeInterno: course.slug,
+    tituloComercial: course.title,
+    descricaoPublica: course.description ?? '',
+    nivel: toPtLevel(course.level),
+    status: toPtStatus(course.status),
+    tipoOferta: toPtOfferingType(course.offeringType),
+    categorias: course.categories ?? [],
+    primaryColor: course.primaryColor || '#1D4ED8',
+    secondaryColor: course.secondaryColor || '#111827',
+    instrutores: (course.instructorIds ?? []).map(String),
+    preRequisitos: course.requirements ?? '',
+    modeloCertificado: course.certificateModel ?? '',
+    certificado: course.hasCertificate ?? false,
+    destaque: course.isFeatured ?? false,
+    listado: course.isListed ?? false,
+    objetivos: course.objectives ?? '',
+    publicoAlvo: course.targetAudience ?? '',
+    totalAlunos: course.enrollmentCount ?? 0,
+    conclusaoMedia: course.averageCompletion ?? 0,
+    totalAulas: course.lessonCount ?? 0,
+    totalSessoes: course.sessionCount ?? 0,
+    certificadosEmitidos: course.certificatesIssued ?? 0,
+  };
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <Skeleton key={index} className="h-24 rounded-2xl" />
+        ))}
+      </div>
 
-// ── Component ───────────────────────────────────────────────────────────────────
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
+        <div className="space-y-6">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <Skeleton key={index} className="h-64 rounded-2xl" />
+          ))}
+        </div>
+        <div className="space-y-6">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <Skeleton key={index} className="h-56 rounded-2xl" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
 
 export default function CursoEditPage({
   params,
@@ -353,843 +369,696 @@ export default function CursoEditPage({
   params: Promise<{ id: string }>;
 }) {
   const { id } = use(params);
-  const pathname = usePathname();
   const router = useRouter();
   const t = useTranslations('lms.CursoEditPage');
+  const { request, currentLocaleCode, locales } = useApp();
 
-  const CATEGORIAS = getCategorias(t);
-  const NIVEIS = getNiveis(t);
-  const STATUS_OPTIONS = getStatusOptions(t);
-  const STATUS_MAP = getStatusMap(t);
-  const MODELOS_CERTIFICADO = getModelosCertificado(t);
-
-  const [loading, setLoading] = useState(true);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
-
-  // File uploads (client-side preview only)
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [instructorSheetOpen, setInstructorSheetOpen] = useState(false);
   const [logoPreview, setLogoPreview] = useState<string | null>(null);
   const [bannerPreview, setBannerPreview] = useState<string | null>(null);
-  const logoInputRef = useRef<HTMLInputElement>(null);
-  const bannerInputRef = useRef<HTMLInputElement>(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('');
 
-  const form = useForm<CursoEditForm>({
+  const form = useForm<CourseEditFormValues>({
     resolver: zodResolver(getCursoEditSchema(t)),
     defaultValues: {
       codigo: '',
       nomeInterno: '',
       tituloComercial: '',
       descricaoPublica: '',
+      objetivos: '',
+      publicoAlvo: '',
       nivel: 'iniciante',
       status: 'rascunho',
+      tipoOferta: 'sob_demanda',
       categorias: [],
+      primaryColor: '#1D4ED8',
+      secondaryColor: '#111827',
       instrutores: [],
       preRequisitos: '',
       modeloCertificado: '',
+      certificado: false,
       destaque: false,
-      certificado: true,
       listado: false,
     },
   });
 
-  // Simulate loading + populate form
+  const NIVEIS = useMemo(() => getNiveis(t), [t]);
+  const STATUS_OPTIONS = useMemo(() => getStatusOptions(t), [t]);
+  const OFFERING_TYPE_OPTIONS = useMemo(() => getOfferingTypeOptions(t), [t]);
+
+  const {
+    data: apiCourse,
+    isLoading,
+    isFetching,
+    refetch: refetchCourse,
+  } = useQuery<ApiCourseDetail>({
+    queryKey: ['lms-course-detail', id],
+    queryFn: async () => {
+      const response = await request<ApiCourseDetail>({
+        url: `/lms/courses/${id}`,
+        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,
+    },
+  });
+
+  useEffect(() => {
+    void refetchCourse();
+  }, [refetchCourse]);
+
+  const categoryOptions = useMemo(() => {
+    const serverOptions = (categoryListData?.data ?? [])
+      .filter((item) => !!item.slug)
+      .map((item) => ({
+        value: item.slug,
+        label: item.name || item.slug,
+      }));
+
+    const merged = [...serverOptions, ...createdCategoryOptions];
+    return merged.filter(
+      (item, index, array) =>
+        array.findIndex((candidate) => candidate.value === item.value) === index
+    );
+  }, [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}`,
+    }));
+
+    const merged = [...fromCourse, ...fromDirectory];
+    return merged.filter(
+      (item, index, array) =>
+        array.findIndex((candidate) => candidate.value === item.value) === index
+    );
+  }, [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,
+    }));
+
+    const merged = [...serverOptions, ...createdTemplateOptions];
+    return merged.filter(
+      (item, index, array) =>
+        array.findIndex((candidate) => candidate.value === item.value) === index
+    );
+  }, [certificateTemplateData, createdTemplateOptions]);
+
+  const cursoData = useMemo(
+    () => (apiCourse ? mapApiCourseToView(apiCourse) : null),
+    [apiCourse]
+  );
+
   useEffect(() => {
-    const t = setTimeout(() => {
-      form.reset({
-        codigo: MOCK_CURSO.codigo,
-        nomeInterno: MOCK_CURSO.nomeInterno,
-        tituloComercial: MOCK_CURSO.tituloComercial,
-        descricaoPublica: MOCK_CURSO.descricaoPublica,
-        nivel: MOCK_CURSO.nivel,
-        status: MOCK_CURSO.status,
-        categorias: MOCK_CURSO.categorias,
-        instrutores: MOCK_CURSO.instrutores,
-        preRequisitos: MOCK_CURSO.preRequisitos,
-        modeloCertificado: MOCK_CURSO.modeloCertificado,
-        destaque: MOCK_CURSO.destaque,
-        certificado: MOCK_CURSO.certificado,
-        listado: MOCK_CURSO.listado,
+    if (!apiCourse) return;
+
+    const nextCertificateModel =
+      apiCourse.certificateModel ?? persistedCertificateModel ?? '';
+
+    form.reset({
+      codigo: apiCourse.code,
+      nomeInterno: apiCourse.slug,
+      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, form, persistedCertificateModel]);
+
+  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 and keep file actions available.
+        }
+      })();
+    });
+  }, [apiCourse?.bannerFileId, apiCourse?.logoFileId, request]);
+
+  async function openUploadedFile(fileId?: number | null) {
+    if (!fileId) return;
+
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/open/${fileId}`,
+        method: 'PUT',
       });
-      setLoading(false);
-    }, 800);
-    return () => clearTimeout(t);
-  }, [form]);
 
-  // ── File upload handlers ─────────────────────────────────────────────────────
+      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'));
+    }
+  }
 
-  function handleFileSelect(
-    e: React.ChangeEvent<HTMLInputElement>,
-    setter: (url: string | null) => void
+  async function handleFileSelect(
+    event: ChangeEvent<HTMLInputElement>,
+    setter: (value: string | null) => void,
+    type: 'logo' | 'banner'
   ) {
-    const file = e.target.files?.[0];
+    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 url = URL.createObjectURL(file);
-    setter(url);
-    toast.success(t('toasts.fileSelected', { name: file.name }));
+
+    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/${id}`,
+        method: 'PATCH',
+        data: type === 'logo' ? { logoFileId: fileId } : { bannerFileId: fileId },
+      });
+
+      clearCoursesListCache();
+      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 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;
+    }
   }
 
-  // ── Form submit ──────────────────────────────────────────────────────────────
+  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;
+    }
 
-  async function onSubmit(data: CursoEditForm) {
+    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;
+    }
+  }
+
+  async function onSubmit(data: CourseEditFormValues) {
     setSaving(true);
-    await new Promise((r) => setTimeout(r, 800));
-    setSaving(false);
-    toast.success(t('toasts.courseUpdated'));
-    console.log('Dados salvos:', data);
+
+    try {
+      await request({
+        url: `/lms/courses/${id}`,
+        method: 'PATCH',
+        data: {
+          code: data.codigo.trim().toUpperCase(),
+          slug: data.nomeInterno.trim(),
+          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((item) => Number(item)),
+        },
+      });
+
+      setPersistedCertificateModel(data.modeloCertificado || '');
+      clearCoursesListCache();
+      toast.success(t('toasts.courseUpdated'));
+      await refetchCourse();
+    } finally {
+      setSaving(false);
+    }
   }
 
-  // ── Delete ───────────────────────────────────────────────────────────────────
+  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);
-    await new Promise((r) => setTimeout(r, 600));
-    setDeleting(false);
-    setDeleteDialogOpen(false);
-    toast.success(t('toasts.courseDeleted'));
-    router.push('/cursos');
+
+    try {
+      await request({
+        url: `/lms/courses/${id}`,
+        method: 'DELETE',
+      });
+
+      clearCoursesListCache();
+      setDeleteDialogOpen(false);
+      toast.success(t('toasts.courseDeleted'));
+      router.push('/lms/courses');
+    } finally {
+      setDeleting(false);
+    }
   }
 
-  // ── Render ───────────────────────────────────────────────────────────────────
+  const handleNewStructure = () => {
+    router.push(`/lms/courses/${id}/structure`);
+  };
+
+  const handleManageClasses = () => {
+    router.push(`/lms/classes?courseId=${id}`);
+  };
+
+  const loading = isLoading || isFetching;
 
   return (
     <Page>
       <PageHeader
-        title={` ${MOCK_CURSO.tituloComercial}`}
+        title={cursoData?.tituloComercial ?? ''}
         description={t('pageHeader.description', {
-          id: id,
-          creator: 'Ana Paula Mendes',
+          id,
+          creator: '-',
         })}
         breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.courses'), href: '/lms/courses' },
+          { label: t('breadcrumbs.editCourse') },
+        ]}
+        actions={[
           {
-            label: t('breadcrumbs.home'),
-            href: '/',
-          },
-          {
-            label: t('breadcrumbs.courses'),
-            href: '/courses',
+            label: t('actions.goToStructure'),
+            onClick: handleNewStructure,
+            variant: 'default',
           },
           {
-            label: t('breadcrumbs.editCourse'),
+            label: t('actions.manageClasses'),
+            onClick: handleManageClasses,
+            variant: 'outline',
           },
         ]}
-        actions={
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              className="gap-2 shadow-none"
-              onClick={() => router.push('/lms/classes')}
-            >
-              <Users className="size-4" />
-              {t('actions.manageClasses')}
-            </Button>
-            <Button
-              variant="outline"
-              className="gap-2 shadow-none"
-              onClick={() => router.push('/lms/reports')}
-            >
-              <BarChart3 className="size-4" />
-              {t('actions.viewReports')}
-            </Button>
-            <Button
-              className="gap-2"
-              onClick={() => router.push(`/lms/courses/${id}/structure`)}
-            >
-              <Layers className="size-4" />
-              {t('actions.goToStructure')}
-            </Button>
-          </div>
-        }
       />
 
-      {/* ── Main ───────────────────────────────────────────────────────────── */}
-      <div>
-        {loading ? (
-          <LoadingSkeleton />
-        ) : (
-          <motion.div initial="hidden" animate="show" variants={stagger}>
-            {/* Breadcrumb */}
-            {/*<motion.div variants={fadeUp} className="mb-6">
-              <Link
-                href="/cursos"
-                className="inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
-              >
-                <ArrowLeft className="size-4" />
-                Voltar para Cursos
-              </Link>
-            </motion.div>*/}
-
-            {/* Page Header */}
-            <motion.div
-              variants={fadeUp}
-              className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
-            >
-              <div className="flex-1">
-                <div className="mb-2 flex flex-wrap items-center gap-2">
-                  <Badge variant="outline" className="font-mono text-xs">
-                    {MOCK_CURSO.codigo}
-                  </Badge>
-                  <Badge
-                    variant={
-                      STATUS_MAP[MOCK_CURSO.status]?.variant || 'default'
-                    }
-                  >
-                    {STATUS_MAP[MOCK_CURSO.status]?.label || MOCK_CURSO.status}
-                  </Badge>
-                  {MOCK_CURSO.destaque && (
-                    <Badge
-                      variant="secondary"
-                      className="border-amber-200 bg-amber-50 text-amber-700"
-                    >
-                      {t('badges.featured')}
-                    </Badge>
-                  )}
-                </div>
+      {loading ? (
+        <LoadingSkeleton />
+      ) : !cursoData ? (
+        <EmptyState
+          icon={<BookOpen className="size-12 text-muted-foreground/40" />}
+          title="Curso não encontrado"
+          description={`Não foi possível localizar o curso com id ${id}.`}
+          actionLabel="Voltar para cursos"
+          onAction={() => router.push('/lms/courses')}
+          className="py-20"
+        />
+      ) : (
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <CourseSummaryCard course={cursoData} />
+
+            <div className="grid gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
+              <div className="space-y-6">
+                <CourseMainInfoCard form={form} t={t} />
+                <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} />
               </div>
-            </motion.div>
 
-            {/* ── KPI Cards ──────────────────────────────────────────────────── */}
-            <motion.div
-              variants={fadeUp}
-              className="mb-8 grid grid-cols-2 gap-4 lg:grid-cols-5"
-            >
-              {[
-                {
-                  label: 'Total Alunos',
-                  value: MOCK_CURSO.totalAlunos.toLocaleString('pt-BR'),
-                  icon: Users,
-                  color: 'bg-foreground text-background',
-                },
-                {
-                  label: 'Conclusao Media',
-                  value: `${MOCK_CURSO.conclusaoMedia}%`,
-                  icon: Percent,
-                  color: 'bg-emerald-100 text-emerald-700',
-                },
-                {
-                  label: 'Total de Aulas',
-                  value: MOCK_CURSO.totalAulas.toString(),
-                  icon: Video,
-                  color: 'bg-blue-100 text-blue-700',
-                },
-                {
-                  label: 'Sessoes',
-                  value: MOCK_CURSO.totalSessoes.toString(),
-                  icon: CalendarDays,
-                  color: 'bg-violet-100 text-violet-700',
-                },
-                {
-                  label: 'Certificados',
-                  value:
-                    MOCK_CURSO.certificadosEmitidos.toLocaleString('pt-BR'),
-                  icon: Award,
-                  color: 'bg-amber-100 text-amber-700',
-                },
-              ].map((kpi) => (
-                <motion.div
-                  key={kpi.label}
-                  whileHover={{ y: -2 }}
-                  transition={{ duration: 0.2 }}
-                >
-                  <Card className="transition-shadow hover:shadow-md">
-                    <CardContent className="flex items-center gap-3 p-4">
-                      <div
-                        className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${kpi.color}`}
-                      >
-                        <kpi.icon className="size-5" />
-                      </div>
-                      <div className="min-w-0">
-                        <p className="truncate text-xs text-muted-foreground">
-                          {kpi.label}
-                        </p>
-                        <p className="text-xl font-bold tabular-nums">
-                          {kpi.value}
-                        </p>
-                      </div>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-              ))}
-            </motion.div>
-
-            {/* ── Progress Chart ──────────────────────────────────────────────── */}
-            <motion.div variants={fadeUp} className="mb-8">
-              <Card>
-                <CardHeader>
-                  <div className="flex items-center gap-2">
-                    <TrendingUp className="size-4 text-muted-foreground" />
-                    <CardTitle className="text-sm font-semibold">
-                      {t('chart.title')}
-                    </CardTitle>
-                  </div>
-                  <CardDescription>{t('chart.description')}</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="h-64">
-                    <ResponsiveContainer width="100%" height="100%">
-                      <BarChart
-                        data={progressData}
-                        layout="vertical"
-                        margin={{ top: 0, right: 20, left: 0, bottom: 0 }}
-                      >
-                        <CartesianGrid
-                          strokeDasharray="3 3"
-                          horizontal={false}
-                          stroke="oklch(0.922 0 0)"
-                        />
-                        <XAxis
-                          type="number"
-                          domain={[0, 100]}
-                          tick={{ fontSize: 12, fill: 'oklch(0.556 0 0)' }}
-                          tickFormatter={(v) => `${v}%`}
-                        />
-                        <YAxis
-                          dataKey="modulo"
-                          type="category"
-                          tick={{ fontSize: 12, fill: 'oklch(0.556 0 0)' }}
-                          width={50}
-                        />
-                        <Tooltip
-                          formatter={(value: number) => [
-                            `${value}%`,
-                            t('chart.progress'),
-                          ]}
-                          contentStyle={{
-                            borderRadius: 8,
-                            border: '1px solid oklch(0.922 0 0)',
-                            boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
-                            fontSize: 12,
-                          }}
-                        />
-                        <defs>
-                          <linearGradient
-                            id="colorProgresso"
-                            x1="0"
-                            y1="0"
-                            x2="1"
-                            y2="0"
-                          >
-                            <stop offset="0%" stopColor="#3b82f6" />
-                            <stop offset="100%" stopColor="#60a5fa" />
-                          </linearGradient>
-                        </defs>
-                        <Bar
-                          dataKey="progresso"
-                          fill="url(#colorProgresso)"
-                          radius={[0, 6, 6, 0]}
-                          maxBarSize={32}
-                        />
-                      </BarChart>
-                    </ResponsiveContainer>
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-
-            {/* ── Form ───────────────────────────────────────────────────────── */}
-            <motion.div variants={fadeUp}>
-              <Card>
-                <CardHeader>
-                  <CardTitle className="text-base font-semibold">
-                    {t('form.title')}
-                  </CardTitle>
-                  <CardDescription>{t('form.description')}</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <form
-                    onSubmit={form.handleSubmit(onSubmit)}
-                    className="flex flex-col gap-6"
-                  >
-                    {/* ── Row: Codigo + Nome Interno ────────────────────────── */}
-                    <div className="grid gap-4 sm:grid-cols-2">
-                      <Field data-invalid={!!form.formState.errors.codigo}>
-                        <FieldLabel htmlFor="codigo">
-                          <Hash className="size-3.5 text-muted-foreground" />
-                          {t('form.fields.code.label')}
-                        </FieldLabel>
-                        <Input
-                          id="codigo"
-                          placeholder={t('form.fields.code.placeholder')}
-                          className="uppercase"
-                          {...form.register('codigo')}
-                        />
-                        {form.formState.errors.codigo && (
-                          <FieldError>
-                            {form.formState.errors.codigo.message}
-                          </FieldError>
-                        )}
-                        <FieldDescription>
-                          {t('form.fields.code.description')}
-                        </FieldDescription>
-                      </Field>
-
-                      <Field data-invalid={!!form.formState.errors.nomeInterno}>
-                        <FieldLabel htmlFor="nomeInterno">
-                          {t('form.fields.internalName.label')}
-                        </FieldLabel>
-                        <Input
-                          id="nomeInterno"
-                          placeholder={t(
-                            'form.fields.internalName.placeholder'
-                          )}
-                          {...form.register('nomeInterno')}
-                        />
-                        {form.formState.errors.nomeInterno && (
-                          <FieldError>
-                            {form.formState.errors.nomeInterno.message}
-                          </FieldError>
-                        )}
-                        <FieldDescription>
-                          {t('form.fields.internalName.description')}
-                        </FieldDescription>
-                      </Field>
-                    </div>
-
-                    {/* ── Titulo Comercial ──────────────────────────────────── */}
-                    <Field
-                      data-invalid={!!form.formState.errors.tituloComercial}
-                    >
-                      <FieldLabel htmlFor="tituloComercial">
-                        {t('form.fields.title.label')}
-                      </FieldLabel>
-                      <Input
-                        id="tituloComercial"
-                        placeholder={t('form.fields.title.placeholder')}
-                        {...form.register('tituloComercial')}
-                      />
-                      {form.formState.errors.tituloComercial && (
-                        <FieldError>
-                          {form.formState.errors.tituloComercial.message}
-                        </FieldError>
-                      )}
-                    </Field>
-
-                    {/* ── Descricao Publica ─────────────────────────────────── */}
-                    <Field
-                      data-invalid={!!form.formState.errors.descricaoPublica}
-                    >
-                      <FieldLabel htmlFor="descricaoPublica">
-                        {t('form.fields.description.label')}
-                      </FieldLabel>
-                      <Textarea
-                        id="descricaoPublica"
-                        placeholder={t('form.fields.description.placeholder')}
-                        rows={4}
-                        {...form.register('descricaoPublica')}
-                      />
-                      {form.formState.errors.descricaoPublica && (
-                        <FieldError>
-                          {form.formState.errors.descricaoPublica.message}
-                        </FieldError>
-                      )}
-                      <FieldDescription>
-                        {t('form.fields.description.description')}
-                      </FieldDescription>
-                    </Field>
-
-                    {/* ── Row: Nivel + Status ───────────────────────────────── */}
-                    <div className="grid gap-4 sm:grid-cols-2">
-                      <Field data-invalid={!!form.formState.errors.nivel}>
-                        <FieldLabel>{t('form.fields.level.label')}</FieldLabel>
-                        <Controller
-                          control={form.control}
-                          name="nivel"
-                          render={({ field }) => (
-                            <Select
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <SelectTrigger>
-                                <SelectValue
-                                  placeholder={t(
-                                    'form.fields.level.placeholder'
-                                  )}
-                                />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {NIVEIS.map((n) => (
-                                  <SelectItem key={n.value} value={n.value}>
-                                    {n.label}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          )}
-                        />
-                        {form.formState.errors.nivel && (
-                          <FieldError>
-                            {form.formState.errors.nivel.message}
-                          </FieldError>
-                        )}
-                      </Field>
-
-                      <Field data-invalid={!!form.formState.errors.status}>
-                        <FieldLabel>{t('form.fields.status.label')}</FieldLabel>
-                        <Controller
-                          control={form.control}
-                          name="status"
-                          render={({ field }) => (
-                            <Select
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <SelectTrigger>
-                                <SelectValue
-                                  placeholder={t(
-                                    'form.fields.status.placeholder'
-                                  )}
-                                />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {STATUS_OPTIONS.map((s) => (
-                                  <SelectItem key={s.value} value={s.value}>
-                                    {s.label}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          )}
-                        />
-                        {form.formState.errors.status && (
-                          <FieldError>
-                            {form.formState.errors.status.message}
-                          </FieldError>
-                        )}
-                      </Field>
-                    </div>
-
-                    <Separator />
-
-                    {/* ── Categorias ────────────────────────────────────────── */}
-                    <Field data-invalid={!!form.formState.errors.categorias}>
-                      <FieldLabel>
-                        {t('form.fields.categories.label')}
-                      </FieldLabel>
-                      <FieldDescription>
-                        {t('form.fields.categories.description')}
-                      </FieldDescription>
-                      <Controller
-                        control={form.control}
-                        name="categorias"
-                        render={({ field }) => (
-                          <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-4">
-                            {CATEGORIAS.map((cat) => {
-                              const checked = field.value.includes(cat);
-                              return (
-                                <label
-                                  key={cat}
-                                  className="flex cursor-pointer items-center gap-2.5 rounded-md border px-3 py-2.5 text-sm transition-colors hover:bg-muted/50 has-checked:border-foreground has-checked:bg-muted/50"
-                                >
-                                  <Checkbox
-                                    checked={checked}
-                                    onCheckedChange={(isChecked) => {
-                                      if (isChecked) {
-                                        field.onChange([...field.value, cat]);
-                                      } else {
-                                        field.onChange(
-                                          field.value.filter(
-                                            (v: string) => v !== cat
-                                          )
-                                        );
-                                      }
-                                    }}
-                                  />
-                                  {cat}
-                                </label>
-                              );
-                            })}
-                          </div>
-                        )}
-                      />
-                      {form.formState.errors.categorias && (
-                        <FieldError>
-                          {form.formState.errors.categorias.message}
-                        </FieldError>
-                      )}
-                    </Field>
-
-                    <Separator />
-
-                    {/* ── Instrutores ───────────────────────────────────────── */}
-                    <Field>
-                      <FieldLabel>
-                        {t('form.fields.instructors.label')}
-                      </FieldLabel>
-                      <FieldDescription>
-                        {t('form.fields.instructors.description')}
-                      </FieldDescription>
-                      <Controller
-                        control={form.control}
-                        name="instrutores"
-                        render={({ field }) => (
-                          <div className="flex flex-col gap-2">
-                            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
-                              {INSTRUTORES.map((inst) => {
-                                const checked = field.value.includes(inst.id);
-                                return (
-                                  <label
-                                    key={inst.id}
-                                    className="flex cursor-pointer items-center gap-2.5 rounded-md border px-3 py-2.5 text-sm transition-colors hover:bg-muted/50 has-checked:border-foreground has-checked:bg-muted/50"
-                                  >
-                                    <Checkbox
-                                      checked={checked}
-                                      onCheckedChange={(isChecked) => {
-                                        if (isChecked) {
-                                          field.onChange([
-                                            ...field.value,
-                                            inst.id,
-                                          ]);
-                                        } else {
-                                          field.onChange(
-                                            field.value.filter(
-                                              (v: string) => v !== inst.id
-                                            )
-                                          );
-                                        }
-                                      }}
-                                    />
-                                    <UserCheck className="size-3.5 text-muted-foreground" />
-                                    {inst.nome}
-                                  </label>
-                                );
-                              })}
-                            </div>
-                            {field.value.length > 0 && (
-                              <p className="text-xs text-muted-foreground">
-                                {t('form.fields.instructors.selected', {
-                                  count: field.value.length,
-                                })}
-                              </p>
-                            )}
-                          </div>
-                        )}
-                      />
-                    </Field>
-
-                    <Separator />
-
-                    {/* ── Pre-requisitos ────────────────────────────────────── */}
-                    <Field>
-                      <FieldLabel htmlFor="preRequisitos">
-                        {t('form.fields.prerequisites.label')}
-                      </FieldLabel>
-                      <Textarea
-                        id="preRequisitos"
-                        placeholder={t('form.fields.prerequisites.placeholder')}
-                        rows={2}
-                        {...form.register('preRequisitos')}
-                      />
-                      <FieldDescription>
-                        {t('form.fields.prerequisites.description')}
-                      </FieldDescription>
-                    </Field>
-
-                    <Separator />
-
-                    {/* ── Upload Logo + Banner ─────────────────────────────── */}
-                    <div className="grid gap-4 xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.25fr)]">
-                      <MediaUploadField
-                        label={t('form.fields.logo.label')}
-                        description={t('form.fields.logo.description')}
-                        uploadLabel={t('form.fields.logo.clickToUpload')}
-                        changeLabel={t('form.fields.logo.change')}
-                        removeLabel={t('form.fields.logo.remove')}
-                        emptyTitle={t('form.fields.logo.emptyTitle')}
-                        preview={logoPreview}
-                        previewAlt={t('form.fields.logo.previewAlt')}
-                        inputRef={logoInputRef}
-                        onInputChange={(e) =>
-                          handleFileSelect(e, setLogoPreview)
+              <div className="space-y-6">
+                <CourseMediaCard
+                  logoPreview={logoPreview}
+                  bannerPreview={bannerPreview}
+                  uploadingLogo={uploadingLogo}
+                  uploadingBanner={uploadingBanner}
+                  onLogoSelect={(event) =>
+                    handleFileSelect(event, setLogoPreview, 'logo')
+                  }
+                  onBannerSelect={(event) =>
+                    handleFileSelect(event, setBannerPreview, 'banner')
+                  }
+                  logoFile={
+                    apiCourse?.logoFileId
+                      ? {
+                          id: apiCourse.logoFileId,
+                          name: apiCourse.logoFilename || `#${apiCourse.logoFileId}`,
                         }
-                        onClear={() => setLogoPreview(null)}
-                        icon={ImageIcon}
-                        aspectClassName="aspect-square"
-                        compactPreview
-                      />
-
-                      <MediaUploadField
-                        label={t('form.fields.banner.label')}
-                        description={t('form.fields.banner.description')}
-                        uploadLabel={t('form.fields.banner.clickToUpload')}
-                        changeLabel={t('form.fields.banner.change')}
-                        removeLabel={t('form.fields.banner.remove')}
-                        emptyTitle={t('form.fields.banner.emptyTitle')}
-                        preview={bannerPreview}
-                        previewAlt={t('form.fields.banner.previewAlt')}
-                        inputRef={bannerInputRef}
-                        onInputChange={(e) =>
-                          handleFileSelect(e, setBannerPreview)
+                      : undefined
+                  }
+                  bannerFile={
+                    apiCourse?.bannerFileId
+                      ? {
+                          id: apiCourse.bannerFileId,
+                          name:
+                            apiCourse.bannerFilename || `#${apiCourse.bannerFileId}`,
                         }
-                        onClear={() => setBannerPreview(null)}
-                        icon={ImageIcon}
-                        aspectClassName="aspect-[16/9]"
-                      />
-                    </div>
-
-                    <Separator />
-
-                    {/* ── Modelo de Certificado ─────────────────────────────── */}
-                    <Field>
-                      <FieldLabel>
-                        {t('form.fields.certificateModel.label')}
-                      </FieldLabel>
-                      <FieldDescription>
-                        {t('form.fields.certificateModel.description')}
-                      </FieldDescription>
-                      <Controller
-                        control={form.control}
-                        name="modeloCertificado"
-                        render={({ field }) => (
-                          <Select
-                            value={field.value}
-                            onValueChange={field.onChange}
-                          >
-                            <SelectTrigger>
-                              <SelectValue
-                                placeholder={t(
-                                  'form.fields.certificateModel.placeholder'
-                                )}
-                              />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {MODELOS_CERTIFICADO.map((m) => (
-                                <SelectItem key={m.value} value={m.value}>
-                                  <div className="flex items-center gap-2">
-                                    <Award className="size-3.5 text-muted-foreground" />
-                                    {m.label}
-                                  </div>
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        )}
-                      />
-                    </Field>
-
-                    <Separator />
-
-                    {/* ── Flags ─────────────────────────────────────────────── */}
-                    <div className="flex flex-col gap-3">
-                      <p className="text-sm font-medium">
-                        {t('form.flags.title')}
-                      </p>
-                      <div className="grid gap-3 sm:grid-cols-3">
-                        <Controller
-                          control={form.control}
-                          name="destaque"
-                          render={({ field }) => (
-                            <div className="flex items-center justify-between rounded-md border px-4 py-3">
-                              <div className="flex flex-col gap-0.5">
-                                <span className="text-sm font-medium">
-                                  {t('form.flags.featured.label')}
-                                </span>
-                                <span className="text-xs text-muted-foreground">
-                                  {t('form.flags.featured.description')}
-                                </span>
-                              </div>
-                              <Switch
-                                checked={field.value}
-                                onCheckedChange={field.onChange}
-                              />
-                            </div>
-                          )}
-                        />
-                        <Controller
-                          control={form.control}
-                          name="certificado"
-                          render={({ field }) => (
-                            <div className="flex items-center justify-between rounded-md border px-4 py-3">
-                              <div className="flex flex-col gap-0.5">
-                                <span className="text-sm font-medium">
-                                  {t('form.flags.certificate.label')}
-                                </span>
-                                <span className="text-xs text-muted-foreground">
-                                  {t('form.flags.certificate.description')}
-                                </span>
-                              </div>
-                              <Switch
-                                checked={field.value}
-                                onCheckedChange={field.onChange}
-                              />
-                            </div>
-                          )}
-                        />
-                        <Controller
-                          control={form.control}
-                          name="listado"
-                          render={({ field }) => (
-                            <div className="flex items-center justify-between rounded-md border px-4 py-3">
-                              <div className="flex flex-col gap-0.5">
-                                <span className="text-sm font-medium">
-                                  {t('form.flags.listed.label')}
-                                </span>
-                                <span className="text-xs text-muted-foreground">
-                                  {t('form.flags.listed.description')}
-                                </span>
-                              </div>
-                              <Switch
-                                checked={field.value}
-                                onCheckedChange={field.onChange}
-                              />
-                            </div>
-                          )}
-                        />
-                      </div>
-                    </div>
-
-                    <Separator />
-
-                    {/* ── Form Actions ──────────────────────────────────────── */}
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                      <Button
-                        type="button"
-                        variant="outline"
-                        className="gap-2 text-destructive hover:text-destructive"
-                        onClick={() => setDeleteDialogOpen(true)}
-                      >
-                        <Trash2 className="size-4" />
-                        {t('form.actions.deleteCourse')}
-                      </Button>
-                      <div className="flex items-center gap-2">
-                        <Button
-                          type="button"
-                          variant="outline"
-                          onClick={() => router.push('/cursos')}
-                        >
-                          {t('form.actions.cancel')}
-                        </Button>
-                        <Button
-                          type="submit"
-                          disabled={saving}
-                          className="gap-2"
-                        >
-                          {saving ? (
-                            <Loader2 className="size-4 animate-spin" />
-                          ) : (
-                            <Save className="size-4" />
-                          )}
-                          {t('form.actions.saveChanges')}
-                        </Button>
-                      </div>
-                    </div>
-                  </form>
-                </CardContent>
-              </Card>
-            </motion.div>
-          </motion.div>
-        )}
-      </div>
+                      : undefined
+                  }
+                  onOpenLogoFile={() => openUploadedFile(apiCourse?.logoFileId)}
+                  onOpenBannerFile={() => openUploadedFile(apiCourse?.bannerFileId)}
+                  t={t}
+                />
+
+                <CourseCertificateCard
+                  form={form}
+                  t={t}
+                  options={certificateOptions}
+                  onCreateTemplate={handleCreateCertificateTemplate}
+                />
+
+                <CourseFlagsCard form={form} t={t} />
+
+                <CourseDangerZoneCard
+                  t={t}
+                  onDelete={() => setDeleteDialogOpen(true)}
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-background/80 p-4 backdrop-blur sm:flex-row sm:items-center sm:justify-between">
+              <p className="text-sm text-muted-foreground">
+                Revise os vínculos e a mídia antes de salvar para evitar retrabalho.
+              </p>
+
+              <div className="flex items-center gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => router.push('/lms/courses')}
+                >
+                  {t('form.actions.cancel')}
+                </Button>
+                <Button type="submit" disabled={saving} className="gap-2">
+                  {saving ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Save className="h-4 w-4" />
+                  )}
+                  {t('form.actions.saveChanges')}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </Form>
+      )}
+
+      <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']}
+      />
 
-      {/* ── Dialog: Confirmar Exclusao ────────────────────────────────────── */}
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <DialogContent className="max-w-3xl">
           <DialogHeader>
@@ -1202,29 +1071,26 @@ export default function CursoEditPage({
                 <p>
                   {t('deleteDialog.description')}{' '}
                   <strong className="text-foreground">
-                    {MOCK_CURSO.tituloComercial}
+                    {cursoData?.tituloComercial}
                   </strong>
                   ?
                 </p>
-                {MOCK_CURSO.totalAlunos > 0 && (
-                  <div className="flex items-center gap-1.5 rounded-md bg-amber-50 px-3 py-2.5 text-xs font-medium text-amber-700">
+                {(cursoData?.totalAlunos ?? 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: MOCK_CURSO.totalAlunos,
-                        certificates: MOCK_CURSO.certificadosEmitidos,
+                        students: cursoData?.totalAlunos ?? 0,
+                        certificates: cursoData?.certificadosEmitidos ?? 0,
                       })}
                     </span>
                   </div>
-                )}
+                ) : null}
               </div>
             </DialogDescription>
           </DialogHeader>
           <DialogFooter className="gap-2">
-            <Button
-              variant="outline"
-              onClick={() => setDeleteDialogOpen(false)}
-            >
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
               {t('deleteDialog.actions.cancel')}
             </Button>
             <Button
@@ -1233,11 +1099,7 @@ export default function CursoEditPage({
               disabled={deleting}
               className="gap-2"
             >
-              {deleting ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <Trash2 className="size-4" />
-              )}
+              {deleting ? <Loader2 className="size-4 animate-spin" /> : null}
               {t('deleteDialog.actions.delete')}
             </Button>
           </DialogFooter>
@@ -1246,35 +1108,3 @@ export default function CursoEditPage({
     </Page>
   );
 }
-
-// ── Loading Skeleton ──────────────────────────────────────────────────────────
-
-function LoadingSkeleton() {
-  return (
-    <div className="flex flex-col gap-6">
-      <Skeleton className="h-4 w-32" />
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center gap-2">
-            <Skeleton className="h-5 w-24 rounded-full" />
-            <Skeleton className="h-5 w-16 rounded-full" />
-          </div>
-          <Skeleton className="h-8 w-64" />
-          <Skeleton className="h-4 w-40" />
-        </div>
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-9 w-36 rounded-md" />
-          <Skeleton className="h-9 w-36 rounded-md" />
-          <Skeleton className="h-9 w-32 rounded-md" />
-        </div>
-      </div>
-      <div className="grid grid-cols-2 gap-4 lg:grid-cols-5">
-        {Array.from({ length: 5 }).map((_, i) => (
-          <Skeleton key={i} className="h-20 rounded-xl" />
-        ))}
-      </div>
-      <Skeleton className="h-80 rounded-xl" />
-      <Skeleton className="h-[600px] rounded-xl" />
-    </div>
-  );
-}