import { useState } from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';
import { Avatar, Cell, CellGroup, Button, Dialog } from '@nutui/nutui-react-taro';
import { ArrowRight, User } from '@nutui/icons-react-taro';
import { useUserStore } from '@/stores/user';
import './index.less';

interface UserInfo {
  name: string;
  avatar: string;
}

const userInfo: UserInfo = {
  name: '公司管理',
  avatar: '',
};

export default function Mine() {
  const [statusBarHeight, setStatusBarHeight] = useState<number | undefined>(0);
  const [showLogoutConfirm, setShowLogoutConfirm] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);

  useLoad(() => {
    const { statusBarHeight: sHeight } = Taro.getSystemInfoSync();
    setStatusBarHeight(sHeight);
  });

  const handleMenuClick = (value: string) => {
    console.log('Menu clicked:', value);
  };

  const handleLogout = () => {
    setShowLogoutConfirm(true);
  };

  function handleConfirmLogout() {
    try {
      setLoading(true);
      setShowLogoutConfirm(false);
      useUserStore.getState().logout();
    } finally {
      setLoading(false);
    }
  }

  return (
    <View className="mine">
      {/* 用户信息区域 */}
      <View
        className="user-section"
        style={{ paddingTop: `${statusBarHeight! + 30}px`, paddingBottom: '30px' }}
      >
        <View className="user-info">
          <Avatar
            size="large"
            icon={userInfo.avatar || <User width="50px" height="50px" />}
            className="user-avatar"
          />
          <View className="user-details">
            <Text className="user-name">{userInfo.name}</Text>
            <Text className="user-guide-no"></Text>
          </View>
        </View>
      </View>

      {/* 功能菜单区域 */}
      <View className="menu-section">
        <CellGroup title="系统设置" className="menu-group">
          {/* <Cell title="设置" onClick={() => handleMenuClick('settings')} extra={<ArrowRight />} /> */}
          <Cell title="关于" onClick={() => handleMenuClick('about')} extra={<ArrowRight />} />
        </CellGroup>
      </View>

      {/* 退出登录 */}
      <View className="logout-section">
        <Button
          fill="outline"
          size="large"
          type="danger"
          block
          className="logout-btn"
          onClick={handleLogout}
          disabled={loading}
        >
          退出登录
        </Button>
      </View>

      <Dialog
        visible={showLogoutConfirm}
        title="确认退出登录"
        confirmText="确认"
        cancelText="取消"
        footerDirection="vertical"
        onConfirm={handleConfirmLogout}
        onCancel={() => setShowLogoutConfirm(false)}
      ></Dialog>
    </View>
  );
}