"use client";

import { useGameEngine } from "@/hooks/useGameEngine";
import HUD from "../components/Hud";
import GalaxyMap from "../components/GalaxyMap";
import EventLog from "../components/EventLog";
import ActionPanel from "../components/ActionPanel";
import StartScreen from "@/components/StartScreen";
import GameOverScreen from "@/components/GameOverScreen";
import VictoryScreen from "@/components/VictoryScreen";
import PowerDistributor from "@/components/PowerDistributor";
import { t } from "@/content/locales";

export default function Home() {
  const {
    gameStarted,
    startGame,
    planets,
    credits,
    hp,
    loading,
    currentLocationId,
    currentPlanet,
    selectedPlanet,
    setSelectedPlanet,
    handleAttack,
    executeJump,
    handleRepair,
    isJumping,
    power,
    updatePower,
    activeEnemy,
    executeEscape,
    logs,
    isGameOver,
    restartGame,
    isVictory,
    isRerouting,
    WIN_THRESHOLD,
  } = useGameEngine();

  if (loading) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center font-mono text-yellow-500">
        <div className="animate-pulse tracking-[0.3em]">{t.SYSTEM.LOADING}</div>
      </div>
    );
  }

  if (!gameStarted) return <StartScreen onStart={startGame} />;

  const activeDisplayPlanet = selectedPlanet || currentPlanet;
  const isViewingCurrentLocation =
    !!currentPlanet && activeDisplayPlanet?.id === currentPlanet.id;

  return (
    <main className="min-h-screen bg-[#050505] pt-24 px-4 flex flex-col items-center pb-12">
      <HUD
        credits={credits}
        hp={hp}
        maxHp={10}
        location={currentPlanet?.name || t.SYSTEM.DEEP_SPACE}
        targetCredits={WIN_THRESHOLD}
      />

      <div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div className="lg:col-span-3">
          <GalaxyMap
            planets={planets}
            currentLocationId={currentLocationId}
            selectedPlanetId={selectedPlanet?.id}
            onSelectLocation={setSelectedPlanet}
          />
        </div>
        <div className="lg:col-span-1">
          <PowerDistributor
            power={power}
            onUpdatePower={updatePower}
            disabled={isJumping || isRerouting}
            isRerouting={isRerouting}
          />
        </div>
      </div>

      <div className="w-full max-w-4xl animate-in fade-in slide-in-from-bottom-4 duration-700">
        <ActionPanel
          planet={activeDisplayPlanet}
          enemy={activeEnemy}
          isCurrentLocation={isViewingCurrentLocation}
          isLoading={isJumping}
          onAction={activeEnemy ? handleAttack : executeJump}
          onEscape={executeEscape}
          onRepair={handleRepair}
          currentHp={hp}
        />
      </div>

      <div className="w-full max-w-4xl mt-6">
        <EventLog logs={logs} />
      </div>

      {isVictory && <VictoryScreen credits={credits} onRestart={restartGame} />}

      {isGameOver && (
        <GameOverScreen credits={credits} onRestart={restartGame} />
      )}
    </main>
  );
}