"use client";

/**
 * LessonPlans — 课案列表（批次 A）
 *
 * 数据源：useMyLessonPlans
 * 视图：已发布课案列表（学科/章节/教师/发布时间）
 */

import Link from "next/link";
import { useMyLessonPlans } from "@/lib/graphql/hooks";

export default function LessonPlansPage(): JSX.Element {
  const { data, fetching, error, reexecute } = useMyLessonPlans();
  const plans = data ?? [];

  return (
    <div className="px-6 lg:px-10 py-8 lg:py-10 max-w-5xl mx-auto">
      <header className="mb-6">
        <p className="text-xs uppercase tracking-wider" style={{ color: "var(--color-ink-muted)" }}>
          课前预习
        </p>
        <h1 className="mt-2 text-3xl lg:text-4xl font-serif" style={{ color: "var(--color-ink)" }}>
          课案查看
        </h1>
        <p className="mt-2 text-sm" style={{ color: "var(--color-ink-muted)" }}>
          查看老师发布的课案，提前了解教学目标与重点。
        </p>
      </header>

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

      {fetching ? (
        <LoadingSkeleton />
      ) : error ? (
        <ErrorState message={error.message} onRetry={() => reexecute()} />
      ) : plans.length === 0 ? (
        <EmptyState />
      ) : (
        <ul className="space-y-3">
          {plans.map((p) => (
            <li key={p.id}>
              <Link href={`/lesson-plans/${p.id}/view`} className="block">
                <article className="card-paper p-4 transition-opacity hover:opacity-80">
                  <div className="flex items-start justify-between gap-4 mb-1">
                    <div className="flex items-center gap-2">
                      {p.subjectName && <span className="badge badge-info">{p.subjectName}</span>}
                      {p.gradeName && (
                        <span className="text-xs" style={{ color: "var(--color-ink-muted)" }}>
                          {p.gradeName}
                        </span>
                      )}
                    </div>
                    <span className="text-xs" style={{ color: "var(--color-ink-muted)" }}>
                      {p.publishedAt ? new Date(p.publishedAt).toLocaleDateString("zh-CN") : "—"}
                    </span>
                  </div>
                  <p className="text-sm font-medium" style={{ color: "var(--color-ink)" }}>
                    {p.title}
                  </p>
                  {p.chapterTitle && (
                    <p className="mt-1 text-xs" style={{ color: "var(--color-ink-muted)" }}>
                      章节：{p.chapterTitle}
                    </p>
                  )}
                  <p className="mt-1 text-xs" style={{ color: "var(--color-ink-subtle)" }}>
                    授课教师：{p.creatorName ?? "—"}
                  </p>
                </article>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function LoadingSkeleton(): JSX.Element {
  return (
    <div className="space-y-3" aria-busy="true" aria-live="polite">
      {[0, 1, 2, 3].map((i) => (
        <div
          key={i}
          className="h-20 animate-pulse rounded-sm"
          style={{ background: "var(--color-rule)", opacity: 0.3 }}
        />
      ))}
      <span className="sr-only">正在加载课案...</span>
    </div>
  );
}

function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }): JSX.Element {
  return (
    <div role="alert" className="card-paper p-8 text-center" style={{ borderColor: "var(--color-danger)" }}>
      <p className="text-base font-serif" style={{ color: "var(--color-danger)" }}>
        课案加载失败
      </p>
      <p className="mt-2 text-sm" style={{ color: "var(--color-ink-muted)" }}>
        {message}
      </p>
      <button type="button" onClick={onRetry} className="mt-4 btn-secondary text-xs">
        重新加载
      </button>
    </div>
  );
}

function EmptyState(): JSX.Element {
  return (
    <div className="card-paper p-8 text-center">
      <p className="text-4xl font-serif" style={{ color: "var(--color-ink-subtle)" }} aria-hidden="true">
        ◇
      </p>
      <p className="mt-4 text-base font-serif" style={{ color: "var(--color-ink)" }}>
        暂无课案
      </p>
      <p className="mt-2 text-sm" style={{ color: "var(--color-ink-muted)" }}>
        老师发布课案后将在此显示。
      </p>
    </div>
  );
}
