d3ro-voice/apps/mobile/app/(tabs)/talk.tsx

// apps/mobile/app/(tabs)/talk.tsx
// AI 대화 탭 — 텍스트+음성 채팅
// Phase M-2에서 디자인(docs/v3/designs/talk.html) 정밀 적용
// Phase M-5에서 음성 파이프라인 구현

import { useState } from 'react'
import { View, ScrollView, TextInput, StyleSheet, Pressable, KeyboardAvoidingView, Platform } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { MetalCard, PhosphorText, Led, d3roNativePalette } from '@d3ro/ui-native'

interface ChatMessage {
  id: string
  role: 'user' | 'assistant'
  content: string
}

export default function TalkScreen(): React.ReactElement {
  const insets = useSafeAreaInsets()
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: '1',
      role: 'assistant',
      content: 'Hello! How can I help you today?'
    }
  ])
  const [input, setInput] = useState('')

  function handleSend(): void {
    if (!input.trim()) return
    const userMsg: ChatMessage = {
      id: String(Date.now()),
      role: 'user',
      content: input.trim()
    }
    setMessages((prev) => [...prev, userMsg])
    setInput('')
    // Phase M-5: 실제 AI 응답 구현
  }

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={80}
    >
      {/* Header */}
      <View style={[styles.header, { paddingTop: insets.top + 8 }]}>
        <View style={styles.headerLeft}>
          <Led color="amber" size={8} />
          <PhosphorText variant="label" color="muted" style={{ letterSpacing: 3 }}>
            TALK
          </PhosphorText>
        </View>
        <View style={styles.headerRight}>
          <PhosphorText variant="label" color="amber">LIVE</PhosphorText>
          <Led color="green" size={6} />
        </View>
      </View>

      {/* Chat Messages */}
      <ScrollView style={styles.chatArea} contentContainerStyle={styles.chatContent}>
        {messages.map((msg) => (
          <View
            key={msg.id}
            style={[
              styles.bubble,
              msg.role === 'user' ? styles.userBubble : styles.aiBubble
            ]}
          >
            <PhosphorText
              variant="body"
              color={msg.role === 'user' ? 'amber' : 'primary'}
              style={{ fontFamily: undefined }}
            >
              {msg.content}
            </PhosphorText>
            <PhosphorText variant="label" color="muted" style={styles.bubbleLabel}>
              {msg.role === 'user' ? 'YOU' : 'CLAUDE'}
            </PhosphorText>
          </View>
        ))}
      </ScrollView>

      {/* Input Area */}
      <View style={styles.inputArea}>
        <View style={styles.inputRow}>
          <TextInput
            style={styles.textInput}
            placeholder="Type or speak..."
            placeholderTextColor={d3roNativePalette.text.muted}
            value={input}
            onChangeText={setInput}
            onSubmitEditing={handleSend}
            returnKeyType="send"
          />
          <Pressable style={styles.sendBtn} onPress={handleSend}>
            <View style={styles.sendArrow} />
          </Pressable>
        </View>
      </View>
    </KeyboardAvoidingView>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: d3roNativePalette.bg.app },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingBottom: 12,
    borderBottomWidth: 1,
    borderBottomColor: d3roNativePalette.border.default
  },
  headerLeft: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  headerRight: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  chatArea: { flex: 1 },
  chatContent: { padding: 20, paddingBottom: 20, gap: 16 },
  bubble: {
    maxWidth: '85%',
    padding: 16,
    borderRadius: 16,
    position: 'relative',
    marginBottom: 12
  },
  aiBubble: {
    alignSelf: 'flex-start',
    backgroundColor: d3roNativePalette.bg.card,
    borderWidth: 1,
    borderColor: d3roNativePalette.border.default,
    borderTopLeftRadius: 4
  },
  userBubble: {
    alignSelf: 'flex-end',
    backgroundColor: d3roNativePalette.accent.amberDim,
    borderWidth: 1,
    borderColor: 'rgba(255, 92, 53, 0.3)',
    borderTopRightRadius: 4
  },
  bubbleLabel: {
    position: 'absolute',
    bottom: -16,
    fontSize: 9
  },
  inputArea: {
    backgroundColor: 'rgba(25, 25, 27, 0.95)',
    borderTopWidth: 1,
    borderTopColor: d3roNativePalette.border.default,
    padding: 12,
    paddingBottom: 24
  },
  inputRow: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: d3roNativePalette.bg.inset,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: d3roNativePalette.border.default,
    padding: 8
  },
  textInput: {
    flex: 1,
    color: d3roNativePalette.text.primary,
    fontSize: 14,
    paddingHorizontal: 8
  },
  sendBtn: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: d3roNativePalette.accent.amberDim,
    borderWidth: 1,
    borderColor: 'rgba(255, 92, 53, 0.3)',
    justifyContent: 'center',
    alignItems: 'center'
  },
  sendArrow: {
    width: 0,
    height: 0,
    borderLeftWidth: 5,
    borderRightWidth: 5,
    borderBottomWidth: 8,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: d3roNativePalette.accent.amber
  }
})