import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { ChevronRight, Settings, Bell, LogOut, Smartphone, MessageCircle, Database, FolderOpen } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useAuth } from '@/contexts/AuthContext';
import { useToast } from '@/components/ui/toast';
import Layout from '@/components/Layout';
import BottomNav from '@/components/BottomNav';
import UnifiedHeader from '@/components/UnifiedHeader';
import '@/components/Layout.css';

export default function Profile() {
  const navigate = useNavigate();
  const { user, logout, isAuthenticated } = useAuth();
  const { toast } = useToast();
  const [showLogoutDialog, setShowLogoutDialog] = useState(false);
  const [userInfo, setUserInfo] = useState<any>(null);
  const [stats, setStats] = useState({
    devices: 12,
    wechat: 25,
    traffic: 8,
    content: 156,
  });

  // 从localStorage获取用户信息
  useEffect(() => {
    const userInfoStr = localStorage.getItem('userInfo');
    if (userInfoStr) {
      setUserInfo(JSON.parse(userInfoStr));
    }
  }, []);

  // 用户信息
  const currentUserInfo = {
    name: userInfo?.username || user?.username || "卡若",
    email: userInfo?.email || "zhangsan@example.com",
    role: "管理员",
    joinDate: "2023-01-15",
    lastLogin: "2024-01-20 14:30",
  };

  // 功能模块数据
  const functionModules = [
    {
      id: "devices",
      title: "设备管理",
      description: "管理您的设备和微信账号",
      icon: <Smartphone className="h-5 w-5 text-blue-500" />,
      count: stats.devices,
      path: "/devices",
      bgColor: "bg-blue-50",
    },
    {
      id: "wechat",
      title: "微信号管理",
      description: "管理微信账号和好友",
      icon: <MessageCircle className="h-5 w-5 text-green-500" />,
      count: stats.wechat,
      path: "/wechat-accounts",
      bgColor: "bg-green-50",
    },
    {
      id: "traffic",
      title: "流量池",
      description: "管理用户流量池和分组",
      icon: <Database className="h-5 w-5 text-purple-500" />,
      count: stats.traffic,
      path: "/traffic-pool",
      bgColor: "bg-purple-50",
    },
    {
      id: "content",
      title: "内容库",
      description: "管理营销内容和素材",
      icon: <FolderOpen className="h-5 w-5 text-orange-500" />,
      count: stats.content,
      path: "/content",
      bgColor: "bg-orange-50",
    },
  ];

  // 加载统计数据
  const loadStats = async () => {
    try {
      // 这里可以调用实际的API
      // const [deviceStats, wechatStats, trafficStats, contentStats] = await Promise.allSettled([
      //   getDeviceStats(),
      //   getWechatStats(),
      //   getTrafficStats(),
      //   getContentStats(),
      // ]);

      // 暂时使用模拟数据
      setStats({
        devices: 12,
        wechat: 25,
        traffic: 8,
        content: 156,
      });
    } catch (error) {
      console.error("加载统计数据失败:", error);
    }
  };

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

  const handleLogout = () => {
    // 清除本地存储的用户信息
    localStorage.removeItem('token');
    localStorage.removeItem('token_expired');
    localStorage.removeItem('s2_accountId');
    localStorage.removeItem('userInfo');
    setShowLogoutDialog(false);
    logout();
    navigate('/login');
    toast({
      title: '退出成功',
      description: '您已安全退出系统',
    });
  };

  const handleFunctionClick = (path: string) => {
    navigate(path);
  };

  if (!isAuthenticated) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="text-gray-500">请先登录</div>
      </div>
    );
  }

  return (
    <Layout
      header={
        <UnifiedHeader
          title="我的"
          showBack={false}
          titleColor="blue"
          actions={[
            {
              type: 'icon',
              icon: Bell,
              onClick: () => console.log('Notifications'),
            },
            {
              type: 'icon',
              icon: Settings,
              onClick: () => console.log('Settings'),
            },
          ]}
        />
      }
      footer={<BottomNav />}
    >
      <div className="bg-gray-50 pb-16">
        <div className="p-4 space-y-4">
          {/* 用户信息卡片 */}
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-4">
                <Avatar className="h-16 w-16">
                  <AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
                  <AvatarFallback className="bg-gray-200 text-gray-600 text-lg font-medium">
                    {currentUserInfo.name.charAt(0)}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="flex items-center space-x-2 mb-1">
                    <h2 className="text-lg font-medium">{currentUserInfo.name}</h2>
                    <span className="px-2 py-1 text-xs bg-gradient-to-r from-orange-400 to-orange-500 text-white rounded-full font-medium shadow-sm">
                      {currentUserInfo.role}
                    </span>
                  </div>
                  <p className="text-sm text-gray-600 mb-2">{currentUserInfo.email}</p>
                  <div className="text-xs text-gray-500">
                    <div>最近登录: {currentUserInfo.lastLogin}</div>
                  </div>
                </div>
                <div className="flex flex-col space-y-2">
                  <Button variant="ghost" size="icon">
                    <Bell className="h-5 w-5" />
                  </Button>
                  <Button variant="ghost" size="icon">
                    <Settings className="h-5 w-5" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 我的功能 */}
          <Card>
            <CardContent className="p-4">
              <div className="space-y-2">
                {functionModules.map((module) => (
                  <div
                    key={module.id}
                    className="flex items-center p-4 rounded-lg border hover:bg-gray-50 cursor-pointer transition-colors w-full"
                    onClick={() => handleFunctionClick(module.path)}
                  >
                    <div className={`p-2 rounded-lg ${module.bgColor} mr-3`}>{module.icon}</div>
                    <div className="flex-1">
                      <div className="font-medium text-sm">{module.title}</div>
                      <div className="text-xs text-gray-500">{module.description}</div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="px-2 py-1 text-xs bg-gray-50 text-gray-700 rounded-full border border-gray-200 font-medium shadow-sm">
                        {module.count}
                      </span>
                      <ChevronRight className="h-4 w-4 text-gray-400" />
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* 退出登录 */}
          <Button
            variant="outline"
            className="w-full text-red-600 border-red-200 hover:bg-red-50 bg-transparent"
            onClick={() => setShowLogoutDialog(true)}
          >
            <LogOut className="h-4 w-4 mr-2" />
            退出登录
          </Button>
        </div>
      </div>

      {/* 退出登录确认对话框 */}
      <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>确认退出登录</DialogTitle>
            <DialogDescription>
              您确定要退出登录吗？退出后需要重新登录才能使用完整功能。
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end space-x-2 mt-4">
            <Button variant="outline" onClick={() => setShowLogoutDialog(false)}>
              取消
            </Button>
            <Button variant="destructive" onClick={handleLogout}>
              确认退出
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </Layout>
  );
}