douyin-archive/app/aweme/[awemeId]/components/TranscriptPanel.tsx

"use client";

import { X, Copy, CheckCheck, Check } from "lucide-react";
import { useState } from "react";
import type { VideoTranscript } from "../types";

interface TranscriptPanelProps {
  open: boolean;
  onClose: () => void;
  transcript: VideoTranscript | null;
}

export function TranscriptPanel({ open, onClose, transcript }: TranscriptPanelProps) {
  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
  const [copiedAll, setCopiedAll] = useState(false);

  if (!open) return null;

  const handleCopy = (text: string, index: number) => {
    navigator.clipboard.writeText(text).then(() => {
      setCopiedIndex(index);
      setTimeout(() => setCopiedIndex(null), 2000);
    });
  };

  const handleCopyAll = () => {
    if (!transcript?.transcript) return;
    const allText = transcript.transcript.join("\n");
    navigator.clipboard.writeText(allText).then(() => {
      setCopiedAll(true);
      setTimeout(() => setCopiedAll(false), 2000);
    });
  };

  if (!transcript?.speech_detected || !transcript.transcript?.length) {
    return (
      <div
        className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      >
        <div
          className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl"
          onClick={(e) => e.stopPropagation()}
        >
          {/* 头部 */}
          <div className="flex items-center justify-between p-4 border-b border-white/10">
            <h2 className="text-lg font-semibold text-white">语音转录</h2>
            <button
              onClick={onClose}
              className="p-2 rounded-full hover:bg-white/10 transition-colors"
              aria-label="关闭"
            >
              <X size={20} className="text-white/80" />
            </button>
          </div>

          {/* 内容 */}
          <div className="p-8 text-center text-white/60">
            <p>该视频暂无语音转录内容</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        {/* 头部 */}
        <div className="flex items-center justify-between p-4 border-b border-white/10 flex-shrink-0">
          <div>
            <h2 className="text-lg font-semibold text-white">语音转录</h2>
            {transcript.language && (
              <p className="text-xs text-white/50 mt-1">
                语言: {transcript.language}
              </p>
            )}
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={handleCopyAll}
              className="flex items-center gap-2 px-3 py-2 text-sm bg-blue-600/20 text-blue-300 rounded-lg hover:bg-blue-600/30 transition-colors"
            >
              {copiedAll ? (
                <>
                  <CheckCheck size={16} />
                  已复制全部
                </>
              ) : (
                <>
                  <Copy size={16} />
                  复制全部
                </>
              )}
            </button>
            <button
              onClick={onClose}
              className="p-2 rounded-full hover:bg-white/10 transition-colors"
              aria-label="关闭"
            >
              <X size={20} className="text-white/80" />
            </button>
          </div>
        </div>

        {/* 转录列表 */}
        <div className="flex-1 overflow-y-auto p-4 space-y-2">
          {transcript.transcript.map((text, index) => (
            <div
              key={index}
              className="group bg-white/5 rounded-lg p-3 hover:bg-white/10 transition-colors cursor-pointer"
              onClick={() => handleCopy(text, index)}
            >
              <div className="flex items-start justify-between gap-3">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-xs font-mono text-blue-400">
                      #{index + 1}
                    </span>
                  </div>
                  <p className="text-sm text-white/90 leading-relaxed break-words">
                    {text}
                  </p>
                </div>
                <button
                  onClick={() => handleCopy(text, index)}
                  className="flex-shrink-0 p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-white/10 transition-all"
                  aria-label="复制"
                >
                  {copiedIndex === index ? (
                    <Check size={16} className="text-green-400" />
                  ) : (
                    <Copy size={16} className="text-white/60" />
                  )}
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* 底部统计 */}
        <div className="flex-shrink-0 p-3 border-t border-white/10 text-center text-xs text-white/50">
          共 {transcript.transcript.length} 段转录内容
        </div>
      </div>
    </div>
  );
}