"use client";

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

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

export default function GalaxyMap({
  planets,
  onSelectLocation,
  currentLocationId,
  selectedPlanetId,
}: GalaxyMapProps) {
  return (
    <div className="relative w-full max-w-4xl h-[500px] bg-[#080808] border-2 border-yellow-300 rounded-xl overflow-hidden shadow-[inset_0_0_50px_rgba(0,0,0,1)] z-10">
      {/* Background-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",
        }}
      />

      {planets.map((planet) => {
        const isCurrent = planet.id === currentLocationId;
        const isSelected = planet.id === selectedPlanetId;

        return (
          <button
            key={planet.id}
            onClick={() => onSelectLocation(planet)}
            className="absolute group transform -translate-x-1/2 -translate-y-1/2 transition-all cursor-pointer hover:scale-110"
            style={{ left: `${planet.x}%`, top: `${planet.y}%` }}
          >
            <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"
                  : isSelected
                    ? "bg-yellow-500 border-yellow-500 shadow-[0_0_10px_#eab308]"
                    : "bg-yellow-500/20 border-yellow-500 group-hover:bg-yellow-500 group-hover:shadow-[0_0_10px_#eab308]"
              }`}
            />

            <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"
                    : isSelected
                      ? "text-yellow-500"
                      : "text-yellow-500/60 group-hover:text-yellow-500"
                }`}
              >
                {planet.name}
              </span>
            </div>

            {isCurrent && (
              <div className="absolute -inset-2 border border-blue-500/50 rounded-full animate-ping pointer-events-none" />
            )}
          </button>
        );
      })}

      <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-red-500 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>
  );
}