import React, { useState, useEffect } from 'react';
import { ThumbsUp, ThumbsDown, X, Grid3x3 } from 'lucide-react';
import * as mediaService from '../services/mediaService';
import { MediaLibraryGrid } from './MediaLibraryGrid';

interface MediaPlayerProps {
  familyId: string;
  elderlyId: number;
  currentMood?: string;
  onClose?: () => void;
}

/**
 * 老人端媒体播放器组件
 * 自动获取推荐媒体并播放，支持点赞/点踩反馈
 */
export const MediaPlayer: React.FC<MediaPlayerProps> = ({
  familyId,
  elderlyId,
  currentMood,
  onClose,
}) => {
  const [recommendedMedia, setRecommendedMedia] = useState<mediaService.RecommendedMedia[]>([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [loading, setLoading] = useState(true);
  const [playStartTime, setPlayStartTime] = useState<Date | null>(null);
  const [hasGivenFeedback, setHasGivenFeedback] = useState(false);
  const [showGrid, setShowGrid] = useState(false);

  // 加载推荐媒体
  useEffect(() => {
    loadRecommendedMedia();
  }, [familyId, elderlyId, currentMood]);

  // 记录播放开始时间
  useEffect(() => {
    if (currentMedia) {
      setPlayStartTime(new Date());
      setHasGivenFeedback(false);
    }
  }, [currentIndex]);

  const loadRecommendedMedia = async () => {
    try {
      setLoading(true);
      const media = await mediaService.getRecommendedMedia(
        familyId,
        elderlyId,
        currentMood
      );
      setRecommendedMedia(media);
      // 如果有媒体，记录第一个的播放
      if (media.length > 0) {
        recordPlayStart(media[0].id);
      }
    } catch (error) {
      console.error('加载推荐媒体失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 记录播放开始（不等待完成）
  const recordPlayStart = async (mediaId: number) => {
    try {
      await mediaService.recordMediaPlay(mediaId, {
        elderly_id: elderlyId,
        duration_watched: 0,
        completed: 0,
        triggered_by: 'auto',
        mood_before: currentMood,
      });
      console.log('播放记录已创建, mediaId:', mediaId);
    } catch (error) {
      console.error('记录播放开始失败:', error);
    }
  };

  const currentMedia = recommendedMedia[currentIndex];

  // 记录播放
  const recordPlay = async (completed: boolean = false) => {
    if (!currentMedia || !playStartTime) return;

    const durationWatched = Math.floor((new Date().getTime() - playStartTime.getTime()) / 1000);

    try {
      await mediaService.recordMediaPlay(currentMedia.id, {
        elderly_id: elderlyId,
        duration_watched: durationWatched,
        completed: completed ? 1 : 0,
        triggered_by: 'auto',
        mood_before: currentMood,
      });
    } catch (error) {
      console.error('记录播放失败:', error);
    }
  };

  // 处理反馈
  const handleFeedback = async (type: 'like' | 'dislike') => {
    if (!currentMedia || hasGivenFeedback) return;

    try {
      await mediaService.submitFeedback(currentMedia.id, {
        elderly_id: elderlyId,
        feedback_type: type,
      });
      setHasGivenFeedback(true);

      // 自动切换到下一个
      setTimeout(() => {
        handleNext();
      }, 1000);
    } catch (error) {
      console.error('提交反馈失败:', error);
    }
  };

  // 下一个媒体
  const handleNext = async () => {
    await recordPlay(true);

    if (currentIndex < recommendedMedia.length - 1) {
      const nextIndex = currentIndex + 1;
      setCurrentIndex(nextIndex);
      // 记录下一个媒体的播放
      recordPlayStart(recommendedMedia[nextIndex].id);
    } else {
      // 已经是最后一个，重新加载
      await loadRecommendedMedia();
      setCurrentIndex(0);
    }
  };

  // 关闭播放器
  const handleClose = async () => {
    await recordPlay(false);
    onClose?.();
  };

  if (loading) {
    return (
      <div className="fixed inset-0 bg-black flex items-center justify-center z-50">
        <div className="text-white text-xl">正在加载...</div>
      </div>
    );
  }

  if (!currentMedia) {
    return (
      <div className="fixed inset-0 bg-black flex items-center justify-center z-50">
        <div className="text-white text-center">
          <p className="text-xl mb-4">暂时没有推荐的照片或视频</p>
          <button
            onClick={handleClose}
            className="px-6 py-3 bg-white text-black rounded-lg hover:bg-gray-200 transition-colors"
          >
            关闭
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 bg-black flex flex-col z-50">
      {/* 数字人小圆圈头像 - 左上角 */}
      <div className="absolute top-6 left-6 z-20">
        <div className="relative">
          {/* 数字人圆圈 */}
          <div className="w-24 h-24 rounded-full bg-gradient-to-br from-primary-400 to-primary-500 shadow-2xl flex items-center justify-center border-4 border-white/30 backdrop-blur-sm animate-breathe">
            <div className="text-5xl">👤</div>
          </div>

          {/* 提示文字 */}
          <div className="absolute -bottom-10 left-0 bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full shadow-lg whitespace-nowrap">
            <p className="text-xs font-medium text-gray-700">随时问我</p>
          </div>
        </div>
      </div>

      {/* 标题和进度 - 顶部中间 */}
      <div className="absolute top-6 left-0 right-0 z-10 flex flex-col items-center gap-2 px-6">
        <p className="text-2xl font-bold text-white bg-black/60 backdrop-blur-sm px-6 py-3 rounded-2xl">
          {currentMedia.title}
        </p>
        {recommendedMedia.length > 1 && (
          <p className="text-base text-white bg-black/40 backdrop-blur-sm px-4 py-2 rounded-full">
            {currentIndex + 1} / {recommendedMedia.length}
          </p>
        )}
      </div>

      {/* 媒体内容区 */}
      <div className="flex-1 flex items-center justify-center p-8">
        {currentMedia.media_type === 'photo' ? (
          <img
            src={mediaService.getMediaUrl(currentMedia.file_path)}
            alt={currentMedia.title}
            className="max-w-full max-h-full object-contain"
          />
        ) : (
          <video
            src={mediaService.getMediaUrl(currentMedia.file_path)}
            controls
            autoPlay
            className="max-w-full max-h-full"
            onEnded={handleNext}
          />
        )}
      </div>

      {/* 底部操作栏 - 悬浮 */}
      <div className="absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/70 to-transparent backdrop-blur-md p-4">
        <div className="flex items-center justify-center gap-4 max-w-lg mx-auto">
          {/* 喜欢按钮 */}
          <button
            onClick={() => handleFeedback('like')}
            disabled={hasGivenFeedback}
            className={`
              ${hasGivenFeedback ? 'bg-gray-600 cursor-not-allowed' : 'bg-green-500 hover:bg-green-600'}
              text-white
              flex items-center justify-center gap-2
              px-6 py-4
              rounded-2xl
              shadow-xl
              active:scale-95
              transition-all
              flex-1
            `}
          >
            <ThumbsUp size={28} strokeWidth={2.5} />
            <span className="text-lg font-bold">喜欢</span>
          </button>

          {/* 不喜欢按钮 */}
          <button
            onClick={() => handleFeedback('dislike')}
            disabled={hasGivenFeedback}
            className={`
              ${hasGivenFeedback ? 'bg-gray-600 cursor-not-allowed' : 'bg-red-500 hover:bg-red-600'}
              text-white
              flex items-center justify-center gap-2
              px-6 py-4
              rounded-2xl
              shadow-xl
              active:scale-95
              transition-all
              flex-1
            `}
          >
            <ThumbsDown size={28} strokeWidth={2.5} />
            <span className="text-lg font-bold">不喜欢</span>
          </button>

          {/* 显示全部按钮 */}
          {recommendedMedia.length > 1 && (
            <button
              onClick={() => setShowGrid(true)}
              className="bg-blue-600 hover:bg-blue-700 text-white p-4 rounded-2xl shadow-xl active:scale-95 transition-all"
              aria-label="查看全部"
            >
              <Grid3x3 size={28} strokeWidth={2.5} />
            </button>
          )}

          {/* 关闭按钮 */}
          <button
            onClick={handleClose}
            className="bg-gray-700 hover:bg-gray-800 text-white p-4 rounded-2xl shadow-xl active:scale-95 transition-all"
            aria-label="关闭"
          >
            <X size={28} strokeWidth={2.5} />
          </button>
        </div>
      </div>

      {/* 网格视图弹窗 */}
      {showGrid && (
        <MediaLibraryGrid
          mediaList={recommendedMedia.map(m => ({
            id: m.id.toString(),
            url: mediaService.getMediaUrl(m.file_path),
            thumbnailUrl: m.thumbnail_path ? mediaService.getThumbnailUrl(m.thumbnail_path) : undefined,
            type: m.media_type,
            caption: m.title,
            tags: m.tags || []
          }))}
          currentIndex={currentIndex}
          onSelect={(index) => {
            setCurrentIndex(index);
            setShowGrid(false);
          }}
          onClose={() => setShowGrid(false)}
        />
      )}
    </div>
  );
};
