"use client";

/** صفحة الصفوف والشعب: إضافة/حذف/استعادة صفوف وشعب، فرز طلبة كل صف حسب الشعب، نقل الطلبة */
import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { useToast } from "@/hooks/use-toast";
import { apiFetch, gradeLabel } from "@/lib/client-utils";
import { useStructure } from "@/lib/structure-context";
import { StudentWithStatus } from "@/lib/types";
import {
  Network, Plus, Loader2, ArrowLeftRight, Pencil, Trash2, Users, GraduationCap, Search, Layers, RotateCcw,
} from "lucide-react";

interface ClassesViewProps {
  userRole: string;
  onStudentsChanged: () => void;
}

export default function ClassesView({ userRole, onStudentsChanged }: ClassesViewProps) {
  const { toast } = useToast();
  const { grades, hiddenBuiltIn, classrooms, reload } = useStructure();
  const isAdmin = userRole === "ADMIN";
  const canManage = isAdmin || userRole === "STAFF";

  // إضافة شعبة
  const [newClassName, setNewClassName] = useState("");
  const [addingClass, setAddingClass] = useState(false);

  // إضافة صف
  const [newGradeName, setNewGradeName] = useState("");
  const [newGradeCode, setNewGradeCode] = useState("");
  const [addingGrade, setAddingGrade] = useState(false);

  // فرز طلبة الصفوف: عدادات البطاقات + حوار تفاصيل الصف
  const [gradeCounts, setGradeCounts] = useState<Record<string, number>>({});
  const [viewGrade, setViewGrade] = useState<null | { code: string; labelAr: string }>(null);
  const [gradeDetails, setGradeDetails] = useState<null | {
    total: number;
    sectionsCount: number;
    sections: { classroom: string; count: number; students: { id: string; nameAr: string; studentCode: string }[] }[];
  }>(null);
  const [gradeDetailsLoading, setGradeDetailsLoading] = useState(false);

  // نقل طالب فردي
  const [search, setSearch] = useState("");
  const [searchResults, setSearchResults] = useState<StudentWithStatus[]>([]);
  const [pickedStudent, setPickedStudent] = useState<StudentWithStatus | null>(null);
  const [moveGrade, setMoveGrade] = useState("");
  const [moveClass, setMoveClass] = useState("");
  const [moving, setMoving] = useState(false);

  // نقل جماعي
  const [fromGrade, setFromGrade] = useState("");
  const [fromClass, setFromClass] = useState("");
  const [toGrade, setToGrade] = useState("");
  const [toClass, setToClass] = useState("");
  const [bulkMoving, setBulkMoving] = useState(false);

  // تعديل/حذف شعبة
  const [renameTarget, setRenameTarget] = useState<{ id: string; name: string } | null>(null);
  const [renameValue, setRenameValue] = useState("");

  const runSearch = useCallback(async (q: string) => {
    if (q.trim().length < 2) {
      setSearchResults([]);
      return;
    }
    try {
      const data = await apiFetch<{ students: StudentWithStatus[] }>(
        `/api/students?limit=8&q=${encodeURIComponent(q.trim())}`
      );
      setSearchResults(data.students);
    } catch {
      setSearchResults([]);
    }
  }, []);

  useEffect(() => {
    const t = setTimeout(() => runSearch(search), 300);
    return () => clearTimeout(t);
  }, [search, runSearch]);

  // عدد الطلبة النشطين في كل صف (يظهر على بطاقات الصفوف)
  const loadGradeCounts = useCallback(async () => {
    try {
      const data = await apiFetch<{ counts: Record<string, number> }>("/api/classes/grade-students?grade=all");
      setGradeCounts(data.counts || {});
    } catch {
      setGradeCounts({});
    }
  }, []);

  useEffect(() => {
    loadGradeCounts();
  }, [loadGradeCounts, classrooms.length]);

  async function openGradeStudents(code: string, labelAr: string) {
    setViewGrade({ code, labelAr });
    setGradeDetails(null);
    setGradeDetailsLoading(true);
    try {
      const data = await apiFetch<{
        total: number;
        sectionsCount: number;
        sections: { classroom: string; count: number; students: { id: string; nameAr: string; studentCode: string }[] }[];
      }>(`/api/classes/grade-students?grade=${encodeURIComponent(code)}`);
      setGradeDetails(data);
    } catch {
      toast({ title: "تعذر جلب طلبة الصف", variant: "destructive" });
    } finally {
      setGradeDetailsLoading(false);
    }
  }

  async function restoreGrade(code: string, labelAr: string) {
    try {
      await apiFetch("/api/custom-grades", { method: "POST", body: JSON.stringify({ restoreCode: code }) });
      toast({ title: `تمت استعادة صف ${labelAr}` });
      reload();
      loadGradeCounts();
    } catch (err) {
      toast({ title: "فشلت الاستعادة", description: err instanceof Error ? err.message : "", variant: "destructive" });
    }
  }

  async function addClassroom() {
    if (!newClassName.trim()) return;
    setAddingClass(true);
    try {
      await apiFetch("/api/classrooms", { method: "POST", body: JSON.stringify({ name: newClassName.trim() }) });
      toast({ title: "تمت إضافة الشعبة", description: `شعبة ${newClassName.trim()} جاهزة للاستخدام` });
      setNewClassName("");
      reload();
    } catch (err) {
      toast({ title: "فشلت الإضافة", description: err instanceof Error ? err.message : "", variant: "destructive" });
    } finally {
      setAddingClass(false);
    }
  }

  async function renameClassroom() {
    if (!renameTarget || !renameValue.trim()) return;
    try {
      await apiFetch("/api/classrooms", {
        method: "PATCH",
        body: JSON.stringify({ id: renameTarget.id, name: renameValue.trim() }),
      });
      toast({ title: "تم تعديل اسم الشعبة", description: "تم تحديث جميع الطلبة المرتبطين بها" });
      setRenameTarget(null);
      reload();
    } catch (err) {
      toast({ title: "فشل التعديل", description: err instanceof Error ? err.message : "", variant: "destructive" });
    }
  }

  async function deleteClassroom(id: string, name: string, count: number) {
    if (count > 0) {
      toast({ title: "لا يمكن الحذف", description: `الشعبة ${name} فيها ${count} طالب — انقلهم أولاً`, variant: "destructive" });
      return;
    }
    try {
      await apiFetch(`/api/classrooms?id=${id}`, { method: "DELETE" });
      toast({ title: `تم حذف شعبة ${name}` });
      reload();
    } catch (err) {
      toast({ title: "فشل الحذف", description: err instanceof Error ? err.message : "", variant: "destructive" });
    }
  }

  async function addGrade() {
    if (!newGradeName.trim()) return;
    setAddingGrade(true);
    try {
      const data = await apiFetch<{ grade: { code: string; nameAr: string } }>("/api/custom-grades", {
        method: "POST",
        body: JSON.stringify({ nameAr: newGradeName.trim(), code: newGradeCode.trim() }),
      });
      toast({ title: "تمت إضافة الصف", description: `${data.grade.nameAr} — كود الطلبة الجديد يبدأ بـ ${data.grade.code}` });
      setNewGradeName("");
      setNewGradeCode("");
      reload();
    } catch (err) {
      toast({ title: "فشلت الإضافة", description: err instanceof Error ? err.message : "", variant: "destructive" });
    } finally {
      setAddingGrade(false);
    }
  }

  async function deleteGrade(id: string, name: string) {
    try {
      await apiFetch(`/api/custom-grades?id=${id}`, { method: "DELETE" });
      toast({ title: `تم حذف صف ${name}` });
      reload();
      loadGradeCounts();
    } catch (err) {
      toast({ title: "فشل الحذف", description: err instanceof Error ? err.message : "", variant: "destructive" });
    }
  }

  async function deleteBuiltInGrade(code: string, name: string) {
    try {
      await apiFetch(`/api/custom-grades?code=${encodeURIComponent(code)}`, { method: "DELETE" });
      toast({ title: `تم حذف صف ${name}`, description: "يمكن استعادته من قائمة الصفوف المحذوفة في نفس الصفحة" });
      reload();
    } catch (err) {
      toast({ title: "فشل الحذف", description: err instanceof Error ? err.message : "", variant: "destructive" });
    }
  }

  async function moveStudent() {
    if (!pickedStudent || !moveGrade || !moveClass) return;
    setMoving(true);
    try {
      await apiFetch(`/api/students/${pickedStudent.id}`, {
        method: "PATCH",
        body: JSON.stringify({ grade: moveGrade, classroom: moveClass }),
      });
      toast({
        title: "تم نقل الطالب",
        description: `${pickedStudent.nameAr} أصبح في ${gradeLabel(moveGrade)} / شعبة ${moveClass}`,
      });
      setPickedStudent(null);
      setSearch("");
      setSearchResults([]);
      setMoveGrade("");
      setMoveClass("");
      reload();
      loadGradeCounts();
      onStudentsChanged();
    } catch (err) {
      toast({ title: "فشل النقل", description: err instanceof Error ? err.message : "", variant: "destructive" });
    } finally {
      setMoving(false);
    }
  }

  async function bulkMove() {
    if (!fromGrade && !fromClass) return;
    if (!toGrade || !toClass) return;
    setBulkMoving(true);
    try {
      const data = await apiFetch<{ transferred: number; students: { nameAr: string }[] }>("/api/students/transfer", {
        method: "POST",
        body: JSON.stringify({ fromGrade, fromClass, toGrade, toClass }),
      });
      toast({ title: "تم النقل الجماعي", description: `تم نقل ${data.transferred} طالب إلى ${gradeLabel(toGrade)} / شعبة ${toClass}` });
      reload();
      loadGradeCounts();
      onStudentsChanged();
    } catch (err) {
      toast({ title: "فشل النقل الجماعي", description: err instanceof Error ? err.message : "", variant: "destructive" });
    } finally {
      setBulkMoving(false);
    }
  }

  return (
    <div className="space-y-5">
      {/* إدارة الشعب */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-lg flex items-center gap-2">
            <Network className="w-5 h-5 text-primary" />
            الشعب الدراسية
            <Badge variant="secondary">{classrooms.length}</Badge>
          </CardTitle>
          <CardDescription>أضف شعباً جديدة أو عدّل أسماءها — الشعب تظهر في تسجيل الطلبة والدفع</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-2">
            {classrooms.map((c) => (
              <div key={c.id} className="flex items-center gap-1.5 rounded-xl border bg-card px-3 py-2">
                <span className="font-bold">شعبة {c.name}</span>
                <Badge variant={c.studentsCount > 0 ? "secondary" : "outline"} className="text-[10px]">
                  {c.studentsCount} طالب
                </Badge>
                {isAdmin && (
                  <>
                    <Button
                      variant="ghost" size="icon" className="h-6 w-6"
                      onClick={() => { setRenameTarget({ id: c.id, name: c.name }); setRenameValue(c.name); }}
                      aria-label={`تعديل شعبة ${c.name}`}
                    >
                      <Pencil className="w-3.5 h-3.5" />
                    </Button>
                    <Button
                      variant="ghost" size="icon" className="h-6 w-6 text-destructive"
                      onClick={() => deleteClassroom(c.id, c.name, c.studentsCount)}
                      aria-label={`حذف شعبة ${c.name}`}
                    >
                      <Trash2 className="w-3.5 h-3.5" />
                    </Button>
                  </>
                )}
              </div>
            ))}
            {classrooms.length === 0 && (
              <p className="text-sm text-muted-foreground">لا توجد شعب — أضف أول شعبة أدناه</p>
            )}
          </div>
          {isAdmin && (
            <div className="flex gap-2 items-end">
              <div className="space-y-1 flex-1 max-w-xs">
                <Label htmlFor="new-class">اسم شعبة جديدة</Label>
                <Input id="new-class" value={newClassName} onChange={(e) => setNewClassName(e.target.value)} placeholder="مثال: ز" />
              </div>
              <Button onClick={addClassroom} disabled={addingClass || !newClassName.trim()}>
                {addingClass ? <Loader2 className="w-4 h-4 ml-1 animate-spin" /> : <Plus className="w-4 h-4 ml-1" />}
                إضافة شعبة
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

      {/* إدارة الصفوف */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-lg flex items-center gap-2">
            <Layers className="w-5 h-5 text-primary" />
            الصفوف الدراسية
          </CardTitle>
          <CardDescription>
            اضغط على أي صف لعرض طلابته وشعبه — ويمكن للمدير حذف أي صف وإضافته من جديد (الصف الذي فيه طلبة لا يُحذف)
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-2">
            {grades.map((g) => (
              <div key={g.code} className="flex items-center gap-1 rounded-xl border bg-card px-3 py-2">
                <button
                  className="flex items-center gap-1.5 text-right cursor-pointer"
                  onClick={() => openGradeStudents(g.code, g.labelAr)}
                  aria-label={`عرض طلبة صف ${g.labelAr}`}
                >
                  <GraduationCap className="w-4 h-4 text-primary" />
                  <span className="font-bold text-sm">{g.labelAr}</span>
                  <span dir="ltr" className="text-[10px] text-muted-foreground">{g.code}</span>
                  <Badge variant={gradeCounts[g.code] > 0 ? "secondary" : "outline"} className="text-[10px]">
                    {gradeCounts[g.code] || 0} طالب
                  </Badge>
                </button>
                {isAdmin && (
                  <button
                    className="text-destructive hover:text-destructive/70 px-1"
                    onClick={() =>
                      g.isCustom && g.id
                        ? deleteGrade(g.id, g.labelAr)
                        : deleteBuiltInGrade(g.code, g.labelAr)
                    }
                    aria-label={`حذف صف ${g.labelAr}`}
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                )}
              </div>
            ))}
            {grades.length === 0 && (
              <p className="text-sm text-muted-foreground">لا توجد صفوف ظاهرة — استعد صفاً من الأسفل أو أضف صفاً جديداً</p>
            )}
          </div>
          {isAdmin && hiddenBuiltIn.length > 0 && (
            <div className="rounded-xl border border-dashed p-3 space-y-2">
              <p className="text-xs font-semibold text-muted-foreground flex items-center gap-1.5">
                <RotateCcw className="w-3.5 h-3.5" />
                الصفوف المحذوفة (قابلة للاستعادة):
              </p>
              <div className="flex flex-wrap gap-2">
                {hiddenBuiltIn.map((h) => (
                  <div key={h.code} className="flex items-center gap-1.5 rounded-xl border bg-muted/40 px-3 py-1.5">
                    <span className="text-sm text-muted-foreground">{h.labelAr}</span>
                    <button
                      className="text-primary hover:text-primary/70"
                      onClick={() => restoreGrade(h.code, h.labelAr)}
                      aria-label={`استعادة صف ${h.labelAr}`}
                    >
                      <RotateCcw className="w-4 h-4" />
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}
          {isAdmin && (
            <div className="flex gap-2 items-end flex-wrap">
              <div className="space-y-1 flex-1 min-w-48 max-w-xs">
                <Label htmlFor="new-grade">اسم الصف الجديد</Label>
                <Input id="new-grade" value={newGradeName} onChange={(e) => setNewGradeName(e.target.value)} placeholder="مثال: السادس العلمي" />
              </div>
              <div className="space-y-1 w-36">
                <Label htmlFor="new-grade-code">بادئة الكود (اختياري)</Label>
                <Input
                  id="new-grade-code"
                  value={newGradeCode}
                  onChange={(e) => setNewGradeCode(e.target.value.toUpperCase())}
                  placeholder="CG1"
                  dir="ltr"
                  className="text-left"
                  maxLength={4}
                />
              </div>
              <Button onClick={addGrade} disabled={addingGrade || !newGradeName.trim()}>
                {addingGrade ? <Loader2 className="w-4 h-4 ml-1 animate-spin" /> : <Plus className="w-4 h-4 ml-1" />}
                إضافة صف
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

      <Separator />

      {/* نقل طالب فردي */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-lg flex items-center gap-2">
            <ArrowLeftRight className="w-5 h-5 text-primary" />
            نقل طالب إلى شعبة أو صف آخر
          </CardTitle>
          <CardDescription>ابحث عن الطالب ثم اختر الصف والشعبة الجديدة — الكود التلقائي للطالب لا يتغير</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {!canManage ? (
            <p className="text-sm text-muted-foreground">ليست لديك صلاحية نقل الطلبة</p>
          ) : (
            <>
              <div className="relative">
                <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                <Input
                  className="pr-9"
                  placeholder="ابحث باسم الطالب أو الكود..."
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  aria-label="بحث عن طالب للنقل"
                />
              </div>
              {searchResults.length > 0 && !pickedStudent && (
                <div className="grid gap-2 max-h-56 overflow-y-auto">
                  {searchResults.map((s) => (
                    <button
                      key={s.id}
                      className="flex items-center justify-between gap-2 rounded-xl border p-2.5 text-right hover:bg-accent"
                      onClick={() => {
                        setPickedStudent(s);
                        setMoveGrade(s.grade);
                        setMoveClass(s.classroom);
                        setSearchResults([]);
                        setSearch("");
                      }}
                    >
                      <div className="flex items-center gap-2 min-w-0">
                        <GraduationCap className="w-4 h-4 text-primary shrink-0" />
                        <span className="font-medium text-sm truncate">{s.nameAr}</span>
                        <span className="text-xs text-muted-foreground" dir="ltr">{s.studentCode}</span>
                      </div>
                      <Badge variant="outline" className="text-[11px] shrink-0">
                        {gradeLabel(s.grade)} / {s.classroom}
                      </Badge>
                    </button>
                  ))}
                </div>
              )}
              {pickedStudent && (
                <div className="rounded-xl border p-4 space-y-3">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <div className="flex items-center gap-2">
                      <Users className="w-4 h-4 text-primary" />
                      <span className="font-bold">{pickedStudent.nameAr}</span>
                      <span className="text-xs text-muted-foreground" dir="ltr">{pickedStudent.studentCode}</span>
                    </div>
                    <Badge variant="outline">الحالي: {gradeLabel(pickedStudent.grade)} / شعبة {pickedStudent.classroom}</Badge>
                  </div>
                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="space-y-2">
                      <Label>الصف الجديد</Label>
                      <Select value={moveGrade} onValueChange={setMoveGrade}>
                        <SelectTrigger><SelectValue placeholder="اختر الصف" /></SelectTrigger>
                        <SelectContent className="max-h-72">
                          {grades.map((g) => (
                            <SelectItem key={g.code} value={g.code}>{g.labelAr}</SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label>الشعبة الجديدة</Label>
                      <Select value={moveClass} onValueChange={setMoveClass}>
                        <SelectTrigger><SelectValue placeholder="اختر الشعبة" /></SelectTrigger>
                        <SelectContent>
                          {classrooms.map((c) => (
                            <SelectItem key={c.id} value={c.name}>شعبة {c.name}</SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button onClick={moveStudent} disabled={moving || (moveGrade === pickedStudent.grade && moveClass === pickedStudent.classroom)}>
                      {moving ? <Loader2 className="w-4 h-4 ml-1 animate-spin" /> : <ArrowLeftRight className="w-4 h-4 ml-1" />}
                      تنفيذ النقل
                    </Button>
                    <Button variant="outline" onClick={() => setPickedStudent(null)}>إلغاء</Button>
                  </div>
                </div>
              )}
            </>
          )}
        </CardContent>
      </Card>

      {/* نقل جماعي */}
      {canManage && (
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              <Users className="w-5 h-5 text-primary" />
              نقل جماعي لطلبة شعبة كاملة
            </CardTitle>
            <CardDescription>انقل كل طلبة صف/شعبة دفعة واحدة — مثل ترقية شعبة إلى صف أعلى</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-3 md:grid-cols-2">
              <div className="rounded-xl border bg-muted/30 p-3 space-y-2">
                <p className="text-sm font-bold text-muted-foreground">من</p>
                <div className="grid grid-cols-2 gap-2">
                  <Select value={fromGrade} onValueChange={setFromGrade}>
                    <SelectTrigger><SelectValue placeholder="الصف (أو الكل)" /></SelectTrigger>
                    <SelectContent className="max-h-72">
                      <SelectItem value="all">كل الصفوف</SelectItem>
                      {grades.map((g) => (
                        <SelectItem key={g.code} value={g.code}>{g.labelAr}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Select value={fromClass} onValueChange={setFromClass}>
                    <SelectTrigger><SelectValue placeholder="الشعبة (أو الكل)" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">كل الشعب</SelectItem>
                      {classrooms.map((c) => (
                        <SelectItem key={c.id} value={c.name}>شعبة {c.name}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="rounded-xl border border-primary/40 bg-primary/5 p-3 space-y-2">
                <p className="text-sm font-bold text-primary">إلى</p>
                <div className="grid grid-cols-2 gap-2">
                  <Select value={toGrade} onValueChange={setToGrade}>
                    <SelectTrigger><SelectValue placeholder="الصف الهدف" /></SelectTrigger>
                    <SelectContent className="max-h-72">
                      {grades.map((g) => (
                        <SelectItem key={g.code} value={g.code}>{g.labelAr}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Select value={toClass} onValueChange={setToClass}>
                    <SelectTrigger><SelectValue placeholder="الشعبة الهدف" /></SelectTrigger>
                    <SelectContent>
                      {classrooms.map((c) => (
                        <SelectItem key={c.id} value={c.name}>شعبة {c.name}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>
            <Button
              className="mt-3"
              onClick={bulkMove}
              disabled={bulkMoving || (!fromGrade && !fromClass) || !toGrade || !toClass}
            >
              {bulkMoving ? <Loader2 className="w-4 h-4 ml-1 animate-spin" /> : <ArrowLeftRight className="w-4 h-4 ml-1" />}
              تنفيذ النقل الجماعي
            </Button>
          </CardContent>
        </Card>
      )}

      {/* حوار إعادة تسمية شعبة */}
      {renameTarget && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={() => setRenameTarget(null)}>
          <div className="bg-card rounded-2xl shadow-xl w-full max-w-sm p-5 space-y-3" onClick={(e) => e.stopPropagation()}>
            <h3 className="font-bold">تعديل اسم الشعبة</h3>
            <Input value={renameValue} onChange={(e) => setRenameValue(e.target.value)} autoFocus />
            <div className="flex gap-2">
              <Button className="flex-1" onClick={renameClassroom} disabled={!renameValue.trim()}>حفظ</Button>
              <Button variant="outline" onClick={() => setRenameTarget(null)}>إلغاء</Button>
            </div>
          </div>
        </div>
      )}

      {/* حوار فرز طلبة الصف حسب الشعب */}
      <Dialog open={!!viewGrade} onOpenChange={(o) => !o && setViewGrade(null)}>
        <DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <GraduationCap className="w-5 h-5 text-primary" />
              طلبة صف {viewGrade?.labelAr}
            </DialogTitle>
            <DialogDescription>
              {gradeDetailsLoading
                ? "جاري جلب الطلبة..."
                : gradeDetails
                  ? `المجموع ${gradeDetails.total} طالب موزعين على ${gradeDetails.sectionsCount} شعبة`
                  : ""}
            </DialogDescription>
          </DialogHeader>

          {gradeDetailsLoading && (
            <div className="flex items-center justify-center py-10">
              <Loader2 className="w-6 h-6 animate-spin text-primary" />
            </div>
          )}

          {!gradeDetailsLoading && gradeDetails && gradeDetails.total === 0 && (
            <p className="text-sm text-muted-foreground text-center py-8">لا يوجد طلبة نشطون في هذا الصف</p>
          )}

          {!gradeDetailsLoading && gradeDetails && gradeDetails.total > 0 && (
            <div className="grid gap-3 sm:grid-cols-2">
              {gradeDetails.sections.map((sec) => (
                <div key={sec.classroom} className="rounded-xl border p-3 space-y-2">
                  <div className="flex items-center justify-between">
                    <p className="font-bold text-sm flex items-center gap-1.5">
                      <Network className="w-4 h-4 text-primary" />
                      شعبة {sec.classroom}
                    </p>
                    <Badge variant="secondary">{sec.count} طالب</Badge>
                  </div>
                  <div className="grid gap-1.5 max-h-56 overflow-y-auto">
                    {sec.students.map((st) => (
                      <div key={st.id} className="flex items-center justify-between gap-2 rounded-lg bg-muted/40 px-2.5 py-1.5">
                        <span className="text-sm font-medium truncate">{st.nameAr}</span>
                        <span className="text-[10px] text-muted-foreground shrink-0" dir="ltr">{st.studentCode}</span>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}