"use client";

import Link from "next/link";
import { useCallback, useEffect, useState, type ReactNode } from "react";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { ApiError, apiGet } from "@/lib/api";

interface AttendancePerson {
  student_profile_id: number;
  student_name: string;
  class_name?: string | null;
  reason?: string;
}

interface SessionRow {
  id: number;
  class_room_id: number;
  class_name?: string | null;
  subject_name?: string | null;
  teacher_name?: string | null;
  period_title?: string | null;
  starts_at: string;
  ends_at: string;
  is_extraordinary?: boolean;
}

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

export interface SchoolDashboardPayload {
  school: {
    id: number;
    name: string;
    code: string;
    school_type_label?: string | null;
    phone?: string | null;
    city?: string | null;
    is_active: boolean;
    pre_registration_enabled: boolean;
  };
  academic_year: { id: number; title: string } | null;
  today: {
    date: string;
    day_name: string;
    attendance: {
      present: number;
      late: number;
      absent: number;
      recorded: number;
      unchecked: number;
    };
    sessions: SessionRow[];
    extraordinary_sessions: SessionRow[];
    absentees: AttendancePerson[];
    late_students: AttendancePerson[];
    exams: ExamRow[];
  };
  counts: {
    students_active: number;
    pending_placement: number;
    teachers: number;
    staff: number;
    classes: number;
    today_sessions: number;
    extraordinary_today: number;
    overcrowded_classes: number;
    total_capacity: number;
    placed_students: number;
    discipline_pending: number;
    homework_pending_grade: number;
    homework_overdue: number;
  };
  classes: Array<{
    id: number;
    name: string;
    code?: string | null;
    grade_name?: string | null;
    field_name?: string | null;
    students_count: number;
    capacity: number;
    is_extraordinary: boolean;
    subjects_count: number;
    missing_teachers: number;
    schedule_slots: number;
  }>;
  homework: { open: number; overdue: number; pending_grade: number };
  upcoming_exams: ExamRow[];
  discipline: {
    pending: number;
    recent: Array<{
      id: number;
      student_profile_id: number;
      student_name: string;
      incident_type?: string | null;
    }>;
  };
  announcements: {
    recent_count: number;
    latest: Array<{ id: number; body: string; space_title?: string | null }>;
  };
  education: {
    average_score: number | null;
    attendance_rate: number | null;
    placed_percent: number | null;
  };
  attendance_trend: Array<{ date: string; present: number; late: number; absent: number }>;
  grade_windows: Array<{ id: number; report_card_name: string; period_name: string }>;
  admissions: { pending_review: number };
  attention: Array<{
    key: string;
    severity: "danger" | "warning" | "info";
    title: string;
    count: number;
  }>;
}

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

function attentionHref(branchId: number, key: string): string {
  switch (key) {
    case "pending_placement":
      return `/students?branch_id=${branchId}&pending_placement=1`;
    case "no_schedule":
    case "missing_teachers":
    case "no_subjects":
    case "overcrowded":
      return `/schools/${branchId}/classes`;
    case "no_periods":
      return `/schools/${branchId}/periods`;
    case "absent_today":
    case "unchecked_attendance":
      return `/academic/attendance?branch_id=${branchId}`;
    case "grade_window":
      return `/academic/report-cards?branch_id=${branchId}`;
    case "admissions":
      return `/pre-registration/admissions?branchId=${branchId}`;
    case "discipline":
      return `/academic/discipline?branch_id=${branchId}`;
    case "homework_overdue":
      return `/academic/assignments?branch_id=${branchId}`;
    default:
      return `/schools/${branchId}/dashboard`;
  }
}

const COMING_SOON = [
  "حضور کارکنان",
  "رویدادهای امروز",
  "پیام‌های جدید",
  "درخواست والدین",
  "درخواست اداری",
  "شهریه و پرداخت",
];

const TOOL_GROUPS: Array<{
  title: string;
  tone: string;
  items: Array<{ href: (id: number) => string; label: string; desc: string }>;
}> = [
  {
    title: "دسترسی سریع مدیر",
    tone: "bg-teal-700",
    items: [
      { href: (id) => `/academic/attendance?branch_id=${id}`, label: "حضور و غیاب", desc: "ثبت حضور کلاس‌ها" },
      { href: (id) => `/academic/report-cards?branch_id=${id}`, label: "نمرات", desc: "ثبت نمره و کارنامه" },
      { href: (id) => `/academic/report-cards?branch_id=${id}`, label: "کارنامه‌ها", desc: "مشاهده، چاپ و بازه ثبت" },
      { href: (id) => `/academic/discipline?branch_id=${id}`, label: "انضباط", desc: "هشدارهای انضباطی" },
      { href: (id) => `/schools/${id}/classes`, label: "کلاس‌ها", desc: "برنامه و کلاس‌بندی" },
      { href: (id) => `/virtual-classes?branchId=${id}`, label: "کلاس آنلاین", desc: "اتاق، جلسه و سرویس‌ها" },
      { href: (id) => `/students?branch_id=${id}`, label: "دانش‌آموزان", desc: "پرونده و اولیا" },
      { href: () => `/staff`, label: "کارکنان", desc: "معلمان و پرسنل" },
      { href: () => `/social`, label: "اطلاعیه‌ها", desc: "اعلان مدرسه" },
      { href: (id) => `/pre-registration/admissions?branchId=${id}`, label: "ثبت‌نام", desc: "میز پذیرش" },
      { href: (id) => `/reports/performance?branch_id=${id}`, label: "گزارش عملکرد", desc: "حضور و تدریس" },
      { href: (id) => `/academic/assignments?branch_id=${id}`, label: "تکالیف", desc: "وضعیت تحویل" },
      { href: () => `/buildings`, label: "ساختمان‌ها", desc: "فضا و ساختمان مرکزی" },
      { href: (id) => `/schools/${id}/edit`, label: "تنظیمات مدرسه", desc: "پروفایل شعبه" },
    ],
  },
];

export function SchoolManagerDashboard({ branchId }: { branchId: number }) {
  const [data, setData] = useState<SchoolDashboardPayload | 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<SchoolDashboardPayload>(`/branches/${branchId}/dashboard`);
      setData(payload);
    } catch (err) {
      setData(null);
      setError(err instanceof ApiError ? err.message : "بارگذاری داشبورد ناموفق بود.");
    } finally {
      setLoading(false);
    }
  }, [branchId]);

  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 { school, counts, today, education, homework } = data;
  const meta = [
    school.code ? `کد ${school.code}` : null,
    school.school_type_label,
    school.city,
    school.phone,
    data.academic_year?.title,
  ].filter(Boolean);

  const followUp = [...today.absentees, ...today.late_students].filter(
    (row, index, list) => list.findIndex((item) => item.student_profile_id === row.student_profile_id) === index,
  );
  const exams = [...today.exams, ...data.upcoming_exams].slice(0, 8);
  const trendMax = Math.max(1, ...data.attendance_trend.map((d) => d.present + d.late + d.absent));

  return (
    <div className="space-y-3 sm:space-y-5">
      <section className="rounded-2xl border border-[var(--border)] bg-white p-3 shadow-card sm:p-5">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <h2 className="text-lg font-bold text-slate-900">{school.name}</h2>
            <p className="mt-1 text-sm text-[var(--muted)]">{meta.join(" · ")}</p>
            <p className="mt-1 text-xs text-slate-500">{today.day_name}</p>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button variant="secondary" onClick={() => void load()}>
              به‌روزرسانی
            </Button>
            <Link href={`/schools/${branchId}/edit`}>
              <Button variant="secondary">تنظیمات</Button>
            </Link>
          </div>
        </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={`/students?branch_id=${branchId}`} label="کل دانش‌آموزان" value={counts.students_active} />
          <KpiCard
            href={`/academic/attendance?branch_id=${branchId}`}
            label="حاضر"
            value={today.attendance.present}
            tone="success"
          />
          <KpiCard
            href={`/academic/attendance?branch_id=${branchId}`}
            label="غایب"
            value={today.attendance.absent}
            tone={today.attendance.absent > 0 ? "danger" : "default"}
          />
          <KpiCard
            href={`/academic/attendance?branch_id=${branchId}`}
            label="تأخیر"
            value={today.attendance.late}
            tone={today.attendance.late > 0 ? "warning" : "default"}
          />
          <KpiCard
            href={`/academic/attendance?branch_id=${branchId}`}
            label="ثبت‌نشده"
            value={today.attendance.unchecked}
          />
        </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="/staff" label="کارکنان" value={counts.staff} />
          <KpiCard href="/staff" label="معلمان" value={counts.teachers} />
          <KpiCard
            href={`/schools/${branchId}/classes`}
            label="ظرفیت کلاس‌ها"
            value={counts.placed_students}
            hint={counts.total_capacity > 0 ? `از ${fa(counts.total_capacity)}` : undefined}
            tone={counts.overcrowded_classes > 0 ? "warning" : "default"}
          />
          <KpiCard
            href={`/students?branch_id=${branchId}&pending_placement=1`}
            label="کلاس‌بندی نشده"
            value={counts.pending_placement}
            tone={counts.pending_placement > 0 ? "warning" : "default"}
          />
          <KpiCard
            href={`/pre-registration/admissions?branchId=${branchId}`}
            label="ثبت‌نام معطل"
            value={data.admissions.pending_review}
            tone={data.admissions.pending_review > 0 ? "warning" : "default"}
          />
          <KpiCard
            href={`/academic/report-cards?branch_id=${branchId}`}
            label="میانگین نمرات"
            value={education.average_score ?? 0}
            hint={education.average_score == null ? "بدون نمره" : "از ۲۰"}
          />
        </div>
      </section>

      <section className="grid grid-cols-2 gap-2 sm:grid-cols-4">
        {COMING_SOON.map((label) => (
          <SoonCard key={label} label={label} />
        ))}
      </section>

      {data.attention.length > 0 ? (
        <section className="rounded-2xl border border-amber-200 bg-amber-50/80 p-3 shadow-card sm:p-4">
          <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(branchId, 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="برنامه امروز"
          hint={`${today.day_name} · ${fa(today.sessions.length)} زنگ`}
          href={`/schools/${branchId}/classes`}
          linkLabel="کلاس‌ها"
        >
          {today.extraordinary_sessions.length > 0 ? (
            <p className="mb-2 text-xs text-violet-700">
              {fa(today.extraordinary_sessions.length)} کلاس فوق‌برنامه امروز
            </p>
          ) : null}
          {today.sessions.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">برای امروز زنگی در برنامه نیست.</p>
          ) : (
            <ul className="divide-y divide-[var(--border)]">
              {today.sessions.slice(0, 8).map((session) => (
                <li key={session.id} className="flex items-start justify-between gap-3 py-2 text-sm">
                  <div>
                    <Link
                      href={`/schools/${branchId}/classes/${session.class_room_id}/schedule`}
                      className="font-medium text-slate-800 hover:text-teal-700"
                    >
                      {session.class_name}
                      {session.subject_name ? ` · ${session.subject_name}` : ""}
                    </Link>
                    <p className="mt-0.5 text-xs text-[var(--muted)]">
                      {session.teacher_name || "بدون معلم"}
                      {session.is_extraordinary ? " · فوق‌برنامه" : ""}
                    </p>
                  </div>
                  <span className="shrink-0 tabular-nums text-xs text-slate-500">
                    {session.starts_at}–{session.ends_at}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </Panel>

        <Panel
          title="روند حضور ۷ روز"
          href={`/reports/performance?branch_id=${branchId}`}
          linkLabel="گزارش"
        >
          {education.attendance_rate != null ? (
            <p className="mb-3 text-xs text-[var(--muted)]">نرخ حضور امروز: {fa(education.attendance_rate)}٪</p>
          ) : null}
          <div className="flex h-28 items-end gap-1.5">
            {data.attendance_trend.map((day) => {
              const total = day.present + day.late + day.absent;
              const height = Math.max(8, Math.round((total / trendMax) * 100));
              return (
                <div key={day.date} className="flex flex-1 flex-col items-center gap-1">
                  <div className="flex h-24 w-full items-end overflow-hidden rounded-t bg-slate-100">
                    <div
                      className="w-full rounded-t bg-teal-500/80"
                      style={{ height: `${height}%` }}
                      title={`${day.date}: حاضر ${day.present} / غایب ${day.absent}`}
                    />
                  </div>
                  <span className="text-[10px] text-slate-400">{day.date.slice(8)}</span>
                </div>
              );
            })}
          </div>
        </Panel>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Panel title="آزمون‌های امروز و پیش‌رو" href={`/academic`} linkLabel="هاب آموزشی">
          {exams.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">آزمون نزدیکی ثبت نشده.</p>
          ) : (
            <ul className="space-y-2 text-sm">
              {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.assessment_date ? ` · ${exam.assessment_date}` : ""}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </Panel>

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

      <div className="grid gap-4 lg:grid-cols-2">
        <Panel
          title="دانش‌آموزان نیازمند پیگیری"
          href={`/academic/attendance?branch_id=${branchId}`}
          linkLabel="حضور"
        >
          {followUp.length === 0 && data.discipline.recent.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">مورد پیگیری فوری نیست.</p>
          ) : (
            <ul className="space-y-1.5 text-sm">
              {followUp.map((row) => (
                <li key={`${row.reason}-${row.student_profile_id}`}>
                  <Link href={`/students/${row.student_profile_id}`} className="text-slate-800 hover:text-teal-700">
                    {row.student_name || "دانش‌آموز"}
                  </Link>
                  <span className="text-[var(--muted)]">
                    {" "}
                    · {row.reason ?? "غیبت"}
                    {row.class_name ? ` · ${row.class_name}` : ""}
                  </span>
                </li>
              ))}
              {data.discipline.recent.map((row) => (
                <li key={`d-${row.id}`}>
                  <Link href={`/students/${row.student_profile_id}`} className="text-slate-800 hover:text-teal-700">
                    {row.student_name || "دانش‌آموز"}
                  </Link>
                  <span className="text-amber-800"> · انضباط</span>
                </li>
              ))}
            </ul>
          )}
        </Panel>

        <Panel title="اطلاعیه‌ها و انضباط" href="/social" linkLabel="اعلان‌ها">
          <p className="mb-2 text-xs text-[var(--muted)]">
            {fa(data.announcements.recent_count)} اطلاعیه ۷ روز اخیر · {fa(data.discipline.pending)} مورد انضباطی باز
          </p>
          {data.announcements.latest.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">اطلاعیه جدیدی نیست.</p>
          ) : (
            <ul className="space-y-1.5 text-sm">
              {data.announcements.latest.map((post) => (
                <li key={post.id} className="line-clamp-2 text-slate-700">
                  {post.space_title ? `${post.space_title}: ` : ""}
                  {post.body}
                </li>
              ))}
            </ul>
          )}
        </Panel>
      </div>

      <section>
        <div className="mb-2 flex items-center justify-between">
          <h3 className="text-sm font-bold text-slate-900">ظرفیت و کلاس‌بندی</h3>
          <Link href={`/schools/${branchId}/classes`} className="text-xs font-medium text-teal-700 hover:underline">
            مدیریت کلاس‌ها
          </Link>
        </div>
        <DataTable
          columns={[
            { key: "name", label: "کلاس" },
            { key: "grade", label: "پایه" },
            { key: "cap", label: "ظرفیت" },
            { key: "subjects", label: "درس" },
            { key: "actions", label: "" },
          ]}
          loading={loading}
          loadingRows={4}
        >
          {data.classes.length === 0 ? (
            <DataTableEmpty colSpan={5} message="هنوز کلاسی تعریف نشده." />
          ) : (
            data.classes.map((row) => (
              <tr key={row.id} className="hover:bg-slate-50/80">
                <td className="px-3 py-2.5 font-medium text-slate-800">
                  {row.name}
                  {row.is_extraordinary ? (
                    <span className="mr-1 text-[10px] text-violet-700">فوق‌برنامه</span>
                  ) : null}
                </td>
                <td className="px-3 py-2.5 text-[var(--muted)]">
                  {[row.grade_name, row.field_name].filter(Boolean).join(" · ") || "—"}
                </td>
                <td className="px-3 py-2.5 tabular-nums">
                  {fa(row.students_count)}
                  {row.capacity > 0 ? ` / ${fa(row.capacity)}` : ""}
                </td>
                <td className="px-3 py-2.5 tabular-nums">
                  {fa(row.subjects_count)}
                  {row.missing_teachers > 0 ? (
                    <span className="mr-1 text-xs text-amber-700">بدون معلم</span>
                  ) : null}
                </td>
                <td className="px-3 py-2.5">
                  <div className="flex flex-wrap justify-end gap-2 text-xs font-medium">
                    <Link href={`/schools/${branchId}/classes/${row.id}/schedule`} className="text-teal-700 hover:underline">
                      برنامه
                    </Link>
                    <Link href={`/schools/${branchId}/classes/${row.id}/placement`} className="text-teal-700 hover:underline">
                      کلاس‌بندی
                    </Link>
                  </div>
                </td>
              </tr>
            ))
          )}
        </DataTable>
      </section>

      {TOOL_GROUPS.map((group) => (
        <section
          key={group.title}
          className="overflow-hidden rounded-2xl border border-[var(--border)] bg-white shadow-card"
        >
          <div className={`px-3 py-2.5 text-sm font-bold text-white sm:px-4 ${group.tone}`}>{group.title}</div>
          <div className="grid grid-cols-3 gap-2 p-2 sm:grid-cols-4 sm:gap-2.5 sm:p-3">
            {group.items.map((item) => (
              <Link
                key={item.label}
                href={item.href(branchId)}
                className="group flex min-h-[5.25rem] flex-col items-center justify-center gap-0.5 rounded-xl border border-slate-200/90 bg-white px-1 py-2 text-center shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-teal-200 hover:bg-teal-50/50 hover:shadow-md active:scale-[0.99] sm:min-h-[5.75rem] sm:px-1.5 sm:py-2.5"
              >
                <h4 className="line-clamp-2 text-[10px] font-bold text-slate-800 sm:text-xs">{item.label}</h4>
                <p className="line-clamp-2 text-[9px] text-[var(--muted)] sm:text-[11px]">{item.desc}</p>
              </Link>
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}

function Panel({
  title,
  hint,
  href,
  linkLabel,
  children,
}: {
  title: string;
  hint?: 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">
        <div>
          <h3 className="text-sm font-bold text-slate-900">{title}</h3>
          {hint ? <p className="text-xs text-[var(--muted)]">{hint}</p> : null}
        </div>
        {href && linkLabel ? (
          <Link href={href} className="text-xs font-medium text-teal-700 hover:underline">
            {linkLabel}
          </Link>
        ) : null}
      </div>
      {children}
    </section>
  );
}

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 SoonCard({ label }: { label: string }) {
  return (
    <div className="flex min-h-[3.5rem] flex-col justify-center rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-2.5 sm:min-h-[4.5rem] sm:items-center sm:text-center">
      <p className="text-xs font-medium text-slate-500">{label}</p>
      <p className="mt-0.5 text-[11px] font-bold text-slate-400">به‌زودی</p>
    </div>
  );
}

function AttendanceStat({
  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>
  );
}