import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  Card,
  Avatar,
  List,
  Button,
  Modal,
  message,
  Typography,
  Space,
} from 'antd'
import {
  RightOutlined,
  SettingOutlined,
  FileTextOutlined,
  UserOutlined,
  BookOutlined,
} from '@ant-design/icons'
import styles from './Profile.module.less'

const { Title, Text } = Typography

interface UserInfo {
  username: string
  nickname: string
  avatar: string
}

const Profile: React.FC = () => {
  const navigate = useNavigate()
  const [userInfo, setUserInfo] = useState<UserInfo | null>(null)

  useEffect(() => {
    // 从 localStorage 获取用户信息
    const token = localStorage.getItem('token')
    const savedUserInfo = localStorage.getItem('user')

    if (token && savedUserInfo) {
      try {
        setUserInfo(JSON.parse(savedUserInfo))
      } catch (e) {
        console.error('解析用户信息失败', e)
      }
    }
  }, [])

  const handleLogout = () => {
    Modal.confirm({
      title: '确定要退出登录吗？',
      onOk: () => {
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        setUserInfo(null)
        message.success('已退出登录')
        navigate('/login')
      },
    })
  }

  const handleLogin = () => {
    navigate('/login')
  }

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        {/* 用户信息卡片 */}
        <Card className={styles.userCard}>
          {userInfo ? (
            <div className={styles.userInfo}>
              <Avatar
                src={userInfo.avatar || undefined}
                size={80}
                icon={<UserOutlined />}
              />
              <div className={styles.userDetails}>
                <Title level={4} className={styles.userNickname}>{userInfo.nickname}</Title>
                <Text type="secondary" className={styles.userUsername}>@{userInfo.username}</Text>
              </div>
            </div>
          ) : (
            <div className={styles.userInfo}>
              <Avatar size={80} icon={<UserOutlined />} />
              <div className={styles.userDetails}>
                <Title level={4} className={styles.userNickname}>未登录</Title>
                <Button type="primary" onClick={handleLogin} style={{ marginTop: 8 }}>
                  点击登录
                </Button>
              </div>
            </div>
          )}
        </Card>

        {/* 功能列表 */}
        <Card title="功能" className={styles.menuCard}>
          <List>
            <List.Item
              onClick={() => navigate('/wrong-questions')}
              style={{ cursor: 'pointer' }}
            >
              <Space>
                <BookOutlined />
                <span>错题本</span>
              </Space>
              <RightOutlined />
            </List.Item>
            <List.Item
              onClick={() => message.info('功能开发中')}
              style={{ cursor: 'pointer' }}
            >
              <Space>
                <FileTextOutlined />
                <span>我的题目</span>
              </Space>
              <RightOutlined />
            </List.Item>
            <List.Item
              onClick={() => message.info('功能开发中')}
              style={{ cursor: 'pointer' }}
            >
              <Space>
                <SettingOutlined />
                <span>设置</span>
              </Space>
              <RightOutlined />
            </List.Item>
          </List>
        </Card>

        {/* 退出登录按钮 */}
        {userInfo && (
          <Button
            danger
            block
            size="large"
            onClick={handleLogout}
            className={styles.logoutButton}
          >
            退出登录
          </Button>
        )}
      </div>
    </div>
  )
}

export default Profile