'use client';

import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';
import {
  ArrowLeft, Users, GraduationCap, Plus, Trash2,
  Search, MoreHorizontal, Mail, User, Calendar
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { toast } from 'sonner';
import { adminApi } from '@/services/api/admin';
import {
  ClassDetailResponse, ClassStudentMember, StudentResponse, TeacherResponse,
} from '@/types';

export default function AdminClassDetailPage() {
  const { id } = useParams() as { id: string };
  const router = useRouter();

  const [classData, setClassData] = useState<ClassDetailResponse | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [searchStudents, setSearchStudents] = useState('');
  const [searchTeachers, setSearchTeachers] = useState('');

  // Class students from dedicated endpoint
  const [classStudents, setClassStudents] = useState<ClassStudentMember[]>([]);
  const [isLoadingClassStudents, setIsLoadingClassStudents] = useState(false);

  // Add Student Dialog
  const [isAddStudentOpen, setIsAddStudentOpen] = useState(false);
  const [availableStudents, setAvailableStudents] = useState<StudentResponse[]>([]);
  const [studentSearchQuery, setStudentSearchQuery] = useState('');
  const [selectedStudentIds, setSelectedStudentIds] = useState<string[]>([]);
  const [isAddingStudent, setIsAddingStudent] = useState(false);
  const [isLoadingStudents, setIsLoadingStudents] = useState(false);

  // Add Teacher Dialog
  const [isAddTeacherOpen, setIsAddTeacherOpen] = useState(false);
  const [availableTeachers, setAvailableTeachers] = useState<TeacherResponse[]>([]);
  const [teacherSearchQuery, setTeacherSearchQuery] = useState('');
  const [selectedTeacherIds, setSelectedTeacherIds] = useState<string[]>([]);
  const [isAddingTeacher, setIsAddingTeacher] = useState(false);
  const [isLoadingTeachers, setIsLoadingTeachers] = useState(false);

  const fetchClassDetail = async () => {
    setIsLoading(true);
    try {
      const data = await adminApi.getClassById(id);
      setClassData(data);
    } catch (error) {
      toast.error('Gagal mengambil detail kelas');
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  const fetchClassStudents = async () => {
    setIsLoadingClassStudents(true);
    try {
      const response = await adminApi.getClassStudents(id, { limit: 100 });
      setClassStudents(response.data);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoadingClassStudents(false);
    }
  };

  const fetchAvailableStudents = async () => {
    setIsLoadingStudents(true);
    try {
      const response = await adminApi.getStudents({ limit: 100 });
      setAvailableStudents(response.data);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoadingStudents(false);
    }
  };

  const fetchAvailableTeachers = async () => {
    setIsLoadingTeachers(true);
    try {
      const response = await adminApi.getTeachers({ limit: 100 });
      setAvailableTeachers(response.data);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoadingTeachers(false);
    }
  };

  useEffect(() => {
    if (id) {
      fetchClassDetail();
      fetchClassStudents();
    }
  }, [id]);

  const toggleStudentSelection = (studentId: string) => {
    setSelectedStudentIds(prev => 
      prev.includes(studentId) ? prev.filter(i => i !== studentId) : [...prev, studentId]
    );
  };

  const handleAddStudent = async () => {
    if (selectedStudentIds.length === 0) {
      toast.error('Pilih minimal satu siswa terlebih dahulu');
      return;
    }
    setIsAddingStudent(true);
    try {
      await adminApi.assignStudentsToClass(id, selectedStudentIds);
      toast.success('Siswa berhasil ditambahkan ke kelas');
      setIsAddStudentOpen(false);
      setSelectedStudentIds([]);
      setStudentSearchQuery('');
      fetchClassDetail();
      fetchClassStudents();
    } catch (error: any) {
      const errorMessage = error?.response?.data?.message || error?.message || 'Gagal menambahkan siswa ke kelas';
      toast.error(`Gagal: ${errorMessage}`);
      console.error(error);
    } finally {
      setIsAddingStudent(false);
    }
  };

  const handleRemoveStudent = async (studentId: string, studentName: string) => {
    try {
      await adminApi.removeStudentFromClass(id, studentId);
      toast.success(`${studentName} berhasil dihapus dari kelas`);
      fetchClassDetail();
      fetchClassStudents();
    } catch (error) {
      toast.error('Gagal menghapus siswa dari kelas');
      console.error(error);
    }
  };

  const toggleTeacherSelection = (teacherId: string) => {
    setSelectedTeacherIds(prev => 
      prev.includes(teacherId) ? prev.filter(i => i !== teacherId) : [...prev, teacherId]
    );
  };

  const handleAddTeacher = async () => {
    if (selectedTeacherIds.length === 0) {
      toast.error('Pilih minimal satu guru terlebih dahulu');
      return;
    }
    setIsAddingTeacher(true);
    try {
      await adminApi.assignTeachersToClass(id, selectedTeacherIds);
      toast.success('Guru berhasil ditambahkan ke kelas');
      setIsAddTeacherOpen(false);
      setSelectedTeacherIds([]);
      setTeacherSearchQuery('');
      fetchClassDetail();
    } catch (error: any) {
      const errorMessage = error?.response?.data?.message || error?.message || 'Gagal menambahkan guru ke kelas';
      toast.error(`Gagal: ${errorMessage}`);
      console.error(error);
    } finally {
      setIsAddingTeacher(false);
    }
  };

  const handleRemoveTeacher = async (teacherId: string, teacherName: string) => {
    try {
      await adminApi.removeTeacherFromClass(id, teacherId);
      toast.success(`${teacherName} berhasil dihapus dari kelas`);
      fetchClassDetail();
    } catch (error) {
      toast.error('Gagal menghapus guru dari kelas');
      console.error(error);
    }
  };

  // Filter existing students/teachers in search
  const filteredStudents = classStudents.filter((s) =>
    !searchStudents ||
    s.fullName?.toLowerCase().includes(searchStudents.toLowerCase()) ||
    s.email?.toLowerCase().includes(searchStudents.toLowerCase()) ||
    s.nis?.toLowerCase().includes(searchStudents.toLowerCase())
  );

  const filteredTeachers = classData?.teachers?.filter((t) =>
    !searchTeachers ||
    t.user.fullName?.toLowerCase().includes(searchTeachers.toLowerCase()) ||
    t.user.email?.toLowerCase().includes(searchTeachers.toLowerCase())
  ) || [];

  const existingStudentIds = new Set(classStudents.map(s => (s as any).studentId || s.userId || s.id));
  const filteredAvailableStudents = availableStudents.filter((s) => {
    const matchSearch = !studentSearchQuery ||
      s.fullName?.toLowerCase().includes(studentSearchQuery.toLowerCase()) ||
      s.email?.toLowerCase().includes(studentSearchQuery.toLowerCase()) ||
      s.nis?.toLowerCase().includes(studentSearchQuery.toLowerCase());
    return matchSearch;
  });

  const existingTeacherIds = new Set(classData?.teachers?.map(t => (t as any).teacherId || t.userId || t.user?.id || t.id) || []);
  const filteredAvailableTeachers = availableTeachers.filter((t) => {
    const matchSearch = !teacherSearchQuery ||
      t.fullName?.toLowerCase().includes(teacherSearchQuery.toLowerCase()) ||
      t.email?.toLowerCase().includes(teacherSearchQuery.toLowerCase());
    return matchSearch;
  });

  const formatDate = (dateStr: string) => {
    return new Intl.DateTimeFormat('id-ID', {
      day: '2-digit',
      month: 'long',
      year: 'numeric',
    }).format(new Date(dateStr));
  };

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center py-20 gap-3">
        <div className="h-8 w-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
        <p className="text-muted-foreground text-sm">Memuat detail kelas...</p>
      </div>
    );
  }

  if (!classData) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-center space-y-4">
        <p className="text-muted-foreground">Kelas tidak ditemukan</p>
        <Button variant="outline" onClick={() => router.back()} className="rounded-xl">Kembali</Button>
      </div>
    );
  }

  return (
    <>
      <title>{`${classData.name} | Nadhom Smart`}</title>
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">
        {/* Header */}
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()} className="rounded-full hover:bg-accent">
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div className="flex-1">
            <h1 className="text-2xl font-bold">{classData.name}</h1>
            <p className="text-muted-foreground text-sm">Detail dan manajemen kelas</p>
          </div>
        </div>

        {/* Info Cards */}
        <div className="grid grid-cols-3 gap-3 sm:gap-4">
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="bg-card border border-border/50 rounded-2xl p-3 sm:p-5 shadow-sm"
          >
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-3">
              <div className="p-2 sm:p-2.5 bg-primary/10 rounded-xl text-primary">
                <Users className="h-4 w-4 sm:h-5 sm:w-5" />
              </div>
              <div>
                <p className="text-[10px] sm:text-xs text-muted-foreground">Total Siswa</p>
                <p className="text-lg sm:text-2xl font-bold">{classStudents.length}</p>
              </div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.15 }}
            className="bg-card border border-border/50 rounded-2xl p-3 sm:p-5 shadow-sm"
          >
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-3">
              <div className="p-2 sm:p-2.5 bg-emerald-500/10 rounded-xl text-emerald-600">
                <GraduationCap className="h-4 w-4 sm:h-5 sm:w-5" />
              </div>
              <div>
                <p className="text-[10px] sm:text-xs text-muted-foreground">Total Guru</p>
                <p className="text-lg sm:text-2xl font-bold">{classData.teachers?.length || 0}</p>
              </div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="bg-card border border-border/50 rounded-2xl p-3 sm:p-5 shadow-sm"
          >
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-3">
              <div className="p-2 sm:p-2.5 bg-amber-500/10 rounded-xl text-amber-600">
                <Calendar className="h-4 w-4 sm:h-5 sm:w-5" />
              </div>
              <div>
                <p className="text-[10px] sm:text-xs text-muted-foreground">Dibuat Pada</p>
                <p className="text-xs sm:text-sm font-semibold truncate max-w-[80px] sm:max-w-none" title={formatDate(classData.createdAt)}>
                  {formatDate(classData.createdAt)}
                </p>
              </div>
            </div>
          </motion.div>
        </div>

        {/* Tabs */}
        <Tabs defaultValue="students" className="space-y-4">
          <TabsList className="w-full sm:w-auto">
            <TabsTrigger value="students" className="gap-1.5">
              <Users className="h-4 w-4" />
              Siswa
              <Badge variant="secondary" className="ml-1 text-[10px] px-1.5 py-0 h-5 font-mono">{classStudents.length}</Badge>
            </TabsTrigger>
            <TabsTrigger value="teachers" className="gap-1.5">
              <GraduationCap className="h-4 w-4" />
              Guru
              <Badge variant="secondary" className="ml-1 text-[10px] px-1.5 py-0 h-5 font-mono">{classData.teachers?.length || 0}</Badge>
            </TabsTrigger>
          </TabsList>

          {/* === STUDENTS TAB === */}
          <TabsContent value="students" className="space-y-4">
            <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
              <div className="relative flex-1 w-full sm:max-w-xs">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Cari siswa..."
                  value={searchStudents}
                  onChange={(e) => setSearchStudents(e.target.value)}
                  className="pl-9 rounded-xl"
                />
              </div>
              <Button
                size="sm"
                className="rounded-xl gap-1 gradient-primary border-0 text-white w-full sm:w-auto"
                onClick={() => {
                  const existingIds = classStudents.map(s => (s as any).studentId || s.userId || s.id);
                  setSelectedStudentIds(existingIds);
                  setIsAddStudentOpen(true);
                  fetchAvailableStudents();
                }}
              >
                <Plus className="h-3.5 w-3.5" /> Tambah Siswa
              </Button>
            </div>

            {/* Desktop Table */}
            <div className="hidden md:block rounded-2xl border border-border/50 overflow-hidden bg-card">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Nama Lengkap</TableHead>
                    <TableHead>NIS</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Username</TableHead>
                    <TableHead className="w-10" />
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredStudents.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                        {searchStudents ? 'Tidak ditemukan siswa yang cocok' : 'Belum ada siswa di kelas ini'}
                      </TableCell>
                    </TableRow>
                  ) : filteredStudents.map((student) => (
                    <TableRow key={student.id}>
                      <TableCell className="font-medium">
                        <div className="flex items-center gap-3">
                          <div className="h-8 w-8 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-semibold">
                            {student.fullName?.charAt(0)?.toUpperCase()}
                          </div>
                          {student.fullName}
                        </div>
                      </TableCell>
                      <TableCell className="text-muted-foreground font-mono text-sm">{student.nis || '-'}</TableCell>
                      <TableCell className="text-muted-foreground">{student.email}</TableCell>
                      <TableCell className="text-muted-foreground">@{student.username}</TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon" className="h-8 w-8">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem
                              className="text-destructive"
                              onClick={() => handleRemoveStudent(student.id, student.fullName)}
                            >
                              <Trash2 className="h-3.5 w-3.5 mr-2" /> Hapus dari Kelas
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

            {/* Mobile Cards */}
            <div className="grid grid-cols-1 gap-3 md:hidden">
              {filteredStudents.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground bg-card rounded-2xl border border-border/50">
                  {searchStudents ? 'Tidak ditemukan siswa yang cocok' : 'Belum ada siswa di kelas ini'}
                </div>
              ) : filteredStudents.map((student) => (
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  key={student.id}
                  className="p-4 rounded-2xl border border-border/50 bg-card flex flex-col gap-3 shadow-sm"
                >
                  <div className="flex justify-between items-start">
                    <div className="flex items-center gap-3">
                      <div className="h-9 w-9 rounded-full bg-primary/10 text-primary flex items-center justify-center text-sm font-semibold">
                        {student.fullName?.charAt(0)?.toUpperCase()}
                      </div>
                      <div>
                        <h3 className="font-semibold text-sm">{student.fullName}</h3>
                        <p className="text-xs text-muted-foreground">{student.nis ? `NIS: ${student.nis}` : student.email}</p>
                      </div>
                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8 -mr-2 -mt-1">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end" className="rounded-xl">
                        <DropdownMenuItem
                          className="text-destructive rounded-lg"
                          onClick={() => handleRemoveStudent(student.id, student.fullName)}
                        >
                          <Trash2 className="h-3.5 w-3.5 mr-2" /> Hapus dari Kelas
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                  <div className="flex items-center justify-between border-t border-border/30 pt-3 mt-1">
                    <span className="text-xs text-muted-foreground flex items-center gap-1">
                      <Mail className="h-3 w-3" /> {student.email}
                    </span>
                    <span className="text-xs text-muted-foreground">@{student.username}</span>
                  </div>
                </motion.div>
              ))}
            </div>
          </TabsContent>

          {/* === TEACHERS TAB === */}
          <TabsContent value="teachers" className="space-y-4">
            <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
              <div className="relative flex-1 w-full sm:max-w-xs">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Cari guru..."
                  value={searchTeachers}
                  onChange={(e) => setSearchTeachers(e.target.value)}
                  className="pl-9 rounded-xl"
                />
              </div>
              <Button
                size="sm"
                className="rounded-xl gap-1 gradient-primary border-0 text-white w-full sm:w-auto"
                onClick={() => {
                  const existingIds = classData?.teachers?.map(t => (t as any).teacherId || t.userId || t.user?.id || t.id) || [];
                  setSelectedTeacherIds(existingIds);
                  setIsAddTeacherOpen(true);
                  fetchAvailableTeachers();
                }}
              >
                <Plus className="h-3.5 w-3.5" /> Tambah Guru
              </Button>
            </div>

            {/* Desktop Table */}
            <div className="hidden md:block rounded-2xl border border-border/50 overflow-hidden bg-card">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Nama Lengkap</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Username</TableHead>
                    <TableHead className="w-10" />
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredTeachers.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
                        {searchTeachers ? 'Tidak ditemukan guru yang cocok' : 'Belum ada guru di kelas ini'}
                      </TableCell>
                    </TableRow>
                  ) : filteredTeachers.map((teacher) => (
                    <TableRow key={teacher.id}>
                      <TableCell className="font-medium">
                        <div className="flex items-center gap-3">
                          <div className="h-8 w-8 rounded-full bg-emerald-500/10 text-emerald-600 flex items-center justify-center text-xs font-semibold">
                            {teacher.user.fullName?.charAt(0)?.toUpperCase()}
                          </div>
                          {teacher.user.fullName}
                        </div>
                      </TableCell>
                      <TableCell className="text-muted-foreground">{teacher.user.email}</TableCell>
                      <TableCell className="text-muted-foreground">@{teacher.user.username}</TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon" className="h-8 w-8">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem
                              className="text-destructive"
                              onClick={() => handleRemoveTeacher(teacher.id, teacher.user.fullName)}
                            >
                              <Trash2 className="h-3.5 w-3.5 mr-2" /> Hapus dari Kelas
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

            {/* Mobile Cards */}
            <div className="grid grid-cols-1 gap-3 md:hidden">
              {filteredTeachers.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground bg-card rounded-2xl border border-border/50">
                  {searchTeachers ? 'Tidak ditemukan guru yang cocok' : 'Belum ada guru di kelas ini'}
                </div>
              ) : filteredTeachers.map((teacher) => (
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  key={teacher.id}
                  className="p-4 rounded-2xl border border-border/50 bg-card flex flex-col gap-3 shadow-sm"
                >
                  <div className="flex justify-between items-start">
                    <div className="flex items-center gap-3">
                      <div className="h-9 w-9 rounded-full bg-emerald-500/10 text-emerald-600 flex items-center justify-center text-sm font-semibold">
                        {teacher.user.fullName?.charAt(0)?.toUpperCase()}
                      </div>
                      <div>
                        <h3 className="font-semibold text-sm">{teacher.user.fullName}</h3>
                        <p className="text-xs text-muted-foreground">{teacher.user.email}</p>
                      </div>
                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8 -mr-2 -mt-1">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end" className="rounded-xl">
                        <DropdownMenuItem
                          className="text-destructive rounded-lg"
                          onClick={() => handleRemoveTeacher(teacher.id, teacher.user.fullName)}
                        >
                          <Trash2 className="h-3.5 w-3.5 mr-2" /> Hapus dari Kelas
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                  <div className="flex items-center justify-between border-t border-border/30 pt-3 mt-1">
                    <span className="text-xs text-muted-foreground flex items-center gap-1">
                      <Mail className="h-3 w-3" /> {teacher.user.email}
                    </span>
                    <span className="text-xs text-muted-foreground">@{teacher.user.username}</span>
                  </div>
                </motion.div>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </motion.div>

      {/* === ADD STUDENT DIALOG === */}
      <Dialog open={isAddStudentOpen} onOpenChange={(open) => {
        setIsAddStudentOpen(open);
        if (!open) { setSelectedStudentIds([]); setStudentSearchQuery(''); }
      }}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Tambah Siswa ke Kelas</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Cari Siswa</Label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Cari berdasarkan nama, email, atau NIS..."
                  value={studentSearchQuery}
                  onChange={(e) => setStudentSearchQuery(e.target.value)}
                  className="pl-9 rounded-xl"
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label>Pilih Siswa</Label>
              {isLoadingStudents ? (
                <div className="text-center py-4 text-muted-foreground text-sm">Memuat data siswa...</div>
              ) : (
                <div className="max-h-48 overflow-y-auto border border-border/50 rounded-xl">
                  {filteredAvailableStudents.length === 0 ? (
                    <div className="text-center py-4 text-muted-foreground text-sm px-3">
                      {studentSearchQuery ? 'Tidak ditemukan siswa yang cocok' : 'Semua siswa sudah ada di kelas ini'}
                    </div>
                  ) : filteredAvailableStudents.map((s) => (
                    <label
                      key={s.studentId || s.id}
                      className={`w-full flex items-center gap-3 p-3 text-left transition-colors hover:bg-accent/50 border-b border-border/30 last:border-b-0 cursor-pointer ${
                        selectedStudentIds.includes(s.studentId || s.id) ? 'bg-primary/5' : ''
                      }`}
                    >
                      <input 
                        type="checkbox" 
                        className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                        checked={selectedStudentIds.includes(s.studentId || s.id)}
                        onChange={() => toggleStudentSelection(s.studentId || s.id)}
                      />
                      <div className="h-8 w-8 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-semibold shrink-0 ml-2">
                        {s.fullName?.charAt(0)?.toUpperCase()}
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="text-sm font-medium truncate">{s.fullName}</p>
                        <p className="text-xs text-muted-foreground truncate">
                          {s.nis ? `NIS: ${s.nis} · ` : ''}{s.email}
                        </p>
                      </div>
                    </label>
                  ))}
                </div>
              )}
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline" className="rounded-xl" disabled={isAddingStudent}>Batal</Button>
            </DialogClose>
            <Button
              className="rounded-xl gradient-primary border-0 text-white"
              onClick={handleAddStudent}
              disabled={isAddingStudent || selectedStudentIds.length === 0}
            >
              {isAddingStudent ? 'Menambahkan...' : `Tambahkan (${selectedStudentIds.length})`}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* === ADD TEACHER DIALOG === */}
      <Dialog open={isAddTeacherOpen} onOpenChange={(open) => {
        setIsAddTeacherOpen(open);
        if (!open) { setSelectedTeacherIds([]); setTeacherSearchQuery(''); }
      }}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Tambah Guru ke Kelas</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Cari Guru</Label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Cari berdasarkan nama atau email..."
                  value={teacherSearchQuery}
                  onChange={(e) => setTeacherSearchQuery(e.target.value)}
                  className="pl-9 rounded-xl"
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label>Pilih Guru</Label>
              {isLoadingTeachers ? (
                <div className="text-center py-4 text-muted-foreground text-sm">Memuat data guru...</div>
              ) : (
                <div className="max-h-48 overflow-y-auto border border-border/50 rounded-xl">
                  {filteredAvailableTeachers.length === 0 ? (
                    <div className="text-center py-4 text-muted-foreground text-sm px-3">
                      {teacherSearchQuery ? 'Tidak ditemukan guru yang cocok' : 'Semua guru sudah ada di kelas ini'}
                    </div>
                  ) : filteredAvailableTeachers.map((t) => (
                    <label
                      key={t.teacherId || t.id}
                      className={`w-full flex items-center gap-3 p-3 text-left transition-colors hover:bg-accent/50 border-b border-border/30 last:border-b-0 cursor-pointer ${
                        selectedTeacherIds.includes(t.teacherId || t.id) ? 'bg-emerald-500/5' : ''
                      }`}
                    >
                      <input 
                        type="checkbox" 
                        className="h-4 w-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-600"
                        checked={selectedTeacherIds.includes(t.teacherId || t.id)}
                        onChange={() => toggleTeacherSelection(t.teacherId || t.id)}
                      />
                      <div className="h-8 w-8 rounded-full bg-emerald-500/10 text-emerald-600 flex items-center justify-center text-xs font-semibold shrink-0 ml-2">
                        {t.fullName?.charAt(0)?.toUpperCase()}
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="text-sm font-medium truncate">{t.fullName}</p>
                        <p className="text-xs text-muted-foreground truncate">{t.email}</p>
                      </div>
                    </label>
                  ))}
                </div>
              )}
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline" className="rounded-xl" disabled={isAddingTeacher}>Batal</Button>
            </DialogClose>
            <Button
              className="rounded-xl gradient-primary border-0 text-white"
              onClick={handleAddTeacher}
              disabled={isAddingTeacher || selectedTeacherIds.length === 0}
            >
              {isAddingTeacher ? 'Menambahkan...' : `Tambahkan (${selectedTeacherIds.length})`}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}