'use client'

import { useCallback } from 'react'
import ReactFlow, {
  Node,
  Edge,
  addEdge,
  Connection,
  useNodesState,
  useEdgesState,
  Controls,
  MiniMap,
  Background,
} from 'reactflow'
import 'reactflow/dist/style.css'

const initialNodes: Node[] = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Region 1' },
    position: { x: 250, y: 5 },
    style: { background: '#1E3A8A', color: '#fff' },
  },
  {
    id: '2',
    data: { label: 'Cluster 1' },
    position: { x: 100, y: 100 },
    style: { background: '#FF4500', color: '#fff' },
  },
  {
    id: '3',
    data: { label: 'Service 1' },
    position: { x: 400, y: 100 },
    style: { background: '#FFD700', color: '#000' },
  },
]

const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e1-3', source: '1', target: '3' },
]

export default function TopologyEditor() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)

  const onConnect = useCallback(
    (params: Connection) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  )

  return (
    <div className="h-[600px] w-full rounded-lg border border-studio-medium bg-studio-dark">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
        className="bg-studio-black"
      >
        <Controls className="bg-studio-dark border-studio-medium" />
        <MiniMap 
          className="bg-studio-dark border-studio-medium"
          nodeColor={(node) => {
            if (node.type === 'input') return '#1E3A8A'
            return '#FF4500'
          }}
        />
        <Background color="#2A2A2A" gap={16} />
      </ReactFlow>
    </div>
  )
}

