MoonTVPlus/src/components/CorrectDialog.tsx

/* eslint-disable @typescript-eslint/no-explicit-any, no-console */

'use client';

import { Search, X } from 'lucide-react';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

import { getTMDBImageUrl } from '@/lib/tmdb.search';
import { processImageUrl } from '@/lib/utils';

interface TMDBResult {
  id: number;
  title?: string;
  name?: string;
  poster_path: string | null;
  release_date?: string;
  first_air_date?: string;
  overview: string;
  vote_average: number;
  media_type: 'movie' | 'tv';
}

interface TMDBSeason {
  id: number;
  name: string;
  season_number: number;
  episode_count: number;
  air_date: string | null;
  poster_path: string | null;
  overview: string;
}

interface CorrectDialogProps {
  isOpen: boolean;
  onClose: () => void;
  videoKey: string;
  currentTitle: string;
  currentVideo?: {
    tmdbId?: number;
    doubanId?: string;
    poster?: string;
    releaseDate?: string;
    overview?: string;
    voteAverage?: number;
    mediaType?: 'movie' | 'tv';
    seasonNumber?: number;
    seasonName?: string;
  };
  onCorrect: () => void;
}

export default function CorrectDialog({
  isOpen,
  onClose,
  videoKey,
  currentTitle,
  currentVideo,
  onCorrect,
}: CorrectDialogProps) {
  const [searchQuery, setSearchQuery] = useState(currentTitle);
  const [searching, setSearching] = useState(false);
  const [results, setResults] = useState<TMDBResult[]>([]);
  const [error, setError] = useState('');
  const [correcting, setCorrecting] = useState(false);

  // 季度选择相关状态
  const [selectedResult, setSelectedResult] = useState<TMDBResult | null>(null);
  const [seasons, setSeasons] = useState<TMDBSeason[]>([]);
  const [loadingSeasons, setLoadingSeasons] = useState(false);
  const [showSeasonSelection, setShowSeasonSelection] = useState(false);

  // 手动输入相关状态
  const [showManualInput, setShowManualInput] = useState(false);
  const [manualData, setManualData] = useState({
    title: '',
    tmdbId: '',
    doubanId: '',
    posterPath: '',
    releaseDate: '',
    overview: '',
    voteAverage: '',
    mediaType: 'movie' as 'movie' | 'tv',
    seasonNumber: '',
    seasonName: '',
  });

  useEffect(() => {
    if (isOpen) {
      setSearchQuery(currentTitle);
      setResults([]);
      setError('');
      setSelectedResult(null);
      setSeasons([]);
      setShowSeasonSelection(false);
      setShowManualInput(false);
      // 不要在这里重置 manualData，因为它会在 handleShowManualInput 中被设置
    }
  }, [isOpen, currentTitle]);

  // 当切换到手动输入模式时,自动填充数据
  useEffect(() => {
    if (showManualInput && isOpen) {
      const newManualData = {
        title: currentTitle,
        tmdbId: currentVideo?.tmdbId ? String(currentVideo.tmdbId) : '',
        doubanId: currentVideo?.doubanId || '',
        posterPath: currentVideo?.poster || '',
        releaseDate: currentVideo?.releaseDate || '',
        overview: currentVideo?.overview || '',
        voteAverage: currentVideo?.voteAverage ? String(currentVideo.voteAverage) : '',
        mediaType: currentVideo?.mediaType || 'movie',
        seasonNumber: currentVideo?.seasonNumber ? String(currentVideo.seasonNumber) : '',
        seasonName: currentVideo?.seasonName || '',
      };

      setManualData(newManualData);
    }
  }, [showManualInput, isOpen, currentVideo, currentTitle]);

  const handleSearch = async () => {
    if (!searchQuery.trim()) {
      setError('请输入搜索关键词');
      return;
    }

    setSearching(true);
    setError('');
    setResults([]);
    setShowSeasonSelection(false);
    setSelectedResult(null);

    try {
      const response = await fetch(
        `/api/tmdb/search?query=${encodeURIComponent(searchQuery)}`
      );

      if (!response.ok) {
        throw new Error('搜索失败');
      }

      const data = await response.json();

      if (data.success && data.results) {
        setResults(data.results);
        if (data.results.length === 0) {
          setError('未找到匹配的结果');
        }
      } else {
        setError('搜索失败');
      }
    } catch (err) {
      console.error('搜索失败:', err);
      setError('搜索失败，请重试');
    } finally {
      setSearching(false);
    }
  };

  // 获取电视剧的季度列表
  const fetchSeasons = async (tvId: number) => {
    setLoadingSeasons(true);
    setError('');
    try {
      const response = await fetch(`/api/tmdb/seasons?tvId=${tvId}`);

      if (!response.ok) {
        throw new Error('获取季度列表失败');
      }

      const data = await response.json();

      if (data.success && data.seasons) {
        return data.seasons as TMDBSeason[];
      } else {
        setError('获取季度列表失败');
        return [];
      }
    } catch (err) {
      console.error('获取季度列表失败:', err);
      setError('获取季度列表失败，请重试');
      return [];
    } finally {
      setLoadingSeasons(false);
    }
  };

  // 处理选择结果（电影直接纠错，电视剧显示季度选择）
  const handleSelectResult = async (result: TMDBResult) => {
    if (result.media_type === 'tv') {
      // 电视剧：先获取季度列表
      setSelectedResult(result);
      const seasonsList = await fetchSeasons(result.id);

      if (seasonsList.length === 1) {
        // 只有一季，直接使用该季度进行纠错
        await handleCorrect(result, seasonsList[0]);
      } else if (seasonsList.length > 1) {
        // 多季，显示选择界面
        setSeasons(seasonsList);
        setShowSeasonSelection(true);
      } else {
        // 没有季度信息，直接使用剧集信息
        await handleCorrect(result);
      }
    } else {
      // 电影：直接纠错
      await handleCorrect(result);
    }
  };

  // 处理选择季度
  const handleSelectSeason = async (season: TMDBSeason) => {
    if (!selectedResult) return;

    await handleCorrect(selectedResult, season);
  };

  // 执行纠错
  const handleCorrect = async (result: TMDBResult, season?: TMDBSeason) => {
    setCorrecting(true);
    try {
      // 构建标题和ID：如果是第二季及以后，在标题后加上季度名称，并使用季度ID
      let finalTitle = result.title || result.name;
      let finalTmdbId = result.id;

      if (season && season.season_number > 1) {
        finalTitle = `${finalTitle} ${season.name}`;
      }

      const body: any = {
        key: videoKey,
        tmdbId: finalTmdbId,
        title: finalTitle,
        posterPath: season?.poster_path || result.poster_path,
        releaseDate: season?.air_date || result.release_date || result.first_air_date,
        overview: season?.overview || result.overview,
        voteAverage: result.vote_average,
        mediaType: result.media_type,
      };

      // 如果有季度信息，添加到请求中
      if (season) {
        body.seasonNumber = season.season_number;
        body.seasonName = season.name;
      }

      const response = await fetch('/api/openlist/correct', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });

      if (!response.ok) {
        throw new Error('纠错失败');
      }

      onCorrect();
      onClose();
    } catch (err) {
      console.error('纠错失败:', err);
      setError('纠错失败，请重试');
    } finally {
      setCorrecting(false);
    }
  };

  // 返回搜索结果列表
  const handleBackToResults = () => {
    setShowSeasonSelection(false);
    setSelectedResult(null);
    setSeasons([]);
  };

  // 切换到手动输入模式
  const handleShowManualInput = () => {
    setShowManualInput(true);
    setShowSeasonSelection(false);
    setResults([]);
  };

  // 返回搜索模式
  const handleBackToSearch = () => {
    setShowManualInput(false);
  };

  // 处理手动提交
  const handleManualSubmit = async () => {
    // 验证必填字段
    if (!manualData.title.trim()) {
      setError('请输入影片标题');
      return;
    }

    // 如果提供了 TMDB ID，验证其格式
    if (manualData.tmdbId.trim() && isNaN(Number(manualData.tmdbId))) {
      setError('TMDB ID 必须是数字');
      return;
    }

    if (manualData.voteAverage && (isNaN(Number(manualData.voteAverage)) || Number(manualData.voteAverage) < 0 || Number(manualData.voteAverage) > 10)) {
      setError('评分必须是 0-10 之间的数字');
      return;
    }

    if (manualData.mediaType === 'tv' && manualData.seasonNumber && isNaN(Number(manualData.seasonNumber))) {
      setError('季数必须是数字');
      return;
    }

    setCorrecting(true);
    setError('');

    try {
      const body: any = {
        key: videoKey,
        title: manualData.title.trim(),
        posterPath: manualData.posterPath.trim() || null,
        releaseDate: manualData.releaseDate.trim() || '',
        overview: manualData.overview.trim() || '',
        voteAverage: manualData.voteAverage ? Number(manualData.voteAverage) : 0,
        mediaType: manualData.mediaType,
      };

      // 添加 TMDB ID（如果提供）
      if (manualData.tmdbId.trim()) {
        body.tmdbId = Number(manualData.tmdbId);
      }

      // 添加豆瓣 ID（如果提供）
      if (manualData.doubanId.trim()) {
        body.doubanId = manualData.doubanId.trim();
      }

      // 如果是电视剧且有季度信息
      if (manualData.mediaType === 'tv' && manualData.seasonNumber) {
        body.seasonNumber = Number(manualData.seasonNumber);
        body.seasonName = manualData.seasonName.trim() || `第 ${manualData.seasonNumber} 季`;
      }

      const response = await fetch('/api/openlist/correct', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });

      if (!response.ok) {
        throw new Error('纠错失败');
      }

      onCorrect();
      onClose();
    } catch (err) {
      console.error('纠错失败:', err);
      setError('纠错失败，请重试');
    } finally {
      setCorrecting(false);
    }
  };

  if (!isOpen) return null;

  return createPortal(
    <div className='fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm'>
      <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col m-4'>
        {/* 头部 */}
        <div className='flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700'>
          <h2 className='text-lg font-semibold text-gray-900 dark:text-gray-100'>
            纠错：{currentTitle}
          </h2>
          <button
            onClick={onClose}
            className='text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
          >
            <X size={24} />
          </button>
        </div>

        {/* 搜索框 */}
        {!showManualInput && (
          <div className='p-4 border-b border-gray-200 dark:border-gray-700'>
            <div className='flex gap-2'>
              <input
                type='text'
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    handleSearch();
                  }
                }}
                placeholder='输入搜索关键词'
                className='flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
              />
              <button
                onClick={handleSearch}
                disabled={searching}
                className='px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2'
              >
                <Search size={20} />
                <span className='hidden sm:inline'>{searching ? '搜索中...' : '搜索'}</span>
              </button>
            </div>
            {error && (
              <p className='mt-2 text-sm text-red-600 dark:text-red-400'>{error}</p>
            )}
          </div>
        )}

        {/* 结果列表 */}
        <div className='flex-1 overflow-y-auto p-4'>
          {showManualInput ? (
            // 手动输入界面
            <div>
              <div className='mb-4 flex items-center gap-2'>
                <button
                  onClick={handleBackToSearch}
                  className='text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 flex items-center gap-1'
                >
                  <span>←</span>
                  <span>返回搜索</span>
                </button>
              </div>

              <div className='space-y-4'>
                {/* 标题 - 必填 */}
                <div>
                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                    影片标题 <span className='text-red-500'>*</span>
                  </label>
                  <input
                    type='text'
                    value={manualData.title}
                    onChange={(e) => setManualData({ ...manualData, title: e.target.value })}
                    placeholder='请输入影片标题'
                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
                  />
                </div>

                {/* TMDB ID - 可选 */}
                <div>
                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                    TMDB ID（可选）
                  </label>
                  <input
                    type='text'
                    value={manualData.tmdbId}
                    onChange={(e) => setManualData({ ...manualData, tmdbId: e.target.value })}
                    placeholder='例如：550'
                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
                  />
                  <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
                    可在 TMDB 网站查找影片对应的 ID
                  </p>
                </div>

                {/* 豆瓣 ID - 可选 */}
                <div>
                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                    豆瓣 ID（可选）
                  </label>
                  <input
                    type='text'
                    value={manualData.doubanId}
                    onChange={(e) => setManualData({ ...manualData, doubanId: e.target.value })}
                    placeholder='例如：1292052'
                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
                  />
                  <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
                    可在豆瓣网站查找影片对应的 ID
                  </p>
                </div>

                {/* 媒体类型 */}
                <div>
                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                    类型
                  </label>
                  <div className='flex gap-4'>
                    <label className='flex items-center'>
                      <input
                        type='radio'
                        value='movie'
                        checked={manualData.mediaType === 'movie'}
                        onChange={(e) => setManualData({ ...manualData, mediaType: e.target.value as 'movie' | 'tv' })}
                        className='mr-2'
                      />
                      <span className='text-gray-900 dark:text-gray-100'>电影</span>
                    </label>
                    <label className='flex items-center'>
                      <input
                        type='radio'
                        value='tv'
                        checked={manualData.mediaType === 'tv'}
                        onChange={(e) => setManualData({ ...manualData, mediaType: e.target.value as 'movie' | 'tv' })}
                        className='mr-2'
                      />
                      <span className='text-gray-900 dark:text-gray-100'>电视剧</span>
                    </label>
                  </div>
                </div>

                {/* 如果是电视剧，显示季度信息 */}
                {manualData.mediaType === 'tv' && (
                  <>
                    <div>
                      <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                        季数（可选）
                      </label>
                      <input
                        type='text'
                        value={manualData.seasonNumber}
                        onChange={(e) => setManualData({ ...manualData, seasonNumber: e.target.value })}
                        placeholder='例如：1'
                        className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
                      />
                    </div>
                    <div>
                      <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                        季名称（可选）
                      </label>
                      <input
                        type='text'
                        value={manualData.seasonName}
                        onChange={(e) => setManualData({ ...manualData, seasonName: e.target.value })}
                        placeholder='例如：第 1 季'
                        className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
                      />
                    </div>
                  </>
                )}

                {/* 封面图链接 */}
                <div>
                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                    封面图链接（可选）
                  </label>
                  <input
                    type='text'
                    value={manualData.posterPath}
                    onChange={(e) => setManualData({ ...manualData, posterPath: e.target.value })}
                    placeholder='请输入图片链接'
                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
                  />
                </div>

                {/* 上映日期 */}
                <div>
                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                    上映日期（可选）
                  </label>
                  <input
                    type='date'
                    value={manualData.releaseDate}
                    onChange={(e) => setManualData({ ...manualData, releaseDate: e.target.value })}
                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
                  />
                </div>

                {/* 评分 */}
                <div>
                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                    评分（可选，0-10）
                  </label>
                  <input
                    type='text'
                    value={manualData.voteAverage}
                    onChange={(e) => setManualData({ ...manualData, voteAverage: e.target.value })}
                    placeholder='例如：8.5'
                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
                  />
                </div>

                {/* 简介 */}
                <div>
                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'>
                    简介（可选）
                  </label>
                  <textarea
                    value={manualData.overview}
                    onChange={(e) => setManualData({ ...manualData, overview: e.target.value })}
                    placeholder='请输入影片简介'
                    rows={3}
                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
                  />
                </div>

                {/* 错误提示 */}
                {error && (
                  <p className='text-sm text-red-600 dark:text-red-400'>{error}</p>
                )}

                {/* 提交按钮 */}
                <button
                  onClick={handleManualSubmit}
                  disabled={correcting}
                  className='w-full px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed'
                >
                  {correcting ? '提交中...' : '提交纠错'}
                </button>
              </div>
            </div>
          ) : showSeasonSelection ? (
            // 季度选择界面
            <div>
              <div className='mb-4 flex items-center gap-2'>
                <button
                  onClick={handleBackToResults}
                  className='text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 flex items-center gap-1'
                >
                  <span>←</span>
                  <span>返回搜索结果</span>
                </button>
              </div>

              {selectedResult && (
                <div className='mb-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg'>
                  <h3 className='font-semibold text-gray-900 dark:text-gray-100'>
                    {selectedResult.title || selectedResult.name}
                  </h3>
                  <p className='text-sm text-gray-600 dark:text-gray-400 mt-1'>
                    请选择季度：
                  </p>
                </div>
              )}

              {loadingSeasons ? (
                <div className='text-center py-12 text-gray-500 dark:text-gray-400'>
                  加载季度列表中...
                </div>
              ) : seasons.length === 0 ? (
                <div className='text-center py-12 text-gray-500 dark:text-gray-400'>
                  未找到季度信息
                </div>
              ) : (
                <div className='space-y-3'>
                  {seasons.map((season) => (
                    <div
                      key={season.id}
                      className='flex gap-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors'
                    >
                      {/* 海报 */}
                      <div className='flex-shrink-0 w-16 h-24 relative rounded overflow-hidden bg-gray-200 dark:bg-gray-700'>
                        {season.poster_path ? (
                          <Image
                            src={processImageUrl(getTMDBImageUrl(season.poster_path))}
                            alt={season.name}
                            fill
                            className='object-cover'
                            referrerPolicy='no-referrer'
                          />
                        ) : (
                          <div className='w-full h-full flex items-center justify-center text-gray-400 text-xs'>
                            无海报
                          </div>
                        )}
                      </div>

                      {/* 信息 */}
                      <div className='flex-1 min-w-0'>
                        <h3 className='font-semibold text-gray-900 dark:text-gray-100'>
                          {season.name}
                        </h3>
                        <p className='text-sm text-gray-600 dark:text-gray-400 mt-1'>
                          {season.episode_count} 集
                          {season.air_date && ` • ${season.air_date.split('-')[0]}`}
                        </p>
                        <p className='text-xs text-gray-500 dark:text-gray-500 mt-1 line-clamp-2'>
                          {season.overview || '暂无简介'}
                        </p>
                      </div>

                      {/* 选择按钮 */}
                      <div className='flex-shrink-0 flex items-center'>
                        <button
                          onClick={() => handleSelectSeason(season)}
                          disabled={correcting}
                          className='px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed'
                        >
                          {correcting ? '处理中...' : '选择'}
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ) : results.length === 0 ? (
            // 空状态
            <>
              <div className='text-center py-12 text-gray-500 dark:text-gray-400'>
                {searching ? '搜索中...' : '请输入关键词搜索'}
              </div>

              {/* 手动纠错入口 */}
              {!searching && (
                <div className='mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-center'>
                  <button
                    onClick={handleShowManualInput}
                    className='text-xs text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors'
                  >
                    搜不到影片？手动纠错
                  </button>
                </div>
              )}
            </>
          ) : (
            // 搜索结果列表
            <>
              <div className='space-y-3'>
                {results.map((result) => (
                  <div
                    key={result.id}
                    className='flex gap-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors'
                  >
                    {/* 海报 */}
                    <div className='flex-shrink-0 w-16 h-24 relative rounded overflow-hidden bg-gray-200 dark:bg-gray-700'>
                      {result.poster_path ? (
                        <Image
                          src={processImageUrl(getTMDBImageUrl(result.poster_path))}
                          alt={result.title || result.name || ''}
                          fill
                          className='object-cover'
                          referrerPolicy='no-referrer'
                        />
                      ) : (
                        <div className='w-full h-full flex items-center justify-center text-gray-400 text-xs'>
                          无海报
                        </div>
                      )}
                    </div>

                    {/* 信息 */}
                    <div className='flex-1 min-w-0'>
                      <h3 className='font-semibold text-gray-900 dark:text-gray-100 truncate'>
                        {result.title || result.name}
                      </h3>
                      <p className='text-sm text-gray-600 dark:text-gray-400 mt-1'>
                        {result.media_type === 'movie' ? '电影' : '电视剧'} •{' '}
                        {result.release_date?.split('-')[0] ||
                          result.first_air_date?.split('-')[0] ||
                          '未知'}{' '}
                        • 评分: {result.vote_average.toFixed(1)}
                      </p>
                      <p className='text-xs text-gray-500 dark:text-gray-500 mt-1 line-clamp-2'>
                        {result.overview || '暂无简介'}
                      </p>
                    </div>

                    {/* 选择按钮 */}
                    <div className='flex-shrink-0 flex items-center'>
                      <button
                        onClick={() => handleSelectResult(result)}
                        disabled={correcting || loadingSeasons}
                        className='px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed'
                      >
                        {correcting || loadingSeasons ? '处理中...' : '选择'}
                      </button>
                    </div>
                  </div>
                ))}
              </div>

              {/* 手动纠错入口 */}
              <div className='mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-center'>
                <button
                  onClick={handleShowManualInput}
                  className='text-xs text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors'
                >
                  搜不到影片？手动纠错
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>,
    document.body
  );
}