@hed-hog/lms 0.0.306 → 0.0.310

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

@@ -0,0 +1,1827 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  CircleDot,
+  CircleOff,
+  ClipboardList,
+  Clock,
+  Download,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  File as FileIcon,
+  FileImage,
+  FileText,
+  GripVertical,
+  HelpCircle,
+  ListChecks,
+  Loader2,
+  Lock,
+  Pencil,
+  Plus,
+  Save,
+  Trash2,
+  Undo2,
+  UploadCloud,
+  Video,
+  X,
+  type LucideIcon,
+} from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { useApp } from '@hed-hog/next-app-provider';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  deleteFile,
+  uploadFile,
+} from '../_data/services/course-structure.service';
+import {
+  useDeleteLessonMutation,
+  useUpdateLessonMutation,
+} from '../_data/use-course-structure-mutations';
+import {
+  courseStructureQueryKey,
+  type CourseStructureCacheData,
+} from '../_data/use-course-structure-query';
+import { useStructureStore } from './store';
+import type {
+  LessonStatus,
+  LessonType,
+  Resource,
+  VideoProvider,
+} from './types';
+
+// ── Resource helpers ──────────────────────────────────────────────────────────
+
+function getResourceIcon(type: string): LucideIcon {
+  if (type === 'application/pdf' || type.endsWith('pdf')) return FileText;
+  if (type.startsWith('image/')) return FileImage;
+  return FileIcon;
+}
+
+function getResourceIconColor(type: string): string {
+  if (type === 'application/pdf' || type.endsWith('pdf')) return 'text-red-500';
+  if (type.startsWith('image/')) return 'text-blue-500';
+  return 'text-muted-foreground';
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// ── Config maps ───────────────────────────────────────────────────────────────
+
+const TYPE_CONFIG: Record<
+  LessonType,
+  { icon: LucideIcon; color: string; bg: string; label: string }
+> = {
+  video: {
+    icon: Video,
+    color: 'text-blue-500',
+    bg: 'bg-blue-500/10',
+    label: 'Vídeo',
+  },
+  post: {
+    icon: FileText,
+    color: 'text-emerald-500',
+    bg: 'bg-emerald-500/10',
+    label: 'Texto',
+  },
+  questao: {
+    icon: HelpCircle,
+    color: 'text-amber-500',
+    bg: 'bg-amber-500/10',
+    label: 'Quiz',
+  },
+  exercicio: {
+    icon: ClipboardList,
+    color: 'text-purple-500',
+    bg: 'bg-purple-500/10',
+    label: 'Exercício',
+  },
+};
+
+const STATUS_LABELS: Record<LessonStatus, string> = {
+  preparada: 'Preparada',
+  gravada: 'Gravada',
+  editada: 'Editada',
+  finalizada: 'Finalizada',
+  publicada: 'Publicada',
+};
+
+const STATUS_COLORS: Record<LessonStatus, string> = {
+  preparada:
+    'bg-slate-100  text-slate-600  dark:bg-slate-800  dark:text-slate-300',
+  gravada:
+    'bg-blue-100   text-blue-700   dark:bg-blue-900   dark:text-blue-300',
+  editada:
+    'bg-amber-100  text-amber-700  dark:bg-amber-900  dark:text-amber-300',
+  finalizada:
+    'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
+  publicada:
+    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+};
+
+const VIDEO_PROVIDERS: { value: VideoProvider; label: string }[] = [
+  { value: 'youtube', label: 'YouTube' },
+  { value: 'vimeo', label: 'Vimeo' },
+  { value: 'bunny', label: 'Bunny.net' },
+  { value: 'custom', label: 'URL Direta' },
+];
+
+// ── Question sheet types ──────────────────────────────────────────────────────
+
+type QuestionType =
+  | 'multiple_choice'
+  | 'true_false'
+  | 'essay'
+  | 'fill_blank'
+  | 'matching';
+
+const QUESTION_TYPE_LABELS: Record<QuestionType, string> = {
+  multiple_choice: 'Múltipla escolha',
+  true_false: 'Verdadeiro / Falso',
+  essay: 'Dissertativa',
+  fill_blank: 'Lacuna',
+  matching: 'Associação',
+};
+
+type QAlt = { id: string; texto: string; correta: boolean };
+type QFillBlank = { id: string; answer: string; alternativesText: string };
+type QMatchingPair = { id: string; leftText: string; rightText: string };
+
+type MockQuestion = {
+  id: string;
+  title: string;
+  type: QuestionType;
+  statement?: string;
+  points?: number;
+  alternatives?: QAlt[];
+  fillBlankAnswers?: QFillBlank[];
+  matchingPairs?: QMatchingPair[];
+};
+
+function generateAltId(): string {
+  return Math.random().toString(36).slice(2, 9);
+}
+
+const MOCK_QUESTIONS: MockQuestion[] = [
+  {
+    id: 'q1',
+    title: 'O que é React?',
+    type: 'multiple_choice',
+    points: 1,
+    alternatives: [
+      {
+        id: 'a1',
+        texto: 'Uma biblioteca JavaScript para interfaces',
+        correta: true,
+      },
+      { id: 'a2', texto: 'Um framework CSS', correta: false },
+      { id: 'a3', texto: 'Um banco de dados', correta: false },
+    ],
+  },
+  {
+    id: 'q2',
+    title: 'Defina componente funcional',
+    type: 'essay',
+    points: 2,
+  },
+  {
+    id: 'q3',
+    title: 'TypeScript é um superset de JavaScript?',
+    type: 'true_false',
+    points: 1,
+    alternatives: [
+      { id: 'true', texto: 'Verdadeiro', correta: true },
+      { id: 'false', texto: 'Falso', correta: false },
+    ],
+  },
+];
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+const schema = z.object({
+  code: z.string().min(1, 'Código obrigatório'),
+  title: z.string().min(1, 'Título obrigatório'),
+  type: z.enum(['video', 'post', 'questao', 'exercicio'] as const),
+  duration: z.coerce.number().min(0),
+  status: z.enum([
+    'preparada',
+    'gravada',
+    'editada',
+    'finalizada',
+    'publicada',
+  ] as const),
+  visibility: z.enum(['publico', 'privado', 'restrito'] as const),
+  publicDescription: z.string(),
+  privateDescription: z.string(),
+  videoProvider: z
+    .enum(['youtube', 'vimeo', 'bunny', 'custom'] as const)
+    .optional(),
+  videoUrl: z.string().optional(),
+  transcription: z.string().optional(),
+  postContent: z.string().optional(),
+  questionId: z.string().nullable().optional(),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+// ── SortableAlternativa ───────────────────────────────────────────────────────
+
+function SortableAlternativa({
+  alt,
+  index,
+  onToggleCorrect,
+  onChangeTexto,
+  onRemove,
+  canRemove,
+  disableText,
+}: {
+  alt: QAlt;
+  index: number;
+  onToggleCorrect: () => void;
+  onChangeTexto: (v: string) => void;
+  onRemove: () => void;
+  canRemove: boolean;
+  disableText?: boolean;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: alt.id });
+  const style = { transform: CSS.Transform.toString(transform), transition };
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'flex items-center gap-2 rounded-lg border p-2 transition-colors',
+        isDragging ? 'z-50 bg-muted shadow-lg' : '',
+        alt.correta ? 'border-foreground/30 bg-muted/50' : 'bg-background'
+      )}
+    >
+      <button
+        type="button"
+        className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
+        {...attributes}
+        {...listeners}
+        aria-label="Arrastar alternativa"
+      >
+        <GripVertical className="size-4" />
+      </button>
+      <span className="flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium">
+        {String.fromCharCode(65 + index)}
+      </span>
+      <Input
+        value={alt.texto}
+        onChange={(e) => onChangeTexto(e.target.value)}
+        className="flex-1 border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0"
+        placeholder="Texto da alternativa…"
+        disabled={disableText}
+      />
+      <button
+        type="button"
+        onClick={onToggleCorrect}
+        className={cn(
+          'shrink-0 rounded-full p-1 transition-colors',
+          alt.correta
+            ? 'text-foreground'
+            : 'text-muted-foreground hover:text-foreground'
+        )}
+        aria-label={
+          alt.correta ? 'Marcar como incorreta' : 'Marcar como correta'
+        }
+      >
+        {alt.correta ? (
+          <CircleDot className="size-5" />
+        ) : (
+          <CircleOff className="size-5" />
+        )}
+      </button>
+      {canRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:text-destructive"
+          aria-label="Remover alternativa"
+        >
+          <X className="size-4" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+interface EditorLessonProps {
+  lessonId: string;
+}
+
+export function EditorLesson({ lessonId }: EditorLessonProps) {
+  const lesson = useStructureStore((s) =>
+    s.lessons.find((l) => l.id === lessonId)
+  );
+  const updateLesson = useUpdateLessonMutation();
+  const deleteLesson = useDeleteLessonMutation();
+  const showConfirm = useStructureStore((s) => s.showConfirm);
+  const courseId = useStructureStore((s) => s.courseId);
+  const { request } = useApp();
+  const queryClient = useQueryClient();
+
+  const instructorPool =
+    queryClient.getQueryData<CourseStructureCacheData>(
+      courseStructureQueryKey(courseId)
+    )?.instructors ?? [];
+
+  const defaultValues = (): FormValues => ({
+    code: lesson?.code ?? '',
+    title: lesson?.title ?? '',
+    type: lesson?.type ?? 'video',
+    duration: lesson?.duration ?? 0,
+    status: lesson?.status ?? 'preparada',
+    visibility: lesson?.visibility ?? 'publico',
+    publicDescription: lesson?.publicDescription ?? '',
+    privateDescription: lesson?.privateDescription ?? '',
+    videoProvider: lesson?.videoProvider ?? 'youtube',
+    videoUrl: lesson?.videoUrl ?? '',
+    transcription: lesson?.transcription ?? '',
+    postContent: lesson?.postContent ?? '',
+    questionId: null,
+  });
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: defaultValues(),
+  });
+
+  const { isDirty } = form.formState;
+  const watchedType = useWatch({ control: form.control, name: 'type' });
+  const watchedStatus = useWatch({ control: form.control, name: 'status' });
+
+  useEffect(() => {
+    if (!lesson) return;
+    form.reset(defaultValues());
+  }, [lesson?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Local resources state ─────────────────────────────────────────────────
+  const [localResources, setLocalResources] = useState<Resource[]>(
+    () => lesson?.resources ?? []
+  );
+  const [dragOver, setDragOver] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const resourceInputRef = useRef<HTMLInputElement>(null);
+
+  // ── Instructors state ────────────────────────────────────────────────────
+  const [selectedInstructorIds, setSelectedInstructorIds] = useState<string[]>(
+    () => lesson?.instructors?.map((i) => i.id) ?? []
+  );
+
+  // ── Question sheet state ────────────────────────────────────────────────────
+  const [questionSheetOpen, setQuestionSheetOpen] = useState(false);
+  const [editingQuestion, setEditingQuestion] = useState<MockQuestion | null>(
+    null
+  );
+  const [selectedQuestion, setSelectedQuestion] = useState<MockQuestion | null>(
+    null
+  );
+  const [qSheetStatement, setQSheetStatement] = useState('');
+  const [qSheetType, setQSheetType] = useState<QuestionType>('multiple_choice');
+  const [qSheetPoints, setQSheetPoints] = useState(1);
+  const [qSheetAlts, setQSheetAlts] = useState<QAlt[]>([]);
+  const [qSheetFillBlanks, setQSheetFillBlanks] = useState<QFillBlank[]>([]);
+  const [qSheetPairs, setQSheetPairs] = useState<QMatchingPair[]>([]);
+  const [qSheetErrors, setQSheetErrors] = useState<Record<string, string>>({});
+  const qSensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  useEffect(() => {
+    setLocalResources(lesson?.resources ?? []);
+    setSelectedInstructorIds(lesson?.instructors?.map((i) => i.id) ?? []);
+  }, [lesson?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!lesson) return null;
+
+  const cfg = TYPE_CONFIG[lesson.type];
+  const Icon = cfg.icon;
+
+  async function handleResourceFiles(files: File[]) {
+    setIsUploading(true);
+    try {
+      const results = await Promise.allSettled(
+        files.map((f) =>
+          uploadFile(request, f).then(
+            (res) =>
+              ({
+                id: String(res.id),
+                name: f.name,
+                size: formatFileSize(f.size),
+                type: f.type || f.name.split('.').pop() || 'file',
+                public: false,
+                url: undefined,
+              }) satisfies Resource
+          )
+        )
+      );
+      const succeeded = results
+        .filter(
+          (r): r is PromiseFulfilledResult<Resource> => r.status === 'fulfilled'
+        )
+        .map((r) => r.value);
+      const failedCount = results.filter((r) => r.status === 'rejected').length;
+      if (failedCount > 0)
+        toast.error(
+          `${failedCount} arquivo${failedCount > 1 ? 's' : ''} não ${failedCount > 1 ? 'puderam' : 'pôde'} ser enviado${failedCount > 1 ? 's' : ''}`
+        );
+      if (succeeded.length > 0)
+        setLocalResources((prev) => [...prev, ...succeeded]);
+    } finally {
+      setIsUploading(false);
+    }
+  }
+
+  async function removeResource(id: string) {
+    const numId = Number(id);
+    if (Number.isInteger(numId) && numId > 0) {
+      try {
+        await deleteFile(request, numId);
+      } catch {
+        toast.error('Erro ao remover arquivo');
+        return;
+      }
+    } else {
+      const res = localResources.find((r) => r.id === id);
+      if (res?.url?.startsWith('blob:')) URL.revokeObjectURL(res.url);
+    }
+    setLocalResources((prev) => prev.filter((r) => r.id !== id));
+  }
+
+  function handleResourceDownload(res: Resource) {
+    if (!res.url) {
+      toast(`Download de ${res.name} — em breve`);
+      return;
+    }
+    const a = document.createElement('a');
+    a.href = res.url;
+    a.download = res.name;
+    a.click();
+  }
+
+  function onSubmit(values: FormValues) {
+    updateLesson.mutate({
+      lessonId,
+      sessionId: lesson!.sessionId,
+      formValues: {
+        ...values,
+        resources: localResources,
+        instructorIds: selectedInstructorIds.map(Number),
+      },
+    });
+    form.reset(values);
+  }
+
+  // ── Question sheet helpers ────────────────────────────────────────────────
+
+  function openCreateQuestion() {
+    setEditingQuestion(null);
+    setQSheetStatement('');
+    setQSheetType('multiple_choice');
+    setQSheetPoints(1);
+    setQSheetAlts([
+      { id: generateAltId(), texto: '', correta: false },
+      { id: generateAltId(), texto: '', correta: false },
+    ]);
+    setQSheetFillBlanks([
+      { id: generateAltId(), answer: '', alternativesText: '' },
+    ]);
+    setQSheetPairs([{ id: generateAltId(), leftText: '', rightText: '' }]);
+    setQSheetErrors({});
+    setQuestionSheetOpen(true);
+  }
+
+  function openEditQuestion(q: MockQuestion) {
+    setEditingQuestion(q);
+    setQSheetStatement(q.statement ?? q.title);
+    setQSheetType(q.type);
+    setQSheetPoints(q.points ?? 1);
+    setQSheetAlts(
+      q.alternatives?.length
+        ? q.alternatives
+        : [
+            { id: generateAltId(), texto: '', correta: false },
+            { id: generateAltId(), texto: '', correta: false },
+          ]
+    );
+    setQSheetFillBlanks(
+      q.fillBlankAnswers?.length
+        ? q.fillBlankAnswers
+        : [{ id: generateAltId(), answer: '', alternativesText: '' }]
+    );
+    setQSheetPairs(
+      q.matchingPairs?.length
+        ? q.matchingPairs
+        : [{ id: generateAltId(), leftText: '', rightText: '' }]
+    );
+    setQSheetErrors({});
+    setQuestionSheetOpen(true);
+  }
+
+  function handleQSheetTypeChange(v: QuestionType) {
+    setQSheetType(v);
+    setQSheetErrors({});
+    if (v === 'true_false') {
+      setQSheetAlts([
+        { id: 'true', texto: 'Verdadeiro', correta: true },
+        { id: 'false', texto: 'Falso', correta: false },
+      ]);
+    } else if (v === 'multiple_choice' && qSheetAlts.length === 0) {
+      setQSheetAlts([
+        { id: generateAltId(), texto: '', correta: false },
+        { id: generateAltId(), texto: '', correta: false },
+      ]);
+    } else if (v === 'fill_blank' && qSheetFillBlanks.length === 0) {
+      setQSheetFillBlanks([
+        { id: generateAltId(), answer: '', alternativesText: '' },
+      ]);
+    } else if (v === 'matching' && qSheetPairs.length === 0) {
+      setQSheetPairs([{ id: generateAltId(), leftText: '', rightText: '' }]);
+    }
+  }
+
+  function saveQuestion() {
+    const errors: Record<string, string> = {};
+    if (!qSheetStatement.trim()) errors.statement = 'Enunciado obrigatório';
+    if (
+      (qSheetType === 'multiple_choice' || qSheetType === 'true_false') &&
+      !qSheetAlts.some((a) => a.correta)
+    )
+      errors.alts = 'Selecione pelo menos uma resposta correta';
+    if (Object.keys(errors).length) {
+      setQSheetErrors(errors);
+      return;
+    }
+    const saved: MockQuestion = {
+      id: editingQuestion?.id ?? `q-${Date.now()}`,
+      title: qSheetStatement.replace(/<[^>]+>/g, '').slice(0, 80),
+      type: qSheetType,
+      statement: qSheetStatement,
+      points: qSheetPoints,
+      alternatives:
+        qSheetType === 'multiple_choice' || qSheetType === 'true_false'
+          ? qSheetAlts
+          : undefined,
+      fillBlankAnswers:
+        qSheetType === 'fill_blank' ? qSheetFillBlanks : undefined,
+      matchingPairs: qSheetType === 'matching' ? qSheetPairs : undefined,
+    };
+    setSelectedQuestion(saved);
+    form.setValue('questionId', saved.id, { shouldDirty: true });
+    setQuestionSheetOpen(false);
+    toast.success(editingQuestion ? 'Questão atualizada' : 'Questão criada');
+  }
+
+  function handleDelete() {
+    showConfirm({
+      title: `Excluir aula "${lesson!.title}"?`,
+      description: 'Esta ação não pode ser desfeita.',
+      onConfirm: () =>
+        deleteLesson.mutate({ lessonId, sessionId: lesson!.sessionId }),
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col h-full min-h-0"
+      >
+        {/* ── Header ───────────────────────────────────────────────────────── */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted/30 shrink-0">
+          <div
+            className={cn(
+              'flex size-9 items-center justify-center rounded-lg shrink-0',
+              cfg.bg
+            )}
+          >
+            <Icon className={cn('size-4', cfg.color)} />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-1.5">
+              <span className="text-sm font-semibold truncate">Aula</span>
+              {isDirty && (
+                <CircleDot className="size-3 text-amber-500 shrink-0" />
+              )}
+            </div>
+            <p className="text-[0.65rem] text-muted-foreground truncate">
+              {lesson.code} · {cfg.label}
+            </p>
+          </div>
+          {watchedStatus && (
+            <span
+              className={cn(
+                'text-[0.65rem] font-medium px-2 py-0.5 rounded-full shrink-0',
+                STATUS_COLORS[watchedStatus]
+              )}
+            >
+              {STATUS_LABELS[watchedStatus]}
+            </span>
+          )}
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-7 text-destructive/60 hover:text-destructive shrink-0"
+            title="Excluir aula"
+            aria-label="Excluir aula"
+            disabled={deleteLesson.isPending}
+            onClick={handleDelete}
+          >
+            {deleteLesson.isPending ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <Trash2 className="size-3.5" />
+            )}
+          </Button>
+        </div>
+
+        {/* ── Tabs ─────────────────────────────────────────────────────────── */}
+        <Tabs defaultValue="dados" className="flex flex-col flex-1 min-h-0">
+          <TabsList className="mx-3 mt-2 h-8 w-auto justify-start shrink-0 bg-muted/50">
+            <TabsTrigger value="dados" className="text-xs h-7 px-2.5">
+              Dados
+            </TabsTrigger>
+            <TabsTrigger value="conteudo" className="text-xs h-7 px-2.5">
+              Conteúdo
+            </TabsTrigger>
+            <TabsTrigger value="recursos" className="text-xs h-7 px-2.5">
+              Recursos
+            </TabsTrigger>
+          </TabsList>
+
+          {/* ── Tab Dados ────────────────────────────────────────────────── */}
+          <TabsContent value="dados" className="flex-1 min-h-0 mt-0">
+            <ScrollArea className="h-full">
+              <div className="flex flex-col gap-3 p-3">
+                {/* Identificação */}
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-0">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      Identificação
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                    <div className="grid grid-cols-3 gap-2">
+                      <FormField
+                        control={form.control}
+                        name="code"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">Código</FormLabel>
+                            <FormControl>
+                              <Input
+                                {...field}
+                                className="h-8 text-xs font-mono"
+                              />
+                            </FormControl>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={form.control}
+                        name="duration"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">
+                              <Clock className="size-3 inline mr-1" />
+                              Duração (min)
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...field}
+                                type="number"
+                                className="h-8 text-xs"
+                              />
+                            </FormControl>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+                      <FormField
+                        control={form.control}
+                        name="type"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">Tipo</FormLabel>
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <FormControl>
+                                <SelectTrigger className="h-8 text-xs w-full">
+                                  <SelectValue />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                {(
+                                  Object.entries(TYPE_CONFIG) as [
+                                    LessonType,
+                                    (typeof TYPE_CONFIG)[LessonType],
+                                  ][]
+                                ).map(([val, cfg]) => {
+                                  const Ic = cfg.icon;
+                                  return (
+                                    <SelectItem key={val} value={val}>
+                                      <span className="flex items-center gap-1.5">
+                                        <Ic
+                                          className={cn('size-3', cfg.color)}
+                                        />
+                                        {cfg.label}
+                                      </span>
+                                    </SelectItem>
+                                  );
+                                })}
+                              </SelectContent>
+                            </Select>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+
+                    <FormField
+                      control={form.control}
+                      name="title"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-xs">Título</FormLabel>
+                          <FormControl>
+                            <Input {...field} className="h-8 text-sm" />
+                          </FormControl>
+                          <FormMessage className="text-xs" />
+                        </FormItem>
+                      )}
+                    />
+                  </CardContent>
+                </Card>
+
+                {/* Publicação */}
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-0">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      Publicação
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                    <div className="grid grid-cols-2 gap-2">
+                      <FormField
+                        control={form.control}
+                        name="status"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">
+                              Status de produção
+                            </FormLabel>
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <FormControl>
+                                <SelectTrigger className="h-8 text-xs w-full">
+                                  <SelectValue />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                {(
+                                  Object.entries(STATUS_LABELS) as [
+                                    LessonStatus,
+                                    string,
+                                  ][]
+                                ).map(([val, lbl]) => (
+                                  <SelectItem key={val} value={val}>
+                                    <span
+                                      className={cn(
+                                        'text-xs px-1.5 py-0.5 rounded',
+                                        STATUS_COLORS[val]
+                                      )}
+                                    >
+                                      {lbl}
+                                    </span>
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name="visibility"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">
+                              Visibilidade
+                            </FormLabel>
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <FormControl>
+                                <SelectTrigger className="h-8 text-xs w-full">
+                                  <SelectValue />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                <SelectItem value="publico">
+                                  <span className="flex items-center gap-1.5">
+                                    <Eye className="size-3" /> Público
+                                  </span>
+                                </SelectItem>
+                                <SelectItem value="privado">
+                                  <span className="flex items-center gap-1.5">
+                                    <EyeOff className="size-3" /> Privado
+                                  </span>
+                                </SelectItem>
+                                <SelectItem value="restrito">
+                                  <span className="flex items-center gap-1.5">
+                                    <Lock className="size-3" /> Restrito
+                                  </span>
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Instrutores */}
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-0">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      Instrutores
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2 flex flex-col gap-2">
+                    {/* Picker para adicionar */}
+                    <EntityPicker<{ id: number; name: string }>
+                      value={null}
+                      onChange={(val) => {
+                        if (val != null)
+                          setSelectedInstructorIds((prev) =>
+                            prev.includes(String(val))
+                              ? prev
+                              : [...prev, String(val)]
+                          );
+                      }}
+                      placeholder="Adicionar instrutor…"
+                      searchPlaceholder="Buscar instrutor…"
+                      emptyLabel="Nenhum instrutor disponível"
+                      entityLabel="Instrutor"
+                      options={instructorPool.filter(
+                        (i) => !selectedInstructorIds.includes(String(i.id))
+                      )}
+                      getOptionValue={(o) => o.id}
+                      getOptionLabel={(o) => o.name}
+                    />
+                    {/* Lista de instrutores selecionados */}
+                    {selectedInstructorIds.length > 0 && (
+                      <div className="flex flex-col gap-1">
+                        {selectedInstructorIds.map((sid) => {
+                          const inst = instructorPool.find(
+                            (i) => String(i.id) === sid
+                          );
+                          const displayName = inst?.name ?? sid;
+                          return (
+                            <div
+                              key={sid}
+                              className="flex items-center gap-2 rounded-md border bg-muted/20 px-2 py-1"
+                            >
+                              <Avatar className="size-6 shrink-0">
+                                <AvatarImage
+                                  src={undefined}
+                                  alt={displayName}
+                                />
+                                <AvatarFallback className="text-[0.6rem] font-medium">
+                                  {displayName
+                                    .split(' ')
+                                    .slice(0, 2)
+                                    .map((n: string) => n[0])
+                                    .join('')
+                                    .toUpperCase()}
+                                </AvatarFallback>
+                              </Avatar>
+                              <span className="text-xs flex-1 truncate">
+                                {displayName}
+                              </span>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="size-5 shrink-0 text-muted-foreground hover:text-destructive"
+                                onClick={() =>
+                                  setSelectedInstructorIds((prev) =>
+                                    prev.filter((id) => id !== sid)
+                                  )
+                                }
+                                aria-label={`Remover ${displayName}`}
+                              >
+                                <X className="size-3" />
+                              </Button>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              </div>
+            </ScrollArea>
+          </TabsContent>
+
+          {/* ── Tab Conteúdo ─────────────────────────────────────────────── */}
+          <TabsContent value="conteudo" className="flex-1 min-h-0 mt-0">
+            <ScrollArea className="h-full">
+              <div className="flex flex-col gap-3 p-3">
+                {/* Descrição pública */}
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-1">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+                      <Eye className="size-3" /> Descrição pública
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2">
+                    <FormField
+                      control={form.control}
+                      name="publicDescription"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <RichTextEditor
+                              value={field.value}
+                              onChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormMessage className="text-xs" />
+                        </FormItem>
+                      )}
+                    />
+                  </CardContent>
+                </Card>
+
+                {/* Notas internas */}
+                <Card className="bg-muted/20 py-2 gap-2">
+                  <CardHeader className="px-3 pt-2 pb-1">
+                    <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+                      <Lock className="size-3" /> Notas internas
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-3 pb-2">
+                    <FormField
+                      control={form.control}
+                      name="privateDescription"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <RichTextEditor
+                              value={field.value}
+                              onChange={field.onChange}
+                              className="border-amber-200/60 dark:border-amber-800/40"
+                            />
+                          </FormControl>
+                          <FormMessage className="text-xs" />
+                        </FormItem>
+                      )}
+                    />
+                  </CardContent>
+                </Card>
+
+                {/* Campos específicos por tipo */}
+                {watchedType === 'video' && (
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-1">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+                        <Video className="size-3 text-blue-500" /> Vídeo
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                      <FormField
+                        control={form.control}
+                        name="videoProvider"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">Provider</FormLabel>
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <FormControl>
+                                <SelectTrigger className="h-8 text-xs w-full">
+                                  <SelectValue />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                {VIDEO_PROVIDERS.map((p) => (
+                                  <SelectItem key={p.value} value={p.value}>
+                                    {p.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name="videoUrl"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">
+                              URL do vídeo
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                {...field}
+                                value={field.value ?? ''}
+                                className="h-8 text-xs font-mono"
+                                placeholder="https://…"
+                              />
+                            </FormControl>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name="transcription"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="text-xs">
+                              Transcrição
+                            </FormLabel>
+                            <FormControl>
+                              <Textarea
+                                {...field}
+                                value={field.value ?? ''}
+                                rows={5}
+                                className="text-xs resize-none font-mono"
+                                placeholder="Transcrição automática ou manual do vídeo…"
+                              />
+                            </FormControl>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+                    </CardContent>
+                  </Card>
+                )}
+
+                {watchedType === 'post' && (
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-1">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+                        <FileText className="size-3 text-emerald-500" />{' '}
+                        Conteúdo do post
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2">
+                      <FormField
+                        control={form.control}
+                        name="postContent"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <RichTextEditor
+                                value={field.value ?? ''}
+                                onChange={field.onChange}
+                              />
+                            </FormControl>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+                    </CardContent>
+                  </Card>
+                )}
+
+                {watchedType === 'questao' && (
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-1">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center justify-between gap-1.5">
+                        <span className="flex items-center gap-1.5">
+                          <ListChecks className="size-3 text-amber-500" />{' '}
+                          Questão vinculada
+                        </span>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="h-6 text-xs px-2 gap-1"
+                          onClick={openCreateQuestion}
+                        >
+                          <Plus className="size-3" />
+                          Nova questão
+                        </Button>
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-2">
+                      <FormField
+                        control={form.control}
+                        name="questionId"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <EntityPicker<MockQuestion>
+                                value={field.value ?? null}
+                                onChange={(val) => {
+                                  field.onChange(val);
+                                  const found =
+                                    MOCK_QUESTIONS.find((q) => q.id === val) ??
+                                    null;
+                                  setSelectedQuestion(found);
+                                }}
+                                placeholder="Selecionar questão…"
+                                searchPlaceholder="Buscar questão…"
+                                emptyLabel="Nenhuma questão encontrada"
+                                entityLabel="Questão"
+                                options={MOCK_QUESTIONS}
+                                getOptionValue={(o) => o.id}
+                                getOptionLabel={(o) => o.title}
+                                getOptionDescription={(o) =>
+                                  QUESTION_TYPE_LABELS[o.type]
+                                }
+                              />
+                            </FormControl>
+                            <FormMessage className="text-xs" />
+                          </FormItem>
+                        )}
+                      />
+                      {selectedQuestion && (
+                        <div className="flex items-center gap-2 rounded-lg border bg-background px-3 py-2 text-sm">
+                          <HelpCircle className="size-4 shrink-0 text-amber-500" />
+                          <div className="flex-1 min-w-0">
+                            <p className="truncate font-medium text-xs">
+                              {selectedQuestion.title}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              {QUESTION_TYPE_LABELS[selectedQuestion.type]}
+                              {selectedQuestion.points != null &&
+                                ` · ${selectedQuestion.points} pt`}
+                            </p>
+                          </div>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="size-7 shrink-0"
+                            onClick={() => openEditQuestion(selectedQuestion)}
+                            aria-label="Editar questão"
+                          >
+                            <Pencil className="size-3.5" />
+                          </Button>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                )}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+
+          {/* ── Tab Recursos ─────────────────────────────────────────────── */}
+          <TabsContent value="recursos" className="flex-1 min-h-0 mt-0">
+            <ScrollArea className="h-full">
+              <div className="flex flex-col gap-3 p-3">
+                {/* Drop zone */}
+                <div
+                  role="button"
+                  tabIndex={0}
+                  aria-label="Soltar arquivo ou clicar para selecionar"
+                  aria-disabled={isUploading}
+                  onDragOver={(e) => {
+                    e.preventDefault();
+                    if (!isUploading) setDragOver(true);
+                  }}
+                  onDragLeave={() => setDragOver(false)}
+                  onDrop={(e) => {
+                    e.preventDefault();
+                    setDragOver(false);
+                    if (!isUploading)
+                      void handleResourceFiles(
+                        Array.from(e.dataTransfer.files)
+                      );
+                  }}
+                  onClick={() => {
+                    if (!isUploading) resourceInputRef.current?.click();
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      if (!isUploading) resourceInputRef.current?.click();
+                    }
+                  }}
+                  className={cn(
+                    'flex flex-col items-center justify-center gap-2 py-7 rounded-lg border-2 border-dashed transition-colors select-none',
+                    isUploading
+                      ? 'cursor-wait border-border opacity-60'
+                      : 'cursor-pointer',
+                    !isUploading && dragOver
+                      ? 'border-primary/70 bg-primary/5'
+                      : !isUploading
+                        ? 'border-border hover:border-primary/40 hover:bg-muted/30'
+                        : ''
+                  )}
+                >
+                  {isUploading ? (
+                    <Loader2 className="size-7 animate-spin text-muted-foreground/50" />
+                  ) : (
+                    <UploadCloud
+                      className={cn(
+                        'size-7 transition-colors',
+                        dragOver ? 'text-primary' : 'text-muted-foreground/50'
+                      )}
+                    />
+                  )}
+                  <div className="text-center">
+                    <p className="text-xs font-medium">
+                      {isUploading ? 'Enviando…' : 'Solte o arquivo aqui'}
+                    </p>
+                    {!isUploading && (
+                      <p className="text-xs text-muted-foreground">
+                        ou clique para selecionar
+                      </p>
+                    )}
+                  </div>
+                  <input
+                    ref={resourceInputRef}
+                    type="file"
+                    multiple
+                    className="hidden"
+                    onChange={(e) => {
+                      if (e.target.files) {
+                        void handleResourceFiles(Array.from(e.target.files));
+                        e.target.value = '';
+                      }
+                    }}
+                  />
+                </div>
+
+                {/* Counter */}
+                {localResources.length > 0 && (
+                  <p className="text-xs text-muted-foreground">
+                    {localResources.length} recurso
+                    {localResources.length !== 1 ? 's' : ''}
+                  </p>
+                )}
+
+                {/* Resource list */}
+                {localResources.length === 0 ? (
+                  <p className="text-center text-xs text-muted-foreground py-1">
+                    Nenhum recurso vinculado.
+                  </p>
+                ) : (
+                  <div className="flex flex-col gap-1">
+                    {localResources.map((res) => {
+                      const ResIcon = getResourceIcon(res.type);
+                      return (
+                        <div
+                          key={res.id}
+                          className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2"
+                        >
+                          <ResIcon
+                            className={cn(
+                              'size-3.5 shrink-0',
+                              getResourceIconColor(res.type)
+                            )}
+                          />
+                          <div className="flex-1 min-w-0">
+                            <p className="text-xs truncate font-medium">
+                              {res.name}
+                            </p>
+                            <p className="text-[0.65rem] text-muted-foreground">
+                              {res.size}
+                            </p>
+                          </div>
+                          {res.public && (
+                            <Eye
+                              className="size-3 text-emerald-500 shrink-0"
+                              aria-label="Público"
+                            />
+                          )}
+                          {/* Abrir em nova aba */}
+                          {res.url && (
+                            <a
+                              href={res.url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              aria-label={`Abrir ${res.name} em nova aba`}
+                              onClick={(e) => e.stopPropagation()}
+                              className="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors shrink-0"
+                            >
+                              <ExternalLink className="size-3" />
+                            </a>
+                          )}
+                          {/* Download */}
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                            onClick={() => handleResourceDownload(res)}
+                            aria-label={`Baixar ${res.name}`}
+                          >
+                            <Download className="size-3" />
+                          </Button>
+                          {/* Remover */}
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                            onClick={() => void removeResource(res.id)}
+                            aria-label={`Remover ${res.name}`}
+                          >
+                            <X className="size-3" />
+                          </Button>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+        </Tabs>
+
+        {/* ── Footer ───────────────────────────────────────────────────────── */}
+        <div className="shrink-0 border-t bg-background">
+          <Separator />
+          <div className="flex items-center gap-2 px-3 py-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              disabled={!isDirty || updateLesson.isPending}
+              onClick={() => form.reset()}
+            >
+              <Undo2 className="size-3 mr-1" />
+              Cancelar
+            </Button>
+            <div className="flex-1" />
+            <Button
+              type="submit"
+              size="sm"
+              className="h-7 text-xs"
+              disabled={!isDirty || updateLesson.isPending}
+            >
+              {updateLesson.isPending ? (
+                <Loader2 className="size-3 mr-1 animate-spin" />
+              ) : (
+                <Save className="size-3 mr-1" />
+              )}
+              Salvar aula
+            </Button>
+          </div>
+        </div>
+
+        {/* ── Question Sheet ──────────────────────────────────────────────── */}
+        <Sheet open={questionSheetOpen} onOpenChange={setQuestionSheetOpen}>
+          <SheetContent
+            side="right"
+            className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+          >
+            <SheetHeader>
+              <SheetTitle>
+                {editingQuestion ? 'Editar questão' : 'Nova questão'}
+              </SheetTitle>
+            </SheetHeader>
+
+            <div className="flex flex-1 flex-col gap-5 px-4 pb-4">
+              {/* Enunciado */}
+              <div className="flex flex-col gap-1.5">
+                <Label className="text-sm font-medium">Enunciado</Label>
+                <RichTextEditor
+                  value={qSheetStatement}
+                  onChange={setQSheetStatement}
+                />
+                {qSheetErrors.statement && (
+                  <p className="text-xs text-destructive">
+                    {qSheetErrors.statement}
+                  </p>
+                )}
+              </div>
+
+              {/* Tipo + Pontuação */}
+              <div className="grid grid-cols-2 gap-3">
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-sm font-medium">Tipo</Label>
+                  <Select
+                    value={qSheetType}
+                    onValueChange={(v) =>
+                      handleQSheetTypeChange(v as QuestionType)
+                    }
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(
+                        Object.keys(QUESTION_TYPE_LABELS) as QuestionType[]
+                      ).map((t) => (
+                        <SelectItem key={t} value={t}>
+                          {QUESTION_TYPE_LABELS[t]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label className="text-sm font-medium">Pontuação</Label>
+                  <Input
+                    type="number"
+                    min={0}
+                    step={0.5}
+                    value={qSheetPoints}
+                    onChange={(e) => setQSheetPoints(Number(e.target.value))}
+                  />
+                </div>
+              </div>
+
+              <Separator />
+
+              {/* Alternativas — múltipla escolha */}
+              {qSheetType === 'multiple_choice' && (
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-sm font-medium">Alternativas</Label>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="h-7 text-xs gap-1 px-2"
+                      onClick={() =>
+                        setQSheetAlts((prev) => [
+                          ...prev,
+                          { id: generateAltId(), texto: '', correta: false },
+                        ])
+                      }
+                    >
+                      <Plus className="size-3" />
+                      Adicionar
+                    </Button>
+                  </div>
+                  {qSheetErrors.alts && (
+                    <p className="text-xs text-destructive">
+                      {qSheetErrors.alts}
+                    </p>
+                  )}
+                  <DndContext
+                    sensors={qSensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={({ active, over }) => {
+                      if (over && active.id !== over.id) {
+                        setQSheetAlts((prev) => {
+                          const from = prev.findIndex(
+                            (a) => a.id === active.id
+                          );
+                          const to = prev.findIndex((a) => a.id === over.id);
+                          return arrayMove(prev, from, to);
+                        });
+                      }
+                    }}
+                  >
+                    <SortableContext
+                      items={qSheetAlts.map((a) => a.id)}
+                      strategy={verticalListSortingStrategy}
+                    >
+                      {qSheetAlts.map((alt, idx) => (
+                        <SortableAlternativa
+                          key={alt.id}
+                          alt={alt}
+                          index={idx}
+                          canRemove={qSheetAlts.length > 2}
+                          onToggleCorrect={() =>
+                            setQSheetAlts((prev) =>
+                              prev.map((a) =>
+                                a.id === alt.id
+                                  ? { ...a, correta: !a.correta }
+                                  : a
+                              )
+                            )
+                          }
+                          onChangeTexto={(v) =>
+                            setQSheetAlts((prev) =>
+                              prev.map((a) =>
+                                a.id === alt.id ? { ...a, texto: v } : a
+                              )
+                            )
+                          }
+                          onRemove={() =>
+                            setQSheetAlts((prev) =>
+                              prev.filter((a) => a.id !== alt.id)
+                            )
+                          }
+                        />
+                      ))}
+                    </SortableContext>
+                  </DndContext>
+                </div>
+              )}
+
+              {/* Alternativas — verdadeiro/falso */}
+              {qSheetType === 'true_false' && (
+                <div className="flex flex-col gap-2">
+                  <Label className="text-sm font-medium">
+                    Resposta correta
+                  </Label>
+                  {qSheetErrors.alts && (
+                    <p className="text-xs text-destructive">
+                      {qSheetErrors.alts}
+                    </p>
+                  )}
+                  {qSheetAlts.map((alt) => (
+                    <div
+                      key={alt.id}
+                      className={cn(
+                        'flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors',
+                        alt.correta
+                          ? 'border-foreground/30 bg-muted/50'
+                          : 'bg-background hover:bg-muted/20'
+                      )}
+                      onClick={() =>
+                        setQSheetAlts((prev) =>
+                          prev.map((a) => ({
+                            ...a,
+                            correta: a.id === alt.id,
+                          }))
+                        )
+                      }
+                    >
+                      {alt.correta ? (
+                        <CircleDot className="size-4 shrink-0" />
+                      ) : (
+                        <CircleOff className="size-4 shrink-0 text-muted-foreground" />
+                      )}
+                      <span className="text-sm">{alt.texto}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Fill in the blank */}
+              {qSheetType === 'fill_blank' && (
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-sm font-medium">Lacunas</Label>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="h-7 text-xs gap-1 px-2"
+                      onClick={() =>
+                        setQSheetFillBlanks((prev) => [
+                          ...prev,
+                          {
+                            id: generateAltId(),
+                            answer: '',
+                            alternativesText: '',
+                          },
+                        ])
+                      }
+                    >
+                      <Plus className="size-3" />
+                      Adicionar
+                    </Button>
+                  </div>
+                  {qSheetFillBlanks.map((fb, idx) => (
+                    <div
+                      key={fb.id}
+                      className="flex flex-col gap-1.5 rounded-lg border p-3"
+                    >
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs font-medium text-muted-foreground">
+                          Lacuna {idx + 1}
+                        </span>
+                        {qSheetFillBlanks.length > 1 && (
+                          <button
+                            type="button"
+                            className="text-muted-foreground hover:text-destructive transition-colors"
+                            onClick={() =>
+                              setQSheetFillBlanks((prev) =>
+                                prev.filter((f) => f.id !== fb.id)
+                              )
+                            }
+                            aria-label="Remover lacuna"
+                          >
+                            <X className="size-3.5" />
+                          </button>
+                        )}
+                      </div>
+                      <Input
+                        placeholder="Resposta correta"
+                        value={fb.answer}
+                        onChange={(e) =>
+                          setQSheetFillBlanks((prev) =>
+                            prev.map((f) =>
+                              f.id === fb.id
+                                ? { ...f, answer: e.target.value }
+                                : f
+                            )
+                          )
+                        }
+                      />
+                      <Input
+                        placeholder="Alternativas separadas por vírgula (opcional)"
+                        value={fb.alternativesText}
+                        onChange={(e) =>
+                          setQSheetFillBlanks((prev) =>
+                            prev.map((f) =>
+                              f.id === fb.id
+                                ? { ...f, alternativesText: e.target.value }
+                                : f
+                            )
+                          )
+                        }
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Matching pairs */}
+              {qSheetType === 'matching' && (
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-sm font-medium">
+                      Pares de associação
+                    </Label>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="h-7 text-xs gap-1 px-2"
+                      onClick={() =>
+                        setQSheetPairs((prev) => [
+                          ...prev,
+                          { id: generateAltId(), leftText: '', rightText: '' },
+                        ])
+                      }
+                    >
+                      <Plus className="size-3" />
+                      Adicionar
+                    </Button>
+                  </div>
+                  {qSheetPairs.map((pair, idx) => (
+                    <div key={pair.id} className="flex items-center gap-2">
+                      <span className="text-xs text-muted-foreground w-4 text-center">
+                        {idx + 1}
+                      </span>
+                      <Input
+                        placeholder="Esquerda"
+                        value={pair.leftText}
+                        onChange={(e) =>
+                          setQSheetPairs((prev) =>
+                            prev.map((p) =>
+                              p.id === pair.id
+                                ? { ...p, leftText: e.target.value }
+                                : p
+                            )
+                          )
+                        }
+                        className="flex-1"
+                      />
+                      <span className="text-muted-foreground text-xs">↔</span>
+                      <Input
+                        placeholder="Direita"
+                        value={pair.rightText}
+                        onChange={(e) =>
+                          setQSheetPairs((prev) =>
+                            prev.map((p) =>
+                              p.id === pair.id
+                                ? { ...p, rightText: e.target.value }
+                                : p
+                            )
+                          )
+                        }
+                        className="flex-1"
+                      />
+                      {qSheetPairs.length > 1 && (
+                        <button
+                          type="button"
+                          className="text-muted-foreground hover:text-destructive transition-colors"
+                          onClick={() =>
+                            setQSheetPairs((prev) =>
+                              prev.filter((p) => p.id !== pair.id)
+                            )
+                          }
+                          aria-label="Remover par"
+                        >
+                          <X className="size-4" />
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Dissertativa */}
+              {qSheetType === 'essay' && (
+                <div className="rounded-lg border bg-muted/30 p-4 text-center text-sm text-muted-foreground">
+                  Questão dissertativa — o aluno responderá em texto livre.
+                </div>
+              )}
+            </div>
+
+            <SheetFooter className="flex flex-row gap-2 px-4 pb-4">
+              <Button
+                type="button"
+                variant="outline"
+                className="flex-1"
+                onClick={() => setQuestionSheetOpen(false)}
+              >
+                Cancelar
+              </Button>
+              <Button type="button" className="flex-1" onClick={saveQuestion}>
+                <Save className="size-4 mr-1.5" />
+                {editingQuestion ? 'Salvar alterações' : 'Criar questão'}
+              </Button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      </form>
+    </Form>
+  );
+}