// src/views/Dashboard/components/InvestmentPlansAndReviews.js
import React, { useState, useEffect, useCallback } from 'react';
import {
  Box,
  Card,
  CardHeader,
  CardBody,
  Heading,
  VStack,
  HStack,
  Text,
  Button,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Badge,
  IconButton,
  Flex,
  useColorModeValue,
  Divider,
  Icon,
  Input,
  FormControl,
  FormLabel,
  Textarea,
  Select,
  useToast,
  Spinner,
  Center,
  Tag,
  TagLabel,
  TagLeftIcon,
  TagCloseButton,
  Grid,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  InputGroup,
  InputLeftElement,
} from '@chakra-ui/react';
import {
  FiCalendar,
  FiClock,
  FiEdit2,
  FiTrash2,
  FiSave,
  FiPlus,
  FiFileText,
  FiTarget,
  FiTrendingUp,
  FiHash,
  FiCheckCircle,
  FiXCircle,
  FiAlertCircle,
} from 'react-icons/fi';
import moment from 'moment';
import 'moment/locale/zh-cn';
import { logger } from '../../../utils/logger';

moment.locale('zh-cn');

export default function InvestmentPlansAndReviews({ type = 'both' }) {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const toast = useToast();

  // 颜色主题
  const bgColor = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const textColor = useColorModeValue('gray.700', 'white');
  const secondaryText = useColorModeValue('gray.600', 'gray.400');
  const cardBg = useColorModeValue('gray.50', 'gray.700');

  const [plans, setPlans] = useState([]);
  const [reviews, setReviews] = useState([]);
  const [loading, setLoading] = useState(false);
  const [editingItem, setEditingItem] = useState(null);
  const [formData, setFormData] = useState({
    date: moment().format('YYYY-MM-DD'),
    title: '',
    content: '',
    type: 'plan',
    stocks: [],
    tags: [],
    status: 'active',
  });
  const [stockInput, setStockInput] = useState('');
  const [tagInput, setTagInput] = useState('');

  // 加载数据
  const loadData = useCallback(async () => {
    try {
      setLoading(true);
      const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');

      const response = await fetch(base + '/api/account/investment-plans', {
        credentials: 'include'
      });

      if (response.ok) {
        const data = await response.json();
        if (data.success) {
          const allItems = data.data || [];
          setPlans(allItems.filter(item => item.type === 'plan'));
          setReviews(allItems.filter(item => item.type === 'review'));
          logger.debug('InvestmentPlansAndReviews', '数据加载成功', {
            plansCount: allItems.filter(item => item.type === 'plan').length,
            reviewsCount: allItems.filter(item => item.type === 'review').length
          });
        }
      }
    } catch (error) {
      logger.error('InvestmentPlansAndReviews', 'loadData', error);
      // ❌ 移除数据加载失败 toast（非关键操作）
    } finally {
      setLoading(false);
    }
  }, []); // ✅ 移除 toast 依赖

  useEffect(() => {
    loadData();
  }, [loadData]);

  // 打开编辑/新建模态框
  const handleOpenModal = (item = null, itemType = 'plan') => {
    if (item) {
      setEditingItem(item);
      setFormData({
        ...item,
        date: moment(item.date).format('YYYY-MM-DD'),
      });
    } else {
      setEditingItem(null);
      setFormData({
        date: moment().format('YYYY-MM-DD'),
        title: '',
        content: '',
        type: itemType,
        stocks: [],
        tags: [],
        status: 'active',
      });
    }
    onOpen();
  };

  // 保存数据
  const handleSave = async () => {
    try {
      const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');

      const url = editingItem
        ? base + `/api/account/investment-plans/${editingItem.id}`
        : base + '/api/account/investment-plans';

      const method = editingItem ? 'PUT' : 'POST';

      const response = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        logger.info('InvestmentPlansAndReviews', `${editingItem ? '更新' : '创建'}成功`, {
          itemId: editingItem?.id,
          title: formData.title,
          type: formData.type
        });
        toast({
          title: editingItem ? '更新成功' : '创建成功',
          status: 'success',
          duration: 2000,
        });
        onClose();
        loadData();
      } else {
        throw new Error('保存失败');
      }
    } catch (error) {
      logger.error('InvestmentPlansAndReviews', 'handleSave', error, {
        itemId: editingItem?.id,
        title: formData?.title
      });
      toast({
        title: '保存失败',
        description: '无法保存数据',
        status: 'error',
        duration: 3000,
      });
    }
  };

  // 删除数据
  const handleDelete = async (id) => {
    if (!window.confirm('确定要删除吗？')) return;

    try {
      const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');

      const response = await fetch(base + `/api/account/investment-plans/${id}`, {
        method: 'DELETE',
        credentials: 'include',
      });

      if (response.ok) {
        logger.info('InvestmentPlansAndReviews', '删除成功', { itemId: id });
        toast({
          title: '删除成功',
          status: 'success',
          duration: 2000,
        });
        loadData();
      }
    } catch (error) {
      logger.error('InvestmentPlansAndReviews', 'handleDelete', error, { itemId: id });
      toast({
        title: '删除失败',
        status: 'error',
        duration: 3000,
      });
    }
  };

  // 添加股票
  const handleAddStock = () => {
    if (stockInput.trim() && !formData.stocks.includes(stockInput.trim())) {
      setFormData({
        ...formData,
        stocks: [...formData.stocks, stockInput.trim()],
      });
      setStockInput('');
    }
  };

  // 添加标签
  const handleAddTag = () => {
    if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
      setFormData({
        ...formData,
        tags: [...formData.tags, tagInput.trim()],
      });
      setTagInput('');
    }
  };

  // 获取状态图标和颜色
  const getStatusInfo = (status) => {
    switch (status) {
      case 'completed':
        return { icon: FiCheckCircle, color: 'green' };
      case 'cancelled':
        return { icon: FiXCircle, color: 'red' };
      default:
        return { icon: FiAlertCircle, color: 'blue' };
    }
  };

  // 渲染单个卡片
  const renderCard = (item) => {
    const statusInfo = getStatusInfo(item.status);
    
    return (
      <Card
        key={item.id}
        bg={cardBg}
        shadow="sm"
        _hover={{ shadow: 'md' }}
        transition="all 0.2s"
      >
        <CardBody>
          <VStack align="stretch" spacing={3}>
            <Flex justify="space-between" align="start">
              <VStack align="start" spacing={1} flex={1}>
                <HStack>
                  <Icon as={item.type === 'plan' ? FiTarget : FiFileText} color="blue.500" />
                  <Text fontWeight="bold" fontSize="lg">
                    {item.title}
                  </Text>
                </HStack>
                <HStack spacing={2}>
                  <Icon as={FiCalendar} boxSize={3} color={secondaryText} />
                  <Text fontSize="sm" color={secondaryText}>
                    {moment(item.date).format('YYYY年MM月DD日')}
                  </Text>
                  <Badge
                    colorScheme={statusInfo.color}
                    variant="subtle"
                    leftIcon={<Icon as={statusInfo.icon} />}
                  >
                    {item.status === 'active' ? '进行中' : 
                     item.status === 'completed' ? '已完成' : '已取消'}
                  </Badge>
                </HStack>
              </VStack>
              <HStack>
                <IconButton
                  icon={<FiEdit2 />}
                  size="sm"
                  variant="ghost"
                  onClick={() => handleOpenModal(item)}
                />
                <IconButton
                  icon={<FiTrash2 />}
                  size="sm"
                  variant="ghost"
                  colorScheme="red"
                  onClick={() => handleDelete(item.id)}
                />
              </HStack>
            </Flex>

            {item.content && (
              <Text fontSize="sm" color={textColor} noOfLines={3}>
                {item.content}
              </Text>
            )}

            <HStack spacing={2} flexWrap="wrap">
              {item.stocks && item.stocks.length > 0 && (
                <>
                  {item.stocks.map((stock, idx) => (
                    <Tag key={idx} size="sm" colorScheme="blue" variant="subtle">
                      <TagLeftIcon as={FiTrendingUp} />
                      <TagLabel>{stock}</TagLabel>
                    </Tag>
                  ))}
                </>
              )}
              {item.tags && item.tags.length > 0 && (
                <>
                  {item.tags.map((tag, idx) => (
                    <Tag key={idx} size="sm" colorScheme="purple" variant="subtle">
                      <TagLeftIcon as={FiHash} />
                      <TagLabel>{tag}</TagLabel>
                    </Tag>
                  ))}
                </>
              )}
            </HStack>
          </VStack>
        </CardBody>
      </Card>
    );
  };

  return (
    <Box>
      <Tabs variant="enclosed" colorScheme="blue" defaultIndex={type === 'review' ? 1 : 0}>
        <TabList>
          <Tab>
            <Icon as={FiTarget} mr={2} />
            我的计划 ({plans.length})
          </Tab>
          <Tab>
            <Icon as={FiFileText} mr={2} />
            我的复盘 ({reviews.length})
          </Tab>
        </TabList>

        <TabPanels>
          {/* 计划面板 */}
          <TabPanel px={0}>
            <VStack align="stretch" spacing={4}>
              <Flex justify="flex-end">
                <Button
                  size="sm"
                  colorScheme="blue"
                  leftIcon={<FiPlus />}
                  onClick={() => handleOpenModal(null, 'plan')}
                >
                  新建计划
                </Button>
              </Flex>

              {loading ? (
                <Center py={8}>
                  <Spinner size="xl" color="blue.500" />
                </Center>
              ) : plans.length === 0 ? (
                <Center py={8}>
                  <VStack spacing={3}>
                    <Icon as={FiTarget} boxSize={12} color="gray.300" />
                    <Text color={secondaryText}>暂无投资计划</Text>
                    <Button
                      size="sm"
                      colorScheme="blue"
                      leftIcon={<FiPlus />}
                      onClick={() => handleOpenModal(null, 'plan')}
                    >
                      创建第一个计划
                    </Button>
                  </VStack>
                </Center>
              ) : (
                <Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={4}>
                  {plans.map(renderCard)}
                </Grid>
              )}
            </VStack>
          </TabPanel>

          {/* 复盘面板 */}
          <TabPanel px={0}>
            <VStack align="stretch" spacing={4}>
              <Flex justify="flex-end">
                <Button
                  size="sm"
                  colorScheme="green"
                  leftIcon={<FiPlus />}
                  onClick={() => handleOpenModal(null, 'review')}
                >
                  新建复盘
                </Button>
              </Flex>

              {loading ? (
                <Center py={8}>
                  <Spinner size="xl" color="blue.500" />
                </Center>
              ) : reviews.length === 0 ? (
                <Center py={8}>
                  <VStack spacing={3}>
                    <Icon as={FiFileText} boxSize={12} color="gray.300" />
                    <Text color={secondaryText}>暂无复盘记录</Text>
                    <Button
                      size="sm"
                      colorScheme="green"
                      leftIcon={<FiPlus />}
                      onClick={() => handleOpenModal(null, 'review')}
                    >
                      创建第一个复盘
                    </Button>
                  </VStack>
                </Center>
              ) : (
                <Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={4}>
                  {reviews.map(renderCard)}
                </Grid>
              )}
            </VStack>
          </TabPanel>
        </TabPanels>
      </Tabs>

      {/* 编辑/新建模态框 - 条件渲染 */}
      {isOpen && (
        <Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnOverlayClick={false} closeOnEsc={true}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>
              {editingItem ? '编辑' : '新建'}
              {formData.type === 'plan' ? '投资计划' : '复盘记录'}
            </ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <VStack spacing={4}>
                <FormControl isRequired>
                  <FormLabel>日期</FormLabel>
                  <InputGroup>
                    <InputLeftElement pointerEvents="none">
                      <Icon as={FiCalendar} color={secondaryText} />
                    </InputLeftElement>
                    <Input
                      type="date"
                      value={formData.date}
                      onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                    />
                  </InputGroup>
                </FormControl>

                <FormControl isRequired>
                  <FormLabel>标题</FormLabel>
                  <Input
                    value={formData.title}
                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                    placeholder={formData.type === 'plan' ? '例如：布局新能源板块' : '例如：本周交易复盘'}
                  />
                </FormControl>

                <FormControl>
                  <FormLabel>内容</FormLabel>
                  <Textarea
                    value={formData.content}
                    onChange={(e) => setFormData({ ...formData, content: e.target.value })}
                    placeholder={formData.type === 'plan' ?
                      '详细描述您的投资计划...' :
                      '记录您的交易心得和经验教训...'}
                    rows={6}
                  />
                </FormControl>

                <FormControl>
                  <FormLabel>相关股票</FormLabel>
                  <HStack>
                    <Input
                      value={stockInput}
                      onChange={(e) => setStockInput(e.target.value)}
                      placeholder="输入股票代码"
                      onKeyPress={(e) => e.key === 'Enter' && handleAddStock()}
                    />
                    <Button onClick={handleAddStock}>添加</Button>
                  </HStack>
                  <HStack mt={2} spacing={2} flexWrap="wrap">
                    {formData.stocks.map((stock, idx) => (
                      <Tag key={idx} size="sm" colorScheme="blue">
                        <TagLeftIcon as={FiTrendingUp} />
                        <TagLabel>{stock}</TagLabel>
                        <TagCloseButton
                          onClick={() => setFormData({
                            ...formData,
                            stocks: formData.stocks.filter((_, i) => i !== idx)
                          })}
                        />
                      </Tag>
                    ))}
                  </HStack>
                </FormControl>

                <FormControl>
                  <FormLabel>标签</FormLabel>
                  <HStack>
                    <Input
                      value={tagInput}
                      onChange={(e) => setTagInput(e.target.value)}
                      placeholder="输入标签"
                      onKeyPress={(e) => e.key === 'Enter' && handleAddTag()}
                    />
                    <Button onClick={handleAddTag}>添加</Button>
                  </HStack>
                  <HStack mt={2} spacing={2} flexWrap="wrap">
                    {formData.tags.map((tag, idx) => (
                      <Tag key={idx} size="sm" colorScheme="purple">
                        <TagLeftIcon as={FiHash} />
                        <TagLabel>{tag}</TagLabel>
                        <TagCloseButton
                          onClick={() => setFormData({
                            ...formData,
                            tags: formData.tags.filter((_, i) => i !== idx)
                          })}
                        />
                      </Tag>
                    ))}
                  </HStack>
                </FormControl>

                <FormControl>
                  <FormLabel>状态</FormLabel>
                  <Select
                    value={formData.status}
                    onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                  >
                    <option value="active">进行中</option>
                    <option value="completed">已完成</option>
                    <option value="cancelled">已取消</option>
                  </Select>
                </FormControl>
              </VStack>
            </ModalBody>
            <ModalFooter>
              <Button variant="ghost" mr={3} onClick={onClose}>
                取消
              </Button>
              <Button
                colorScheme="blue"
                onClick={handleSave}
                isDisabled={!formData.title || !formData.date}
                leftIcon={<FiSave />}
              >
                保存
              </Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      )}
    </Box>
  );
}