/**
 * 消息气泡样式工具
 * 参考 Element X 设计，实现动态圆角和现代化气泡样式
 */

import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
import { spacing, type AppColors } from '../../../../theme';

export const BUBBLE_RADIUS = 16;

export function getBubbleColors(colors: AppColors) {
  return {
    outgoing: {
      background: colors.chat.bubbleOutgoing,
      text: colors.chat.textPrimary,
    },
    incoming: {
      background: colors.chat.bubbleIncoming,
      text: colors.chat.textPrimary,
    },
    replyHighlight: {
      background: colors.chat.replyTint,
      borderLeft: colors.chat.replyBorder,
    },
  };
}

export type MessageGroupPosition = 'single' | 'first' | 'middle' | 'last';

export const getBubbleBorderRadius = (isMe: boolean, position: MessageGroupPosition): ViewStyle => {
  const radius = BUBBLE_RADIUS;

  if (isMe) {
    switch (position) {
      case 'single':
        return {
          borderTopLeftRadius: radius,
          borderTopRightRadius: radius,
          borderBottomLeftRadius: radius,
          borderBottomRightRadius: 4,
        };
      case 'first':
        return {
          borderTopLeftRadius: radius,
          borderTopRightRadius: radius,
          borderBottomLeftRadius: radius,
          borderBottomRightRadius: 4,
        };
      case 'middle':
        return {
          borderTopLeftRadius: radius,
          borderTopRightRadius: 4,
          borderBottomLeftRadius: radius,
          borderBottomRightRadius: 4,
        };
      case 'last':
        return {
          borderTopLeftRadius: radius,
          borderTopRightRadius: 4,
          borderBottomLeftRadius: radius,
          borderBottomRightRadius: radius,
        };
    }
  } else {
    switch (position) {
      case 'single':
        return {
          borderTopLeftRadius: 4,
          borderTopRightRadius: radius,
          borderBottomLeftRadius: radius,
          borderBottomRightRadius: radius,
        };
      case 'first':
        return {
          borderTopLeftRadius: 4,
          borderTopRightRadius: radius,
          borderBottomLeftRadius: 4,
          borderBottomRightRadius: radius,
        };
      case 'middle':
        return {
          borderTopLeftRadius: 4,
          borderTopRightRadius: radius,
          borderBottomLeftRadius: 4,
          borderBottomRightRadius: radius,
        };
      case 'last':
        return {
          borderTopLeftRadius: radius,
          borderTopRightRadius: radius,
          borderBottomLeftRadius: radius,
          borderBottomRightRadius: radius,
        };
    }
  }
};

export const getMessageGroupPosition = (
  index: number,
  messages: Array<{ sender_id: string }>,
  currentUserId: string
): MessageGroupPosition => {
  const currentMessage = messages[index];
  if (!currentMessage) return 'single';

  const prevMessage = index > 0 ? messages[index - 1] : null;
  const nextMessage = index < messages.length - 1 ? messages[index + 1] : null;

  const isSameSenderAsPrev = prevMessage && prevMessage.sender_id === currentMessage.sender_id;
  const isSameSenderAsNext = nextMessage && nextMessage.sender_id === currentMessage.sender_id;

  if (!isSameSenderAsPrev && !isSameSenderAsNext) {
    return 'single';
  } else if (!isSameSenderAsPrev && isSameSenderAsNext) {
    return 'first';
  } else if (isSameSenderAsPrev && isSameSenderAsNext) {
    return 'middle';
  } else {
    return 'last';
  }
};

export const shouldShowSenderInfo = (
  index: number,
  messages: Array<{ sender_id: string }>
): boolean => {
  if (index === 0) return true;

  const currentMessage = messages[index];
  const prevMessage = messages[index - 1];

  return prevMessage.sender_id !== currentMessage.sender_id;
};

export const getBubbleBaseStyle = (isMe: boolean, colors: AppColors): ViewStyle => {
  const bc = getBubbleColors(colors);
  return {
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm + 4,
    minWidth: 60,
    maxWidth: '75%',
    backgroundColor: isMe ? bc.outgoing.background : bc.incoming.background,
    shadowColor: colors.chat.shadow,
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.06,
    shadowRadius: 2,
    elevation: 2,
  };
};

export const getBubbleTextStyle = (isMe: boolean, colors: AppColors): TextStyle => {
  const bc = getBubbleColors(colors);
  return {
    color: isMe ? bc.outgoing.text : bc.incoming.text,
    fontSize: 16,
    lineHeight: 23,
    letterSpacing: 0.2,
    fontWeight: '400',
  };
};

export function createBubbleStyles(colors: AppColors) {
  const bc = getBubbleColors(colors);
  return StyleSheet.create({
    bubble: {
      paddingHorizontal: spacing.md,
      paddingVertical: spacing.sm + 4,
      minWidth: 60,
    },
    outgoing: {
      backgroundColor: bc.outgoing.background,
    },
    incoming: {
      backgroundColor: bc.incoming.background,
    },
    text: {
      fontSize: 16,
      lineHeight: 23,
      letterSpacing: 0.2,
      fontWeight: '400',
    },
    shadow: {
      shadowColor: colors.chat.shadow,
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.06,
      shadowRadius: 2,
      elevation: 2,
    },
    longPressShadow: {
      shadowColor: colors.chat.shadow,
      shadowOffset: { width: 0, height: 3 },
      shadowOpacity: 0.12,
      shadowRadius: 8,
      elevation: 6,
    },
    replyHighlight: {
      borderLeftWidth: 3,
      borderLeftColor: colors.primary.main,
      backgroundColor: bc.replyHighlight.background,
    },
    recalled: {
      backgroundColor: colors.chat.surfaceMuted,
      borderWidth: 1,
      borderColor: colors.chat.border,
      borderStyle: 'dashed',
      borderRadius: 12,
    },
    systemNotice: {
      alignItems: 'center',
      marginVertical: spacing.sm,
    },
    systemNoticeText: {
      fontSize: 12,
      color: colors.chat.textSecondary,
      backgroundColor: colors.chat.surfaceMuted,
      paddingHorizontal: spacing.md,
      paddingVertical: spacing.xs,
      borderRadius: 12,
      overflow: 'hidden',
    },
  });
}

export default {
  BUBBLE_RADIUS,
  getBubbleColors,
  getBubbleBorderRadius,
  getMessageGroupPosition,
  shouldShowSenderInfo,
  getBubbleBaseStyle,
  getBubbleTextStyle,
  createBubbleStyles,
};
