"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { apiGet } from "@/lib/api";
import { TeacherPanel } from "@/components/teacher/ui/TeacherPanel";
import { TeacherStatGrid } from "@/components/teacher/ui/TeacherStatGrid";

interface SummaryPayload {
  classes: Array<{
    schedule_id: number;
    class_room_id: number;
    subject_id: number;
    subject_name?: string;
    class_code?: string;
    present: number;
    absent: number;
    late: number;
    unchecked: number;
  }>;
  pending_assignments: Array<{
    assignment_id: number;
    title: string;
    class_room_id: number;
    ungraded_count: number;
  }>;
  upcoming_assessments: Array<{
    assessment_id: number;
    title: string;
    class_room_id: number;
    class_code?: string;
    assessment_date?: string;
  }>;
  class_averages: Array<{
    class_room_id: number;
    class_code?: string;
    average_score: number;
  }>;
  notifications: Array<{ id: number; type: string; title: string; body?: string; at?: string }>;
}

export function DashboardSummary({ date }: { date: string }) {
  const [data, setData] = useState<SummaryPayload | null>(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const payload = await apiGet<SummaryPayload>(`/teacher/dashboard-summary?date=${date}`);
      setData(payload);
    } catch {
      setData(null);
    } finally {
      setLoading(false);
    }
  }, [date]);

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

  if (loading) return <p className="text-sm text-slate-400">در حال بارگذاری خلاصه…</p>;
  if (!data) return null;

  const totalPresent = data.classes.reduce((s, c) => s + c.present, 0);
  const totalAbsent = data.classes.reduce((s, c) => s + c.absent, 0);
  const pendingCount = data.pending_assignments.reduce((s, a) => s + a.ungraded_count, 0);

  return (
    <div className="space-y-4">
      <TeacherStatGrid
        items={[
          { key: "present", label: "حاضر امروز", value: totalPresent },
          { key: "absent", label: "غایب امروز", value: totalAbsent },
          { key: "pending", label: "تکلیف تصحیح‌نشده", value: pendingCount },
          { key: "exams", label: "آزمون پیش‌رو", value: data.upcoming_assessments.length },
        ]}
      />

      {data.pending_assignments.length > 0 ? (
        <TeacherPanel>
          <h3 className="mb-2 text-sm font-bold text-slate-800">تکالیف در انتظار بررسی</h3>
          <ul className="space-y-1.5 text-sm">
            {data.pending_assignments.map((a) => (
              <li key={a.assignment_id}>
                <Link
                  href={`/teacher/classes/${a.class_room_id}?tab=assignments`}
                  className="text-teal-700 hover:underline"
                >
                  {a.title} — {a.ungraded_count} مورد
                </Link>
              </li>
            ))}
          </ul>
        </TeacherPanel>
      ) : null}

      {data.upcoming_assessments.length > 0 ? (
        <TeacherPanel>
          <h3 className="mb-2 text-sm font-bold text-slate-800">آزمون‌های پیش‌رو</h3>
          <ul className="space-y-1.5 text-sm">
            {data.upcoming_assessments.map((a) => (
              <li key={a.assessment_id}>
                <Link
                  href={`/teacher/classes/${a.class_room_id}?tab=grades`}
                  className="text-teal-700 hover:underline"
                >
                  {a.title} ({a.class_code}) — {a.assessment_date}
                </Link>
              </li>
            ))}
          </ul>
        </TeacherPanel>
      ) : null}

      {data.class_averages.length > 0 ? (
        <TeacherPanel>
          <h3 className="mb-2 text-sm font-bold text-slate-800">میانگین عملکرد کلاس‌ها</h3>
          <ul className="flex flex-wrap gap-2 text-sm">
            {data.class_averages.map((c) => (
              <li
                key={c.class_room_id}
                className="rounded-lg bg-slate-50 px-3 py-1.5 font-medium text-slate-700"
              >
                {c.class_code}: {c.average_score}
              </li>
            ))}
          </ul>
        </TeacherPanel>
      ) : null}

      {data.notifications.length > 0 ? (
        <TeacherPanel>
          <h3 className="mb-2 text-sm font-bold text-slate-800">اعلان‌ها</h3>
          <ul className="space-y-1.5 text-sm text-slate-600">
            {data.notifications.map((n) => (
              <li key={n.id}>{n.title}</li>
            ))}
          </ul>
        </TeacherPanel>
      ) : null}
    </div>
  );
}