digital-pilates/components/coach/ChatComposer.tsx

import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { Ionicons } from '@expo/vector-icons';
import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import React from 'react';
import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import QuickChips from './QuickChips';
import { QuickChip, SelectedImage } from './types';

interface ChatComposerProps {
  input: string;
  onInputChange: (text: string) => void;
  onSend: () => void;
  onPickImages: () => void;
  onCancelRequest: () => void;
  selectedImages: SelectedImage[];
  onRemoveImage: (id: string) => void;
  onPreviewImage: (uri: string) => void;
  isSending: boolean;
  isStreaming: boolean;
  chips: QuickChip[];
}

const ChatComposer: React.FC<ChatComposerProps> = ({
  input,
  onInputChange,
  onSend,
  onPickImages,
  onCancelRequest,
  selectedImages,
  onRemoveImage,
  onPreviewImage,
  isSending,
  isStreaming,
  chips
}) => {
  const colorScheme = useColorScheme();
  const theme = Colors[colorScheme ?? 'light'];

  const hasContent = input.trim() || selectedImages.length > 0;
  const isActive = isSending || isStreaming;

  return (
    <BlurView intensity={95} tint={colorScheme} style={styles.composerWrap}>
      {/* 快捷操作按钮 */}
      <QuickChips chips={chips} />

      {/* 选中的图片预览 */}
      {selectedImages.length > 0 && (
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          style={styles.imagesRow}
          contentContainerStyle={styles.imagesRowContent}
        >
          {selectedImages.map((img) => (
            <View key={img.id} style={styles.imageThumbWrap}>
              <TouchableOpacity
                onPress={() => onPreviewImage(img.localUri)}
                style={styles.imageThumb}
              >
                <Image
                  source={{ uri: img.localUri }}
                  style={styles.imageThumb}
                  contentFit="cover"
                />
              </TouchableOpacity>

              {/* 上传进度 */}
              {img.progress > 0 && img.progress < 1 && (
                <View style={styles.imageProgressOverlay}>
                  <Text style={styles.imageProgressText}>
                    {Math.round(img.progress * 100)}%
                  </Text>
                </View>
              )}

              {/* 上传错误 */}
              {img.error && (
                <View style={styles.imageErrorOverlay}>
                  <TouchableOpacity
                    onPress={() => {/* 重试上传逻辑 */ }}
                    style={styles.imageRetryBtn}
                  >
                    <Ionicons name="refresh" size={12} color="#fff" />
                  </TouchableOpacity>
                </View>
              )}

              {/* 删除按钮 */}
              <TouchableOpacity
                onPress={() => onRemoveImage(img.id)}
                style={styles.imageRemoveBtn}
              >
                <Ionicons name="close" size={12} color="#fff" />
              </TouchableOpacity>
            </View>
          ))}
        </ScrollView>
      )}

      {/* 输入区域 */}
      <View style={styles.inputRow}>
        <TouchableOpacity
          onPress={onPickImages}
          style={[styles.mediaBtn, { backgroundColor: `${theme.primary}20` }]}
        >
          <Ionicons name="image-outline" size={18} color={theme.text} />
        </TouchableOpacity>

        <TextInput
          placeholder="问我任何健康相关的问题，如营养、健身、生活管理等..."
          placeholderTextColor={theme.textMuted}
          style={[styles.input, { color: theme.text }]}
          value={input}
          onChangeText={onInputChange}
          multiline
          onSubmitEditing={onSend}
          submitBehavior="blurAndSubmit"
        />

        <TouchableOpacity
          disabled={!hasContent && !isActive}
          onPress={isActive ? onCancelRequest : onSend}
          style={[
            styles.sendBtn,
            {
              backgroundColor: isActive ? theme.danger : theme.primary,
              opacity: (hasContent || isActive) ? 1 : 0.5
            }
          ]}
        >
          {isActive ? (
            <Ionicons name="stop" size={18} color="#fff" />
          ) : (
            <Ionicons name="arrow-up" size={18} color={theme.onPrimary} />
          )}
        </TouchableOpacity>
      </View>
    </BlurView>
  );
};

const styles = StyleSheet.create({
  composerWrap: {
    paddingTop: 8,
    paddingHorizontal: 10,
    borderTopWidth: 0,
  },
  imagesRow: {
    maxHeight: 92,
    marginBottom: 8,
  },
  imagesRowContent: {
    gap: 8,
    paddingHorizontal: 6,
  },
  imageThumbWrap: {
    width: 72,
    height: 72,
    borderRadius: 12,
    overflow: 'hidden',
    position: 'relative',
    backgroundColor: 'rgba(122,90,248,0.08)',
  },
  imageThumb: {
    width: '100%',
    height: '100%',
  },
  imageRemoveBtn: {
    position: 'absolute',
    right: 4,
    top: 4,
    width: 20,
    height: 20,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.45)',
  },
  imageProgressOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.35)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  imageProgressText: {
    color: '#fff',
    fontWeight: '700',
    fontSize: 12,
  },
  imageErrorOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    backgroundColor: 'rgba(255,0,0,0.35)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  imageRetryBtn: {
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.6)',
  },
  inputRow: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 8,
  },
  mediaBtn: {
    width: 40,
    height: 40,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 6,
  },
  input: {
    flex: 1,
    fontSize: 15,
    maxHeight: 120,
    minHeight: 40,
    paddingHorizontal: 8,
    paddingVertical: 6,
    textAlignVertical: 'center',
  },
  sendBtn: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default ChatComposer;