schulos/src/components/substitute-teacher-view.tsx

'use client';

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  UserCheck, Plus, Search, Filter, Star, Phone, Mail, Calendar,
  Clock, AlertTriangle, CheckCircle2, XCircle, Edit3, Trash2,
  ChevronLeft, ChevronRight, Printer, Bell, BarChart3, TrendingUp,
  Users, FileText, Settings, Eye, Sparkles, ArrowRight, RefreshCw,
  UserPlus, CalendarDays, Shield, BookOpen, MapPin, Stethoscope,
  GraduationCap, Heart, Briefcase, X, Save, Info,
} from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Progress } from '@/components/ui/progress';
import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { useAppStore } from '@/lib/store';
import { t } from '@/lib/i18n';
import { apiGet } from '@/lib/api';
import { toast } from 'sonner';
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip,
  ResponsiveContainer, PieChart, Pie, Cell, LineChart, Line, Legend,
} from 'recharts';

// ── Types ──────────────────────────────────────────────────────────

interface SubstituteTeacherData {
  id: string;
  schoolId: string;
  userId: string | null;
  firstName: string;
  lastName: string;
  email: string | null;
  phone: string | null;
  qualifications: string | null;
  subjects: string | null;
  gradeLevels: string | null;
  availability: string | null;
  maxDaysPerWeek: number;
  rating: number;
  totalAssignments: number;
  notes: string | null;
  isActive: boolean;
  createdAt: string;
  updatedAt: string;
  user?: { id: string; firstName: string; lastName: string; email: string } | null;
  assignments?: { id: string; date: string; status: string }[];
}

interface TeacherAbsenceData {
  id: string;
  schoolId: string;
  teacherId: string;
  type: string;
  startDate: string;
  endDate: string;
  reason: string | null;
  status: string;
  notes: string | null;
  createdAt: string;
  updatedAt: string;
  teacher: { id: string; firstName: string; lastName: string; email: string };
  assignments?: SubstitutionAssignmentData[];
}

interface SubstitutionAssignmentData {
  id: string;
  schoolId: string;
  absenceId: string;
  substituteId: string;
  classGroupId: string | null;
  subjectId: string | null;
  date: string;
  period: number | null;
  room: string | null;
  status: string;
  notes: string | null;
  createdAt: string;
  updatedAt: string;
  absence?: TeacherAbsenceData;
  substitute?: { id: string; firstName: string; lastName: string; rating: number };
  classGroup?: { id: string; name: string } | null;
  subject?: { id: string; name: string } | null;
}

interface TeacherOption {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
}

// ── Helpers ────────────────────────────────────────────────────────

function parseJSON<T>(val: string | null | undefined, fallback: T): T {
  if (!val) return fallback;
  try { return JSON.parse(val) as T; } catch { return fallback; }
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
}

function getDayOfWeek(date: Date): string {
  const days = ['sub.sunday', 'sub.monday', 'sub.tuesday', 'sub.wednesday', 'sub.thursday', 'sub.friday', 'sub.saturday'];
  return days[date.getDay()];
}

function getAbsenceTypeColor(type: string): string {
  switch (type) {
    case 'SICK': return 'bg-red-100 text-red-800 dark:bg-red-950/50 dark:text-red-300';
    case 'PERSONAL': return 'bg-amber-100 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300';
    case 'TRAINING': return 'bg-blue-100 text-blue-800 dark:bg-blue-950/50 dark:text-blue-300';
    default: return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
  }
}

function getAssignmentStatusColor(status: string): string {
  switch (status) {
    case 'pending': return 'bg-amber-100 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300';
    case 'confirmed': return 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300';
    case 'completed': return 'bg-teal-100 text-teal-800 dark:bg-teal-950/50 dark:text-teal-300';
    case 'cancelled': return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
    default: return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
  }
}

function getAbsenceTypeIcon(type: string) {
  switch (type) {
    case 'SICK': return Stethoscope;
    case 'PERSONAL': return Heart;
    case 'TRAINING': return GraduationCap;
    default: return Briefcase;
  }
}

function renderStars(rating: number) {
  return (
    <div className="flex items-center gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
        <Star
          key={star}
          className={`h-3.5 w-3.5 ${star <= Math.round(rating) ? 'fill-amber-400 text-amber-400' : 'text-gray-300 dark:text-gray-600'}`}
        />
      ))}
      <span className="ml-1 text-xs text-muted-foreground">{rating.toFixed(1)}</span>
    </div>
  );
}

// ── Animated Counter ───────────────────────────────────────────────

function AnimatedCounter({ value, duration = 1000 }: { value: number; duration?: number }) {
  const [display, setDisplay] = useState(0);
  useEffect(() => {
    let start = 0;
    const step = value / (duration / 16);
    const timer = setInterval(() => {
      start += step;
      if (start >= value) { setDisplay(value); clearInterval(timer); }
      else setDisplay(Math.floor(start));
    }, 16);
    return () => clearInterval(timer);
  }, [value, duration]);
  return <span>{display}</span>;
}

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

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

  const role = currentUser?.role || 'TEACHER';
  const isAdmin = role === 'SCHOOL_ADMIN' || role === 'VICE_PRINCIPAL' || role === 'SUPER_ADMIN';
  const isTeacher = role === 'TEACHER';
  const isStudent = role === 'STUDENT';
  const isParent = role === 'PARENT';
  const isReadOnly = isStudent || isParent;

  // ── Data State ──────────────────────────────────────────────────
  const [substitutes, setSubstitutes] = useState<SubstituteTeacherData[]>([]);
  const [absences, setAbsences] = useState<TeacherAbsenceData[]>([]);
  const [assignments, setAssignments] = useState<SubstitutionAssignmentData[]>([]);
  const [teachers, setTeachers] = useState<TeacherOption[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('pool');

  // ── Filter State ────────────────────────────────────────────────
  const [searchQuery, setSearchQuery] = useState('');
  const [filterActive, setFilterActive] = useState(true);
  const [absenceFilter, setAbsenceFilter] = useState('all');
  const [weekOffset, setWeekOffset] = useState(0);

  // ── Dialog State ────────────────────────────────────────────────
  const [showSubstituteDialog, setShowSubstituteDialog] = useState(false);
  const [editingSubstitute, setEditingSubstitute] = useState<SubstituteTeacherData | null>(null);
  const [showAbsenceDialog, setShowAbsenceDialog] = useState(false);
  const [editingAbsence, setEditingAbsence] = useState<TeacherAbsenceData | null>(null);
  const [showAssignmentDialog, setShowAssignmentDialog] = useState(false);
  const [editingAssignment, setEditingAssignment] = useState<SubstitutionAssignmentData | null>(null);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<{ type: string; id: string } | null>(null);
  const [showRateDialog, setShowRateDialog] = useState(false);
  const [ratingSubstitute, setRatingSubstitute] = useState<SubstituteTeacherData | null>(null);
  const [newRating, setNewRating] = useState(0);

  // ── Form State ──────────────────────────────────────────────────
  const [subForm, setSubForm] = useState({
    firstName: '', lastName: '', email: '', phone: '',
    qualifications: [] as string[], subjects: [] as string[],
    gradeLevels: [] as string[], maxDaysPerWeek: 5, notes: '',
  });
  const [absenceForm, setAbsenceForm] = useState({
    teacherId: '', type: 'SICK', startDate: '', endDate: '', reason: '', notes: '',
  });
  const [assignmentForm, setAssignmentForm] = useState({
    absenceId: '', substituteId: '', classGroupId: '', subjectId: '',
    date: '', period: 1, room: '', notes: '',
  });
  const [qualInput, setQualInput] = useState('');
  const [gradeInput, setGradeInput] = useState('');

  // ── Fetch Data ──────────────────────────────────────────────────

  const fetchSubstitutes = useCallback(async () => {
    if (!schoolId) return;
    try {
      const data = await apiGet<SubstituteTeacherData[]>(`/api/substitutes?schoolId=${schoolId}`);
      setSubstitutes(data);
    } catch (err) {
      console.error('Error fetching substitutes:', err);
      toast.error(t('sub.error_load'));
    }
  }, [schoolId]);

  const fetchAbsences = useCallback(async () => {
    if (!schoolId) return;
    try {
      const data = await apiGet<TeacherAbsenceData[]>(`/api/substitutes/absences?schoolId=${schoolId}`);
      setAbsences(data);
    } catch (err) {
      console.error('Error fetching absences:', err);
      toast.error(t('sub.error_load'));
    }
  }, [schoolId]);

  const fetchAssignments = useCallback(async () => {
    if (!schoolId) return;
    try {
      const data = await apiGet<SubstitutionAssignmentData[]>(`/api/substitutes/assignments?schoolId=${schoolId}`);
      setAssignments(data);
    } catch (err) {
      console.error('Error fetching assignments:', err);
      toast.error(t('sub.error_load'));
    }
  }, [schoolId]);

  const fetchTeachers = useCallback(async () => {
    if (!schoolId) return;
    try {
      const data = await apiGet<TeacherOption[]>(`/api/users?schoolId=${schoolId}&role=TEACHER`);
      setTeachers(Array.isArray(data) ? data : []);
    } catch {
      // ignore — teachers list is optional
    }
  }, [schoolId]);

  useEffect(() => {
    if (schoolId) {
      setLoading(true);
      Promise.all([fetchSubstitutes(), fetchAbsences(), fetchAssignments(), fetchTeachers()])
        .finally(() => setLoading(false));
    }
  }, [schoolId, fetchSubstitutes, fetchAbsences, fetchAssignments, fetchTeachers]);

  // ── Computed Data ───────────────────────────────────────────────

  const filteredSubstitutes = useMemo(() => {
    let result = substitutes;
    if (filterActive) result = result.filter((s) => s.isActive);
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      result = result.filter(
        (s) =>
          s.firstName.toLowerCase().includes(q) ||
          s.lastName.toLowerCase().includes(q) ||
          (s.email && s.email.toLowerCase().includes(q))
      );
    }
    return result;
  }, [substitutes, filterActive, searchQuery]);

  const filteredAbsences = useMemo(() => {
    let result = absences;
    if (absenceFilter !== 'all') result = result.filter((a) => a.status === absenceFilter);
    if (isTeacher) result = result.filter((a) => a.teacherId === currentUser?.id);
    return result;
  }, [absences, absenceFilter, isTeacher, currentUser?.id]);

  const weekDates = useMemo(() => {
    const now = new Date();
    const monday = new Date(now);
    monday.setDate(now.getDate() - now.getDay() + 1 + weekOffset * 7);
    const dates: Date[] = [];
    for (let i = 0; i < 6; i++) {
      const d = new Date(monday);
      d.setDate(monday.getDate() + i);
      dates.push(d);
    }
    return dates;
  }, [weekOffset]);

  const weekAssignments = useMemo(() => {
    const weekStart = weekDates[0];
    const weekEnd = weekDates[5];
    return assignments.filter((a) => {
      const d = new Date(a.date);
      return d >= weekStart && d <= weekEnd && a.status !== 'cancelled';
    });
  }, [assignments, weekDates]);

  // ── Statistics ──────────────────────────────────────────────────

  const stats = useMemo(() => {
    const totalAbsences = absences.length;
    const coveredAbsences = absences.filter((a) => a.status === 'covered').length;
    const activeSubstitutes = substitutes.filter((s) => s.isActive).length;
    const totalAssignments = assignments.length;
    const pendingAssignments = assignments.filter((a) => a.status === 'pending').length;
    const confirmedAssignments = assignments.filter((a) => a.status === 'confirmed').length;
    const completedAssignments = assignments.filter((a) => a.status === 'completed').length;
    const avgRating = substitutes.length > 0
      ? substitutes.reduce((sum, s) => sum + s.rating, 0) / substitutes.length
      : 0;
    const coverageRate = totalAbsences > 0 ? Math.round((coveredAbsences / totalAbsences) * 100) : 100;

    // Absences per month (last 6 months)
    const monthLabels: string[] = [];
    const monthCounts: Record<string, number> = {};
    for (let i = 5; i >= 0; i--) {
      const d = new Date();
      d.setMonth(d.getMonth() - i);
      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
      monthLabels.push(key);
      monthCounts[key] = 0;
    }
    absences.forEach((a) => {
      const d = new Date(a.startDate);
      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
      if (monthCounts[key] !== undefined) monthCounts[key]++;
    });
    const absencesPerMonth = monthLabels.map((m) => ({
      month: m,
      count: monthCounts[m],
    }));

    // Assignments by status
    const assignmentsByStatus = [
      { name: t('sub.status_pending'), value: pendingAssignments, color: '#f59e0b' },
      { name: t('sub.status_confirmed'), value: confirmedAssignments, color: '#10b981' },
      { name: t('sub.status_completed'), value: completedAssignments, color: '#14b8a6' },
    ].filter((s) => s.value > 0);

    // Top absent teachers
    const teacherAbsenceCount: Record<string, { name: string; count: number }> = {};
    absences.forEach((a) => {
      const key = a.teacherId;
      if (!teacherAbsenceCount[key]) {
        teacherAbsenceCount[key] = { name: `${a.teacher.firstName} ${a.teacher.lastName}`, count: 0 };
      }
      teacherAbsenceCount[key].count++;
    });
    const topAbsentTeachers = Object.values(teacherAbsenceCount)
      .sort((a, b) => b.count - a.count)
      .slice(0, 5);

    // Substitute utilization
    const subUtilization = substitutes
      .filter((s) => s.isActive)
      .map((s) => ({
        name: `${s.firstName} ${s.lastName}`,
        assignments: s.totalAssignments,
        maxDays: s.maxDaysPerWeek,
      }))
      .sort((a, b) => b.assignments - a.assignments)
      .slice(0, 10);

    // Cost tracking (mock data based on assignments)
    const dailyRate = 150;
    const totalCost = assignments.filter((a) => a.status === 'completed').length * dailyRate;

    return {
      totalAbsences, coveredAbsences, activeSubstitutes, totalAssignments,
      pendingAssignments, confirmedAssignments, completedAssignments,
      avgRating, coverageRate, absencesPerMonth, assignmentsByStatus,
      topAbsentTeachers, subUtilization, totalCost, dailyRate,
    };
  }, [absences, substitutes, assignments]);

  // ── CRUD Handlers ───────────────────────────────────────────────

  const handleSaveSubstitute = async () => {
    if (!schoolId || !subForm.firstName || !subForm.lastName) {
      toast.error(t('sub.error_save'));
      return;
    }
    try {
      const payload = {
        schoolId,
        firstName: subForm.firstName,
        lastName: subForm.lastName,
        email: subForm.email || null,
        phone: subForm.phone || null,
        qualifications: subForm.qualifications.length > 0 ? subForm.qualifications : null,
        subjects: null,
        gradeLevels: subForm.gradeLevels.length > 0 ? subForm.gradeLevels : null,
        availability: null,
        maxDaysPerWeek: subForm.maxDaysPerWeek,
        notes: subForm.notes || null,
      };

      if (editingSubstitute) {
        const res = await fetch(`/api/substitutes/${editingSubstitute.id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        if (!res.ok) throw new Error();
      } else {
        const res = await fetch('/api/substitutes', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        if (!res.ok) throw new Error();
      }
      toast.success(t('sub.save_success'));
      setShowSubstituteDialog(false);
      setEditingSubstitute(null);
      resetSubForm();
      fetchSubstitutes();
    } catch {
      toast.error(t('sub.error_save'));
    }
  };

  const handleSaveAbsence = async () => {
    if (!schoolId || !absenceForm.teacherId || !absenceForm.startDate || !absenceForm.endDate) {
      toast.error(t('sub.error_save'));
      return;
    }
    try {
      const payload = {
        schoolId,
        teacherId: absenceForm.teacherId,
        type: absenceForm.type,
        startDate: absenceForm.startDate,
        endDate: absenceForm.endDate,
        reason: absenceForm.reason || null,
        notes: absenceForm.notes || null,
      };

      if (editingAbsence) {
        const res = await fetch(`/api/substitutes/absences/${editingAbsence.id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        if (!res.ok) throw new Error();
      } else {
        const res = await fetch('/api/substitutes/absences', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        if (!res.ok) throw new Error();
      }
      toast.success(t('sub.save_success'));
      setShowAbsenceDialog(false);
      setEditingAbsence(null);
      resetAbsenceForm();
      fetchAbsences();
    } catch {
      toast.error(t('sub.error_save'));
    }
  };

  const handleSaveAssignment = async () => {
    if (!schoolId || !assignmentForm.absenceId || !assignmentForm.substituteId || !assignmentForm.date) {
      toast.error(t('sub.error_save'));
      return;
    }
    try {
      const payload = {
        schoolId,
        absenceId: assignmentForm.absenceId,
        substituteId: assignmentForm.substituteId,
        classGroupId: assignmentForm.classGroupId || null,
        subjectId: assignmentForm.subjectId || null,
        date: assignmentForm.date,
        period: assignmentForm.period || null,
        room: assignmentForm.room || null,
        notes: assignmentForm.notes || null,
      };

      if (editingAssignment) {
        const res = await fetch(`/api/substitutes/assignments/${editingAssignment.id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        if (!res.ok) throw new Error();
      } else {
        const res = await fetch('/api/substitutes/assignments', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        if (!res.ok) throw new Error();
      }
      toast.success(t('sub.save_success'));
      setShowAssignmentDialog(false);
      setEditingAssignment(null);
      resetAssignmentForm();
      fetchAssignments();
      fetchAbsences();
    } catch {
      toast.error(t('sub.error_save'));
    }
  };

  const handleDelete = async () => {
    if (!deleteTarget) return;
    try {
      let url = '';
      if (deleteTarget.type === 'substitute') url = `/api/substitutes/${deleteTarget.id}`;
      else if (deleteTarget.type === 'absence') url = `/api/substitutes/absences/${deleteTarget.id}`;
      else if (deleteTarget.type === 'assignment') url = `/api/substitutes/assignments/${deleteTarget.id}`;

      const res = await fetch(url, { method: 'DELETE' });
      if (!res.ok) throw new Error();

      toast.success(t('sub.delete_success'));
      setShowDeleteDialog(false);
      setDeleteTarget(null);
      fetchSubstitutes();
      fetchAbsences();
      fetchAssignments();
    } catch {
      toast.error(t('sub.error_delete'));
    }
  };

  const handleUpdateAssignmentStatus = async (id: string, status: string) => {
    try {
      const res = await fetch(`/api/substitutes/assignments/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status }),
      });
      if (!res.ok) throw new Error();
      toast.success(t('sub.save_success'));
      fetchAssignments();
      fetchAbsences();
    } catch {
      toast.error(t('sub.error_save'));
    }
  };

  const handleRateSubstitute = async () => {
    if (!ratingSubstitute || newRating < 1 || newRating > 5) return;
    try {
      const res = await fetch(`/api/substitutes/${ratingSubstitute.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ rating: newRating }),
      });
      if (!res.ok) throw new Error();
      toast.success(t('sub.save_success'));
      setShowRateDialog(false);
      setRatingSubstitute(null);
      setNewRating(0);
      fetchSubstitutes();
    } catch {
      toast.error(t('sub.error_save'));
    }
  };

  // ── Form Helpers ────────────────────────────────────────────────

  const resetSubForm = () => {
    setSubForm({ firstName: '', lastName: '', email: '', phone: '', qualifications: [], subjects: [], gradeLevels: [], maxDaysPerWeek: 5, notes: '' });
  };

  const resetAbsenceForm = () => {
    setAbsenceForm({ teacherId: '', type: 'SICK', startDate: '', endDate: '', reason: '', notes: '' });
  };

  const resetAssignmentForm = () => {
    setAssignmentForm({ absenceId: '', substituteId: '', classGroupId: '', subjectId: '', date: '', period: 1, room: '', notes: '' });
  };

  const openEditSubstitute = (sub: SubstituteTeacherData) => {
    setEditingSubstitute(sub);
    setSubForm({
      firstName: sub.firstName,
      lastName: sub.lastName,
      email: sub.email || '',
      phone: sub.phone || '',
      qualifications: parseJSON<string[]>(sub.qualifications, []),
      subjects: parseJSON<string[]>(sub.subjects, []),
      gradeLevels: parseJSON<string[]>(sub.gradeLevels, []),
      maxDaysPerWeek: sub.maxDaysPerWeek,
      notes: sub.notes || '',
    });
    setShowSubstituteDialog(true);
  };

  const openEditAbsence = (abs: TeacherAbsenceData) => {
    setEditingAbsence(abs);
    setAbsenceForm({
      teacherId: abs.teacherId,
      type: abs.type,
      startDate: abs.startDate.slice(0, 10),
      endDate: abs.endDate.slice(0, 10),
      reason: abs.reason || '',
      notes: abs.notes || '',
    });
    setShowAbsenceDialog(true);
  };

  const openCreateAssignment = (absenceId?: string) => {
    setEditingAssignment(null);
    resetAssignmentForm();
    if (absenceId) setAssignmentForm((prev) => ({ ...prev, absenceId }));
    setShowAssignmentDialog(true);
  };

  const addQualification = () => {
    if (qualInput.trim()) {
      setSubForm((prev) => ({ ...prev, qualifications: [...prev.qualifications, qualInput.trim()] }));
      setQualInput('');
    }
  };

  const removeQualification = (idx: number) => {
    setSubForm((prev) => ({ ...prev, qualifications: prev.qualifications.filter((_, i) => i !== idx) }));
  };

  const addGradeLevel = () => {
    if (gradeInput.trim()) {
      setSubForm((prev) => ({ ...prev, gradeLevels: [...prev.gradeLevels, gradeInput.trim()] }));
      setGradeInput('');
    }
  };

  const removeGradeLevel = (idx: number) => {
    setSubForm((prev) => ({ ...prev, gradeLevels: prev.gradeLevels.filter((_, i) => i !== idx) }));
  };

  // ── Auto-assign logic ───────────────────────────────────────────

  const handleAutoAssign = async (absenceId: string) => {
    const absence = absences.find((a) => a.id === absenceId);
    if (!absence) return;

    const activeSubs = substitutes.filter((s) => s.isActive);
    if (activeSubs.length === 0) {
      toast.error(t('sub.no_substitutes'));
      return;
    }

    // Simple scoring: prefer substitutes with higher rating and fewer assignments
    const scored = activeSubs.map((s) => ({
      sub: s,
      score: s.rating * 10 - s.totalAssignments * 0.5,
    })).sort((a, b) => b.score - a.score);

    const best = scored[0].sub;
    const startDate = new Date(absence.startDate);
    const endDate = new Date(absence.endDate);

    try {
      for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
        if (d.getDay() === 0 || d.getDay() === 6) continue; // Skip weekends
        await fetch('/api/substitutes/assignments', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            schoolId,
            absenceId,
            substituteId: best.id,
            date: d.toISOString().slice(0, 10),
            status: 'pending',
          }),
        });
      }
      toast.success(t('sub.save_success'));
      fetchAssignments();
      fetchAbsences();
    } catch {
      toast.error(t('sub.error_save'));
    }
  };

  // ── Render ──────────────────────────────────────────────────────

  if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="flex items-center gap-3">
          <div className="h-6 w-6 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
          <span className="text-muted-foreground">Loading...</span>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6 p-4 md:p-6">
      {/* ── Header Banner ──────────────────────────────────────── */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-emerald-600 via-teal-600 to-emerald-700 p-6 md:p-8 text-white"
      >
        <div className="absolute inset-0 bg-[url('/logo.svg')] bg-no-repeat bg-right opacity-5" />
        <div className="relative z-10">
          <div className="flex items-center gap-3 mb-2">
            <UserCheck className="h-8 w-8" />
            <h1 className="text-2xl md:text-3xl font-bold">{t('sub.title')}</h1>
          </div>
          <p className="text-emerald-100 text-sm md:text-base max-w-2xl">{t('sub.subtitle')}</p>
        </div>
        {/* Stats cards in header */}
        <div className="relative z-10 mt-6 grid grid-cols-2 md:grid-cols-4 gap-3">
          {[
            { label: t('sub.total_substitutes'), value: stats.activeSubstitutes, icon: Users },
            { label: t('sub.total_absences'), value: stats.totalAbsences, icon: CalendarDays },
            { label: t('sub.coverage_rate'), value: `${stats.coverageRate}%`, icon: Shield },
            { label: t('sub.avg_rating'), value: stats.avgRating.toFixed(1), icon: Star },
          ].map((s, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              className="bg-white/10 backdrop-blur-sm rounded-xl p-3 md:p-4"
            >
              <div className="flex items-center gap-2 mb-1">
                <s.icon className="h-4 w-4 text-emerald-200" />
                <span className="text-xs text-emerald-200">{s.label}</span>
              </div>
              <p className="text-xl md:text-2xl font-bold">
                {typeof s.value === 'number' ? <AnimatedCounter value={s.value} /> : s.value}
              </p>
            </motion.div>
          ))}
        </div>
      </motion.div>

      {/* ── Tabs ───────────────────────────────────────────────── */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="pool" className="gap-1.5">
            <Users className="h-4 w-4" />
            <span className="hidden sm:inline">{t('sub.pool')}</span>
          </TabsTrigger>
          <TabsTrigger value="absences" className="gap-1.5">
            <CalendarDays className="h-4 w-4" />
            <span className="hidden sm:inline">{t('sub.absences')}</span>
          </TabsTrigger>
          <TabsTrigger value="schedule" className="gap-1.5">
            <Calendar className="h-4 w-4" />
            <span className="hidden sm:inline">{t('sub.schedule')}</span>
          </TabsTrigger>
          <TabsTrigger value="statistics" className="gap-1.5">
            <BarChart3 className="h-4 w-4" />
            <span className="hidden sm:inline">{t('sub.statistics')}</span>
          </TabsTrigger>
        </TabsList>

        {/* ── Substitute Pool Tab ──────────────────────────────── */}
        <TabsContent value="pool" className="space-y-4">
          {/* Search & Filter Bar */}
          <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
            <div className="relative flex-1 w-full">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder={t('sub.search_substitute')}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <div className="flex gap-2">
              <Button
                variant={filterActive ? 'default' : 'outline'}
                size="sm"
                onClick={() => setFilterActive(true)}
                className={filterActive ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
              >
                {t('sub.filter_active')}
              </Button>
              <Button
                variant={!filterActive ? 'default' : 'outline'}
                size="sm"
                onClick={() => setFilterActive(false)}
                className={!filterActive ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
              >
                {t('sub.filter_all')}
              </Button>
              {!isReadOnly && (
                <Button
                  onClick={() => { setEditingSubstitute(null); resetSubForm(); setShowSubstituteDialog(true); }}
                  className="bg-emerald-600 hover:bg-emerald-700"
                  size="sm"
                >
                  <Plus className="h-4 w-4 mr-1" />
                  {t('sub.add_substitute')}
                </Button>
              )}
            </div>
          </div>

          {/* Substitute Cards */}
          {filteredSubstitutes.length === 0 ? (
            <Card>
              <CardContent className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                <Users className="h-12 w-12 mb-3 opacity-30" />
                <p>{t('sub.no_substitutes')}</p>
              </CardContent>
            </Card>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {filteredSubstitutes.map((sub, idx) => (
                <motion.div
                  key={sub.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: idx * 0.05 }}
                >
                  <Card className="hover:shadow-lg transition-shadow">
                    <CardHeader className="pb-3">
                      <div className="flex items-start justify-between">
                        <div className="flex items-center gap-3">
                          <div className="h-10 w-10 rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center text-white font-bold text-sm">
                            {sub.firstName[0]}{sub.lastName[0]}
                          </div>
                          <div>
                            <CardTitle className="text-base">{sub.firstName} {sub.lastName}</CardTitle>
                            <div className="mt-0.5">{renderStars(sub.rating)}</div>
                          </div>
                        </div>
                        <Badge variant={sub.isActive ? 'default' : 'secondary'} className={sub.isActive ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300' : ''}>
                          {sub.isActive ? t('sub.active') : t('sub.inactive')}
                        </Badge>
                      </div>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      {/* Contact Info */}
                      <div className="space-y-1.5 text-sm">
                        {sub.email && (
                          <div className="flex items-center gap-2 text-muted-foreground">
                            <Mail className="h-3.5 w-3.5" />
                            <span className="truncate">{sub.email}</span>
                          </div>
                        )}
                        {sub.phone && (
                          <div className="flex items-center gap-2 text-muted-foreground">
                            <Phone className="h-3.5 w-3.5" />
                            <span>{sub.phone}</span>
                          </div>
                        )}
                      </div>

                      {/* Qualifications */}
                      {parseJSON<string[]>(sub.qualifications, []).length > 0 && (
                        <div>
                          <p className="text-xs font-medium text-muted-foreground mb-1">{t('sub.qualifications')}</p>
                          <div className="flex flex-wrap gap-1">
                            {parseJSON<string[]>(sub.qualifications, []).map((q, i) => (
                              <Badge key={i} variant="outline" className="text-xs">{q}</Badge>
                            ))}
                          </div>
                        </div>
                      )}

                      {/* Grade Levels */}
                      {parseJSON<string[]>(sub.gradeLevels, []).length > 0 && (
                        <div>
                          <p className="text-xs font-medium text-muted-foreground mb-1">{t('sub.grade_levels')}</p>
                          <div className="flex flex-wrap gap-1">
                            {parseJSON<string[]>(sub.gradeLevels, []).map((g, i) => (
                              <Badge key={i} variant="outline" className="text-xs bg-teal-50 dark:bg-teal-950/30">{g}</Badge>
                            ))}
                          </div>
                        </div>
                      )}

                      {/* Stats Row */}
                      <div className="flex items-center justify-between pt-2 border-t">
                        <div className="flex items-center gap-3 text-xs text-muted-foreground">
                          <span className="flex items-center gap-1"><Calendar className="h-3 w-3" /> {sub.totalAssignments} {t('sub.lessons')}</span>
                          <span className="flex items-center gap-1"><Clock className="h-3 w-3" /> {sub.maxDaysPerWeek}/w</span>
                        </div>
                        {!isReadOnly && (
                          <div className="flex items-center gap-1">
                            <Button
                              variant="ghost" size="icon" className="h-7 w-7"
                              onClick={() => { setRatingSubstitute(sub); setNewRating(Math.round(sub.rating)); setShowRateDialog(true); }}
                              title={t('sub.rate_substitute')}
                            >
                              <Star className="h-3.5 w-3.5" />
                            </Button>
                            <Button
                              variant="ghost" size="icon" className="h-7 w-7"
                              onClick={() => openEditSubstitute(sub)}
                              title={t('sub.edit_substitute')}
                            >
                              <Edit3 className="h-3.5 w-3.5" />
                            </Button>
                            <Button
                              variant="ghost" size="icon" className="h-7 w-7 text-destructive"
                              onClick={() => { setDeleteTarget({ type: 'substitute', id: sub.id }); setShowDeleteDialog(true); }}
                              title={t('sub.delete_substitute')}
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </Button>
                          </div>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          )}
        </TabsContent>

        {/* ── Absences Tab ─────────────────────────────────────── */}
        <TabsContent value="absences" className="space-y-4">
          {/* Filter & Actions */}
          <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
            <div className="flex gap-2">
              {['all', 'reported', 'covered', 'cancelled'].map((f) => (
                <Button
                  key={f}
                  variant={absenceFilter === f ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => setAbsenceFilter(f)}
                  className={absenceFilter === f ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
                >
                  {f === 'all' ? t('sub.filter_all') : t(`sub.status_${f}`)}
                </Button>
              ))}
            </div>
            {!isReadOnly && (
              <Button
                onClick={() => {
                  setEditingAbsence(null);
                  resetAbsenceForm();
                  if (isTeacher && currentUser) {
                    setAbsenceForm((prev) => ({ ...prev, teacherId: currentUser.id }));
                  }
                  setShowAbsenceDialog(true);
                }}
                className="bg-emerald-600 hover:bg-emerald-700"
                size="sm"
              >
                <Plus className="h-4 w-4 mr-1" />
                {t('sub.report_absence')}
              </Button>
            )}
          </div>

          {/* Absence List */}
          {filteredAbsences.length === 0 ? (
            <Card>
              <CardContent className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                <CalendarDays className="h-12 w-12 mb-3 opacity-30" />
                <p>{t('sub.no_absences')}</p>
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-3">
              {filteredAbsences.map((abs, idx) => {
                const TypeIcon = getAbsenceTypeIcon(abs.type);
                const assignmentCount = abs.assignments?.length || 0;
                const coveredCount = abs.assignments?.filter((a) => a.status === 'confirmed' || a.status === 'completed').length || 0;
                return (
                  <motion.div
                    key={abs.id}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: idx * 0.05 }}
                  >
                    <Card>
                      <CardContent className="p-4">
                        <div className="flex flex-col sm:flex-row sm:items-center gap-4">
                          {/* Teacher & Type */}
                          <div className="flex items-center gap-3 flex-1 min-w-0">
                            <div className={`h-10 w-10 rounded-full flex items-center justify-center ${getAbsenceTypeColor(abs.type)}`}>
                              <TypeIcon className="h-5 w-5" />
                            </div>
                            <div className="min-w-0">
                              <p className="font-medium truncate">{abs.teacher.firstName} {abs.teacher.lastName}</p>
                              <p className="text-sm text-muted-foreground">
                                {formatDate(abs.startDate)} — {formatDate(abs.endDate)}
                              </p>
                            </div>
                          </div>

                          {/* Type Badge */}
                          <Badge className={getAbsenceTypeColor(abs.type)}>
                            {t(`sub.type_${abs.type.toLowerCase()}`)}
                          </Badge>

                          {/* Coverage Progress */}
                          <div className="flex items-center gap-2 min-w-[140px]">
                            <Progress value={assignmentCount > 0 ? (coveredCount / assignmentCount) * 100 : 0} className="h-2 flex-1" />
                            <span className="text-xs text-muted-foreground whitespace-nowrap">{coveredCount}/{assignmentCount}</span>
                          </div>

                          {/* Status Badge */}
                          <Badge variant={abs.status === 'covered' ? 'default' : 'secondary'} className={abs.status === 'covered' ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300' : ''}>
                            {t(`sub.status_${abs.status}`)}
                          </Badge>

                          {/* Actions */}
                          {!isReadOnly && (
                            <div className="flex items-center gap-1">
                              {abs.status === 'reported' && (
                                <Button
                                  variant="outline" size="sm"
                                  onClick={() => openCreateAssignment(abs.id)}
                                  className="text-emerald-600 border-emerald-300 hover:bg-emerald-50"
                                >
                                  <UserPlus className="h-3.5 w-3.5 mr-1" />
                                  {t('sub.create_assignment')}
                                </Button>
                              )}
                              {abs.status === 'reported' && isAdmin && (
                                <Button
                                  variant="outline" size="sm"
                                  onClick={() => handleAutoAssign(abs.id)}
                                  className="text-teal-600 border-teal-300 hover:bg-teal-50"
                                >
                                  <Sparkles className="h-3.5 w-3.5 mr-1" />
                                  {t('sub.auto_assign')}
                                </Button>
                              )}
                              <Button
                                variant="ghost" size="icon" className="h-8 w-8"
                                onClick={() => openEditAbsence(abs)}
                              >
                                <Edit3 className="h-4 w-4" />
                              </Button>
                              <Button
                                variant="ghost" size="icon" className="h-8 w-8 text-destructive"
                                onClick={() => { setDeleteTarget({ type: 'absence', id: abs.id }); setShowDeleteDialog(true); }}
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          )}
                        </div>
                        {abs.reason && (
                          <p className="mt-2 text-sm text-muted-foreground pl-13">{abs.reason}</p>
                        )}
                      </CardContent>
                    </Card>
                  </motion.div>
                );
              })}
            </div>
          )}
        </TabsContent>

        {/* ── Schedule Tab ─────────────────────────────────────── */}
        <TabsContent value="schedule" className="space-y-4">
          {/* Week Navigation */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Button variant="outline" size="icon" onClick={() => setWeekOffset((w) => w - 1)}>
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <span className="text-sm font-medium min-w-[200px] text-center">
                {formatDate(weekDates[0].toISOString())} — {formatDate(weekDates[5].toISOString())}
              </span>
              <Button variant="outline" size="icon" onClick={() => setWeekOffset((w) => w + 1)}>
                <ChevronRight className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="sm" onClick={() => setWeekOffset(0)} className="ml-2">
                {t('sub.this_week')}
              </Button>
            </div>
            <div className="flex gap-2">
              <Button variant="outline" size="sm" onClick={() => window.print()}>
                <Printer className="h-4 w-4 mr-1" />
                {t('sub.print_plan')}
              </Button>
              {!isReadOnly && isAdmin && (
                <Button variant="outline" size="sm">
                  <Bell className="h-4 w-4 mr-1" />
                  {t('sub.notify_teachers')}
                </Button>
              )}
            </div>
          </div>

          {/* Weekly Grid */}
          <Card>
            <CardContent className="p-0 overflow-x-auto">
              <div className="min-w-[800px]">
                {/* Header */}
                <div className="grid grid-cols-6 border-b bg-muted/50">
                  {weekDates.map((date, i) => (
                    <div key={i} className="p-3 text-center border-r last:border-r-0">
                      <p className="text-xs text-muted-foreground">{t(getDayOfWeek(date))}</p>
                      <p className="text-sm font-semibold">{date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })}</p>
                    </div>
                  ))}
                </div>
                {/* Body */}
                <div className="grid grid-cols-6 min-h-[400px]">
                  {weekDates.map((date, i) => {
                    const dayStr = date.toISOString().slice(0, 10);
                    const dayAssignments = weekAssignments.filter(
                      (a) => new Date(a.date).toISOString().slice(0, 10) === dayStr
                    );
                    return (
                      <div key={i} className="p-2 border-r last:border-r-0 space-y-2 min-h-[200px]">
                        {dayAssignments.length === 0 ? (
                          <div className="h-full flex items-center justify-center">
                            <p className="text-xs text-muted-foreground opacity-50">—</p>
                          </div>
                        ) : (
                          dayAssignments.map((assignment) => (
                            <motion.div
                              key={assignment.id}
                              initial={{ opacity: 0, scale: 0.9 }}
                              animate={{ opacity: 1, scale: 1 }}
                              className={`rounded-lg p-2 text-xs cursor-pointer hover:shadow-md transition-shadow ${getAssignmentStatusColor(assignment.status)}`}
                              onClick={() => {
                                if (!isReadOnly) {
                                  setEditingAssignment(assignment);
                                  setAssignmentForm({
                                    absenceId: assignment.absenceId,
                                    substituteId: assignment.substituteId,
                                    classGroupId: assignment.classGroupId || '',
                                    subjectId: assignment.subjectId || '',
                                    date: new Date(assignment.date).toISOString().slice(0, 10),
                                    period: assignment.period || 1,
                                    room: assignment.room || '',
                                    notes: assignment.notes || '',
                                  });
                                  setShowAssignmentDialog(true);
                                }
                              }}
                            >
                              <div className="flex items-center gap-1 mb-1">
                                <span className="font-semibold">
                                  {assignment.period ? `${assignment.period}. ` : ''}
                                  {assignment.subject?.name || ''}
                                </span>
                              </div>
                              <div className="flex items-center gap-1">
                                <MapPin className="h-3 w-3" />
                                <span>{assignment.classGroup?.name || '—'}</span>
                              </div>
                              <div className="flex items-center gap-1 mt-0.5">
                                <UserCheck className="h-3 w-3" />
                                <span>{assignment.substitute?.firstName} {assignment.substitute?.lastName}</span>
                              </div>
                              {assignment.room && (
                                <div className="mt-0.5 text-muted-foreground">
                                  {t('sub.room')}: {assignment.room}
                                </div>
                              )}
                            </motion.div>
                          ))
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Assignment List */}
          <Card>
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base">{t('sub.schedule')}</CardTitle>
                {!isReadOnly && (
                  <Button
                    size="sm"
                    onClick={() => openCreateAssignment()}
                    className="bg-emerald-600 hover:bg-emerald-700"
                  >
                    <Plus className="h-4 w-4 mr-1" />
                    {t('sub.create_assignment')}
                  </Button>
                )}
              </div>
            </CardHeader>
            <CardContent>
              <ScrollArea className="max-h-96">
                {assignments.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
                    <Calendar className="h-10 w-10 mb-2 opacity-30" />
                    <p className="text-sm">{t('sub.no_assignments')}</p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    {assignments
                      .filter((a) => a.status !== 'cancelled')
                      .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
                      .map((assignment) => (
                        <div
                          key={assignment.id}
                          className="flex items-center gap-3 p-3 rounded-lg border hover:bg-muted/50 transition-colors"
                        >
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 flex-wrap">
                              <span className="font-medium text-sm">
                                {new Date(assignment.date).toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit' })}
                              </span>
                              {assignment.period && (
                                <Badge variant="outline" className="text-xs">{assignment.period}. {t('sub.period')}</Badge>
                              )}
                              <Badge className={getAssignmentStatusColor(assignment.status)}>
                                {t(`sub.status_${assignment.status}`)}
                              </Badge>
                            </div>
                            <div className="flex items-center gap-3 mt-1 text-sm text-muted-foreground">
                              <span className="flex items-center gap-1">
                                <UserCheck className="h-3.5 w-3.5" />
                                {assignment.substitute?.firstName} {assignment.substitute?.lastName}
                              </span>
                              <span className="flex items-center gap-1">
                                <BookOpen className="h-3.5 w-3.5" />
                                {assignment.subject?.name || '—'}
                              </span>
                              <span className="flex items-center gap-1">
                                <Users className="h-3.5 w-3.5" />
                                {assignment.classGroup?.name || '—'}
                              </span>
                              {assignment.room && (
                                <span className="flex items-center gap-1">
                                  <MapPin className="h-3.5 w-3.5" />
                                  {assignment.room}
                                </span>
                              )}
                            </div>
                            {assignment.absence && (
                              <p className="text-xs text-muted-foreground mt-1">
                                {t('sub.teacher')}: {assignment.absence.teacher?.firstName} {assignment.absence.teacher?.lastName}
                              </p>
                            )}
                          </div>
                          {!isReadOnly && (
                            <div className="flex items-center gap-1">
                              {assignment.status === 'pending' && (
                                <Button
                                  variant="outline" size="sm"
                                  onClick={() => handleUpdateAssignmentStatus(assignment.id, 'confirmed')}
                                  className="text-emerald-600 border-emerald-300 hover:bg-emerald-50"
                                >
                                  <CheckCircle2 className="h-3.5 w-3.5 mr-1" />
                                  {t('sub.status_confirmed')}
                                </Button>
                              )}
                              {assignment.status === 'confirmed' && (
                                <Button
                                  variant="outline" size="sm"
                                  onClick={() => handleUpdateAssignmentStatus(assignment.id, 'completed')}
                                  className="text-teal-600 border-teal-300 hover:bg-teal-50"
                                >
                                  <CheckCircle2 className="h-3.5 w-3.5 mr-1" />
                                  {t('sub.status_completed')}
                                </Button>
                              )}
                              <Button
                                variant="ghost" size="icon" className="h-7 w-7 text-destructive"
                                onClick={() => { setDeleteTarget({ type: 'assignment', id: assignment.id }); setShowDeleteDialog(true); }}
                              >
                                <XCircle className="h-3.5 w-3.5" />
                              </Button>
                            </div>
                          )}
                        </div>
                      ))}
                  </div>
                )}
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

        {/* ── Statistics Tab ───────────────────────────────────── */}
        <TabsContent value="statistics" className="space-y-4">
          {/* Stat Cards */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              { label: t('sub.total_absences'), value: stats.totalAbsences, icon: CalendarDays, color: 'from-red-500 to-orange-500' },
              { label: t('sub.coverage_rate'), value: `${stats.coverageRate}%`, icon: Shield, color: 'from-emerald-500 to-teal-500' },
              { label: t('sub.total_assignments_count'), value: stats.totalAssignments, icon: FileText, color: 'from-blue-500 to-indigo-500' },
              { label: t('sub.total_cost'), value: `€${stats.totalCost}`, icon: BarChart3, color: 'from-amber-500 to-orange-500' },
            ].map((s, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.1 }}
              >
                <Card>
                  <CardContent className="p-4">
                    <div className={`h-10 w-10 rounded-lg bg-gradient-to-br ${s.color} flex items-center justify-center text-white mb-3`}>
                      <s.icon className="h-5 w-5" />
                    </div>
                    <p className="text-2xl font-bold">
                      {typeof s.value === 'number' ? <AnimatedCounter value={s.value} /> : s.value}
                    </p>
                    <p className="text-xs text-muted-foreground mt-1">{s.label}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>

          {/* Charts Row */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            {/* Monthly Absence Trends */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">{t('sub.monthly_trends')}</CardTitle>
                <CardDescription>{t('sub.absences_per_month')}</CardDescription>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={stats.absencesPerMonth}>
                    <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
                    <XAxis dataKey="month" tick={{ fontSize: 12 }} />
                    <YAxis tick={{ fontSize: 12 }} />
                    <RechartsTooltip />
                    <Line type="monotone" dataKey="count" stroke="#10b981" strokeWidth={2} dot={{ r: 4, fill: '#10b981' }} />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            {/* Assignments by Status */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">{t('sub.assignments_per_status')}</CardTitle>
              </CardHeader>
              <CardContent>
                {stats.assignmentsByStatus.length > 0 ? (
                  <ResponsiveContainer width="100%" height={300}>
                    <PieChart>
                      <Pie
                        data={stats.assignmentsByStatus}
                        cx="50%"
                        cy="50%"
                        outerRadius={100}
                        dataKey="value"
                        label={({ name, percent }) => `${name} (${(percent * 100).toFixed(0)}%)`}
                      >
                        {stats.assignmentsByStatus.map((entry, i) => (
                          <Cell key={i} fill={entry.color} />
                        ))}
                      </Pie>
                      <RechartsTooltip />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>
                ) : (
                  <div className="flex items-center justify-center h-[300px] text-muted-foreground">
                    <p>{t('sub.no_assignments')}</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Second Charts Row */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            {/* Top Absent Teachers */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">{t('sub.top_absent_teachers')}</CardTitle>
              </CardHeader>
              <CardContent>
                {stats.topAbsentTeachers.length > 0 ? (
                  <ResponsiveContainer width="100%" height={300}>
                    <BarChart data={stats.topAbsentTeachers} layout="vertical">
                      <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
                      <XAxis type="number" tick={{ fontSize: 12 }} />
                      <YAxis type="category" dataKey="name" tick={{ fontSize: 11 }} width={120} />
                      <RechartsTooltip />
                      <Bar dataKey="count" fill="#10b981" radius={[0, 4, 4, 0]} />
                    </BarChart>
                  </ResponsiveContainer>
                ) : (
                  <div className="flex items-center justify-center h-[300px] text-muted-foreground">
                    <p>{t('sub.no_absences')}</p>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Substitute Utilization */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">{t('sub.substitute_utilization')}</CardTitle>
              </CardHeader>
              <CardContent>
                {stats.subUtilization.length > 0 ? (
                  <ResponsiveContainer width="100%" height={300}>
                    <BarChart data={stats.subUtilization}>
                      <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
                      <XAxis type="category" dataKey="name" tick={{ fontSize: 10 }} angle={-20} textAnchor="end" height={60} />
                      <YAxis tick={{ fontSize: 12 }} />
                      <RechartsTooltip />
                      <Bar dataKey="assignments" fill="#14b8a6" radius={[4, 4, 0, 0]} />
                    </BarChart>
                  </ResponsiveContainer>
                ) : (
                  <div className="flex items-center justify-center h-[300px] text-muted-foreground">
                    <p>{t('sub.no_substitutes')}</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Cost Tracking */}
          {isAdmin && (
            <Card>
              <CardHeader>
                <CardTitle className="text-base">{t('sub.cost_tracking')}</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="p-4 rounded-lg bg-muted/50">
                    <p className="text-sm text-muted-foreground">{t('sub.daily_rate')}</p>
                    <p className="text-2xl font-bold mt-1">€{stats.dailyRate}</p>
                    <p className="text-xs text-muted-foreground">{t('sub.per_day')}</p>
                  </div>
                  <div className="p-4 rounded-lg bg-muted/50">
                    <p className="text-sm text-muted-foreground">{t('sub.total_cost')}</p>
                    <p className="text-2xl font-bold mt-1">€{stats.totalCost}</p>
                    <p className="text-xs text-muted-foreground">{stats.completedAssignments} {t('sub.lessons')}</p>
                  </div>
                  <div className="p-4 rounded-lg bg-muted/50">
                    <p className="text-sm text-muted-foreground">{t('sub.coverage_rate')}</p>
                    <p className="text-2xl font-bold mt-1">{stats.coverageRate}%</p>
                    <Progress value={stats.coverageRate} className="mt-2 h-2" />
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </TabsContent>
      </Tabs>

      {/* ── Substitute Dialog ─────────────────────────────────────── */}
      <Dialog open={showSubstituteDialog} onOpenChange={setShowSubstituteDialog}>
        <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editingSubstitute ? t('sub.edit_substitute') : t('sub.add_substitute')}</DialogTitle>
            <DialogDescription>
              {editingSubstitute ? t('sub.edit_substitute') : t('sub.add_substitute')}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label>{t('sub.first_name')} *</Label>
                <Input
                  value={subForm.firstName}
                  onChange={(e) => setSubForm((p) => ({ ...p, firstName: e.target.value }))}
                />
              </div>
              <div>
                <Label>{t('sub.last_name')} *</Label>
                <Input
                  value={subForm.lastName}
                  onChange={(e) => setSubForm((p) => ({ ...p, lastName: e.target.value }))}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label>{t('sub.email')}</Label>
                <Input
                  type="email"
                  value={subForm.email}
                  onChange={(e) => setSubForm((p) => ({ ...p, email: e.target.value }))}
                />
              </div>
              <div>
                <Label>{t('sub.phone')}</Label>
                <Input
                  value={subForm.phone}
                  onChange={(e) => setSubForm((p) => ({ ...p, phone: e.target.value }))}
                />
              </div>
            </div>
            <div>
              <Label>{t('sub.qualifications')}</Label>
              <div className="flex gap-2 mb-2">
                <Input
                  value={qualInput}
                  onChange={(e) => setQualInput(e.target.value)}
                  placeholder={t('sub.add_substitute')}
                  onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addQualification(); } }}
                />
                <Button type="button" variant="outline" size="sm" onClick={addQualification}>
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex flex-wrap gap-1">
                {subForm.qualifications.map((q, i) => (
                  <Badge key={i} variant="secondary" className="gap-1">
                    {q}
                    <X className="h-3 w-3 cursor-pointer" onClick={() => removeQualification(i)} />
                  </Badge>
                ))}
              </div>
            </div>
            <div>
              <Label>{t('sub.grade_levels')}</Label>
              <div className="flex gap-2 mb-2">
                <Input
                  value={gradeInput}
                  onChange={(e) => setGradeInput(e.target.value)}
                  placeholder="5-6"
                  onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addGradeLevel(); } }}
                />
                <Button type="button" variant="outline" size="sm" onClick={addGradeLevel}>
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex flex-wrap gap-1">
                {subForm.gradeLevels.map((g, i) => (
                  <Badge key={i} variant="secondary" className="gap-1">
                    {g}
                    <X className="h-3 w-3 cursor-pointer" onClick={() => removeGradeLevel(i)} />
                  </Badge>
                ))}
              </div>
            </div>
            <div>
              <Label>{t('sub.max_days')}</Label>
              <Input
                type="number"
                min={1}
                max={7}
                value={subForm.maxDaysPerWeek}
                onChange={(e) => setSubForm((p) => ({ ...p, maxDaysPerWeek: parseInt(e.target.value) || 5 }))}
              />
            </div>
            <div>
              <Label>{t('sub.notes')}</Label>
              <Textarea
                value={subForm.notes}
                onChange={(e) => setSubForm((p) => ({ ...p, notes: e.target.value }))}
                rows={3}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowSubstituteDialog(false)}>
              {t('action.cancel')}
            </Button>
            <Button onClick={handleSaveSubstitute} className="bg-emerald-600 hover:bg-emerald-700">
              <Save className="h-4 w-4 mr-1" />
              {t('action.save')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Absence Dialog ────────────────────────────────────────── */}
      <Dialog open={showAbsenceDialog} onOpenChange={setShowAbsenceDialog}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>{editingAbsence ? t('sub.edit_absence') : t('sub.report_absence')}</DialogTitle>
            <DialogDescription>
              {editingAbsence ? t('sub.edit_absence') : t('sub.report_absence')}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>{t('sub.teacher')} *</Label>
              <Select
                value={absenceForm.teacherId}
                onValueChange={(v) => setAbsenceForm((p) => ({ ...p, teacherId: v }))}
                disabled={isTeacher}
              >
                <SelectTrigger>
                  <SelectValue placeholder={t('sub.no_teacher_selected')} />
                </SelectTrigger>
                <SelectContent>
                  {teachers.map((tch) => (
                    <SelectItem key={tch.id} value={tch.id}>
                      {tch.firstName} {tch.lastName}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>{t('sub.absence_type')} *</Label>
              <Select
                value={absenceForm.type}
                onValueChange={(v) => setAbsenceForm((p) => ({ ...p, type: v }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="SICK">{t('sub.type_sick')}</SelectItem>
                  <SelectItem value="PERSONAL">{t('sub.type_personal')}</SelectItem>
                  <SelectItem value="TRAINING">{t('sub.type_training')}</SelectItem>
                  <SelectItem value="OTHER">{t('sub.type_other')}</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label>{t('sub.start_date')} *</Label>
                <Input
                  type="date"
                  value={absenceForm.startDate}
                  onChange={(e) => setAbsenceForm((p) => ({ ...p, startDate: e.target.value }))}
                />
              </div>
              <div>
                <Label>{t('sub.end_date')} *</Label>
                <Input
                  type="date"
                  value={absenceForm.endDate}
                  onChange={(e) => setAbsenceForm((p) => ({ ...p, endDate: e.target.value }))}
                />
              </div>
            </div>
            <div>
              <Label>{t('sub.reason')}</Label>
              <Textarea
                value={absenceForm.reason}
                onChange={(e) => setAbsenceForm((p) => ({ ...p, reason: e.target.value }))}
                rows={2}
              />
            </div>
            <div>
              <Label>{t('sub.notes')}</Label>
              <Textarea
                value={absenceForm.notes}
                onChange={(e) => setAbsenceForm((p) => ({ ...p, notes: e.target.value }))}
                rows={2}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAbsenceDialog(false)}>
              {t('action.cancel')}
            </Button>
            <Button onClick={handleSaveAbsence} className="bg-emerald-600 hover:bg-emerald-700">
              <Save className="h-4 w-4 mr-1" />
              {t('action.save')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Assignment Dialog ─────────────────────────────────────── */}
      <Dialog open={showAssignmentDialog} onOpenChange={setShowAssignmentDialog}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>{editingAssignment ? t('sub.edit_assignment') : t('sub.create_assignment')}</DialogTitle>
            <DialogDescription>
              {editingAssignment ? t('sub.edit_assignment') : t('sub.create_assignment')}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>{t('sub.absences')} *</Label>
              <Select
                value={assignmentForm.absenceId}
                onValueChange={(v) => setAssignmentForm((p) => ({ ...p, absenceId: v }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder={t('sub.absences')} />
                </SelectTrigger>
                <SelectContent>
                  {absences
                    .filter((a) => a.status !== 'cancelled')
                    .map((a) => (
                      <SelectItem key={a.id} value={a.id}>
                        {a.teacher.firstName} {a.teacher.lastName} — {t(`sub.type_${a.type.toLowerCase()}`)} ({formatDate(a.startDate)})
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>{t('sub.substitute')} *</Label>
              <Select
                value={assignmentForm.substituteId}
                onValueChange={(v) => setAssignmentForm((p) => ({ ...p, substituteId: v }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder={t('sub.substitute')} />
                </SelectTrigger>
                <SelectContent>
                  {substitutes
                    .filter((s) => s.isActive)
                    .map((s) => (
                      <SelectItem key={s.id} value={s.id}>
                        {s.firstName} {s.lastName} {s.rating > 0 ? `(${s.rating.toFixed(1)} stars)` : ''}
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label>{t('sub.date')} *</Label>
                <Input
                  type="date"
                  value={assignmentForm.date}
                  onChange={(e) => setAssignmentForm((p) => ({ ...p, date: e.target.value }))}
                />
              </div>
              <div>
                <Label>{t('sub.period')}</Label>
                <Input
                  type="number"
                  min={1}
                  max={12}
                  value={assignmentForm.period}
                  onChange={(e) => setAssignmentForm((p) => ({ ...p, period: parseInt(e.target.value) || 1 }))}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label>{t('sub.room')}</Label>
                <Input
                  value={assignmentForm.room}
                  onChange={(e) => setAssignmentForm((p) => ({ ...p, room: e.target.value }))}
                />
              </div>
              <div>
                <Label>{t('sub.notes')}</Label>
                <Input
                  value={assignmentForm.notes}
                  onChange={(e) => setAssignmentForm((p) => ({ ...p, notes: e.target.value }))}
                />
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAssignmentDialog(false)}>
              {t('action.cancel')}
            </Button>
            <Button onClick={handleSaveAssignment} className="bg-emerald-600 hover:bg-emerald-700">
              <Save className="h-4 w-4 mr-1" />
              {t('action.save')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Delete Confirmation Dialog ────────────────────────────── */}
      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <DialogContent className="max-w-sm">
          <DialogHeader>
            <DialogTitle>{t('action.delete')}</DialogTitle>
            <DialogDescription>
              {deleteTarget?.type === 'substitute' && t('sub.confirm_delete_substitute')}
              {deleteTarget?.type === 'absence' && t('sub.confirm_delete_absence')}
              {deleteTarget?.type === 'assignment' && t('sub.confirm_cancel_assignment')}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteDialog(false)}>
              {t('action.cancel')}
            </Button>
            <Button variant="destructive" onClick={handleDelete}>
              <Trash2 className="h-4 w-4 mr-1" />
              {t('action.delete')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Rate Substitute Dialog ────────────────────────────────── */}
      <Dialog open={showRateDialog} onOpenChange={setShowRateDialog}>
        <DialogContent className="max-w-sm">
          <DialogHeader>
            <DialogTitle>{t('sub.rate_substitute')}</DialogTitle>
            <DialogDescription>
              {ratingSubstitute && `${ratingSubstitute.firstName} ${ratingSubstitute.lastName}`}
            </DialogDescription>
          </DialogHeader>
          <div className="flex items-center justify-center gap-2 py-4">
            {[1, 2, 3, 4, 5].map((star) => (
              <motion.button
                key={star}
                whileHover={{ scale: 1.2 }}
                whileTap={{ scale: 0.9 }}
                onClick={() => setNewRating(star)}
                className="focus:outline-none"
              >
                <Star
                  className={`h-10 w-10 transition-colors ${star <= newRating ? 'fill-amber-400 text-amber-400' : 'text-gray-300 dark:text-gray-600'}`}
                />
              </motion.button>
            ))}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowRateDialog(false)}>
              {t('action.cancel')}
            </Button>
            <Button onClick={handleRateSubstitute} className="bg-emerald-600 hover:bg-emerald-700">
              {t('action.save')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}