"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { PageHeader } from "@/components/layout/PageHeader";
import { AdvancedSearchToggle } from "@/components/layout/AdvancedSearchToggle";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { Pagination } from "@/components/layout/Pagination";
import { SchoolRowActions } from "@/components/schools/SchoolRowActions";
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,
  apiDelete,
  apiGet,
} from "@/lib/api";
import type { EducationStage } from "@/lib/types";

interface SchoolRow {
  id: number;
  code: string;
  name: string;
  school_type: string | null;
  school_type_label: string;
  phone: string | null;
  city: string | null;
  province: string | null;
  manager: { id: number; name: string } | null;
  pre_registration: { enabled: boolean; label: string };
  virtual_classes: { enabled: boolean; label: string };
  is_active: boolean;
}

interface ManagerOption {
  id: number;
  name: string;
  national_code?: string | null;
}

const emptyFilters = {
  q: "",
  city: "",
  education_stage_id: "",
  grade_level_id: "",
  school_type: "",
  manager_id: "",
  manager_label: "",
};

export default function SchoolsPage() {
  const router = useRouter();
  const [rows, setRows] = useState<SchoolRow[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [error, setError] = useState<string | null>(null);
  const [showSearch, setShowSearch] = useState(false);
  const [filters, setFilters] = useState(emptyFilters);
  const [managerOptions, setManagerOptions] = useState<ManagerOption[]>([]);
  const [stages, setStages] = useState<EducationStage[]>([]);
  const [refresh, setRefresh] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    apiGet<EducationStage[]>("/education-stages").then(setStages).catch(() => setStages([]));
  }, []);

  const gradeOptions = useMemo(() => {
    if (filters.education_stage_id) {
      const stage = stages.find((s) => String(s.id) === filters.education_stage_id);
      return stage?.grade_levels ?? [];
    }
    return stages.flatMap((s) => s.grade_levels ?? []);
  }, [filters.education_stage_id, stages]);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.set("page", String(page));
      if (filters.q) params.set("q", filters.q);
      if (filters.city) params.set("city", filters.city);
      if (filters.education_stage_id) params.set("education_stage_id", filters.education_stage_id);
      if (filters.grade_level_id) params.set("grade_level_id", filters.grade_level_id);
      if (filters.school_type) params.set("school_type", filters.school_type);
      if (filters.manager_id) params.set("manager_id", filters.manager_id);

      const result = await apiGet<Paginated<SchoolRow>>(`/branches/directory?${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, refresh]);

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

  const searchManagers = async (q: string) => {
    setFilters((f) => ({ ...f, manager_label: q, manager_id: "" }));
    if (q.length < 2) {
      setManagerOptions([]);
      return;
    }
    try {
      setManagerOptions(await apiGet<ManagerOption[]>(`/users/search?q=${encodeURIComponent(q)}`));
    } catch {
      setManagerOptions([]);
    }
  };

  const exportFilters = {
    q: filters.q,
    city: filters.city,
    education_stage_id: filters.education_stage_id,
    grade_level_id: filters.grade_level_id,
    school_type: filters.school_type,
    manager_id: filters.manager_id,
  };

  const deleteSchool = async (id: number) => {
    if (!confirm("آیا از حذف این مدرسه مطمئن هستید؟")) return;
    await apiDelete(`/branches/${id}/directory`);
    await load();
  };

  return (
    <AppShell title="مدارس هلدینگ" subtitle="لیست مدارس">
      {error ? <Alert tone="error">{error}</Alert> : 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">
            <Field label="نام مدرسه">
              <Input
                value={filters.q}
                onChange={(e) => setFilters({ ...filters, q: e.target.value })}
              />
            </Field>
            <Field label="مدیر مدرسه">
              <Input
                value={filters.manager_label}
                placeholder="قسمتی از نام خانوادگی را وارد کنید"
                onChange={(e) => searchManagers(e.target.value)}
              />
              {managerOptions.length > 0 ? (
                <ul className="mt-1 max-h-28 overflow-y-auto rounded-xl border bg-white text-sm">
                  {managerOptions.map((m) => (
                    <li key={m.id}>
                      <button
                        type="button"
                        className="block w-full px-3 py-2 text-right hover:bg-slate-50"
                        onClick={() => {
                          setFilters((f) => ({
                            ...f,
                            manager_id: String(m.id),
                            manager_label: m.name,
                          }));
                          setManagerOptions([]);
                        }}
                      >
                        {m.name}
                        {m.national_code ? (
                          <span className="mr-2 font-mono text-xs text-[var(--muted)]">{m.national_code}</span>
                        ) : null}
                      </button>
                    </li>
                  ))}
                </ul>
              ) : null}
            </Field>
            <Field label="مقطع">
              <Select
                value={filters.education_stage_id}
                onChange={(e) =>
                  setFilters({
                    ...filters,
                    education_stage_id: e.target.value,
                    grade_level_id: "",
                  })
                }
              >
                <option value="">همه</option>
                {stages.map((stage) => (
                  <option key={stage.id} value={stage.id}>
                    {stage.name}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="پایه">
              <Select
                value={filters.grade_level_id}
                onChange={(e) => setFilters({ ...filters, grade_level_id: e.target.value })}
              >
                <option value="">همه</option>
                {gradeOptions.map((grade) => (
                  <option key={grade.id} value={grade.id}>
                    {grade.name}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="شهر">
              <Input
                value={filters.city}
                placeholder="لطفا انتخاب کنید"
                onChange={(e) => setFilters({ ...filters, city: e.target.value })}
              />
            </Field>
            <Field label="نوع">
              <Select
                value={filters.school_type}
                onChange={(e) => setFilters({ ...filters, school_type: e.target.value })}
              >
                <option value="">همه</option>
                <option value="boys">پسرانه</option>
                <option value="girls">دخترانه</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);
                  setManagerOptions([]);
                }}
              >
                پاک کردن فیلترها
              </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>
            <ListExportActions
              exportPath="/branches/directory/export"
              filters={exportFilters}
              filenameBase="schools-export"
              onError={setError}
            />
            <Button onClick={() => router.push("/schools/new")}>+ ثبت مدرسه جدید</Button>
          </>
        }
      />

      <DataTable
        loading={loading}
        columns={[
          { key: "idx", label: "#" },
          { key: "code", label: "کد مدرسه" },
          { key: "name", label: "نام مدرسه" },
          { key: "manager", label: "مدیر" },
          { key: "phone", label: "تلفن" },
          { key: "city", label: "شهر" },
          { key: "prereg", label: "وضعیت پیش‌ثبت‌نام" },
          { key: "virtual", label: "وضعیت کلاس مجازی" },
          { key: "ops", label: "عملیات" },
        ]}
      >
        {rows.length === 0 ? (
          <DataTableEmpty colSpan={9} />
        ) : (
          rows.map((s, i) => (
            <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 font-mono text-xs">{s.code}</td>
              <td className="px-3 py-3 font-medium">{s.name}</td>
              <td className="px-3 py-3">
                {s.manager?.id ? (
                  <Link href={`/staff/${s.manager.id}`} className="text-primary hover:underline">
                    {s.manager.name}
                  </Link>
                ) : (
                  "—"
                )}
              </td>
              <td className="px-3 py-3">{s.phone ?? "—"}</td>
              <td className="px-3 py-3">{s.city ?? "—"}</td>
              <td className="px-3 py-3">
                <span
                  className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
                    s.pre_registration.enabled
                      ? "bg-green-100 text-green-800"
                      : "bg-red-100 text-red-800"
                  }`}
                >
                  {s.pre_registration.label}
                </span>
              </td>
              <td className="px-3 py-3">
                <span
                  className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
                    s.virtual_classes.enabled
                      ? "bg-green-100 text-green-800"
                      : "bg-red-100 text-red-800"
                  }`}
                >
                  {s.virtual_classes.label}
                </span>
              </td>
              <td className="px-3 py-3">
                <SchoolRowActions schoolId={s.id} onDelete={() => deleteSchool(s.id)} />
              </td>
            </tr>
          ))
        )}
      </DataTable>

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