life-echo/app-ios/components/memoir/FullMemoirContent.tsx

import { AppColors } from '@/constants/theme';
import { Memoir } from '@/data/mockData';
import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';

interface FullMemoirContentProps {
  memoir: Memoir;
}

const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];

function renderChapterContent(content: string | undefined) {
  if (!content) {
    return (
      <Text style={styles.emptyText}>
        这一章还没有内容，快去和岁月知己聊聊吧！
      </Text>
    );
  }

  return content.split('\n\n').map((paragraph, index) => {
    if (!paragraph.trim()) return null;
    
    // Check if it's a quote
    if (paragraph.trim().startsWith('"') && paragraph.trim().endsWith('"')) {
      return (
        <View key={index} style={styles.quoteBlock}>
          <Text style={styles.quoteText}>{paragraph.trim()}</Text>
        </View>
      );
    }

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

export function FullMemoirContent({ memoir }: FullMemoirContentProps) {
  return (
    <View style={styles.container}>
      {/* Content */}
      <ScrollView 
        style={styles.content}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.contentContainer}
      >
        {/* Book Title */}
        <View style={styles.bookHeader}>
          <Text style={styles.bookTitle}>{memoir.title}</Text>
          <Text style={styles.bookSubtitle}>{memoir.subtitle}</Text>
        </View>

        {/* All Chapters */}
        {memoir.chapters.map((chapter, index) => (
          <View key={chapter.id} style={styles.chapterSection}>
            {/* Chapter Header */}
            <View style={styles.chapterHeader}>
              <Text style={styles.chapterNumber}>
                第{chineseNumbers[chapter.number - 1] || chapter.number}章
              </Text>
              <Text style={styles.chapterTitle}>{chapter.title}</Text>
            </View>

            {/* Chapter Content */}
            <View style={styles.chapterContent}>
              {renderChapterContent(chapter.content)}
            </View>

            {/* Chapter Divider (except for last chapter) */}
            {index < memoir.chapters.length - 1 && (
              <View style={styles.chapterDivider}>
                <View style={styles.dividerLine} />
                <Ionicons name="leaf-outline" size={16} color={AppColors.lavender} />
                <View style={styles.dividerLine} />
              </View>
            )}
          </View>
        ))}

        {/* End Mark */}
        <View style={styles.endMark}>
          <Text style={styles.endMarkText}>— 全文完 —</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  content: {
    flex: 1,
  },
  contentContainer: {
    paddingBottom: 100,
  },
  bookHeader: {
    alignItems: 'center',
    marginBottom: 40,
    paddingBottom: 32,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(32, 0, 40, 0.08)',
  },
  bookTitle: {
    fontSize: 28,
    fontWeight: '600',
    color: AppColors.deepPurple,
    marginBottom: 8,
    textAlign: 'center',
  },
  bookSubtitle: {
    fontSize: 14,
    color: AppColors.slatePurple,
    textAlign: 'center',
  },
  chapterSection: {
    marginBottom: 16,
  },
  chapterHeader: {
    marginBottom: 20,
  },
  chapterNumber: {
    fontSize: 13,
    color: AppColors.mediumPurple,
    fontWeight: '500',
    marginBottom: 4,
  },
  chapterTitle: {
    fontSize: 22,
    fontWeight: '600',
    color: AppColors.deepPurple,
  },
  chapterContent: {
    marginBottom: 24,
  },
  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,
    fontStyle: 'italic',
  },
  chapterDivider: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 32,
    gap: 12,
  },
  dividerLine: {
    flex: 1,
    height: 1,
    backgroundColor: 'rgba(32, 0, 40, 0.08)',
    maxWidth: 80,
  },
  endMark: {
    alignItems: 'center',
    marginTop: 40,
    paddingTop: 32,
    borderTopWidth: 1,
    borderTopColor: 'rgba(32, 0, 40, 0.08)',
  },
  endMarkText: {
    fontSize: 14,
    color: AppColors.slatePurple,
    letterSpacing: 2,
  },
});