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

"use client";

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

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

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

  useEffect(() => {
    return () => {
      if (copyTimerRef.current !== null) clearTimeout(copyTimerRef.current);
      if (copyAllTimerRef.current !== null)
        clearTimeout(copyAllTimerRef.current);
    };
  }, []);

  if (!open) return null;

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

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

  if (!transcript?.transcript?.length) {
    return (
      <div
        className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
        onClick={onClose}
      >
        <div
          className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 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
              type="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>{transcript ? "未识别到文字" : "该视频尚未转写"}</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 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>
          </div>
          <div className="flex items-center gap-2">
            <button
              type="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
              type="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={`transcript-${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
                  type="button"
                  onClick={(e) => {
                    e.stopPropagation();
                    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>
  );
});