import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import {
  UserGroupIcon,
  PhoneIcon,
  DocumentTextIcon,
  CurrencyDollarIcon,
  ChartBarIcon,
  ClockIcon,
  CheckCircleIcon,
  ExclamationTriangleIcon,
  ArrowUpIcon,
  ArrowDownIcon,
  EyeIcon,
  PencilIcon,
  TrashIcon,
  PlayIcon,
  PauseIcon,
  StopIcon,
  MicrophoneIcon,
  VideoCameraIcon,
  GlobeAltIcon,
  BellIcon,
  CogIcon,
  UserIcon,
  BuildingOfficeIcon,
  CalendarDaysIcon,
  ChatBubbleLeftRightIcon,
  BanknotesIcon,
  UsersIcon,
  LanguageIcon,
  DocumentDuplicateIcon,
  InboxIcon,
  PhoneArrowUpRightIcon,
  PhoneArrowDownLeftIcon,
  TrophyIcon,
  StarIcon,
  HeartIcon,
  FireIcon,
  LightBulbIcon,
  ShieldCheckIcon,
  SparklesIcon,
  RocketLaunchIcon,
  MegaphoneIcon,
  GiftIcon,
  AcademicCapIcon,
  MapIcon,
  SunIcon,
  MoonIcon,
  ComputerDesktopIcon,
} from '@heroicons/react/24/outline';
import {
  CheckCircleIcon as CheckCircleIconSolid,
  ExclamationTriangleIcon as ExclamationTriangleIconSolid,
  ClockIcon as ClockIconSolid,
  XCircleIcon as XCircleIconSolid,
  UserGroupIcon as UserGroupIconSolid,
  PhoneIcon as PhoneIconSolid,
  DocumentTextIcon as DocumentTextIconSolid,
  CurrencyDollarIcon as CurrencyDollarIconSolid,
  ChartBarIcon as ChartBarIconSolid,
  BellIcon as BellIconSolid,
  StarIcon as StarIconSolid,
  HeartIcon as HeartIconSolid,
  FireIcon as FireIconSolid,
  TrophyIcon as TrophyIconSolid,
  SparklesIcon as SparklesIconSolid,
  RocketLaunchIcon as RocketLaunchIconSolid,
  GiftIcon as GiftIconSolid,
  AcademicCapIcon as AcademicCapIconSolid,
  ShieldCheckIcon as ShieldCheckIconSolid,
  LightBulbIcon as LightBulbIconSolid,
  MegaphoneIcon as MegaphoneIconSolid,
  MapIcon as MapIconSolid,
  SunIcon as SunIconSolid,
  MoonIcon as MoonIconSolid,
  ComputerDesktopIcon as ComputerDesktopIconSolid,
} from '@heroicons/react/24/solid';
import { toast } from 'react-hot-toast';
import { statsAPI } from '../../lib/api-service';

interface DashboardStats {
  totalUsers: number;
  totalInterpreters: number;
  totalOrders: number;
  totalCalls: number;
  activeUsers: number;
  activeCalls: number;
  recentOrders: any[];
  recentCalls: any[];
}

interface RecentActivity {
  id: string;
  type: 'order' | 'call' | 'user' | 'interpreter';
  title: string;
  description: string;
  time: string;
  status: 'success' | 'warning' | 'error' | 'info';
  icon: any;
}

export default function Dashboard() {
  const router = useRouter();
  const [stats, setStats] = useState<DashboardStats>({
    totalUsers: 0,
    totalInterpreters: 0,
    totalOrders: 0,
    totalCalls: 0,
    activeUsers: 0,
    activeCalls: 0,
    recentOrders: [],
    recentCalls: []
  });
  const [loading, setLoading] = useState(true);
  const [recentActivity, setRecentActivity] = useState<RecentActivity[]>([]);

  useEffect(() => {
    loadDashboardData();
  }, []);

  const loadDashboardData = async () => {
    try {
      setLoading(true);
      const dashboardStats = await statsAPI.getDashboardStats();
      setStats(dashboardStats);
      
      // 生成最近活动记录
      const activities: RecentActivity[] = [];
      
      // 添加最近订单活动
      dashboardStats.recentOrders.forEach((order: any) => {
        activities.push({
          id: order.id,
          type: 'order',
          title: `订单 ${order.order_number}`,
          description: `${order.user_name} - ${order.service_name}`,
          time: formatTime(order.created_at),
          status: getOrderStatus(order.status),
          icon: getOrderIcon(order.service_type)
        });
      });
      
      // 添加最近通话活动
      dashboardStats.recentCalls.forEach((call: any) => {
        activities.push({
          id: call.id,
          type: 'call',
          title: `${call.service_type === 'phone' ? '电话' : '视频'}通话`,
          description: `${call.users?.name || '用户'} - ${call.interpreters?.name || '翻译员'}`,
          time: formatTime(call.created_at),
          status: getCallStatus(call.status),
          icon: call.service_type === 'phone' ? PhoneIcon : VideoCameraIcon
        });
      });
      
      // 按时间排序
      activities.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime());
      setRecentActivity(activities.slice(0, 10));
      
    } catch (error) {
      console.error('加载仪表盘数据失败:', error);
      toast.error('加载仪表盘数据失败');
    } finally {
      setLoading(false);
    }
  };

  const getOrderStatus = (status: string) => {
    switch (status) {
      case 'completed': return 'success';
      case 'cancelled': return 'error';
      case 'in_progress': return 'warning';
      default: return 'info';
    }
  };

  const getCallStatus = (status: string) => {
    switch (status) {
      case 'ended': return 'success';
      case 'cancelled': return 'error';
      case 'connected': return 'warning';
      default: return 'info';
    }
  };

  const getOrderIcon = (serviceType: string) => {
    switch (serviceType) {
      case 'phone': return PhoneIcon;
      case 'video': return VideoCameraIcon;
      case 'document': return DocumentTextIcon;
      default: return LanguageIcon;
    }
  };

  const formatTime = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);

    if (days > 0) return `${days}天前`;
    if (hours > 0) return `${hours}小时前`;
    if (minutes > 0) return `${minutes}分钟前`;
    return '刚刚';
  };

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: 'CNY'
    }).format(amount);
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'success': return 'text-green-600 bg-green-50';
      case 'warning': return 'text-yellow-600 bg-yellow-50';
      case 'error': return 'text-red-600 bg-red-50';
      default: return 'text-blue-600 bg-blue-50';
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'success': return CheckCircleIconSolid;
      case 'warning': return ExclamationTriangleIconSolid;
      case 'error': return XCircleIconSolid;
      default: return ClockIconSolid;
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">加载中...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">仪表盘</h1>
              <p className="mt-1 text-sm text-gray-600">
                欢迎回来，管理员
              </p>
            </div>
            <div className="flex items-center space-x-4">
              <button
                onClick={() => router.push('/dashboard/notifications')}
                className="relative p-2 text-gray-400 hover:text-gray-500"
              >
                <BellIcon className="h-6 w-6" />
                <span className="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-400 ring-2 ring-white" />
              </button>
              <button
                onClick={() => router.push('/dashboard/settings')}
                className="p-2 text-gray-400 hover:text-gray-500"
              >
                <CogIcon className="h-6 w-6" />
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 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">
                  <UserGroupIconSolid className="h-8 w-8 text-blue-600" />
                </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.totalUsers.toLocaleString()}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div className="bg-gray-50 px-5 py-3">
              <div className="text-sm">
                <span className="text-green-600 font-medium">
                  {stats.activeUsers} 活跃用户
                </span>
              </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">
                  <UsersIcon className="h-8 w-8 text-green-600" />
                </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.totalInterpreters.toLocaleString()}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div className="bg-gray-50 px-5 py-3">
              <div className="text-sm">
                <span className="text-green-600 font-medium">
                  在线翻译员
                </span>
              </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">
                  <DocumentTextIconSolid className="h-8 w-8 text-purple-600" />
                </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.totalOrders.toLocaleString()}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div className="bg-gray-50 px-5 py-3">
              <div className="text-sm">
                <span className="text-green-600 font-medium">
                  本月新增
                </span>
              </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">
                  <PhoneIconSolid className="h-8 w-8 text-orange-600" />
                </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.totalCalls.toLocaleString()}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div className="bg-gray-50 px-5 py-3">
              <div className="text-sm">
                <span className="text-orange-600 font-medium">
                  {stats.activeCalls} 进行中
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Recent Activity */}
          <div className="lg:col-span-2">
            <div className="bg-white shadow rounded-lg">
              <div className="px-6 py-4 border-b border-gray-200">
                <h3 className="text-lg font-medium text-gray-900">最近活动</h3>
              </div>
              <div className="divide-y divide-gray-200">
                {recentActivity.length === 0 ? (
                  <div className="px-6 py-8 text-center">
                    <InboxIcon className="mx-auto h-12 w-12 text-gray-400" />
                    <p className="mt-2 text-sm text-gray-500">暂无活动记录</p>
                  </div>
                ) : (
                  recentActivity.map((activity) => {
                    const StatusIcon = getStatusIcon(activity.status);
                    const ActivityIcon = activity.icon;
                    
                    return (
                      <div key={activity.id} className="px-6 py-4">
                        <div className="flex items-center">
                          <div className="flex-shrink-0">
                            <div className={`p-2 rounded-full ${getStatusColor(activity.status)}`}>
                              <ActivityIcon className="h-5 w-5" />
                            </div>
                          </div>
                          <div className="ml-4 flex-1">
                            <div className="flex items-center justify-between">
                              <p className="text-sm font-medium text-gray-900">
                                {activity.title}
                              </p>
                              <div className="flex items-center">
                                <StatusIcon className={`h-4 w-4 mr-1 ${
                                  activity.status === 'success' ? 'text-green-500' :
                                  activity.status === 'warning' ? 'text-yellow-500' :
                                  activity.status === 'error' ? 'text-red-500' :
                                  'text-blue-500'
                                }`} />
                                <span className="text-xs text-gray-500">
                                  {activity.time}
                                </span>
                              </div>
                            </div>
                            <p className="text-sm text-gray-500">
                              {activity.description}
                            </p>
                          </div>
                        </div>
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </div>

          {/* Quick Actions */}
          <div>
            <div className="bg-white shadow rounded-lg">
              <div className="px-6 py-4 border-b border-gray-200">
                <h3 className="text-lg font-medium text-gray-900">快速操作</h3>
              </div>
              <div className="p-6">
                <div className="space-y-3">
                  <button
                    onClick={() => router.push('/dashboard/users')}
                    className="w-full flex items-center justify-between p-3 text-left border border-gray-200 rounded-md hover:bg-gray-50"
                  >
                    <div className="flex items-center">
                      <UserGroupIcon className="h-5 w-5 text-blue-600 mr-3" />
                      <span className="text-sm font-medium text-gray-900">用户管理</span>
                    </div>
                    <ArrowUpIcon className="h-4 w-4 text-gray-400 transform rotate-45" />
                  </button>
                  
                  <button
                    onClick={() => router.push('/dashboard/interpreters')}
                    className="w-full flex items-center justify-between p-3 text-left border border-gray-200 rounded-md hover:bg-gray-50"
                  >
                    <div className="flex items-center">
                      <UsersIcon className="h-5 w-5 text-green-600 mr-3" />
                      <span className="text-sm font-medium text-gray-900">翻译员管理</span>
                    </div>
                    <ArrowUpIcon className="h-4 w-4 text-gray-400 transform rotate-45" />
                  </button>
                  
                  <button
                    onClick={() => router.push('/dashboard/orders')}
                    className="w-full flex items-center justify-between p-3 text-left border border-gray-200 rounded-md hover:bg-gray-50"
                  >
                    <div className="flex items-center">
                      <DocumentTextIcon className="h-5 w-5 text-purple-600 mr-3" />
                      <span className="text-sm font-medium text-gray-900">订单管理</span>
                    </div>
                    <ArrowUpIcon className="h-4 w-4 text-gray-400 transform rotate-45" />
                  </button>
                  
                  <button
                    onClick={() => router.push('/dashboard/calls')}
                    className="w-full flex items-center justify-between p-3 text-left border border-gray-200 rounded-md hover:bg-gray-50"
                  >
                    <div className="flex items-center">
                      <PhoneIcon className="h-5 w-5 text-orange-600 mr-3" />
                      <span className="text-sm font-medium text-gray-900">通话管理</span>
                    </div>
                    <ArrowUpIcon className="h-4 w-4 text-gray-400 transform rotate-45" />
                  </button>
                  
                  <button
                    onClick={() => router.push('/dashboard/invoices')}
                    className="w-full flex items-center justify-between p-3 text-left border border-gray-200 rounded-md hover:bg-gray-50"
                  >
                    <div className="flex items-center">
                      <CurrencyDollarIcon className="h-5 w-5 text-emerald-600 mr-3" />
                      <span className="text-sm font-medium text-gray-900">发票管理</span>
                    </div>
                    <ArrowUpIcon className="h-4 w-4 text-gray-400 transform rotate-45" />
                  </button>
                  
                  <button
                    onClick={() => router.push('/dashboard/documents')}
                    className="w-full flex items-center justify-between p-3 text-left border border-gray-200 rounded-md hover:bg-gray-50"
                  >
                    <div className="flex items-center">
                      <DocumentDuplicateIcon className="h-5 w-5 text-indigo-600 mr-3" />
                      <span className="text-sm font-medium text-gray-900">文档管理</span>
                    </div>
                    <ArrowUpIcon className="h-4 w-4 text-gray-400 transform rotate-45" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 