import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { AppColors } from '@/constants/theme';
import { Chapter } from '@/data/mockData';

interface ChapterContentProps {
  chapter: Chapter;
}

export function ChapterContent({ chapter }: ChapterContentProps) {
  // Parse content to handle quotes
  const renderContent = () => {
    if (!chapter.content) {
      return (
        <Text style={styles.emptyText}>
          这一章还没有内容，快去和回忆录助手聊聊吧！
        </Text>
      );
    }

    const parts = chapter.content.split('"');
    
    return parts.map((part, index) => {
      // Check if this part is a quote (starts and ends with quote marks in original)
      if (part.startsWith('"') || (index > 0 && parts[index - 1].endsWith('"'))) {
        return null;
      }

      // Check for quote pattern
      const quoteMatch = chapter.content?.match(/"([^"]+)"/g);
      const isQuote = quoteMatch && quoteMatch.some(q => q.includes(part) && part.length > 10);

      if (part.trim().startsWith('"') && part.trim().endsWith('"')) {
        return (
          <View key={index} style={styles.quoteBlock}>
            <Text style={styles.quoteText}>{part}</Text>
          </View>
        );
      }

      // Split by newlines and render paragraphs
      return part.split('\n\n').map((paragraph, pIndex) => {
        if (!paragraph.trim()) return null;
        
        // Check if it's a quote
        if (paragraph.trim().startsWith('"') && paragraph.trim().endsWith('"')) {
          return (
            <View key={`${index}-${pIndex}`} style={styles.quoteBlock}>
              <Text style={styles.quoteText}>{paragraph.trim()}</Text>
            </View>
          );
        }

        return (
          <Text key={`${index}-${pIndex}`} style={styles.paragraph}>
            {paragraph.trim()}
          </Text>
        );
      });
    });
  };

  return (
    <View style={styles.container}>
      {/* Chapter Header */}
      <View style={styles.header}>
        <Text style={styles.chapterNumber}>
          第{['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][chapter.number - 1] || chapter.number}章
        </Text>
        <Text style={styles.chapterTitle}>{chapter.title}</Text>
      </View>

      {/* Content */}
      <ScrollView 
        style={styles.content}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.contentContainer}
      >
        {renderContent()}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  header: {
    marginBottom: 24,
  },
  chapterNumber: {
    fontSize: 13,
    color: AppColors.mediumPurple,
    fontWeight: '500',
    marginBottom: 4,
  },
  chapterTitle: {
    fontSize: 26,
    fontWeight: '600',
    color: AppColors.deepPurple,
  },
  content: {
    flex: 1,
  },
  contentContainer: {
    paddingBottom: 100,
  },
  paragraph: {
    fontSize: 16,
    lineHeight: 30,
    color: AppColors.deepPurple,
    marginBottom: 20,
    textAlign: 'justify',
  },
  quoteBlock: {
    marginVertical: 24,
    paddingVertical: 16,
    paddingHorizontal: 20,
    backgroundColor: AppColors.lavender,
    borderLeftWidth: 3,
    borderLeftColor: AppColors.mediumPurple,
    borderTopRightRadius: 12,
    borderBottomRightRadius: 12,
  },
  quoteText: {
    fontSize: 15,
    fontStyle: 'italic',
    color: AppColors.deepPurple,
    lineHeight: 24,
  },
  emptyText: {
    fontSize: 15,
    color: AppColors.slatePurple,
    textAlign: 'center',
    marginTop: 40,
  },
});