import { useNavigate } from 'react-router-dom'
import { Avatar, List, NavBar, Toast } from 'antd-mobile'
import { useAuth } from '../auth/AuthContext.jsx'

// 我的页: 顶部 NavBar + 用户头像卡片 + 信息列表
// 使用 antd-mobile: NavBar / List / Avatar / Toast
export default function MePage() {
  const { user, logout } = useAuth()
  const navigate = useNavigate()

  async function onLogout() {
    const confirmed = window.confirm('确定退出登录?')
    if (!confirmed) return
    await logout()
    Toast.show({ icon: 'success', content: '已退出' })
    navigate('/login', { replace: true })
  }

  return (
    <div className="me-page">
      <NavBar back={null} className="me-navbar">我的</NavBar>
      <div className="me-profile">
        <Avatar
          className="me-avatar"
          src={user?.avatar}
          style={{ '--size': '64px', '--border-radius': '50%' }}
        >
          {(user?.name || '?').slice(0, 1).toUpperCase()}
        </Avatar>
        <div className="me-name">{user?.name || '用户'}</div>
        <div className="me-email">{user?.email}</div>
      </div>
      <List className="me-list" mode="card">
        <List.Item extra={'#' + (user?.id || '-')}>用户 ID</List.Item>
        <List.Item extra={user?.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}>
          注册时间
        </List.Item>
        <List.Item
          onClick={onLogout}
          clickable
          arrowIcon={false}
          className="me-logout"
        >
          退出登录
        </List.Item>
      </List>
    </div>
  )
}