import { useMemo, useState, useCallback, useEffect, useRef } from 'react';
import {
  Paper,
  Text,
  Group,
  Stack,
  ActionIcon,
  Box,
  Menu,
  Divider,
  Portal,
} from '@mantine/core';
import {
  IconDots,
  IconArrowForward,
  IconRepeat,
  IconCalendar,
  IconEdit,
  IconTrash,
  IconCircleFilled,
  IconCheck,
} from '@tabler/icons-react';
import type { Event, PriorityType } from '../../types';
import { getRepeatTypeLabel } from '../../utils/repeatCalculator';
import { useContextMenuStore } from '../../stores/contextMenu';

// 重复图标颜色常量
const REPEAT_ICON_COLOR = '#999';

// 优先级颜色映射
const PRIORITY_COLORS: Record<PriorityType, string> = {
  none: 'rgba(0, 0, 0, 0.15)',
  red: '#dc2626',
  green: '#16a34a',
  yellow: '#ca8a04',
};

// 优先级名称映射
const PRIORITY_NAMES: Record<PriorityType, string> = {
  none: '默认',
  red: '红色',
  green: '绿色',
  yellow: '黄色',
};

interface ReminderCardProps {
  event: Event;
  onToggle: () => void;
  onClick: () => void;
  onDelete?: () => void;
  onPostpone?: () => void;
  isMissed?: boolean;
  onMissedToggle?: () => void;
  onDateChange?: (date: string, repeatType: string, repeatInterval: number | null) => void;
  onPriorityChange?: (priority: PriorityType) => void;
}

export function ReminderCard({
  event,
  onToggle,
  onClick,
  onDelete,
  onPostpone,
  isMissed = false,
  onMissedToggle,
  onDateChange,
  onPriorityChange,
}: ReminderCardProps) {
  const isCompleted = event.is_completed ?? false;
  const [isHovered, setIsHovered] = useState(false);
  const [isAnimating, setIsAnimating] = useState(false);
  const cardRef = useRef<HTMLDivElement>(null);

  // 使用全局状态管理右键菜单
  const openEventId = useContextMenuStore((state) => state.openEventId);
  const menuPosition = useContextMenuStore((state) => state.menuPosition);
  const { openMenu, closeMenu } = useContextMenuStore();
  const isMenuOpen = openEventId === event.id;

  // 获取优先级颜色
  const getPriorityColor = (priority?: PriorityType): string => {
    return PRIORITY_COLORS[priority || 'none'];
  };

  // 右键点击处理
  const handleContextMenu = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    console.log('[ContextMenu] 右键点击事件, eventId:', event.id, 'x:', e.clientX, 'y:', e.clientY);

    // 打开菜单，传入鼠标位置
    openMenu(event.id, { x: e.clientX, y: e.clientY });
  }, [event.id, openMenu]);

  // 点击外部关闭菜单
  useEffect(() => {
    if (!isMenuOpen) return;

    const handleMouseDown = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      // 如果点击不在当前卡片和菜单内，关闭菜单
      if (!target.closest(`[data-reminder-card="${event.id}"]`) &&
          !target.closest('[data-context-menu]')) {
        closeMenu();
      }
    };

    // ESC键关闭菜单
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        closeMenu();
      }
    };

    document.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isMenuOpen, event.id, closeMenu]);

  // 计算菜单位置（带边缘保护）
  const getMenuPosition = () => {
    const menuWidth = 180; // 菜单宽度
    const menuHeight = 150; // 估算菜单高度
    const padding = 8; // 边缘padding

    // 如果有鼠标位置，使用鼠标位置
    let left = padding;
    let top = padding;

    if (menuPosition) {
      // 水平位置跟随鼠标，添加偏移避免遮挡
      left = menuPosition.x + 4;
      // 垂直位置优先显示在鼠标下方
      top = menuPosition.y + 4;
    } else if (cardRef.current) {
      // 回退到卡片位置
      const cardRect = cardRef.current.getBoundingClientRect();
      left = cardRect.left;
      top = cardRect.bottom + 4;
    }

    // 边缘保护：确保不超出视口
    if (left + menuWidth > window.innerWidth - padding) {
      left = window.innerWidth - menuWidth - padding;
    }
    if (left < padding) left = padding;

    if (top + menuHeight > window.innerHeight - padding) {
      // 如果下方空间不足，显示在上方
      top = menuPosition ? menuPosition.y - menuHeight - 4 : top;
    }
    if (top < padding) top = padding;

    return { left, top };
  };

  // 计算时间信息
  const timeInfo = useMemo(() => {
    // 处理空日期情况
    if (!event.date) {
      return { isPast: false, isToday: true, timeStr: '未设置时间', diff: 0, hasTime: false };
    }

    const now = new Date();
    const dateStr = event.date as string;

    // 统一使用 Date 对象处理
    const eventDate = new Date(dateStr);

    // 检查是否包含有效时间（小时和分钟不全为0）
    const hours = eventDate.getHours();
    const minutes = eventDate.getMinutes();
    const hasExplicitTime = hours !== 0 || minutes !== 0;

    const diff = eventDate.getTime() - now.getTime();
    const isPast = diff < 0;
    const isToday = eventDate.toDateString() === now.toDateString();

    // 格式化显示
    let timeStr: string;
    if (hasExplicitTime) {
      timeStr = eventDate.toLocaleString('zh-CN', {
        month: 'numeric',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false,
      });
    } else {
      timeStr = eventDate.toLocaleString('zh-CN', {
        month: 'numeric',
        day: 'numeric',
      });
    }

    return { isPast, isToday, timeStr, diff, hasTime: hasExplicitTime };
  }, [event.date]);

  // 获取文字颜色
  const getTextColor = () => {
    if (isCompleted) return '#999';
    if (timeInfo.isPast) return '#666';
    return '#1a1a1a';
  };

  // 获取时间颜色
  const getTimeColor = () => {
    if (isCompleted) return '#bbb';
    if (timeInfo.isPast) return '#c41c1c';
    return '#666';
  };

  // 获取背景色
  const getBackground = () => {
    if (isCompleted) return 'rgba(0, 0, 0, 0.02)';
    if (isMissed) return 'rgba(196, 28, 28, 0.03)';
    return 'rgba(0, 0, 0, 0.02)';
  };

  // 获取边框颜色
  const getBorderColor = () => {
    if (isCompleted) return 'rgba(0, 0, 0, 0.06)';
    if (isMissed) return 'rgba(196, 28, 28, 0.15)';
    return 'rgba(0, 0, 0, 0.06)';
  };

  // 获取优先级的checkbox边框样式
  const getCheckboxBorderStyle = () => {
    const priority = event.priority || 'none';
    const priorityColor = getPriorityColor(priority);
    const isHighPriority = priority !== 'none';
    return {
      borderColor: priorityColor,
      borderWidth: isHighPriority ? '2px' : '1px',
      borderStyle: 'solid' as const,
    };
  };

  // 处理日期调整
  const handleDateAdjust = useCallback((days: number) => {
    const now = new Date();
    const targetDate = new Date(now);
    targetDate.setDate(targetDate.getDate() + days);

    // 格式化为 YYYY-MM-DD
    const formattedDate = targetDate.toISOString().split('T')[0];
    onDateChange?.(formattedDate, event.repeat_type, event.repeat_interval ?? null);
    closeMenu();
  }, [onDateChange, event.repeat_type, event.repeat_interval, closeMenu]);

  // 处理优先级设置
  const handlePriorityChange = useCallback((priority: PriorityType) => {
    onPriorityChange?.(priority);
    closeMenu();
  }, [onPriorityChange, closeMenu]);

  return (
    <>
      <Paper
        ref={cardRef}
        p="sm"
        radius={2}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onContextMenu={handleContextMenu}
        data-reminder-card={event.id}
        style={{
          cursor: 'pointer',
          opacity: isAnimating ? 0 : isCompleted ? 0.4 : 1,
          transform: isHovered ? 'translateY(-1px)' : 'translateY(0)',
          background: getBackground(),
          border: `1px solid ${getBorderColor()}`,
          borderLeft: isMissed && !isCompleted ? '3px solid #c41c1c' : undefined,
          transition: 'all 0.3s ease',
          animation: isAnimating ? 'reminder-card-fadeOut 0.3s ease-out forwards' : 'none',
        }}
      >
        <style>{`
          @keyframes reminder-card-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
          }
          @keyframes reminder-card-fadeOut {
            0% { opacity: 1; transform: translateX(0); }
            100% { opacity: 0; transform: translateX(20px); }
          }
          /* 自定义checkbox样式，去掉默认边框 */
          .reminder-checkbox input[type="checkbox"] {
            border-radius: 50% !important;
            border: none !important;
            background: transparent !important;
          }
          .reminder-checkbox .mantine-Checkbox-icon {
            color: inherit !important;
          }
        `}</style>
        {/* 正常提醒卡片：左右分栏布局 */}
        {!isMissed ? (
          <Group justify="space-between" wrap="nowrap" align="flex-start">
            {/* 左侧：Checkbox + 标题 + 内容 */}
            <Box
              style={{ flex: 1, minWidth: 0, cursor: 'pointer' }}
              onClick={(e) => {
                e.stopPropagation();
                onClick();
              }}
            >
              <Box style={{ display: 'flex', alignItems: 'flex-start' }}>
                {/* Checkbox */}
                <div
                  className="reminder-checkbox"
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    animation: isAnimating ? 'reminder-card-pulse 0.3s ease-out' : 'none',
                    width: 14,
                    height: 14,
                    borderRadius: '50%',
                    border: `1px solid ${getPriorityColor(event.priority || 'none')}`,
                    background: isCompleted ? getPriorityColor(event.priority || 'none') : '#ffffff',
                    cursor: 'pointer',
                    transition: 'all 0.2s ease',
                    flexShrink: 0,
                    position: 'relative',
                    marginTop: 2,
                  }}
                  onClick={(e) => {
                    e.stopPropagation();
                    onToggle();
                  }}
                >
                  {/* 已完成时显示的对勾 */}
                  {isCompleted && (
                    <span
                      style={{
                        position: 'absolute',
                        top: '50%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                        color: '#fff',
                        fontSize: '8px',
                        fontWeight: 'bold',
                        lineHeight: 1,
                      }}
                    >
                      ✓
                    </span>
                  )}
                </div>

                {/* 标题和内容垂直排列 */}
                <Box style={{ flex: 1, marginLeft: 8 }}>
                  {/* 标题 */}
                  <Text
                    fw={400}
                    size="xs"
                    lineClamp={1}
                    style={{
                      textDecoration: isCompleted ? 'line-through' : 'none',
                      color: getTextColor(),
                      letterSpacing: '0.03em',
                      transition: 'color 0.2s ease',
                    }}
                  >
                    {event.title}
                  </Text>

                  {/* 内容在标题下方 */}
                  {event.content && (
                    <Text
                      size="xs"
                      c={isCompleted ? '#bbb' : '#999'}
                      lineClamp={1}
                      style={{
                        marginTop: 2,
                        opacity: isCompleted ? 0.6 : 1,
                        transition: 'opacity 0.2s ease',
                      }}
                    >
                      {event.content}
                    </Text>
                  )}
                </Box>
              </Box>
            </Box>

            {/* 右侧：循环图标 + 日期时间 */}
            <Box style={{ flex: '0 0 auto', minWidth: 0, paddingLeft: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
              {event.repeat_type !== 'none' && (
                <Box
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    color: REPEAT_ICON_COLOR,
                  }}
                  title={getRepeatTypeLabel(event.repeat_type)}
                >
                  <IconRepeat size={12} />
                </Box>
              )}
              <Text
                size="xs"
                c={getTimeColor()}
                style={{ letterSpacing: '0.05em', whiteSpace: 'nowrap' }}
              >
                {timeInfo.timeStr}
              </Text>
            </Box>
          </Group>
        ) : (
          /* 逾期提醒卡片 */
          <Group justify="space-between" wrap="nowrap">
            <Group gap="sm" style={{ flex: 1, minWidth: 0 }}>
              <div
                className="reminder-checkbox"
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  animation: isAnimating ? 'reminder-card-pulse 0.3s ease-out' : 'none',
                  width: 14,
                  height: 14,
                  borderRadius: '50%',
                  border: `1px solid ${getPriorityColor(event.priority || 'none')}`,
                  background: isCompleted ? getPriorityColor(event.priority || 'none') : '#ffffff',
                  cursor: 'pointer',
                  transition: 'all 0.2s ease',
                  flexShrink: 0,
                  position: 'relative',
                }}
                onClick={(e) => {
                  e.stopPropagation();
                  if (isMissed && !isCompleted) {
                    setIsAnimating(true);
                    setTimeout(() => {
                      setIsAnimating(false);
                      onToggle();
                      onMissedToggle?.();
                    }, 300);
                  } else {
                    onToggle();
                  }
                }}
              >
                {/* 已完成时显示的对勾 */}
                {isCompleted && (
                  <span
                    style={{
                      position: 'absolute',
                      top: '50%',
                      left: '50%',
                      transform: 'translate(-50%, -50%)',
                      color: '#fff',
                      fontSize: '10px',
                      fontWeight: 'bold',
                      lineHeight: 1,
                    }}
                  >
                    ✓
                  </span>
                )}
              </div>

              <Stack gap={2} style={{ flex: 1, minWidth: 0 }} onClick={onClick}>
                <Group gap={4} wrap="nowrap">
                  <Text
                    fw={400}
                    size="xs"
                    lineClamp={1}
                    style={{
                      textDecoration: isCompleted ? 'line-through' : 'none',
                      color: getTextColor(),
                      letterSpacing: '0.03em',
                      transition: 'color 0.2s ease',
                    }}
                  >
                    {event.title}
                  </Text>
                  {event.repeat_type !== 'none' && (
                    <Box
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        flexShrink: 0,
                        color: REPEAT_ICON_COLOR,
                      }}
                      title={getRepeatTypeLabel(event.repeat_type)}
                    >
                      <IconRepeat size={10} />
                    </Box>
                  )}
                </Group>
                <Text
                  size="xs"
                  c={getTimeColor()}
                  style={{ letterSpacing: '0.05em' }}
                >
                  {timeInfo.timeStr}
                </Text>
                {event.content && (
                  <Text
                    size="xs"
                    c={isCompleted ? '#bbb' : '#999'}
                    lineClamp={1}
                    style={{
                      opacity: isCompleted ? 0.6 : 1,
                      transition: 'opacity 0.2s ease',
                    }}
                  >
                    {event.content}
                  </Text>
                )}
              </Stack>
            </Group>

            <Group gap={4}>
              {onPostpone && (
                <ActionIcon
                  size="sm"
                  variant="subtle"
                  color="orange"
                  onClick={(e) => {
                    e.stopPropagation();
                    onPostpone();
                  }}
                  style={{
                    color: '#e67e22',
                    opacity: isHovered ? 1 : 0,
                    transition: 'all 0.2s ease',
                  }}
                  title="顺延到今天"
                >
                  <IconArrowForward size={12} />
                </ActionIcon>
              )}
              <ActionIcon
                size="sm"
                variant="subtle"
                color="gray"
                onClick={(e) => {
                  e.stopPropagation();
                  onClick();
                }}
                style={{
                  color: '#999',
                  opacity: isHovered ? 1 : 0,
                  transition: 'all 0.2s ease',
                }}
                title="编辑"
              >
                <IconDots size={12} />
              </ActionIcon>
            </Group>
          </Group>
        )}
      </Paper>

      {/* 右键菜单 - 使用Portal渲染到body */}
      {isMenuOpen && cardRef.current && (
        <Portal>
          <Box
            data-context-menu
            style={{
              position: 'absolute',
              left: getMenuPosition().left,
              top: getMenuPosition().top,
              zIndex: 1000,
              background: '#fff',
              border: '1px solid rgba(0, 0, 0, 0.08)',
              borderRadius: 4,
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
              padding: '6px 8px',
              minWidth: 180,
            }}
            onMouseDown={(e) => e.stopPropagation()}
          >
            {/* 调整时间 */}
            <Box style={{ marginBottom: 6 }}>
              <Text size="xs" c="#999" fw={400} style={{ marginBottom: 4, paddingLeft: 4, letterSpacing: '0.05em' }}>
                调整时间
              </Text>
              <Group gap={4}>
                <ActionIcon
                  variant="subtle"
                  size="xs"
                  style={{
                    flex: 1,
                    height: 24,
                    color: '#666',
                    background: 'transparent',
                  }}
                  onClick={() => handleDateAdjust(0)}
                >
                  <Text size="xs">今天</Text>
                </ActionIcon>
                <ActionIcon
                  variant="subtle"
                  size="xs"
                  style={{
                    flex: 1,
                    height: 24,
                    color: '#666',
                    background: 'transparent',
                  }}
                  onClick={() => handleDateAdjust(1)}
                >
                  <Text size="xs">明天</Text>
                </ActionIcon>
                <ActionIcon
                  variant="subtle"
                  size="xs"
                  style={{
                    flex: 1,
                    height: 24,
                    color: '#666',
                    background: 'transparent',
                  }}
                  onClick={() => handleDateAdjust(7)}
                >
                  <Text size="xs">一周后</Text>
                </ActionIcon>
              </Group>
            </Box>

            <Divider my={4} style={{ borderColor: 'rgba(0, 0, 0, 0.06)' }} />

            {/* 颜色 */}
            <Box style={{ marginBottom: 6 }}>
              <Text size="xs" c="#999" fw={400} style={{ marginBottom: 4, paddingLeft: 4, letterSpacing: '0.05em' }}>
                颜色
              </Text>
              <Group gap={4}>
                {(Object.keys(PRIORITY_COLORS) as PriorityType[]).map((priority) => (
                  <ActionIcon
                    key={priority}
                    variant={event.priority === priority ? 'filled' : 'subtle'}
                    size="xs"
                    style={{
                      flex: 1,
                      height: 24,
                      background: event.priority === priority ? PRIORITY_COLORS[priority] : 'transparent',
                      color: event.priority === priority ? '#fff' : '#666',
                      border: `1px solid ${event.priority === priority ? 'transparent' : 'rgba(0, 0, 0, 0.1)'}`,
                    }}
                    onClick={() => handlePriorityChange(priority)}
                  >
                    <Text size="xs" fw={400}>
                      {PRIORITY_NAMES[priority]}
                    </Text>
                  </ActionIcon>
                ))}
              </Group>
            </Box>

            <Divider my={4} style={{ borderColor: 'rgba(0, 0, 0, 0.06)' }} />

            {/* 操作 */}
            <Group gap={4}>
              <ActionIcon
                variant="subtle"
                size="xs"
                style={{
                  flex: 1,
                  height: 24,
                  color: '#666',
                  background: 'transparent',
                }}
                onClick={() => {
                  onClick();
                  closeMenu();
                }}
              >
                <Text size="xs" fw={400}>编辑</Text>
              </ActionIcon>
              <ActionIcon
                variant="subtle"
                size="xs"
                style={{
                  flex: 1,
                  height: 24,
                  color: '#dc2626',
                  background: 'transparent',
                }}
                onClick={() => {
                  onDelete?.();
                  closeMenu();
                }}
              >
                <Text size="xs" fw={400}>删除</Text>
              </ActionIcon>
            </Group>
          </Box>
        </Portal>
      )}
    </>
  );
}