// LessonPlanReadonlyView：备课只读详情
// 依据：02-architecture-design.md §15 组件设计
// 内容：教学目标/教学重点/教学难点/教学内容/作业说明（可选）

"use client";

import type { LessonPlanDetail } from "@/types";
import { formatDateTime } from "@/lib/utils";

interface LessonPlanReadonlyViewProps {
  lessonPlan: LessonPlanDetail;
}

function BulletList({
  items,
  emptyText,
}: {
  items: string[];
  emptyText: string;
}): JSX.Element {
  if (items.length === 0) {
    return <p className="text-sm text-ink-muted">{emptyText}</p>;
  }
  return (
    <ul className="space-y-1">
      {items.map((item, idx) => (
        <li key={idx} className="flex gap-2 text-sm">
          <span className="mt-1 h-1 w-1 flex-shrink-0 rounded-full bg-ink-muted" aria-hidden="true" />
          <span>{item}</span>
        </li>
      ))}
    </ul>
  );
}

export function LessonPlanReadonlyView({
  lessonPlan,
}: LessonPlanReadonlyViewProps): JSX.Element {
  return (
    <article className="space-y-6">
      {/* 头部信息 */}
      <section
        aria-label="备课基本信息"
        className="rounded border border-rule bg-paper-elevated p-4"
      >
        <div className="flex items-center gap-2">
          <span className="rounded bg-accent-soft px-2 py-0.5 text-xs text-ink">
            {lessonPlan.subject}
          </span>
          <span className="text-xs text-ink-muted">
            预计 {lessonPlan.estimatedMinutes} 分钟
          </span>
        </div>
        <h2 className="mt-2 font-serif text-xl">{lessonPlan.title}</h2>
        <div className="mt-4 border-t border-rule pt-3">
          <dl className="grid grid-cols-2 gap-y-3 text-sm sm:grid-cols-4">
            <div>
              <dt className="text-xs text-ink-muted">班级</dt>
              <dd className="mt-1">{lessonPlan.className}</dd>
            </div>
            <div>
              <dt className="text-xs text-ink-muted">教师</dt>
              <dd className="mt-1">{lessonPlan.teacherName}</dd>
            </div>
            <div>
              <dt className="text-xs text-ink-muted">教材</dt>
              <dd className="mt-1">{lessonPlan.textbookTitle}</dd>
            </div>
            <div>
              <dt className="text-xs text-ink-muted">章节</dt>
              <dd className="mt-1">{lessonPlan.chapterTitle}</dd>
            </div>
            {lessonPlan.publishedAt && (
              <div>
                <dt className="text-xs text-ink-muted">发布时间</dt>
                <dd className="mt-1">{formatDateTime(lessonPlan.publishedAt)}</dd>
              </div>
            )}
          </dl>
        </div>
      </section>

      {/* 教学目标 */}
      <section aria-label="教学目标" className="space-y-2">
        <h3 className="font-serif text-base">教学目标</h3>
        <div className="rounded border border-rule bg-paper-elevated p-4">
          <BulletList items={lessonPlan.objectives} emptyText="暂无教学目标" />
        </div>
      </section>

      {/* 教学重点 */}
      <section aria-label="教学重点" className="space-y-2">
        <h3 className="font-serif text-base">教学重点</h3>
        <div className="rounded border border-rule bg-paper-elevated p-4">
          <BulletList items={lessonPlan.keyPoints} emptyText="暂无教学重点" />
        </div>
      </section>

      {/* 教学难点 */}
      <section aria-label="教学难点" className="space-y-2">
        <h3 className="font-serif text-base">教学难点</h3>
        <div className="rounded border border-rule bg-paper-elevated p-4">
          <BulletList
            items={lessonPlan.difficultPoints}
            emptyText="暂无教学难点"
          />
        </div>
      </section>

      {/* 教学内容 */}
      <section aria-label="教学内容" className="space-y-2">
        <h3 className="font-serif text-base">教学内容</h3>
        <div className="rounded border border-rule bg-paper-elevated p-4">
          <p className="text-sm leading-relaxed">{lessonPlan.content}</p>
        </div>
      </section>

      {/* 作业说明（可选） */}
      {lessonPlan.homeworkDescription && (
        <section aria-label="作业说明" className="space-y-2">
          <h3 className="font-serif text-base">作业说明</h3>
          <div className="rounded border border-rule bg-paper-elevated p-4">
            <p className="text-sm leading-relaxed">
              {lessonPlan.homeworkDescription}
            </p>
          </div>
        </section>
      )}
    </article>
  );
}

export default LessonPlanReadonlyView;
