"use client";

import type { PaceReport } from "@/lib/review/sse";
import { BeatMap } from "./BeatMap";

interface PacePanelProps {
  pace: PaceReport | null;
  incomplete: boolean;
}

// 节奏报告区（UX §6.4 ④）：节拍图 ▁▃▅ + 注水段列表 + 章末钩子徽标。只读建议。
export function PacePanel({ pace, incomplete }: PacePanelProps) {
  return (
    <section className="mb-4">
      <h2 className="text-xs font-semibold uppercase tracking-wide text-ink-soft">
        节奏 (pace-checker)
      </h2>
      {incomplete ? (
        <p className="mt-1 text-xs text-overdue">◌ 未完成</p>
      ) : pace === null ? (
        <p className="mt-1 text-xs text-ink-soft">无节奏报告。</p>
      ) : (
        <div className="mt-2 space-y-2 text-xs">
          <div>
            <p className="mb-1 text-ink-soft">爽点节拍图</p>
            <BeatMap beatMap={pace.beat_map} />
          </div>

          <p>
            章末钩子：
            {pace.hook ? (
              <span className="text-pass">✓ 有</span>
            ) : (
              <span className="text-overdue">⚠ 无（建议补悬念）</span>
            )}
          </p>

          {pace.water.length > 0 ? (
            <div>
              <p className="text-overdue">⚠ 注水段</p>
              <ul className="mt-1 space-y-1">
                {pace.water.map((w, i) => (
                  <li key={i} className="text-ink-soft">
                    {w.where}：{w.reason}
                  </li>
                ))}
              </ul>
            </div>
          ) : (
            <p className="text-pass">✓ 无明显注水</p>
          )}
        </div>
      )}
    </section>
  );
}