'use client';

import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Ruler,
  Plus,
  Pencil,
  Trash2,
  Copy,
  Search,
  Filter,
  Loader2,
  Eye,
  Printer,
  Lock,
  Globe,
  ChevronDown,
  ChevronUp,
  X,
  GripVertical,
  BarChart3,
  GraduationCap,
  FileDown,
  LayoutTemplate,
  CheckCircle2,
  Calculator,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Switch } from '@/components/ui/switch';
import { Progress } from '@/components/ui/progress';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Separator } from '@/components/ui/separator';
import { useAppStore } from '@/lib/store';
import { t } from '@/lib/i18n';
import {
  fetchRubrics,
  createRubric,
  updateRubric,
  deleteRubric,
  duplicateRubric,
  fetchSubjects,
  fetchRubricTemplates,
  fetchRubricAnalytics,
  gradeWithRubric,
  type Rubric,
  type RubricCriterion,
  type RubricLevel,
  type RubricCriterionInput,
  type RubricLevelInput,
  type Subject,
  type RubricTemplate,
  type RubricAnalytics,
  type RubricGradeResult,
} from '@/lib/api';
import { toast } from 'sonner';

/* ── Helpers ─────────────────────────────────────────────────────── */

interface CriterionDraft {
  id?: string;
  name: string;
  description: string;
  weight: number;
  maxPoints: number;
  order: number;
  levels: LevelDraft[];
}

interface LevelDraft {
  id?: string;
  label: string;
  description: string;
  points: number;
  order: number;
}

function emptyCriterion(order: number): CriterionDraft {
  return {
    name: '',
    description: '',
    weight: 1.0,
    maxPoints: 25,
    order,
    levels: [
      { label: '', description: '', points: 25, order: 0 },
      { label: '', description: '', points: 19, order: 1 },
      { label: '', description: '', points: 12, order: 2 },
      { label: '', description: '', points: 6, order: 3 },
    ],
  };
}

function rubricToDraft(r: Rubric): {
  title: string;
  description: string;
  type: 'ANALYTIC' | 'HOLISTIC';
  subjectId: string;
  maxPoints: number;
  isPublic: boolean;
  criteria: CriterionDraft[];
} {
  return {
    title: r.title,
    description: r.description ?? '',
    type: r.type as 'ANALYTIC' | 'HOLISTIC',
    subjectId: r.subjectId ?? '',
    maxPoints: r.maxPoints,
    isPublic: r.isPublic,
    criteria: r.criteria.map((c, ci) => ({
      id: c.id,
      name: c.name,
      description: c.description ?? '',
      weight: c.weight,
      maxPoints: c.maxPoints,
      order: ci,
      levels: c.levels.map((l, li) => ({
        id: l.id,
        label: l.label,
        description: l.description,
        points: l.points,
        order: li,
      })),
    })),
  };
}

const LEVEL_COLORS = ['bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300', 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300', 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300', 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300'];

const LEVEL_HEADER_COLORS = ['bg-emerald-500', 'bg-teal-500', 'bg-amber-500', 'bg-rose-500'];

/* ── Main Component ──────────────────────────────────────────────── */

export default function RubricLibraryView() {
  const currentUser = useAppStore((s) => s.currentUser);
  const schoolId = currentUser?.schoolId;

  const [rubrics, setRubrics] = useState<Rubric[]>([]);
  const [subjects, setSubjects] = useState<Subject[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [subjectFilter, setSubjectFilter] = useState('all');
  const [showMyOnly, setShowMyOnly] = useState(false);

  // Dialogs
  const [formOpen, setFormOpen] = useState(false);
  const [editingRubric, setEditingRubric] = useState<Rubric | null>(null);
  const [detailOpen, setDetailOpen] = useState(false);
  const [detailRubric, setDetailRubric] = useState<Rubric | null>(null);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [deletingRubric, setDeletingRubric] = useState<Rubric | null>(null);
  const [saving, setSaving] = useState(false);
  const [formTab, setFormTab] = useState('edit');

  // Template dialog
  const [templateOpen, setTemplateOpen] = useState(false);
  const [templates, setTemplates] = useState<RubricTemplate[]>([]);
  const [templatesLoading, setTemplatesLoading] = useState(false);

  // Analytics dialog
  const [analyticsOpen, setAnalyticsOpen] = useState(false);
  const [analyticsData, setAnalyticsData] = useState<RubricAnalytics | null>(null);
  const [analyticsLoading, setAnalyticsLoading] = useState(false);

  // Grading dialog
  const [gradeOpen, setGradeOpen] = useState(false);
  const [gradingRubric, setGradingRubric] = useState<Rubric | null>(null);
  const [gradeScores, setGradeScores] = useState<Record<string, { levelId: string; points: number }>>({});
  const [gradeResult, setGradeResult] = useState<RubricGradeResult | null>(null);
  const [gradingCalc, setGradingCalc] = useState(false);

  // Form state
  const [formTitle, setFormTitle] = useState('');
  const [formDescription, setFormDescription] = useState('');
  const [formType, setFormType] = useState<'ANALYTIC' | 'HOLISTIC'>('ANALYTIC');
  const [formSubjectId, setFormSubjectId] = useState('');
  const [formMaxPoints, setFormMaxPoints] = useState(100);
  const [formIsPublic, setFormIsPublic] = useState(false);
  const [formCriteria, setFormCriteria] = useState<CriterionDraft[]>([emptyCriterion(0)]);

  const loadRubrics = useCallback(async () => {
    if (!schoolId) return;
    try {
      setLoading(true);
      const data = await fetchRubrics(schoolId);
      setRubrics(data);
    } catch {
      toast.error(t('rubrics.error'));
    } finally {
      setLoading(false);
    }
  }, [schoolId]);

  const loadSubjects = useCallback(async () => {
    if (!schoolId) return;
    try {
      const data = await fetchSubjects(schoolId);
      setSubjects(data);
    } catch {
      // silent
    }
  }, [schoolId]);

  useEffect(() => {
    loadRubrics();
    loadSubjects();
  }, [loadRubrics, loadSubjects]);

  // Filtered rubrics
  const filtered = useMemo(() => {
    let result = rubrics;
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      result = result.filter(
        (r) =>
          r.title.toLowerCase().includes(q) ||
          (r.description ?? '').toLowerCase().includes(q)
      );
    }
    if (subjectFilter && subjectFilter !== 'all') {
      result = result.filter((r) => r.subjectId === subjectFilter);
    }
    if (showMyOnly && currentUser) {
      result = result.filter((r) => r.teacherId === currentUser.id);
    }
    return result;
  }, [rubrics, searchQuery, subjectFilter, showMyOnly, currentUser]);

  /* ── Form helpers ─────────────────────────────────────────────── */

  const openCreateForm = () => {
    setEditingRubric(null);
    setFormTitle('');
    setFormDescription('');
    setFormType('ANALYTIC');
    setFormSubjectId('');
    setFormMaxPoints(100);
    setFormIsPublic(false);
    setFormCriteria([emptyCriterion(0)]);
    setFormTab('edit');
    setFormOpen(true);
  };

  const openEditForm = (r: Rubric) => {
    const draft = rubricToDraft(r);
    setEditingRubric(r);
    setFormTitle(draft.title);
    setFormDescription(draft.description);
    setFormType(draft.type);
    setFormSubjectId(draft.subjectId);
    setFormMaxPoints(draft.maxPoints);
    setFormIsPublic(draft.isPublic);
    setFormCriteria(draft.criteria);
    setFormTab('edit');
    setFormOpen(true);
  };

  const openTemplateDialog = async () => {
    setTemplateOpen(true);
    setTemplatesLoading(true);
    try {
      const data = await fetchRubricTemplates();
      setTemplates(data);
    } catch {
      toast.error(t('rubrics.error'));
    } finally {
      setTemplatesLoading(false);
    }
  };

  const applyTemplate = (template: RubricTemplate) => {
    setEditingRubric(null);
    setFormTitle(template.title);
    setFormDescription(template.description);
    setFormType(template.type);
    setFormMaxPoints(template.maxPoints);
    setFormIsPublic(false);
    // Find matching subject
    const matchingSubject = subjects.find((s) => s.name === template.subject);
    setFormSubjectId(matchingSubject?.id ?? '');
    setFormCriteria(
      template.criteria.map((c, ci) => ({
        name: c.name,
        description: c.description,
        weight: c.weight,
        maxPoints: c.maxPoints,
        order: ci,
        levels: c.levels.map((l, li) => ({
          label: l.label,
          description: l.description,
          points: l.points,
          order: li,
        })),
      }))
    );
    setFormTab('edit');
    setTemplateOpen(false);
    setFormOpen(true);
  };

  const addCriterion = () => {
    setFormCriteria((prev) => [...prev, emptyCriterion(prev.length)]);
  };

  const removeCriterion = (idx: number) => {
    setFormCriteria((prev) => prev.filter((_, i) => i !== idx).map((c, i) => ({ ...c, order: i })));
  };

  const updateCriterion = (idx: number, field: keyof CriterionDraft, value: unknown) => {
    setFormCriteria((prev) =>
      prev.map((c, i) => (i === idx ? { ...c, [field]: value } : c))
    );
  };

  const addLevel = (cIdx: number) => {
    setFormCriteria((prev) =>
      prev.map((c, i) =>
        i === cIdx
          ? { ...c, levels: [...c.levels, { label: '', description: '', points: 0, order: c.levels.length }] }
          : c
      )
    );
  };

  const removeLevel = (cIdx: number, lIdx: number) => {
    setFormCriteria((prev) =>
      prev.map((c, i) =>
        i === cIdx
          ? { ...c, levels: c.levels.filter((_, li) => li !== lIdx).map((l, li) => ({ ...l, order: li })) }
          : c
      )
    );
  };

  const updateLevel = (cIdx: number, lIdx: number, field: keyof LevelDraft, value: unknown) => {
    setFormCriteria((prev) =>
      prev.map((c, i) =>
        i === cIdx
          ? {
              ...c,
              levels: c.levels.map((l, li) => (li === lIdx ? { ...l, [field]: value } : l)),
            }
          : c
      )
    );
  };

  const handleSave = async () => {
    if (!formTitle.trim()) {
      toast.error(t('rubrics.title_required'));
      return;
    }
    if (formCriteria.length === 0) {
      toast.error(t('rubrics.criteria_required'));
      return;
    }
    for (const c of formCriteria) {
      if (c.levels.length === 0) {
        toast.error(t('rubrics.levels_required'));
        return;
      }
    }

    const criteriaPayload: RubricCriterionInput[] = formCriteria.map((c, ci) => ({
      id: c.id,
      name: c.name,
      description: c.description || null,
      weight: c.weight,
      maxPoints: c.maxPoints,
      order: ci,
      levels: c.levels.map((l, li) => ({
        id: l.id,
        label: l.label,
        description: l.description,
        points: l.points,
        order: li,
      })),
    }));

    try {
      setSaving(true);
      if (editingRubric) {
        await updateRubric(editingRubric.id, {
          title: formTitle,
          description: formDescription || null,
          type: formType,
          subjectId: formSubjectId || null,
          maxPoints: formMaxPoints,
          isPublic: formIsPublic,
          criteria: criteriaPayload,
        });
      } else {
        if (!schoolId) return;
        await createRubric({
          schoolId,
          title: formTitle,
          description: formDescription || null,
          type: formType,
          subjectId: formSubjectId || null,
          maxPoints: formMaxPoints,
          isPublic: formIsPublic,
          criteria: criteriaPayload,
        });
      }
      toast.success(t('rubrics.saved'));
      setFormOpen(false);
      loadRubrics();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : t('rubrics.error'));
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!deletingRubric) return;
    try {
      await deleteRubric(deletingRubric.id);
      toast.success(t('rubrics.deleted'));
      setDeleteOpen(false);
      setDeletingRubric(null);
      loadRubrics();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : t('rubrics.error'));
    }
  };

  const handleDuplicate = async (r: Rubric) => {
    try {
      await duplicateRubric(r.id);
      toast.success(t('rubrics.duplicated'));
      loadRubrics();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : t('rubrics.error'));
    }
  };

  const openDetail = (r: Rubric) => {
    setDetailRubric(r);
    setDetailOpen(true);
  };

  const handlePrint = () => {
    window.print();
  };

  /* ── Analytics ──────────────────────────────────────────────────── */

  const openAnalytics = async (r: Rubric) => {
    setAnalyticsOpen(true);
    setAnalyticsLoading(true);
    setAnalyticsData(null);
    try {
      const data = await fetchRubricAnalytics(r.id);
      setAnalyticsData(data);
    } catch {
      toast.error(t('rubrics.error'));
    } finally {
      setAnalyticsLoading(false);
    }
  };

  /* ── Grading ────────────────────────────────────────────────────── */

  const openGrading = (r: Rubric) => {
    setGradingRubric(r);
    setGradeScores({});
    setGradeResult(null);
    setGradeOpen(true);
  };

  const selectLevel = (criterionId: string, levelId: string, points: number) => {
    setGradeScores((prev) => ({ ...prev, [criterionId]: { levelId, points } }));
    setGradeResult(null); // Reset result when scores change
  };

  const autoCalculateGrade = () => {
    if (!gradingRubric) return;
    const scores = Object.entries(gradeScores).map(([criterionId, data]) => ({
      criterionId,
      levelId: data.levelId,
      points: data.points,
    }));
    if (scores.length < gradingRubric.criteria.length) {
      toast.error(t('rubrics.select_level'));
      return;
    }
    setGradingCalc(true);
    gradeWithRubric(gradingRubric.id, {
      studentId: 'preview',
      scores,
    })
      .then((result) => {
        setGradeResult(result);
      })
      .catch(() => {
        toast.error(t('rubrics.error'));
      })
      .finally(() => {
        setGradingCalc(false);
      });
  };

  /* ── Render ───────────────────────────────────────────────────── */

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <Loader2 className="h-8 w-8 animate-spin text-emerald-500" />
      </div>
    );
  }

  return (
    <div className="space-y-6 p-4 md:p-6">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"
      >
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-lg">
            <Ruler className="h-5 w-5" />
          </div>
          <div>
            <h1 className="text-2xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
              {t('rubrics.title')}
            </h1>
            <p className="text-sm text-muted-foreground">{t('rubrics.subtitle')}</p>
          </div>
        </div>
        <div className="flex gap-2">
          <Button
            variant="outline"
            onClick={openTemplateDialog}
            className="border-emerald-300 dark:border-emerald-700"
          >
            <LayoutTemplate className="h-4 w-4 mr-2" />
            {t('rubrics.templates')}
          </Button>
          <Button
            onClick={openCreateForm}
            className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white shadow-md"
          >
            <Plus className="h-4 w-4 mr-2" />
            {t('rubrics.create')}
          </Button>
        </div>
      </motion.div>

      {/* Filters */}
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="flex flex-col sm:flex-row gap-3"
      >
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder={t('rubrics.search_placeholder')}
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9"
          />
        </div>
        <Select value={subjectFilter} onValueChange={setSubjectFilter}>
          <SelectTrigger className="w-full sm:w-48">
            <SelectValue placeholder={t('rubrics.filter_subject')} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t('rubrics.all_subjects')}</SelectItem>
            {subjects.map((s) => (
              <SelectItem key={s.id} value={s.id}>
                {s.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Button
          variant={showMyOnly ? 'default' : 'outline'}
          size="sm"
          onClick={() => setShowMyOnly(!showMyOnly)}
          className={showMyOnly ? 'bg-emerald-600 hover:bg-emerald-700 text-white' : ''}
        >
          <Filter className="h-4 w-4 mr-1" />
          {showMyOnly ? t('rubrics.filter_public') : t('rubrics.filter_all')}
        </Button>
      </motion.div>

      {/* Grid */}
      {filtered.length === 0 ? (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="flex flex-col items-center justify-center py-16 text-center"
        >
          <div className="h-16 w-16 rounded-2xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center mb-4">
            <Ruler className="h-8 w-8 text-emerald-500" />
          </div>
          <h3 className="text-lg font-semibold mb-2">{t('rubrics.empty_title')}</h3>
          <p className="text-muted-foreground max-w-md mb-6">{t('rubrics.empty_desc')}</p>
          <div className="flex gap-3">
            <Button
              variant="outline"
              onClick={openTemplateDialog}
            >
              <LayoutTemplate className="h-4 w-4 mr-2" />
              {t('rubrics.templates')}
            </Button>
            <Button
              onClick={openCreateForm}
              className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white"
            >
              <Plus className="h-4 w-4 mr-2" />
              {t('rubrics.empty_create')}
            </Button>
          </div>
        </motion.div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <AnimatePresence mode="popLayout">
            {filtered.map((rubric, idx) => (
              <motion.div
                key={rubric.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ delay: idx * 0.05 }}
                layout
              >
                <Card
                  className="hover:shadow-lg transition-shadow cursor-pointer border-l-4 border-l-emerald-500 group"
                  onClick={() => openDetail(rubric)}
                >
                  <CardHeader className="pb-3">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1 min-w-0">
                        <CardTitle className="text-base font-semibold truncate">
                          {rubric.title}
                        </CardTitle>
                        {rubric.description && (
                          <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                            {rubric.description}
                          </p>
                        )}
                      </div>
                      <div className="flex items-center gap-1.5 shrink-0">
                        <Badge
                          className={
                            rubric.type === 'ANALYTIC'
                              ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300'
                              : 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300'
                          }
                        >
                          {rubric.type === 'ANALYTIC'
                            ? t('rubrics.type_analytic')
                            : t('rubrics.type_holistic')}
                        </Badge>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <div className="flex flex-wrap gap-2 mb-3">
                      {rubric.subject && (
                        <Badge variant="outline" className="text-xs">
                          {rubric.subject.name}
                        </Badge>
                      )}
                      <Badge variant="outline" className="text-xs">
                        {t('rubrics.criteria_count', { count: rubric.criteria.length })}
                      </Badge>
                      <Badge variant="outline" className="text-xs">
                        {rubric.maxPoints} {t('rubrics.points')}
                      </Badge>
                      <Badge
                        className={
                          rubric.isPublic
                            ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300'
                            : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400'
                        }
                      >
                        {rubric.isPublic ? (
                          <Globe className="h-3 w-3 mr-1" />
                        ) : (
                          <Lock className="h-3 w-3 mr-1" />
                        )}
                        {rubric.isPublic ? t('rubrics.public') : t('rubrics.private')}
                      </Badge>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-muted-foreground">
                        {t('rubrics.by_teacher')}{' '}
                        {rubric.teacher
                          ? `${rubric.teacher.firstName} ${rubric.teacher.lastName}`
                          : ''}
                      </span>
                      <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            openGrading(rubric);
                          }}
                          className="h-8 w-8 p-0"
                          title={t('rubrics.grade')}
                        >
                          <GraduationCap className="h-3.5 w-3.5" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            openAnalytics(rubric);
                          }}
                          className="h-8 w-8 p-0"
                          title={t('rubrics.analytics')}
                        >
                          <BarChart3 className="h-3.5 w-3.5" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            openEditForm(rubric);
                          }}
                          className="h-8 w-8 p-0"
                        >
                          <Pencil className="h-3.5 w-3.5" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleDuplicate(rubric);
                          }}
                          className="h-8 w-8 p-0"
                        >
                          <Copy className="h-3.5 w-3.5" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            setDeletingRubric(rubric);
                            setDeleteOpen(true);
                          }}
                          className="h-8 w-8 p-0 text-rose-500 hover:text-rose-700"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      )}

      {/* ── Template Dialog ─────────────────────────────────────────── */}
      <Dialog open={templateOpen} onOpenChange={setTemplateOpen}>
        <DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <LayoutTemplate className="h-5 w-5 text-emerald-500" />
              {t('rubrics.templates_title')}
            </DialogTitle>
            <DialogDescription>{t('rubrics.templates_desc')}</DialogDescription>
          </DialogHeader>

          {templatesLoading ? (
            <div className="flex items-center justify-center py-12">
              <Loader2 className="h-8 w-8 animate-spin text-emerald-500" />
            </div>
          ) : (
            <div className="space-y-3">
              {templates.map((template) => (
                <Card
                  key={template.id}
                  className="hover:shadow-md transition-shadow cursor-pointer border-l-4 border-l-teal-500"
                  onClick={() => applyTemplate(template)}
                >
                  <CardHeader className="pb-2">
                    <div className="flex items-start justify-between">
                      <div>
                        <CardTitle className="text-sm font-semibold">{template.title}</CardTitle>
                        <p className="text-xs text-muted-foreground mt-1">{template.description}</p>
                      </div>
                      <Badge variant="outline" className="text-xs shrink-0">
                        {template.subject}
                      </Badge>
                    </div>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <div className="flex flex-wrap gap-2 mb-2">
                      <Badge variant="outline" className="text-xs">
                        {template.criteria.length} {t('rubrics.criteria')}
                      </Badge>
                      <Badge variant="outline" className="text-xs">
                        {template.maxPoints} {t('rubrics.points')}
                      </Badge>
                    </div>
                    <div className="flex flex-wrap gap-1">
                      {template.criteria.map((c) => (
                        <span
                          key={c.name}
                          className="text-xs bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300 px-2 py-0.5 rounded"
                        >
                          {c.name}
                        </span>
                      ))}
                    </div>
                    <Button
                      size="sm"
                      className="mt-3 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white"
                      onClick={(e) => {
                        e.stopPropagation();
                        applyTemplate(template);
                      }}
                    >
                      {t('rubrics.use_template')}
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}

          <DialogFooter>
            <Button variant="outline" onClick={openCreateForm}>
              <Plus className="h-4 w-4 mr-2" />
              {t('rubrics.no_template')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Create/Edit Dialog ─────────────────────────────────────── */}
      <Dialog open={formOpen} onOpenChange={(open) => {
        if (!open && saving) return;
        setFormOpen(open);
      }}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {editingRubric ? t('rubrics.edit') : t('rubrics.create')}
            </DialogTitle>
            <DialogDescription>
              {t('rubrics.subtitle')}
            </DialogDescription>
          </DialogHeader>

          <Tabs value={formTab} onValueChange={setFormTab}>
            <TabsList className="w-full">
              <TabsTrigger value="edit" className="flex-1">
                {t('rubrics.edit_form')}
              </TabsTrigger>
              <TabsTrigger value="preview" className="flex-1">
                {t('rubrics.preview')}
              </TabsTrigger>
            </TabsList>

            <TabsContent value="edit" className="space-y-4 mt-4">
              {/* Basic info */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>{t('rubrics.field.title')}</Label>
                  <Input
                    value={formTitle}
                    onChange={(e) => setFormTitle(e.target.value)}
                    placeholder={t('rubrics.field.title')}
                  />
                </div>
                <div className="space-y-2">
                  <Label>{t('rubrics.field.type')}</Label>
                  <Select value={formType} onValueChange={(v) => setFormType(v as 'ANALYTIC' | 'HOLISTIC')}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="ANALYTIC">{t('rubrics.type_analytic')}</SelectItem>
                      <SelectItem value="HOLISTIC">{t('rubrics.type_holistic')}</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>{t('rubrics.field.subject')}</Label>
                  <Select value={formSubjectId || '__none__'} onValueChange={(v) => setFormSubjectId(v === '__none__' ? '' : v)}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">{t('rubrics.no_subject')}</SelectItem>
                      {subjects.map((s) => (
                        <SelectItem key={s.id} value={s.id}>
                          {s.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>{t('rubrics.field.max_points')}</Label>
                  <Input
                    type="number"
                    min={1}
                    value={formMaxPoints}
                    onChange={(e) => setFormMaxPoints(parseInt(e.target.value) || 100)}
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label>{t('rubrics.field.description')}</Label>
                <Textarea
                  value={formDescription}
                  onChange={(e) => setFormDescription(e.target.value)}
                  placeholder={t('rubrics.field.description')}
                  rows={2}
                />
              </div>
              <div className="flex items-center gap-3">
                <Switch
                  checked={formIsPublic}
                  onCheckedChange={setFormIsPublic}
                />
                <div>
                  <Label>{t('rubrics.field.is_public')}</Label>
                  <p className="text-xs text-muted-foreground">{t('rubrics.field.is_public_hint')}</p>
                </div>
              </div>

              <Separator />

              {/* Criteria */}
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold text-sm">{t('rubrics.criteria')}</h3>
                  <Button variant="outline" size="sm" onClick={addCriterion}>
                    <Plus className="h-3.5 w-3.5 mr-1" />
                    {t('rubrics.add_criterion')}
                  </Button>
                </div>

                {formCriteria.map((criterion, cIdx) => (
                  <Card key={cIdx} className="border-l-4 border-l-teal-500">
                    <CardHeader className="pb-3">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <GripVertical className="h-4 w-4 text-muted-foreground" />
                          <span className="font-medium text-sm">
                            {t('rubrics.criterion')} {cIdx + 1}
                          </span>
                        </div>
                        {formCriteria.length > 1 && (
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => removeCriterion(cIdx)}
                            className="text-rose-500 hover:text-rose-700 h-7 px-2"
                          >
                            <Trash2 className="h-3.5 w-3.5 mr-1" />
                            {t('rubrics.remove_criterion')}
                          </Button>
                        )}
                      </div>
                    </CardHeader>
                    <CardContent className="pt-0 space-y-3">
                      <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
                        <div className="sm:col-span-2 space-y-1">
                          <Label className="text-xs">{t('rubrics.criterion_name')}</Label>
                          <Input
                            value={criterion.name}
                            onChange={(e) => updateCriterion(cIdx, 'name', e.target.value)}
                            placeholder={t('rubrics.criterion_name')}
                          />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs">{t('rubrics.criterion_weight')}</Label>
                          <Input
                            type="number"
                            min={0}
                            step={0.5}
                            value={criterion.weight}
                            onChange={(e) => updateCriterion(cIdx, 'weight', parseFloat(e.target.value) || 1)}
                          />
                        </div>
                        <div className="space-y-1">
                          <Label className="text-xs">{t('rubrics.criterion_max_points')}</Label>
                          <Input
                            type="number"
                            min={1}
                            value={criterion.maxPoints}
                            onChange={(e) => updateCriterion(cIdx, 'maxPoints', parseInt(e.target.value) || 25)}
                          />
                        </div>
                      </div>
                      <div className="space-y-1">
                        <Label className="text-xs">{t('rubrics.criterion_description')}</Label>
                        <Input
                          value={criterion.description}
                          onChange={(e) => updateCriterion(cIdx, 'description', e.target.value)}
                          placeholder={t('rubrics.criterion_description')}
                        />
                      </div>

                      {/* Levels */}
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <Label className="text-xs font-medium">{t('rubrics.levels')}</Label>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => addLevel(cIdx)}
                            className="h-6 text-xs"
                          >
                            <Plus className="h-3 w-3 mr-1" />
                            {t('rubrics.add_level')}
                          </Button>
                        </div>
                        {criterion.levels.map((level, lIdx) => (
                          <div
                            key={lIdx}
                            className={`rounded-lg p-3 ${LEVEL_COLORS[lIdx % LEVEL_COLORS.length]}`}
                          >
                            <div className="flex items-center gap-2 mb-2">
                              <span className="text-xs font-medium">
                                {t('rubrics.level')} {lIdx + 1}
                              </span>
                              {criterion.levels.length > 1 && (
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => removeLevel(cIdx, lIdx)}
                                  className="h-5 w-5 p-0 ml-auto"
                                >
                                  <X className="h-3 w-3" />
                                </Button>
                              )}
                            </div>
                            <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
                              <div className="space-y-1">
                                <Label className="text-xs">{t('rubrics.level_label')}</Label>
                                <Input
                                  value={level.label}
                                  onChange={(e) => updateLevel(cIdx, lIdx, 'label', e.target.value)}
                                  placeholder={t('rubrics.level_label')}
                                  className="bg-white/70 dark:bg-black/20"
                                />
                              </div>
                              <div className="space-y-1">
                                <Label className="text-xs">{t('rubrics.level_points')}</Label>
                                <Input
                                  type="number"
                                  min={0}
                                  value={level.points}
                                  onChange={(e) => updateLevel(cIdx, lIdx, 'points', parseInt(e.target.value) || 0)}
                                  className="bg-white/70 dark:bg-black/20"
                                />
                              </div>
                              <div className="space-y-1 sm:col-span-1">
                                <Label className="text-xs">{t('rubrics.level_description')}</Label>
                                <Input
                                  value={level.description}
                                  onChange={(e) => updateLevel(cIdx, lIdx, 'description', e.target.value)}
                                  placeholder={t('rubrics.level_description')}
                                  className="bg-white/70 dark:bg-black/20"
                                />
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>

            <TabsContent value="preview" className="mt-4">
              <RubricPreviewTable
                title={formTitle}
                criteria={formCriteria}
              />
            </TabsContent>
          </Tabs>

          <DialogFooter>
            <Button variant="outline" onClick={() => setFormOpen(false)} disabled={saving}>
              {t('rubrics.cancel')}
            </Button>
            <Button
              onClick={handleSave}
              disabled={saving}
              className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white"
            >
              {saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
              {t('rubrics.save')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Detail Dialog ──────────────────────────────────────────── */}
      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          {detailRubric && (
            <>
              <DialogHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <DialogTitle className="text-xl">{detailRubric.title}</DialogTitle>
                    <DialogDescription>
                      {detailRubric.description}
                    </DialogDescription>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" onClick={() => openGrading(detailRubric)}>
                      <GraduationCap className="h-4 w-4 mr-1" />
                      {t('rubrics.grade')}
                    </Button>
                    <Button variant="outline" size="sm" onClick={() => openAnalytics(detailRubric)}>
                      <BarChart3 className="h-4 w-4 mr-1" />
                      {t('rubrics.analytics')}
                    </Button>
                    <Button variant="outline" size="sm" onClick={handlePrint}>
                      <Printer className="h-4 w-4 mr-1" />
                      {t('rubrics.print')}
                    </Button>
                  </div>
                </div>
              </DialogHeader>

              <div className="flex flex-wrap gap-2 mb-4">
                <Badge
                  className={
                    detailRubric.type === 'ANALYTIC'
                      ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300'
                      : 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300'
                  }
                >
                  {detailRubric.type === 'ANALYTIC'
                    ? t('rubrics.type_analytic')
                    : t('rubrics.type_holistic')}
                </Badge>
                {detailRubric.subject && (
                  <Badge variant="outline">{detailRubric.subject.name}</Badge>
                )}
                <Badge variant="outline">
                  {detailRubric.maxPoints} {t('rubrics.points')}
                </Badge>
                <Badge
                  className={
                    detailRubric.isPublic
                      ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300'
                      : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400'
                  }
                >
                  {detailRubric.isPublic ? t('rubrics.public') : t('rubrics.private')}
                </Badge>
                <Badge variant="outline">
                  {t('rubrics.version')} {detailRubric.version}
                </Badge>
              </div>

              <RubricPreviewTable
                title={detailRubric.title}
                criteria={detailRubric.criteria.map((c, ci) => ({
                  name: c.name,
                  description: c.description ?? '',
                  weight: c.weight,
                  maxPoints: c.maxPoints,
                  order: ci,
                  levels: c.levels.map((l, li) => ({
                    label: l.label,
                    description: l.description,
                    points: l.points,
                    order: li,
                  })),
                }))}
              />
            </>
          )}
        </DialogContent>
      </Dialog>

      {/* ── Grading Dialog ─────────────────────────────────────────── */}
      <Dialog open={gradeOpen} onOpenChange={setGradeOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <GraduationCap className="h-5 w-5 text-emerald-500" />
              {t('rubrics.grade_title')}
            </DialogTitle>
            <DialogDescription>
              {gradingRubric?.title}
            </DialogDescription>
          </DialogHeader>

          {gradingRubric && (
            <div className="space-y-4">
              {/* Score Sheet */}
              <div className="space-y-3">
                {gradingRubric.criteria.map((criterion) => (
                  <Card key={criterion.id} className="border-l-4 border-l-teal-500">
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <div>
                          <CardTitle className="text-sm font-semibold">{criterion.name}</CardTitle>
                          {criterion.description && (
                            <p className="text-xs text-muted-foreground mt-0.5">{criterion.description}</p>
                          )}
                        </div>
                        <Badge variant="outline" className="text-xs">
                          {criterion.maxPoints} {t('rubrics.points')}
                        </Badge>
                      </div>
                    </CardHeader>
                    <CardContent className="pt-0">
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        {criterion.levels.map((level) => {
                          const isSelected = gradeScores[criterion.id]?.levelId === level.id;
                          return (
                            <motion.button
                              key={level.id}
                              whileHover={{ scale: 1.02 }}
                              whileTap={{ scale: 0.98 }}
                              onClick={() => selectLevel(criterion.id, level.id, level.points)}
                              className={`text-left p-3 rounded-lg border-2 transition-all ${
                                isSelected
                                  ? 'border-emerald-500 bg-emerald-50 dark:bg-emerald-900/20 shadow-md'
                                  : 'border-gray-200 dark:border-gray-700 hover:border-emerald-300'
                              }`}
                            >
                              <div className="flex items-center justify-between mb-1">
                                <span className="font-medium text-sm">{level.label}</span>
                                <Badge
                                  variant="outline"
                                  className={`text-xs ${isSelected ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300' : ''}`}
                                >
                                  {level.points} {t('rubrics.points')}
                                </Badge>
                              </div>
                              <p className="text-xs text-muted-foreground">{level.description}</p>
                              {isSelected && (
                                <CheckCircle2 className="h-4 w-4 text-emerald-500 mt-1" />
                              )}
                            </motion.button>
                          );
                        })}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

              {/* Auto-Grade Button */}
              <div className="flex items-center gap-3">
                <Button
                  onClick={autoCalculateGrade}
                  disabled={gradingCalc || Object.keys(gradeScores).length < (gradingRubric.criteria.length)}
                  className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white"
                >
                  {gradingCalc ? (
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  ) : (
                    <Calculator className="h-4 w-4 mr-2" />
                  )}
                  {t('rubrics.auto_grade')}
                </Button>
                <span className="text-xs text-muted-foreground">
                  {Object.keys(gradeScores).length}/{gradingRubric.criteria.length} {t('rubrics.criteria')}
                </span>
              </div>

              {/* Grade Result */}
              {gradeResult && (
                <Card className="border-2 border-emerald-300 dark:border-emerald-700 bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/20 dark:to-teal-950/20">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm flex items-center gap-2">
                      <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                      {t('rubrics.auto_grade')}
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-3 gap-4 mb-4">
                      <div className="text-center">
                        <div className="text-2xl font-bold text-emerald-600">{gradeResult.overallPercentage}%</div>
                        <div className="text-xs text-muted-foreground">{t('rubrics.percentage')}</div>
                      </div>
                      <div className="text-center">
                        <div className="text-2xl font-bold text-teal-600">{gradeResult.finalScore}/{gradeResult.maxPoints}</div>
                        <div className="text-xs text-muted-foreground">{t('rubrics.final_score')}</div>
                      </div>
                      <div className="text-center">
                        <div className="text-2xl font-bold text-amber-600">{gradeResult.grade} — {gradeResult.gradeLabel}</div>
                        <div className="text-xs text-muted-foreground">{t('rubrics.grade_result')}</div>
                      </div>
                    </div>
                    <Separator className="my-3" />
                    <div className="space-y-2">
                      <h4 className="text-xs font-semibold">{t('rubrics.criterion_breakdown')}</h4>
                      {gradeResult.criterionBreakdown.map((cb) => (
                        <div key={cb.criterionId} className="flex items-center gap-3">
                          <span className="text-xs font-medium w-36 truncate">{cb.criterionName}</span>
                          <Progress value={cb.percentage} className="flex-1 h-2" />
                          <span className="text-xs text-muted-foreground w-16 text-right">
                            {cb.earnedPoints}/{cb.maxPoints}
                          </span>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* ── Analytics Dialog ────────────────────────────────────────── */}
      <Dialog open={analyticsOpen} onOpenChange={setAnalyticsOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <BarChart3 className="h-5 w-5 text-emerald-500" />
              {t('rubrics.analytics_title')}
            </DialogTitle>
            <DialogDescription>
              {analyticsData?.rubricTitle}
            </DialogDescription>
          </DialogHeader>

          {analyticsLoading ? (
            <div className="flex items-center justify-center py-12">
              <Loader2 className="h-8 w-8 animate-spin text-emerald-500" />
            </div>
          ) : analyticsData ? (
            <div className="space-y-6">
              {/* Overall Stats */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                <Card className="border-2 border-emerald-200 dark:border-emerald-800">
                  <CardContent className="p-4 text-center">
                    <div className="text-2xl font-bold text-emerald-600">{analyticsData.overallStats.averagePercentage}%</div>
                    <div className="text-xs text-muted-foreground">{t('rubrics.average_score')}</div>
                  </CardContent>
                </Card>
                <Card className="border-2 border-teal-200 dark:border-teal-800">
                  <CardContent className="p-4 text-center">
                    <div className="text-2xl font-bold text-teal-600">{analyticsData.overallStats.totalAssessments}</div>
                    <div className="text-xs text-muted-foreground">{t('rubrics.class_performance')}</div>
                  </CardContent>
                </Card>
                <Card className="border-2 border-amber-200 dark:border-amber-800">
                  <CardContent className="p-4 text-center">
                    <div className="text-2xl font-bold text-amber-600">{analyticsData.overallStats.totalStudents}</div>
                    <div className="text-xs text-muted-foreground">{t('rubrics.percentage')}</div>
                  </CardContent>
                </Card>
                <Card className="border-2 border-rose-200 dark:border-rose-800">
                  <CardContent className="p-4 text-center">
                    <div className="text-2xl font-bold text-rose-600">{analyticsData.overallStats.averageScore}/{analyticsData.overallStats.totalMaxPoints}</div>
                    <div className="text-xs text-muted-foreground">{t('rubrics.final_score')}</div>
                  </CardContent>
                </Card>
              </div>

              {/* Class Performance by Criterion */}
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm">{t('rubrics.class_performance')}</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {analyticsData.criteriaAnalytics.map((ca) => (
                      <div key={ca.criterionId} className="space-y-1">
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-medium">{ca.criterionName}</span>
                          <span className="text-xs text-muted-foreground">
                            {t('rubrics.average_score')}: {ca.classAverage}/{ca.maxPoints}
                          </span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Progress
                            value={ca.maxPoints > 0 ? (ca.classAverage / ca.maxPoints) * 100 : 0}
                            className="flex-1 h-2"
                          />
                          <span className="text-xs font-medium">
                            {ca.maxPoints > 0 ? Math.round((ca.classAverage / ca.maxPoints) * 100) : 0}%
                          </span>
                        </div>
                        <div className="flex gap-4 text-xs text-muted-foreground">
                          <span>{t('rubrics.highest_score')}: {ca.highestScore}</span>
                          <span>{t('rubrics.lowest_score')}: {ca.lowestScore}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

              {/* Grade Distribution */}
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm">{t('rubrics.grade_distribution')}</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {analyticsData.gradeDistribution.map((gd) => (
                      <div key={gd.grade} className="flex items-center gap-3">
                        <span className="text-sm font-medium w-28">{gd.grade}</span>
                        <div className="flex-1 bg-gray-100 dark:bg-gray-800 rounded-full h-4 overflow-hidden">
                          <div
                            className="h-full rounded-full transition-all duration-500"
                            style={{
                              width: `${analyticsData.overallStats.averagePercentage}%`,
                              backgroundColor: gd.color,
                            }}
                          />
                        </div>
                        <span className="text-xs text-muted-foreground w-16">{gd.range}</span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          ) : (
            <div className="text-center py-8 text-muted-foreground">
              {t('rubrics.error')}
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* ── Delete Confirmation ────────────────────────────────────── */}
      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t('rubrics.delete_title')}</AlertDialogTitle>
            <AlertDialogDescription>{t('rubrics.delete_desc')}</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{t('rubrics.cancel')}</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDelete}
              className="bg-rose-600 hover:bg-rose-700 text-white"
            >
              {t('rubrics.delete')}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

/* ── Preview Table Component ─────────────────────────────────────── */

function RubricPreviewTable({
  title,
  criteria,
}: {
  title: string;
  criteria: CriterionDraft[] | RubricCriterion[];
}) {
  // Determine max levels across all criteria
  const maxLevels = criteria.reduce((max, c) => {
    const levels = 'levels' in c ? c.levels : [];
    return Math.max(max, levels.length);
  }, 0);

  const totalWeight = criteria.reduce((sum, c) => sum + c.weight, 0);
  const totalPoints = criteria.reduce((sum, c) => sum + c.maxPoints, 0);

  return (
    <div className="space-y-3">
      <div className="overflow-x-auto rounded-lg border">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-slate-50 dark:bg-slate-900">
              <th className="text-left p-3 font-medium border-b min-w-[120px]">
                {t('rubrics.table_criterion')}
              </th>
              <th className="text-center p-3 font-medium border-b w-16">
                {t('rubrics.table_weight_short')}
              </th>
              {Array.from({ length: maxLevels }).map((_, li) => (
                <th
                  key={li}
                  className={`text-center p-3 font-medium border-b min-w-[140px] ${LEVEL_HEADER_COLORS[li % LEVEL_HEADER_COLORS.length]} text-white`}
                >
                  {t('rubrics.level_header', { order: li + 1 })}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {criteria.map((c, ci) => {
              const levels = 'levels' in c ? c.levels : [];
              return (
                <tr key={ci} className="border-b last:border-b-0 hover:bg-slate-50/50 dark:hover:bg-slate-900/50">
                  <td className="p-3">
                    <div className="font-medium">{c.name}</div>
                    {c.description && (
                      <div className="text-xs text-muted-foreground mt-0.5">{c.description}</div>
                    )}
                    <div className="text-xs text-muted-foreground mt-0.5">
                      {c.maxPoints} {t('rubrics.points')}
                    </div>
                  </td>
                  <td className="text-center p-3 font-medium">{c.weight}</td>
                  {Array.from({ length: maxLevels }).map((_, li) => {
                    const level = levels[li];
                    return (
                      <td key={li} className="p-3 text-center">
                        {level ? (
                          <div>
                            <div className="font-medium text-xs">{level.label}</div>
                            <div className="text-xs text-muted-foreground mt-0.5 line-clamp-3">
                              {level.description}
                            </div>
                            <Badge
                              variant="outline"
                              className={`mt-1 text-xs ${LEVEL_COLORS[li % LEVEL_COLORS.length]}`}
                            >
                              {level.points} {t('rubrics.points')}
                            </Badge>
                          </div>
                        ) : (
                          <span className="text-muted-foreground">—</span>
                        )}
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
          <tfoot>
            <tr className="bg-slate-50 dark:bg-slate-900 font-medium">
              <td className="p-3">{t('rubrics.total_weight')}</td>
              <td className="text-center p-3">{totalWeight}</td>
              <td colSpan={maxLevels} className="p-3 text-xs text-muted-foreground">
                {t('rubrics.total_points')}: {totalPoints}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  );
}