@hed-hog/lms 0.0.268 → 0.0.270

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

@@ -0,0 +1,1237 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+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,
+  DialogDescription,
+  DialogFooter,
+  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 { Skeleton } from '@/components/ui/skeleton';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+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 { 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 { toast } from 'sonner';
+import { z } from 'zod';
+
+// ── Navigation ──────────────────────────────────────────────────────────────────
+
+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 },
+];
+
+// ── Schema ──────────────────────────────────────────────────────────────────────
+
+function getCursoEditSchema(t: (key: string) => string) {
+  return z.object({
+    codigo: z
+      .string()
+      .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') }),
+    }),
+    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(),
+  });
+}
+
+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') },
+    { value: 'intermediario', label: t('levels.intermediate') },
+    { value: 'avancado', label: t('levels.advanced') },
+  ];
+}
+
+function getStatusOptions(t: (key: string) => string) {
+  return [
+    { value: 'ativo', label: t('status.active') },
+    { value: 'rascunho', label: t('status.draft') },
+    { value: 'arquivado', label: t('status.archived') },
+  ];
+}
+
+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' },
+  };
+}
+
+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 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') },
+  ];
+}
+
+// ── 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,
+};
+
+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 } },
+};
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 16 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.35 } },
+};
+
+// ── Component ───────────────────────────────────────────────────────────────────
+
+export default function CursoEditPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  const pathname = usePathname();
+  const router = useRouter();
+  const t = useTranslations('lms.CursoEditPage');
+
+  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 [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [bannerPreview, setBannerPreview] = useState<string | null>(null);
+  const logoInputRef = useRef<HTMLInputElement>(null);
+  const bannerInputRef = useRef<HTMLInputElement>(null);
+
+  const form = useForm<CursoEditForm>({
+    resolver: zodResolver(getCursoEditSchema(t)),
+    defaultValues: {
+      codigo: '',
+      nomeInterno: '',
+      tituloComercial: '',
+      descricaoPublica: '',
+      nivel: 'iniciante',
+      status: 'rascunho',
+      categorias: [],
+      instrutores: [],
+      preRequisitos: '',
+      modeloCertificado: '',
+      destaque: false,
+      certificado: true,
+      listado: false,
+    },
+  });
+
+  // Simulate loading + populate form
+  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,
+      });
+      setLoading(false);
+    }, 800);
+    return () => clearTimeout(t);
+  }, [form]);
+
+  // ── File upload handlers ─────────────────────────────────────────────────────
+
+  function handleFileSelect(
+    e: React.ChangeEvent<HTMLInputElement>,
+    setter: (url: string | null) => void
+  ) {
+    const file = e.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 }));
+  }
+
+  // ── Form submit ──────────────────────────────────────────────────────────────
+
+  async function onSubmit(data: CursoEditForm) {
+    setSaving(true);
+    await new Promise((r) => setTimeout(r, 800));
+    setSaving(false);
+    toast.success(t('toasts.courseUpdated'));
+    console.log('Dados salvos:', data);
+  }
+
+  // ── Delete ───────────────────────────────────────────────────────────────────
+
+  async function handleDelete() {
+    setDeleting(true);
+    await new Promise((r) => setTimeout(r, 600));
+    setDeleting(false);
+    setDeleteDialogOpen(false);
+    toast.success(t('toasts.courseDeleted'));
+    router.push('/cursos');
+  }
+
+  // ── Render ───────────────────────────────────────────────────────────────────
+
+  return (
+    <Page>
+      <PageHeader
+        title={` ${MOCK_CURSO.tituloComercial}`}
+        description={t('pageHeader.description', {
+          id: id,
+          creator: 'Ana Paula Mendes',
+        })}
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('breadcrumbs.courses'),
+            href: '/courses',
+          },
+          {
+            label: t('breadcrumbs.editCourse'),
+          },
+        ]}
+        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>
+              </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 sm:grid-cols-2">
+                      {/* Logo Upload */}
+                      <Field>
+                        <FieldLabel>{t('form.fields.logo.label')}</FieldLabel>
+                        <FieldDescription>
+                          {t('form.fields.logo.description')}
+                        </FieldDescription>
+                        <input
+                          ref={logoInputRef}
+                          type="file"
+                          accept="image/*"
+                          className="hidden"
+                          onChange={(e) => handleFileSelect(e, setLogoPreview)}
+                        />
+                        {logoPreview ? (
+                          <div className="group relative overflow-hidden rounded-lg border">
+                            <img
+                              src={logoPreview}
+                              alt="Logo preview"
+                              className="aspect-square w-full object-cover"
+                            />
+                            <div className="absolute inset-0 flex items-center justify-center gap-2 bg-background/80 opacity-0 transition-opacity group-hover:opacity-100">
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => logoInputRef.current?.click()}
+                              >
+                                {t('form.fields.logo.change')}
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setLogoPreview(null)}
+                              >
+                                <XCircle className="size-4" />
+                              </Button>
+                            </div>
+                          </div>
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => logoInputRef.current?.click()}
+                            className="flex aspect-square w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
+                          >
+                            <Upload className="size-8 text-muted-foreground/50" />
+                            <span className="text-xs text-muted-foreground">
+                              {t('form.fields.logo.clickToUpload')}
+                            </span>
+                          </button>
+                        )}
+                      </Field>
+
+                      {/* Banner Upload */}
+                      <Field>
+                        <FieldLabel>{t('form.fields.banner.label')}</FieldLabel>
+                        <FieldDescription>
+                          {t('form.fields.banner.description')}
+                        </FieldDescription>
+                        <input
+                          ref={bannerInputRef}
+                          type="file"
+                          accept="image/*"
+                          className="hidden"
+                          onChange={(e) =>
+                            handleFileSelect(e, setBannerPreview)
+                          }
+                        />
+                        {bannerPreview ? (
+                          <div className="group relative overflow-hidden rounded-lg border">
+                            <img
+                              src={bannerPreview}
+                              alt="Banner preview"
+                              className="aspect-video w-full object-cover"
+                            />
+                            <div className="absolute inset-0 flex items-center justify-center gap-2 bg-background/80 opacity-0 transition-opacity group-hover:opacity-100">
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => bannerInputRef.current?.click()}
+                              >
+                                {t('form.fields.banner.change')}
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setBannerPreview(null)}
+                              >
+                                <XCircle className="size-4" />
+                              </Button>
+                            </div>
+                          </div>
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => bannerInputRef.current?.click()}
+                            className="flex aspect-video w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors hover:border-foreground/30 hover:bg-muted/50"
+                          >
+                            <ImageIcon className="size-8 text-muted-foreground/50" />
+                            <span className="text-xs text-muted-foreground">
+                              {t('form.fields.banner.clickToUpload')}
+                            </span>
+                          </button>
+                        )}
+                      </Field>
+                    </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>
+
+      {/* ── Dialog: Confirmar Exclusao ────────────────────────────────────── */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent className="max-w-3xl">
+          <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">
+                    {MOCK_CURSO.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">
+                    <AlertTriangle className="size-3.5 shrink-0" />
+                    <span>
+                      {t('deleteDialog.warning', {
+                        students: MOCK_CURSO.totalAlunos,
+                        certificates: MOCK_CURSO.certificadosEmitidos,
+                      })}
+                    </span>
+                  </div>
+                )}
+              </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" />
+              ) : (
+                <Trash2 className="size-4" />
+              )}
+              {t('deleteDialog.actions.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </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>
+  );
+}