import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';
import Link from 'next/link';
import { toast } from 'react-hot-toast';
import { 
  PhoneIcon, 
  VideoCameraIcon, 
  UserGroupIcon, 
  ClockIcon,
  CurrencyDollarIcon,
  ExclamationTriangleIcon,
  PlayIcon,
  StopIcon,
  UserPlusIcon,
  ArrowRightOnRectangleIcon
} from '@heroicons/react/24/outline';
import { auth, db, TABLES, realtime, supabase } from '@/lib/supabase';
import { getDemoData } from '@/lib/demo-data';
import { Call, CallStats, Interpreter, User } from '@/types';
import { 
  formatCurrency, 
  formatTime, 
  formatDuration, 
  getCallStatusText, 
  getCallModeText,
  getStatusColor
} from '@/utils';
import Layout from '@/components/Layout';

interface DashboardProps {
  user?: User;
}

export default function Dashboard({ user }: DashboardProps) {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState<CallStats>({
    total_calls_today: 0,
    active_calls: 0,
    average_response_time: 0,
    online_interpreters: 0,
    total_revenue_today: 0,
    currency: 'CNY',
  });
  const [activeCalls, setActiveCalls] = useState<Call[]>([]);
  const [onlineInterpreters, setOnlineInterpreters] = useState<Interpreter[]>([]);
  const [isDemoMode, setIsDemoMode] = useState(false);

  // 获取仪表盘数据
  const fetchDashboardData = async () => {
    try {
      setLoading(true);
      
      // 检查是否为演示模式
      const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
      const isDemoMode = !supabaseUrl || supabaseUrl === 'https://demo.supabase.co' || supabaseUrl === '';
      setIsDemoMode(isDemoMode);
      
      if (isDemoMode) {
        // 使用演示数据
        const [statsData, callsData, interpretersData] = await Promise.all([
          getDemoData.stats(),
          getDemoData.calls(),
          getDemoData.interpreters(),
        ]);
        
        // 转换演示数据格式以匹配类型定义
        setStats({
          total_calls_today: statsData.todayCalls,
          active_calls: statsData.activeCalls,
          average_response_time: statsData.avgResponseTime,
          online_interpreters: statsData.onlineInterpreters,
          total_revenue_today: statsData.todayRevenue,
          currency: 'CNY',
        });
        
        // 转换通话数据格式
        const formattedCalls = callsData
          .filter(call => call.status === 'active')
          .map(call => ({
            id: call.id,
            caller_id: call.user_id,
            callee_id: call.interpreter_id,
            call_type: 'audio' as const,
            call_mode: 'human_interpreter' as const,
            status: call.status as 'active',
            start_time: call.start_time,
            end_time: call.end_time,
            duration: call.duration,
            cost: call.cost,
            currency: 'CNY' as const,
            created_at: call.created_at,
            updated_at: call.created_at,
          }));
        
        // 转换翻译员数据格式
        const formattedInterpreters = interpretersData
          .filter(interpreter => interpreter.status !== 'offline')
          .map(interpreter => ({
            id: interpreter.id,
            user_id: interpreter.id,
            name: interpreter.name,
            avatar_url: interpreter.avatar_url,
            languages: interpreter.languages,
            specializations: interpreter.specialties,
            hourly_rate: 100,
            currency: 'CNY' as const,
            rating: interpreter.rating,
            total_calls: 50,
            status: interpreter.status === 'busy' ? 'busy' as const : 'online' as const,
            is_certified: true,
            created_at: new Date().toISOString(),
            updated_at: new Date().toISOString(),
          }));
        
        setActiveCalls(formattedCalls);
        setOnlineInterpreters(formattedInterpreters);
      } else {
        // 使用真实数据
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        // 获取今日通话统计
        const { data: todayCalls } = await supabase
          .from(TABLES.CALLS)
          .select('*')
          .gte('created_at', today.toISOString());
        
        // 获取活跃通话
        const { data: activeCallsData } = await supabase
          .from(TABLES.CALLS)
          .select(`
            *,
            user:users(full_name, email),
            interpreter:interpreters(name, rating)
          `)
          .eq('status', 'active');
        
        // 获取在线翻译员
        const { data: interpretersData } = await supabase
          .from(TABLES.INTERPRETERS)
          .select('*')
          .neq('status', 'offline');
        
        // 计算统计数据
        const totalRevenue = todayCalls && todayCalls.length > 0
          ? todayCalls
              .filter(call => call.status === 'ended')
              .reduce((sum, call) => sum + call.cost, 0)
          : 0;
        
        const avgResponseTime = todayCalls && todayCalls.length > 0
          ? todayCalls.reduce((sum, call) => {
              const startTime = new Date(call.start_time);
              const createdTime = new Date(call.created_at);
              return sum + (startTime.getTime() - createdTime.getTime()) / 1000;
            }, 0) / todayCalls.length
          : 0;
        
        setStats({
          total_calls_today: todayCalls?.length || 0,
          active_calls: activeCallsData?.length || 0,
          average_response_time: Math.round(avgResponseTime),
          online_interpreters: interpretersData?.length || 0,
          total_revenue_today: totalRevenue,
          currency: 'CNY',
        });
        
        setActiveCalls(activeCallsData || []);
        setOnlineInterpreters(interpretersData || []);
      }
    } catch (error) {
      console.error('获取仪表盘数据失败:', error);
      toast.error('获取数据失败，请稍后重试');
      
      // 如果获取真实数据失败，切换到演示模式
      setIsDemoMode(true);
      const [statsData, callsData, interpretersData] = await Promise.all([
        getDemoData.stats(),
        getDemoData.calls(),
        getDemoData.interpreters(),
      ]);
      
      setStats({
        total_calls_today: statsData.todayCalls,
        active_calls: statsData.activeCalls,
        average_response_time: statsData.avgResponseTime,
        online_interpreters: statsData.onlineInterpreters,
        total_revenue_today: statsData.todayRevenue,
        currency: 'CNY',
      });
      
      // 设置空数组避免类型错误
      setActiveCalls([]);
      setOnlineInterpreters([]);
    } finally {
      setLoading(false);
    }
  };

  // 强制结束通话
  const handleEndCall = async (callId: string) => {
    try {
      await db.update(TABLES.CALLS, callId, {
        status: 'ended',
        end_time: new Date().toISOString()
      });
      toast.success('通话已结束');
      fetchDashboardData();
    } catch (error) {
      console.error('Error ending call:', error);
      toast.error('结束通话失败');
    }
  };

  // 分配翻译员
  const handleAssignInterpreter = async (callId: string, interpreterId: string) => {
    try {
      await db.update(TABLES.CALLS, callId, {
        callee_id: interpreterId,
        call_mode: 'human_interpreter'
      });
      toast.success('翻译员已分配');
      fetchDashboardData();
    } catch (error) {
      console.error('Error assigning interpreter:', error);
      toast.error('分配翻译员失败');
    }
  };

  useEffect(() => {
    // 在演示模式下不检查用户认证
    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
    const isDemoMode = !supabaseUrl || supabaseUrl === 'https://demo.supabase.co' || supabaseUrl === '';
    
    if (!isDemoMode && !user) {
      router.push('/auth/login');
      return;
    }

    fetchDashboardData();

    // 设置实时数据更新
    const callsChannel = realtime.subscribe(
      TABLES.CALLS,
      () => {
        fetchDashboardData();
      }
    );

    const interpretersChannel = realtime.subscribe(
      TABLES.INTERPRETERS,
      () => {
        fetchDashboardData();
      }
    );

    // 每30秒刷新一次数据
    const interval = setInterval(fetchDashboardData, 30000);

    return () => {
      clearInterval(interval);
      realtime.unsubscribe(callsChannel);
      realtime.unsubscribe(interpretersChannel);
    };
  }, [user, router]);

  if (loading) {
    return (
      <Layout user={user}>
        <div className="min-h-screen flex items-center justify-center">
          <div className="loading-spinner"></div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout user={user}>
      <Head>
        <title>仪表盘 - 口译服务管理后台</title>
      </Head>

      {/* 主要内容区域 */}
      <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          {/* 统计卡片 */}
          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
            <div className="bg-white overflow-hidden shadow rounded-lg">
              <div className="p-5">
                <div className="flex items-center">
                  <div className="flex-shrink-0">
                    <PhoneIcon className="h-6 w-6 text-gray-400" />
                  </div>
                  <div className="ml-5 w-0 flex-1">
                    <dl>
                      <dt className="text-sm font-medium text-gray-500 truncate">
                        今日通话总量
                      </dt>
                      <dd className="text-lg font-medium text-gray-900">
                        {stats.total_calls_today}
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-white overflow-hidden shadow rounded-lg">
              <div className="p-5">
                <div className="flex items-center">
                  <div className="flex-shrink-0">
                    <VideoCameraIcon className="h-6 w-6 text-green-400" />
                  </div>
                  <div className="ml-5 w-0 flex-1">
                    <dl>
                      <dt className="text-sm font-medium text-gray-500 truncate">
                        当前活跃通话
                      </dt>
                      <dd className="text-lg font-medium text-gray-900">
                        {stats.active_calls}
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-white overflow-hidden shadow rounded-lg">
              <div className="p-5">
                <div className="flex items-center">
                  <div className="flex-shrink-0">
                    <UserGroupIcon className="h-6 w-6 text-blue-400" />
                  </div>
                  <div className="ml-5 w-0 flex-1">
                    <dl>
                      <dt className="text-sm font-medium text-gray-500 truncate">
                        在线翻译员
                      </dt>
                      <dd className="text-lg font-medium text-gray-900">
                        {stats.online_interpreters}
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-white overflow-hidden shadow rounded-lg">
              <div className="p-5">
                <div className="flex items-center">
                  <div className="flex-shrink-0">
                    <CurrencyDollarIcon className="h-6 w-6 text-yellow-400" />
                  </div>
                  <div className="ml-5 w-0 flex-1">
                    <dl>
                      <dt className="text-sm font-medium text-gray-500 truncate">
                        今日收入
                      </dt>
                      <dd className="text-lg font-medium text-gray-900">
                        {formatCurrency(stats.total_revenue_today, 'CNY')}
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 主要内容区域 */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* 活跃通话列表 */}
            <div className="lg:col-span-2">
              <div className="bg-white shadow rounded-lg">
                <div className="px-4 py-5 sm:p-6">
                  <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
                    实时通话列表
                  </h3>
                  <div className="space-y-4">
                    {activeCalls.length === 0 ? (
                      <p className="text-gray-500 text-center py-8">
                        当前没有活跃通话
                      </p>
                    ) : (
                      activeCalls.map((call) => (
                        <div
                          key={call.id}
                          className="flex items-center justify-between p-4 border border-gray-200 rounded-lg"
                        >
                          <div className="flex-1">
                            <div className="flex items-center space-x-3">
                              <div className={`call-status ${call.status}`}>
                                <div className="w-3 h-3 rounded-full bg-green-500"></div>
                              </div>
                              <div>
                                <p className="text-sm font-medium text-gray-900">
                                  {getCallModeText(call.call_mode)}
                                </p>
                                <p className="text-xs text-gray-500">
                                  {formatTime(call.start_time)}
                                </p>
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center space-x-2">
                            <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(call.status)}`}>
                              {getCallStatusText(call.status)}
                            </span>
                            <div className="flex space-x-1">
                              <button
                                onClick={() => handleEndCall(call.id)}
                                className="p-1 text-red-600 hover:text-red-500"
                                title="强制结束通话"
                              >
                                <StopIcon className="h-4 w-4" />
                              </button>
                              <button
                                onClick={() => {/* 跳转到通话详情 */}}
                                className="p-1 text-blue-600 hover:text-blue-500"
                                title="查看详情"
                              >
                                <PlayIcon className="h-4 w-4" />
                              </button>
                            </div>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              </div>
            </div>

            {/* 在线翻译员 */}
            <div>
              <div className="bg-white shadow rounded-lg">
                <div className="px-4 py-5 sm:p-6">
                  <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
                    在线翻译员
                  </h3>
                  <div className="space-y-3">
                    {onlineInterpreters.length === 0 ? (
                      <p className="text-gray-500 text-center py-4">
                        暂无翻译员在线
                      </p>
                    ) : (
                      onlineInterpreters.slice(0, 5).map((interpreter) => (
                        <div
                          key={interpreter.id}
                          className="flex items-center justify-between"
                        >
                          <div className="flex items-center space-x-3">
                            <img
                              className="h-8 w-8 rounded-full"
                              src={interpreter.avatar_url || `https://ui-avatars.com/api/?name=${interpreter.name}`}
                              alt={interpreter.name}
                            />
                            <div>
                              <p className="text-sm font-medium text-gray-900">
                                {interpreter.name}
                              </p>
                              <p className="text-xs text-gray-500">
                                评分: {interpreter.rating}/5
                              </p>
                            </div>
                          </div>
                          <div className="flex items-center space-x-1">
                            <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                            <span className="text-xs text-green-600">在线</span>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}