import React, { useState } from 'react';
import {
  View,
  StyleSheet,
  ScrollView as RNScrollView,
  Alert,
  Share,
  TextInput,
  Pressable,
  Platform,
} from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import Text from '~/components/atoms/Text';
import Button from '~/components/atoms/Button';
import Icon from '~/components/atoms/Icon';
import * as Clipboard from 'expo-clipboard';
import SpeakerLabelModal from '~/components/molecules/SpeakerLabelModal';
import HighlightedText from '~/components/atoms/HighlightedText';
import { getLanguageDisplayName } from '~/utils/languageMapping';
import { useTranslation } from 'react-i18next';

interface TranscriptData {
  audio_path?: string;
  type?: string;
  speakers?: Record<string, string>;
  utterances?: Array<{ speakerId: string; text: string; offset: number; duration: number }>;
  transcription_parts?: Array<{
    text: string;
    speaker?: string;
    start_time?: number;
    end_time?: number;
    // For combined memos:
    memo_id?: string;
    title?: string;
    transcript?: string;
    created_at?: string;
    index?: number;
    original_source?: any;
  }>;
  languages?: string[];
  primary_language?: string;
  transcript?: string;
}

interface TranscriptDisplayProps {
  data: TranscriptData;
  defaultExpanded?: boolean;
  title?: string;
  speakerLabels?: Record<string, string>;
  onNameSpeakersPress?: () => void;
  onCopyPress?: () => void;
  onSharePress?: () => void;
  onUpdateSpeakerLabels?: (speakerMappings: Array<{ id: string; label: string }>) => void;
  onCopySuccess?: () => void;
  // Search highlighting props
  searchQuery?: string;
  isSearchMode?: boolean;
  currentResultIndex?: number;
  searchResults?: Array<{
    id: string;
    type: string;
    text: string;
    index: number;
    matchIndex: number;
  }>;
  // Edit mode props
  isEditing?: boolean;
  onTranscriptChange?: (newTranscript: string) => void;
  onUtteranceChange?: (index: number, newText: string) => void;
}

function TranscriptDisplay({
  data,
  defaultExpanded = true,
  title = 'Transkript',
  speakerLabels = {},
  onNameSpeakersPress,
  onCopyPress,
  onSharePress,
  onUpdateSpeakerLabels,
  onCopySuccess,
  searchQuery = '',
  isSearchMode = false,
  currentResultIndex,
  searchResults,
  isEditing = false,
  onTranscriptChange,
  onUtteranceChange,
}: TranscriptDisplayProps) {
  const { isDark, themeVariant } = useTheme();
  const { t } = useTranslation();
  const [isSpeakerModalVisible, setIsSpeakerModalVisible] = useState(false);
  const [editableSpeakerLabels, setEditableSpeakerLabels] = useState<Record<string, string>>({
    ...speakerLabels,
  });
  const [showStatistics, setShowStatistics] = useState(false);

  // Local state for editing
  const [localUtterances, setLocalUtterances] = useState<Array<any>>([]);
  const [localTranscript, setLocalTranscript] = useState<string>('');
  const [isLocalStateInitialized, setIsLocalStateInitialized] = useState(false);

  // Check if this is a combined memo
  const isCombinedMemo = data.type === 'combined';

  // Convert transcription_parts to utterances format if needed
  const getUtterancesFromData = () => {
    if (data.utterances && data.utterances.length > 0) {
      return data.utterances;
    }

    if (data.transcription_parts && data.transcription_parts.length > 0) {
      // Handle combined memos differently
      if (isCombinedMemo) {
        // For combined memos, flatten all utterances from all parts
        const allUtterances: any[] = [];
        
        data.transcription_parts.forEach((part, partIndex) => {
          // Add a separator utterance for each memo part
          allUtterances.push({
            speakerId: '__separator__',
            text: part.title || `Memo ${partIndex + 1}`,
            offset: 0,
            duration: 0,
            memoId: part.memo_id,
            createdAt: part.created_at,
            isSeparator: true,
          });
          
          // Add utterances from this part
          if (part.utterances && Array.isArray(part.utterances)) {
            part.utterances.forEach((utterance: any) => {
              allUtterances.push({
                speakerId: utterance.speakerId || 'unknown',
                text: utterance.text || '',
                offset: utterance.offset || 0,
                duration: utterance.duration || 0,
                partIndex: partIndex,
                speakers: part.speakers || {},
              });
            });
          } else if (part.transcript) {
            // If no utterances but has transcript text, create a single utterance
            allUtterances.push({
              speakerId: 'default',
              text: part.transcript,
              offset: 0,
              duration: 0,
              partIndex: partIndex,
            });
          }
        });
        
        return allUtterances;
      } else {
        // Handle normal transcription parts
        return data.transcription_parts.map((part, index) => ({
          speakerId: part.speaker || `speaker${index + 1}`,
          text: part.text,
          offset: part.start_time ? part.start_time * 1000 : 0, // Convert to ms
          duration: part.end_time && part.start_time ? (part.end_time - part.start_time) * 1000 : 0,
        }));
      }
    }

    return [];
  };

  // Initialize local state when entering edit mode ONLY - ignore data changes while editing
  React.useEffect(() => {
    if (isEditing && !isLocalStateInitialized) {
      const utterancesFromData = getUtterancesFromData();
      setLocalUtterances(utterancesFromData);
      setLocalTranscript(data.transcript || '');
      setIsLocalStateInitialized(true);
      console.debug('TranscriptDisplay: Local state initialized for editing', {
        utterances: utterancesFromData.length,
        transcript: data.transcript?.length || 0,
      });
    } else if (!isEditing && isLocalStateInitialized) {
      // Reset when leaving edit mode
      setLocalUtterances([]);
      setLocalTranscript('');
      setIsLocalStateInitialized(false);
      console.debug('TranscriptDisplay: Local state reset - leaving edit mode');
    }
  }, [isEditing]); // Removed 'data' dependency to prevent overwrites during editing

  // Use local state when editing, original data when not
  const utterances =
    isEditing && isLocalStateInitialized ? localUtterances : getUtterancesFromData();
  const transcriptText =
    isEditing && isLocalStateInitialized ? localTranscript : data.transcript || '';
  const hasUtterances = utterances.length > 0;

  // Funktion zum Formatieren des Transkripts
  const getFormattedTranscript = (): string => {
    let formattedText = '';

    if (hasUtterances && utterances) {
      if (isCombinedMemo) {
        // Spezielle Formatierung für kombinierte Memos
        let currentMemoSection = '';
        utterances.forEach((utterance, index) => {
          if (utterance.isSeparator) {
            // Add separator header
            if (currentMemoSection) {
              formattedText += '\n\n';
            }
            const createdAt = utterance.createdAt
              ? new Date(utterance.createdAt).toLocaleDateString('de-DE', {
                  day: '2-digit',
                  month: '2-digit',
                  year: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit',
                })
              : '';
            const header = createdAt
              ? `=== ${utterance.text} (${createdAt}) ===`
              : `=== ${utterance.text} ===`;
            formattedText += header + '\n\n';
            currentMemoSection = utterance.text;
          } else {
            // Add regular utterance
            const speakerName = utterance.speakers && utterance.speakers[utterance.speakerId]
              ? utterance.speakers[utterance.speakerId]
              : getSpeakerDisplayName(utterance.speakerId);
            formattedText += `${speakerName}: ${utterance.text}\n\n`;
          }
        });
        formattedText = formattedText.trim();
      } else {
        // Normale Formatierung mit Sprechernamen
        formattedText = utterances
          .map((utterance) => {
            const speakerName = getSpeakerDisplayName(utterance.speakerId);
            return `${speakerName}: ${utterance.text}`;
          })
          .join('\n\n');
      }
    } else if (data.transcript) {
      // Wenn keine Äußerungen vorhanden sind, verwende den einfachen Transkripttext
      formattedText = data.transcript;
    }

    return formattedText;
  };

  // Funktion zum Kopieren des Transkripts in die Zwischenablage
  const handleCopyPress = async () => {
    try {
      const textToCopy = getFormattedTranscript();

      if (textToCopy) {
        await Clipboard.setStringAsync(textToCopy);

        // Use onCopySuccess callback if provided, otherwise fallback to system alert
        if (onCopySuccess) {
          onCopySuccess();
        } else {
          Alert.alert('Erfolg', 'Transkript wurde in die Zwischenablage kopiert');
        }

        if (onCopyPress) {
          onCopyPress();
        }
      }
    } catch (error) {
      console.debug('Fehler beim Kopieren:', error);
      Alert.alert('Fehler', 'Das Transkript konnte nicht kopiert werden');
    }
  };

  // Funktion zum Teilen des Transkripts über den nativen Share-Dialog
  const handleSharePress = async () => {
    try {
      const textToShare = getFormattedTranscript();

      if (textToShare) {
        await Share.share({
          message: textToShare,
          title: title || 'Transkript',
        });

        if (onSharePress) {
          onSharePress();
        }
      }
    } catch (error) {
      console.debug('Fehler beim Teilen:', error);
      Alert.alert('Fehler', 'Das Transkript konnte nicht geteilt werden');
    }
  };

  // Funktion zum Öffnen des Modals für die Benennung von Sprechern
  const handleNameSpeakersPress = () => {
    if (onNameSpeakersPress) {
      onNameSpeakersPress();
    } else {
      setIsSpeakerModalVisible(true);
    }
  };

  // Funktion zum Schließen des Modals für die Benennung von Sprechern
  const handleCloseSpeakerModal = () => {
    setIsSpeakerModalVisible(false);
  };

  // Funktion zum Speichern der Sprechernamen
  const handleSubmitSpeakerLabels = (speakerMappings: Array<{ id: string; label: string }>) => {
    // Konvertiere das Array von Mappings in ein Record-Objekt
    const updatedLabels: Record<string, string> = {};
    speakerMappings.forEach((mapping) => {
      updatedLabels[mapping.id] = mapping.label;
    });

    // Aktualisiere den lokalen State
    setEditableSpeakerLabels(updatedLabels);

    // Rufe die übergebene Callback-Funktion auf, falls vorhanden
    if (onUpdateSpeakerLabels) {
      onUpdateSpeakerLabels(speakerMappings);
    }

    // Schließe das Modal
    setIsSpeakerModalVisible(false);
  };

  // Format timestamp (offset in ms to mm:ss format)
  const formatTimestamp = (offsetMs?: number): string => {
    if (offsetMs === undefined) return '';

    const totalSeconds = Math.floor(offsetMs / 1000);
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  };

  // Statistics calculation functions
  const calculateStatistics = () => {
    let totalWords = 0;
    const speakerWordCounts: Record<string, number> = {};
    let totalDurationMs = 0;

    if (hasUtterances && utterances) {
      utterances.forEach((utterance) => {
        const words = utterance.text
          .trim()
          .split(/\s+/)
          .filter((word) => word.length > 0);
        const wordCount = words.length;

        totalWords += wordCount;

        // Count words per speaker
        const speakerName = getSpeakerDisplayName(utterance.speakerId);
        speakerWordCounts[speakerName] = (speakerWordCounts[speakerName] || 0) + wordCount;

        // Calculate total duration (use duration if available, otherwise estimate)
        if (utterance.duration && utterance.duration > 0) {
          totalDurationMs += utterance.duration;
        }
      });
    } else if (transcriptText) {
      // For plain transcript without utterances
      const words = transcriptText
        .trim()
        .split(/\s+/)
        .filter((word) => word.length > 0);
      totalWords = words.length;
      speakerWordCounts['Total'] = totalWords;
    }

    // Calculate words per minute
    const totalDurationMinutes = totalDurationMs > 0 ? totalDurationMs / (1000 * 60) : 0;
    const wordsPerMinute =
      totalDurationMinutes > 0 ? Math.round(totalWords / totalDurationMinutes) : 0;

    return {
      totalWords,
      speakerWordCounts,
      wordsPerMinute: totalDurationMinutes > 0 ? wordsPerMinute : null,
      totalDurationMinutes: Math.round(totalDurationMinutes * 10) / 10, // Round to 1 decimal
    };
  };

  // Determine language for display - use primary_language if available, otherwise fallback to first language in array
  const languageCode =
    data.primary_language ||
    (data.languages && data.languages.length > 0 ? data.languages[0] : 'unknown');
  const language = getLanguageDisplayName(languageCode);

  // Theme colors
  const textColor = isDark ? '#FFFFFF' : '#000000';
  const secondaryTextColor = isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)';
  const backgroundColor = isDark ? 'rgba(30, 30, 30, 0.8)' : 'rgba(245, 245, 245, 0.8)';
  const borderColor = isDark
    ? `var(--color-dark-${themeVariant}-border)`
    : `var(--color-${themeVariant}-border)`;
  const speakerColors = {
    speaker1: isDark ? '#64B5F6' : '#2196F3', // Blue
    speaker2: isDark ? '#81C784' : '#4CAF50', // Green
    speaker3: isDark ? '#FFB74D' : '#FF9800', // Orange
    speaker4: isDark ? '#E57373' : '#F44336', // Red
    default: isDark ? '#B39DDB' : '#673AB7', // Purple
  };

  const styles = StyleSheet.create({
    container: {
      borderRadius: 8,
      overflow: 'hidden',
      marginVertical: 8,
      width: '100%',
      maxWidth: 720,
      alignSelf: 'center',
    },
    header: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 12,
      paddingHorizontal: 20, // Horizontales Padding für interne Ausrichtung
      borderBottomWidth: 1,
      borderBottomColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
      gap: 12, // Add gap between title and language container
    },
    languageContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      flexShrink: 0, // Prevent language container from shrinking
    },
    title: {
      fontSize: 16,
      fontWeight: 'bold',
      color: textColor,
      flex: 1, // Allow title to take available space but not push language container out
      marginRight: 12, // Add some space between title and language container
    },
    languageTag: {
      fontSize: 12,
      color: secondaryTextColor,
      backgroundColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
      paddingHorizontal: 8,
      paddingVertical: 4,
      borderRadius: 4,
      marginRight: 8,
    },
    infoIcon: {
      padding: 4,
    },
    statisticsSection: {
      backgroundColor: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.02)',
      borderBottomWidth: 1,
      borderBottomColor: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
      padding: 12,
      paddingHorizontal: 20, // Horizontales Padding für interne Ausrichtung
    },
    statisticsRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: 6,
    },
    statisticsLabel: {
      fontSize: 13,
      color: secondaryTextColor,
    },
    statisticsValue: {
      fontSize: 13,
      fontWeight: '600',
      color: textColor,
    },
    speakerStatsContainer: {
      marginTop: 8,
      paddingTop: 8,
      borderTopWidth: 1,
      borderTopColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
    },
    speakerStatsTitle: {
      fontSize: 12,
      fontWeight: '600',
      color: secondaryTextColor,
      marginBottom: 6,
    },
    actionButtonsContainer: {
      paddingVertical: 8,
      borderBottomWidth: 1,
      borderBottomColor: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
      // Kein marginHorizontal - volle Breite für Buttons
    },
    buttonScrollContainer: {
      flexDirection: 'row',
      paddingHorizontal: 20, // Padding für korrekte Ausrichtung mit anderem Content
    },
    buttonContainer: {
      marginRight: 8,
    },
    content: {
      padding: 12,
      paddingHorizontal: 20, // Horizontales Padding für interne Ausrichtung
      width: '100%',
    },
    plainTranscript: {
      fontSize: 16,
      lineHeight: 24,
      color: textColor,
    },
    speakerItem: {
      marginBottom: 16,
      width: '100%',
    },
    speakerHeader: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: 4,
    },
    speakerName: {
      fontSize: 14,
      fontWeight: 'bold',
      marginRight: 8,
    },
    timestamp: {
      fontSize: 12,
      color: secondaryTextColor,
    },
    speakerText: {
      fontSize: 16,
      lineHeight: 24,
      color: textColor,
    },
    speakerTextInput: {
      fontSize: 16,
      lineHeight: 24,
      color: textColor,
      borderBottomWidth: 1,
      borderBottomColor: isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
      paddingBottom: 4,
      minHeight: 24,
      textAlignVertical: 'top',
    },
    plainTranscriptInput: {
      fontSize: 16,
      lineHeight: 24,
      color: textColor,
      borderBottomWidth: 1,
      borderBottomColor: isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
      paddingBottom: 4,
      minHeight: 24,
      textAlignVertical: 'top',
    },
    memoSeparator: {
      marginVertical: 24,
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 0,
    },
    memoSeparatorLine: {
      flex: 1,
      height: 1,
      backgroundColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
    },
    memoSeparatorContent: {
      paddingHorizontal: 16,
      alignItems: 'center',
    },
    memoSeparatorTitle: {
      fontSize: 14,
      fontWeight: '600',
      color: isDark ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)',
      marginBottom: 4,
    },
    memoSeparatorDate: {
      fontSize: 12,
      color: isDark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
    },
  });

  // Helper function to get speaker name display
  const getSpeakerDisplayName = (speakerId: string): string => {
    // 1. Priorität: Benutzerdefinierte Labels aus den Metadaten
    if (speakerLabels && speakerLabels[speakerId]) {
      return speakerLabels[speakerId];
    }

    // 2. Priorität: Namen aus dem speakers-Objekt - aber überprüfe ob es ein Standard-Speaker-Name ist
    if (data.speakers && data.speakers[speakerId]) {
      const speakerName = data.speakers[speakerId];
      
      // Ensure speakerName is a string before processing
      if (typeof speakerName === 'string' && speakerName) {
        // Check if it's a default "Speaker X" format that needs translation
        const defaultSpeakerMatch = speakerName.match(/^Speaker\s+(\d+)$/i);
        if (defaultSpeakerMatch) {
          const number = defaultSpeakerMatch[1];
          return t('memo.speaker_default', { number });
        }
        
        // Otherwise return the custom name
        return speakerName;
      }
    }

    // 3. Priorität: Übersetze Speaker-ID
    const match = speakerId.match(/([a-zA-Z]+)(\d+)/i);
    if (match) {
      const prefix = match[1].toLowerCase();
      const number = match[2];
      
      if (prefix === 'speaker') {
        return t('memo.speaker_default', { number });
      }
    }
    
    // Check if speakerId itself is already formatted like "Speaker 1"
    const formattedMatch = speakerId.match(/^Speaker\s+(\d+)$/i);
    if (formattedMatch) {
      const number = formattedMatch[1];
      return t('memo.speaker_default', { number });
    }
    
    // Fallback: Formatierte Speaker-ID
    return speakerId.replace(
      /([a-zA-Z]+)(\d+)/i,
      (_, text, num) => `${text.charAt(0).toUpperCase()}${text.slice(1)} ${num}`
    );
  };

  // Helper function to get speaker text color
  const getSpeakerColor = (speakerId: string): string => {
    return speakerColors[speakerId as keyof typeof speakerColors] || speakerColors.default;
  };

  // Extrahiere die Sprecher-IDs aus den Äußerungen oder Sprechern
  const getSpeakerIds = (): string[] => {
    if (utterances.length > 0) {
      // Extrahiere eindeutige Sprecher-IDs aus den Äußerungen
      const speakerIds = new Set<string>();
      utterances.forEach((utterance) => {
        speakerIds.add(utterance.speakerId);
      });
      return Array.from(speakerIds);
    } else if (data.speakers) {
      // Verwende die Schlüssel aus dem speakers-Objekt
      return Object.keys(data.speakers);
    }
    return [];
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title} numberOfLines={1} ellipsizeMode="tail">{title}</Text>
        {language !== 'unknown' && (
          <View style={styles.languageContainer}>
            <View style={styles.languageTag}>
              <Text style={{ color: secondaryTextColor }}>{language}</Text>
            </View>
            <Pressable style={styles.infoIcon} onPress={() => setShowStatistics(!showStatistics)}>
              <Icon 
                name={showStatistics ? "information-circle" : "information-circle-outline"} 
                size={24} 
                color={showStatistics ? `var(--color-${isDark ? 'dark-' : ''}${themeVariant}-primary)` : secondaryTextColor} 
              />
            </Pressable>
          </View>
        )}
      </View>

      {/* Statistics Section */}
      {showStatistics && language !== 'unknown' && (
        <View style={styles.statisticsSection}>
          {(() => {
            const stats = calculateStatistics();
            return (
              <>
                <View style={styles.statisticsRow}>
                  <Text style={styles.statisticsLabel}>
                    {t('transcript.total_words', 'Total Words')}
                  </Text>
                  <Text style={styles.statisticsValue}>{stats.totalWords}</Text>
                </View>

                {stats.wordsPerMinute !== null && (
                  <View style={styles.statisticsRow}>
                    <Text style={styles.statisticsLabel}>
                      {t('transcript.words_per_minute', 'Words per Minute')}
                    </Text>
                    <Text style={styles.statisticsValue}>{stats.wordsPerMinute}</Text>
                  </View>
                )}

                {stats.totalDurationMinutes > 0 && (
                  <View style={styles.statisticsRow}>
                    <Text style={styles.statisticsLabel}>
                      {t('transcript.duration', 'Duration')}
                    </Text>
                    <Text style={styles.statisticsValue}>
                      {stats.totalDurationMinutes} {t('transcript.minutes_short', 'min')}
                    </Text>
                  </View>
                )}

                {Object.keys(stats.speakerWordCounts).length > 1 && (
                  <View style={styles.speakerStatsContainer}>
                    <Text style={styles.speakerStatsTitle}>
                      {t('transcript.words_per_speaker', 'Words per Speaker')}
                    </Text>
                    {Object.entries(stats.speakerWordCounts).map(([speaker, count]) => (
                      <View key={speaker} style={styles.statisticsRow}>
                        <Text style={styles.statisticsLabel}>{speaker}</Text>
                        <Text style={styles.statisticsValue}>{count}</Text>
                      </View>
                    ))}
                  </View>
                )}
              </>
            );
          })()}
        </View>
      )}

      {!isEditing && (
        <View style={styles.actionButtonsContainer}>
          <RNScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.buttonScrollContainer}>
            <View style={styles.buttonContainer}>
              <Button
                variant="secondary"
                title={t('memo.name_speakers')}
                onPress={handleNameSpeakersPress}
                leftIcon={() => (
                  <View style={{ marginRight: 8 }}>
                    <Icon name="person-outline" size={18} color={textColor} />
                  </View>
                )}
              />
            </View>
            <View style={styles.buttonContainer}>
              <Button
                variant="secondary"
                title={t('memo.copy')}
                onPress={handleCopyPress}
                leftIcon={() => (
                  <View style={{ marginRight: 8 }}>
                    <Icon name="copy-outline" size={18} color={textColor} />
                  </View>
                )}
              />
            </View>
            <View style={styles.buttonContainer}>
              <Button
                variant="secondary"
                title={t('common.share')}
                onPress={handleSharePress}
                leftIcon={() => (
                  <View style={{ marginRight: 8 }}>
                    <Icon
                      name={Platform.OS === 'android' ? 'share-social-outline' : 'share-outline'}
                      size={18}
                      color={textColor}
                    />
                  </View>
                )}
              />
            </View>
          </RNScrollView>
        </View>
      )}

      <View style={styles.content}>
        {hasUtterances ? (
          // Zeige Äußerungen chronologisch an
          utterances.map((utterance, index) => {
            // Special handling for separator utterances in combined memos
            if (utterance.isSeparator) {
              return (
                <View key={`separator-${index}`} style={styles.memoSeparator}>
                  <View style={styles.memoSeparatorLine} />
                  <View style={styles.memoSeparatorContent}>
                    <Text style={styles.memoSeparatorTitle}>{utterance.text}</Text>
                    {utterance.createdAt && (
                      <Text style={styles.memoSeparatorDate}>
                        {new Date(utterance.createdAt).toLocaleDateString('de-DE', {
                          day: '2-digit',
                          month: '2-digit',
                          year: 'numeric',
                          hour: '2-digit',
                          minute: '2-digit',
                        })}
                      </Text>
                    )}
                  </View>
                  <View style={styles.memoSeparatorLine} />
                </View>
              );
            }
            
            // Regular utterance handling
            const speakerName = utterance.speakers && utterance.speakers[utterance.speakerId]
              ? utterance.speakers[utterance.speakerId]
              : getSpeakerDisplayName(utterance.speakerId);
            
            return (
              <View key={`utterance-${index}`} style={styles.speakerItem}>
                <View style={styles.speakerHeader}>
                  <Text style={[styles.speakerName, { color: getSpeakerColor(utterance.speakerId) }]}>
                    {speakerName}
                  </Text>
                  <Text style={styles.timestamp}>{formatTimestamp(utterance.offset)}</Text>
                </View>
                {isEditing ? (
                  <TextInput
                    style={styles.speakerTextInput}
                    value={utterance.text}
                    onChangeText={(newText) => {
                      console.debug('TranscriptDisplay: onChangeText called', {
                        index,
                        newText,
                        hasCallback: !!onUtteranceChange,
                      });

                      // Update local state immediately for instant feedback
                      setLocalUtterances((prev) =>
                        prev.map((utt, i) => (i === index ? { ...utt, text: newText } : utt))
                      );

                      // Call the parent callback
                      onUtteranceChange?.(index, newText);
                    }}
                    placeholder="Äußerung eingeben"
                    placeholderTextColor={isDark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'}
                    multiline
                    scrollEnabled={false}
                    textAlignVertical="top"
                    editable={true}
                  />
                ) : isSearchMode && searchQuery ? (
                  <HighlightedText
                    text={utterance.text}
                    searchQuery={searchQuery}
                    style={styles.speakerText}
                    currentResultIndex={currentResultIndex}
                    searchResults={searchResults}
                    textType="transcript"
                  />
                ) : (
                  <Text style={styles.speakerText}>{utterance.text}</Text>
                )}
              </View>
            );
          })
        ) : // Kein strukturiertes Transkript: Zeige einfachen Text
        isEditing ? (
          <TextInput
            style={styles.plainTranscriptInput}
            value={transcriptText}
            onChangeText={(newText) => {
              console.debug('TranscriptDisplay: plain transcript onChangeText called', {
                newText,
                hasCallback: !!onTranscriptChange,
              });

              // Update local state immediately for instant feedback
              setLocalTranscript(newText);

              // Call the parent callback
              onTranscriptChange?.(newText);
            }}
            placeholder="Transkript eingeben"
            placeholderTextColor={isDark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'}
            multiline
            scrollEnabled={false}
            textAlignVertical="top"
            editable={true}
          />
        ) : isSearchMode && searchQuery ? (
          <HighlightedText
            text={transcriptText}
            searchQuery={searchQuery}
            style={styles.plainTranscript}
            currentResultIndex={currentResultIndex}
            searchResults={searchResults}
            textType="transcript"
          />
        ) : (
          <Text style={styles.plainTranscript}>{transcriptText}</Text>
        )}
      </View>

      {/* SpeakerLabelModal */}
      <SpeakerLabelModal
        visible={isSpeakerModalVisible}
        onClose={handleCloseSpeakerModal}
        onSubmit={handleSubmitSpeakerLabels}
        speakers={getSpeakerIds()}
        initialMappings={speakerLabels}
      />
    </View>
  );
}

export default TranscriptDisplay;