import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import {
  RefreshCcw,
  Loader2,
  Star,
  Video
} from 'lucide-react';
import { format } from 'date-fns';
import TimelineSlider from './TimelineSlider';
import RecordDatePicker from './RecordDatePicker';
import { ScreenRecord, TimeDistributionPoint, Segment, Marker } from '../types';
import { formatMemory, formatDate } from '../utils';
import { useStarToggle } from '../hooks/useStarToggle';

interface ScreenshotsTabProps {
  hostname: string;
  selectedDate: string | null;
  onDateChange: (date: string | null) => void;
  jumpRequest: { timestamp: number; recordId?: string } | null;
  onLastUpdateChange: (date: string | null) => void;
}

export default function ScreenshotsTab({
  hostname,
  selectedDate,
  onDateChange,
  jumpRequest,
  onLastUpdateChange
}: ScreenshotsTabProps) {
  // 状态管理
  const [timeDistribution, setTimeDistribution] = useState<TimeDistributionPoint[]>([]);
  const [records, setRecords] = useState<ScreenRecord[]>([]);
  const [selectedRecord, setSelectedRecord] = useState<ScreenRecord | null>(null);
  const [loadingDistribution, setLoadingDistribution] = useState(false);
  const [loadingRecords, setLoadingRecords] = useState(false);
  const [showDetailTimeline, setShowDetailTimeline] = useState(false);
  // const [lastUpdate, setLastUpdate] = useState<string | null>(null); // Lifted up

  // 生成视频相关状态
  const [generatingVideo, setGeneratingVideo] = useState(false);

  // 滑块状态
  const [timeRange, setTimeRange] = useState({ min: 0, max: 0 });
  const [hourlySliderValue, setHourlySliderValue] = useState(0);
  const [detailedSliderValue, setDetailedSliderValue] = useState(0);

  // 播放控制
  const [currentFrameIndex, setCurrentFrameIndex] = useState(-1);
  const [autoPlay, setAutoPlay] = useState(false);
  const [autoPlaySpeed, setAutoPlaySpeed] = useState(100);
  const [imagesLoadedCount, setImagesLoadedCount] = useState(0);
  const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
  const [loadingImageIds, setLoadingImageIds] = useState<Set<string>>(new Set());
  const autoPlayTimer = useRef<NodeJS.Timeout | null>(null);
  const wheelDeltaAccumulator = useRef(0);

  const { updatingStars, toggleStar } = useStarToggle();

  // 获取时间分布数据
  const fetchTimeDistribution = async () => {
    try {
      setLoadingDistribution(true);
      const response = await fetch(`/hosts/${hostname}/time-distribution`);
      if (!response.ok) throw new Error('获取时间分布数据失败');
      const data = await response.json();
      setTimeDistribution(data.distribution);
    } catch (error) {
      console.error('获取时间分布数据失败:', error);
    } finally {
      setLoadingDistribution(false);
    }
  };

  // 获取小时记录
  const fetchHourlyRecords = async (startTime: number, endTime: number, options?: { targetRecordId?: string, keepSelection?: boolean }) => {
    try {
      setLoadingRecords(true);
      setShowDetailTimeline(true);
      const response = await fetch(
        `/hosts/${hostname}/screenshots?startTime=${startTime}&endTime=${endTime}`
      );
      if (!response.ok) throw new Error('获取记录数据失败');
      const data = await response.json();
      const newRecords = data.records.reverse();
      setRecords(newRecords);
      onLastUpdateChange(data.lastUpdate);
      setTimeRange({ min: startTime * 1000, max: endTime * 1000 });

      requestAnimationFrame(() => {
        if (options?.targetRecordId) {
          const found = newRecords.find((r: ScreenRecord) => r.id === options.targetRecordId);
          if (found) {
            setSelectedRecord(found);
          } else {
             // Fallback if exact ID not found, maybe try timestamp match if we had it, but ID is safer
             setSelectedRecord(newRecords[0]);
          }
        } else if (options?.keepSelection && selectedRecord) {
          const found = newRecords.find((r: ScreenRecord) => r.id === selectedRecord.id) ||
            newRecords.find((r: ScreenRecord) => r.timestamp === selectedRecord.timestamp);
          setSelectedRecord(found || newRecords[0]);
        } else {
          setSelectedRecord(newRecords[0]);
        }
      });
    } catch (error) {
      console.error('获取记录数据失败:', error);
    } finally {
      setLoadingRecords(false);
    }
  };

  // 生成视频
  const generateVideo = async () => {
    if (!showDetailTimeline || !timeRange.min || !timeRange.max) {
      alert('请先选择时间范围');
      return;
    }

    try {
      setGeneratingVideo(true);
      
      const startTime = Math.floor(timeRange.min / 1000);
      const endTime = Math.floor(timeRange.max / 1000);
      
      const videoUrl = `/api/generate/video?hostname=${encodeURIComponent(hostname)}&startTime=${startTime}&endTime=${endTime}`;
      
      // 在新标签页中打开视频
      window.open(videoUrl, '_blank');
      
    } catch (error) {
      console.error('生成视频失败:', error);
      alert('生成视频失败，请稍后重试');
    } finally {
      setGeneratingVideo(false);
    }
  };

  // 日历相关计算
  const dailyCounts = useMemo(() => {
    const map: Record<string, number> = {};
    timeDistribution.forEach(point => {
      const d = new Date(point.timestamp * 1000);
      const dateStr = `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
      map[dateStr] = (map[dateStr] || 0) + point.count;
    });
    return map;
  }, [timeDistribution]);

  // 小时分布滑块相关计算
  const hourlyMinTime = useMemo(() => {
    if (selectedDate) {
      const [year, month, day] = selectedDate.split('-').map(Number);
      const dayStart = new Date(year, month - 1, day);
      return dayStart.getTime();
    }
    if (timeDistribution.length === 0) return Date.now();
    const minSec = Math.min(...timeDistribution.map(d => d.timestamp));
    return minSec * 1000;
  }, [selectedDate, timeDistribution]);

  const hourlyMaxTime = useMemo(() => {
    if (selectedDate) {
      const [year, month, day] = selectedDate.split('-').map(Number);
      const dayStart = new Date(year, month - 1, day);
      const dayEnd = new Date(dayStart);
      dayEnd.setDate(dayStart.getDate() + 1);
      return dayEnd.getTime();
    }
    if (timeDistribution.length === 0) return Date.now();
    const maxSec = Math.max(...timeDistribution.map(d => d.timestamp));
    return (maxSec + 3599) * 1000;
  }, [selectedDate, timeDistribution]);

  const hourlySegments = useMemo(() => {
    const segments: Segment[] = [];
    if (selectedDate) {
      const [year, month, day] = selectedDate.split('-').map(Number);
      const dayStart = new Date(year, month - 1, day);
      const startSec = Math.floor(dayStart.getTime() / 1000);
      const dayEnd = new Date(dayStart);
      dayEnd.setDate(dayEnd.getDate() + 1);
      const endSec = Math.floor(dayEnd.getTime() / 1000);

      for (let t = startSec; t < endSec; t += 3600) {
        const segStart = t * 1000;
        const segEnd = (t + 3600) * 1000;
        const data = timeDistribution.find(d => d.timestamp >= t && d.timestamp < t + 3600);
        segments.push({
          start: segStart,
          end: segEnd,
          active: !!data && data.count > 0
        });
      }
    } else {
      if (timeDistribution.length === 0) return segments;
      const startSec = Math.min(...timeDistribution.map(d => d.timestamp));
      const endSec = Math.max(...timeDistribution.map(d => d.timestamp));
      for (let t = startSec; t <= endSec; t += 3600) {
        const segStart = t * 1000;
        const segEnd = (t + 3600) * 1000;
        const data = timeDistribution.find(d => d.timestamp === t);
        segments.push({
          start: segStart,
          end: segEnd,
          active: data ? data.count > 0 : false
        });
      }
    }
    return segments;
  }, [selectedDate, timeDistribution]);

  // 详细时间点标记
  const detailedMarkers = useMemo(() => {
    return records.map(record => ({
      time: new Date(record.timestamp).getTime(),
      label: format(new Date(record.timestamp), 'HH:mm:ss'),
      active: true
    }));
  }, [records]);

  // 事件处理函数
  const onHourlySliderChange = (newValue: number) => {
    const selectedSec = Math.floor(newValue / 3600000) * 3600;

    // 使用 setTimeout 避免在渲染过程中更新状态
    setTimeout(() => {
      setHourlySliderValue(newValue);
      fetchHourlyRecords(selectedSec, selectedSec + 3600);
    }, 0);
  };

  const onDetailedSliderChange = (newValue: number) => {
    if (records.length === 0) return;
    const targetTime = newValue;
    let closestRecord = records[0];
    let minDiff = Math.abs(new Date(closestRecord.timestamp).getTime() - targetTime);

    for (const record of records) {
      const diff = Math.abs(new Date(record.timestamp).getTime() - targetTime);
      if (diff < minDiff) {
        minDiff = diff;
        closestRecord = record;
      }
    }

    // 使用 setTimeout 避免在渲染过程中更新状态
    setTimeout(() => {
      setSelectedRecord(closestRecord);
      setDetailedSliderValue(newValue);
    }, 0);
  };

  // 播放控制
  const nextFrame = () => {
    if (currentFrameIndex < records.length - 1) {
      setCurrentFrameIndex(currentFrameIndex + 1);
      setSelectedRecord(records[currentFrameIndex + 1]);
    } else {
      setAutoPlay(false);
    }
    stopAutoPlayTimer();
  };

  const prevFrame = () => {
    if (currentFrameIndex > 0) {
      setCurrentFrameIndex(currentFrameIndex - 1);
      setSelectedRecord(records[currentFrameIndex - 1]);
    }
    stopAutoPlayTimer();
  };

  const toggleAutoPlay = () => {
    setAutoPlay(!autoPlay);
  };

  const startAutoPlayTimer = useCallback(() => {

    if (autoPlay) {
      autoPlayTimer.current = setTimeout(() => {
        nextFrame();
      }, autoPlaySpeed);
    }
  }, [autoPlay, autoPlaySpeed, currentFrameIndex, records.length]);

  const stopAutoPlayTimer = () => {
    if (autoPlayTimer.current) {
      clearTimeout(autoPlayTimer.current);
      autoPlayTimer.current = null;
    }
  };

  const onImageLoad = (event: React.SyntheticEvent<HTMLImageElement>, fileId: string) => {
    setImagesLoadedCount(prev => prev + 1);
    const imgEl = event.target as HTMLImageElement;
    if (imgEl.naturalHeight !== 0) {
      setImageAspectRatio(imgEl.naturalWidth / imgEl.naturalHeight);
    }
    setLoadingImageIds(prev => {
      const next = new Set(prev);
      next.delete(fileId);
      return next;
    });
  };

  const onImageError = (fileId: string) => {
    setLoadingImageIds(prev => {
      const next = new Set(prev);
      next.delete(fileId);
      return next;
    });
  };

  const handleToggleStar = async (recordId: string) => {
    const newStatus = await toggleStar(recordId);
    if (newStatus !== null) {
      setRecords(prev => prev.map(record =>
        record.id === recordId
          ? { ...record, isStarred: newStatus }
          : record
      ));
      if (selectedRecord && selectedRecord.id === recordId) {
        setSelectedRecord(prev => prev ? { ...prev, isStarred: newStatus } : null);
      }
    }
  };

  // 键盘快捷键处理
  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      // 防止在输入框中触发快捷键
      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
        return;
      }

      switch (event.code) {
        case 'Space':
          event.preventDefault();
          toggleAutoPlay();
          break;
        case 'ArrowLeft':
          event.preventDefault();
          prevFrame();
          break;
        case 'ArrowRight':
          event.preventDefault();
          nextFrame();
          break;
        case 'KeyS':
          event.preventDefault();
          if (selectedRecord) {
            handleToggleStar(selectedRecord.id);
          }
          break;
      }
    };

    document.addEventListener('keydown', handleKeyPress);
    return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, [selectedRecord, toggleAutoPlay, prevFrame, nextFrame]);

  // 滚轮事件处理
  useEffect(() => {
    const WHEEL_THRESHOLD = 20; // 累计多少像素后才切换（可调整）

    const handleWheel = (event: WheelEvent) => {
      // 累计水平滚动距离
      wheelDeltaAccumulator.current += event.deltaX;

      // 检查是否超过阈值
      if (Math.abs(wheelDeltaAccumulator.current) >= WHEEL_THRESHOLD) {
        if (wheelDeltaAccumulator.current < 0) {
          // 向左滚动，上一帧
          prevFrame();
        } else {
          // 向右滚动，下一帧
          nextFrame();
        }
        // 重置累计器
        wheelDeltaAccumulator.current = 0;
      }
    };

    document.addEventListener('wheel', handleWheel, { passive: true });
    return () => {
      document.removeEventListener('wheel', handleWheel);
      // 清理累计器
      wheelDeltaAccumulator.current = 0;
    };
  }, [prevFrame, nextFrame]);

  // Effects
  useEffect(() => {
    fetchTimeDistribution();
  }, [hostname]);

  useEffect(() => {
    if (!selectedDate && Object.keys(dailyCounts).length > 0) {
      const dates = Object.keys(dailyCounts).sort();
      if (dates.length > 0) {
        onDateChange(dates[dates.length - 1]);
      }
    }
  }, [dailyCounts, selectedDate, onDateChange]);

  // Handle Jump Request
  useEffect(() => {
    if (jumpRequest) {
      const { timestamp, recordId } = jumpRequest;
      const hourStartSec = Math.floor(timestamp / 1000 / 3600) * 3600;
      const hourStartTime = hourStartSec * 1000;
      
      setHourlySliderValue(hourStartTime);
      fetchHourlyRecords(hourStartSec, hourStartSec + 3600, { targetRecordId: recordId });
    }
  }, [jumpRequest]);

  // 自动定位到最新有数据的时间段
  useEffect(() => {
    if (jumpRequest) return;
    if (!selectedDate) return;

    // 找到所有有数据的段，并取最后一个（最新的）
    const activeSegments = hourlySegments.filter(s => s.active);
    const activeSegment = activeSegments.length > 0 ? activeSegments[activeSegments.length - 1] : undefined;

    if (activeSegment) {
      // 检查是否需要跳转：
      // 1. 当前没有记录（初始化）
      // 2. 当前记录不属于选中的日期（切换日期）
      let shouldJump = false;
      if (records.length === 0) {
        shouldJump = true;
      } else {
        const recordDate = new Date(records[0].timestamp);
        const recordDateStr = `${recordDate.getFullYear()}-${(recordDate.getMonth() + 1).toString().padStart(2, '0')}-${recordDate.getDate().toString().padStart(2, '0')}`;
        if (recordDateStr !== selectedDate) {
          shouldJump = true;
        }
      }

      if (shouldJump) {
        const newValue = activeSegment.start + 1800000; // 定位到中间
        setHourlySliderValue(newValue);
        const selectedSec = Math.floor(newValue / 3600000) * 3600;
        fetchHourlyRecords(selectedSec, selectedSec + 3600);
      }
    } else {
      // 当天没有数据，清空旧数据以避免误导
      if (records.length > 0) {
        setRecords([]);
        setSelectedRecord(null);
        setShowDetailTimeline(false);
      }
      setHourlySliderValue(hourlyMinTime);
    }
  }, [selectedDate, hourlySegments, jumpRequest, records, hourlyMinTime]);

  useEffect(() => {
    setDetailedSliderValue(timeRange.min);
  }, [timeRange.min]);

  useEffect(() => {
    setImagesLoadedCount(0);

    if (selectedRecord) {
      const idx = records.findIndex(rec => rec.timestamp === selectedRecord.timestamp);
      setCurrentFrameIndex(idx);
      setDetailedSliderValue(new Date(selectedRecord.timestamp).getTime());
    }
    if (autoPlay) {
      startAutoPlayTimer();
    }
  }, [selectedRecord, records, autoPlay, startAutoPlayTimer]);

  useEffect(() => {
    if (selectedRecord) {
      setLoadingImageIds(new Set(selectedRecord.screenshots.map(s => s.fileId)));
    } else {
      setLoadingImageIds(new Set());
    }
  }, [selectedRecord]);

  useEffect(() => {
    if (autoPlay) {
      stopAutoPlayTimer();
      startAutoPlayTimer();
    }
  }, [autoPlay, autoPlaySpeed, startAutoPlayTimer]);

  return (
    <div className="lg:flex lg:gap-6 items-start">
      <div className="lg:w-1/3 lg:flex-shrink-0 space-y-8">
        {/* 小时分布滑块（时间分布） */}
        <div>
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-medium text-gray-900 dark:text-white">时间分布</h2>
            <button
              onClick={fetchTimeDistribution}
              className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
            >
              <RefreshCcw className={`h-5 w-5 text-gray-600 dark:text-gray-400 ${loadingDistribution ? 'animate-spin' : ''}`} />
            </button>
          </div>

          <RecordDatePicker
            value={selectedDate}
            dailyCounts={dailyCounts}
            onChange={onDateChange}
          />

          {hourlySegments.length > 0 ? (
            <div className="mt-4">
              <TimelineSlider
                minTime={hourlyMinTime}
                maxTime={hourlyMaxTime}
                value={hourlySliderValue}
                mode="segments"
                segments={hourlySegments}
                onChange={onHourlySliderChange}
              />
            </div>
          ) : (
            <div className="text-gray-500 dark:text-gray-400 mt-4">加载时间分布中...</div>
          )}
        </div>

        {/* 详细时间点滑块 */}
        {showDetailTimeline && (
          <div>
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-medium text-gray-900 dark:text-white">时间点详情</h2>
              <div className="flex items-center gap-2">
                <button
                  onClick={generateVideo}
                  disabled={generatingVideo}
                  className="flex items-center gap-2 px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white text-sm rounded focus:outline-none transition-colors"
                  title="生成视频"
                >
                  {generatingVideo ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    <Video className="h-4 w-4" />
                  )}
                  {generatingVideo ? '生成中...' : '生成视频'}
                </button>
                <button
                  onClick={() => {
                    const selectedSec = Math.floor(hourlySliderValue / 3600000) * 3600;
                    fetchHourlyRecords(selectedSec, selectedSec + 3600, { keepSelection: true });
                  }}
                  className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
                  title="刷新"
                >
                  <RefreshCcw className={`h-5 w-5 text-gray-600 dark:text-gray-400 ${loadingRecords ? 'animate-spin' : ''}`} />
                </button>
              </div>
            </div>

            {records.length > 0 ? (
              <TimelineSlider
                minTime={timeRange.min}
                maxTime={timeRange.max}
                value={detailedSliderValue}
                mode="ticks"
                markers={detailedMarkers}
                onChange={onDetailedSliderChange}
              />
            ) : (
              <div className="text-gray-500 dark:text-gray-400">加载记录中...</div>
            )}
          </div>
        )}
      </div>

      {/* 图片预览区域及控制按钮 */}
      <div className="lg:flex-1 min-w-0 mt-8 lg:mt-0">
        {selectedRecord && (
          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            {
              !(navigator as any).connection?.saveData &&
              records.map(record => record.screenshots).flat()
                .filter((_, index) => Math.abs(index - currentFrameIndex) <= 20)
                .map(screenshot => <link rel="preload" key={screenshot.fileId} href={`/screenshots/${screenshot.fileId}`} as="image" />)
            }
            {/* 图片预览区域 */}
            {selectedRecord.screenshots.map((screenshot, sIndex) => (
              <div key={sIndex} className="relative mb-6">
                <div
                  className="relative w-full"
                  style={{ aspectRatio: imageAspectRatio }}
                >
                  <img
                    src={`/screenshots/${screenshot.fileId}`}
                    alt={screenshot.monitorName}
                    className="absolute top-0 left-0 w-full h-full object-contain shadow-sm hover:shadow-md transition-shadow"
                    onLoad={(e) => onImageLoad(e, screenshot.fileId)}
                    onError={() => onImageError(screenshot.fileId)}
                  />
                  {loadingImageIds.has(screenshot.fileId) && (
                    <div className="absolute top-2 right-2 bg-black/40 rounded-full p-2">
                      <Loader2 className="h-5 w-5 text-white animate-spin" />
                    </div>
                  )}
                </div>

                {/* 图片说明 */}
                <div className="absolute bottom-4 left-4 bg-black/40 dark:bg-gray-900/40 text-white px-2 py-1 rounded">
                  <div className="text-sm">{screenshot.monitorName}</div>
                  <div className="text-xs">
                    {new Date(selectedRecord.timestamp).toLocaleString()}
                  </div>
                </div>

                {/* 左侧点击区域 - 上一帧 */}
                <div
                  onPointerDown={(e) => { e.preventDefault(); prevFrame(); }}
                  onTouchStart={(e) => e.preventDefault()}
                  className="absolute bottom-0 left-0 h-full w-1/3 text-white px-2 py-1 cursor-pointer"
                />

                {/* 右侧点击区域 - 下一帧 */}
                <div
                  onPointerDown={(e) => { e.preventDefault(); nextFrame(); }}
                  onTouchStart={(e) => e.preventDefault()}
                  className="absolute bottom-0 right-0 h-full w-1/3 text-white px-2 py-1 cursor-pointer"
                />
              </div>
            ))}

            {/* 控制按钮区域 */}
            <div className="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4 mb-6 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50">
              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">

                {/* 速度控制 */}
                <div className="flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg px-4 py-2.5 shadow-sm border border-gray-200 dark:border-gray-600">
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300 min-w-max">播放速度</span>
                  <div className="flex items-center gap-2">
                    <input
                      type="number"
                      value={autoPlaySpeed}
                      onChange={(e) => setAutoPlaySpeed(Number(e.target.value))}
                      className="w-20 text-sm px-3 py-1.5 border border-gray-300 dark:border-gray-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors"
                      min="0"
                      max="2000"
                      step="50"
                    />
                    <span className="text-sm text-gray-500 dark:text-gray-400 min-w-max">毫秒</span>
                  </div>
                </div>

                {/* 播放控制按钮 */}
                <button
                  onClick={toggleAutoPlay}
                  className={`flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 shadow-sm ${autoPlay
                    ? 'bg-red-500 hover:bg-red-600 text-white shadow-red-500/25'
                    : 'bg-blue-500 hover:bg-blue-600 text-white shadow-blue-500/25'
                    } hover:shadow-lg hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 ${autoPlay ? 'focus:ring-red-500' : 'focus:ring-blue-500'
                    }`}
                >
                  {!autoPlay ? (
                    <>
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
                      </svg>
                      播放
                    </>
                  ) : (
                    <>
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
                      </svg>
                      暂停
                    </>
                  )}
                </button>

                {/* 星标按钮 */}
                <button
                  onClick={() => handleToggleStar(selectedRecord.id)}
                  disabled={updatingStars.has(selectedRecord.id)}
                  className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 shadow-sm border ${selectedRecord.isStarred
                    ? 'bg-yellow-50 hover:bg-yellow-100 dark:bg-yellow-900/20 dark:hover:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800 shadow-yellow-500/20'
                    : 'bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-600 hover:text-yellow-600 dark:hover:text-yellow-400'
                    } ${updatingStars.has(selectedRecord.id)
                      ? 'opacity-50 cursor-not-allowed'
                      : 'hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500'
                    }`}
                  title={selectedRecord.isStarred ? '取消星标' : '添加星标'}
                >
                  {updatingStars.has(selectedRecord.id) ? (
                    <>
                      <Loader2 className="h-4 w-4 animate-spin" />
                      处理中
                    </>
                  ) : (
                    <>
                      <Star className={`h-4 w-4 ${selectedRecord.isStarred ? 'fill-current' : ''}`} />
                      {selectedRecord.isStarred ? '已收藏' : '收藏'}
                    </>
                  )}
                </button>
              </div>

              {/* 快捷键提示 */}
              <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
                <div className="flex flex-wrap justify-center gap-4 text-xs text-gray-500 dark:text-gray-400">
                  <span className="flex items-center gap-1">
                    <kbd className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">空格</kbd>
                    播放/暂停
                  </span>
                  <span className="flex items-center gap-1">
                    <kbd className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">←/→</kbd>
                    上一帧/下一帧
                  </span>
                  <span className="flex items-center gap-1">
                    <kbd className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">S</kbd>
                    切换星标
                  </span>
                </div>
              </div>
            </div>

            {/* 窗口信息 */}
            <div className="w-full">
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-3">活动窗口</h3>
              <div className="bg-gray-50 dark:bg-gray-700 rounded-md p-4">
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                  {selectedRecord.windows.map((window, index) => (
                    <div key={index} className="p-4 bg-white dark:bg-gray-800 rounded-md shadow-sm">
                      <div className="space-y-2">
                        <div className="font-medium text-gray-900 dark:text-white">
                          {window.title}
                        </div>
                        <div className="text-sm text-gray-500 dark:text-gray-400 break-all">
                          {window.path}
                        </div>
                        <div className="text-sm flex items-center text-gray-600 dark:text-gray-400">
                          内存占用: {formatMemory(window.memory)}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}