esengine/packages/editor-app/src/components/ProfilerPanel.tsx

import { useState, useEffect, useRef } from 'react';
import { Core } from '@esengine/ecs-framework';
import { Activity, BarChart3, Clock, Cpu, RefreshCw, Pause, Play } from 'lucide-react';
import '../styles/ProfilerPanel.css';

interface SystemPerformanceData {
  name: string;
  executionTime: number;
  entityCount: number;
  averageTime: number;
  minTime: number;
  maxTime: number;
  percentage: number;
}

export function ProfilerPanel() {
  const [systems, setSystems] = useState<SystemPerformanceData[]>([]);
  const [totalFrameTime, setTotalFrameTime] = useState(0);
  const [isPaused, setIsPaused] = useState(false);
  const [sortBy, setSortBy] = useState<'time' | 'average' | 'name'>('time');
  const animationRef = useRef<number>();

  useEffect(() => {
    const updateProfilerData = () => {
      if (isPaused) {
        animationRef.current = requestAnimationFrame(updateProfilerData);
        return;
      }

      const coreInstance = Core.Instance;
      if (!coreInstance || !coreInstance._performanceMonitor?.isEnabled) {
        animationRef.current = requestAnimationFrame(updateProfilerData);
        return;
      }

      const performanceMonitor = coreInstance._performanceMonitor;
      const systemDataMap = performanceMonitor.getAllSystemData();
      const systemStatsMap = performanceMonitor.getAllSystemStats();

      const systemsData: SystemPerformanceData[] = [];
      let total = 0;

      for (const [name, data] of systemDataMap.entries()) {
        const stats = systemStatsMap.get(name);
        if (stats) {
          systemsData.push({
            name,
            executionTime: data.executionTime,
            entityCount: data.entityCount,
            averageTime: stats.averageTime,
            minTime: stats.minTime,
            maxTime: stats.maxTime,
            percentage: 0
          });
          total += data.executionTime;
        }
      }

      // Calculate percentages
      systemsData.forEach(system => {
        system.percentage = total > 0 ? (system.executionTime / total) * 100 : 0;
      });

      // Sort systems
      systemsData.sort((a, b) => {
        switch (sortBy) {
          case 'time':
            return b.executionTime - a.executionTime;
          case 'average':
            return b.averageTime - a.averageTime;
          case 'name':
            return a.name.localeCompare(b.name);
          default:
            return 0;
        }
      });

      setSystems(systemsData);
      setTotalFrameTime(total);

      animationRef.current = requestAnimationFrame(updateProfilerData);
    };

    animationRef.current = requestAnimationFrame(updateProfilerData);

    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, [isPaused, sortBy]);

  const handleReset = () => {
    const coreInstance = Core.Instance;
    if (coreInstance && coreInstance._performanceMonitor) {
      coreInstance._performanceMonitor.reset();
    }
  };

  const fps = totalFrameTime > 0 ? Math.round(1000 / totalFrameTime) : 0;
  const targetFrameTime = 16.67; // 60 FPS
  const isOverBudget = totalFrameTime > targetFrameTime;

  return (
    <div className="profiler-panel">
      <div className="profiler-toolbar">
        <div className="profiler-toolbar-left">
          <div className="profiler-stats-summary">
            <div className="summary-item">
              <Clock size={14} />
              <span className="summary-label">Frame:</span>
              <span className={`summary-value ${isOverBudget ? 'over-budget' : ''}`}>
                {totalFrameTime.toFixed(2)}ms
              </span>
            </div>
            <div className="summary-item">
              <Activity size={14} />
              <span className="summary-label">FPS:</span>
              <span className={`summary-value ${fps < 55 ? 'low-fps' : ''}`}>{fps}</span>
            </div>
            <div className="summary-item">
              <BarChart3 size={14} />
              <span className="summary-label">Systems:</span>
              <span className="summary-value">{systems.length}</span>
            </div>
          </div>
        </div>
        <div className="profiler-toolbar-right">
          <select
            className="profiler-sort"
            value={sortBy}
            onChange={(e) => setSortBy(e.target.value as any)}
          >
            <option value="time">Sort by Time</option>
            <option value="average">Sort by Average</option>
            <option value="name">Sort by Name</option>
          </select>
          <button
            className="profiler-btn"
            onClick={() => setIsPaused(!isPaused)}
            title={isPaused ? 'Resume' : 'Pause'}
          >
            {isPaused ? <Play size={14} /> : <Pause size={14} />}
          </button>
          <button
            className="profiler-btn"
            onClick={handleReset}
            title="Reset Statistics"
          >
            <RefreshCw size={14} />
          </button>
        </div>
      </div>

      <div className="profiler-content">
        {systems.length === 0 ? (
          <div className="profiler-empty">
            <Cpu size={48} />
            <p>No performance data available</p>
            <p className="profiler-empty-hint">
              Make sure Core debug mode is enabled and systems are running
            </p>
          </div>
        ) : (
          <div className="profiler-systems">
            {systems.map((system, index) => (
              <div key={system.name} className="system-row">
                <div className="system-header">
                  <div className="system-info">
                    <span className="system-rank">#{index + 1}</span>
                    <span className="system-name">{system.name}</span>
                    {system.entityCount > 0 && (
                      <span className="system-entities">
                        ({system.entityCount} entities)
                      </span>
                    )}
                  </div>
                  <div className="system-metrics">
                    <span className="metric-time">{system.executionTime.toFixed(2)}ms</span>
                    <span className="metric-percentage">{system.percentage.toFixed(1)}%</span>
                  </div>
                </div>
                <div className="system-bar">
                  <div
                    className="system-bar-fill"
                    style={{
                      width: `${Math.min(system.percentage, 100)}%`,
                      backgroundColor: system.executionTime > targetFrameTime
                        ? 'var(--color-danger)'
                        : system.executionTime > targetFrameTime * 0.5
                        ? 'var(--color-warning)'
                        : 'var(--color-success)'
                    }}
                  />
                </div>
                <div className="system-stats">
                  <div className="stat-item">
                    <span className="stat-label">Avg:</span>
                    <span className="stat-value">{system.averageTime.toFixed(2)}ms</span>
                  </div>
                  <div className="stat-item">
                    <span className="stat-label">Min:</span>
                    <span className="stat-value">{system.minTime.toFixed(2)}ms</span>
                  </div>
                  <div className="stat-item">
                    <span className="stat-label">Max:</span>
                    <span className="stat-value">{system.maxTime.toFixed(2)}ms</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="profiler-footer">
        <div className="profiler-legend">
          <div className="legend-item">
            <div className="legend-color" style={{ background: 'var(--color-success)' }} />
            <span>Good (&lt;8ms)</span>
          </div>
          <div className="legend-item">
            <div className="legend-color" style={{ background: 'var(--color-warning)' }} />
            <span>Warning (8-16ms)</span>
          </div>
          <div className="legend-item">
            <div className="legend-color" style={{ background: 'var(--color-danger)' }} />
            <span>Critical (&gt;16ms)</span>
          </div>
        </div>
      </div>
    </div>
  );
}