Kokorone/apps/mobile/app/(tabs)/index.tsx

import { useState } from "react";
import {
  KeyboardAvoidingView,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from "react-native";
import type { EmotionTag } from "@kokorone/shared";
import { sendChatMessage, fetchExpression, type TachieExpressionResponse } from "../../lib/api";
import { EMOTION_LABELS } from "../../lib/emotion-labels";
import { generateSessionId } from "../../lib/id";

const CHARACTER_ID = "seed-character-genki";
const USER_ID = "seed-user-primary";
const EXPRESSION_LEAD_MS = 220; // O-2/Q-2：表情先變化、文字延後一小段時間出現，跟 apps/web 的作法一致。

interface Message {
  role: "user" | "character";
  text: string;
}

// Q-2 行動版佈局：立繪半身像置於上方 40% 為背景層，對話流覆蓋其上向下延伸——
// 跟行動網頁版同一份設計原則，只是這裡用 View 的 flex 排版而非 CSS。立繪本體目前是佔位色塊
// （O 群組的 PixiJS 渲染器是網頁 DOM/Canvas 實作，沒有移植到 React Native，見本群組實作記錄）。
export default function ChatScreen() {
  const [sessionId] = useState(() => generateSessionId());
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [sending, setSending] = useState(false);
  const [dominant, setDominant] = useState<EmotionTag>("CALM");
  const [intimacy, setIntimacy] = useState(0);
  const [expression, setExpression] = useState<TachieExpressionResponse | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleSend() {
    const text = input.trim();
    if (!text || sending) {
      return;
    }
    setSending(true);
    setError(null);
    setInput("");
    setMessages((prev) => [...prev, { role: "user", text }]);

    try {
      const result = await sendChatMessage(CHARACTER_ID, USER_ID, sessionId, text);
      if (result.availability === "NO_REPLY") {
        return;
      }
      if (result.context) {
        setDominant(result.context.emotion.dominant);
        setIntimacy(result.context.relationship.intimacy);
      }
      try {
        setExpression(await fetchExpression(CHARACTER_ID, USER_ID));
      } catch {
        // 表情查詢失敗不影響對話本身。
      }
      await new Promise((resolve) => setTimeout(resolve, EXPRESSION_LEAD_MS));
      setMessages((prev) => [...prev, { role: "character", text: result.text }]);
    } catch {
      setError("訊息傳送失敗，請確認 api 服務是否已啟動");
    } finally {
      setSending(false);
    }
  }

  return (
    <KeyboardAvoidingView
      style={styles.flex}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
    >
      <View style={styles.tachieArea}>
        <Text style={styles.tachieLabel}>親密度 {intimacy}</Text>
        <View style={styles.emotionChip}>
          <Text style={styles.emotionChipText}>{EMOTION_LABELS[dominant]}</Text>
        </View>
        <View style={[styles.tachiePlaceholder, expression ? { opacity: 0.85 + expression.magnitude * 0.15 } : null]} />
        <Text style={styles.tachieCaption}>立繪（表情差分即時變化）</Text>
      </View>

      <ScrollView style={styles.messages} contentContainerStyle={styles.messagesContent}>
        {messages.length === 0 && <Text style={styles.hint}>傳個訊息，開始今天的對話吧。</Text>}
        {messages.map((message, index) => (
          <View
            key={index}
            style={[styles.bubble, message.role === "user" ? styles.bubbleUser : styles.bubbleCharacter]}
          >
            <Text style={styles.bubbleText}>{message.text}</Text>
          </View>
        ))}
      </ScrollView>

      {error && <Text style={styles.error}>{error}</Text>}

      <View style={styles.inputRow}>
        <TextInput
          value={input}
          onChangeText={setInput}
          placeholder="輸入訊息……"
          style={styles.input}
          editable={!sending}
          onSubmitEditing={handleSend}
        />
        <Pressable onPress={handleSend} disabled={sending}>
          <Text style={[styles.sendButton, sending ? styles.sendButtonDisabled : null]}>送出</Text>
        </Pressable>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1, backgroundColor: "#FFF5F7" },
  tachieArea: {
    height: "40%",
    backgroundColor: "#FCE4EC",
    alignItems: "center",
    justifyContent: "flex-end",
    paddingBottom: 16,
  },
  tachieLabel: { position: "absolute", top: 14, left: 14, fontSize: 11, color: "#8a6b6f" },
  emotionChip: {
    position: "absolute",
    top: 14,
    right: 14,
    backgroundColor: "#FFE0EA",
    borderRadius: 999,
    paddingHorizontal: 12,
    paddingVertical: 4,
  },
  emotionChipText: { color: "#FF7E9D", fontWeight: "bold", fontSize: 12 },
  tachiePlaceholder: {
    width: 120,
    height: 190,
    borderTopLeftRadius: 60,
    borderTopRightRadius: 60,
    borderBottomLeftRadius: 24,
    borderBottomRightRadius: 24,
    backgroundColor: "#FF9EB5",
  },
  tachieCaption: { fontSize: 11, color: "#8a6b6f", marginTop: 8 },
  messages: { flex: 1 },
  messagesContent: { padding: 16, gap: 8 },
  hint: { fontSize: 13, color: "#8a6b6f" },
  bubble: { maxWidth: "80%", borderRadius: 16, padding: 10 },
  bubbleUser: { alignSelf: "flex-end", backgroundColor: "#FF7E9D" },
  bubbleCharacter: { alignSelf: "flex-start", backgroundColor: "#EFEFEF" },
  bubbleText: { color: "#222" },
  error: { color: "#FF7E9D", fontSize: 12, paddingHorizontal: 16 },
  inputRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    margin: 12,
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 999,
    borderWidth: 1,
    borderColor: "#E5D5D8",
  },
  input: { flex: 1, fontSize: 14 },
  sendButton: { color: "#FF7E9D", fontWeight: "bold" },
  sendButtonDisabled: { opacity: 0.5 },
});