"use client";

import { useCallback, useEffect, useState } from "react";
import { apiFetch, setActiveSchoolId, getActiveSchoolId } from "@/lib/client-utils";
import { SchoolDTO } from "@/lib/types";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
} from "@/components/ui/dialog";
import { Switch } from "@/components/ui/switch";
import { useToast } from "@/hooks/use-toast";
import {
  School as SchoolIcon, Plus, Pencil, Users, GraduationCap, Phone,
  CheckCircle2, XCircle, ArrowLeftCircle, Loader2, Building2,
} from "lucide-react";

interface SchoolsViewProps {
  onSchoolChanged?: () => void;
}

/** صفحة إدارة المدارس (v8) — لمدير النظام العام: إضافة مدارس، حسابات المدرسة، التفعيل/الإيقاف، العمل على بيانات مدرسة */
export default function SchoolsView({ onSchoolChanged }: SchoolsViewProps) {
  const { toast } = useToast();
  const [schools, setSchools] = useState<SchoolDTO[]>([]);
  const [loading, setLoading] = useState(true);
  const [addOpen, setAddOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [editing, setEditing] = useState<SchoolDTO | null>(null);
  const [activeId, setActiveId] = useState<string | null>(null);

  // نموذج الإضافة
  const [name, setName] = useState("");
  const [nameEn, setNameEn] = useState("");
  const [phone, setPhone] = useState("");
  const [address, setAddress] = useState("");
  const [withAdmin, setWithAdmin] = useState(true);
  const [adminUsername, setAdminUsername] = useState("");
  const [adminPassword, setAdminPassword] = useState("");
  const [adminFullName, setAdminFullName] = useState("");
  const [adminPhone, setAdminPhone] = useState("");

  const load = useCallback(async () => {
    try {
      setLoading(true);
      const data = await apiFetch<{ schools: SchoolDTO[]; activeSchoolId: string | null }>("/api/schools");
      setSchools(data.schools);
      setActiveId(getActiveSchoolId() ?? data.activeSchoolId);
    } catch (err) {
      toast({ title: "تعذر جلب المدارس", description: err instanceof Error ? err.message : "", variant: "destructive" });
    } finally {
      setLoading(false);
    }
  }, [toast]);

  useEffect(() => {
    load();
  }, [load]);

  function resetAddForm() {
    setName(""); setNameEn(""); setPhone(""); setAddress("");
    setWithAdmin(true); setAdminUsername(""); setAdminPassword(""); setAdminFullName(""); setAdminPhone("");
  }

  async function handleAdd() {
    try {
      setSaving(true);
      const result = await apiFetch<{ admin?: { recoveryCode: string; fullName: string } | null }>("/api/schools", {
        method: "POST",
        body: JSON.stringify({
          name, nameEn, phone, address,
          adminUsername: withAdmin ? adminUsername : undefined,
          adminPassword: withAdmin ? adminPassword : undefined,
          adminFullName: withAdmin ? adminFullName : undefined,
          adminPhone: withAdmin ? adminPhone : undefined,
        }),
      });
      if (result.admin?.recoveryCode) {
        window.alert(`رمز الاسترداد لمرة واحدة للمدير ${result.admin.fullName}:\n\n${result.admin.recoveryCode}\n\nانسخه وسلّمه للمدير الآن. لن يظهر مرة أخرى.`);
      }
      toast({ title: "تمت إضافة المدرسة بنجاح", description: name });
      setAddOpen(false);
      resetAddForm();
      load();
      onSchoolChanged?.();
    } catch (err) {
      toast({ title: "فشل إضافة المدرسة", description: err instanceof Error ? err.message : "", variant: "destructive" });
    } finally {
      setSaving(false);
    }
  }

  async function handleEdit() {
    if (!editing) return;
    try {
      setSaving(true);
      await apiFetch("/api/schools", {
        method: "PATCH",
        body: JSON.stringify({
          id: editing.id, name: editing.name, nameEn: editing.nameEn ?? "",
          phone: editing.phone ?? "", address: editing.address ?? "", isActive: editing.isActive,
        }),
      });
      toast({ title: "تم حفظ بيانات المدرسة" });
      setEditOpen(false);
      load();
      onSchoolChanged?.();
    } catch (err) {
      toast({ title: "فشل حفظ التعديلات", description: err instanceof Error ? err.message : "", variant: "destructive" });
    } finally {
      setSaving(false);
    }
  }

  function workOnSchool(s: SchoolDTO) {
    setActiveSchoolId(s.id);
    toast({ title: `أنت الآن تعمل على بيانات: ${s.name}`, description: "سيتم تحديث الصفحة" });
    setTimeout(() => window.location.reload(), 600);
  }

  const activeSchoolIdNow = activeId;

  return (
    <div className="space-y-4" dir="rtl">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 className="text-xl font-bold flex items-center gap-2">
            <Building2 className="w-5 h-5 text-primary" />
            إدارة المدارس
          </h2>
          <p className="text-sm text-muted-foreground mt-1">
            أضف مدارس جديدة وحدد المدرسة التي تعمل على بياناتها — كل مدرسة لها طلبتها وحساباتها وماليتها المستقلة
          </p>
        </div>
        <Button onClick={() => setAddOpen(true)}>
          <Plus className="w-4 h-4 ml-1" />
          إضافة مدرسة جديدة
        </Button>
      </div>

      {loading ? (
        <div className="flex items-center justify-center py-16 text-muted-foreground gap-2">
          <Loader2 className="w-5 h-5 animate-spin" /> جارٍ تحميل المدارس...
        </div>
      ) : schools.length === 0 ? (
        <Card>
          <CardContent className="py-14 text-center space-y-3">
            <SchoolIcon className="w-12 h-12 mx-auto text-muted-foreground/40" />
            <p className="font-medium">لا توجد مدارس بعد</p>
            <p className="text-sm text-muted-foreground">ابدأ بإضافة أول مدرسة من الزر أعلاه</p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
          {schools.map((s) => (
            <Card key={s.id} className={s.isActive ? "" : "opacity-70"}>
              <CardContent className="p-5 space-y-4">
                <div className="flex items-start justify-between gap-2">
                  <div className="flex items-center gap-3 min-w-0">
                    <div className="w-11 h-11 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0">
                      <SchoolIcon className="w-6 h-6" />
                    </div>
                    <div className="min-w-0">
                      <p className="font-bold truncate">{s.name}</p>
                      <p className="text-xs text-muted-foreground truncate" dir="ltr">{s.nameEn || "-"}</p>
                    </div>
                  </div>
                  {s.isActive ? (
                    <Badge className="bg-emerald-600/15 text-emerald-700 border-emerald-600/30 gap-1" variant="outline">
                      <CheckCircle2 className="w-3 h-3" /> نشطة
                    </Badge>
                  ) : (
                    <Badge className="bg-red-600/10 text-red-700 border-red-600/30 gap-1" variant="outline">
                      <XCircle className="w-3 h-3" /> موقوفة
                    </Badge>
                  )}
                </div>

                <div className="grid grid-cols-2 gap-2 text-sm">
                  <div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-2">
                    <GraduationCap className="w-4 h-4 text-muted-foreground" />
                    <span>{s.studentsCount ?? 0} طالب</span>
                  </div>
                  <div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-2">
                    <Users className="w-4 h-4 text-muted-foreground" />
                    <span>{s.usersCount ?? 0} حساب</span>
                  </div>
                </div>

                {s.phone && (
                  <p className="text-xs text-muted-foreground flex items-center gap-1.5">
                    <Phone className="w-3 h-3" /> <span dir="ltr">{s.phone}</span>
                  </p>
                )}

                <div className="flex flex-wrap gap-2 pt-1">
                  <Button size="sm" variant={activeSchoolIdNow === s.id ? "secondary" : "default"} onClick={() => workOnSchool(s)}>
                    <ArrowLeftCircle className="w-4 h-4 ml-1" />
                    {activeSchoolIdNow === s.id ? "المدرسة المختارة حالياً" : "العمل على بياناتها"}
                  </Button>
                  <Button size="sm" variant="outline" onClick={() => { setEditing({ ...s }); setEditOpen(true); }}>
                    <Pencil className="w-4 h-4 ml-1" /> تعديل
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* حوار إضافة مدرسة */}
      <Dialog open={addOpen} onOpenChange={setAddOpen}>
        <DialogContent className="max-w-lg" dir="rtl">
          <DialogHeader>
            <DialogTitle>إضافة مدرسة جديدة</DialogTitle>
            <DialogDescription>
              ستُنشأ المدرسة بشعب افتراضية (أ ب ج د هـ و) ويمكن إنشاء حساب مدير لها في نفس الخطوة
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-3 py-2">
            <div className="grid gap-1.5">
              <Label htmlFor="sch-name">اسم المدرسة (بالعربية) *</Label>
              <Input id="sch-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="مثال: مدرسة الفرات الأهلية" />
            </div>
            <div className="grid gap-1.5">
              <Label htmlFor="sch-name-en">الاسم بالإنجليزية</Label>
              <Input id="sch-name-en" dir="ltr" value={nameEn} onChange={(e) => setNameEn(e.target.value)} placeholder="Al-Furat Private School" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="grid gap-1.5">
                <Label htmlFor="sch-phone">هاتف</Label>
                <Input id="sch-phone" dir="ltr" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="07xxxxxxxxx" />
              </div>
              <div className="grid gap-1.5">
                <Label htmlFor="sch-address">العنوان</Label>
                <Input id="sch-address" value={address} onChange={(e) => setAddress(e.target.value)} />
              </div>
            </div>

            <div className="rounded-lg border p-3 space-y-3">
              <div className="flex items-center justify-between">
                <Label htmlFor="with-admin" className="cursor-pointer">إنشاء حساب مدير للمدرسة</Label>
                <Switch id="with-admin" checked={withAdmin} onCheckedChange={setWithAdmin} />
              </div>
              {withAdmin && (
                <div className="grid gap-3">
                  <div className="grid grid-cols-2 gap-3">
                    <div className="grid gap-1.5">
                      <Label htmlFor="adm-user">اسم المستخدم</Label>
                      <Input id="adm-user" dir="ltr" value={adminUsername} onChange={(e) => setAdminUsername(e.target.value)} placeholder="manager2" />
                    </div>
                    <div className="grid gap-1.5">
                      <Label htmlFor="adm-pass">كلمة المرور</Label>
                      <Input id="adm-pass" dir="ltr" type="password" value={adminPassword} onChange={(e) => setAdminPassword(e.target.value)} placeholder="6 خانات على الأقل" />
                    </div>
                  </div>
                  <div className="grid gap-1.5">
                    <Label htmlFor="adm-full">الاسم الكامل للمدير</Label>
                    <Input id="adm-full" value={adminFullName} onChange={(e) => setAdminFullName(e.target.value)} placeholder="مثال: أ. محمد المدير" />
                  </div>
                  <div className="grid gap-1.5">
                    <Label htmlFor="adm-phone">هاتف المدير للاسترداد</Label>
                    <Input id="adm-phone" type="tel" dir="ltr" value={adminPhone} onChange={(e) => setAdminPhone(e.target.value)} placeholder="+9647XXXXXXXXX" />
                  </div>
                </div>
              )}
            </div>
          </div>
          <DialogFooter className="gap-2">
            <Button variant="outline" onClick={() => setAddOpen(false)} disabled={saving}>إلغاء</Button>
            <Button onClick={handleAdd} disabled={saving || !name.trim() || (withAdmin && (!adminUsername.trim() || adminPassword.length < 8 || !adminPhone.trim()))}>
              {saving ? <Loader2 className="w-4 h-4 animate-spin ml-1" /> : <Plus className="w-4 h-4 ml-1" />}
              إنشاء المدرسة
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* حوار تعديل مدرسة */}
      <Dialog open={editOpen} onOpenChange={setEditOpen}>
        <DialogContent className="max-w-md" dir="rtl">
          <DialogHeader>
            <DialogTitle>تعديل بيانات المدرسة</DialogTitle>
            <DialogDescription>{editing?.name}</DialogDescription>
          </DialogHeader>
          {editing && (
            <div className="grid gap-3 py-2">
              <div className="grid gap-1.5">
                <Label htmlFor="ed-name">اسم المدرسة</Label>
                <Input id="ed-name" value={editing.name} onChange={(e) => setEditing({ ...editing, name: e.target.value })} />
              </div>
              <div className="grid gap-1.5">
                <Label htmlFor="ed-name-en">الاسم بالإنجليزية</Label>
                <Input id="ed-name-en" dir="ltr" value={editing.nameEn ?? ""} onChange={(e) => setEditing({ ...editing, nameEn: e.target.value })} />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="grid gap-1.5">
                  <Label htmlFor="ed-phone">هاتف</Label>
                  <Input id="ed-phone" dir="ltr" value={editing.phone ?? ""} onChange={(e) => setEditing({ ...editing, phone: e.target.value })} />
                </div>
                <div className="grid gap-1.5">
                  <Label htmlFor="ed-address">العنوان</Label>
                  <Input id="ed-address" value={editing.address ?? ""} onChange={(e) => setEditing({ ...editing, address: e.target.value })} />
                </div>
              </div>
              <div className="flex items-center justify-between rounded-lg border p-3">
                <Label htmlFor="ed-active" className="cursor-pointer">المدرسة نشطة (تسمح بالعمل عليها)</Label>
                <Switch id="ed-active" checked={editing.isActive} onCheckedChange={(v) => setEditing({ ...editing, isActive: v })} />
              </div>
            </div>
          )}
          <DialogFooter className="gap-2">
            <Button variant="outline" onClick={() => setEditOpen(false)} disabled={saving}>إلغاء</Button>
            <Button onClick={handleEdit} disabled={saving || !editing?.name?.trim()}>
              {saving ? <Loader2 className="w-4 h-4 animate-spin ml-1" /> : null}
              حفظ التعديلات
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}