"use client";

/**
 * 课程计划详情页（P7-insights）
 *
 * 数据来源：GraphQL CoursePlanDetailQuery
 *
 * 功能：
 * - 基本信息：标题/学科/年级/学年/学期/学时
 * - 章节列表（每章：标题/学时/教学目标/重难点/教学活动）
 * - 关联教材入口（→ /textbooks/[id]）
 * - 关联作业入口（→ /homework?coursePlanId=xxx）
 *
 * 维护者：ai13（teacher-portal）
 */

import { useQuery } from "urql";
import { useParams } from "next/navigation";
import Link from "next/link";
import { Loading, Empty } from "@edu/ui-components";
import { CoursePlanDetailQuery } from "@/lib/graphql-p7-insights";
import type { CoursePlanDetail as CoursePlanDetailType } from "@/lib/graphql-p7-insights";

const STATUS_LABEL: Record<string, string> = {
  DRAFT: "草稿",
  PUBLISHED: "已发布",
  ARCHIVED: "已归档",
};

export default function CoursePlanDetailPage(): JSX.Element {
  const params = useParams<{ id: string }>();
  const id = params?.id ?? "";

  const [result] = useQuery({
    query: CoursePlanDetailQuery,
    variables: { id },
    pause: !id,
  });

  const plan: CoursePlanDetailType | undefined = result.data?.coursePlanDetail;

  return (
    <div className="px-10 py-10">
      <header className="mb-8">
        <Link
          href="/course-plans"
          className="text-tiny uppercase tracking-wide text-ink-muted hover:opacity-70"
        >
          ← 返回课程计划列表
        </Link>
        <h1 className="mt-3 text-3xl font-serif text-ink">
          {plan?.title ?? "课程计划详情"}
        </h1>
        <p className="mt-1 text-sm text-ink-muted">
          GraphQL CoursePlanDetailQuery · 课程计划详情与章节（P7-insights）
        </p>
      </header>

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

      {!id ? (
        <Empty title="未指定课程计划" description="请从列表进入" />
      ) : result.fetching ? (
        <Loading lines={6} />
      ) : result.error ? (
        <div className="mark-left mb-4 py-2 border-l-2 border-danger pl-md">
          <p className="text-sm px-3 text-danger">
            加载失败：{result.error.message}
          </p>
        </div>
      ) : !plan ? (
        <Empty title="课程计划不存在" description="可能已被删除" />
      ) : (
        <>
          {/* 基本信息 */}
          <section className="mb-8 grid grid-cols-2 md:grid-cols-3 gap-6">
            <div className="p-5 border border-rule rounded-card">
              <p className="text-tiny uppercase tracking-wide text-ink-muted">
                学科 / 年级
              </p>
              <p className="mt-2 text-lg font-serif text-ink">
                {plan.subject} · {plan.grade}
              </p>
            </div>
            <div className="p-5 border border-rule rounded-card">
              <p className="text-tiny uppercase tracking-wide text-ink-muted">
                学年 / 学期
              </p>
              <p className="mt-2 text-lg font-serif text-ink">
                {plan.academicYear} {plan.semester}
              </p>
            </div>
            <div className="p-5 border border-rule rounded-card">
              <p className="text-tiny uppercase tracking-wide text-ink-muted">
                总学时
              </p>
              <p className="mt-2 text-3xl font-serif text-accent">
                {plan.totalHours}
              </p>
            </div>
            <div className="p-5 border border-rule rounded-card">
              <p className="text-tiny uppercase tracking-wide text-ink-muted">
                状态
              </p>
              <p className="mt-2 text-sm">
                <span className="px-2 py-0.5 rounded bg-subtle text-tiny text-ink">
                  {STATUS_LABEL[plan.status] ?? plan.status}
                </span>
              </p>
            </div>
            <div className="p-5 border border-rule rounded-card">
              <p className="text-tiny uppercase tracking-wide text-ink-muted">
                关联教材
              </p>
              {plan.textbookId ? (
                <Link
                  href={`/textbooks/${plan.textbookId}`}
                  className="mt-2 inline-block text-sm text-accent hover:opacity-70"
                >
                  {plan.textbookTitle ?? plan.textbookId} →
                </Link>
              ) : (
                <p className="mt-2 text-sm text-ink-muted">未关联</p>
              )}
            </div>
            <div className="p-5 border border-rule rounded-card">
              <p className="text-tiny uppercase tracking-wide text-ink-muted">
                关联作业
              </p>
              <Link
                href={`/homework?coursePlanId=${plan.id}`}
                className="mt-2 inline-block text-sm text-accent hover:opacity-70"
              >
                {plan.homeworkCount} 份作业 →
              </Link>
            </div>
          </section>

          {/* 章节列表 */}
          <section>
            <h2 className="text-xl font-serif text-ink mb-4">章节列表</h2>
            <div className="rule-thin mb-6" />

            {plan.chapters.length === 0 ? (
              <p className="text-sm text-ink-muted">暂无章节</p>
            ) : (
              <ul className="space-y-4">
                {plan.chapters.map((ch) => (
                  <li
                    key={ch.id}
                    className="p-5 border border-rule rounded-card bg-surface"
                  >
                    <div className="flex items-baseline justify-between mb-2">
                      <h3 className="text-lg font-serif text-ink">
                        {ch.title}
                      </h3>
                      <span className="text-tiny font-mono text-ink-muted">
                        {ch.hours} 学时
                      </span>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3 text-sm">
                      <div>
                        <p className="text-tiny uppercase tracking-wide text-ink-muted mb-1">
                          教学目标
                        </p>
                        <p className="text-ink">{ch.objectives}</p>
                      </div>
                      <div>
                        <p className="text-tiny uppercase tracking-wide text-ink-muted mb-1">
                          重难点
                        </p>
                        <p className="text-ink">{ch.keyPoints}</p>
                      </div>
                      <div>
                        <p className="text-tiny uppercase tracking-wide text-ink-muted mb-1">
                          教学活动
                        </p>
                        <p className="text-ink">{ch.activities}</p>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </section>
        </>
      )}
    </div>
  );
}
