@hed-hog/lms 0.0.312 → 0.0.315

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

@@ -1,1824 +1,1824 @@
-'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<Resource>((res) => ({
-            id: String(res.id),
-            name: f.name,
-            size: formatFileSize(f.size),
-            type: f.type || f.name.split('.').pop() || 'file',
-            public: false,
-            url: undefined,
-          }))
-        )
-      );
-      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>
-  );
-}
+'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<Resource>((res) => ({
+            id: String(res.id),
+            name: f.name,
+            size: formatFileSize(f.size),
+            type: f.type || f.name.split('.').pop() || 'file',
+            public: false,
+            url: undefined,
+          }))
+        )
+      );
+      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>
+  );
+}