"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
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, apiGet } from "@/lib/api";
import { ACADEMIC_HUB_SECTIONS, filterSections } from "@/lib/menu";
import { getActiveRole, isTeacherRole } from "@/lib/permissions";
import { useModules } from "@/components/app/ModulesProvider";

interface GradeWindow {
  id: number;
  report_card_id?: number;
  report_card_name: string;
  period_name: string;
  ends_at?: string | null;
}

interface ExamRow {
  id: number;
  title: string;
  class_room_id: number;
  class_name?: string | null;
  subject_name?: string | null;
  assessment_date?: string | null;
}

export interface AcademicHubPayload {
  academic_year: { id: number; title: string } | null;
  scope: { is_teacher: boolean; branch_ids: number[] };
  counts: {
    report_cards: number;
    grade_windows: number;
    absent_today: number;
    late_today: number;
    pending_teachers: number;
    homework_pending_grade: number;
    homework_overdue: number;
    discipline_pending: number;
    exams_today: number;
    exams_upcoming: number;
    classes: number;
    attendance_teachers_filled?: number;
    attendance_teachers_pending?: number;
    attendance_alerts?: number;
  };
  attendance: {
    present: number;
    late: number;
    absent: number;
    recorded: number;
    unchecked: number;
  };
  attendance_teachers?: {
    filled: number;
    pending: number;
  };
  homework: { open: number; overdue: number; pending_grade: number };
  grade_windows: GradeWindow[];
  exams: ExamRow[];
  education: { average_score: number | null };
  attention: Array<{
    key: string;
    severity: "danger" | "warning" | "info";
    title: string;
    count: number;
  }>;
}

function fa(n: number): string {
  return n.toLocaleString("fa-IR");
}

function attentionHref(isTeacher: boolean, key: string): string {
  switch (key) {
    case "absent_today":
      return isTeacher ? "/dashboard" : "/academic/attendance?status=absent";
    case "attendance_alerts":
      return "/academic/attendance?panel=alerts";
    case "attendance_teachers_pending":
      return "/academic/attendance?panel=teachers&teachers=pending";
    case "discipline":
      return "/academic/discipline";
    case "homework_overdue":
    case "homework_pending":
      return "/academic/assignments";
    case "grade_window":
      return "/academic/report-cards";
    case "pending_teachers":
      return "/academic/report-cards";
    default:
      return "/academic";
  }
}

function formatEndsAt(value?: string | null): string | null {
  if (!value) return null;
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return null;
  return date.toLocaleString("fa-IR", { dateStyle: "short", timeStyle: "short" });
}

export function AcademicHubDashboard() {
  const role = getActiveRole();
  const teacher = isTeacherRole(role);
  const { enabledKeys } = useModules();
  const sections = useMemo(
    () => filterSections(ACADEMIC_HUB_SECTIONS, role ? [role] : [], enabledKeys),
    [enabledKeys, role],
  );

  const [data, setData] = useState<AcademicHubPayload | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const payload = await apiGet<AcademicHubPayload>("/academic/hub");
      setData(payload);
    } catch (err) {
      setData(null);
      setError(err instanceof ApiError ? err.message : "بارگذاری هب آموزشی ناموفق بود.");
    } finally {
      setLoading(false);
    }
  }, []);

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

  if (loading && !data) {
    return <PageContentSkeleton rows={6} />;
  }

  if (error && !data) {
    return (
      <div className="space-y-3">
        <Alert tone="error">{error}</Alert>
        <Button variant="secondary" onClick={() => void load()}>
          تلاش دوباره
        </Button>
      </div>
    );
  }

  if (!data) return null;

  const { counts, attendance, homework, education } = data;
  const isTeacher = data.scope.is_teacher || teacher;
  const gradesHref = "/academic/report-cards";
  const averageHref = "/academic/report-cards";
  const attendanceBase = isTeacher ? "/dashboard" : "/academic/attendance";
  const teachersFilled = data.attendance_teachers?.filled ?? counts.attendance_teachers_filled ?? 0;
  const teachersPending = data.attendance_teachers?.pending ?? counts.attendance_teachers_pending ?? 0;

  return (
    <div className="space-y-3 sm:space-y-5">
      <section className="rounded-2xl border border-secondary/20 bg-secondary/5 p-3 sm:p-4">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <p className="text-sm leading-7 text-foreground/85">
              {isTeacher
                ? "خلاصه کلاس‌های شما: نمره، حضور، تکلیف و انضباط."
                : "خلاصه آموزشی شعبه فعال: نمره، کارنامه، حضور، تکلیف و انضباط."}
            </p>
            {data.academic_year?.title ? (
              <p className="mt-1 text-xs text-slate-500">{data.academic_year.title}</p>
            ) : null}
          </div>
          <Button variant="secondary" onClick={() => void load()}>
            به‌روزرسانی
          </Button>
        </div>
      </section>

      <section>
        <h3 className="mb-2 text-xs font-bold text-slate-500">شاخص‌های آموزشی</h3>
        <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-4 sm:gap-3">
          <KpiCard
            href={isTeacher ? gradesHref : "/academic/report-cards"}
            label="کارنامه فعال"
            value={counts.report_cards}
          />
          <KpiCard
            href={gradesHref}
            label="پنجره نمره باز"
            value={counts.grade_windows}
            tone={counts.grade_windows > 0 ? "warning" : "default"}
          />
          {!isTeacher ? (
            <KpiCard
              href="/academic/report-cards"
              label="معلم بدون نمره در بازه باز"
              value={counts.pending_teachers ?? 0}
              tone={(counts.pending_teachers ?? 0) > 0 ? "warning" : "default"}
            />
          ) : null}
          <KpiCard
            href={isTeacher ? attendanceBase : "/academic/attendance?status=absent"}
            label="غایب امروز"
            value={counts.absent_today}
            tone={counts.absent_today > 0 ? "danger" : "default"}
          />
          <KpiCard
            href="/academic/assignments"
            label="تکلیف معطل نمره"
            value={counts.homework_pending_grade}
            tone={counts.homework_pending_grade > 0 ? "warning" : "default"}
          />
          <KpiCard
            href="/academic/discipline"
            label="انضباط باز"
            value={counts.discipline_pending}
            tone={counts.discipline_pending > 0 ? "warning" : "default"}
          />
          <KpiCard
            href={averageHref}
            label="میانگین نمره"
            value={education.average_score ?? 0}
            hint={education.average_score == null ? "بدون نمره" : "از ۲۰"}
          />
        </div>
      </section>

      <section>
        <h3 className="mb-2 text-xs font-bold text-slate-500">حضور امروز</h3>
        <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-4 sm:gap-3">
          <KpiCard
            href={isTeacher ? attendanceBase : "/academic/attendance?status=present"}
            label="حاضر"
            value={attendance.present}
            tone="success"
          />
          <KpiCard
            href={isTeacher ? attendanceBase : "/academic/attendance?status=absent"}
            label="غایب"
            value={attendance.absent}
            tone={attendance.absent > 0 ? "danger" : "default"}
          />
          <KpiCard
            href={isTeacher ? attendanceBase : "/academic/attendance?status=late"}
            label="تأخیر"
            value={attendance.late}
            tone={attendance.late > 0 ? "warning" : "default"}
          />
          <KpiCard
            href={isTeacher ? attendanceBase : "/academic/attendance?status=unchecked"}
            label="ثبت‌نشده"
            value={attendance.unchecked}
          />
          {!isTeacher ? (
            <>
              <KpiCard
                href="/academic/attendance?panel=teachers&teachers=filled"
                label="لیست معلم پر شده"
                value={teachersFilled}
                tone="success"
              />
              <KpiCard
                href="/academic/attendance?panel=teachers&teachers=pending"
                label="لیست معلم پر نشده"
                value={teachersPending}
                tone={teachersPending > 0 ? "warning" : "default"}
              />
            </>
          ) : null}
        </div>
      </section>

      {data.attention.length > 0 ? (
        <section className="rounded-2xl border border-amber-200 bg-amber-50/80 p-4 shadow-card">
          <h3 className="mb-3 text-sm font-bold text-amber-950">هشدارهای مهم</h3>
          <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
            {data.attention.map((item) => (
              <li key={item.key}>
                <Link
                  href={attentionHref(isTeacher, item.key)}
                  className="flex items-center justify-between gap-3 rounded-xl border border-amber-200/80 bg-white px-3 py-2.5 text-sm hover:border-amber-400"
                >
                  <span className="font-medium text-slate-800">{item.title}</span>
                  <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-bold text-amber-900">
                    {fa(item.count)}
                  </span>
                </Link>
              </li>
            ))}
          </ul>
        </section>
      ) : null}

      <div className="grid gap-4 lg:grid-cols-2">
        <Panel title="پنجره‌های ثبت نمره" href={gradesHref} linkLabel="کارنامه‌ها">
          {data.grade_windows.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">پنجره بازی برای ثبت نمره نیست.</p>
          ) : (
            <ul className="divide-y divide-[var(--border)]">
              {data.grade_windows.map((window) => (
                <li key={window.id} className="flex items-start justify-between gap-3 py-2 text-sm">
                  <div>
                    <Link
                      href={window.report_card_id ? `/academic/report-cards/${window.report_card_id}?tab=grades` : gradesHref}
                      className="font-medium text-slate-800 hover:text-teal-700"
                    >
                      {window.report_card_name}
                    </Link>
                    <p className="mt-0.5 text-xs text-[var(--muted)]">{window.period_name}</p>
                  </div>
                  {formatEndsAt(window.ends_at) ? (
                    <span className="shrink-0 text-xs text-slate-500">تا {formatEndsAt(window.ends_at)}</span>
                  ) : null}
                </li>
              ))}
            </ul>
          )}
        </Panel>

        <div className="space-y-4">
          <Panel title="آزمون‌های پیش‌رو" href={gradesHref} linkLabel="نمرات">
            {data.exams.length === 0 ? (
              <p className="text-sm text-[var(--muted)]">آزمون نزدیکی ثبت نشده.</p>
            ) : (
              <ul className="space-y-2 text-sm">
                {data.exams.map((exam) => (
                  <li key={exam.id}>
                    <span className="font-medium text-slate-800">{exam.title}</span>
                    <span className="text-[var(--muted)]">
                      {" "}
                      · {exam.class_name}
                      {exam.subject_name ? ` · ${exam.subject_name}` : ""}
                      {exam.assessment_date ? ` · ${exam.assessment_date}` : ""}
                    </span>
                  </li>
                ))}
              </ul>
            )}
          </Panel>

          <Panel title="وضعیت تکالیف" href="/academic/assignments" linkLabel="تکالیف">
            <div className="grid grid-cols-3 gap-2 text-center">
              <Stat label="باز" value={homework.open} className="text-teal-700" />
              <Stat label="سررسید گذشته" value={homework.overdue} className="text-amber-700" />
              <Stat label="منتظر نمره" value={homework.pending_grade} className="text-slate-700" />
            </div>
          </Panel>
        </div>
      </div>

      <section className="space-y-4">
        <h3 className="text-sm font-bold text-slate-900">دسترسی سریع</h3>
        {sections.map((section) => (
          <ServiceSectionCard key={section.id} title={section.title} tone={section.tone}>
            {section.items.map((item) => (
              <ServiceTile key={item.id} item={item} />
            ))}
          </ServiceSectionCard>
        ))}
      </section>
    </div>
  );
}

function KpiCard({
  href,
  label,
  value,
  hint,
  tone = "default",
}: {
  href: string;
  label: string;
  value: number;
  hint?: string;
  tone?: "default" | "warning" | "danger" | "success";
}) {
  const tones = {
    default: "border-[var(--border)] bg-white hover:border-teal-200",
    warning: "border-amber-200 bg-amber-50 hover:border-amber-400",
    danger: "border-rose-200 bg-rose-50 hover:border-rose-400",
    success: "border-emerald-200 bg-emerald-50 hover:border-emerald-400",
  };

  return (
    <Link href={href} className={`rounded-xl border p-3 shadow-card transition sm:rounded-2xl sm:p-4 ${tones[tone]}`}>
      <p className="text-[11px] font-medium leading-4 text-[var(--muted)] sm:text-xs">{label}</p>
      <p className="mt-0.5 text-xl font-bold tabular-nums text-slate-900 sm:mt-1 sm:text-2xl">{fa(value)}</p>
      {hint ? <p className="mt-0.5 text-[11px] text-slate-500">{hint}</p> : null}
    </Link>
  );
}

function Panel({
  title,
  href,
  linkLabel,
  children,
}: {
  title: string;
  href?: string;
  linkLabel?: string;
  children: ReactNode;
}) {
  return (
    <section className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
      <div className="mb-3 flex items-center justify-between gap-2">
        <h3 className="text-sm font-bold text-slate-900">{title}</h3>
        {href && linkLabel ? (
          <Link href={href} className="text-xs font-medium text-teal-700 hover:underline">
            {linkLabel}
          </Link>
        ) : null}
      </div>
      {children}
    </section>
  );
}

function Stat({ label, value, className }: { label: string; value: number; className: string }) {
  return (
    <div className="rounded-xl bg-slate-50 px-2 py-3">
      <p className={`text-lg font-bold tabular-nums ${className}`}>{fa(value)}</p>
      <p className="mt-0.5 text-[11px] text-[var(--muted)]">{label}</p>
    </div>
  );
}