"use client";

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

import { Badge } from "@/components/ui/Badge";
import { Button } from "@/components/ui/Button";
import { cardClass } from "@/lib/ui/variants";
import type { StyleDriftReport, StyleDriftSegment } from "@/lib/review/sse";

interface StylePanelProps {
  style: StyleDriftReport | null;
  incomplete: boolean;
  // 选中段做回炉（打开 RefineView）。
  onRefine: (segment: StyleDriftSegment) => void;
}

// 整体相似度的四分圆字符档（◔◑◕●），按 score 映射（UX §6.4 ③）。
const QUARTER_CHARS = ["○", "◔", "◑", "◕", "●"] as const;

function quarterChar(score: number): string {
  const clamped = Math.min(100, Math.max(0, score));
  const idx = Math.round((clamped / 100) * (QUARTER_CHARS.length - 1));
  return QUARTER_CHARS[idx] ?? QUARTER_CHARS[0];
}

// 文风审区（UX §6.4 ③）：整体相似度 ◔% + 漂移段列表，每段可一键回炉。只读建议。
export function StylePanel({ style, incomplete, onRefine }: StylePanelProps) {
  return (
    <section className="mb-4">
      <h2 className="text-xs font-semibold uppercase tracking-wide text-ink-soft">
        文风 (style-auditor)
      </h2>
      {incomplete ? (
        <Badge variant="warning" className="mt-1">
          <CircleDashed className="h-3 w-3" aria-hidden="true" />
          未完成
        </Badge>
      ) : style === null ? (
        <p className="mt-1 text-xs text-ink-soft">
          无文风报告（学文风后第四审才能打分）。
        </p>
      ) : (
        <div className="mt-2 space-y-2 text-xs">
          <p
            className="flex items-center gap-1.5"
            aria-label={`整体文风相似度 ${style.score}%`}
            role="img"
          >
            <span className="text-lg leading-none text-cinnabar" aria-hidden="true">
              {quarterChar(style.score)}
            </span>
            <span className="text-ink">
              整体相似度 <span className="font-mono">{style.score}%</span>
            </span>
          </p>

          {style.segments.length === 0 ? (
            <Badge variant="success">
              <CheckCircle2 className="h-3 w-3" aria-hidden="true" />
              无明显文风漂移
            </Badge>
          ) : (
            <ul className="space-y-2">
              {style.segments.map((seg, i) => (
                <li
                  key={i}
                  className={cardClass("p-2")}
                  data-testid="drift-segment"
                >
                  <div className="flex items-center gap-2">
                    <Badge variant="warning" className="font-mono">
                      第 {seg.idx} 段
                    </Badge>
                    <span className="font-mono text-ink-soft">
                      相似 {seg.score}%
                    </span>
                    {seg.label ? (
                      <span className="text-ink-soft">{seg.label}</span>
                    ) : null}
                  </div>
                  <div className="mt-1.5 flex gap-2">
                    <Button
                      onClick={() => onRefine(seg)}
                      variant="primary"
                      size="sm"
                    >
                      <RotateCcw className="h-4 w-4" aria-hidden="true" />
                      一键回炉
                    </Button>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </section>
  );
}