debug-log.tsx

import * as React from 'react';
import {
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
  type ViewStyle,
} from 'react-native';

import { useShowLogs } from '@/components/settings-store';

type Level = 'log' | 'warn' | 'error' | 'fatal';

type Entry = {
  id: number;
  ts: number;
  level: Level;
  text: string;
};

const MAX_ENTRIES = 300;

const buffer: Entry[] = [];
const listeners = new Set<() => void>();
let nextId = 0;
let installed = false;

function notify() {
  listeners.forEach((l) => l());
}

function safeStringify(value: unknown): string {
  if (value instanceof Error) {
    return value.stack ?? `${value.name}: ${value.message}`;
  }
  if (typeof value === 'string') return value;
  try {
    return JSON.stringify(value);
  } catch {
    return String(value);
  }
}

function format(args: unknown[]): string {
  return args.map(safeStringify).join(' ');
}

export function pushLog(level: Level, text: string): void {
  buffer.push({ id: nextId++, ts: Date.now(), level, text });
  if (buffer.length > MAX_ENTRIES) buffer.shift();
  notify();
}

export function clearLogs(): void {
  buffer.length = 0;
  notify();
}

export function installDebugLogger(): void {
  if (installed) return;
  installed = true;

  const originalLog = console.log.bind(console);
  const originalWarn = console.warn.bind(console);
  const originalError = console.error.bind(console);

  console.log = (...args: unknown[]) => {
    pushLog('log', format(args));
    originalLog(...args);
  };
  console.warn = (...args: unknown[]) => {
    pushLog('warn', format(args));
    originalWarn(...args);
  };
  console.error = (...args: unknown[]) => {
    pushLog('error', format(args));
    originalError(...args);
  };

  const eu = (globalThis as { ErrorUtils?: {
    getGlobalHandler?: () => (error: unknown, isFatal?: boolean) => void;
    setGlobalHandler?: (h: (error: unknown, isFatal?: boolean) => void) => void;
  } }).ErrorUtils;
  const prev = eu?.getGlobalHandler?.();
  eu?.setGlobalHandler?.((error, isFatal) => {
    pushLog(isFatal ? 'fatal' : 'error', `[global] ${safeStringify(error)}`);
    prev?.(error, isFatal);
  });

  pushLog('log', '[debug-log] installed');
}

function useEntries(): Entry[] {
  return React.useSyncExternalStore(
    React.useCallback((onChange) => {
      listeners.add(onChange);
      return () => listeners.delete(onChange);
    }, []),
    () => buffer,
    () => buffer
  );
}

interface DebugLogOverlayProps {
  style?: ViewStyle;
}

export function DebugLogOverlay({ style }: DebugLogOverlayProps): React.JSX.Element | null {
  const entries = useEntries();
  const showLogs = useShowLogs();
  const [expanded, setExpanded] = React.useState(true);
  const scrollRef = React.useRef<ScrollView>(null);

  React.useEffect(() => {
    if (expanded && showLogs) {
      requestAnimationFrame(() => scrollRef.current?.scrollToEnd({ animated: false }));
    }
  }, [entries, expanded, showLogs]);

  if (!showLogs) return null;

  return (
    <View pointerEvents="box-none" style={[styles.overlay, style]}>
      <View style={styles.headerRow}>
        <Pressable onPress={() => setExpanded((v) => !v)} style={styles.headerBtn}>
          <Text style={styles.headerBtnText}>
            {expanded ? 'Hide logs' : `Show logs (${entries.length})`}
          </Text>
        </Pressable>
        {expanded ? (
          <Pressable onPress={clearLogs} style={styles.headerBtn}>
            <Text style={styles.headerBtnText}>Clear</Text>
          </Pressable>
        ) : null}
      </View>
      {expanded ? (
        <View style={styles.panel}>
          <ScrollView
            ref={scrollRef}
            style={styles.scroll}
            contentContainerStyle={styles.scrollContent}
          >
            {entries.length === 0 ? (
              <Text style={styles.emptyText}>No logs yet.</Text>
            ) : (
              entries.map((e) => (
                <Text key={e.id} style={[styles.line, levelStyle(e.level)]}>
                  {`[${e.level}] ${e.text}`}
                </Text>
              ))
            )}
          </ScrollView>
        </View>
      ) : null}
    </View>
  );
}

interface ErrorBoundaryProps {
  label: string;
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

interface ErrorBoundaryState {
  error: Error | null;
}

export class DebugErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  state: ErrorBoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { error };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo): void {
    pushLog('fatal', `[boundary:${this.props.label}] ${error.message}\n${info.componentStack ?? ''}`);
  }

  render(): React.ReactNode {
    if (this.state.error) {
      return (
        this.props.fallback ?? (
          <View style={styles.boundaryFallback}>
            <Text style={styles.boundaryTitle}>Render error in {this.props.label}</Text>
            <Text style={styles.boundaryMsg}>{this.state.error.message}</Text>
          </View>
        )
      );
    }
    return this.props.children;
  }
}

function levelStyle(level: Level) {
  switch (level) {
    case 'warn':
      return styles.warn;
    case 'error':
      return styles.error;
    case 'fatal':
      return styles.fatal;
    default:
      return styles.log;
  }
}

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    left: 8,
    right: 8,
    bottom: 8,
    gap: 6,
  },
  headerRow: {
    flexDirection: 'row',
    gap: 8,
    alignSelf: 'flex-end',
  },
  headerBtn: {
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 8,
    backgroundColor: 'rgba(0,0,0,0.65)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)',
  },
  headerBtnText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: '600',
  },
  panel: {
    height: 220,
    backgroundColor: 'rgba(0,0,0,0.78)',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.18)',
    padding: 8,
  },
  scroll: {
    flex: 1,
  },
  scrollContent: {
    gap: 2,
  },
  emptyText: {
    color: 'rgba(255,255,255,0.45)',
    fontSize: 12,
    fontStyle: 'italic',
  },
  line: {
    color: '#e6e6f0',
    fontSize: 11,
    fontFamily: 'Courier',
  },
  log: { color: '#cfd2e6' },
  warn: { color: '#ffcc66' },
  error: { color: '#ff8080' },
  fatal: { color: '#ff4d4d', fontWeight: '700' },
  boundaryFallback: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
    backgroundColor: '#1a0a0a',
    gap: 8,
  },
  boundaryTitle: {
    color: '#ff8080',
    fontSize: 16,
    fontWeight: '700',
  },
  boundaryMsg: {
    color: '#ffcccc',
    fontSize: 13,
    textAlign: 'center',
  },
});