"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
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 { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { ApiError, Paginated, apiGet } from "@/lib/api";
import type { BranchItem } from "@/lib/types";

export interface GuardianLink {
  user_id: number;
  name: string;
  mobile?: string | null;
  relationship?: string | null;
  relationship_label?: string | null;
}

export interface ParentStudentLink {
  id: number;
  full_name: string;
  national_code?: string | null;
  relationship?: string | null;
  relationship_label?: string | null;
  is_primary?: boolean;
  grade_label?: string | null;
  school_name?: string | null;
}

export interface ParentRow {
  id: number;
  full_name: string;
  name?: string;
  national_code?: string | null;
  mobile?: string | null;
  is_active: boolean;
  students: ParentStudentLink[];
}

export function parentTabHref(userId: number, branchId?: string) {
  const qs = new URLSearchParams();
  qs.set("tab", "parents");
  qs.set("parent_id", String(userId));
  if (branchId) qs.set("branch_id", branchId);
  return `/students?${qs.toString()}`;
}

const emptyFilters = {
  name: "",
  national_code: "",
  mobile: "",
  branch_id: "",
};

export function ParentsTab({
  branchId,
  parentId,
  branches,
  onClearParentFilter,
}: {
  branchId: string;
  parentId: string | null;
  branches: BranchItem[];
  onClearParentFilter: () => void;
}) {
  const [rows, setRows] = useState<ParentRow[]>([]);
  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 [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState({
    ...emptyFilters,
    branch_id: branchId,
  });
  const [refresh, setRefresh] = useState(0);

  useEffect(() => {
    setFilters((prev) => (prev.branch_id === branchId ? prev : { ...prev, branch_id: branchId }));
    setPage(1);
  }, [branchId]);

  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 (parentId) params.set("id", parentId);
      const result = await apiGet<Paginated<ParentRow>>(`/parents?${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, parentId, refresh]);

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

  useEffect(() => {
    if (!parentId) return;
    const el = document.getElementById(`parent-row-${parentId}`);
    el?.scrollIntoView({ block: "center", behavior: "smooth" });
  }, [parentId, rows]);

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

      {parentId ? (
        <div className="mb-4 flex flex-wrap items-center justify-between gap-2 rounded-2xl border border-teal-200 bg-teal-50 px-4 py-3 text-sm">
          <span>نمایش ولی انتخاب‌شده از پرونده دانش‌آموز.</span>
          <Button variant="secondary" onClick={onClearParentFilter}>
            نمایش همه اولیا
          </Button>
        </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">
            {[
              ["name", "نام / نام خانوادگی"],
              ["national_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 })}
              >
                <option value="">همه</option>
                {branches.map((b) => (
                  <option key={b.id} value={b.id}>
                    {b.name}
                  </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, branch_id: branchId });
                  setPage(1);
                  setRefresh((r) => r + 1);
                }}
              >
                پاک کردن فیلترها
              </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>
        }
      />

      <DataTable
        loading={loading}
        columns={[
          { key: "idx", label: "#" },
          { key: "name", label: "نام و نام خانوادگی" },
          { key: "mobile", label: "موبایل" },
          { key: "nc", label: "کد ملی" },
          { key: "students", label: "دانش‌آموزان" },
        ]}
      >
        {rows.length === 0 ? (
          <DataTableEmpty colSpan={5} />
        ) : (
          rows.map((row, i) => (
            <tr
              key={row.id}
              id={`parent-row-${row.id}`}
              className={
                parentId === String(row.id) ? "bg-teal-50" : "hover:bg-slate-50"
              }
            >
              <td className="px-3 py-3">{(page - 1) * 20 + i + 1}</td>
              <td className="px-3 py-3 font-medium">{row.full_name || row.name}</td>
              <td className="px-3 py-3">{row.mobile ?? "—"}</td>
              <td className="px-3 py-3">{row.national_code ?? "—"}</td>
              <td className="px-3 py-3 text-sm">
                {row.students.length === 0 ? (
                  "—"
                ) : (
                  <ul className="space-y-1">
                    {row.students.map((student) => (
                      <li key={student.id}>
                        <Link
                          href={`/students/${student.id}/guardians`}
                          className="font-medium text-primary hover:underline"
                        >
                          {student.full_name}
                        </Link>
                        {student.relationship_label ? (
                          <span className="text-[var(--muted)]"> ({student.relationship_label})</span>
                        ) : null}
                        {student.grade_label || student.school_name ? (
                          <span className="mt-0.5 block text-[10px] text-[var(--muted)]">
                            {[student.grade_label, student.school_name].filter(Boolean).join(" · ")}
                          </span>
                        ) : null}
                      </li>
                    ))}
                  </ul>
                )}
              </td>
            </tr>
          ))
        )}
      </DataTable>

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