// تنفيذ مراقبة الأداء
const performanceMonitor = {
  fps: 0,
  lastTime: 0,
  frameCount: 0,
  
  measureFPS() {
    const now = performance.now();
    this.frameCount++;
    
    if (now >= this.lastTime + 1000) {
      this.fps = Math.round((this.frameCount * 1000) / (now - this.lastTime));
      this.frameCount = 0;
      this.lastTime = now;
    }
    
    requestAnimationFrame(() => this.measureFPS());
  }
};
 
// النتائج تظهر:
// CSS backdrop-filter: 30-45 FPS
// Liquid Glass React: 55-60 FPS

/* دعم محدود للمتصفح */
.glass-effect {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
 
/* دعم المتصفح اعتباراً من 2025:
   ✅ Safari 14+
   ✅ Chrome 76+
   ✅ Firefox 103+
   ❌ Internet Explorer (جميع الإصدارات)
   ⚠️  Edge (دعم جزئي قبل Chromium)
*/

// كشف WebGL شامل
const detectWebGLSupport = (): WebGLCapabilities => {
  if (typeof window === 'undefined') {
    return { supported: false, version: null };
  }
 
  try {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
    
    if (!gl) {
      return { supported: false, version: null };
    }
 
    const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
    const renderer = debugInfo ? 
      gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : 'Unknown';
 
    return {
      supported: true,
      version: gl instanceof WebGL2RenderingContext ? 2 : 1,
      renderer,
      maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE),
      maxRenderbufferSize: gl.getParameter(gl.MAX_RENDERBUFFER_SIZE)
    };
  } catch (error) {
    return { supported: false, version: null, error: error.message };
  }
};

// نظام احتياطي ذكي
import { ConditionalLiquidGlass } from '@/components/shared/conditional-liquid-glass';
 
const GlassMorphismCard = ({ children, className, ...props }) => {
  return (
    <ConditionalLiquidGlass
      displacementScale={2.0}
      blurAmount={1.5}
      elasticity={0.8}
      cornerRadius={16}
      className={className}
      fallback={
        <div className={`${className} bg-white/10 backdrop-blur-lg border border-white/20`}>
          {children}
        </div>
      }
      {...props}
    >
      {children}
    </ConditionalLiquidGlass>
  );
};

import { lazy, Suspense } from 'react';
 
const LiquidGlass = lazy(() => 
  import('liquid-glass-react').then(module => ({
    default: module.default
  }))
);
 
const OptimizedGlassComponent = ({ children, ...props }) => (
  <Suspense fallback={<CSSFallback>{children}</CSSFallback>}>
    <LiquidGlass {...props}>
      {children}
    </LiquidGlass>
  </Suspense>
);

// تنظيف تلقائي لسياقات WebGL
class WebGLResourceManager {
  private contexts: Set<WebGLRenderingContext> = new Set();
  private textures: Set<WebGLTexture> = new Set();
  private buffers: Set<WebGLBuffer> = new Set();
 
  registerContext(gl: WebGLRenderingContext) {
    this.contexts.add(gl);
  }
 
  cleanup() {
    this.contexts.forEach(gl => {
      // تنظيف الخامات
      this.textures.forEach(texture => {
        gl.deleteTexture(texture);
      });
      
      // تنظيف المخازن المؤقتة
      this.buffers.forEach(buffer => {
        gl.deleteBuffer(buffer);
      });
      
      // فقدان السياق لتحرير الذاكرة
      const loseContext = gl.getExtension('WEBGL_lose_context');
      if (loseContext) {
        loseContext.loseContext();
      }
    });
    
    this.contexts.clear();
    this.textures.clear();
    this.buffers.clear();
  }
}

// تعديل معاملات خاص بالجهاز
const getOptimizedParameters = (deviceInfo: DeviceInfo) => {
  const { isMobile, performance: devicePerformance } = deviceInfo;
  
  if (isMobile) {
    return {
      displacementScale: devicePerformance === 'low' ? 1.0 : 1.5,
      blurAmount: devicePerformance === 'low' ? 0.8 : 1.2,
      elasticity: 0.6,
      updateFrequency: devicePerformance === 'low' ? 30 : 60 // FPS
    };
  }
  
  return {
    displacementScale: 2.0,
    blurAmount: 1.5,
    elasticity: 0.8,
    updateFrequency: 60
  };
};

// حل أفضل ما في العالمين
const AdaptiveGlassEffect = ({ 
  children, 
  complexity = 'simple',
  ...props 
}) => {
  const [useWebGL, setUseWebGL] = useState(false);
  
  useEffect(() => {
    const shouldUseWebGL = 
      complexity === 'complex' || 
      hasWebGLSupport() && 
      !prefersReducedMotion();
    
    setUseWebGL(shouldUseWebGL);
  }, [complexity]);
  
  if (useWebGL) {
    return (
      <ConditionalLiquidGlass {...props}>
        {children}
      </ConditionalLiquidGlass>
    );
  }
  
  return (
    <div className="bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl">
      {children}
    </div>
  );
};