"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>
      {incomplete ? (
        <Badge variant="warning">
          <CircleDashed className="h-3 w-3" aria-hidden="true" />
          未完成
        </Badge>
      ) : pace === null ? (
        <p className="text-xs text-ink-soft">无节奏报告。</p>
      ) : (
        <div className="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>
  );
}
