'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import BackButton from '@/app/components/BackButton';

type VideoTranscript = {
  id: string;
  speech_detected: boolean;
  language: string | null;
  audio_type: string | null;
  transcript: string | null;
  non_speech_summary: string | null;
};

type Video = {
  aweme_id: string;
  desc: string;
  cover_url: string;
  duration_ms: number;
  author: {
    nickname: string;
  };
  transcript: VideoTranscript | null;
};

type ApiResponse = {
  videos: Video[];
  total: number;
};

export default function SttVideosPage() {
  const [videos, setVideos] = useState<Video[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [transcribing, setTranscribing] = useState<Set<string>>(new Set());
  const [filter, setFilter] = useState<'all' | 'transcribed' | 'pending'>('all');
  const [batchTranscribing, setBatchTranscribing] = useState(false);
  const [batchProgress, setBatchProgress] = useState({ current: 0, total: 0 });

  useEffect(() => {
    fetchVideos();
  }, []);

  const fetchVideos = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/admin/stt/videos');
      if (!response.ok) {
        throw new Error('Failed to fetch videos');
      }
      const data: ApiResponse = await response.json();
      setVideos(data.videos);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  };

  // 简单的 sleep 工具
  const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

  type PollOptions = {
    intervalMs?: number;
    maxAttempts?: number;
  };

  // 轮询某个视频的转写状态直至完成或超时
  const pollVideoUntilTranscribed = async (
    awemeId: string,
    { intervalMs = 2000, maxAttempts = 30 }: PollOptions = {}
  ): Promise<boolean> => {
    for (let attempt = 0; attempt < maxAttempts; attempt++) {
      try {
        const resp = await fetch('/api/admin/stt/videos');
        if (resp.ok) {
          const data: ApiResponse = await resp.json();
          setVideos(data.videos);
          const v = data.videos.find((x) => x.aweme_id === awemeId);
          if (v && v.transcript) {
            return true;
          }
        }
      } catch (e) {
        // 忽略网络错误，继续轮询
      }
      await sleep(intervalMs);
    }
    return false;
  };

  const handleTranscribe = async (awemeId: string) => {
    setTranscribing(prev => new Set(prev).add(awemeId));
    try {
      const response = await fetch(`/api/stt?awemeId=${awemeId}`);
      if (!response.ok) {
        throw new Error('Failed to transcribe video');
      }
      // 轮询直到该视频转写完成或超时，避免后端异步导致立即刷新拿不到最新状态
      const done = await pollVideoUntilTranscribed(awemeId);
      if (!done) {
        // 兜底刷新一次
        await fetchVideos();
      }
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Transcription failed');
    } finally {
      setTranscribing(prev => {
        const next = new Set(prev);
        next.delete(awemeId);
        return next;
      });
    }
  };

  const handleBatchTranscribe = async () => {
    const pendingVideos = videos.filter(v => v.transcript === null);
    if (pendingVideos.length === 0) {
      alert('没有待转写的视频');
      return;
    }

    if (!confirm(`确定要转写 ${pendingVideos.length} 个视频吗？这可能需要较长时间。`)) {
      return;
    }

    setBatchTranscribing(true);
    setBatchProgress({ current: 0, total: pendingVideos.length });

    const pollers: Promise<boolean>[] = [];
    for (let i = 0; i < pendingVideos.length; i++) {
      const video = pendingVideos[i];
      setBatchProgress({ current: i + 1, total: pendingVideos.length });
      setTranscribing(prev => new Set(prev).add(video.aweme_id));

      try {
        const response = await fetch(`/api/stt?awemeId=${video.aweme_id}`);
        if (!response.ok) {
          console.error(`Failed to transcribe video ${video.aweme_id}`);
        }
        // 为该视频启动后台轮询，不阻塞批处理的顺序执行
        const p = pollVideoUntilTranscribed(video.aweme_id).finally(() => {
          setTranscribing(prev => {
            const next = new Set(prev);
            next.delete(video.aweme_id);
            return next;
          });
        });
        pollers.push(p);
      } catch (err) {
        console.error(`Error transcribing video ${video.aweme_id}:`, err);
      }
    }

    // 等待所有轮询结束（完成或超时），再进行最终刷新
    if (pollers.length > 0) {
      await Promise.allSettled(pollers);
    }
    await fetchVideos();
    setBatchTranscribing(false);
    setBatchProgress({ current: 0, total: 0 });
    alert('批量转写完成！');
  };

  const filteredVideos = videos.filter(v => {
    if (filter === 'transcribed') return v.transcript !== null;
    if (filter === 'pending') return v.transcript === null;
    return true;
  });

  const stats = {
    total: videos.length,
    transcribed: videos.filter(v => v.transcript !== null).length,
    pending: videos.filter(v => v.transcript === null).length,
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 p-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center py-12">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
            <p className="mt-4 text-gray-600">加载中...</p>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gray-50 p-8">
        <div className="max-w-7xl mx-auto">
          <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
            <p className="text-red-600">错误: {error}</p>
            <button
              onClick={fetchVideos}
              className="mt-4 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
            >
              重试
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto p-8">
        {/* Header */}
        <div className="mb-8">
          <BackButton />
          <h1 className="text-3xl font-bold text-gray-900 mt-4">视频转写管理</h1>
          <p className="text-gray-600 mt-2">管理视频的语音转写状态</p>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div className="bg-white rounded-lg shadow p-6">
            <div className="text-sm text-gray-600">总视频数</div>
            <div className="text-3xl font-bold text-gray-900 mt-2">{stats.total}</div>
          </div>
          <div className="bg-white rounded-lg shadow p-6">
            <div className="text-sm text-gray-600">已转写</div>
            <div className="text-3xl font-bold text-green-600 mt-2">{stats.transcribed}</div>
          </div>
          <div className="bg-white rounded-lg shadow p-6">
            <div className="text-sm text-gray-600">待转写</div>
            <div className="text-3xl font-bold text-orange-600 mt-2">{stats.pending}</div>
          </div>
        </div>

        {/* Filter */}
        <div className="bg-white rounded-lg shadow p-4 mb-6">
          <div className="flex items-center justify-between">
            <div className="flex gap-4">
              <button
                onClick={() => setFilter('all')}
                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                  filter === 'all'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                全部 ({stats.total})
              </button>
              <button
                onClick={() => setFilter('transcribed')}
                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                  filter === 'transcribed'
                    ? 'bg-green-600 text-white'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                已转写 ({stats.transcribed})
              </button>
              <button
                onClick={() => setFilter('pending')}
                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                  filter === 'pending'
                    ? 'bg-orange-600 text-white'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                待转写 ({stats.pending})
              </button>
            </div>
            <div className="flex items-center gap-4">
              {batchTranscribing && (
                <div className="text-sm text-gray-600">
                  正在转写: {batchProgress.current} / {batchProgress.total}
                </div>
              )}
              <button
                onClick={handleBatchTranscribe}
                disabled={batchTranscribing || stats.pending === 0}
                className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
              >
                {batchTranscribing ? (
                  <span className="flex items-center gap-2">
                    <span className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></span>
                    批量转写中...
                  </span>
                ) : (
                  '全部转写'
                )}
              </button>
            </div>
          </div>
        </div>

        {/* Video List */}
        <div className="bg-white rounded-lg shadow overflow-hidden">
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    视频
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    时长
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    转写状态
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {filteredVideos.map((video) => (
                  <tr key={video.aweme_id} className="hover:bg-gray-50">
                    <td className="px-6 py-4">
                      <div className="flex items-center gap-4">
                        <img
                          src={video.cover_url}
                          alt=""
                          className="w-20 h-28 object-cover rounded"
                        />
                        <div className="flex-1 min-w-0">
                          <Link
                            href={`/aweme/${video.aweme_id}`}
                            className="text-sm font-medium text-blue-600 hover:text-blue-800 line-clamp-2"
                          >
                            {video.desc || '无描述'}
                          </Link>
                          <p className="text-sm text-gray-500 mt-1">
                            @{video.author.nickname}
                          </p>
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {Math.floor(video.duration_ms / 1000)}s
                    </td>
                    <td className="px-6 py-4">
                      {video.transcript ? (
                        <div className="space-y-1">
                          <div className="flex items-center gap-2">
                            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                              已转写
                            </span>
                            {video.transcript.language && (
                              <span className="text-xs text-gray-500">
                                {video.transcript.language}
                              </span>
                            )}
                          </div>
                          {video.transcript.speech_detected ? (
                            <div className="text-xs text-gray-600 line-clamp-5 max-w-md">
                              {video.transcript.transcript}
                            </div>
                          ) : (
                            <div className="text-xs text-gray-500">
                              <span className="font-medium">
                                {video.transcript.audio_type || '非语音'}
                              </span>
                              {video.transcript.non_speech_summary && (
                                <span className="ml-1">
                                  - {video.transcript.non_speech_summary}
                                </span>
                              )}
                            </div>
                          )}
                        </div>
                      ) : (
                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                          待转写
                        </span>
                      )}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      {video.transcript ? (
                        <button
                          onClick={() => handleTranscribe(video.aweme_id)}
                          disabled={transcribing.has(video.aweme_id)}
                          className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
                        >
                          {transcribing.has(video.aweme_id) ? (
                            <span className="flex items-center gap-2">
                              <span className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></span>
                              重新转写...
                            </span>
                          ) : (
                            '重新转写'
                          )}
                        </button>
                      ) : (
                        <button
                          onClick={() => handleTranscribe(video.aweme_id)}
                          disabled={transcribing.has(video.aweme_id)}
                          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed transition-colors"
                        >
                          {transcribing.has(video.aweme_id) ? (
                            <span className="flex items-center gap-2">
                              <span className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></span>
                              转写中...
                            </span>
                          ) : (
                            '开始转写'
                          )}
                        </button>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {filteredVideos.length === 0 && (
            <div className="text-center py-12 text-gray-500">
              没有找到视频
            </div>
          )}
        </div>
      </div>
    </div>
  );
}