/**
 * CalendarPanel - 投资日历面板组件
 * 使用 FullCalendar 展示投资计划、复盘等事件
 */

import React, { useState } from 'react';
import {
  Box,
  Button,
  Badge,
  IconButton,
  Flex,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  VStack,
  HStack,
  Text,
  Spinner,
  Center,
  Tooltip,
  Icon,
  Input,
  FormControl,
  FormLabel,
  Textarea,
  Select,
  Tag,
  TagLabel,
  TagLeftIcon,
} from '@chakra-ui/react';
import {
  FiPlus,
  FiEdit2,
  FiTrash2,
  FiStar,
  FiTrendingUp,
} from 'react-icons/fi';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { DateClickArg } from '@fullcalendar/interaction';
import { EventClickArg } from '@fullcalendar/common';
import dayjs, { Dayjs } from 'dayjs';
import 'dayjs/locale/zh-cn';

import { usePlanningData } from './PlanningContext';
import type { InvestmentEvent, EventType } from '@/types';
import { logger } from '@/utils/logger';
import { getApiBase } from '@/utils/apiConfig';

dayjs.locale('zh-cn');

/**
 * 新事件表单数据类型
 */
interface NewEventForm {
  title: string;
  description: string;
  type: EventType;
  importance: number;
  stocks: string;
}

/**
 * FullCalendar 事件类型
 */
interface CalendarEvent {
  id: string;
  title: string;
  start: string;
  date: string;
  backgroundColor: string;
  borderColor: string;
  extendedProps: InvestmentEvent & {
    isSystem: boolean;
  };
}

/**
 * CalendarPanel 组件
 * 日历视图面板，显示所有投资事件
 */
export const CalendarPanel: React.FC = () => {
  const {
    allEvents,
    loadAllData,
    loading,
    setActiveTab,
    toast,
    borderColor,
    secondaryText,
  } = usePlanningData();

  const { isOpen, onOpen, onClose } = useDisclosure();
  const { isOpen: isAddOpen, onOpen: onAddOpen, onClose: onAddClose } = useDisclosure();

  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
  const [selectedDateEvents, setSelectedDateEvents] = useState<InvestmentEvent[]>([]);
  const [newEvent, setNewEvent] = useState<NewEventForm>({
    title: '',
    description: '',
    type: 'plan',
    importance: 3,
    stocks: '',
  });

  // 转换数据为 FullCalendar 格式
  const calendarEvents: CalendarEvent[] = allEvents.map(event => ({
    ...event,
    id: `${event.source || 'user'}-${event.id}`,
    title: event.title,
    start: event.event_date,
    date: event.event_date,
    backgroundColor: event.source === 'future' ? '#3182CE' : event.type === 'plan' ? '#8B5CF6' : '#38A169',
    borderColor: event.source === 'future' ? '#3182CE' : event.type === 'plan' ? '#8B5CF6' : '#38A169',
    extendedProps: {
      ...event,
      isSystem: event.source === 'future',
    }
  }));

  // 处理日期点击
  const handleDateClick = (info: DateClickArg): void => {
    const clickedDate = dayjs(info.date);
    setSelectedDate(clickedDate);

    const dayEvents = allEvents.filter(event =>
      dayjs(event.event_date).isSame(clickedDate, 'day')
    );
    setSelectedDateEvents(dayEvents);
    onOpen();
  };

  // 处理事件点击
  const handleEventClick = (info: EventClickArg): void => {
    const event = info.event;
    const clickedDate = dayjs(event.start);
    setSelectedDate(clickedDate);

    const dayEvents = allEvents.filter(ev =>
      dayjs(ev.event_date).isSame(clickedDate, 'day')
    );
    setSelectedDateEvents(dayEvents);
    onOpen();
  };

  // 添加新事件
  const handleAddEvent = async (): Promise<void> => {
    try {
      const base = getApiBase();

      const eventData = {
        ...newEvent,
        event_date: (selectedDate ? selectedDate.format('YYYY-MM-DD') : dayjs().format('YYYY-MM-DD')),
        stocks: newEvent.stocks.split(',').map(s => s.trim()).filter(s => s),
      };

      const response = await fetch(base + '/api/account/calendar/events', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify(eventData),
      });

      if (response.ok) {
        const data = await response.json();
        if (data.success) {
          logger.info('CalendarPanel', '添加事件成功', {
            eventTitle: eventData.title,
            eventDate: eventData.event_date
          });
          toast({
            title: '添加成功',
            description: '投资计划已添加',
            status: 'success',
            duration: 3000,
          });
          onAddClose();
          loadAllData();
          setNewEvent({
            title: '',
            description: '',
            type: 'plan',
            importance: 3,
            stocks: '',
          });
        }
      }
    } catch (error) {
      logger.error('CalendarPanel', 'handleAddEvent', error, {
        eventTitle: newEvent?.title
      });
      toast({
        title: '添加失败',
        description: '无法添加投资计划',
        status: 'error',
        duration: 3000,
      });
    }
  };

  // 删除事件
  const handleDeleteEvent = async (eventId: number): Promise<void> => {
    if (!eventId) {
      logger.warn('CalendarPanel', '删除事件失败: 缺少事件 ID', { eventId });
      toast({
        title: '无法删除',
        description: '缺少事件 ID',
        status: 'error',
        duration: 3000,
      });
      return;
    }
    try {
      const base = getApiBase();

      const response = await fetch(base + `/api/account/calendar/events/${eventId}`, {
        method: 'DELETE',
        credentials: 'include',
      });

      if (response.ok) {
        logger.info('CalendarPanel', '删除事件成功', { eventId });
        toast({
          title: '删除成功',
          status: 'success',
          duration: 2000,
        });
        loadAllData();
      }
    } catch (error) {
      logger.error('CalendarPanel', 'handleDeleteEvent', error, { eventId });
      toast({
        title: '删除失败',
        status: 'error',
        duration: 3000,
      });
    }
  };

  // 跳转到计划或复盘标签页
  const handleViewDetails = (event: InvestmentEvent): void => {
    if (event.type === 'plan') {
      setActiveTab(1); // 跳转到"我的计划"标签页
    } else if (event.type === 'review') {
      setActiveTab(2); // 跳转到"我的复盘"标签页
    }
    onClose();
  };

  return (
    <Box>
      <Flex justify="flex-end" mb={4}>
        <Button
          size="sm"
          colorScheme="purple"
          leftIcon={<FiPlus />}
          onClick={() => {
            if (!selectedDate) setSelectedDate(dayjs());
            onAddOpen();
          }}
        >
          添加计划
        </Button>
      </Flex>

      {loading ? (
        <Center h="560px">
          <Spinner size="xl" color="purple.500" />
        </Center>
      ) : (
        <Box height={{ base: '500px', md: '600px' }}>
          <FullCalendar
            plugins={[dayGridPlugin, interactionPlugin]}
            initialView="dayGridMonth"
            locale="zh-cn"
            headerToolbar={{
              left: 'prev,next today',
              center: 'title',
              right: ''
            }}
            events={calendarEvents}
            dateClick={handleDateClick}
            eventClick={handleEventClick}
            height="100%"
            dayMaxEvents={3}
            moreLinkText="更多"
            buttonText={{
              today: '今天',
              month: '月',
              week: '周'
            }}
          />
        </Box>
      )}

      {/* 查看事件详情 Modal */}
      {isOpen && (
        <Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnOverlayClick={false} closeOnEsc={true}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>
              {selectedDate && selectedDate.format('YYYY年MM月DD日')} 的事件
            </ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              {selectedDateEvents.length === 0 ? (
                <Center py={8}>
                  <VStack>
                    <Text color={secondaryText}>当天没有事件</Text>
                    <Button
                      size="sm"
                      colorScheme="purple"
                      leftIcon={<FiPlus />}
                      onClick={() => {
                        onClose();
                        onAddOpen();
                      }}
                    >
                      添加投资计划
                    </Button>
                  </VStack>
                </Center>
              ) : (
                <VStack align="stretch" spacing={4}>
                  {selectedDateEvents.map((event, idx) => (
                    <Box
                      key={idx}
                      p={4}
                      borderRadius="md"
                      border="1px"
                      borderColor={borderColor}
                    >
                      <Flex justify="space-between" align="start" mb={2}>
                        <VStack align="start" spacing={1} flex={1}>
                          <HStack>
                            <Text fontWeight="bold" fontSize="lg">
                              {event.title}
                            </Text>
                            {event.source === 'future' ? (
                              <Badge colorScheme="blue" variant="subtle">系统事件</Badge>
                            ) : event.type === 'plan' ? (
                              <Badge colorScheme="purple" variant="subtle">我的计划</Badge>
                            ) : (
                              <Badge colorScheme="green" variant="subtle">我的复盘</Badge>
                            )}
                          </HStack>
                          {event.importance && (
                            <HStack spacing={2}>
                              <Icon as={FiStar} color="yellow.500" />
                              <Text fontSize="sm" color={secondaryText}>
                                重要度: {event.importance}/5
                              </Text>
                            </HStack>
                          )}
                        </VStack>
                        <HStack>
                          {!event.source || event.source === 'user' ? (
                            <>
                              <Tooltip label="查看详情">
                                <IconButton
                                  icon={<FiEdit2 />}
                                  size="sm"
                                  variant="ghost"
                                  colorScheme="blue"
                                  onClick={() => handleViewDetails(event)}
                                  aria-label="查看详情"
                                />
                              </Tooltip>
                              <IconButton
                                icon={<FiTrash2 />}
                                size="sm"
                                variant="ghost"
                                colorScheme="red"
                                onClick={() => handleDeleteEvent(event.id)}
                                aria-label="删除事件"
                              />
                            </>
                          ) : null}
                        </HStack>
                      </Flex>

                      {event.description && (
                        <Text fontSize="sm" color={secondaryText} mb={2}>
                          {event.description}
                        </Text>
                      )}

                      {event.stocks && event.stocks.length > 0 && (
                        <HStack spacing={2} flexWrap="wrap">
                          <Text fontSize="sm" color={secondaryText}>相关股票:</Text>
                          {event.stocks.map((stock, i) => (
                            <Tag key={i} size="sm" colorScheme="blue">
                              <TagLeftIcon as={FiTrendingUp} />
                              <TagLabel>{stock}</TagLabel>
                            </Tag>
                          ))}
                        </HStack>
                      )}
                    </Box>
                  ))}
                </VStack>
              )}
            </ModalBody>
            <ModalFooter>
              <Button onClick={onClose}>关闭</Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      )}

      {/* 添加投资计划 Modal */}
      {isAddOpen && (
        <Modal isOpen={isAddOpen} onClose={onAddClose} size="lg" closeOnOverlayClick={false} closeOnEsc={true}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>
              添加投资计划
            </ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <VStack spacing={4}>
                <FormControl isRequired>
                  <FormLabel>标题</FormLabel>
                  <Input
                    value={newEvent.title}
                    onChange={(e) => setNewEvent({ ...newEvent, title: e.target.value })}
                    placeholder="例如：关注半导体板块"
                  />
                </FormControl>

                <FormControl>
                  <FormLabel>描述</FormLabel>
                  <Textarea
                    value={newEvent.description}
                    onChange={(e) => setNewEvent({ ...newEvent, description: e.target.value })}
                    placeholder="详细描述您的投资计划..."
                    rows={3}
                  />
                </FormControl>

                <FormControl>
                  <FormLabel>类型</FormLabel>
                  <Select
                    value={newEvent.type}
                    onChange={(e) => setNewEvent({ ...newEvent, type: e.target.value as EventType })}
                  >
                    <option value="plan">投资计划</option>
                    <option value="review">投资复盘</option>
                    <option value="reminder">提醒事项</option>
                    <option value="analysis">分析任务</option>
                  </Select>
                </FormControl>

                <FormControl>
                  <FormLabel>重要度</FormLabel>
                  <Select
                    value={newEvent.importance}
                    onChange={(e) => setNewEvent({ ...newEvent, importance: parseInt(e.target.value) })}
                  >
                    <option value={5}>⭐⭐⭐⭐⭐ 非常重要</option>
                    <option value={4}>⭐⭐⭐⭐ 重要</option>
                    <option value={3}>⭐⭐⭐ 一般</option>
                    <option value={2}>⭐⭐ 次要</option>
                    <option value={1}>⭐ 不重要</option>
                  </Select>
                </FormControl>

                <FormControl>
                  <FormLabel>相关股票（用逗号分隔）</FormLabel>
                  <Input
                    value={newEvent.stocks}
                    onChange={(e) => setNewEvent({ ...newEvent, stocks: e.target.value })}
                    placeholder="例如：600519,000858,002415"
                  />
                </FormControl>
              </VStack>
            </ModalBody>
            <ModalFooter>
              <Button variant="ghost" mr={3} onClick={onAddClose}>
                取消
              </Button>
              <Button
                colorScheme="purple"
                onClick={handleAddEvent}
                isDisabled={!newEvent.title}
              >
                添加
              </Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      )}
    </Box>
  );
};