"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useParams } from "@/lib/route-params";
import { useEffect, useState } from "react";
import {
  BarChart,
  HeatBars,
  LineChart,
  RadarChart,
} from "@/components/report-cards/SimpleCharts";
import { AppShell } from "@/components/app/AppShell";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input } from "@/components/ui/Field";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { ApiError, apiGet } from "@/lib/api";
import { KIND_LABELS, ReportCardItem } from "@/lib/report-cards";

interface AnalyticsResponse {
  report_card_id: number;
  enabled_charts: string[];
  charts: {
    bar_subjects?: Array<{ subject_name: string; score: number | null }>;
    radar_subjects?: Array<{ subject_name: string; score: number | null }>;
    line_progress?: Array<{ period_name: string; average: number | null }>;
    distribution?: Array<{ bucket: string; count: number }>;
    class_avg_compare?: {
      student_average: number | null;
      class_average: number | null;
      subjects: Array<{
        subject_name: string;
        student_score: number | null;
        class_average: number | null;
      }>;
    };
    warning_heatmap?: Array<{
      subject_name: string;
      warning_ratio: number;
      warning_count: number;
      total_scores: number;
    }>;
  };
}

export default function ReportCardAnalyticsPage() {
  const { id } = useParams<{ id: string }>();
  const search = useSearchParams();
  const [card, setCard] = useState<ReportCardItem | null>(null);
  const [data, setData] = useState<AnalyticsResponse | null>(null);
  const [enrollmentId, setEnrollmentId] = useState(search.get("enrollment_id") ?? "");
  const [classRoomId, setClassRoomId] = useState(search.get("class_room_id") ?? "");
  const [periodId, setPeriodId] = useState(search.get("report_card_period_id") ?? "");
  const [error, setError] = useState<string | null>(null);

  const load = async () => {
    setError(null);
    try {
      const detail = await apiGet<ReportCardItem>(`/report-cards/${id}`);
      setCard(detail);
      const params = new URLSearchParams();
      if (enrollmentId) params.set("enrollment_id", enrollmentId);
      if (classRoomId) params.set("class_room_id", classRoomId);
      if (periodId) params.set("report_card_period_id", periodId);
      const qs = params.toString();
      setData(
        await apiGet<AnalyticsResponse>(
          `/report-cards/${id}/analytics${qs ? `?${qs}` : ""}`,
        ),
      );
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری تحلیل");
    }
  };

  useEffect(() => {
    load();
  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps

  const charts = data?.charts ?? {};

  return (
    <AppShell title="نمودارهای تحلیلی" breadcrumbLabels={{ reportCard: card?.name, detail: card ? KIND_LABELS[card.kind] : undefined }}>
      {error ? <Alert tone="error">{error}</Alert> : null}

      <div className="mb-4 flex flex-wrap gap-2">
        <Link href={`/academic/report-cards/${id}`}>
          <Button variant="secondary">بازگشت</Button>
        </Link>
        <Button onClick={load}>به‌روزرسانی</Button>
      </div>

      <div className="mb-4 grid gap-3 rounded-2xl border border-[var(--border)] bg-white p-4 md:grid-cols-3">
        <Field label="شناسه ثبت‌نام (enrollment)">
          <Input value={enrollmentId} onChange={(e) => setEnrollmentId(e.target.value)} />
        </Field>
        <Field label="شناسه کلاس">
          <Input value={classRoomId} onChange={(e) => setClassRoomId(e.target.value)} />
        </Field>
        <Field label="شناسه دوره کارنامه">
          <select
            className="w-full rounded-xl border border-[var(--border)] px-3 py-2 text-sm"
            value={periodId}
            onChange={(e) => setPeriodId(e.target.value)}
          >
            <option value="">همه مراحل</option>
            {(card?.periods ?? []).map((p) => (
              <option key={p.id} value={p.id}>{p.name}</option>
            ))}
          </select>
        </Field>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        {charts.bar_subjects ? (
          <BarChart
            title="مقایسه نمرات دروس"
            points={charts.bar_subjects.map((x) => ({
              label: x.subject_name,
              value: x.score,
            }))}
          />
        ) : null}
        {charts.radar_subjects ? (
          <RadarChart
            title="رادار دروس"
            points={charts.radar_subjects.map((x) => ({
              label: x.subject_name,
              value: x.score,
            }))}
          />
        ) : null}
        {charts.line_progress ? (
          <LineChart
            title="روند پیشرفت بین نوبت‌ها"
            points={charts.line_progress.map((x) => ({
              label: x.period_name,
              value: x.average,
            }))}
          />
        ) : null}
        {charts.distribution ? (
          <BarChart
            title="توزیع نمرات"
            max={Math.max(1, ...charts.distribution.map((d) => d.count))}
            points={charts.distribution.map((x) => ({
              label: x.bucket,
              value: x.count,
            }))}
          />
        ) : null}
        {charts.class_avg_compare ? (
          <BarChart
            title={`میانگین دانش‌آموز (${charts.class_avg_compare.student_average ?? "—"}) vs کلاس (${charts.class_avg_compare.class_average ?? "—"})`}
            points={charts.class_avg_compare.subjects.map((x) => ({
              label: x.subject_name,
              value: x.student_score,
            }))}
          />
        ) : null}
        {charts.warning_heatmap ? (
          <HeatBars
            title="وضعیت هشدار دروس"
            rows={charts.warning_heatmap.map((x) => ({
              label: x.subject_name,
              ratio: x.warning_ratio,
              count: x.warning_count,
              total: x.total_scores,
            }))}
          />
        ) : null}
      </div>

      {!data ? <div className="mt-4"><PageContentSkeleton rows={5} /></div> : null}
    </AppShell>
  );
}