import React, { useState, useRef, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { MapNode } from './MapNode';
import { Connection } from './Connection';
import { galaxyData } from '../data/galaxyData';

interface Position {
  x: number;
  y: number;
}

export const GalaxyMap = () => {
  const navigate = useNavigate();
  const [draggedNode, setDraggedNode] = useState<string | null>(null);
  const [nodePositions, setNodePositions] = useState<Record<string, Position>>(galaxyData.nodePositions);
  const svgRef = useRef<SVGSVGElement>(null);

  const handleNodeClick = (regionId: string) => {
    navigate(`/regions/${regionId}`);
  };

  const handleMouseDown = useCallback((nodeId: string) => {
    setDraggedNode(nodeId);
  }, []);

  const handleMouseMove = useCallback((e: React.MouseEvent) => {
    if (!draggedNode || !svgRef.current) return;

    const rect = svgRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    setNodePositions(prev => ({
      ...prev,
      [draggedNode]: { x, y }
    }));
  }, [draggedNode]);

  const handleMouseUp = useCallback(() => {
    setDraggedNode(null);
  }, []);

  return (
    <div className="w-full h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden relative">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-slate-900/40 to-black"></div>
      
      <div className="relative z-10 p-8">
        <h1 className="text-4xl font-bold text-white mb-2 text-center">Galaxy Map</h1>
        <p className="text-purple-200 text-center mb-8">Navigate the known regions of space</p>
        
        <div className="w-full h-[calc(100vh-200px)] border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
          <svg
            ref={svgRef}
            width="100%"
            height="100%"
            viewBox="0 0 1200 800"
            className="cursor-crosshair"
            onMouseMove={handleMouseMove}
            onMouseUp={handleMouseUp}
            onMouseLeave={handleMouseUp}
          >
            <defs>
              <filter id="glow">
                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                <feMerge> 
                  <feMergeNode in="coloredBlur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>
            
            {/* Render connections first (behind nodes) */}
            {galaxyData.connections.map((connection, index) => (
              <Connection
                key={index}
                from={nodePositions[connection.from]}
                to={nodePositions[connection.to]}
              />
            ))}
            
            {/* Render nodes */}
            {galaxyData.regions.map((region) => (
              <MapNode
                key={region.id}
                id={region.id}
                name={region.name}
                position={nodePositions[region.id]}
                onClick={() => handleNodeClick(region.id)}
                onMouseDown={() => handleMouseDown(region.id)}
                isDragging={draggedNode === region.id}
                type="region"
              />
            ))}
          </svg>
        </div>
      </div>
    </div>
  );
};