"use client";

import { useState, useEffect, useCallback } from "react";
import { getToken } from "@/lib/auth";

interface GradeItem {
  id: string;
  studentId: string;
  examId: string | null;
  homeworkId: string | null;
  score: string;
  feedback?: string;
  gradedBy: string;
  createdAt: string;
  updatedAt: string;
}

interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: { code: string; message: string };
}

export default function GradesPage() {
  const [items, setItems] = useState<GradeItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [examId, setExamId] = useState("");
  const [error, setError] = useState<string | null>(null);

  const authHeaders = (): Record<string, string> => {
    const token = getToken();
    return token ? { Authorization: `Bearer ${token}` } : {};
  };

  const fetchGrades = useCallback(async () => {
    if (!examId.trim()) return;
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(
        `/api/v1/teacher/exams/${encodeURIComponent(examId)}/grades`,
        { headers: authHeaders() },
      );
      const json: ApiResponse<GradeItem[]> = await res.json();
      if (json.success && json.data) {
        setItems(json.data);
      } else {
        setError(json.error?.message || "Failed to load");
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : "Network error");
    } finally {
      setLoading(false);
    }
  }, [examId]);

  useEffect(() => {
    fetchGrades();
  }, [fetchGrades]);

  return (
    <div className="px-10 py-10">
      <header className="mb-8">
        <h1
          className="text-3xl"
          style={{
            fontFamily: "var(--font-serif)",
            color: "var(--color-ink)",
          }}
        >
          成绩查询
        </h1>
        <p className="mt-1 text-sm" style={{ color: "var(--color-ink-muted)" }}>
          core-edu 域 · BFF 聚合查询
        </p>
      </header>

      <div className="rule-thin mb-8" />

      <div className="mb-6 flex items-baseline gap-3">
        <label
          className="text-xs uppercase tracking-wide"
          style={{ color: "var(--color-ink-muted)" }}
        >
          考试 ID
        </label>
        <input
          type="text"
          value={examId}
          onChange={(e) => setExamId(e.target.value)}
          className="flex-1 max-w-md px-3 py-2 bg-transparent border-b text-sm font-mono"
          style={{ borderColor: "var(--color-rule)" }}
          placeholder="输入考试 UUID"
        />
        <button
          onClick={fetchGrades}
          className="text-xs uppercase tracking-wide hover:opacity-70"
          style={{ color: "var(--color-accent)" }}
        >
          查询
        </button>
      </div>

      {error && (
        <div
          className="mark-left mb-4 py-2"
          style={{ borderColor: "var(--color-accent)" }}
        >
          <p className="text-sm px-3" style={{ color: "var(--color-accent)" }}>
            {error}
          </p>
        </div>
      )}

      {loading ? (
        <p className="text-sm" style={{ color: "var(--color-ink-muted)" }}>
          加载中...
        </p>
      ) : items.length === 0 ? (
        <p
          className="text-sm italic"
          style={{ color: "var(--color-ink-muted)" }}
        >
          {examId.trim() ? "该考试下暂无成绩" : "请输入考试 ID 查询成绩"}
        </p>
      ) : (
        <ul className="space-y-0">
          {items.map((g) => (
            <li
              key={g.id}
              className="py-4 grid grid-cols-12 gap-4 items-baseline"
              style={{ borderBottom: "1px solid var(--color-rule)" }}
            >
              <div className="col-span-6">
                <h3
                  className="text-lg"
                  style={{
                    fontFamily: "var(--font-serif)",
                    color: "var(--color-ink)",
                  }}
                >
                  学生: {g.studentId}
                </h3>
                {g.feedback && (
                  <p
                    className="mt-1 text-sm"
                    style={{ color: "var(--color-ink-muted)" }}
                  >
                    反馈: {g.feedback}
                  </p>
                )}
              </div>
              <div
                className="col-span-2 text-2xl"
                style={{
                  fontFamily: "var(--font-serif)",
                  color: "var(--color-accent)",
                }}
              >
                {g.score}
              </div>
              <div
                className="col-span-2 text-xs"
                style={{ color: "var(--color-ink-muted)" }}
              >
                评分人: {g.gradedBy}
              </div>
              <div
                className="col-span-2 text-right text-xs font-mono"
                style={{ color: "var(--color-ink-muted)" }}
              >
                {g.id.slice(0, 8)}...
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
