"use client";

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

interface AnalyticsPayload {
  attendance_summary: {
    present: number;
    absent: number;
    late: number;
    total: number;
    presence_rate: number;
  };
  score_trend: Array<{ title?: string; score: number; max_score: number; date?: string }>;
  participation: number;
}

export function StudentAnalyticsPanel({
  studentProfileId,
  classRoomId,
}: {
  studentProfileId: number;
  classRoomId?: number;
}) {
  const [data, setData] = useState<AnalyticsPayload | null>(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      if (classRoomId) params.set("class_room_id", String(classRoomId));
      const qs = params.toString();
      const payload = await apiGet<AnalyticsPayload>(
        `/teacher/students/${studentProfileId}/analytics${qs ? `?${qs}` : ""}`,
      );
      setData(payload);
    } catch {
      setData(null);
    } finally {
      setLoading(false);
    }
  }, [studentProfileId, classRoomId]);

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

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

  return (
    <TeacherPanel>
      <h3 className="mb-3 text-sm font-bold">ارزیابی و روند</h3>
      <div className="grid gap-3 sm:grid-cols-3 text-sm">
        <div className="rounded-xl bg-slate-50 p-3">
          <div className="text-xs text-slate-500">نرخ حضور</div>
          <div className="font-bold">{data.attendance_summary.presence_rate}%</div>
        </div>
        <div className="rounded-xl bg-slate-50 p-3">
          <div className="text-xs text-slate-500">مشارکت</div>
          <div className="font-bold">{data.participation}%</div>
        </div>
        <div className="rounded-xl bg-slate-50 p-3">
          <div className="text-xs text-slate-500">غیبت</div>
          <div className="font-bold">{data.attendance_summary.absent}</div>
        </div>
      </div>
      {data.score_trend.length > 0 ? (
        <ul className="mt-3 space-y-1 text-xs text-slate-600">
          {data.score_trend.slice(0, 10).map((s, i) => (
            <li key={i}>
              {s.date} — {s.title}: {s.score}/{s.max_score}
            </li>
          ))}
        </ul>
      ) : (
        <p className="mt-2 text-xs text-slate-400">هنوز نمره‌ای ثبت نشده.</p>
      )}
    </TeacherPanel>
  );
}