"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { Field } from "@/components/ui/Field";
import { PersianDatePicker } from "@/components/ui/PersianDatePicker";
import { ApiError, apiGet } from "@/lib/api";

interface AssessmentItem {
  id: number;
  title: string;
  max_score: number | string;
  assessment_date?: string | null;
  stats: {
    average: number;
    entered_count: number;
    total_students: number;
  };
}

function formatFaDate(iso: string) {
  try {
    return new Date(iso.slice(0, 10) + "T12:00:00").toLocaleDateString("fa-IR", {
      weekday: "short",
      month: "short",
      day: "numeric",
    });
  } catch {
    return iso;
  }
}

function monthRange(ym: string) {
  const [y, m] = ym.split("-").map(Number);
  const from = `${y}-${String(m).padStart(2, "0")}-01`;
  const last = new Date(y, m, 0).getDate();
  const to = `${y}-${String(m).padStart(2, "0")}-${String(last).padStart(2, "0")}`;
  return { from, to };
}

export function ClassGradesHistory({
  classRoomId,
  subjectId,
  selectedAssessmentId,
  onSelectAssessment,
  refreshKey = 0,
}: {
  classRoomId: number;
  subjectId: number;
  selectedAssessmentId: number | null;
  onSelectAssessment: (id: number) => void;
  refreshKey?: number;
}) {
  const [month, setMonth] = useState(() => new Date().toISOString().slice(0, 7));
  const [assessments, setAssessments] = useState<AssessmentItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const list = await apiGet<AssessmentItem[]>(
        `/teacher/classes/${classRoomId}/assessments?subject_id=${subjectId}`,
      );
      setAssessments(list ?? []);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری سابقه");
    } finally {
      setLoading(false);
    }
  }, [classRoomId, subjectId]);

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

  const monthItems = useMemo(() => {
    const { from, to } = monthRange(month);
    return assessments
      .filter((a) => {
        const d = a.assessment_date?.slice(0, 10);
        return d && d >= from && d <= to;
      })
      .sort((a, b) => (b.assessment_date ?? "").localeCompare(a.assessment_date ?? ""));
  }, [assessments, month]);

  const monthSummary = useMemo(() => {
    const withScores = monthItems.filter((a) => a.stats.entered_count > 0);
    const avgOfAvgs =
      withScores.length > 0
        ? withScores.reduce((sum, a) => sum + a.stats.average, 0) / withScores.length
        : 0;
    const entered = monthItems.reduce((sum, a) => sum + a.stats.entered_count, 0);
    return {
      count: monthItems.length,
      avgOfAvgs: Math.round(avgOfAvgs * 10) / 10,
      entered,
    };
  }, [monthItems]);

  return (
    <div className="rounded-2xl border border-slate-200 bg-white p-4">
      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
        <h3 className="text-sm font-bold text-slate-800">سابقه نمرات</h3>
        <button
          type="button"
          onClick={() => void load()}
          className="text-xs font-medium text-teal-700 hover:underline"
        >
          به‌روزرسانی
        </button>
      </div>

      <Field label="گزارش ماهانه">
        <PersianDatePicker
          onlyMonthPicker
          value={month}
          placeholder="انتخاب ماه"
          onChange={(ym) => {
            if (ym) setMonth(ym.length === 7 ? ym : ym.slice(0, 7));
          }}
        />
      </Field>

      {monthSummary.count > 0 ? (
        <div className="mb-3 mt-2 flex flex-wrap gap-2 text-xs">
          <span className="rounded-md bg-teal-100 px-2 py-1 text-teal-800">
            {monthSummary.count} ارزیابی
          </span>
          {monthSummary.avgOfAvgs > 0 ? (
            <span className="rounded-md bg-emerald-100 px-2 py-1 text-emerald-800">
              میانگین: {monthSummary.avgOfAvgs}
            </span>
          ) : null}
          <span className="rounded-md bg-violet-100 px-2 py-1 text-violet-800">
            ثبت‌شده: {monthSummary.entered}
          </span>
        </div>
      ) : null}

      {error ? <p className="text-xs text-orange-600">{error}</p> : null}
      {loading ? (
        <p className="text-xs text-slate-400">در حال بارگذاری…</p>
      ) : monthItems.length === 0 ? (
        <p className="text-xs text-slate-400">ارزیابی‌ای در این ماه ثبت نشده است.</p>
      ) : (
        <ul className="max-h-56 space-y-1.5 overflow-y-auto">
          {monthItems.map((item) => {
            const active = item.id === selectedAssessmentId;
            const date = item.assessment_date?.slice(0, 10) ?? "";
            return (
              <li key={item.id}>
                <button
                  type="button"
                  onClick={() => onSelectAssessment(item.id)}
                  className={`flex w-full flex-col gap-1 rounded-xl px-3 py-2 text-right text-xs transition ${
                    active ? "bg-teal-50 ring-1 ring-teal-200" : "hover:bg-slate-50"
                  }`}
                >
                  <div className="flex items-center justify-between gap-2">
                    <span className="truncate font-semibold text-slate-800">{item.title}</span>
                    {date ? (
                      <span className="shrink-0 text-slate-500">{formatFaDate(date)}</span>
                    ) : null}
                  </div>
                  <span className="flex gap-1.5">
                    <span className="rounded-md bg-emerald-100 px-1.5 py-0.5 font-medium text-emerald-800">
                      میانگین {item.stats.average}
                    </span>
                    <span className="rounded-md bg-violet-100 px-1.5 py-0.5 font-medium text-violet-800">
                      {item.stats.entered_count}/{item.stats.total_students}
                    </span>
                    <span className="rounded-md bg-slate-100 px-1.5 py-0.5 font-medium text-slate-700">
                      از {item.max_score}
                    </span>
                  </span>
                </button>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}