import React, { useState, useEffect } from 'react';
import { Search, Upload, Download, Trash2, Settings, TrendingUp, Database, Pin, X, AlertCircle } from 'lucide-react';
import Papa from 'papaparse';

const MovieLinkSite = () => {
  // API 配置
  const API_BASE_URL = window.location.origin; // 使用当前域名
  
  const [isAdmin, setIsAdmin] = useState(false);
  const [adminPassword, setAdminPassword] = useState('');
  const [currentPage, setCurrentPage] = useState('home');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  
  // 两个独立的数据库
  const [moviesDB, setMoviesDB] = useState([]);
  const [searchStatsDB, setSearchStatsDB] = useState({});
  
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [topKeywords, setTopKeywords] = useState([]);
  const [pinnedKeywords, setPinnedKeywords] = useState([]);
  const [currentUserID, setCurrentUserID] = useState('');
  
  // 配置
  const [displayCount, setDisplayCount] = useState(4);
  const [timeWindow, setTimeWindow] = useState(168);
  const [backupInterval, setBackupInterval] = useState(24);
  const [confirmText, setConfirmText] = useState('');

  // ==================== Cookie 工具函数 ====================
  const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return null;
  };
  
  const setCookie = (name, value, days) => {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = `expires=${date.toUTCString()}`;
    document.cookie = `${name}=${value};${expires};path=/`;
  };

  // ==================== API 调用函数 ====================
  
  // 获取资源列表
  const fetchMovies = async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/movies`);
      const data = await response.json();
      return data.movies || [];
    } catch (error) {
      console.error('获取资源列表失败:', error);
      return [];
    }
  };

  // 上传资源列表（管理员）
  const uploadMovies = async (movies) => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/movies`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${adminPassword}`,
        },
        body: JSON.stringify({ movies }),
      });
      const data = await response.json();
      if (response.status === 401) {
        throw new Error('管理员密码错误');
      }
      return data;
    } catch (error) {
      throw error;
    }
  };

  // 记录搜索行为
  const recordSearch = async (keyword, userID) => {
    try {
      const timestamp = new Date().toISOString().slice(0, 19).replace('T', ' ');
      await fetch(`${API_BASE_URL}/api/search-stats`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ keyword, userID, timestamp }),
      });
    } catch (error) {
      console.error('记录搜索失败:', error);
    }
  };

  // 获取搜索统计
  const fetchSearchStats = async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/search-stats`);
      const data = await response.json();
      return data.stats || {};
    } catch (error) {
      console.error('获取搜索统计失败:', error);
      return {};
    }
  };

  // 清空搜索统计（管理员）
  const clearSearchStatsAPI = async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/search-stats`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${adminPassword}`,
        },
      });
      const data = await response.json();
      if (response.status === 401) {
        throw new Error('管理员密码错误');
      }
      return data;
    } catch (error) {
      throw error;
    }
  };

  // 获取配置
  const fetchConfig = async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/config`);
      const data = await response.json();
      return data.config || {};
    } catch (error) {
      console.error('获取配置失败:', error);
      return {};
    }
  };

  // 更新配置（管理员）
  const updateConfigAPI = async (config) => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/config`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${adminPassword}`,
        },
        body: JSON.stringify(config),
      });
      const data = await response.json();
      if (response.status === 401) {
        throw new Error('管理员密码错误');
      }
      return data;
    } catch (error) {
      throw error;
    }
  };

  // 备份数据（管理员）
  const backupDataAPI = async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/backup`, {
        headers: {
          'Authorization': `Bearer ${adminPassword}`,
        },
      });
      const data = await response.json();
      if (response.status === 401) {
        throw new Error('管理员密码错误');
      }
      return data;
    } catch (error) {
      throw error;
    }
  };

  // ==================== 初始化 ====================
  useEffect(() => {
    // 获取或生成用户ID（使用 Cookie）
    let userID = getCookie('movie_site_uid');
    if (!userID) {
      userID = 'user_' + Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
      setCookie('movie_site_uid', userID, 365);
    }
    setCurrentUserID(userID);

    // 加载数据
    loadInitialData();
  }, []);

  const loadInitialData = async () => {
    setLoading(true);
    try {
      const [movies, stats, config] = await Promise.all([
        fetchMovies(),
        fetchSearchStats(),
        fetchConfig()
      ]);
      
      setMoviesDB(movies);
      setSearchStatsDB(stats);
      
      if (config.pinnedKeywords) setPinnedKeywords(config.pinnedKeywords);
      if (config.displayCount) setDisplayCount(config.displayCount);
      if (config.timeWindow) setTimeWindow(config.timeWindow);
      if (config.backupInterval) setBackupInterval(config.backupInterval);
      
      updateTopKeywords(stats, config.pinnedKeywords || [], config.timeWindow || 168, config.displayCount || 4);
    } catch (error) {
      console.error('加载初始数据失败:', error);
      setError('数据加载失败，请刷新页面重试');
    }
    setLoading(false);
  };

  // 更新热门关键词（基于时间窗口和用户数统计）
  const updateTopKeywords = (stats, pinned, windowHours, count) => {
    const now = new Date();
    const cutoffTime = new Date(now.getTime() - windowHours * 60 * 60 * 1000);
    
    const keywordCounts = Object.entries(stats).map(([keyword, users]) => {
      const validUsers = Object.values(users).filter(timestamp => 
        new Date(timestamp) >= cutoffTime
      );
      return { keyword, count: validUsers.length };
    }).filter(item => item.count > 0);
    
    const topN = keywordCounts
      .sort((a, b) => b.count - a.count)
      .slice(0, count)
      .map(item => item.keyword);
    
    const combined = [...new Set([...pinned, ...topN])].slice(0, count);
    setTopKeywords(combined);
  };

  // 管理员登录
  const handleAdminLogin = () => {
    if (!adminPassword) {
      alert('请输入管理员密码');
      return;
    }
    // 密码验证会在实际 API 调用时进行
    setIsAdmin(true);
    setCurrentPage('admin');
  };

  // 处理 CSV 上传（资源数据库）
  const handleCSVUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    setLoading(true);
    Papa.parse(file, {
      header: true,
      skipEmptyLines: true,
      dynamicTyping: false,
      complete: async (results) => {
        try {
          if (!results.data || results.data.length === 0) {
            alert('❌ CSV 文件为空或格式错误');
            setLoading(false);
            return;
          }

          const headers = Object.keys(results.data[0]);
          
          if (!headers[0] || headers[0].trim() !== '标题') {
            alert('❌ CSV 格式错误：第一列必须是"标题"');
            setLoading(false);
            return;
          }

          const movieList = results.data.map(row => {
            const cleanRow = {};
            headers.forEach(header => {
              cleanRow[header.trim()] = row[header] ? row[header].toString().trim() : '';
            });
            return cleanRow;
          }).filter(row => row['标题']);

          // 上传到服务器
          await uploadMovies(movieList);
          setMoviesDB(movieList);
          alert(`✅ 成功导入 ${movieList.length} 条影视资源\n列名：${headers.join(', ')}`);
        } catch (error) {
          alert('❌ 上传失败：' + error.message);
        }
        setLoading(false);
      },
      error: (error) => {
        alert('❌ 读取 CSV 文件失败：' + error.message);
        setLoading(false);
      }
    });
  };

  // 搜索功能
  const handleSearch = async (keyword) => {
    if (!keyword.trim()) {
      setSearchResults([]);
      return;
    }

    const results = moviesDB.filter(movie =>
      movie['标题'] && movie['标题'].toLowerCase().includes(keyword.toLowerCase())
    );
    setSearchResults(results);

    // 记录搜索行为到服务器
    const normalizedKeyword = keyword.trim();
    await recordSearch(normalizedKeyword, currentUserID);

    // 更新本地状态
    const now = new Date().toISOString().slice(0, 19).replace('T', ' ');
    setSearchStatsDB(prev => {
      const newStats = { ...prev };
      if (!newStats[normalizedKeyword]) {
        newStats[normalizedKeyword] = {};
      }
      newStats[normalizedKeyword][currentUserID] = now;
      updateTopKeywords(newStats, pinnedKeywords, timeWindow, displayCount);
      return newStats;
    });
  };

  // 导出资源数据库（CSV）
  const exportMoviesDB = () => {
    if (moviesDB.length === 0) {
      alert('没有资源数据可导出');
      return;
    }
    
    const csv = Papa.unparse(moviesDB);
    const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `影视资源_${new Date().toISOString().slice(0, 10)}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  // 导出搜索统计（CSV）
  const exportSearchStats = () => {
    const now = new Date();
    const cutoffTime = new Date(now.getTime() - timeWindow * 60 * 60 * 1000);
    
    const data = Object.entries(searchStatsDB).map(([keyword, users]) => {
      const windowUsers = Object.entries(users).filter(([_, timestamp]) => 
        new Date(timestamp) >= cutoffTime
      );
      const totalUsers = Object.keys(users).length;
      const lastSearches = Object.values(users).sort((a, b) => 
        new Date(b) - new Date(a)
      );
      
      return {
        关键词: keyword,
        窗口内用户数: windowUsers.length,
        历史总用户数: totalUsers,
        最后搜索时间: lastSearches[0] || '',
        用户详情: Object.entries(users)
          .sort((a, b) => new Date(b[1]) - new Date(a[1]))
          .map(([uid, time]) => `${uid}:${time}`)
          .join('; ')
      };
    }).sort((a, b) => b.窗口内用户数 - a.窗口内用户数);

    const csv = Papa.unparse(data);
    const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `搜索统计_${new Date().toISOString().slice(0, 10)}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  // 清空搜索统计
  const clearSearchStats = async () => {
    if (confirmText !== '确认') {
      alert('❌ 请输入"确认"以清空数据');
      return;
    }

    setLoading(true);
    try {
      await clearSearchStatsAPI();
      setSearchStatsDB({});
      setTopKeywords([]);
      setConfirmText('');
      alert('✅ 搜索统计已清空');
    } catch (error) {
      alert('❌ 清空失败：' + error.message);
    }
    setLoading(false);
  };

  // 添加置顶关键词
  const addPinnedKeyword = async (keyword) => {
    if (!keyword || pinnedKeywords.includes(keyword)) return;
    
    const newPinned = [...pinnedKeywords, keyword];
    setPinnedKeywords(newPinned);
    updateTopKeywords(searchStatsDB, newPinned, timeWindow, displayCount);
    
    // 保存配置到服务器
    try {
      await updateConfigAPI({
        pinnedKeywords: newPinned,
        displayCount,
        timeWindow,
        backupInterval
      });
    } catch (error) {
      console.error('保存配置失败:', error);
    }
  };

  // 移除置顶关键词
  const removePinnedKeyword = async (keyword) => {
    const newPinned = pinnedKeywords.filter(k => k !== keyword);
    setPinnedKeywords(newPinned);
    updateTopKeywords(searchStatsDB, newPinned, timeWindow, displayCount);
    
    try {
      await updateConfigAPI({
        pinnedKeywords: newPinned,
        displayCount,
        timeWindow,
        backupInterval
      });
    } catch (error) {
      console.error('保存配置失败:', error);
    }
  };

  // 更新配置
  const saveConfig = async () => {
    setLoading(true);
    try {
      await updateConfigAPI({
        pinnedKeywords,
        displayCount,
        timeWindow,
        backupInterval
      });
      updateTopKeywords(searchStatsDB, pinnedKeywords, timeWindow, displayCount);
      alert('✅ 配置已保存');
    } catch (error) {
      alert('❌ 保存失败：' + error.message);
    }
    setLoading(false);
  };

  // 备份所有数据
  const backupAllData = async () => {
    setLoading(true);
    try {
      const result = await backupDataAPI();
      
      // 下载备份文件
      const dataStr = JSON.stringify(result.backup, null, 2);
      const blob = new Blob([dataStr], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `完整备份_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
      a.click();
      URL.revokeObjectURL(url);
      
      alert('✅ 数据备份成功');
    } catch (error) {
      alert('❌ 备份失败：' + error.message);
    }
    setLoading(false);
  };

  // 渲染首页
  const renderHomePage = () => (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex flex-col items-center justify-center p-4">
      {loading && (
        <div className="fixed top-4 right-4 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg">
          加载中...
        </div>
      )}
      {error && (
        <div className="fixed top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2">
          <AlertCircle size={18} />
          {error}
        </div>
      )}
      
      <div className="w-full max-w-2xl">
        <h1 className="text-5xl font-bold text-gray-800 text-center mb-12">影视资源搜索</h1>
        
        <div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
          <div className="flex gap-2">
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && handleSearch(searchQuery)}
              placeholder="搜索影视资源..."
              className="flex-1 px-6 py-4 text-lg border-2 border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500"
            />
            <button
              onClick={() => handleSearch(searchQuery)}
              className="px-8 py-4 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"
            >
              <Search size={24} />
            </button>
          </div>
        </div>

        {topKeywords.length > 0 && (
          <div className="bg-white rounded-2xl shadow-xl p-6 mb-8">
            <div className="flex items-center gap-2 mb-4">
              <TrendingUp className="text-indigo-600" size={20} />
              <h2 className="text-lg font-semibold text-gray-700">热门搜索</h2>
            </div>
            <div className={`grid gap-3 ${displayCount <= 4 ? 'grid-cols-2' : displayCount <= 12 ? 'grid-cols-3' : 'grid-cols-4'}`}>
              {topKeywords.map((keyword, idx) => (
                <button
                  key={idx}
                  onClick={() => {
                    setSearchQuery(keyword);
                    handleSearch(keyword);
                  }}
                  className="px-4 py-3 bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 rounded-lg hover:from-indigo-100 hover:to-purple-100 transition text-left flex items-center gap-2 shadow-sm"
                >
                  {pinnedKeywords.includes(keyword) && (
                    <Pin size={14} className="text-indigo-500 flex-shrink-0" />
                  )}
                  <span className="truncate font-medium">{keyword}</span>
                </button>
              ))}
            </div>
          </div>
        )}

        {searchResults.length > 0 && (
          <div className="bg-white rounded-2xl shadow-xl p-6">
            <h2 className="text-xl font-semibold text-gray-800 mb-4">
              搜索结果 <span className="text-indigo-600">({searchResults.length})</span>
            </h2>
            <div className="space-y-4">
              {searchResults.map((movie, idx) => {
                const columns = Object.keys(movie).filter(key => key !== '标题');
                return (
                  <div key={idx} className="border-b pb-4 last:border-b-0">
                    <h3 className="font-semibold text-lg text-gray-800 mb-3">{movie['标题']}</h3>
                    <div className="flex flex-wrap gap-2">
                      {columns.map((col, colIdx) => {
                        if (!movie[col]) return null;
                        const colors = [
                          'bg-blue-500 hover:bg-blue-600',
                          'bg-green-500 hover:bg-green-600',
                          'bg-orange-500 hover:bg-orange-600',
                          'bg-purple-500 hover:bg-purple-600',
                          'bg-pink-500 hover:bg-pink-600',
                          'bg-teal-500 hover:bg-teal-600'
                        ];
                        const colorClass = colors[colIdx % colors.length];
                        return (
                          <a
                            key={colIdx}
                            href={movie[col]}
                            target="_blank"
                            rel="noopener noreferrer"
                            className={`px-4 py-2 ${colorClass} text-white text-sm rounded-lg transition shadow-sm`}
                          >
                            {col}
                          </a>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {searchQuery && searchResults.length === 0 && !loading && (
          <div className="bg-white rounded-2xl shadow-xl p-8 text-center">
            <p className="text-gray-500">未找到相关资源</p>
          </div>
        )}
      </div>

      <button
        onClick={() => setCurrentPage('login')}
        className="mt-8 text-sm text-gray-500 hover:text-gray-700 transition"
      >
        管理员入口
      </button>
    </div>
  );

  // 渲染管理员登录页
  const renderLoginPage = () => (
    <div className="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center p-4">
      <div className="bg-white rounded-xl shadow-xl p-8 w-full max-w-md">
        <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">管理员登录</h2>
        <input
          type="password"
          value={adminPassword}
          onChange={(e) => setAdminPassword(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleAdminLogin()}
          placeholder="请输入管理员密码"
          className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg mb-4 focus:outline-none focus:border-indigo-500"
        />
        <button
          onClick={handleAdminLogin}
          className="w-full py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium"
        >
          登录
        </button>
        <button
          onClick={() => setCurrentPage('home')}
          className="w-full mt-3 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition"
        >
          返回首页
        </button>
      </div>
    </div>
  );

  // 渲染管理员页面
  const renderAdminPage = () => (
    <div className="min-h-screen bg-gray-50 p-6">
      {loading && (
        <div className="fixed top-4 right-4 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg z-50">
          处理中...
        </div>
      )}
      
      <div className="max-w-6xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-gray-800">管理后台</h1>
          <button
            onClick={() => {
              setIsAdmin(false);
              setCurrentPage('home');
              setAdminPassword('');
            }}
            className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition"
          >
            退出登录
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          {/* 资源数据库管理 */}
          <div className="bg-white rounded-xl shadow p-6">
            <div className="flex items-center gap-2 mb-4">
              <Database className="text-indigo-600" size={24} />
              <h2 className="text-xl font-semibold">资源数据库</h2>
            </div>
            <div className="space-y-3">
              <label className="block">
                <span className="text-sm text-gray-600 mb-2 block">上传 CSV 文件（标题 + 网盘链接）</span>
                <input
                  type="file"
                  accept=".csv"
                  onChange={handleCSVUpload}
                  disabled={loading}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 disabled:opacity-50"
                />
              </label>
              <div className="flex gap-2">
                <button
                  onClick={exportMoviesDB}
                  disabled={loading}
                  className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition text-sm disabled:opacity-50"
                >
                  <Download size={16} />
                  导出资源库 (CSV)
                </button>
              </div>
              <div className="bg-indigo-50 rounded-lg p-3">
                <p className="text-sm text-indigo-700">
                  📊 当前资源: <span className="font-bold">{moviesDB.length}</span> 条
                </p>
              </div>
            </div>
          </div>

          {/* 行为数据库管理 */}
          <div className="bg-white rounded-xl shadow p-6">
            <div className="flex items-center gap-2 mb-4">
              <TrendingUp className="text-green-600" size={24} />
              <h2 className="text-xl font-semibold">行为数据库</h2>
            </div>
            <div className="space-y-3">
              <span className="text-sm text-gray-600 block mb-2">搜索统计数据</span>
              <button
                onClick={exportSearchStats}
                disabled={loading}
                className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition disabled:opacity-50"
              >
                <Download size={18} />
                导出搜索统计 (CSV)
              </button>
              <div className="flex gap-2">
                <input
                  type="text"
                  value={confirmText}
                  onChange={(e) => setConfirmText(e.target.value)}
                  placeholder='输入"确认"清空统计'
                  disabled={loading}
                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-red-500 disabled:opacity-50"
                />
                <button
                  onClick={clearSearchStats}
                  disabled={loading}
                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition disabled:opacity-50"
                >
                  <Trash2 size={18} />
                </button>
              </div>
              <div className="bg-green-50 rounded-lg p-3">
                <p className="text-sm text-green-700">
                  📈 统计关键词: <span className="font-bold">{Object.keys(searchStatsDB).length}</span> 个<br/>
                  👥 独立用户数: <span className="font-bold">
                    {new Set(Object.values(searchStatsDB).flatMap(users => Object.keys(users))).size}
                  </span> 人<br/>
                  📊 总搜索记录: <span className="font-bold">
                    {Object.values(searchStatsDB).reduce((sum, users) => sum + Object.keys(users).length, 0)}
                  </span> 次
                </p>
              </div>
            </div>
          </div>

          {/* 首页配置 */}
          <div className="bg-white rounded-xl shadow p-6">
            <div className="flex items-center gap-2 mb-4">
              <Settings className="text-blue-600" size={24} />
              <h2 className="text-xl font-semibold">首页配置</h2>
            </div>
            <div className="space-y-3">
              <label className="block">
                <span className="text-sm text-gray-600 mb-1 block">统计周期 (小时)</span>
                <input
                  type="number"
                  value={timeWindow}
                  onChange={(e) => setTimeWindow(parseInt(e.target.value) || 168)}
                  disabled={loading}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 disabled:opacity-50"
                />
                <span className="text-xs text-gray-500 mt-1 block">默认: 168 小时（7天）</span>
              </label>
              <label className="block">
                <span className="text-sm text-gray-600 mb-1 block">展示关键词数量</span>
                <input
                  type="number"
                  value={displayCount}
                  onChange={(e) => setDisplayCount(parseInt(e.target.value) || 4)}
                  disabled={loading}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 disabled:opacity-50"
                />
                <span className="text-xs text-gray-500 mt-1 block">默认: 4 个，建议 4-20</span>
              </label>
              <button
                onClick={saveConfig}
                disabled={loading}
                className="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
              >
                保存配置
              </button>
            </div>
          </div>

          {/* 置顶关键词 */}
          <div className="bg-white rounded-xl shadow p-6">
            <div className="flex items-center gap-2 mb-4">
              <Pin className="text-purple-600" size={24} />
              <h2 className="text-xl font-semibold">置顶关键词</h2>
            </div>
            <div className="space-y-3">
              <div className="flex gap-2">
                <input
                  type="text"
                  id="pinnedInput"
                  placeholder="输入要置顶的关键词"
                  disabled={loading}
                  onKeyPress={(e) => {
                    if (e.key === 'Enter') {
                      const input = e.target;
                      addPinnedKeyword(input.value);
                      input.value = '';
                    }
                  }}
                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-purple-500 disabled:opacity-50"
                />
                <button
                  onClick={() => {
                    const input = document.getElementById('pinnedInput');
                    addPinnedKeyword(input.value);
                    input.value = '';
                  }}
                  disabled={loading}
                  className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition disabled:opacity-50"
                >
                  添加
                </button>
              </div>
              <div className="max-h-48 overflow-y-auto space-y-2">
                {pinnedKeywords.length === 0 ? (
                  <p className="text-sm text-gray-400 text-center py-4">暂无置顶关键词</p>
                ) : (
                  pinnedKeywords.map((keyword, idx) => (
                    <div key={idx} className="flex items-center justify-between bg-purple-50 px-3 py-2 rounded-lg">
                      <div className="flex items-center gap-2">
                        <Pin size={14} className="text-purple-600" />
                        <span className="text-sm font-medium text-gray-700">{keyword}</span>
                      </div>
                      <button
                        onClick={() => removePinnedKeyword(keyword)}
                        disabled={loading}
                        className="text-red-600 hover:text-red-800 transition disabled:opacity-50"
                      >
                        <X size={16} />
                      </button>
                    </div>
                  ))
                )}
              </div>
            </div>
          </div>

          {/* 数据备份 */}
          <div className="bg-white rounded-xl shadow p-6 md:col-span-2">
            <div className="flex items-center gap-2 mb-4">
              <Database className="text-orange-600" size={24} />
              <h2 className="text-xl font-semibold">数据备份</h2>
            </div>
            <div className="flex gap-4 items-end">
              <label className="flex-1">
                <span className="text-sm text-gray-600 mb-1 block">自动备份间隔 (小时)</span>
                <input
                  type="number"
                  value={backupInterval}
                  onChange={(e) => setBackupInterval(parseInt(e.target.value) || 24)}
                  disabled={loading}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-orange-500 disabled:opacity-50"
                />
              </label>
              <button
                onClick={backupAllData}
                disabled={loading}
                className="px-6 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition font-medium disabled:opacity-50"
              >
                立即备份所有数据
              </button>
            </div>
            <p className="text-xs text-gray-500 mt-3">
              💾 备份内容包括：资源数据库、行为数据库、配置信息
            </p>
          </div>
        </div>

        {/* 搜索统计详情 */}
        <div className="bg-white rounded-xl shadow p-6">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-xl font-semibold">搜索统计详情</h2>
            <div className="text-sm text-gray-500">
              <div>统计周期: {timeWindow} 小时</div>
              <div className="text-xs">用户ID: {currentUserID}</div>
            </div>
          </div>
          {Object.keys(searchStatsDB).length === 0 ? (
            <p className="text-center text-gray-400 py-8">暂无搜索统计数据</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">排名</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">关键词</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">窗口内用户数</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">历史总用户数</th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">最后搜索时间</th>
                  </tr>
                </thead>
                <tbody>
                  {(() => {
                    const now = new Date();
                    const cutoffTime = new Date(now.getTime() - timeWindow * 60 * 60 * 1000);
                    
                    return Object.entries(searchStatsDB)
                      .map(([keyword, users]) => {
                        const windowUsers = Object.entries(users).filter(([_, timestamp]) => 
                          new Date(timestamp) >= cutoffTime
                        );
                        const totalUsers = Object.keys(users).length;
                        const lastSearch = Object.values(users).sort((a, b) => 
                          new Date(b) - new Date(a)
                        )[0] || '';
                        
                        return {
                          keyword,
                          windowCount: windowUsers.length,
                          totalCount: totalUsers,
                          lastSearch
                        };
                      })
                      .sort((a, b) => b.windowCount - a.windowCount)
                      .map((item, idx) => (
                        <tr key={idx} className="border-t hover:bg-gray-50">
                          <td className="px-4 py-3 text-gray-600">{idx + 1}</td>
                          <td className="px-4 py-3 font-medium text-gray-800">{item.keyword}</td>
                          <td className="px-4 py-3">
                            <span className="inline-block px-2 py-1 bg-green-100 text-green-700 rounded font-medium">
                              {item.windowCount}
                            </span>
                          </td>
                          <td className="px-4 py-3 text-gray-600">{item.totalCount}</td>
                          <td className="px-4 py-3 text-gray-600">{item.lastSearch}</td>
                        </tr>
                      ));
                  })()}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );

  // 主渲染
  if (currentPage === 'home') return renderHomePage();
  if (currentPage === 'login') return renderLoginPage();
  if (currentPage === 'admin' && isAdmin) return renderAdminPage();
  return renderHomePage();
};

export default MovieLinkSite;