import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Settings, ShoppingBag, Volume2, Users, User, Home, Power } from 'lucide-react'; // Importing Home and Power icons

// Main App component for the Aura X Game Console UI
const App = () => {
  // State to manage the active menu item for navigation
  const [activeMenuItem, setActiveMenuItem] = useState('Home'); // Default to Home
  // State to manage the currently focused element for gamepad/keyboard navigation
  const [focusedElement, setFocusedElement] = useState({ type: 'menu', id: 'Home' }); // Default focus to Home
  // State to trigger icon animations on press
  const [animatingIconId, setAnimatingIconId] = useState(null);

  // Refs for menu items and game cards to allow programmatic focus
  const menuRefs = useRef({});
  const gameRefs = useRef({});
  const gameListContainerRef = useRef(null); // Ref for the scrollable game list container

  // Dummy data for menu items with icons and specific colors
  const menuItems = [
    { id: 'Home', name: 'Home', icon: Home, defaultIconColor: 'text-gray-700' },
    { id: 'Settings', name: 'Settings', icon: Settings, defaultIconColor: 'text-gray-700' },
    { id: 'Store', name: 'Store', icon: ShoppingBag, defaultIconColor: 'text-gray-700' },
    { id: 'Friends', name: 'Friends', icon: Users, defaultIconColor: 'text-[#FF0000]' }, // Red for Users
    { id: 'Profile', name: 'Profile', icon: User, defaultIconColor: 'text-[#00CC00]' }, // Green for User
    { id: 'Power', name: 'Power', icon: Power, defaultIconColor: 'text-blue-500' }, // Power at the bottom
  ];

  // Dummy data for game titles to display, matching image proportions
  // Expanded to more than 9 to demonstrate scrolling
  const games = [
    { id: 1, title: 'LEGO Star Wars', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=LEGO+SW', border: 'border-blue-400' }, // Example from image
    { id: 2, title: 'Fortnite', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=Fortnite', border: 'border-blue-400' }, // Example from image
    { id: 3, title: 'Cyberpunk 2077', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=Cyberpunk' },
    { id: 4, title: 'The Witcher 3', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=Witcher+3' },
    { id: 5, title: 'Red Dead Redemption 2', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=RDR2' },
    { id: 6, title: 'God of War', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=God+of+War' },
    { id: 7, title: 'Spider-Man: Miles Morales', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=Spider-Man' },
    { id: 8, title: 'Horizon Zero Dawn', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=Horizon' },
    { id: 9, title: 'Elden Ring', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=Elden+Ring' },
    { id: 10, title: 'Doom Eternal', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=Doom' },
    { id: 11, title: 'Halo Infinite', icon: 'https://placehold.co/200x260/000000/FFFFFF?text=Halo' },
  ];

  // Function to get current time for the header
  const getCurrentTime = () => {
    const now = new Date();
    return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true });
  };

  const [currentTime, setCurrentTime] = useState(getCurrentTime());

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(getCurrentTime());
    }, 60000); // Update every minute
    return () => clearInterval(timer);
  }, []);

  // Effect to handle gamepad connection and disconnection
  useEffect(() => {
    const handleGamepadConnected = (e) => {
      console.log('Gamepad connected at index %d: %s. %d buttons, %d axes.',
        e.gamepad.index, e.gamepad.id,
        e.gamepad.buttons.length, e.gamepad.axes.length);
      setGamepad(e.gamepad);
      // Set initial focus to the Home menu item when gamepad connects
      setFocusedElement({ type: 'menu', id: 'Home' });
    };

    const handleGamepadDisconnected = (e) => {
      console.log('Gamepad disconnected from index %d: %s',
        e.gamepad.index, e.gamepad.id);
      setGamepad(null);
      setFocusedElement({ type: 'none', id: null }); // Clear focus
    };

    window.addEventListener('gamepadconnected', handleGamepadConnected);
    window.addEventListener('gamepaddisconnected', handleGamepadDisconnected);

    // Check for already connected gamepads on mount
    const gamepads = navigator.getGamepads();
    if (gamepads[0]) {
      setGamepad(gamepads[0]);
      setFocusedElement({ type: 'menu', id: 'Home' });
    }

    return () => {
      window.removeEventListener('gamepadconnected', handleGamepadConnected);
      window.removeEventListener('gamepaddisconnected', handleGamepadDisconnected);
    };
  }, []);

  // Debounce state for gamepad/keyboard buttons to prevent multiple triggers on a single press
  const [buttonStates, setButtonStates] = useState({});

  // Unified navigation logic for both gamepad and keyboard
  const navigate = useCallback((direction) => {
    let handled = false;
    if (focusedElement.type === 'menu') {
      const currentIndex = menuItems.findIndex(item => item.id === focusedElement.id);
      let nextIndex;

      if (direction === 'up') {
        nextIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
        setFocusedElement({ type: 'menu', id: menuItems[nextIndex].id });
        handled = true;
      } else if (direction === 'down') {
        nextIndex = (currentIndex + 1) % menuItems.length;
        setFocusedElement({ type: 'menu', id: menuItems[nextIndex].id });
        handled = true;
      } else if (direction === 'right') {
        // Only move to games if 'Home' is the active menu (since Home now shows games)
        if (activeMenuItem === 'Home' && games.length > 0) {
            setFocusedElement({ type: 'game', id: games[0].id });
            handled = true;
        }
      }
    } else if (focusedElement.type === 'game') {
      const allSlots = Array.from({ length: 9 }).map((_, i) => games[i] ? games[i].id : `empty-${i}`);
      const currentIndex = allSlots.findIndex(id => id === focusedElement.id);
      let nextIndex;

      if (direction === 'up') {
        nextIndex = (currentIndex - 1 + allSlots.length) % allSlots.length;
        setFocusedElement({ type: 'game', id: allSlots[nextIndex] });
        handled = true;
      } else if (direction === 'down') {
        nextIndex = (currentIndex + 1) % allSlots.length;
        setFocusedElement({ type: 'game', id: allSlots[nextIndex] });
        handled = true;
      } else if (direction === 'left') {
          // Move from games to menu, setting activeMenuItem to 'Home' (since Home shows games)
          setFocusedElement({ type: 'menu', id: 'Home' });
          handled = true;
      }
    }
    return handled; // Return true if navigation was handled
  }, [focusedElement, activeMenuItem, games, menuItems]);

  // Function to handle gamepad input polling
  const handleGamepadInput = useCallback(() => {
    if (!gamepad) return;

    const currentGamepad = navigator.getGamepads()[gamepad.index];
    if (!currentGamepad) {
      setGamepad(null); // Gamepad might have disconnected
      return;
    }

    const newButtonStates = {};
    for (let i = 0; i < currentGamepad.buttons.length; i++) {
      const button = currentGamepad.buttons[i];
      const isPressed = button.pressed;
      newButtonStates[i] = isPressed;

      if (isPressed && !buttonStates[i]) {
        // A button (Xbox layout)
        if (i === 0) {
          if (focusedElement.type === 'menu') {
            setAnimatingIconId(focusedElement.id); // Trigger animation
            setTimeout(() => {
              setActiveMenuItem(focusedElement.id); // Set active after animation starts
              setAnimatingIconId(null); // Clear animation state
              // If 'Home' is selected, and we're moving from menu to games, set focus to first game
              if (focusedElement.id === 'Home' && games.length > 0) {
                setFocusedElement({ type: 'game', id: games[0].id });
              }
            }, 300); // Match animation duration
          } else if (focusedElement.type === 'game') {
            console.log(`Playing game: ${focusedElement.title}`);
            // Implement actual game launch logic here
          }
        }
        // D-pad or left stick for navigation
        else if (i === 12 || currentGamepad.axes[1] < -0.5) { // Up
          navigate('up');
        } else if (i === 13 || currentGamepad.axes[1] > 0.5) { // Down
          navigate('down');
        } else if (i === 14 || currentGamepad.axes[0] < -0.5) { // Left
          navigate('left');
        } else if (i === 15 || currentGamepad.axes[0] > 0.5) { // Right
          navigate('right');
        }
      }
    }
    setButtonStates(newButtonStates);
  }, [gamepad, focusedElement, navigate, games, buttonStates]);

  // Keyboard input handler
  const handleKeyDown = useCallback((event) => {
    let handled = false;
    switch (event.key) {
      case 'ArrowUp':
        handled = navigate('up');
        break;
      case 'ArrowDown':
        handled = navigate('down');
        break;
      case 'ArrowLeft':
        handled = navigate('left');
        break;
      case 'ArrowRight':
        handled = navigate('right');
        break;
      case 'Enter': // Confirmation key
      case 'z': // 'Z' key for confirmation
      case 'Z': // 'Z' key for confirmation (uppercase)
        if (focusedElement.type === 'menu') {
          setAnimatingIconId(focusedElement.id); // Trigger animation
          setTimeout(() => {
            setActiveMenuItem(focusedElement.id); // Set active after animation starts
            setAnimatingIconId(null); // Clear animation state
            // If 'Home' is selected, and we're moving from menu to games, set focus to first game
            if (focusedElement.id === 'Home' && games.length > 0) {
              setFocusedElement({ type: 'game', id: games[0].id });
            }
          }, 300); // Match animation duration
        } else if (focusedElement.type === 'game') {
          console.log(`Playing game: ${focusedElement.title}`);
        }
        handled = true;
        break;
      default:
        break;
    }
    if (handled) {
      event.preventDefault(); // Prevent default browser scrolling/behavior
    }
  }, [focusedElement, navigate, games]);

  // Animation loop for gamepad polling
  useEffect(() => {
    let animationFrameId;
    const gameLoop = () => {
      handleGamepadInput();
      animationFrameId = requestAnimationFrame(gameLoop);
    };

    if (gamepad) {
      animationFrameId = requestAnimationFrame(gameLoop);
    }

    return () => {
      cancelAnimationFrame(animationFrameId);
    };
  }, [gamepad, handleGamepadInput]);

  // Add keyboard event listener
  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleKeyDown]);

  // Effect to scroll focused game element into view
  useEffect(() => {
    if (focusedElement.type === 'menu' && menuRefs.current[focusedElement.id]) {
      menuRefs.current[focusedElement.id].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    } else if (focusedElement.type === 'game' && gameRefs.current[focusedElement.id]) {
      // Scroll the specific game card into view within its container
      gameRefs.current[focusedElement.id].scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }, [focusedElement]);


  return (
    // Main container for the app, full screen height and width, dark background matching image
    <div className="min-h-screen bg-[#2e2e2e] text-white font-inter flex flex-col">
      {/* Console Header */}
      <header className="w-full bg-[#2e2e2e] p-4 flex justify-between items-center border-b border-[#3a3a3a] h-16">
        <div className="flex items-center space-x-2">
          {/* Avatar matching image style */}
          <div className="w-8 h-8 rounded-full flex items-center justify-center">
            <img src="https://placehold.co/32x32/FF0000/FFFFFF?text=👤" alt="Player Avatar" className="rounded-full" />
          </div>
          <span className="text-lg font-semibold">Hello, TheRedSlimeYT!</span>
        </div>
        <span className="text-lg font-semibold">{currentTime}</span>
      </header>

      {/* Main Content Area: Sidebar + Content */}
      <main className="flex flex-1">
        {/* Side Navigation Menu */}
        <nav className="w-24 bg-[#3a3a3a] p-4 flex flex-col items-center justify-center space-y-6 border-r-2 border-gray-700">
          {menuItems.map((item) => {
            const IconComponent = item.icon;
            const isFocused = focusedElement.type === 'menu' && focusedElement.id === item.id;
            const isActive = activeMenuItem === item.id;
            const isCurrentlyAnimating = animatingIconId === item.id;

            return (
              <button
                key={item.id}
                ref={el => menuRefs.current[item.id] = el}
                className={`
                  w-16 h-16 rounded-full flex items-center justify-center transition-all duration-200 relative overflow-hidden
                  ${isFocused ? 'scale-110' : 'scale-100'} /* Grow animation on focus */
                  bg-white /* Always white background for the button itself */
                `}
                title={item.name}
                // Apply gradient animation via inline style when focused
                style={isFocused ? {
                    background: 'linear-gradient(45deg, #007BFF, #8A2BE2, #FF00FF, #00FFFF)', // Blue-ish gradient
                    backgroundSize: '400% 400%',
                    animation: 'gradient-animation 5s ease infinite'
                } : {}}
              >
                {/* Inner div for the white circle and icon */}
                <div className="w-[calc(100%-12px)] h-[calc(100%-12px)] bg-white rounded-full flex items-center justify-center relative z-10">
                  <IconComponent
                    size={32}
                    className={`
                      ${(isActive || isCurrentlyAnimating) ? 'text-white' : item.defaultIconColor}
                      ${isCurrentlyAnimating ? (item.id === 'Home' ? 'animate-jump-icon' : item.id === 'Settings' ? 'animate-spin-icon' : '') : ''}
                    `}
                  />
                </div>
              </button>
            );
          })}
        </nav>

        {/* Add keyframes for the gradient and icon animations */}
        <style>
          {`
            @keyframes gradient-animation {
              0% { background-position: 0% 50%; }
              50% { background-position: 100% 50%; }
              100% { background-position: 0% 50%; }
            }

            @keyframes jump-icon {
              0% { transform: translateY(0); }
              50% { transform: translateY(-8px); }
              100% { transform: translateY(0); }
            }

            @keyframes spin-icon {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }

            .animate-jump-icon {
              animation: jump-icon 0.3s ease-in-out;
            }

            .animate-spin-icon {
              animation: spin-icon 0.5s linear;
            }
          `}
        </style>

        {/* Content Display Area */}
        <section className="flex-1 p-6 bg-[#3a3a3a] relative"> {/* Removed justify-center items-center */}
          {/* Display games if Home is active, matching the image */}
          {activeMenuItem === 'Home' && (
            <div
              ref={gameListContainerRef}
              className="absolute top-8 left-8 flex flex-col space-y-4"
              style={{
                height: 'calc(100% - 64px)', // Adjust height to fit within section
                overflow: 'hidden', // Hide scrollbars
                paddingRight: '16px' // Add some padding to the right to prevent content from touching the edge
              }}
            >
              {Array.from({ length: 9 }).map((_, index) => {
                const game = games[index];
                const isFocused = focusedElement.type === 'game' && focusedElement.id === (game ? game.id : `empty-${index}`);
                const isPlaceholder = !game;

                return (
                  <div
                    key={game ? game.id : `empty-${index}`}
                    ref={el => gameRefs.current[game ? game.id : `empty-${index}`] = el}
                    className={`
                      rounded-xl shadow-md flex-shrink-0
                      flex flex-col items-center relative
                      ${isFocused ? 'border-2 border-blue-400 ring-2 ring-blue-400' : (isPlaceholder ? 'border-2 border-gray-700' : (game.border ? `border-2 ${game.border}` : 'border-2 border-transparent'))}
                    `}
                    style={{ width: '200px', height: '260px', backgroundColor: isPlaceholder ? '#2a2a2a' : '#3a3a3a' }}
                  >
                    {isPlaceholder ? (
                      <div className="w-full h-full flex items-center justify-center text-gray-500 text-sm">
                        Empty Slot
                      </div>
                    ) : (
                      <img
                        src={game.icon}
                        alt={game.title}
                        className="w-full h-full object-cover rounded-lg"
                        onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/200x260/555555/FFFFFF?text=${game.title.replace(/\s/g, '+')}`; }}
                      />
                    )}
                  </div>
                );
              })}
            </div>
          )}

          {activeMenuItem === 'Store' && (
            <div className="text-center w-full h-full flex flex-col justify-center items-center">
              <h2 className="text-3xl font-semibold mb-6 text-indigo-300">Aura X Store</h2>
              <p className="text-gray-300 text-lg">Discover new games and content!</p>
              <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="bg-gray-700 p-6 rounded-xl shadow-md">
                  <h3 className="text-xl font-semibold mb-2">New Release Game</h3>
                  <p className="text-gray-400">Exciting adventure awaits!</p>
                  <button className="mt-4 bg-green-500 text-white px-4 py-2 rounded-lg">Buy Now</button>
                </div>
                <div className="bg-gray-700 p-6 rounded-xl shadow-md">
                  <h3 className="text-xl font-semibold mb-2">DLC Pack</h3>
                  <p className="text-gray-400">Expand your favorite game.</p>
                  <button className="mt-4 bg-green-500 text-white px-4 py-2 rounded-lg">Buy Now</button>
                </div>
              </div>
            </div>
          )}

          {activeMenuItem === 'Settings' && (
            <div className="text-center w-full h-full flex flex-col justify-center items-center">
              <h2 className="text-3xl font-semibold mb-6 text-indigo-300">Settings</h2>
              <p className="text-gray-300 text-lg">Adjust your console preferences here.</p>
              <div className="mt-8 space-y-4">
                <div className="bg-gray-700 p-4 rounded-xl flex justify-between items-center">
                  <span className="text-lg">Audio Volume</span>
                  <input type="range" className="w-1/2 accent-indigo-500" />
                </div>
                <div className="bg-gray-700 p-4 rounded-xl flex justify-between items-center">
                  <span className="text-lg">Display Resolution</span>
                  <select className="bg-gray-600 text-white p-2 rounded-lg">
                    <option>1920x1080</option>
                    <option>1280x720</option>
                  </select>
                </div>
              </div>
            </div>
          )}

          {/* Placeholder for Power content */}
          {activeMenuItem === 'Power' && (
            <div className="text-center w-full h-full flex flex-col justify-center items-center">
              <h2 className="text-3xl font-semibold mb-6 text-indigo-300">Power Options</h2>
              <p className="text-gray-300 text-lg">Shut down or restart your console.</p>
              <div className="mt-8 space-y-4">
                <button className="bg-red-700 hover:bg-red-800 text-white px-6 py-3 rounded-lg text-xl font-semibold">Shut Down</button>
                <button className="bg-yellow-700 hover:bg-yellow-800 text-white px-6 py-3 rounded-lg text-xl font-semibold ml-4">Restart</button>
              </div>
            </div>
          )}

          {activeMenuItem === 'Friends' && (
            <div className="text-center w-full h-full flex flex-col justify-center items-center">
              <h2 className="text-3xl font-semibold mb-6 text-indigo-300">Friends List</h2>
              <p className="text-gray-300 text-lg">See who's online and invite them to play.</p>
            </div>
          )}
          {activeMenuItem === 'Profile' && (
            <div className="text-center w-full h-full flex flex-col justify-center items-center">
              <h2 className="text-3xl font-semibold mb-6 text-indigo-300">Player Profile</h2>
              <p className="text-gray-300 text-lg">View and edit your profile information.</p>
            </div>
          )}

          {/* Elliptical shadow on the right, as seen in the image */}
          <div className="absolute bottom-4 right-4 w-48 h-12 bg-[#2a2a2a] rounded-full opacity-70 blur-md"></div>
        </section>
      </main>
    </div>
  );
};

export default App;