import React, { useState, useEffect, useRef } from 'react';

export default function DraggableStatsMenu() {
  const [position, setPosition] = useState({ x: 50, y: 50 });
  const [isDragging, setIsDragging] = useState(false);
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
  const [ping, setPing] = useState(0);
  const [fps, setFps] = useState(0);
  const menuRef = useRef(null);

  // Simulate ping updates
  useEffect(() => {
    const pingInterval = setInterval(() => {
      setPing(Math.floor(Math.random() * 50) + 10);
    }, 1000);
    return () => clearInterval(pingInterval);
  }, []);

  // Calculate FPS
  useEffect(() => {
    let frameCount = 0;
    let lastTime = performance.now();
    
    const countFrame = () => {
      frameCount++;
      const currentTime = performance.now();
      
      if (currentTime >= lastTime + 1000) {
        setFps(frameCount);
        frameCount = 0;
        lastTime = currentTime;
      }
      
      requestAnimationFrame(countFrame);
    };
    
    requestAnimationFrame(countFrame);
  }, []);

  const handleMouseDown = (e) => {
    if (!menuRef.current) return;
    
    const rect = menuRef.current.getBoundingClientRect();
    setDragOffset({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top
    });
    setIsDragging(true);
  };

  const handleMouseMove = (e) => {
    if (!isDragging) return;
    
    setPosition({
      x: e.clientX - dragOffset.x,
      y: e.clientY - dragOffset.y
    });
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  useEffect(() => {
    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      
      return () => {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };
    }
  }, [isDragging, dragOffset]);

  const brainrotPhrases = [
    "Strawberry Elephant",
    "67",
    "Job Job Job Sahur",
    "",
    "",
    "",
    "",
    "",
    "",
    ""
  ];

  return (
    <div className="w-screen h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 flex items-center justify-center">
      <div
        ref={menuRef}
        style={{
          position: 'fixed',
          left: `${position.x}px`,
          top: `${position.y}px`,
          cursor: isDragging ? 'grabbing' : 'grab'
        }}
        onMouseDown={handleMouseDown}
        className="bg-black bg-opacity-80 border-2 border-red-600 rounded-2xl p-6 select-none shadow-2xl"
      >
        <h2 className="text-red-500 font-bold text-xl mb-4 text-center">Server Stats</h2>
        
        <div className="space-y-3 min-w-[200px]">
          <div className="flex justify-between items-center">
            <span className="text-gray-300 font-medium">Ping:</span>
            <span className="text-green-400 font-bold">{ping} ms</span>
          </div>
          
          <div className="flex justify-between items-center">
            <span className="text-gray-300 font-medium">FPS:</span>
            <span className="text-blue-400 font-bold">{fps}</span>
          </div>
          
          <div className="border-t border-red-600 pt-3 mt-3">
            <div className="text-gray-300 font-medium mb-2">Best Brainrot:</div>
            <div className="text-yellow-400 font-bold text-sm">
              {brainrotPhrases[Math.floor(Math.random() * brainrotPhrases.length)]}
            </div>
          </div>
        </div>
      </div>
      
      <div className="text-white text-center">
        <p className="text-2xl font-bold mb-2">Drag the menu around!</p>
        <p className="text-gray-400">Click and hold to move it</p>
      </div>
    </div>
  );
}