"use client";

import React from "react";
import { Planet } from "@/types/swapi";
import { t } from "@/content/locales"; // Import der Locales

interface GalaxyMapProps {
  planets: Planet[];
  onSelectLocation: (planet: Planet) => void;
  currentLocationId?: string;
}

export default function GalaxyMap({
  planets,
  onSelectLocation,
  currentLocationId,
}: GalaxyMapProps) {
  return (
    <div className="relative w-full max-w-4xl h-[500px] bg-[#080808] border-2 border-yellow-500/20 rounded-xl overflow-hidden shadow-[inset_0_0_50px_rgba(0,0,0,1)] z-10">
      {/* Hintergrund-Raster (Grid) */}
      <div
        className="absolute inset-0 opacity-10 pointer-events-none"
        style={{
          backgroundImage:
            "linear-gradient(#eab308 1px, transparent 1px), linear-gradient(90deg, #eab308 1px, transparent 1px)",
          backgroundSize: "40px 40px",
        }}
      />

      {/* Die Planeten (Nodes) aus der API */}
      {planets.map((planet) => {
        const isCurrent = planet.id === currentLocationId;

        return (
          <button
            key={planet.id}
            onClick={() => !isCurrent && onSelectLocation(planet)}
            disabled={isCurrent}
            className={`absolute group transform -translate-x-1/2 -translate-y-1/2 transition-all 
        ${isCurrent ? "cursor-default" : "cursor-pointer hover:scale-110"}`}
            style={{ left: `${planet.x}%`, top: `${planet.y}%` }}
          >
            {/* Planet Visuell */}
            <div
              className={`w-4 h-4 rounded-full border-2 transition-all duration-300 
              ${
                isCurrent
                  ? "bg-blue-500 border-white shadow-[0_0_15px_#3b82f6] scale-125"
                  : "bg-yellow-500/20 border-yellow-500 group-hover:bg-yellow-500 group-hover:shadow-[0_0_10px_#eab308]"
              }`}
            />

            {/* Label */}
            <div className="absolute top-6 left-1/2 -translate-x-1/2 whitespace-nowrap">
              <span
                className={`text-[10px] font-mono uppercase tracking-tighter px-1 rounded bg-black/50
                ${isCurrent ? "text-blue-400 font-bold" : "text-yellow-500/60 group-hover:text-yellow-500"}`}
              >
                {planet.name}
              </span>
            </div>

            {/* Pulsierender Ring für aktuellen Standort */}
            {isCurrent && (
              <div className="absolute -inset-2 border border-blue-500/50 rounded-full animate-ping pointer-events-none" />
            )}
          </button>
        );
      })}

      {/* Scan-Linie Effekt */}
      <div className="absolute top-0 left-0 w-full h-1 bg-yellow-500/5 opacity-20 animate-scan pointer-events-none" />

      {/* Info Overlay */}
      <div className="absolute bottom-4 left-4 text-[10px] text-yellow-500/40 font-mono uppercase pointer-events-none bg-black/40 p-2 rounded">
        {t.GALAXY_MAP.SCAN_STATUS} <br />
        {t.GALAXY_MAP.OBJECTS_DETECTED(planets.length)} <br />
        {t.GALAXY_MAP.HOLONET_STATUS}
      </div>
    </div>
  );
}