/**
 * 更多功能面板组件 - 现代扁平化设计
 */

import React from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Text } from '../../../../components/common';
import { useChatScreenStyles } from './styles';
import { MORE_ACTIONS } from './constants';
import { MorePanelProps } from './types';

// 渐变背景组件
const GradientIcon: React.FC<{
  colors: [string, string];
  icon: string;
  size?: number;
}> = ({ colors, icon, size = 28 }) => {
  return (
    <View style={[gradientStyles.container, { backgroundColor: colors[0] }]}>
      <View style={[gradientStyles.gradientOverlay, { backgroundColor: colors[1] }]} />
      <MaterialCommunityIcons name={icon as any} size={size} color="#FFFFFF" />
    </View>
  );
};

const gradientStyles = StyleSheet.create({
  container: {
    width: 56,
    height: 56,
    borderRadius: 18,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    position: 'relative',
  },
  gradientOverlay: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: '50%',
    opacity: 0.3,
  },
});

export const MorePanel: React.FC<MorePanelProps> = ({
  onAction,
  disabledActionIds = [],
  isGroupChat = false,
}) => {
  const styles = useChatScreenStyles();
  const disabledSet = new Set(disabledActionIds);

  // 群聊中隐藏语音通话和视频通话
  const actions = isGroupChat
    ? MORE_ACTIONS.filter(action => action.id !== 'voice_call' && action.id !== 'video_call')
    : MORE_ACTIONS;

  return (
    <View style={styles.panelContainer}>
      <View style={styles.moreGrid}>
        {actions.map((action) => {
          const disabled = disabledSet.has(action.id);
          return (
            <TouchableOpacity
              key={action.id}
              style={[styles.moreItem, disabled ? { opacity: 0.4 } : null]}
              onPress={() => onAction(action.id)}
              disabled={disabled}
              activeOpacity={0.7}
            >
              <GradientIcon
                colors={action.gradientColors || [action.color, action.color]}
                icon={action.icon}
              />
              <Text style={styles.moreItemText}>{action.name}</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
};

export default MorePanel;
