import React, { useState, useEffect } from 'react';
import {
  MessageCircle,
  Heart,
  Image as ImageIcon,
  AlertTriangle,
  Video,
  Maximize2,
} from 'lucide-react';
import { MetricCard } from '../components/MetricCard';
import { TrendChart } from '../components/TrendChart';
import * as moodService from '../services/moodService';
import * as mediaService from '../services/mediaService';

/**
 * 家属端 Dashboard - 今天概览
 * 手机浏览器优化 - 单列布局，紧凑显示
 * 一页看完今天所有重要信息
 */

interface DashboardProps {
  onNavigate?: (page: 'interaction' | 'messages' | 'care' | 'alerts' | 'media' | 'mood') => void;
}

interface ChatMessage {
  username: string;
  is_adopted: number;
  type: 'fay' | 'member';
  way: string;
  content: string;
  createtime: number;
  timetext: string;
}

const API_BASE_URL = 'http://127.0.0.1:5000';
const familyId = 'family_001';

export const Dashboard: React.FC<DashboardProps> = ({ onNavigate }) => {
  const [isVideoFullscreen, setIsVideoFullscreen] = useState(false);
  const [todayInteractionCount, setTodayInteractionCount] = useState(0);
  const [latestMood, setLatestMood] = useState<moodService.MoodRecord | null>(null);
  const [moodStats, setMoodStats] = useState<moodService.MoodStatsResponse | null>(null);
  const [recentPlays, setRecentPlays] = useState<mediaService.RecentPlay[]>([]);

  // 加载今日交互次数
  const loadTodayInteractionCount = async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/get-msg`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username: 'User', limit: 300 }),
      });

      if (response.ok) {
        const data = await response.json();
        const messages: ChatMessage[] = data.list || [];

        // 获取今天的开始时间戳（00:00:00）
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        const todayTimestamp = Math.floor(today.getTime() / 1000);

        // 统计今天老人说的话（type === 'member'）
        const todayMemberMessages = messages.filter(
          msg => msg.type === 'member' && msg.createtime >= todayTimestamp
        );

        setTodayInteractionCount(todayMemberMessages.length);
      }
    } catch (error) {
      console.error('获取今日交互次数失败:', error);
      // 失败时保持为0，不影响页面显示
    }
  };

  // 加载情绪数据
  const loadMoodData = async () => {
    try {
      const [latest, stats] = await Promise.all([
        moodService.getFamilyMoods(familyId, { limit: 1 }),
        moodService.getMoodStats(familyId, { days: 7 }),
      ]);

      if (latest.records.length > 0) {
        setLatestMood(latest.records[0]);
      }
      setMoodStats(stats);
    } catch (error) {
      console.error('加载情绪数据失败:', error);
    }
  };

  // 加载最近播放
  const loadRecentPlays = async () => {
    try {
      const plays = await mediaService.getRecentPlays(familyId, 2);
      setRecentPlays(plays);
    } catch (error) {
      console.error('加载最近播放失败:', error);
    }
  };

  useEffect(() => {
    loadTodayInteractionCount();
    loadMoodData();
    loadRecentPlays();
    // 每30秒刷新一次
    const interval = setInterval(() => {
      loadTodayInteractionCount();
      loadMoodData();
      loadRecentPlays();
    }, 30000);
    return () => clearInterval(interval);
  }, []);

  // 情绪趋势数据 - 使用真实数据或默认数据
  const emotionData = moodStats?.daily_stats.map(stat => ({
    date: new Date(stat.date).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
    value: stat.avg_score,
  })) || [];


  // 格式化播放时间
  const formatPlayTime = (playedAt: string) => {
    const playTime = new Date(playedAt);
    const now = new Date();
    const diffMs = now.getTime() - playTime.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMs / 3600000);
    const diffDays = Math.floor(diffMs / 86400000);

    if (diffMins < 1) return '刚刚';
    if (diffMins < 60) return `${diffMins}分钟前`;
    if (diffHours < 24) return `${diffHours}小时前`;
    if (diffDays === 1) return '昨天';
    if (diffDays < 7) return `${diffDays}天前`;

    return playTime.toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' });
  };


  return (
    <div className="min-h-screen bg-gray-50">
      {/* 主要内容区 - 手机优化 */}
      <div className="px-4 py-4">
        {/* 实时监控视频 */}
        <div className="card p-0 mb-4 overflow-hidden">
          <div className="relative">
            {/* 视频播放器 */}
            <div className="relative bg-gray-900 aspect-video">
              {/* 模拟视频画面 */}
              <div className="absolute inset-0 flex items-center justify-center">
                <Video size={48} className="text-gray-600" />
              </div>

              {/* 实时状态标签 */}
              <div className="absolute top-3 left-3 flex items-center gap-1.5 bg-red-600 text-white px-2.5 py-1 rounded-full text-xs font-medium">
                <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                实时
              </div>

              {/* 全屏按钮 */}
              <button
                onClick={() => setIsVideoFullscreen(!isVideoFullscreen)}
                className="absolute top-3 right-3 bg-black/50 hover:bg-black/70 text-white p-2 rounded-lg transition-colors"
              >
                <Maximize2 size={18} />
              </button>

              {/* 视频信息叠加 */}
              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                <div className="text-white">
                  <div className="text-xs opacity-90 mb-0.5">客厅监控</div>
                  <div className="text-sm font-medium">张奶奶正在与数字人对话</div>
                </div>
              </div>
            </div>

            {/* 视频控制栏 */}
            <div className="bg-white border-t border-gray-200 px-4 py-2.5">
              <div className="flex items-center justify-between text-xs">
                <div className="flex items-center gap-3">
                  <span className="text-gray-600">画质：高清</span>
                  <span className="text-gray-300">|</span>
                  <span className="text-gray-600">延迟：&lt;1s</span>
                </div>
                <button className="text-primary-600 hover:text-primary-700 font-medium">
                  切换摄像头
                </button>
              </div>
            </div>
          </div>
        </div>


        {/* 关键指标卡片 - 手机单列布局 */}
        <div className="grid grid-cols-2 gap-3 mb-4">
          <MetricCard
            title="今日交互"
            value={`${todayInteractionCount}次`}
            subtitle="老人与数字人对话"
            icon={MessageCircle}
            color="blue"
            onClick={() => onNavigate?.('interaction')}
          />
          <MetricCard
            title="情绪状态"
            value={latestMood ? moodService.moodEmojiMap[latestMood.mood_type] : '暂无记录'}
            subtitle={latestMood
              ? `${latestMood.mood_score}分 · ${moodService.formatRecordTime(latestMood.recorded_at || latestMood.created_at || '')}`
              : '等待老人记录情绪'}
            icon={Heart}
            color={latestMood && latestMood.mood_score >= 6 ? 'green' : latestMood && latestMood.mood_score >= 4 ? 'yellow' : 'red'}
            onClick={() => onNavigate?.('mood')}
          />
        </div>

        {/* 趋势图表 - 手机单列堆叠 */}
        <div className="space-y-4 mb-4">
          <TrendChart
            title="近 7 天情绪趋势"
            data={emotionData}
            color="#10b981"
            height={220}
          />
        </div>

        {/* 最近播放 - 手机优化 */}
        <div className="card p-4 mb-4">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-base font-bold text-gray-900">最近播放</h3>
            <button
              onClick={() => onNavigate?.('media')}
              className="text-sm text-primary-600 hover:text-primary-700 font-medium"
            >
              全部
            </button>
          </div>
          {recentPlays.length > 0 ? (
            <div className="space-y-3">
              {recentPlays.map((media) => (
                <div
                  key={media.id}
                  className="flex gap-3 p-3 rounded-lg border border-gray-200 active:bg-primary-50 transition-colors"
                >
                  <div className="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
                    {media.thumbnail_path ? (
                      <img
                        src={mediaService.getThumbnailUrl(media.thumbnail_path)}
                        alt={media.title}
                        className="w-full h-full object-cover"
                        onError={(e) => {
                          e.currentTarget.style.display = 'none';
                        }}
                      />
                    ) : (
                      <ImageIcon size={24} className="text-gray-400" />
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <h4 className="text-sm font-medium text-gray-900 mb-1 truncate">
                      {media.title}
                    </h4>
                    <p className="text-xs text-gray-500 mb-2">{formatPlayTime(media.played_at)}</p>
                    <div className="flex items-center gap-3 text-xs">
                      <span className="text-green-600">👍 {media.likes}</span>
                      <span className="text-red-600">👎 {media.dislikes}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-8 text-gray-400">
              <p className="text-sm">还没有播放记录</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
