KArtSell.Aegis/frontend/src/shared/utils/componentLogger.ts

/**
 * Component Logger — Real-time component health monitoring
 * Logs component rendering, prop changes, errors
 */

export interface ComponentLogEntry {
  timestamp: string
  component: string
  action: string
  details?: Record<string, any>
  status: 'success' | 'error' | 'warning'
}

class ComponentLogger {
  private logs: ComponentLogEntry[] = []
  private maxLogs = 500

  log(component: string, action: string, details?: Record<string, any>, status: 'success' | 'error' | 'warning' = 'success') {
    const entry: ComponentLogEntry = {
      timestamp: new Date().toISOString(),
      component,
      action,
      details,
      status,
    }

    this.logs.push(entry)

    // Keep log size manageable
    if (this.logs.length > this.maxLogs) {
      this.logs.shift()
    }

    // Log to console in dev mode
    if (import.meta.env.DEV) {
      const statusEmoji = status === 'success' ? '✅' : status === 'error' ? '❌' : '⚠️'
      console.log(
        `${statusEmoji} [${component}] ${action}`,
        details ? details : ''
      )
    }

    return entry
  }

  error(component: string, action: string, error: Error | string, details?: Record<string, any>) {
    return this.log(component, action, {
      ...details,
      error: error instanceof Error ? error.message : error,
    }, 'error')
  }

  warning(component: string, action: string, details?: Record<string, any>) {
    return this.log(component, action, details, 'warning')
  }

  getLogs() {
    return [...this.logs]
  }

  getLogsByComponent(componentName: string) {
    return this.logs.filter(log => log.component === componentName)
  }

  clearLogs() {
    this.logs = []
  }

  exportLogs() {
    return JSON.stringify(this.logs, null, 2)
  }

  getStats() {
    return {
      totalLogs: this.logs.length,
      byComponent: this.logs.reduce((acc, log) => {
        acc[log.component] = (acc[log.component] || 0) + 1
        return acc
      }, {} as Record<string, number>),
      byStatus: {
        success: this.logs.filter(l => l.status === 'success').length,
        error: this.logs.filter(l => l.status === 'error').length,
        warning: this.logs.filter(l => l.status === 'warning').length,
      },
    }
  }
}

export const componentLogger = new ComponentLogger()

// Expose globally for debugging
if (import.meta.env.DEV && typeof window !== 'undefined') {
  (window as any).__componentLogger = componentLogger
}