/**
 * Voice Debug Screen
 *
 * Real-time debugging interface for voice recognition pipeline.
 * Shows all events, timers, API calls, and state changes.
 */

import React, { useState, useEffect, useRef, useCallback } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Feather } from '@expo/vector-icons';

import { useVoice } from '@/contexts/VoiceContext';
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition';
import { AppColors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';

interface LogEntry {
  id: string;
  timestamp: number;
  category: 'stt' | 'api' | 'tts' | 'timer' | 'system';
  message: string;
  level: 'info' | 'warning' | 'error' | 'success';
  data?: any;
}

export default function VoiceDebugScreen() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';
  const insets = useSafeAreaInsets();

  const {
    isListening,
    isSpeaking,
    status,
    startSession,
    stopSession,
    voiceApiType,
  } = useVoice();

  const {
    isListening: sttIsListening,
    partialTranscript,
    recognizedText,
  } = useSpeechRecognition({
    lang: 'en-US',
    continuous: true,
    interimResults: true,
  });

  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [silenceTimer, setSilenceTimer] = useState(0);
  const scrollViewRef = useRef<ScrollView>(null);
  const logIdCounter = useRef(0);
  const lastPartialRef = useRef('');

  // Add log entry
  const addLog = useCallback((
    category: LogEntry['category'],
    message: string,
    level: LogEntry['level'] = 'info',
    data?: any
  ) => {
    const entry: LogEntry = {
      id: `log-${logIdCounter.current++}`,
      timestamp: Date.now(),
      category,
      message,
      level,
      data,
    };

    console.log(`[VoiceDebug:${category}]`, message, data || '');

    setLogs(prev => {
      const updated = [...prev, entry];
      // Keep only last 100 logs
      return updated.slice(-100);
    });

    setTimeout(() => {
      scrollViewRef.current?.scrollToEnd({ animated: true });
    }, 50);
  }, []);

  // Clear logs
  const clearLogs = useCallback(() => {
    setLogs([]);
    logIdCounter.current = 0;
    addLog('system', 'Logs cleared', 'info');
  }, [addLog]);

  // Monitor voice session state
  useEffect(() => {
    if (isListening) {
      addLog('system', '🎤 Voice session STARTED', 'success');
    } else {
      addLog('system', '⏹️ Voice session STOPPED', 'info');
      setSilenceTimer(0);
    }
  }, [isListening, addLog]);

  // Monitor STT state
  useEffect(() => {
    if (sttIsListening) {
      addLog('stt', '▶️ STT listening started', 'success');
    } else if (isListening) {
      addLog('stt', '⏸️ STT stopped (but session active)', 'warning');
    }
  }, [sttIsListening, isListening, addLog]);

  // Monitor status changes
  useEffect(() => {
    if (status === 'processing') {
      addLog('api', '⚙️ Processing transcript → sending to API', 'info');
    } else if (status === 'speaking') {
      addLog('tts', '🔊 TTS playing (Julia speaking)', 'info');
    } else if (status === 'listening') {
      addLog('system', '👂 Ready to listen', 'info');
    }
  }, [status, addLog]);

  // Monitor partial transcripts
  useEffect(() => {
    if (partialTranscript && partialTranscript !== lastPartialRef.current) {
      lastPartialRef.current = partialTranscript;
      addLog('stt', `📝 Partial: "${partialTranscript.slice(0, 40)}${partialTranscript.length > 40 ? '...' : ''}"`, 'info');

      // Reset silence timer
      setSilenceTimer(0);
      addLog('timer', '🔄 Silence timer RESET', 'warning');
    }
  }, [partialTranscript, addLog]);

  // Monitor final transcripts
  useEffect(() => {
    if (recognizedText && recognizedText !== lastPartialRef.current) {
      addLog('stt', `✅ FINAL: "${recognizedText.slice(0, 40)}${recognizedText.length > 40 ? '...' : ''}"`, 'success', {
        length: recognizedText.length,
        transcript: recognizedText
      });
      addLog('api', '📤 Sending to API...', 'info');
    }
  }, [recognizedText, addLog]);

  // Silence timer (only when STT is listening and not processing/speaking)
  useEffect(() => {
    let interval: NodeJS.Timeout | null = null;

    if (sttIsListening && status !== 'processing' && status !== 'speaking') {
      interval = setInterval(() => {
        setSilenceTimer(prev => {
          const next = prev + 100;

          // Log milestones
          if (next === 1000) {
            addLog('timer', '⏱️ Silence: 1.0s', 'info');
          } else if (next === 1500) {
            addLog('timer', '⏱️ Silence: 1.5s', 'warning');
          } else if (next === 2000) {
            addLog('timer', '🛑 Silence: 2.0s → AUTO-STOP triggered', 'error');
          }

          return next;
        });
      }, 100);
    } else {
      setSilenceTimer(0);
    }

    return () => {
      if (interval) clearInterval(interval);
    };
  }, [sttIsListening, status, addLog]);

  // Get status indicator
  const getStatusDisplay = () => {
    if (status === 'speaking' || isSpeaking) {
      return { color: '#9333EA', icon: '🔊', text: 'Speaking' };
    }
    if (status === 'processing') {
      return { color: '#F59E0B', icon: '⚙️', text: 'Processing' };
    }
    if (isListening && sttIsListening) {
      return { color: '#10B981', icon: '🟢', text: 'Listening' };
    }
    if (isListening && !sttIsListening) {
      return { color: '#F59E0B', icon: '🟡', text: 'Session Active (STT Off)' };
    }
    return { color: '#6B7280', icon: '⚪', text: 'Idle' };
  };

  const statusDisplay = getStatusDisplay();
  const silenceProgress = Math.min(silenceTimer / 2000, 1);
  const silenceSeconds = (silenceTimer / 1000).toFixed(1);

  // Log level colors
  const getLogColor = (level: LogEntry['level']) => {
    switch (level) {
      case 'error': return '#EF4444';
      case 'warning': return '#F59E0B';
      case 'success': return '#10B981';
      default: return isDark ? '#D1D5DB' : '#374151';
    }
  };

  // Category icons
  const getCategoryIcon = (category: LogEntry['category']) => {
    switch (category) {
      case 'stt': return '🎤';
      case 'api': return '📡';
      case 'tts': return '🔊';
      case 'timer': return '⏱️';
      case 'system': return '⚙️';
      default: return '•';
    }
  };

  // Platform badge
  const platformBadge = Platform.OS === 'ios' ? '🍎 iOS' : '🤖 Android';
  const platformColor = Platform.OS === 'ios' ? '#007AFF' : '#3DDC84';

  return (
    <View style={[styles.container, { backgroundColor: isDark ? '#0A0A0A' : '#FFFFFF' }]}>
      {/* Header */}
      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
        <View style={styles.headerLeft}>
          <Text style={[styles.headerTitle, { color: isDark ? '#FFFFFF' : '#000000' }]}>
            Voice Debug
          </Text>
          <View style={[styles.platformBadge, { backgroundColor: platformColor }]}>
            <Text style={styles.platformBadgeText}>{platformBadge}</Text>
          </View>
        </View>
        <TouchableOpacity onPress={clearLogs} style={styles.clearButton}>
          <Feather name="trash-2" size={20} color={isDark ? '#9CA3AF' : '#6B7280'} />
        </TouchableOpacity>
      </View>

      {/* Status Card */}
      <View style={[styles.statusCard, {
        backgroundColor: isDark ? '#1F2937' : '#F3F4F6',
        borderColor: statusDisplay.color,
      }]}>
        <View style={styles.statusRow}>
          <Text style={styles.statusIcon}>{statusDisplay.icon}</Text>
          <View style={styles.statusTextContainer}>
            <Text style={[styles.statusLabel, { color: isDark ? '#9CA3AF' : '#6B7280' }]}>
              Status
            </Text>
            <Text style={[styles.statusText, { color: statusDisplay.color }]}>
              {statusDisplay.text}
            </Text>
          </View>
        </View>

        {/* Voice API Type */}
        <View style={styles.statusRow}>
          <Text style={styles.statusIcon}>📡</Text>
          <View style={styles.statusTextContainer}>
            <Text style={[styles.statusLabel, { color: isDark ? '#9CA3AF' : '#6B7280' }]}>
              API Function
            </Text>
            <Text style={[styles.statusText, { color: '#3B82F6' }]}>
              {voiceApiType}
            </Text>
          </View>
        </View>

        {/* Silence Timer */}
        {sttIsListening && status !== 'processing' && status !== 'speaking' && (
          <View style={styles.timerContainer}>
            <Text style={[styles.timerLabel, { color: isDark ? '#9CA3AF' : '#6B7280' }]}>
              Silence Timer ({Platform.OS === 'ios' ? 'iOS' : 'Android'} auto-stop at 2.0s)
            </Text>
            <View style={styles.timerRow}>
              <Text style={[styles.timerText, {
                color: silenceTimer >= 2000 ? '#EF4444' : silenceTimer >= 1500 ? '#F59E0B' : isDark ? '#D1D5DB' : '#374151'
              }]}>
                {silenceSeconds}s / 2.0s
              </Text>
            </View>
            <View style={[styles.progressBarContainer, { backgroundColor: isDark ? '#374151' : '#E5E7EB' }]}>
              <View style={[styles.progressBarFill, {
                width: `${silenceProgress * 100}%`,
                backgroundColor: silenceTimer >= 2000 ? '#EF4444' : silenceTimer >= 1500 ? '#F59E0B' : '#10B981'
              }]} />
            </View>
          </View>
        )}

        {/* Current Transcripts */}
        {partialTranscript && (
          <View style={styles.transcriptContainer}>
            <Text style={[styles.transcriptLabel, { color: isDark ? '#9CA3AF' : '#6B7280' }]}>
              Partial:
            </Text>
            <Text style={[styles.transcriptText, { color: isDark ? '#F59E0B' : '#D97706' }]}>
              "{partialTranscript}"
            </Text>
          </View>
        )}
        {recognizedText && (
          <View style={styles.transcriptContainer}>
            <Text style={[styles.transcriptLabel, { color: isDark ? '#9CA3AF' : '#6B7280' }]}>
              Final:
            </Text>
            <Text style={[styles.transcriptText, { color: isDark ? '#10B981' : '#059669' }]}>
              "{recognizedText}"
            </Text>
          </View>
        )}
      </View>

      {/* Logs */}
      <View style={styles.logsContainer}>
        <Text style={[styles.logsTitle, { color: isDark ? '#FFFFFF' : '#000000' }]}>
          Event Log
        </Text>
        <ScrollView
          ref={scrollViewRef}
          style={[styles.logsScrollView, { backgroundColor: isDark ? '#111827' : '#F9FAFB' }]}
          contentContainerStyle={styles.logsContent}
        >
          {logs.length === 0 ? (
            <Text style={[styles.emptyText, { color: isDark ? '#6B7280' : '#9CA3AF' }]}>
              No events yet. Press FAB to start.
            </Text>
          ) : (
            logs.map(log => {
              const time = new Date(log.timestamp);
              const timeStr = `${String(time.getHours()).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}:${String(time.getSeconds()).padStart(2, '0')}.${String(time.getMilliseconds()).padStart(3, '0')}`;

              return (
                <View key={log.id} style={styles.logEntry}>
                  <Text style={[styles.logTimestamp, { color: isDark ? '#6B7280' : '#9CA3AF' }]}>
                    {timeStr}
                  </Text>
                  <Text style={styles.logIcon}>{getCategoryIcon(log.category)}</Text>
                  <Text style={[styles.logMessage, { color: getLogColor(log.level) }]}>
                    {log.message}
                  </Text>
                </View>
              );
            })
          )}
        </ScrollView>
      </View>

      {/* FAB */}
      <TouchableOpacity
        style={[styles.fab, {
          backgroundColor: isListening ? '#EF4444' : AppColors.primary,
          bottom: insets.bottom + 80,
        }]}
        onPress={() => {
          if (isListening) {
            addLog('system', '🛑 User stopped session', 'warning');
            stopSession();
          } else {
            clearLogs();
            addLog('system', '▶️ User started session', 'success');
            startSession();
          }
        }}
      >
        <Feather
          name={isListening ? 'square' : 'mic'}
          size={28}
          color="#FFFFFF"
        />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingBottom: 16,
  },
  headerLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: '700',
  },
  platformBadge: {
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 12,
  },
  platformBadgeText: {
    color: '#FFFFFF',
    fontSize: 12,
    fontWeight: '700',
  },
  clearButton: {
    padding: 8,
  },
  statusCard: {
    marginHorizontal: 20,
    marginBottom: 16,
    padding: 16,
    borderRadius: 12,
    borderLeftWidth: 4,
  },
  statusRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  statusIcon: {
    fontSize: 32,
    marginRight: 12,
  },
  statusTextContainer: {
    flex: 1,
  },
  statusLabel: {
    fontSize: 12,
    fontWeight: '500',
    marginBottom: 2,
  },
  statusText: {
    fontSize: 18,
    fontWeight: '700',
  },
  timerContainer: {
    marginTop: 16,
    paddingTop: 16,
    borderTopWidth: 1,
    borderTopColor: 'rgba(156, 163, 175, 0.2)',
  },
  timerLabel: {
    fontSize: 12,
    fontWeight: '500',
    marginBottom: 8,
  },
  timerRow: {
    marginBottom: 8,
  },
  timerText: {
    fontSize: 24,
    fontWeight: '700',
    fontVariant: ['tabular-nums'],
  },
  progressBarContainer: {
    height: 8,
    borderRadius: 4,
    overflow: 'hidden',
  },
  progressBarFill: {
    height: '100%',
    borderRadius: 4,
  },
  transcriptContainer: {
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: 'rgba(156, 163, 175, 0.2)',
  },
  transcriptLabel: {
    fontSize: 12,
    fontWeight: '500',
    marginBottom: 4,
  },
  transcriptText: {
    fontSize: 14,
    fontStyle: 'italic',
  },
  logsContainer: {
    flex: 1,
    marginHorizontal: 20,
  },
  logsTitle: {
    fontSize: 16,
    fontWeight: '700',
    marginBottom: 8,
  },
  logsScrollView: {
    flex: 1,
    borderRadius: 8,
  },
  logsContent: {
    padding: 12,
  },
  emptyText: {
    textAlign: 'center',
    fontSize: 14,
    fontStyle: 'italic',
    paddingVertical: 20,
  },
  logEntry: {
    flexDirection: 'row',
    marginBottom: 8,
    alignItems: 'flex-start',
  },
  logTimestamp: {
    fontSize: 11,
    fontVariant: ['tabular-nums'],
    marginRight: 8,
    width: 80,
  },
  logIcon: {
    fontSize: 14,
    marginRight: 6,
  },
  logMessage: {
    fontSize: 13,
    flex: 1,
    lineHeight: 18,
  },
  fab: {
    position: 'absolute',
    right: 20,
    width: 64,
    height: 64,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
  },
});