import { useNavigate } from 'react-router-dom'
import { useAuth } from '../auth/AuthContext.jsx'

export default function MePage() {
  const { user, logout } = useAuth()
  const navigate = useNavigate()

  async function onLogout() {
    if (!confirm('确定退出登录?')) return
    await logout()
    navigate('/login', { replace: true })
  }

  return (
    <div>
      <div className="me-header">
        <div className="me-name">{user?.name || '用户'}</div>
        <div className="me-email">{user?.email}</div>
      </div>
      <div className="me-list">
        <div className="list-item">
          <span className="label">用户 ID</span>
          <span className="value">#{user?.id}</span>
        </div>
        <div className="list-item">
          <span className="label">注册时间</span>
          <span className="value">{user?.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}</span>
        </div>
        <div className="list-item" onClick={onLogout} role="button" style={{ cursor: 'pointer' }}>
          <span className="label danger">退出登录</span>
          <span className="value">›</span>
        </div>
      </div>
    </div>
  )
}