@hed-hog/lms 0.0.268 → 0.0.270

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

@@ -0,0 +1,931 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Field, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  AlertTriangle,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  CircleDot,
+  CircleOff,
+  Copy,
+  FileCheck,
+  GripVertical,
+  Pencil,
+  Plus,
+  Save,
+  Trash2,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useParams, usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+interface Alternativa {
+  id: string;
+  texto: string;
+  correta: boolean;
+}
+
+interface Questao {
+  id: string;
+  enunciado: string;
+  pontuacao: number;
+  alternativas: Alternativa[];
+}
+
+type QuestaoForm = {
+  enunciado: string;
+  pontuacao: number;
+};
+
+function generateId() {
+  return Math.random().toString(36).substring(2, 9);
+}
+
+const initialQuestoes: Questao[] = [
+  {
+    id: 'q1',
+    enunciado:
+      'Qual hook do React e utilizado para gerenciar estado local em componentes funcionais?',
+    pontuacao: 2,
+    alternativas: [
+      { id: 'a1', texto: 'useEffect', correta: false },
+      { id: 'a2', texto: 'useState', correta: true },
+      { id: 'a3', texto: 'useContext', correta: false },
+      { id: 'a4', texto: 'useReducer', correta: false },
+    ],
+  },
+  {
+    id: 'q2',
+    enunciado: 'O que o Virtual DOM faz no React?',
+    pontuacao: 2,
+    alternativas: [
+      { id: 'a5', texto: 'Substitui o DOM real completamente', correta: false },
+      {
+        id: 'a6',
+        texto:
+          'Cria uma copia do DOM para comparar e atualizar apenas o necessario',
+        correta: true,
+      },
+      { id: 'a7', texto: 'Elimina a necessidade de HTML', correta: false },
+    ],
+  },
+  {
+    id: 'q3',
+    enunciado: 'Qual e a principal diferenca entre props e state?',
+    pontuacao: 3,
+    alternativas: [
+      {
+        id: 'a8',
+        texto: 'Props sao mutaveis, state sao imutaveis',
+        correta: false,
+      },
+      {
+        id: 'a9',
+        texto: 'Props sao passados pelo pai, state e gerenciado internamente',
+        correta: true,
+      },
+      { id: 'a10', texto: 'Nao ha diferenca', correta: false },
+      {
+        id: 'a11',
+        texto: 'State so existe em class components',
+        correta: false,
+      },
+      { id: 'a12', texto: 'Props nao podem ser funcoes', correta: false },
+    ],
+  },
+  {
+    id: 'q4',
+    enunciado:
+      'Qual metodo do ciclo de vida e equivalente ao useEffect com array de dependencias vazio?',
+    pontuacao: 2,
+    alternativas: [
+      { id: 'a13', texto: 'componentDidMount', correta: true },
+      { id: 'a14', texto: 'componentWillUpdate', correta: false },
+      { id: 'a15', texto: 'componentDidUpdate', correta: false },
+    ],
+  },
+  {
+    id: 'q5',
+    enunciado: 'Para que serve o React.memo?',
+    pontuacao: 1,
+    alternativas: [
+      { id: 'a16', texto: 'Para memorizar valores computados', correta: false },
+      {
+        id: 'a17',
+        texto: 'Para evitar re-renderizacoes desnecessarias de componentes',
+        correta: true,
+      },
+    ],
+  },
+];
+
+function SortableAlternativa({
+  alt,
+  index,
+  onToggleCorrect,
+  onChangeTexto,
+  onRemove,
+  canRemove,
+}: {
+  alt: Alternativa;
+  index: number;
+  onToggleCorrect: () => void;
+  onChangeTexto: (texto: string) => void;
+  onRemove: () => void;
+  canRemove: boolean;
+}) {
+  const t = useTranslations('lms.QuestionsPage');
+  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={`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={t('question.dragAlternative')}
+      >
+        <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={t('sheet.fields.alternativePlaceholder')}
+      />
+
+      <button
+        type="button"
+        onClick={onToggleCorrect}
+        className={`shrink-0 rounded-full p-1 transition-colors ${
+          alt.correta
+            ? 'text-foreground'
+            : 'text-muted-foreground hover:text-foreground'
+        }`}
+        aria-label={
+          alt.correta ? t('question.markIncorrect') : t('question.markCorrect')
+        }
+      >
+        {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={t('question.removeAlternative')}
+        >
+          <X className="size-4" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+function SortableQuestao({
+  questao,
+  qIndex,
+  isExpanded,
+  onToggleExpand,
+  onEdit,
+  onDuplicate,
+  onDelete,
+}: {
+  questao: Questao;
+  qIndex: number;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  onEdit: () => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+}) {
+  const t = useTranslations('lms.QuestionsPage');
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: questao.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <motion.div
+      ref={setNodeRef}
+      style={style}
+      layout
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -10 }}
+      transition={{ duration: 0.2 }}
+      className={isDragging ? 'z-50' : ''}
+    >
+      <Card className="overflow-hidden">
+        {/* Question header */}
+        <div className="flex items-start gap-3 p-4 transition-colors hover:bg-muted/30">
+          <button
+            type="button"
+            className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
+            {...attributes}
+            {...listeners}
+            aria-label={t('question.dragQuestion')}
+          >
+            <GripVertical className="size-5" />
+          </button>
+
+          <div
+            className="flex min-w-0 flex-1 cursor-pointer items-start gap-3"
+            onClick={onToggleExpand}
+            role="button"
+            aria-expanded={isExpanded}
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onToggleExpand();
+              }
+            }}
+          >
+            <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-foreground text-sm font-bold text-background">
+              {qIndex + 1}
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium leading-relaxed">
+                {questao.enunciado}
+              </p>
+              <div className="mt-2 flex flex-wrap items-center gap-2">
+                <Badge variant="secondary" className="text-xs">
+                  {t('question.alternatives', {
+                    count: questao.alternativas.length,
+                  })}
+                </Badge>
+                <Badge variant="outline" className="text-xs">
+                  {questao.pontuacao === 1
+                    ? t('question.points', { score: questao.pontuacao })
+                    : t('question.pointsPlural', { score: questao.pontuacao })}
+                </Badge>
+              </div>
+            </div>
+            <div className="shrink-0">
+              {isExpanded ? (
+                <ChevronUp className="size-4 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="size-4 text-muted-foreground" />
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Expanded content */}
+        <AnimatePresence>
+          {isExpanded && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.25 }}
+              className="overflow-hidden"
+            >
+              <Separator />
+              <div className="p-4">
+                <div className="flex flex-col gap-2">
+                  {questao.alternativas.map((alt, altIndex) => (
+                    <div
+                      key={alt.id}
+                      className={`flex items-center gap-3 rounded-lg border p-3 text-sm ${
+                        alt.correta
+                          ? 'border-foreground/20 bg-muted/50 font-medium'
+                          : ''
+                      }`}
+                    >
+                      <span className="flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium">
+                        {String.fromCharCode(65 + altIndex)}
+                      </span>
+                      <span className="flex-1">{alt.texto}</span>
+                      {alt.correta && (
+                        <Check className="size-4 shrink-0 text-foreground" />
+                      )}
+                    </div>
+                  ))}
+                </div>
+
+                <div className="mt-4 flex flex-wrap gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5"
+                    onClick={onEdit}
+                  >
+                    <Pencil className="size-3.5" /> {t('question.actions.edit')}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5"
+                    onClick={onDuplicate}
+                  >
+                    <Copy className="size-3.5" />{' '}
+                    {t('question.actions.duplicate')}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5 text-destructive hover:text-destructive"
+                    onClick={onDelete}
+                  >
+                    <Trash2 className="size-3.5" />{' '}
+                    {t('question.actions.delete')}
+                  </Button>
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </Card>
+    </motion.div>
+  );
+}
+
+export default function QuestoesPage() {
+  const t = useTranslations('lms.QuestionsPage');
+  const { id } = useParams();
+  const pathname = usePathname();
+  const [loading, setLoading] = useState(true);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [questoes, setQuestoes] = useState<Questao[]>(initialQuestoes);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingQuestao, setEditingQuestao] = useState<Questao | null>(null);
+  const [sheetAlternativas, setSheetAlternativas] = useState<Alternativa[]>([]);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [questaoToDelete, setQuestaoToDelete] = useState<Questao | null>(null);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  const questaoSchema = z.object({
+    enunciado: z.string().min(5, t('sheet.validation.statementMin')),
+    pontuacao: z.coerce.number().min(0.5, t('sheet.validation.scoreMin')),
+  });
+
+  const form = useForm<QuestaoForm>({
+    resolver: zodResolver(questaoSchema),
+    defaultValues: { enunciado: '', pontuacao: 2 },
+  });
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 600);
+    return () => clearTimeout(timer);
+  }, []);
+
+  function toggleExpand(qId: string) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(qId)) next.delete(qId);
+      else next.add(qId);
+      return next;
+    });
+  }
+
+  function openCreateSheet() {
+    setEditingQuestao(null);
+    form.reset({ enunciado: '', pontuacao: 2 });
+    setSheetAlternativas([
+      { id: generateId(), texto: '', correta: true },
+      { id: generateId(), texto: '', correta: false },
+    ]);
+    setSheetOpen(true);
+  }
+
+  function openEditSheet(questao: Questao) {
+    setEditingQuestao(questao);
+    form.reset({ enunciado: questao.enunciado, pontuacao: questao.pontuacao });
+    setSheetAlternativas(questao.alternativas.map((a) => ({ ...a })));
+    setSheetOpen(true);
+  }
+
+  function addAlternativa() {
+    setSheetAlternativas((prev) => [
+      ...prev,
+      { id: generateId(), texto: '', correta: false },
+    ]);
+  }
+
+  function removeAlternativa(altId: string) {
+    setSheetAlternativas((prev) => prev.filter((a) => a.id !== altId));
+  }
+
+  function toggleCorreta(altId: string) {
+    setSheetAlternativas((prev) =>
+      prev.map((a) => ({ ...a, correta: a.id === altId }))
+    );
+  }
+
+  function updateAlternativaTexto(altId: string, texto: string) {
+    setSheetAlternativas((prev) =>
+      prev.map((a) => (a.id === altId ? { ...a, texto } : a))
+    );
+  }
+
+  function handleAltDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setSheetAlternativas((items) => {
+        const oldIndex = items.findIndex((i) => i.id === active.id);
+        const newIndex = items.findIndex((i) => i.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  }
+
+  function onSubmit(data: QuestaoForm) {
+    const hasCorreta = sheetAlternativas.some((a) => a.correta);
+    const allHaveText = sheetAlternativas.every(
+      (a) => a.texto.trim().length > 0
+    );
+
+    if (!hasCorreta) {
+      toast.error(t('toasts.noCorrectAnswer'));
+      return;
+    }
+    if (!allHaveText) {
+      toast.error(t('toasts.allMustHaveText'));
+      return;
+    }
+    if (sheetAlternativas.length < 2) {
+      toast.error(t('toasts.minAlternatives'));
+      return;
+    }
+
+    if (editingQuestao) {
+      setQuestoes((prev) =>
+        prev.map((q) =>
+          q.id === editingQuestao.id
+            ? {
+                ...q,
+                enunciado: data.enunciado,
+                pontuacao: data.pontuacao,
+                alternativas: sheetAlternativas,
+              }
+            : q
+        )
+      );
+      toast.success(t('toasts.questionUpdated'));
+    } else {
+      const nova: Questao = {
+        id: generateId(),
+        enunciado: data.enunciado,
+        pontuacao: data.pontuacao,
+        alternativas: sheetAlternativas,
+      };
+      setQuestoes((prev) => [...prev, nova]);
+      toast.success(t('toasts.questionCreated'));
+    }
+    setHasChanges(true);
+    setSheetOpen(false);
+  }
+
+  function confirmDelete() {
+    if (questaoToDelete) {
+      setQuestoes((prev) => prev.filter((q) => q.id !== questaoToDelete.id));
+      setHasChanges(true);
+      toast.success(t('toasts.questionRemoved'));
+      setQuestaoToDelete(null);
+      setDeleteDialogOpen(false);
+    }
+  }
+
+  function duplicateQuestao(questao: Questao) {
+    const nova: Questao = {
+      ...questao,
+      id: generateId(),
+      enunciado: `${questao.enunciado}${t('copySuffix')}`,
+      alternativas: questao.alternativas.map((a) => ({
+        ...a,
+        id: generateId(),
+      })),
+    };
+    setQuestoes((prev) => {
+      const idx = prev.findIndex((q) => q.id === questao.id);
+      const next = [...prev];
+      next.splice(idx + 1, 0, nova);
+      return next;
+    });
+    setHasChanges(true);
+    toast.success(t('toasts.questionDuplicated'));
+  }
+
+  function handleQuestionDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setQuestoes((items) => {
+        const oldIndex = items.findIndex((i) => i.id === active.id);
+        const newIndex = items.findIndex((i) => i.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+      setHasChanges(true);
+    }
+  }
+
+  function handleSave() {
+    setHasChanges(false);
+    toast.success(t('toasts.changesSaved'));
+  }
+
+  const totalPontuacao = questoes.reduce((a, q) => a + q.pontuacao, 0);
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description', {
+          code: 'EX-001',
+          count: questoes.length,
+          total: totalPontuacao,
+        })}
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('breadcrumbs.exams'),
+            href: '/lms/exams',
+          },
+          {
+            label: t('breadcrumbs.questions'),
+          },
+        ]}
+        actions={
+          <div className="flex items-center gap-2">
+            <AnimatePresence>
+              {hasChanges && (
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                >
+                  <Button
+                    onClick={handleSave}
+                    className="gap-2"
+                    variant="outline"
+                  >
+                    <Save className="size-4" /> {t('actions.save')}
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+            <Button onClick={openCreateSheet} className="gap-2">
+              <Plus className="size-4" /> {t('actions.newQuestion')}
+            </Button>
+          </div>
+        }
+      />
+
+      <div className="pb-10">
+        {/* Breadcrumb + actions */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4 }}
+        >
+          {/* Stats */}
+          {!loading && (
+            <div className="mb-6 grid grid-cols-3 gap-4">
+              {[
+                { label: t('stats.questions'), valor: questoes.length },
+                { label: t('stats.totalScore'), valor: totalPontuacao },
+                {
+                  label: t('stats.avgAlternatives'),
+                  valor:
+                    questoes.length > 0
+                      ? (
+                          questoes.reduce(
+                            (a, q) => a + q.alternativas.length,
+                            0
+                          ) / questoes.length
+                        ).toFixed(1)
+                      : '0',
+                },
+              ].map((stat, i) => (
+                <motion.div
+                  key={stat.label}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: i * 0.08 }}
+                >
+                  <Card>
+                    <CardContent className="p-4 text-center">
+                      <p className="text-2xl font-bold">{stat.valor}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {stat.label}
+                      </p>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+          )}
+
+          {/* Questions list */}
+          {loading ? (
+            <div className="flex flex-col gap-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Card key={i}>
+                  <CardContent className="p-4">
+                    <div className="flex items-center gap-3">
+                      <Skeleton className="size-8 rounded-full" />
+                      <div className="flex-1">
+                        <Skeleton className="mb-2 h-5 w-3/4" />
+                        <Skeleton className="h-4 w-1/4" />
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : questoes.length === 0 ? (
+            <Card>
+              <CardContent className="flex flex-col items-center gap-3 py-16">
+                <div className="flex size-12 items-center justify-center rounded-full bg-muted">
+                  <FileCheck className="size-6 text-muted-foreground" />
+                </div>
+                <p className="font-medium">{t('empty.title')}</p>
+                <p className="text-sm text-muted-foreground">
+                  {t('empty.description')}
+                </p>
+                <Button onClick={openCreateSheet} className="mt-2 gap-2">
+                  <Plus className="size-4" /> {t('empty.action')}
+                </Button>
+              </CardContent>
+            </Card>
+          ) : (
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleQuestionDragEnd}
+            >
+              <SortableContext
+                items={questoes.map((q) => q.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <div className="flex flex-col gap-3">
+                  <AnimatePresence>
+                    {questoes.map((questao, qIndex) => {
+                      const isExpanded = expandedIds.has(questao.id);
+                      return (
+                        <SortableQuestao
+                          key={questao.id}
+                          questao={questao}
+                          qIndex={qIndex}
+                          isExpanded={isExpanded}
+                          onToggleExpand={() => toggleExpand(questao.id)}
+                          onEdit={() => openEditSheet(questao)}
+                          onDuplicate={() => duplicateQuestao(questao)}
+                          onDelete={() => {
+                            setQuestaoToDelete(questao);
+                            setDeleteDialogOpen(true);
+                          }}
+                        />
+                      );
+                    })}
+                  </AnimatePresence>
+                </div>
+              </SortableContext>
+            </DndContext>
+          )}
+        </motion.div>
+      </div>
+
+      {/* Create/Edit Sheet */}
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent className="overflow-y-auto sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>
+              {editingQuestao ? t('sheet.titleEdit') : t('sheet.titleCreate')}
+            </SheetTitle>
+            <SheetDescription>
+              {editingQuestao
+                ? t('sheet.descriptionEdit')
+                : t('sheet.descriptionCreate')}
+            </SheetDescription>
+          </SheetHeader>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-5 px-4 pb-4"
+          >
+            <Field data-invalid={!!form.formState.errors.enunciado}>
+              <FieldLabel htmlFor="enunciado">
+                {t('sheet.fields.statement')}
+              </FieldLabel>
+              <Textarea
+                id="enunciado"
+                rows={3}
+                placeholder={t('sheet.fields.statementPlaceholder')}
+                {...form.register('enunciado')}
+              />
+              {form.formState.errors.enunciado && (
+                <p className="text-sm text-destructive">
+                  {form.formState.errors.enunciado.message}
+                </p>
+              )}
+            </Field>
+
+            <Field data-invalid={!!form.formState.errors.pontuacao}>
+              <FieldLabel htmlFor="pontuacao">
+                {t('sheet.fields.score')}
+              </FieldLabel>
+              <Input
+                id="pontuacao"
+                type="number"
+                step="0.5"
+                placeholder={t('sheet.fields.scorePlaceholder')}
+                {...form.register('pontuacao')}
+              />
+              {form.formState.errors.pontuacao && (
+                <p className="text-sm text-destructive">
+                  {form.formState.errors.pontuacao.message}
+                </p>
+              )}
+            </Field>
+
+            <Separator />
+
+            {/* Alternatives with dnd */}
+            <div>
+              <div className="mb-3 flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">
+                    {t('sheet.fields.alternatives')}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {t('sheet.fields.alternativesDescription')}
+                  </p>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="gap-1.5"
+                  onClick={addAlternativa}
+                >
+                  <Plus className="size-3.5" /> {t('sheet.actions.add')}
+                </Button>
+              </div>
+
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleAltDragEnd}
+              >
+                <SortableContext
+                  items={sheetAlternativas.map((a) => a.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <div className="flex flex-col gap-2">
+                    {sheetAlternativas.map((alt, i) => (
+                      <SortableAlternativa
+                        key={alt.id}
+                        alt={alt}
+                        index={i}
+                        onToggleCorrect={() => toggleCorreta(alt.id)}
+                        onChangeTexto={(t) => updateAlternativaTexto(alt.id, t)}
+                        onRemove={() => removeAlternativa(alt.id)}
+                        canRemove={sheetAlternativas.length > 2}
+                      />
+                    ))}
+                  </div>
+                </SortableContext>
+              </DndContext>
+
+              {sheetAlternativas.length < 2 && (
+                <p className="mt-2 text-sm text-destructive">
+                  {t('sheet.validation.minAlternatives')}
+                </p>
+              )}
+            </div>
+
+            <SheetFooter className="gap-2 p-0 pt-4">
+              <Button type="submit">
+                {editingQuestao
+                  ? t('sheet.actions.update')
+                  : t('sheet.actions.create')}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      {/* Delete Dialog */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-destructive" />
+              {t('deleteDialog.title')}
+            </DialogTitle>
+            <DialogDescription>
+              {t('deleteDialog.description')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setDeleteDialogOpen(false)}
+            >
+              {t('deleteDialog.actions.cancel')}
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              {t('deleteDialog.actions.confirm')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Page>
+  );
+}