digital-pilates/components/model/HistoryModal.tsx

import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import {
  ActivityIndicator,
  Modal,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import dayjs from 'dayjs';

import { AiConversationListItem } from '@/services/aiCoach';

interface HistoryModalProps {
  visible: boolean;
  onClose: () => void;
  historyLoading: boolean;
  historyItems: AiConversationListItem[];
  historyPage: number;
  onRefreshHistory: (page: number) => void;
  onSelectConversation: (id: string) => void;
  onDeleteConversation: (id: string) => void;
}

export const HistoryModal: React.FC<HistoryModalProps> = ({
  visible,
  onClose,
  historyLoading,
  historyItems,
  historyPage,
  onRefreshHistory,
  onSelectConversation,
  onDeleteConversation,
}) => {
  return (
    <Modal transparent visible={visible} animationType="fade" onRequestClose={onClose}>
      <TouchableOpacity activeOpacity={1} style={styles.modalBackdrop} onPress={onClose}>
        <View style={[styles.modalSheet, { backgroundColor: '#FFFFFF' }]}>
          <View style={styles.modalHeader}>
            <Text style={styles.modalTitle}>历史会话</Text>
            <TouchableOpacity 
              accessibilityRole="button" 
              onPress={() => onRefreshHistory(historyPage)} 
              style={styles.modalRefreshBtn}
            >
              <Ionicons name="refresh" size={16} color="#192126" />
            </TouchableOpacity>
          </View>
          {historyLoading ? (
            <View style={{ paddingVertical: 20, alignItems: 'center' }}>
              <ActivityIndicator />
              <Text style={{ marginTop: 8, color: '#687076' }}>加载中...</Text>
            </View>
          ) : (
            <ScrollView style={{ maxHeight: 360 }}>
              {historyItems.length === 0 ? (
                <Text style={{ padding: 16, color: '#687076' }}>暂无会话</Text>
              ) : (
                historyItems.map((it) => (
                  <View key={it.conversationId} style={styles.historyRow}>
                    <TouchableOpacity
                      style={{ flex: 1 }}
                      onPress={() => onSelectConversation(it.conversationId)}
                    >
                      <Text style={styles.historyTitle} numberOfLines={1}>{it.title || '未命名会话'}</Text>
                      <Text style={styles.historyMeta}>
                        {dayjs(it.lastMessageAt || it.createdAt).format('YYYY/MM/DD HH:mm')}
                      </Text>
                    </TouchableOpacity>
                    <TouchableOpacity 
                      accessibilityRole="button" 
                      onPress={() => onDeleteConversation(it.conversationId)} 
                      style={styles.historyDeleteBtn}
                    >
                      <Ionicons name="trash-outline" size={16} color="#FF4444" />
                    </TouchableOpacity>
                  </View>
                ))
              )}
            </ScrollView>
          )}
          <View style={styles.modalFooter}>
            <TouchableOpacity 
              accessibilityRole="button" 
              onPress={onClose} 
              style={styles.modalCloseBtn}
            >
              <Text style={{ color: '#192126', fontWeight: '600' }}>关闭</Text>
            </TouchableOpacity>
          </View>
        </View>
      </TouchableOpacity>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalBackdrop: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.35)',
    padding: 16,
    justifyContent: 'flex-end',
  },
  modalSheet: {
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingHorizontal: 12,
    paddingTop: 10,
    paddingBottom: 12,
  },
  modalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 4,
    paddingBottom: 8,
  },
  modalTitle: {
    fontSize: 16,
    fontWeight: '800',
    color: '#192126',
  },
  modalRefreshBtn: {
    width: 28,
    height: 28,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.06)'
  },
  historyRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 8,
    borderRadius: 10,
  },
  historyTitle: {
    fontSize: 15,
    color: '#192126',
    fontWeight: '600',
  },
  historyMeta: {
    marginTop: 2,
    fontSize: 12,
    color: '#687076',
  },
  historyDeleteBtn: {
    width: 28,
    height: 28,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255,68,68,0.08)'
  },
  modalFooter: {
    paddingTop: 8,
    alignItems: 'flex-end',
  },
  modalCloseBtn: {
    paddingHorizontal: 14,
    paddingVertical: 8,
    borderRadius: 10,
    backgroundColor: 'rgba(0,0,0,0.06)'
  },
});

export default HistoryModal;