import { useState, useCallback, useEffect, useRef, useMemo } from 'react'; export type LogLevel = 'info' | 'warn' | 'error'; export interface LogEntry { id: string; level: LogLevel; message: string; timestamp: Date; payload?: any; } const LOG_LEVELS: LogEntry['level'][] = ['info', 'warn', 'error']; export function useLogger() { const [logs, setLogs] = useState([]); const [isVisible, setIsVisible] = useState(false); const logsRef = useRef([]); const [isDevelopment, setIsDevelopment] = useState(false); useEffect(() => { setIsDevelopment( process.env.NODE_ENV === 'development' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' ); }, []); useEffect(() => { logsRef.current = logs; }, [logs]); const addLog = useCallback( (level: LogEntry['level'], message: string, payload?: any) => { const newLog: LogEntry = { id: Math.random().toString(36).substring(2, 9), level, message, timestamp: new Date(), payload }; setLogs((prevLogs) => [newLog, ...prevLogs]); return newLog.id; }, [] ); const clearLogs = useCallback(() => { setLogs([]); }, []); const toggleVisibility = useCallback(() => { setIsVisible((prev) => !prev); }, []); const createLogMethod = useCallback( (level: LogEntry['level']) => (message: string, payload?: any) => addLog(level, message, payload), [addLog] ); const logMethods = useMemo( () => LOG_LEVELS.reduce((methods, level) => { methods[level] = createLogMethod(level); return methods; }, {} as Record string>), [createLogMethod] ); const hasError = useMemo( () => logs.some((log) => log.level === 'error'), [logs] ); const hasWarning = useMemo( () => logs.some((log) => log.level === 'warn'), [logs] ); return { logs, isVisible, toggleVisibility, clearLogs, ...logMethods, isDevelopment, hasError, hasWarning }; }