"use client";

/**
 * CoursePlanDetail — 课程计划详情（批次 A）
 *
 * 数据源：useCoursePlanDetail
 * 视图：计划信息 + 周次条目列表（完成状态标记）
 */

import Link from "next/link";
import { useParams } from "next/navigation";
import { useCoursePlanDetail } from "@/lib/graphql/hooks";
import type { CoursePlanStatus, CoursePlanSemester } from "@/lib/graphql/types";

const STATUS_LABELS: Record<CoursePlanStatus, string> = {
  planning: "规划中",
  active: "进行中",
  completed: "已完成",
  paused: "已暂停",
};

const SEMESTER_LABELS: Record<CoursePlanSemester, string> = {
  "1": "上学期",
  "2": "下学期",
};

export default function CoursePlanDetailPage(): JSX.Element {
  const params = useParams();
  const planId = params["id"] as string;

  const { data, fetching, error } = useCoursePlanDetail(planId);

  if (fetching) {
    return (
      <div className="px-6 lg:px-10 py-8 max-w-4xl mx-auto">
        <p className="text-sm" style={{ color: "var(--color-ink-muted)" }} aria-live="polite">
          加载中…
        </p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="px-6 lg:px-10 py-8 max-w-4xl mx-auto">
        <div role="alert" className="card-paper p-6" style={{ borderColor: "var(--color-danger)" }}>
          <p className="text-sm" style={{ color: "var(--color-danger)" }}>
            课程计划加载失败：{error.message}
          </p>
        </div>
      </div>
    );
  }

  if (!data) {
    return (
      <div className="px-6 lg:px-10 py-8 max-w-4xl mx-auto">
        <div className="card-paper p-8 text-center">
          <p className="text-base font-serif" style={{ color: "var(--color-ink)" }}>
            未找到该课程计划
          </p>
          <Link href="/course-plans" className="mt-4 inline-block btn-secondary text-xs">
            返回课程计划
          </Link>
        </div>
      </div>
    );
  }

  const progress = data.totalHours > 0 ? (data.completedHours / data.totalHours) * 100 : 0;

  return (
    <div className="px-6 lg:px-10 py-8 lg:py-10 max-w-4xl mx-auto">
      <Link href="/course-plans" className="text-xs" style={{ color: "var(--color-ink-muted)" }}>
        ← 返回课程计划
      </Link>

      <header className="mt-4 mb-6">
        <div className="flex items-center gap-2 mb-2">
          {data.subjectName && <span className="badge badge-info">{data.subjectName}</span>}
          <span className="text-xs" style={{ color: "var(--color-ink-muted)" }}>
            {data.className ?? "—"} · {SEMESTER_LABELS[data.semester]}
          </span>
        </div>
        <h1 className="text-2xl lg:text-3xl font-serif" style={{ color: "var(--color-ink)" }}>
          {data.subjectName ?? "课程计划"} · {data.teacherName ?? "—"}
        </h1>
      </header>

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

      <section className="card-paper p-6 mb-6">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm mb-4">
          <div>
            <p className="text-xs uppercase tracking-wider" style={{ color: "var(--color-ink-muted)" }}>
              总课时
            </p>
            <p className="mt-1 font-serif text-lg" style={{ color: "var(--color-ink)" }}>
              {data.totalHours}
            </p>
          </div>
          <div>
            <p className="text-xs uppercase tracking-wider" style={{ color: "var(--color-ink-muted)" }}>
              已完成
            </p>
            <p className="mt-1 font-serif text-lg" style={{ color: "var(--color-ink)" }}>
              {data.completedHours}
            </p>
          </div>
          <div>
            <p className="text-xs uppercase tracking-wider" style={{ color: "var(--color-ink-muted)" }}>
              周课时
            </p>
            <p className="mt-1 font-serif text-lg" style={{ color: "var(--color-ink)" }}>
              {data.weeklyHours}
            </p>
          </div>
          <div>
            <p className="text-xs uppercase tracking-wider" style={{ color: "var(--color-ink-muted)" }}>
              状态
            </p>
            <p className="mt-1 text-sm" style={{ color: "var(--color-ink)" }}>
              {STATUS_LABELS[data.status]}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <div className="flex-1 h-1.5 rounded-sm overflow-hidden" style={{ background: "var(--color-rule)" }}>
            <div
              className="h-full"
              style={{ width: `${Math.min(progress, 100)}%`, background: "var(--color-accent)" }}
            />
          </div>
          <span className="text-xs" style={{ color: "var(--color-ink-muted)" }}>
            {Math.round(progress)}%
          </span>
        </div>
      </section>

      {data.syllabus && (
        <section className="mb-6">
          <h2 className="text-sm uppercase tracking-wider mb-2" style={{ color: "var(--color-ink-muted)" }}>
            教学大纲
          </h2>
          <div className="card-paper p-4">
            <p className="text-sm leading-relaxed whitespace-pre-wrap" style={{ color: "var(--color-ink)" }}>
              {data.syllabus}
            </p>
          </div>
        </section>
      )}

      {data.objectives && (
        <section className="mb-6">
          <h2 className="text-sm uppercase tracking-wider mb-2" style={{ color: "var(--color-ink-muted)" }}>
            教学目标
          </h2>
          <div className="card-paper p-4">
            <p className="text-sm leading-relaxed whitespace-pre-wrap" style={{ color: "var(--color-ink)" }}>
              {data.objectives}
            </p>
          </div>
        </section>
      )}

      <section>
        <h2 className="text-sm uppercase tracking-wider mb-3" style={{ color: "var(--color-ink-muted)" }}>
          周次安排
        </h2>
        <ul className="space-y-2">
          {data.items.map((item) => (
            <li key={item.id}>
              <article
                className="card-paper p-4"
                style={{
                  borderLeft: item.isCompleted ? "3px solid var(--color-success)" : "1px solid var(--color-rule)",
                }}
              >
                <div className="flex items-start justify-between gap-4">
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-xs font-serif" style={{ color: "var(--color-ink)" }}>
                        第 {item.week} 周
                      </span>
                      <span className="text-xs" style={{ color: "var(--color-ink-muted)" }}>
                        {item.hours} 课时
                      </span>
                      {item.isCompleted ? (
                        <span className="badge badge-success">已完成</span>
                      ) : (
                        <span className="badge badge-warning">未完成</span>
                      )}
                    </div>
                    <p className="text-sm font-medium" style={{ color: "var(--color-ink)" }}>
                      {item.topic}
                    </p>
                    {item.content && (
                      <p className="mt-1 text-xs" style={{ color: "var(--color-ink-muted)" }}>
                        {item.content}
                      </p>
                    )}
                    {item.textbookChapter && (
                      <p className="mt-1 text-xs" style={{ color: "var(--color-ink-subtle)" }}>
                        教材：{item.textbookChapter}
                      </p>
                    )}
                    {item.notes && (
                      <p className="mt-1 text-xs italic" style={{ color: "var(--color-ink-subtle)" }}>
                        备注：{item.notes}
                      </p>
                    )}
                  </div>
                </div>
              </article>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
}
