digital-pilates/app/ai-coach-chat.tsx

import { Ionicons } from '@expo/vector-icons';
import { BlurView } from 'expo-blur';
import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  ActivityIndicator,
  FlatList,
  Image,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import Animated, { FadeInDown, FadeInUp, Layout } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { HeaderBar } from '@/components/ui/HeaderBar';
import { Colors } from '@/constants/Colors';
import { useAppSelector } from '@/hooks/redux';
import { useColorScheme } from '@/hooks/useColorScheme';
import { loadAiCoachSessionCache, saveAiCoachSessionCache } from '@/services/aiCoachSession';
import { api, getAuthToken, postTextStream } from '@/services/api';
import type { CheckinRecord } from '@/store/checkinSlice';

type Role = 'user' | 'assistant';

type ChatMessage = {
  id: string;
  role: Role;
  content: string;
};

const COACH_AVATAR = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/avatar/imageCoach01.jpeg';

export default function AICoachChatScreen() {
  const router = useRouter();
  const params = useLocalSearchParams<{ name?: string }>();
  const insets = useSafeAreaInsets();
  const colorScheme = useColorScheme() ?? 'light';
  // 为了让页面更贴近品牌主题与更亮的观感，这里使用亮色系配色
  const theme = Colors.light;
  const coachName = (params?.name || 'Sarah').toString();
  const [input, setInput] = useState('');
  const [isSending, setIsSending] = useState(false);
  const [isStreaming, setIsStreaming] = useState(false);
  const [conversationId, setConversationId] = useState<string | undefined>(undefined);
  const [messages, setMessages] = useState<ChatMessage[]>([{
    id: 'm_welcome',
    role: 'assistant',
    content: `你好，我是你的普拉提教练 ${coachName}。可以向我咨询训练、体态、康复、柔韧等问题～`,
  }]);
  const listRef = useRef<FlatList<ChatMessage>>(null);
  const [isAtBottom, setIsAtBottom] = useState(true);
  const didInitialScrollRef = useRef(false);
  const [composerHeight, setComposerHeight] = useState<number>(80);
  const shouldAutoScrollRef = useRef(false);

  const planDraft = useAppSelector((s) => s.trainingPlan?.draft);
  const checkin = useAppSelector((s) => (s as any).checkin);

  const chips = useMemo(() => [
    { key: 'posture', label: '体态评估', action: () => router.push('/ai-posture-assessment') },
    { key: 'plan', label: 'AI制定训练计划', action: () => handleQuickPlan() },
    { key: 'analyze', label: '分析运动记录', action: () => handleAnalyzeRecords() },
  ], [router, planDraft, checkin]);

  const scrollToEnd = useCallback(() => {
    requestAnimationFrame(() => {
      listRef.current?.scrollToEnd({ animated: true });
    });
  }, []);

  const handleScroll = useCallback((e: any) => {
    try {
      const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent || {};
      const paddingToBottom = 60;
      const distanceFromBottom = (contentSize?.height || 0) - ((layoutMeasurement?.height || 0) + (contentOffset?.y || 0));
      setIsAtBottom(distanceFromBottom <= paddingToBottom);
    } catch { }
  }, []);

  useEffect(() => {
    // 初次进入或恢复时，保持最新消息可见
    scrollToEnd();
  }, [scrollToEnd]);
  // 启动页面时尝试恢复当次应用会话缓存
  useEffect(() => {
    (async () => {
      try {
        const cached = await loadAiCoachSessionCache();
        if (cached && Array.isArray(cached.messages) && cached.messages.length > 0) {
          setConversationId(cached.conversationId);
          setMessages(cached.messages as any);
          setTimeout(scrollToEnd, 0);
        }
      } catch { }
    })();
  }, [scrollToEnd]);

  // 会话变动时，轻量防抖写入缓存（在本次应用生命周期内可跨页面恢复；下次冷启动会被根布局清空）
  const saveCacheTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  useEffect(() => {
    if (saveCacheTimerRef.current) clearTimeout(saveCacheTimerRef.current);
    saveCacheTimerRef.current = setTimeout(() => {
      saveAiCoachSessionCache({ conversationId, messages: messages as any, updatedAt: Date.now() }).catch(() => { });
    }, 150);
    return () => { if (saveCacheTimerRef.current) clearTimeout(saveCacheTimerRef.current); };
    // 仅在 messages 或 conversationId 变化时触发
  }, [messages, conversationId]);


  // 取消对 messages.length 的全局监听滚动，改为在“消息实际追加完成”后再判断与滚动，避免突兀与多次触发

  useEffect(() => {
    // 输入区高度变化时，若用户在底部则轻柔跟随一次
    if (isAtBottom) {
      const id = setTimeout(scrollToEnd, 0);
      return () => clearTimeout(id);
    }
  }, [composerHeight, isAtBottom, scrollToEnd]);

  const streamAbortRef = useRef<{ abort: () => void } | null>(null);

  useEffect(() => {
    return () => {
      try { streamAbortRef.current?.abort(); } catch { }
    };
  }, []);

  function ensureConversationId(): string {
    if (conversationId && conversationId.trim()) return conversationId;
    const cid = `mobile-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
    setConversationId(cid);
    try { console.log('[AI_CHAT][ui] create temp conversationId', cid); } catch { }
    return cid;
  }

  function convertToServerMessages(history: ChatMessage[]): Array<{ role: 'user' | 'assistant' | 'system'; content: string }> {
    // 仅映射 user/assistant 消息；系统提示由后端自动注入
    return history
      .filter((m) => m.role === 'user' || m.role === 'assistant')
      .map((m) => ({ role: m.role, content: m.content }));
  }

  async function sendStream(text: string) {
    const tokenExists = !!getAuthToken();
    try { console.log('[AI_CHAT][ui] send start', { tokenExists, conversationId, textPreview: text.slice(0, 50) }); } catch { }

    // 终止上一次未完成的流
    if (streamAbortRef.current) {
      try { console.log('[AI_CHAT][ui] abort previous stream'); } catch { }
      try { streamAbortRef.current.abort(); } catch { }
      streamAbortRef.current = null;
    }

    // 发送 body：尽量提供历史消息，后端会优先使用 conversationId 关联上下文
    const historyForServer = convertToServerMessages(messages);
    const cid = ensureConversationId();
    const body = {
      conversationId: cid,
      messages: [...historyForServer, { role: 'user' as const, content: text }],
      stream: true,
    };

    // 在 UI 中先放置占位回答，随后持续增量更新
    const assistantId = `a_${Date.now()}`;
    const userMsgId = `u_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;

    const userMsg: ChatMessage = { id: userMsgId, role: 'user', content: text };
    shouldAutoScrollRef.current = isAtBottom;
    setMessages((m) => [...m, userMsg, { id: assistantId, role: 'assistant', content: '' }]);

    setIsSending(true);
    setIsStreaming(true);

    let receivedAnyChunk = false;

    const updateAssistantContent = (delta: string) => {
      setMessages((prev) => {
        const next = prev.map((msg) => {
          if (msg.id === assistantId) {
            return { ...msg, content: msg.content + delta };
          }
          return msg;
        });
        return next;
      });
    };

    const onChunk = (chunk: string) => {
      receivedAnyChunk = true;
      const atBottomNow = isAtBottom;
      updateAssistantContent(chunk);
      if (atBottomNow) {
        // 在底部时，持续开启自动滚动，并主动触发一次滚动以避免极小增量未触发 onContentSizeChange 的情况
        shouldAutoScrollRef.current = true;
        setTimeout(scrollToEnd, 0);
      }
      try { console.log('[AI_CHAT][api] chunk', { length: chunk.length, preview: chunk.slice(0, 40) }); } catch { }
    };

    const onEnd = (cidFromHeader?: string) => {
      setIsSending(false);
      setIsStreaming(false);
      streamAbortRef.current = null;
      if (cidFromHeader && !conversationId) setConversationId(cidFromHeader);
      try { console.log('[AI_CHAT][api] end', { cidFromHeader, hadChunks: receivedAnyChunk }); } catch { }
    };

    const onError = async (err: any) => {
      try { console.warn('[AI_CHAT][api] error', err); } catch { }
      setIsSending(false);
      setIsStreaming(false);
      streamAbortRef.current = null;
      // 流式失败时的降级：尝试一次性非流式
      try {
        const bodyNoStream = { ...body, stream: false };
        try { console.log('[AI_CHAT][fallback] try non-stream'); } catch { }
        const resp = await api.post<{ conversationId?: string; text: string }>('/api/ai-coach/chat', bodyNoStream);
        const textCombined = (resp as any)?.text ?? '';
        if ((resp as any)?.conversationId && !conversationId) {
          setConversationId((resp as any).conversationId);
        }
        setMessages((prev) => prev.map((msg) => msg.id === assistantId ? { ...msg, content: textCombined || '（空响应）' } : msg));
      } catch (e2: any) {
        setMessages((prev) => prev.map((msg) => msg.id === assistantId ? { ...msg, content: '抱歉，请求失败，请稍后再试。' } : msg));
        try { console.warn('[AI_CHAT][fallback] non-stream error', e2); } catch { }
      }
    };

    try {
      const controller = postTextStream('/api/ai-coach/chat', body, { onChunk, onEnd, onError }, { timeoutMs: 120000 });
      streamAbortRef.current = controller;
    } catch (e) {
      onError(e);
    }
  }

  async function send(text: string) {
    if (!text.trim() || isSending) return;
    const trimmed = text.trim();
    setInput('');
    await sendStream(trimmed);
  }

  function handleQuickPlan() {
    const goalMap: Record<string, string> = {
      postpartum_recovery: '产后恢复',
      fat_loss: '减脂塑形',
      posture_correction: '体态矫正',
      core_strength: '核心力量',
      flexibility: '柔韧灵活',
      rehab: '康复保健',
      stress_relief: '释压放松',
    };
    const goalText = planDraft?.goal ? goalMap[planDraft.goal] : '整体提升';
    const freq = planDraft?.mode === 'sessionsPerWeek'
      ? `${planDraft?.sessionsPerWeek ?? 3}次/周`
      : (planDraft?.daysOfWeek?.length ? `${planDraft.daysOfWeek.length}次/周` : '3次/周');
    const prefer = planDraft?.preferredTimeOfDay ? `偏好${planDraft.preferredTimeOfDay}` : '时间灵活';
    const prompt = `请根据我的目标“${goalText}”、频率“${freq}”、${prefer}，制定1周的普拉提训练计划，包含每次训练主题、时长、主要动作与注意事项，并给出恢复建议。`;
    send(prompt);
  }

  function buildTrainingSummary(): string {
    const entries = Object.values(checkin?.byDate || {}) as CheckinRecord[];
    if (!entries.length) return '';
    const recent = entries.sort((a: any, b: any) => String(b.date).localeCompare(String(a.date))).slice(0, 14);
    let totalSessions = 0;
    let totalExercises = 0;
    let totalCompleted = 0;
    const categoryCount: Record<string, number> = {};
    const exerciseCount: Record<string, number> = {};
    for (const rec of recent) {
      if (!rec?.items?.length) continue;
      totalSessions += 1;
      for (const it of rec.items) {
        totalExercises += 1;
        if (it.completed) totalCompleted += 1;
        categoryCount[it.category] = (categoryCount[it.category] || 0) + 1;
        exerciseCount[it.name] = (exerciseCount[it.name] || 0) + 1;
      }
    }
    const topCategories = Object.entries(categoryCount).sort((a, b) => b[1] - a[1]).slice(0, 3).map(([k, v]) => `${k}×${v}`);
    const topExercises = Object.entries(exerciseCount).sort((a, b) => b[1] - a[1]).slice(0, 5).map(([k, v]) => `${k}×${v}`);
    return [
      `统计周期：最近${recent.length}天（按有记录日计 ${totalSessions} 天）`,
      `记录条目：${totalExercises}，完成标记：${totalCompleted}`,
      topCategories.length ? `高频类别：${topCategories.join('，')}` : '',
      topExercises.length ? `高频动作：${topExercises.join('，')}` : '',
    ].filter(Boolean).join('\n');
  }

  function handleAnalyzeRecords() {
    const summary = buildTrainingSummary();
    if (!summary) {
      send('我还没有可分析的打卡记录，请先在“每日打卡”添加并完成一些训练记录，然后帮我分析近期训练表现与改进建议。');
      return;
    }
    const prompt = `请基于以下我的近期训练记录进行分析，输出：1）整体训练负荷与节奏；2）动作与肌群的均衡性（指出偏多/偏少）；3）容易忽视的恢复与热身建议；4）后续一周的优化建议（频次/时长/动作方向）。\n\n${summary}`;
    send(prompt);
  }

  function renderItem({ item }: { item: ChatMessage }) {
    const isUser = item.role === 'user';
    return (
      <Animated.View
        entering={isUser ? FadeInUp.springify().damping(18) : FadeInDown.springify().damping(18)}
        layout={Layout.springify().damping(18)}
        style={[styles.row, { justifyContent: isUser ? 'flex-end' : 'flex-start' }]}
      >
        {!isUser && (
          <Image source={{ uri: COACH_AVATAR }} style={styles.avatar} />
        )}
        <View
          style={[
            styles.bubble,
            {
              backgroundColor: isUser ? theme.primary : 'rgba(187,242,70,0.16)',
              borderTopLeftRadius: isUser ? 16 : 6,
              borderTopRightRadius: isUser ? 6 : 16,
            },
          ]}
        >
          <Text style={[styles.bubbleText, { color: isUser ? theme.onPrimary : '#192126' }]}>{item.content}</Text>
        </View>
      </Animated.View>
    );
  }

  return (
    <View style={[styles.screen, { backgroundColor: theme.background }]}>
      <HeaderBar
        title={`教练 ${coachName}`}
        onBack={() => router.back()}
        tone="light"
        transparent
      />

      <FlatList
        ref={listRef}
        data={messages}
        keyExtractor={(m) => m.id}
        renderItem={renderItem}
        onLayout={() => {
          // 确保首屏布局后也尝试滚动
          if (!didInitialScrollRef.current) {
            didInitialScrollRef.current = true;
            setTimeout(scrollToEnd, 0);
            requestAnimationFrame(scrollToEnd);
          }
        }}
        contentContainerStyle={{ paddingHorizontal: 14, paddingTop: 8 }}
        ListFooterComponent={() => (
          <View style={{ height: insets.bottom + composerHeight + (isAtBottom ? 0 : 56) + 16 }} />
        )}
        onContentSizeChange={() => {
          // 首次内容变化强制滚底，其余仅在接近底部时滚动
          if (!didInitialScrollRef.current) {
            didInitialScrollRef.current = true;
            setTimeout(scrollToEnd, 0);
            requestAnimationFrame(scrollToEnd);
            return;
          }
          if (shouldAutoScrollRef.current) {
            shouldAutoScrollRef.current = false;
            setTimeout(scrollToEnd, 0);
          }
        }}
        onScroll={handleScroll}
        scrollEventThrottle={16}
        showsVerticalScrollIndicator={false}
      />

      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={insets.top}>
        <BlurView
          intensity={18}
          tint={'light'}
          style={[styles.composerWrap, { paddingBottom: insets.bottom + 10 }]}
          onLayout={(e) => {
            const h = e.nativeEvent.layout.height;
            if (h && Math.abs(h - composerHeight) > 0.5) setComposerHeight(h);
          }}
        >
          <View style={styles.chipsRow}>
            {chips.map((c) => (
              <TouchableOpacity key={c.key} style={[styles.chip, { borderColor: 'rgba(187,242,70,0.35)', backgroundColor: 'rgba(187,242,70,0.12)' }]} onPress={c.action}>
                <Text style={[styles.chipText, { color: '#192126' }]}>{c.label}</Text>
              </TouchableOpacity>
            ))}
          </View>

          <View style={[styles.inputRow, { borderColor: 'rgba(187,242,70,0.35)', backgroundColor: 'rgba(187,242,70,0.08)' }]}>
            <TextInput
              placeholder="问我任何与普拉提相关的问题..."
              placeholderTextColor={theme.textMuted}
              style={[styles.input, { color: '#192126' }]}
              value={input}
              onChangeText={setInput}
              multiline
              onSubmitEditing={() => send(input)}
              blurOnSubmit={false}
            />
            <TouchableOpacity
              accessibilityRole="button"
              disabled={!input.trim() || isSending}
              onPress={() => send(input)}
              style={[
                styles.sendBtn,
                { backgroundColor: theme.primary, opacity: input.trim() && !isSending ? 1 : 0.5 }
              ]}
            >
              {isSending ? (
                <ActivityIndicator color={theme.onPrimary} />
              ) : (
                <Ionicons name="arrow-up" size={18} color={theme.onPrimary} />
              )}
            </TouchableOpacity>
          </View>
        </BlurView>
      </KeyboardAvoidingView>

      {!isAtBottom && (
        <TouchableOpacity
          accessibilityRole="button"
          onPress={scrollToEnd}
          style={[styles.scrollToBottomFab, { bottom: insets.bottom + composerHeight + 16, backgroundColor: theme.primary }]}
        >
          <Ionicons name="chevron-down" size={18} color={theme.onPrimary} />
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingBottom: 10,
  },
  backButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255,255,255,0.06)'
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: '800',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    gap: 8,
    marginVertical: 6,
  },
  avatar: {
    width: 28,
    height: 28,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatarText: {
    color: '#192126',
    fontSize: 12,
    fontWeight: '800',
  },
  bubble: {
    maxWidth: '82%',
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 16,
  },
  bubbleText: {
    fontSize: 15,
    lineHeight: 22,
  },
  composerWrap: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    paddingTop: 8,
    paddingHorizontal: 10,
    borderTopWidth: 0,
  },
  chipsRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    paddingHorizontal: 6,
    marginBottom: 8,
  },
  chip: {
    paddingHorizontal: 10,
    height: 34,
    borderRadius: 18,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },
  chipText: {
    fontSize: 13,
    fontWeight: '600',
  },
  inputRow: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 8,
    borderWidth: 1,
    borderRadius: 16,
    backgroundColor: 'rgba(0,0,0,0.04)'
  },
  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',
  },
  scrollToBottomFab: {
    position: 'absolute',
    right: 16,
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 4,
    elevation: 2,
  },
});