"use client";

import type { Fingerprint } from "@/lib/style/style";

interface FingerprintViewProps {
  fingerprint: Fingerprint | null;
}

// 文风指纹展示（UX §6.9）：16 维行（维度名 + 值 + 可展开原文证据）。
export function FingerprintView({ fingerprint }: FingerprintViewProps) {
  if (fingerprint === null) {
    return (
      <p className="rounded border border-dashed border-line p-4 text-sm text-ink-soft">
        尚未学习文风。在左侧粘贴样本正文（或选文件）后点「学习文风」。
      </p>
    );
  }

  return (
    <div>
      <div className="mb-3 flex items-center gap-2">
        <h2 className="font-serif text-lg text-ink">文风指纹</h2>
        <span className="font-mono text-xs text-ink-soft">
          v{fingerprint.version} · {fingerprint.dimensions.length} 维
        </span>
      </div>
      {fingerprint.dimensions.length === 0 ? (
        <p className="text-sm text-ink-soft">指纹无维度数据。</p>
      ) : (
        <ul className="space-y-2">
          {fingerprint.dimensions.map((dim) => (
            <li
              key={dim.name}
              className="rounded border border-line bg-panel p-3"
            >
              <div className="flex items-baseline gap-3">
                <span className="w-28 shrink-0 text-sm font-semibold text-ink">
                  {dim.name}
                </span>
                <span className="text-sm text-ink-soft">{dim.value}</span>
              </div>
              {dim.evidence.length > 0 ? (
                <details className="mt-2">
                  <summary className="cursor-pointer text-xs text-ink-soft hover:text-cinnabar">
                    原文证据（{dim.evidence.length}）
                  </summary>
                  <ul className="mt-1 space-y-1 border-l-2 border-line pl-3">
                    {dim.evidence.map((quote, i) => (
                      <li
                        key={i}
                        className="text-xs italic leading-relaxed text-ink-soft"
                      >
                        「{quote}」
                      </li>
                    ))}
                  </ul>
                </details>
              ) : null}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}