"use client";

import Image from "next/image";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import BackButton from "@/app/components/BackButton";

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

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 AsrVideosPage() {
  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" | "tagged" | "missingTags"
  >("all");
  const [batchTranscribing, setBatchTranscribing] = useState(false);
  const [batchProgress, setBatchProgress] = useState({ current: 0, total: 0 });

  const fetchVideos = useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetch("/api/admin/asr/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);
    }
  }, []);

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

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

  const hasContentTags = (video: Video) =>
    (video.transcript?.content_tags.length ?? 0) > 0;

  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/asr/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?.transcript?.content_tags.length ?? 0) > 0) {
            return true;
          }
        }
      } catch {
        // 忽略网络错误，继续轮询
      }
      await sleep(intervalMs);
    }
    return false;
  };

  const handleTranscribe = async (awemeId: string) => {
    setTranscribing((prev) => new Set(prev).add(awemeId));
    try {
      const response = await fetch(`/api/asr?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) => !hasContentTags(v));
    if (pendingVideos.length === 0) {
      alert("没有缺失标签的视频");
      return;
    }

    if (
      !confirm(
        `确定要为 ${pendingVideos.length} 个视频生成 ASR 标签吗？这会重新执行识别流程，可能需要较长时间。`,
      )
    ) {
      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/asr?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;
    if (filter === "tagged") return hasContentTags(v);
    if (filter === "missingTags") return !hasContentTags(v);
    return true;
  });

  const stats = {
    total: videos.length,
    transcribed: videos.filter((v) => v.transcript !== null).length,
    pending: videos.filter((v) => v.transcript === null).length,
    tagged: videos.filter((v) => hasContentTags(v)).length,
    missingTags: videos.filter((v) => !hasContentTags(v)).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
              type="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-4 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 className="bg-white rounded-lg shadow p-6">
            <div className="text-sm text-gray-600">已生成标签</div>
            <div className="text-3xl font-bold text-blue-600 mt-2">
              {stats.tagged}
            </div>
            <div className="mt-1 text-xs text-gray-500">
              缺失 {stats.missingTags}
            </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
                type="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
                type="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
                type="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>
              <button
                type="button"
                onClick={() => setFilter("tagged")}
                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                  filter === "tagged"
                    ? "bg-blue-600 text-white"
                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                }`}
              >
                已生成标签 ({stats.tagged})
              </button>
              <button
                type="button"
                onClick={() => setFilter("missingTags")}
                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                  filter === "missingTags"
                    ? "bg-rose-600 text-white"
                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                }`}
              >
                缺标签 ({stats.missingTags})
              </button>
            </div>
            <div className="flex items-center gap-4">
              {batchTranscribing && (
                <div className="text-sm text-gray-600">
                  正在生成: {batchProgress.current} / {batchProgress.total}
                </div>
              )}
              <button
                type="button"
                onClick={handleBatchTranscribe}
                disabled={batchTranscribing || stats.missingTags === 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">
                        <Image
                          src={video.cover_url}
                          alt=""
                          width={80}
                          height={112}
                          unoptimized
                          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.join(" ")}
                            </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>
                          )}
                          {video.transcript.content_tags.length > 0 && (
                            <div className="flex flex-wrap gap-1 pt-1">
                              {video.transcript.content_tags.map((tag) => (
                                <span
                                  key={tag}
                                  className="inline-flex items-center rounded bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700"
                                >
                                  {tag}
                                </span>
                              ))}
                            </div>
                          )}
                          {video.transcript.content_tags.length === 0 && (
                            <span className="inline-flex items-center rounded bg-rose-50 px-2 py-0.5 text-xs font-medium text-rose-700">
                              未生成标签
                            </span>
                          )}
                        </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
                          type="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>
                          ) : video.transcript.content_tags.length === 0 ? (
                            "生成标签"
                          ) : (
                            "重新识别"
                          )}
                        </button>
                      ) : (
                        <button
                          type="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>
  );
}