"use client";

import { AlertTriangle, CheckCircle2, CircleDashed } from "lucide-react";

import { Badge } from "@/components/ui/Badge";
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 ? (
        <Badge variant="warning" className="mt-1">
          <CircleDashed className="h-3 w-3" aria-hidden="true" />
          未完成
        </Badge>
      ) : 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 ? (
              <Badge variant="success">
                <CheckCircle2 className="h-3 w-3" aria-hidden="true" />
                有
              </Badge>
            ) : (
              <Badge variant="warning">
                <AlertTriangle className="h-3 w-3" aria-hidden="true" />
                无（建议补悬念）
              </Badge>
            )}
          </p>

          {pace.water.length > 0 ? (
            <div>
              <Badge variant="warning">
                <AlertTriangle className="h-3 w-3" aria-hidden="true" />
                注水段
              </Badge>
              <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>
          ) : (
            <Badge variant="success">
              <CheckCircle2 className="h-3 w-3" aria-hidden="true" />
              无明显注水
            </Badge>
          )}
        </div>
      )}
    </section>
  );
}