"use client";

/**
 * LessonPlanDetail — 课案详情（只读视图）（批次 A）
 *
 * 数据源：useLessonPlanDetail
 */

import Link from "next/link";
import { useParams } from "next/navigation";
import { useLessonPlanDetail } from "@/lib/graphql/hooks";

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

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

  if (fetching) {
    return (
      <div className="px-6 lg:px-10 py-8 max-w-3xl 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-3xl 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-3xl mx-auto">
        <div className="card-paper p-8 text-center">
          <p className="text-base font-serif" style={{ color: "var(--color-ink)" }}>
            未找到该课案
          </p>
          <Link href="/lesson-plans" className="mt-4 inline-block btn-secondary text-xs">
            返回课案列表
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="px-6 lg:px-10 py-8 lg:py-10 max-w-3xl mx-auto">
      <Link href="/lesson-plans" className="text-xs" style={{ color: "var(--color-ink-muted)" }}>
        ← 返回课案列表
      </Link>

      <article className="mt-4">
        <header className="mb-6">
          <div className="flex items-center gap-2 mb-2">
            {data.subjectName && <span className="badge badge-info">{data.subjectName}</span>}
            {data.gradeName && (
              <span className="text-xs" style={{ color: "var(--color-ink-muted)" }}>
                {data.gradeName}
              </span>
            )}
          </div>
          <h1 className="text-2xl lg:text-3xl font-serif" style={{ color: "var(--color-ink)" }}>
            {data.title}
          </h1>
          <div className="mt-3 flex items-center gap-4 text-xs" style={{ color: "var(--color-ink-muted)" }}>
            <span>授课教师：{data.creatorName ?? "—"}</span>
            {data.chapterTitle && <span>章节：{data.chapterTitle}</span>}
            {data.publishedAt && (
              <span>发布：{new Date(data.publishedAt).toLocaleDateString("zh-CN")}</span>
            )}
          </div>
        </header>

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

        <div className="space-y-6">
          {data.content.objectives && (
            <Section title="教学目标">
              <p className="text-sm leading-relaxed whitespace-pre-wrap" style={{ color: "var(--color-ink)" }}>
                {data.content.objectives}
              </p>
            </Section>
          )}

          {data.content.keyPoints && (
            <Section title="重点难点">
              <p className="text-sm leading-relaxed whitespace-pre-wrap" style={{ color: "var(--color-ink)" }}>
                {data.content.keyPoints}
              </p>
            </Section>
          )}

          {data.content.summary && (
            <Section title="课堂小结">
              <p className="text-sm leading-relaxed whitespace-pre-wrap" style={{ color: "var(--color-ink)" }}>
                {data.content.summary}
              </p>
            </Section>
          )}

          {data.content.homework && (
            <Section title="课后作业">
              <p className="text-sm leading-relaxed whitespace-pre-wrap" style={{ color: "var(--color-ink)" }}>
                {data.content.homework}
              </p>
            </Section>
          )}

          {data.content.blackboard && (
            <Section title="板书设计">
              <p className="text-sm leading-relaxed whitespace-pre-wrap" style={{ color: "var(--color-ink)" }}>
                {data.content.blackboard}
              </p>
            </Section>
          )}
        </div>
      </article>
    </div>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }): JSX.Element {
  return (
    <section>
      <h2 className="text-sm uppercase tracking-wider mb-2" style={{ color: "var(--color-ink-muted)" }}>
        {title}
      </h2>
      <div className="card-paper p-4">{children}</div>
    </section>
  );
}
