"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;
  content_tags: string[];
  manual_content_tags: string[];
  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,
    completed: 0,
    failed: 0,
    currentAwemeId: null as string | null,
    currentDesc: null as string | null,
  });
  const [batchMessage, setBatchMessage] = useState<string | null>(null);

  const fetchVideos = useCallback(async (showLoading = true) => {
    try {
      if (showLoading) 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 {
      if (showLoading) setLoading(false);
    }
  }, []);

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

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

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

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

  // 轮询某个视频的识别和标签状态直至完成或超时
  const pollVideoUntilTranscribed = async (
    awemeId: string,
    { intervalMs = 2000, maxAttempts = 300 }: 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?.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=${encodeURIComponent(awemeId)}&async=1`,
      );
      if (!response.ok) {
        throw new Error("Failed to transcribe video");
      }
      // 轮询直到该视频转写完成或超时，避免后端异步导致立即刷新拿不到最新状态
      const done = await pollVideoUntilTranscribed(awemeId);
      if (!done) {
        // 兜底刷新一次
        await fetchVideos(false);
      }
    } 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);
    setBatchMessage(null);
    setBatchProgress({
      current: 0,
      total: pendingVideos.length,
      completed: 0,
      failed: 0,
      currentAwemeId: null,
      currentDesc: null,
    });

    for (let i = 0; i < pendingVideos.length; i++) {
      const video = pendingVideos[i];
      setBatchProgress((prev) => ({
        ...prev,
        current: i + 1,
        currentAwemeId: video.aweme_id,
        currentDesc: video.desc || "无描述",
      }));
      setTranscribing((prev) => new Set(prev).add(video.aweme_id));

      try {
        const response = await fetch(
          `/api/asr?awemeId=${encodeURIComponent(video.aweme_id)}&async=1`,
        );
        if (!response.ok) {
          throw new Error(`Failed to start ASR for ${video.aweme_id}`);
        }

        const done = await pollVideoUntilTranscribed(video.aweme_id);
        setBatchProgress((prev) => ({
          ...prev,
          completed: done ? prev.completed + 1 : prev.completed,
          failed: done ? prev.failed : prev.failed + 1,
        }));
      } catch (err) {
        console.error(`Error transcribing video ${video.aweme_id}:`, err);
        setBatchProgress((prev) => ({
          ...prev,
          failed: prev.failed + 1,
        }));
      } finally {
        setTranscribing((prev) => {
          const next = new Set(prev);
          next.delete(video.aweme_id);
          return next;
        });
      }
    }

    await fetchVideos(false);
    setBatchTranscribing(false);
    setBatchMessage("缺失标签生成流程已结束");
  };

  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,
  };
  const processedCount = batchProgress.completed + batchProgress.failed;
  const progressPercent =
    batchProgress.total > 0
      ? Math.round((processedCount / batchProgress.total) * 100)
      : 0;

  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="mb-6 rounded-lg bg-white p-4 shadow">
          <div className="space-y-4">
            <div className="flex flex-wrap items-center justify-between gap-4">
              <div className="flex flex-wrap gap-3">
                <button
                  type="button"
                  onClick={() => setFilter("all")}
                  className={`rounded-lg px-4 py-2 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={`rounded-lg px-4 py-2 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={`rounded-lg px-4 py-2 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={`rounded-lg px-4 py-2 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={`rounded-lg px-4 py-2 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="rounded-lg bg-purple-600 px-6 py-2 font-medium text-white transition-colors hover:bg-purple-700 disabled:cursor-not-allowed disabled:bg-gray-400"
                >
                  {batchTranscribing ? (
                    <span className="flex items-center gap-2">
                      <span className="inline-block h-4 w-4 animate-spin rounded-full border-b-2 border-white" />
                      生成中...
                    </span>
                  ) : (
                    `一键生成缺失标签 (${stats.missingTags})`
                  )}
                </button>
              </div>
            </div>

            {(batchTranscribing || batchMessage) && (
              <div className="rounded-lg border border-blue-100 bg-blue-50 p-4">
                <div className="mb-2 flex items-center justify-between gap-3 text-sm">
                  <span className="font-medium text-blue-900">
                    {batchTranscribing ? "正在生成缺失标签" : batchMessage}
                  </span>
                  <span className="text-blue-700">
                    {processedCount} / {batchProgress.total}
                  </span>
                </div>
                <div className="h-2 overflow-hidden rounded-full bg-blue-100">
                  <div
                    className="h-full rounded-full bg-blue-600 transition-all"
                    style={{ width: `${progressPercent}%` }}
                  />
                </div>
                <div className="mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-blue-800">
                  <span>
                    已完成 {batchProgress.completed}，失败/超时{" "}
                    {batchProgress.failed}
                  </span>
                  {batchTranscribing && batchProgress.currentAwemeId && (
                    <span className="max-w-xl truncate">
                      当前: {batchProgress.currentDesc} (
                      {batchProgress.currentAwemeId})
                    </span>
                  )}
                </div>
              </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.content_tags.length > 0 && (
                            <div className="flex flex-wrap gap-1 pt-1">
                              {video.content_tags.map((tag) => (
                                <span
                                  key={tag}
                                  className={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${
                                    video.manual_content_tags.includes(tag)
                                      ? "bg-purple-50 text-purple-700"
                                      : "bg-blue-50 text-blue-700"
                                  }`}
                                >
                                  {tag}
                                </span>
                              ))}
                            </div>
                          )}
                          {video.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>
                      ) : (
                        <div className="space-y-2">
                          <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>
                          {video.content_tags.length > 0 && (
                            <div className="flex flex-wrap gap-1">
                              {video.content_tags.map((tag) => (
                                <span
                                  key={tag}
                                  className="inline-flex items-center rounded bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700"
                                >
                                  {tag}
                                </span>
                              ))}
                            </div>
                          )}
                        </div>
                      )}
                    </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>
                          ) : !hasContentTags(video) ? (
                            "生成标签"
                          ) : (
                            "重新识别"
                          )}
                        </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>
  );
}