"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { PageHeader } from "@/components/layout/PageHeader";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { Pagination } from "@/components/layout/Pagination";
import { AdvancedSearchToggle } from "@/components/layout/AdvancedSearchToggle";
import { StudentAvatar } from "@/components/students/StudentAvatar";
import { StudentRowActions } from "@/components/students/StudentRowActions";
import { ParentsTab, parentTabHref, type GuardianLink } from "@/components/students/ParentsTab";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { ListExportActions } from "@/components/export/ListExportActions";
import {
  ApiError,
  Paginated,
  PORTAL_APP_URL,
  apiDelete,
  apiGet,
  apiPost,
} from "@/lib/api";
import { canManageStudents, isTeacherRole } from "@/lib/permissions";
import type { AcademicYear, BranchItem, GradeLevel } from "@/lib/types";

interface StudentRow {
  id: number;
  first_name: string;
  last_name: string;
  full_name: string;
  national_code: string;
  student_code?: string | null;
  avatar_url?: string | null;
  mobile?: string | null;
  initial_password?: string | null;
  is_active: boolean;
  guardians?: GuardianLink[];
  enrollment?: {
    grade_label?: string | null;
    school_name?: string | null;
    city?: string | null;
    pending_placement?: boolean;
    class_name?: string | null;
    class_room_id?: number | null;
    branch_id?: number | null;
  };
}

function classCellHref(
  s: StudentRow,
  fallbackClassesHref: string,
  teacher: boolean,
): {
  href: string;
  label: string;
  assigned: boolean;
} {
  const branchId = s.enrollment?.branch_id ?? null;
  const classRoomId = s.enrollment?.class_room_id ?? null;
  const className = s.enrollment?.class_name;
  const assigned = Boolean(classRoomId && className && !s.enrollment?.pending_placement);

  if (assigned && classRoomId) {
    return {
      href: teacher
        ? `/teacher/classes/${classRoomId}`
        : `/schools/${branchId}/classes/${classRoomId}/placement`,
      label: className as string,
      assigned: true,
    };
  }

  if (teacher) {
    return { href: "", label: "بدون کلاس", assigned: false };
  }

  return {
    href: branchId ? `/schools/${branchId}/classes` : fallbackClassesHref,
    label: "بدون کلاس",
    assigned: false,
  };
}

const emptyFilters = {
  last_name: "",
  national_code: "",
  student_code: "",
  mobile: "",
  branch_id: "",
  grade_level_id: "",
  academic_year_id: "",
};

export default function StudentsPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const manage = canManageStudents();
  const teacher = isTeacherRole();
  const tab = teacher || searchParams.get("tab") !== "parents" ? "students" : "parents";
  const parentId = searchParams.get("parent_id");
  const pendingPlacement = searchParams.get("pending_placement") === "1";
  const queryBranchId = searchParams.get("branch_id") ?? "";

  const [rows, setRows] = useState<StudentRow[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [showSearch, setShowSearch] = useState(false);
  const [filters, setFilters] = useState({
    ...emptyFilters,
    branch_id: queryBranchId,
  });
  const [refresh, setRefresh] = useState(0);
  const [loading, setLoading] = useState(true);
  const [branches, setBranches] = useState<BranchItem[]>([]);
  const [grades, setGrades] = useState<GradeLevel[]>([]);
  const [years, setYears] = useState<AcademicYear[]>([]);
  const [classCount, setClassCount] = useState<number | null>(null);

  const exportFilters = {
    ...filters,
    ...(pendingPlacement ? { pending_placement: "1" } : {}),
  };

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.set("page", String(page));
      params.set("per_page", "20");
      Object.entries(filters).forEach(([k, v]) => {
        if (v) params.set(k, v);
      });
      if (pendingPlacement) params.set("pending_placement", "1");
      const result = await apiGet<Paginated<StudentRow>>(`/students?${params.toString()}`);
      setRows(result.data);
      setTotal(result.total);
      setLastPage(result.last_page);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [filters, page, pendingPlacement, refresh]);

  useEffect(() => {
    if (tab !== "students") return;
    void load();
  }, [load, tab]);

  useEffect(() => {
    if (queryBranchId && queryBranchId !== filters.branch_id) {
      setFilters((prev) => ({ ...prev, branch_id: queryBranchId }));
      setPage(1);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [queryBranchId]);

  useEffect(() => {
    Promise.all([
      apiGet<BranchItem[]>("/branches"),
      apiGet<AcademicYear[]>("/academic-years?active_only=1"),
    ])
      .then(([b, y]) => {
        setBranches(b);
        setYears(y);
        if (b.length === 1 && !filters.branch_id && !queryBranchId) {
          setFilters((prev) => ({ ...prev, branch_id: String(b[0].id) }));
        }
      })
      .catch(() => undefined);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (!filters.branch_id) {
      setGrades([]);
      return;
    }
    apiGet<GradeLevel[]>(`/grade-levels?branch_id=${filters.branch_id}`)
      .then(setGrades)
      .catch(() => setGrades([]));
  }, [filters.branch_id]);

  useEffect(() => {
    if (!pendingPlacement || !filters.branch_id) {
      setClassCount(null);
      return;
    }
    apiGet<Array<{ id: number }>>(`/class-rooms?branch_id=${filters.branch_id}`)
      .then((classRows) => setClassCount(classRows.length))
      .catch(() => setClassCount(null));
  }, [pendingPlacement, filters.branch_id]);

  const clearPendingFilter = () => {
    const qs = new URLSearchParams(searchParams.toString());
    qs.delete("pending_placement");
    const suffix = qs.toString() ? `?${qs.toString()}` : "";
    router.replace(`/students${suffix}`);
  };

  const impersonate = async (id: number) => {
    const data = await apiPost<{ token: string; user: unknown }>(`/students/${id}/impersonate`, {});
    window.location.href = `${PORTAL_APP_URL}/auth/impersonate?token=${encodeURIComponent(data.token)}`;
  };

  const deleteStudent = async (id: number) => {
    if (!confirm("آیا از حذف/غیرفعال‌سازی این دانش‌آموز مطمئن هستید؟")) return;
    await apiDelete(`/students/${id}`);
    await load();
  };

  const releasePlacement = async (id: number, mode: "unassign_class" | "release_school") => {
    const ok = confirm(
      mode === "release_school"
        ? "آیا این دانش‌آموز از کلاس‌بندی مدرسه شما خارج شود تا مدرسه دیگر بتواند او را کلاس‌بندی کند؟"
        : "آیا دانش‌آموز از کلاس خارج و به استخر کلاس‌بندی همان پایه برگردد؟",
    );
    if (!ok) return;
    try {
      await apiPost(`/students/${id}/release-placement`, { mode });
      setMessage(mode === "release_school" ? "دانش‌آموز برای مدرسه دیگر آزاد شد." : "دانش‌آموز به استخر کلاس‌بندی برگشت.");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  const switchTab = (next: "students" | "parents") => {
    const qs = new URLSearchParams(searchParams.toString());
    if (next === "parents") qs.set("tab", "parents");
    else qs.delete("tab");
    if (next !== "parents") qs.delete("parent_id");
    const suffix = qs.toString() ? `?${qs.toString()}` : "";
    router.replace(`/students${suffix}`);
  };

  const clearParentFilter = () => {
    const qs = new URLSearchParams(searchParams.toString());
    qs.delete("parent_id");
    const suffix = qs.toString() ? `?${qs.toString()}` : "";
    router.replace(`/students${suffix}`);
  };

  const classesHref = filters.branch_id
    ? `/schools/${filters.branch_id}/classes`
    : "/schools";

  return (
    <AppShell
      title="دانش‌آموزان"
      subtitle={tab === "parents" ? "فهرست اولیا و دانش‌آموزان مرتبط" : "فهرست دانش‌آموزان موسسه"}
    >
      {error && tab === "students" ? <Alert tone="error">{error}</Alert> : null}
      {message ? <Alert tone="success">{message}</Alert> : null}

      {!teacher ? (
        <div className="mb-4 flex flex-wrap gap-2">
          {(
            [
              ["students", "دانش‌آموزان"],
              ["parents", "اولیا"],
            ] as const
          ).map(([id, label]) => (
            <button
              key={id}
              type="button"
              onClick={() => switchTab(id)}
              className={`rounded-full px-3 py-1.5 text-xs font-semibold ${
                tab === id ? "bg-primary text-white" : "bg-slate-100 text-slate-700"
              }`}
            >
              {label}
            </button>
          ))}
        </div>
      ) : null}

      {tab === "parents" ? (
        <ParentsTab
          branchId={filters.branch_id || queryBranchId}
          parentId={parentId}
          branches={branches}
          onClearParentFilter={clearParentFilter}
        />
      ) : (
        <>
      {pendingPlacement && manage ? (
        <div className="mb-4 space-y-2 rounded-2xl border border-amber-200 bg-amber-50 p-4">
          <div className="flex flex-wrap items-center justify-between gap-2">
            <span className="rounded-full bg-amber-200/80 px-3 py-1 text-xs font-semibold text-amber-900">
              نمایش: منتظر کلاس‌بندی
            </span>
            <Button variant="secondary" onClick={clearPendingFilter}>
              حذف فیلتر
            </Button>
          </div>
          {classCount === 0 ? (
            <p className="text-sm leading-6 text-amber-950">
              برای این مدرسه هنوز کلاسی ثبت نشده است. ابتدا{" "}
              <Link href={classesHref} className="font-semibold text-primary underline">
                کلاس بسازید
              </Link>
              ، سپس از کلاس‌بندی دانش‌آموزان را اختصاص دهید.
            </p>
          ) : (
            <p className="text-sm leading-6 text-amber-950">
              دانش‌آموزان بدون کلاس ثبت شده‌اند؛ از{" "}
              <Link href={classesHref} className="font-semibold text-primary underline">
                صفحه کلاس‌ها
              </Link>{" "}
              وارد کلاس‌بندی شوید و اختصاص دهید.
            </p>
          )}
          <ol className="list-decimal space-y-1 pr-5 text-xs leading-6 text-amber-950/90">
            <li>اگر کلاس ندارید: ساخت کلاس در همان مدرسه.</li>
            <li>اگر کلاس دارید: کلاس‌بندی همان پایه را باز کنید.</li>
            <li>مسیر کوتاه: داشبورد مدرسه → منتظر کلاس‌بندی → کلاس‌بندی.</li>
          </ol>
        </div>
      ) : null}

      <div className="mb-4 rounded-2xl border border-[var(--border)] bg-white shadow-card">
        <AdvancedSearchToggle open={showSearch} onToggle={() => setShowSearch(!showSearch)} />
        {showSearch ? (
          <div className="grid gap-3 border-t border-[var(--border)] p-4 sm:grid-cols-2 lg:grid-cols-4">
            {[
              ["last_name", "نام خانوادگی"],
              ["national_code", "کد ملی"],
              ["student_code", "کد دانش‌آموزی"],
              ["mobile", "موبایل"],
            ].map(([key, label]) => (
              <Field key={key} label={label}>
                <Input
                  value={filters[key as keyof typeof filters]}
                  onChange={(e) => setFilters({ ...filters, [key]: e.target.value })}
                />
              </Field>
            ))}
            <Field label="مدرسه">
              <Select
                value={filters.branch_id}
                onChange={(e) =>
                  setFilters({ ...filters, branch_id: e.target.value, grade_level_id: "" })
                }
              >
                <option value="">همه</option>
                {branches.map((b) => (
                  <option key={b.id} value={b.id}>{b.name}</option>
                ))}
              </Select>
            </Field>
            <Field label="پایه">
              <Select
                value={filters.grade_level_id}
                onChange={(e) => setFilters({ ...filters, grade_level_id: e.target.value })}
                disabled={!filters.branch_id}
              >
                <option value="">
                  {filters.branch_id ? "همه" : "ابتدا مدرسه را انتخاب کنید"}
                </option>
                {filters.branch_id ? <option value="none">بدون پایه</option> : null}
                {grades.map((g) => (
                  <option key={g.id} value={g.id}>{g.name}</option>
                ))}
              </Select>
            </Field>
            <Field label="سال تحصیلی">
              <Select
                value={filters.academic_year_id}
                onChange={(e) => setFilters({ ...filters, academic_year_id: e.target.value })}
              >
                <option value="">همه</option>
                {years.map((y) => (
                  <option key={y.id} value={y.id}>{y.title}</option>
                ))}
              </Select>
            </Field>
            <div className="flex flex-wrap items-end gap-2 sm:col-span-2 lg:col-span-4">
              <Button onClick={() => { setPage(1); setRefresh((r) => r + 1); }}>جستجو</Button>
              <Button
                variant="secondary"
                onClick={() => {
                  setFilters(emptyFilters);
                  setPage(1);
                  setRefresh((r) => r + 1);
                  if (pendingPlacement) clearPendingFilter();
                }}
              >
                پاک کردن فیلترها
              </Button>
            </div>
          </div>
        ) : null}
      </div>

      <PageHeader
        title="فهرست دانش‌آموزان"
        actions={
          <>
            <span className="rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-800">
              تعداد دانش‌آموزان: {total}
            </span>
            {manage ? (
              <>
                <ListExportActions
                  exportPath="/students/export"
                  filters={exportFilters}
                  contextKeys={[]}
                  filenameBase="students-export"
                  onError={setError}
                />
                <Link href="/students/import">
                  <Button variant="secondary">ورود از اکسل</Button>
                </Link>
                <Button onClick={() => router.push("/students/new")}>+ دانش‌آموز جدید</Button>
              </>
            ) : null}
          </>
        }
      />

      <DataTable
        loading={loading}
        columns={[
          { key: "idx", label: "#" },
          { key: "img", label: "تصویر" },
          { key: "name", label: "نام و نام خانوادگی" },
          ...(!teacher ? [{ key: "guardians", label: "اولیا" }] : []),
          { key: "mobile", label: "موبایل" },
          ...(manage ? [{ key: "pass", label: "رمز عبور" }] : []),
          { key: "nc", label: "کد ملی" },
          { key: "status", label: "وضعیت" },
          { key: "grade", label: "پایه تحصیلی" },
          { key: "school", label: "مدرسه" },
          { key: "city", label: "شهر" },
          { key: "ops", label: "عملیات" },
        ]}
      >
        {rows.length === 0 ? (
          <DataTableEmpty colSpan={manage ? (teacher ? 11 : 12) : teacher ? 10 : 11} />
        ) : (
          rows.map((s, i) => {
            const classCell = classCellHref(s, classesHref, teacher);
            return (
            <tr key={s.id} className="hover:bg-slate-50">
              <td className="px-3 py-3">{(page - 1) * 20 + i + 1}</td>
              <td className="px-3 py-3">
                <StudentAvatar name={s.full_name || `${s.first_name} ${s.last_name}`} src={s.avatar_url} />
              </td>
              <td className="px-3 py-3 font-medium">{s.full_name || `${s.first_name} ${s.last_name}`}</td>
              {!teacher ? (
              <td className="px-3 py-3 text-sm">
                {(s.guardians ?? []).length === 0 ? (
                  "—"
                ) : (
                  <ul className="space-y-1">
                    {(s.guardians ?? []).map((g) => (
                      <li key={g.user_id}>
                        <Link
                          href={parentTabHref(g.user_id, filters.branch_id || undefined)}
                          className="text-primary hover:underline"
                        >
                          {g.name}
                        </Link>
                        {g.relationship_label ? (
                          <span className="text-[var(--muted)]"> ({g.relationship_label})</span>
                        ) : null}
                      </li>
                    ))}
                  </ul>
                )}
              </td>
              ) : null}
              <td className="px-3 py-3">{s.mobile ?? "—"}</td>
              {manage ? (
                <td className="px-3 py-3 font-mono text-xs">{s.initial_password ?? "—"}</td>
              ) : null}
              <td className="px-3 py-3">{s.national_code}</td>
              <td className="px-3 py-3">
                <span
                  className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
                    s.is_active ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                  }`}
                >
                  {s.is_active ? "فعال" : "غیرفعال"}
                </span>
              </td>
              <td className="px-3 py-3 text-xs">
                {s.enrollment?.grade_label ?? "—"}
                {classCell.href ? (
                  <Link
                    href={classCell.href}
                    className={`mt-1 block text-[10px] font-semibold hover:underline ${
                      classCell.assigned ? "text-primary" : "text-amber-700"
                    }`}
                  >
                    {classCell.label}
                  </Link>
                ) : (
                  <span className="mt-1 block text-[10px] font-semibold text-amber-700">
                    {classCell.label}
                  </span>
                )}
              </td>
              <td className="px-3 py-3 text-xs">{s.enrollment?.school_name ?? "—"}</td>
              <td className="px-3 py-3">{s.enrollment?.city ?? "—"}</td>
              <td className="px-3 py-3">
                <StudentRowActions
                  studentId={s.id}
                  pendingPlacement={Boolean(s.enrollment?.pending_placement)}
                  onImpersonate={() => impersonate(s.id)}
                  onDelete={() => deleteStudent(s.id)}
                  onReleasePlacement={(mode) => releasePlacement(s.id, mode)}
                />
              </td>
            </tr>
            );
          })
        )}
      </DataTable>

      <Pagination page={page} lastPage={lastPage} onPageChange={setPage} />
        </>
      )}
    </AppShell>
  );
}