"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
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 { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import {
  AdminUser,
  ApiError,
  Paginated,
  apiGet,
  getStoredUser,
} from "@/lib/api";
import { getActiveBranchId } from "@/lib/session-context";

type InterestRow = {
  id: number;
  applicant_national_code: string;
  is_foreign_national?: boolean;
  student_name: string;
  parent_name: string;
  parent_mobile: string;
  branch?: { id: number; name: string } | null;
  grade_level?: { id: number; name: string } | null;
  created_at?: string | null;
};

function formatDate(value?: string | null) {
  if (!value) return "—";
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return value;
  return d.toLocaleDateString("fa-IR");
}

export default function PreRegistrationInterestPage() {
  const user = useMemo(() => getStoredUser<AdminUser>(), []);
  const branchId = getActiveBranchId();
  const [items, setItems] = useState<InterestRow[]>([]);
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.set("page", String(page));
      params.set("per_page", "20");
      if (branchId && !user?.roles.includes("super_admin") && !user?.roles.includes("developer")) {
        params.set("branch_id", String(branchId));
      }
      const query = params.toString();
      const data = await apiGet<Paginated<InterestRow>>(
        `/admissions/interest-requests${query ? `?${query}` : ""}`,
      );
      setItems(data.data ?? []);
      setLastPage(data.last_page ?? 1);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری");
    } finally {
      setLoading(false);
    }
  }, [branchId, page, user?.roles]);

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

  return (
    <AppShell title="درخواست اطلاع ثبت‌نام" subtitle="پیش‌ثبت‌نام — مدارس و پایه‌های هنوز باز نشده">
      <PageHeader
        title="درخواست اطلاع از باز شدن ثبت‌نام"
        subtitle="متقاضیانی که مدرسه یا پایهٔ مورد نظرشان در فهرست فعال نبوده است"
      />

      <div className="mb-4">
        <Link href="/pre-registration" className="text-sm font-semibold text-primary underline">
          بازگشت به پیش‌ثبت‌نام
        </Link>
      </div>

      {error ? <Alert tone="error">{error}</Alert> : null}

      <div className="mb-4">
        <Button variant="secondary" onClick={() => void load()}>
          بروزرسانی
        </Button>
      </div>

      <DataTable
        loading={loading}
        columns={[
          { key: "date", label: "تاریخ" },
          { key: "national", label: "کد ملی" },
          { key: "student", label: "دانش‌آموز" },
          { key: "parent", label: "ولی" },
          { key: "mobile", label: "موبایل" },
          { key: "branch", label: "مدرسه" },
          { key: "grade", label: "پایه" },
        ]}
      >
        {items.length === 0 ? (
          <DataTableEmpty colSpan={7} message="درخواستی ثبت نشده است." />
        ) : (
          items.map((item) => (
            <tr key={item.id} className="hover:bg-slate-50">
              <td className="px-3 py-3 text-sm">{formatDate(item.created_at)}</td>
              <td className="px-3 py-3 font-mono text-sm">{item.applicant_national_code}</td>
              <td className="px-3 py-3 text-sm">{item.student_name || "—"}</td>
              <td className="px-3 py-3 text-sm">{item.parent_name || "—"}</td>
              <td className="px-3 py-3 font-mono text-sm">{item.parent_mobile}</td>
              <td className="px-3 py-3 text-sm">{item.branch?.name ?? "—"}</td>
              <td className="px-3 py-3 text-sm">{item.grade_level?.name ?? "—"}</td>
            </tr>
          ))
        )}
      </DataTable>
      <Pagination page={page} lastPage={lastPage} onPageChange={setPage} />
    </AppShell>
  );
}