"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { AppShell } from "@/components/app/AppShell";
import {
  PreRegistrationRecentList,
  PreRegistrationStatCards,
} from "@/components/pre-registration/PreRegistrationDashboard";
import { ServiceSectionCard, ServiceTile } from "@/components/app/ServiceTile";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import {
  ApiError,
  PreRegistrationDashboardData,
  apiGet,
} from "@/lib/api";
import { PRE_REGISTRATION_SECTION, filterItems } from "@/lib/menu";
import { getActiveBranchId, getActiveRole } from "@/lib/session-context";
import { isTeacherRole } from "@/lib/permissions";
import { useModules } from "@/components/app/ModulesProvider";

export default function PreRegistrationHubPage() {
  const router = useRouter();
  const role = getActiveRole();
  const teacher = isTeacherRole(role);
  const branchId = getActiveBranchId();
  const { enabledKeys } = useModules();
  const items = useMemo(
    () =>
      filterItems(PRE_REGISTRATION_SECTION.items, role ? [role] : [], enabledKeys).filter(
        (item) =>
          item.href !== "/pre-registration" &&
          item.id !== "hub" &&
          item.href !== "/pre-registration/grades" &&
          item.id !== "grades",
      ),
    [enabledKeys, role],
  );

  const [dashboard, setDashboard] = useState<PreRegistrationDashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const loadDashboard = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams();
      if (branchId) {
        params.set("branch_id", String(branchId));
      }
      const query = params.toString();
      const data = await apiGet<PreRegistrationDashboardData>(
        `/admissions/desk/dashboard${query ? `?${query}` : ""}`,
      );
      setDashboard(data);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری داشبورد");
    } finally {
      setLoading(false);
    }
  }, [branchId]);

  useEffect(() => {
    if (teacher) router.replace("/academic/report-cards");
  }, [teacher, router]);

  useEffect(() => {
    if (!teacher) void loadDashboard();
  }, [teacher, loadDashboard]);

  if (teacher) {
    return (
      <AppShell title="پیش‌ثبت‌نام">
        <PageContentSkeleton rows={3} />
      </AppShell>
    );
  }

  return (
    <AppShell title="پیش‌ثبت‌نام" subtitle="داشبورد مدیریتی و تنظیمات پذیرش">
      <div className="space-y-5">
        {error ? <Alert tone="error">{error}</Alert> : null}

        <div className="flex flex-col gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-sm leading-7 text-amber-950">
            برای استفاده از سیستم پیش‌ثبت‌نام به آدرس{" "}
            <a
              href="https://isold.hcei.ir"
              target="_blank"
              rel="noopener noreferrer"
              className="font-bold underline"
            >
              isold.hcei.ir
            </a>{" "}
            مراجعه فرمایید.
          </p>
          <a
            href="https://isold.hcei.ir"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex"
          >
            <Button type="button">ورود به سیستم پیش‌ثبت‌نام</Button>
          </a>
        </div>

        <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card sm:p-5">
          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
            <div>
              <h2 className="text-base font-bold">داشبورد ثبت‌نام‌ها</h2>
              <p className="mt-1 text-sm text-[var(--muted)]">
                وضعیت درخواست‌ها را ببینید و با کلیک روی هر بخش، مستقیم به میز پذیرش بروید.
              </p>
            </div>
            <Link href="/pre-registration/admissions">
              <Button>میز پذیرش</Button>
            </Link>
          </div>

          <PreRegistrationStatCards stats={dashboard?.stats ?? {}} loading={loading} />

          <div className="mt-5">
            <h3 className="mb-3 text-sm font-bold">آخرین درخواست‌ها</h3>
            <PreRegistrationRecentList items={dashboard?.recent ?? []} loading={loading} />
          </div>
        </div>

        <div className="rounded-2xl border border-primary/20 bg-primary/5 p-4 text-sm leading-7 text-foreground/85">
          وضعیت فعال بودن فرم، قوانین هر پایه (هزینه، ظرفیت و آزمون) و تنظیمات پرداخت/درگاه را از{" "}
          <Link href="/pre-registration/settings" className="font-semibold text-primary underline">
            تنظیمات پیش‌ثبت‌نام
          </Link>{" "}
          مدیریت کنید.
        </div>

        <ServiceSectionCard title={PRE_REGISTRATION_SECTION.title} tone={PRE_REGISTRATION_SECTION.tone}>
          {items.map((item) => (
            <ServiceTile key={item.id} item={item} />
          ))}
        </ServiceSectionCard>
      </div>
    </AppShell>
  );
}