import { ConversationItem } from '@/components/chat/ConversationItem';
import { AppColors } from '@/constants/theme';
import { mockConversations } from '@/data/mockData';
import { Ionicons } from '@expo/vector-icons';
import { router } from 'expo-router';
import React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function ChatListScreen() {
  const handleConversationPress = (conversationId: string) => {
    router.push(`/chat/${conversationId}`);
  };

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.headerTitle}>往事拾遗</Text>
      </View>

      {/* Content */}
      <ScrollView 
        style={styles.content}
        contentContainerStyle={styles.contentContainer}
        showsVerticalScrollIndicator={false}
      >
        {/* Section Title */}
        <Text style={styles.sectionTitle}>我的对话</Text>

        {/* Conversation List */}
        {mockConversations.map((conversation) => (
          <React.Fragment key={conversation.id}>
            <ConversationItem
              conversation={conversation}
              onPress={() => handleConversationPress(conversation.id)}
            />
            <View style={styles.divider} />
          </React.Fragment>
        ))}

        {/* Tip Card */}
        <View style={styles.tipCard}>
          <View style={styles.tipHeader}>
            <Ionicons 
              name="information-circle-outline" 
              size={18} 
              color={AppColors.mediumPurple} 
            />
            <Text style={styles.tipTitle}>小贴士</Text>
          </View>
          <Text style={styles.tipContent}>
            每天花几分钟聊聊往事，AI 会帮您整理成完整的回忆录。您可以聊童年趣事、求学经历、工作故事，或者任何难忘的回忆。
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.mediumPurple,
  },
  header: {
    height: 62,
    paddingHorizontal: 20,
    justifyContent: 'center',
    backgroundColor: AppColors.mediumPurple,
  },
  headerTitle: {
    fontSize: 32,
    fontWeight: '600',
    color: AppColors.white,
  },
  content: {
    flex: 1,
    backgroundColor: AppColors.cream,
  },
  contentContainer: {
    paddingBottom: 20,
  },
  sectionTitle: {
    fontSize: 13,
    color: AppColors.slatePurple,
    fontWeight: '500',
    letterSpacing: 0.5,
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 10,
  },
  divider: {
    height: 1,
    backgroundColor: 'rgba(32, 0, 40, 0.06)',
    marginHorizontal: 20,
  },
  tipCard: {
    marginHorizontal: 20,
    marginTop: 20,
    padding: 16,
    backgroundColor: AppColors.white,
    borderRadius: 16,
    shadowColor: AppColors.deepPurple,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.06,
    shadowRadius: 12,
    elevation: 2,
  },
  tipHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  tipTitle: {
    fontSize: 14,
    fontWeight: '500',
    color: AppColors.deepPurple,
    marginLeft: 8,
  },
  tipContent: {
    fontSize: 13,
    color: AppColors.slatePurple,
    lineHeight: 21,
  },
});