"use client";

import { useEffect, useState } from "react";
import { usePerformance } from "@/hooks/use-performance";

export function PerformanceMonitor() {
  const metrics = usePerformance();
  const [fps, setFps] = useState(0);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (process.env.NODE_ENV !== "development") return;

    let lastTime = performance.now();
    let frameCount = 0;

    const measureFPS = () => {
      frameCount++;
      const currentTime = performance.now();

      if (currentTime >= lastTime + 1000) {
        setFps(frameCount);
        frameCount = 0;
        lastTime = currentTime;
      }

      requestAnimationFrame(measureFPS);
    };

    measureFPS();

    // Toggle visibility with Ctrl+Shift+P
    const handleKeyPress = (e: KeyboardEvent) => {
      if (e.ctrlKey && e.shiftKey && e.key === "P") {
        setIsVisible((prev) => !prev);
      }
    };

    window.addEventListener("keydown", handleKeyPress);

    return () => {
      window.removeEventListener("keydown", handleKeyPress);
    };
  }, []);

  if (!isVisible || process.env.NODE_ENV !== "development") return null;

  return (
    <div className="fixed bottom-4 left-4 bg-black/80 backdrop-blur-sm border border-white/20 rounded-lg p-4 text-xs font-mono z-[9999]">
      <div className="space-y-1 text-white">
        <div>FPS: <span className="text-green-400">{fps}</span></div>
        <div>Load: <span className="text-blue-400">{metrics.loadTime}ms</span></div>
        <div>Render: <span className="text-purple-400">{metrics.renderTime.toFixed(2)}ms</span></div>
        {metrics.firstContentfulPaint > 0 && (
          <div>FCP: <span className="text-yellow-400">{metrics.firstContentfulPaint.toFixed(2)}ms</span></div>
        )}
      </div>
      <div className="mt-2 pt-2 border-t border-white/10 text-gray-400 text-[10px]">
        Press Ctrl+Shift+P to toggle
      </div>
    </div>
  );
}






