import React, { useState } from "react";
import {
  Box,
  VStack,
  HStack,
  Text,
  Heading,
  Avatar,
  Button,
  Divider,
  Badge,
  Card,
  CardBody,
  CardHeader,
  useColorMode,
  useToast,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  ModalCloseButton,
  useDisclosure,
} from "@chakra-ui/react";
import { useAuth } from "../../../contexts/AuthContext";
import { logger } from "../../../utils/logger";

export default function Profile() {
  const { colorMode } = useColorMode();
  const { user, logout, updateUser } = useAuth();
  const toast = useToast();
  const { isOpen, onOpen, onClose } = useDisclosure();

  const handleLogout = () => {
    logger.info('Profile', '用户登出', { userId: user?.id });
    logout();

    // ✅ 保留登出成功toast（关键操作提示）
    toast({
      title: "已登出",
      description: "您已成功退出登录",
      status: "info",
      duration: 2000,
      isClosable: true,
    });
  };

  const handleLogoutConfirm = () => {
    handleLogout();
    onClose();
  };

  if (!user) {
    return (
      <Box p={8}>
        <Text>加载用户信息中...</Text>
      </Box>
    );
  }

  return (
    <Box p={8}>
      <VStack spacing={8} align="stretch">
        {/* 用户信息卡片 */}
        <Card>
          <CardHeader>
            <HStack spacing={4}>
              <Avatar 
                size="lg" 
                name={user.name} 
                src={user.avatar}
                bg="blue.500"
              />
              <VStack align="start" spacing={2}>
                <Heading size="md">{user.name}</Heading>
                <Text color="gray.500">{user.email}</Text>
                <Badge colorScheme="blue" variant="subtle">
                  {user.role === 'admin' ? '管理员' : '用户'}
                </Badge>
              </VStack>
            </HStack>
          </CardHeader>
          <CardBody>
            <VStack spacing={4} align="stretch">
              <HStack justify="space-between">
                <Text fontWeight="medium">用户ID:</Text>
                <Text>{user.id}</Text>
              </HStack>
              <HStack justify="space-between">
                <Text fontWeight="medium">登录时间:</Text>
                <Text>{new Date(user.loginTime).toLocaleString()}</Text>
              </HStack>
              <HStack justify="space-between">
                <Text fontWeight="medium">账户状态:</Text>
                <Badge colorScheme="green">活跃</Badge>
              </HStack>
            </VStack>
          </CardBody>
        </Card>

        {/* 账户设置 */}
        <Card>
          <CardHeader>
            <Heading size="md">账户设置</Heading>
          </CardHeader>
          <CardBody>
            <VStack spacing={4} align="stretch">
              <Button variant="outline" colorScheme="blue">
                修改个人信息
              </Button>
              <Button variant="outline" colorScheme="blue">
                修改密码
              </Button>
              <Button variant="outline" colorScheme="blue">
                通知设置
              </Button>
            </VStack>
          </CardBody>
        </Card>

        {/* 安全设置 */}
        <Card>
          <CardHeader>
            <Heading size="md">安全设置</Heading>
          </CardHeader>
          <CardBody>
            <VStack spacing={4} align="stretch">
              <Button variant="outline" colorScheme="blue">
                两步验证
              </Button>
              <Button variant="outline" colorScheme="blue">
                登录历史
              </Button>
              <Button variant="outline" colorScheme="blue">
                设备管理
              </Button>
            </VStack>
          </CardBody>
        </Card>

        <Divider />

        {/* 登出按钮 */}
        <Card>
          <CardBody>
            <VStack spacing={4}>
              <Text color="gray.500" textAlign="center">
                点击下方按钮退出当前账户
              </Text>
              <Button 
                colorScheme="red" 
                variant="outline"
                onClick={onOpen}
                w="full"
              >
                退出登录
              </Button>
            </VStack>
          </CardBody>
        </Card>
      </VStack>

      {/* 登出确认对话框 */}
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>确认退出</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text>您确定要退出登录吗？</Text>
          </ModalBody>
          <ModalFooter>
            <Button variant="ghost" mr={3} onClick={onClose}>
              取消
            </Button>
            <Button colorScheme="red" onClick={handleLogoutConfirm}>
              确认退出
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
}