"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 { ListExportActions } from "@/components/export/ListExportActions";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Skeleton } from "@/components/ui/Skeleton";
import { AcademicYear, ApiError, apiGet, getAcademicYearId } from "@/lib/api";
import { canAccessAcademicAdmin, canManageReportCard, isTeacherRole } from "@/lib/permissions";
import {
  KIND_LABELS,
  ReportCardItem,
  ReportCardKind,
  parseReportCardsListFilters,
  rememberReportCardsListQuery,
  reportCardWorkspaceHref,
  reportCardsListQuery,
  readReportCardsListQuery,
} from "@/lib/report-cards";

const TABS: Array<{ key: ReportCardKind | "all"; label: string }> = [
  { key: "all", label: "همه" },
  { key: "official", label: "رسمی" },
  { key: "unofficial", label: "غیررسمی" },
  { key: "composite", label: "ترکیبی" },
];

interface TeacherClass {
  id: number;
  pending_tasks?: Array<{ report_card_id: number }>;
}

export default function ReportCardsPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const teacher = isTeacherRole();
  const canAdmin = canAccessAcademicAdmin();
  const [items, setItems] = useState<ReportCardItem[]>([]);
  const [years, setYears] = useState<AcademicYear[]>([]);
  const [yearId, setYearId] = useState<number | null>(null);
  const [tab, setTab] = useState<ReportCardKind | "all">("all");
  const [branchId, setBranchId] = useState<number | null>(null);
  const [ready, setReady] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const hasUrlFilter = Boolean(
      searchParams.get("kind") ||
      searchParams.get("academic_year_id") ||
      searchParams.get("branch_id"),
    );
    const stored = readReportCardsListQuery();
    const source = hasUrlFilter ? searchParams : stored ?? searchParams;
    const next = parseReportCardsListFilters(source);
    setTab(next.kind ?? "all");
    setYearId(next.academic_year_id ?? null);
    setBranchId(next.branch_id ?? null);
    setReady(true);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (!ready) return;
    const params = reportCardsListQuery({
      kind: tab,
      academic_year_id: yearId,
      branch_id: branchId,
    });
    rememberReportCardsListQuery(params);
    const qs = params.toString();
    const href = qs ? `/academic/report-cards?${qs}` : "/academic/report-cards";
    const currentQs = window.location.search.replace(/^\?/, "");
    if (currentQs !== qs) {
      router.replace(href, { scroll: false });
    }
  }, [ready, tab, yearId, branchId, router]);

  const load = useCallback(async () => {
    if (!ready) return;
    setLoading(true);
    setError(null);
    try {
      const y = await apiGet<AcademicYear[]>("/academic-years");
      setYears(y);
      const activeId = yearId
        ?? getAcademicYearId()
        ?? y.find((item) => item.is_current)?.id
        ?? y[0]?.id
        ?? null;
      if (activeId && activeId !== yearId) {
        setYearId(activeId);
        return;
      }
      if (!activeId) return;
      const params = new URLSearchParams({ academic_year_id: String(activeId) });
      if (tab !== "all") params.set("kind", tab);
      if (branchId) params.set("branch_id", String(branchId));
      let list = await apiGet<ReportCardItem[]>(`/report-cards?${params}`);
      if (teacher) {
        const classes = await apiGet<TeacherClass[]>(
          `/grade-entries/teacher-classes?academic_year_id=${activeId}`,
        );
        const ids = new Set(
          classes.flatMap((row) => (row.pending_tasks ?? []).map((task) => task.report_card_id)),
        );
        if (ids.size > 0) {
          list = list.filter((card) => ids.has(card.id));
        }
      }
      setItems(list);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری");
    } finally {
      setLoading(false);
    }
  }, [ready, tab, yearId, branchId, teacher]);

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

  const exportFilters = {
    academic_year_id: yearId ?? undefined,
    kind: tab !== "all" ? tab : undefined,
    branch_id: branchId ?? undefined,
  };

  return (
    <AppShell title="کارنامه‌ها" subtitle="ثبت نمره، مشاهده، چاپ و تنظیمات از همین مسیر">
      {error ? <Alert tone="error">{error}</Alert> : null}

      <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
        <div className="flex flex-wrap gap-2">
          {TABS.map((t) => (
            <button
              key={t.key}
              type="button"
              onClick={() => setTab(t.key)}
              className={`rounded-xl px-3 py-1.5 text-sm ${
                tab === t.key ? "bg-primary text-white" : "border border-[var(--border)] bg-white"
              }`}
            >
              {t.label}
            </button>
          ))}
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <select
            value={yearId ?? ""}
            onChange={(e) => setYearId(Number(e.target.value))}
            className="rounded-xl border border-[var(--border)] px-3 py-2 text-sm"
          >
            {years.map((y) => (
              <option key={y.id} value={y.id}>{y.title}</option>
            ))}
          </select>
          {canAdmin ? (
            <Link href="/academic/report-cards/new">
              <Button>+ کارنامه جدید</Button>
            </Link>
          ) : null}
          {canAdmin ? (
            <ListExportActions
              exportPath="/report-cards/export"
              filters={exportFilters}
              filenameBase="report-cards-export"
              onError={setError}
            />
          ) : null}
        </div>
      </div>

      {loading || !ready ? (
        <div className="space-y-2" aria-busy="true" aria-label="در حال بارگذاری">
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i} className="rounded-2xl border border-[var(--border)] bg-white p-4">
              <Skeleton className="mb-2 h-4 w-48" />
              <Skeleton className="h-3 w-40" />
            </div>
          ))}
        </div>
      ) : (
        <div className="space-y-2">
          {items.map((card) => {
            const enterTab = teacher ? "grades" : "view";
            return (
              <div
                key={card.id}
                className="rounded-2xl border border-[var(--border)] bg-white p-4"
              >
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <div className="font-semibold">{card.name}</div>
                    <div className="mt-1 text-xs text-[var(--muted)]">
                      {KIND_LABELS[card.kind]}
                      {" · "}
                      {card.is_active ? "فعال" : "غیرفعال"}
                      {card.kind !== "official" && card.branches?.length
                        ? ` · ${card.branches.length} مدرسه`
                        : card.kind === "official"
                          ? " · کل هلدینگ"
                          : ""}
                      {card.periods?.length ? ` · ${card.periods.length} مرحله` : ""}
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    <Link href={reportCardWorkspaceHref(card.id, enterTab)}>
                      <Button className="!px-3 !py-1.5 text-xs">ورود</Button>
                    </Link>
                    <Link href={reportCardWorkspaceHref(card.id, "view")}>
                      <Button variant="secondary" className="!px-3 !py-1.5 text-xs">مشاهده</Button>
                    </Link>
                    <Link href={reportCardWorkspaceHref(card.id, "view")}>
                      <Button variant="secondary" className="!px-3 !py-1.5 text-xs">چاپ</Button>
                    </Link>
                    {canManageReportCard(card.kind) ? (
                      <Link href={reportCardWorkspaceHref(card.id, "settings")}>
                        <Button variant="secondary" className="!px-3 !py-1.5 text-xs">تنظیمات</Button>
                      </Link>
                    ) : null}
                  </div>
                </div>
              </div>
            );
          })}
          {!items.length ? (
            <p className="text-sm text-[var(--muted)]">کارنامه‌ای ثبت نشده است.</p>
          ) : null}
        </div>
      )}
    </AppShell>
  );
}