import { useEffect, useState } from 'react'
import { View, Text } from '@tarojs/components'
import { useAppDispatch, useAppSelector } from '@/store/hooks'
import { clearAuth } from '@/store/authSlice'
import { Navbar } from '@/components/navbar'
import { ListRow, ListRowGroup } from '@/components/list-row'
import { getUserInfo, type UserInfo } from '@/api/user'
import { useToast } from '@/hooks/useToast'
import { reLaunch, navigateTo } from '@/utils/navigation'
import { ROUTES } from '@/constants/routes'
import styles from './index.module.scss'

export default function Mine() {
  const dispatch = useAppDispatch()
  const toast = useToast()
  const auth = useAppSelector((s) => s.auth)
  const [user, setUser] = useState<UserInfo | null>(null)

  useEffect(() => {
    getUserInfo().then(setUser).catch(() => toast.error('加载用户失败'))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const logout = () => {
    dispatch(clearAuth())
    reLaunch(ROUTES.LOGIN)
  }

  return (
    <View className={styles.page}>
      <Navbar title="个人中心" autoBack={false} variant="hero" />
      <View className={styles.header}>
        <View className={styles.avatar}>
          <Text className={styles.avatarText}>{user?.name?.[0] ?? '?'}</Text>
        </View>
        <View className={styles.headerInfo}>
          <Text className={styles.name}>{user?.name ?? '加载中...'}</Text>
          <Text className={styles.uid}>{auth.userId ? `ID: ${auth.userId}` : ''}</Text>
        </View>
      </View>

      <View className={styles.menuCard}>
        <ListRowGroup>
          <ListRow label="添加设备" arrow onClick={() => navigateTo(ROUTES.DEVICE_ADD)} />
          <ListRow label="退出登录" arrow danger onClick={logout} />
        </ListRowGroup>
      </View>
    </View>
  )
}