"use client";

import { type ReactNode, useState, useMemo } from "react";
import { useGrades, useGradeInsights } from "@/hooks/use-school";
import {
  PaperCard,
  Select,
  LoadingState,
  ErrorState,
  EmptyState,
  Table,
  TableRow,
  TableCell,
} from "@/components/ui";
import { t } from "@/lib/i18n";

interface SummaryCardProps {
  label: string;
  value: number | string;
  suffix?: string;
}

function SummaryCard({ label, value, suffix }: SummaryCardProps): ReactNode {
  return (
    <PaperCard className="p-4">
      <p
        style={{
          fontSize: 11,
          color: "var(--color-ink-muted)",
          textTransform: "uppercase",
          letterSpacing: "0.05em",
        }}
      >
        {label}
      </p>
      <p
        style={{
          fontFamily: "var(--font-serif)",
          fontSize: 28,
          color: "var(--color-ink)",
          margin: "8px 0 0 0",
        }}
      >
        {value}
        {suffix && (
          <span
            style={{
              fontSize: 14,
              color: "var(--color-ink-muted)",
              marginLeft: 4,
            }}
          >
            {suffix}
          </span>
        )}
      </p>
    </PaperCard>
  );
}

function formatPercent(rate: number): string {
  return `${(rate * 100).toFixed(1)}%`;
}

export default function GradeInsightsPage(): ReactNode {
  const { data: grades, loading: gradesLoading } = useGrades();
  const [gradeId, setGradeId] = useState<string>("");

  const selectedGradeId = gradeId || (grades[0]?.id ?? null);
  const { data, loading, error } = useGradeInsights(selectedGradeId);

  const ranked = useMemo(() => {
    if (!data) return [];
    return [...data.classRankings].sort((a, b) => a.rank - b.rank);
  }, [data]);

  return (
    <>
      <PaperCard className="p-4 mb-4">
        <Select
          value={selectedGradeId ?? ""}
          onChange={(e) => setGradeId(e.target.value)}
          disabled={gradesLoading || grades.length === 0}
        >
          {grades.length === 0 && <option value="">暂无年级</option>}
          {grades.map((g) => (
            <option key={g.id} value={g.id}>
              {g.name}（{g.schoolName}）
            </option>
          ))}
        </Select>
      </PaperCard>

      {loading && <LoadingState />}
      {error && <ErrorState message={error.message} />}
      {!loading && !error && !data && (
        <PaperCard className="p-4">
          <EmptyState message={t("admin.common.empty")} />
        </PaperCard>
      )}
      {data && (
        <div className="flex flex-col gap-6">
          {/* 全校概览 */}
          <div>
            <h3
              style={{
                fontFamily: "var(--font-serif)",
                fontSize: 16,
                color: "var(--color-ink)",
                marginBottom: 12,
              }}
            >
              {t("admin.school.insights.summary")} — {data.gradeName}
            </h3>
            <div className="grid grid-cols-4 gap-4">
              <SummaryCard
                label={t("admin.dashboard.totalStudents")}
                value={data.schoolWideSummary.totalStudents}
              />
              <SummaryCard
                label={t("admin.dashboard.totalClasses")}
                value={data.schoolWideSummary.totalClasses}
              />
              <SummaryCard
                label={t("admin.school.insights.avgScore")}
                value={data.schoolWideSummary.avgScore.toFixed(1)}
              />
              <SummaryCard
                label={t("admin.school.insights.passingRate")}
                value={formatPercent(data.schoolWideSummary.passingRate)}
              />
            </div>
          </div>

          {/* 作业时间线 */}
          <PaperCard className="p-4">
            <h3
              style={{
                fontFamily: "var(--font-serif)",
                fontSize: 16,
                color: "var(--color-ink)",
                marginBottom: 12,
              }}
            >
              {t("admin.school.insights.homework")}
            </h3>
            {data.homeworkTimeline.length === 0 ? (
              <EmptyState message={t("admin.common.empty")} />
            ) : (
              <Table
                headers={[
                  "作业",
                  t("admin.common.class"),
                  t("admin.school.insights.avgScore"),
                  "提交情况",
                  t("admin.school.endDate"),
                ]}
              >
                {data.homeworkTimeline.map((hw) => (
                  <TableRow key={hw.homeworkId}>
                    <TableCell style={{ fontWeight: 500 }}>
                      {hw.title}
                    </TableCell>
                    <TableCell>{hw.className}</TableCell>
                    <TableCell style={{ fontFamily: "var(--font-mono)" }}>
                      {hw.avgScore.toFixed(1)}
                    </TableCell>
                    <TableCell
                      style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}
                    >
                      {hw.submittedCount}/{hw.totalCount}
                    </TableCell>
                    <TableCell style={{ whiteSpace: "nowrap" }}>
                      {hw.dueDate}
                    </TableCell>
                  </TableRow>
                ))}
              </Table>
            )}
          </PaperCard>

          {/* 班级排名 */}
          <PaperCard className="p-4">
            <h3
              style={{
                fontFamily: "var(--font-serif)",
                fontSize: 16,
                color: "var(--color-ink)",
                marginBottom: 12,
              }}
            >
              {t("admin.school.insights.rankings")}
            </h3>
            {ranked.length === 0 ? (
              <EmptyState message={t("admin.common.empty")} />
            ) : (
              <Table
                headers={[
                  t("admin.school.insights.rank"),
                  t("admin.common.class"),
                  t("admin.school.insights.avgScore"),
                  t("admin.school.insights.delta"),
                ]}
              >
                {ranked.map((cls) => {
                  const deltaColor =
                    cls.delta > 0
                      ? "var(--color-success)"
                      : cls.delta < 0
                        ? "var(--color-danger)"
                        : "var(--color-ink-muted)";
                  const deltaSign = cls.delta > 0 ? "+" : "";
                  return (
                    <TableRow key={cls.classId}>
                      <TableCell
                        style={{
                          fontFamily: "var(--font-serif)",
                          fontSize: 15,
                          fontWeight: 500,
                        }}
                      >
                        {cls.rank}
                      </TableCell>
                      <TableCell style={{ fontWeight: 500 }}>
                        {cls.className}
                      </TableCell>
                      <TableCell style={{ fontFamily: "var(--font-mono)" }}>
                        {cls.avgScore.toFixed(1)}
                      </TableCell>
                      <TableCell
                        style={{
                          fontFamily: "var(--font-mono)",
                          color: deltaColor,
                          fontWeight: 500,
                        }}
                      >
                        {deltaSign}
                        {cls.delta.toFixed(1)}
                      </TableCell>
                    </TableRow>
                  );
                })}
              </Table>
            )}
          </PaperCard>
        </div>
      )}
    </>
  );
}
