"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import { ListExportActions } from "@/components/export/ListExportActions";
import { Alert } from "@/components/ui/Alert";
import { Field, Select } from "@/components/ui/Field";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { BarChart, LineChart } from "@/components/report-cards/SimpleCharts";
import { TeacherPanel } from "@/components/teacher/ui/TeacherPanel";
import { TeacherStatGrid } from "@/components/teacher/ui/TeacherStatGrid";
import { ApiError, apiGet } from "@/lib/api";
import { canAccessAcademicAdmin } from "@/lib/permissions";

interface BranchItem {
  id: number;
  name: string;
}

interface PerformanceReport {
  scope: {
    from: string;
    to: string;
    branch_id?: number | null;
    teacher_user_id?: number | null;
    is_manager_view: boolean;
    classes_count: number;
    students_count: number;
  };
  summary: {
    attendance_rate: number;
    present: number;
    absent: number;
    late: number;
    attendance_days: number;
    assignments_active: number;
    submissions_total: number;
    submissions_graded: number;
    submissions_pending: number;
    grading_rate: number;
    class_logs: number;
    resources_uploaded: number;
    assessments_count: number;
    average_score: number;
  };
  attendance_trend: Array<{
    date: string;
    present: number;
    absent: number;
    late: number;
    rate: number;
  }>;
  pending_assignments: Array<{
    assignment_id: number;
    title: string;
    class_room_id: number;
    pending_count: number;
  }>;
  class_breakdown: Array<{
    class_room_id: number;
    class_code: string;
    attendance_rate: number | null;
    pending_submissions: number;
    class_logs: number;
  }>;
  teacher_activity: Array<{
    teacher_user_id: number;
    name: string;
    attendance_days: number;
    class_logs: number;
    submissions_graded: number;
    pending_submissions: number;
    activity_score: number;
  }>;
}

const RANGE_PRESETS = [
  { id: "7", label: "۷ روز", days: 7 },
  { id: "30", label: "۳۰ روز", days: 30 },
  { id: "90", label: "۹۰ روز", days: 90 },
] as const;

function isoDaysAgo(days: number) {
  const d = new Date();
  d.setDate(d.getDate() - (days - 1));
  return d.toISOString().slice(0, 10);
}

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

export function PerformanceReportPanel({ defaultRangeDays = 30 }: { defaultRangeDays?: number }) {
  const isManager = canAccessAcademicAdmin();
  const [rangeDays, setRangeDays] = useState(defaultRangeDays);
  const [branchId, setBranchId] = useState<string>("");
  const [branches, setBranches] = useState<BranchItem[]>([]);
  const [data, setData] = useState<PerformanceReport | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const from = useMemo(() => isoDaysAgo(rangeDays), [rangeDays]);
  const to = useMemo(() => new Date().toISOString().slice(0, 10), []);

  const exportFilters = {
    from,
    to,
    branch_id: isManager && branchId ? branchId : undefined,
  };

  useEffect(() => {
    if (!isManager) return;
    void apiGet<BranchItem[]>("/branches")
      .then(setBranches)
      .catch(() => setBranches([]));
  }, [isManager]);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams({ from, to });
      if (isManager && branchId) params.set("branch_id", branchId);
      const payload = await apiGet<PerformanceReport>(`/performance-report?${params.toString()}`);
      setData(payload);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری گزارش");
      setData(null);
    } finally {
      setLoading(false);
    }
  }, [branchId, from, isManager, to]);

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

  const summary = data?.summary;
  const trendPoints = (data?.attendance_trend ?? []).map((d) => ({
    label: formatFaDate(d.date),
    value: d.rate,
  }));

  const classChartPoints = (data?.class_breakdown ?? [])
    .filter((c) => c.attendance_rate != null)
    .slice(0, 8)
    .map((c) => ({
      label: c.class_code,
      value: c.attendance_rate,
    }));

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h2 className="text-lg font-bold text-slate-900">گزارش عملکرد</h2>
          <p className="mt-0.5 text-sm text-[var(--muted)]">
            {isManager ? "خلاصه فعالیت آموزشی مدرسه" : "خلاصه عملکرد تدریس و کلاس‌های شما"}
            {data?.scope ? ` · ${data.scope.classes_count} کلاس · ${data.scope.students_count} دانش‌آموز` : ""}
          </p>
        </div>
        <div className="flex flex-wrap items-end gap-2">
          <div className="flex gap-1 rounded-lg bg-slate-100 p-1">
            {RANGE_PRESETS.map((preset) => (
              <button
                key={preset.id}
                type="button"
                onClick={() => setRangeDays(preset.days)}
                className={`rounded-md px-3 py-1.5 text-xs font-medium transition ${
                  rangeDays === preset.days
                    ? "bg-white text-teal-800 shadow-sm"
                    : "text-slate-600 hover:text-slate-800"
                }`}
              >
                {preset.label}
              </button>
            ))}
          </div>
          {isManager && branches.length > 0 ? (
            <div className="min-w-[160px]">
              <Field label="مدرسه">
                <Select value={branchId} onChange={(e) => setBranchId(e.target.value)}>
                  <option value="">همه مدارس</option>
                  {branches.map((b) => (
                    <option key={b.id} value={b.id}>
                      {b.name}
                    </option>
                  ))}
                </Select>
              </Field>
            </div>
          ) : null}
          <button
            type="button"
            onClick={() => void load()}
            className="rounded-lg px-3 py-2 text-sm font-medium text-teal-700 hover:bg-teal-50"
          >
            به‌روزرسانی
          </button>
          <ListExportActions
            exportPath="/performance-report/export"
            filters={exportFilters}
            contextKeys={["branch_id"]}
            filenameBase="performance-report-export"
            onError={setError}
          />
        </div>
      </div>

      {error ? <Alert tone="error">{error}</Alert> : null}
      {loading ? (
        <PageContentSkeleton rows={6} />
      ) : !data ? null : (
        <>
          <TeacherStatGrid
            items={[
              { key: "attendance", label: "نرخ حضور", value: `${summary?.attendance_rate ?? 0}%` },
              { key: "pending", label: "تصحیح معطل", value: summary?.submissions_pending ?? 0 },
              { key: "grading", label: "نرخ تصحیح", value: `${summary?.grading_rate ?? 0}%` },
              { key: "logs", label: "دفتر کلاسی", value: summary?.class_logs ?? 0 },
              { key: "assessments", label: "ارزیابی‌ها", value: summary?.assessments_count ?? 0 },
              { key: "avg", label: "میانگین نمره", value: summary?.average_score ?? 0 },
              { key: "resources", label: "منابع", value: summary?.resources_uploaded ?? 0 },
              { key: "assignments", label: "تکالیف فعال", value: summary?.assignments_active ?? 0 },
            ]}
          />

          <div className="grid gap-4 lg:grid-cols-2">
            <LineChart title="روند نرخ حضور" points={trendPoints} />
            <BarChart title="نرخ حضور کلاس‌ها (%)" points={classChartPoints} max={100} />
          </div>

          {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}/assignments/${a.assignment_id}/grading`}
                      className="text-teal-700 hover:underline"
                    >
                      {a.title} — {a.pending_count} مورد
                    </Link>
                  </li>
                ))}
              </ul>
            </TeacherPanel>
          ) : null}

          {data.teacher_activity.length > 0 ? (
            <TeacherPanel padded={false}>
              <div className="border-b border-slate-100 px-4 py-3">
                <h3 className="text-sm font-bold text-slate-800">فعالیت معلمان</h3>
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full text-sm">
                  <thead className="bg-slate-50 text-slate-500">
                    <tr>
                      <th className="px-4 py-2 text-right font-medium">معلم</th>
                      <th className="px-4 py-2 text-right font-medium">روز حضورغیاب</th>
                      <th className="px-4 py-2 text-right font-medium">دفتر کلاسی</th>
                      <th className="px-4 py-2 text-right font-medium">تصحیح‌شده</th>
                      <th className="px-4 py-2 text-right font-medium">معطل</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.teacher_activity.map((t) => (
                      <tr key={t.teacher_user_id} className="border-t border-slate-100">
                        <td className="px-4 py-2 font-medium">{t.name}</td>
                        <td className="px-4 py-2">{t.attendance_days}</td>
                        <td className="px-4 py-2">{t.class_logs}</td>
                        <td className="px-4 py-2">{t.submissions_graded}</td>
                        <td className="px-4 py-2">
                          {t.pending_submissions > 0 ? (
                            <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-800">
                              {t.pending_submissions}
                            </span>
                          ) : (
                            "۰"
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </TeacherPanel>
          ) : null}

          {data.class_breakdown.length > 0 ? (
            <TeacherPanel padded={false}>
              <div className="border-b border-slate-100 px-4 py-3">
                <h3 className="text-sm font-bold text-slate-800">وضعیت کلاس‌ها</h3>
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full text-sm">
                  <thead className="bg-slate-50 text-slate-500">
                    <tr>
                      <th className="px-4 py-2 text-right font-medium">کلاس</th>
                      <th className="px-4 py-2 text-right font-medium">نرخ حضور</th>
                      <th className="px-4 py-2 text-right font-medium">تصحیح معطل</th>
                      <th className="px-4 py-2 text-right font-medium">دفتر کلاسی</th>
                      <th className="px-4 py-2 text-right font-medium">عملیات</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.class_breakdown.map((c) => (
                      <tr key={c.class_room_id} className="border-t border-slate-100">
                        <td className="px-4 py-2 font-medium">{c.class_code}</td>
                        <td className="px-4 py-2">
                          {c.attendance_rate != null ? `${c.attendance_rate}%` : "—"}
                        </td>
                        <td className="px-4 py-2">{c.pending_submissions}</td>
                        <td className="px-4 py-2">{c.class_logs}</td>
                        <td className="px-4 py-2">
                          <Link
                            href={`/teacher/classes/${c.class_room_id}`}
                            className="text-teal-700 hover:underline"
                          >
                            مشاهده
                          </Link>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </TeacherPanel>
          ) : null}
        </>
      )}
    </div>
  );
}