import React from 'react'

export default function ConnectionModal({ fromNode, nodes, existingConnections, onConnect, onDisconnect, onClose }) {
  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-slate-800 rounded-2xl border border-slate-700 w-full max-w-md">
        {/* Header */}
        <div className="p-4 border-b border-slate-700 flex items-center justify-between">
          <div>
            <h2 className="text-lg font-bold text-white">Manage Connections</h2>
            <p className="text-sm text-slate-400">From: {fromNode?.name}</p>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 bg-slate-700 hover:bg-slate-600 rounded-lg flex items-center justify-center text-slate-400 hover:text-white transition-colors"
          >
            ✕
          </button>
        </div>

        {/* Content */}
        <div className="p-4">
          <h3 className="text-sm font-medium text-slate-300 mb-3">Available Nodes:</h3>
          <div className="space-y-2 max-h-64 overflow-y-auto">
            {nodes.map((node) => {
              const isConnected = existingConnections.some(c => c.to === node.id)
              return (
                <div
                  key={node.id}
                  className="flex items-center justify-between p-3 bg-slate-700/50 rounded-lg"
                >
                  <div className="flex items-center gap-3">
                    <span className="text-lg">{node.type === 'ceo' ? '👑' : '🤖'}</span>
                    <div>
                      <p className="font-medium text-white">{node.name}</p>
                      <p className="text-xs text-slate-400">{node.model}</p>
                    </div>
                  </div>
                  {isConnected ? (
                    <button
                      onClick={() => {
                        const conn = existingConnections.find(c => c.to === node.id)
                        if (conn) onDisconnect(conn.id)

                      className="px-3 py-1 bg-red-900/30 hover:bg-red-900/50 text-red-400 rounded-lg text-sm font-medium transition-colors"
                    >
                      Disconnect
                    </button>
                  ) : (
                    <button
                      onClick={() => onConnect(node.id)}
                      className="px-3 py-1 bg-violet-600 hover:bg-violet-500 text-white rounded-lg text-sm font-medium transition-colors"
                    >
                      Connect
                    </button>
                  )}
                </div>
              )
            })}
          </div>
        </div>

        {/* Footer */}
        <div className="p-4 border-t border-slate-700">
          <button
            onClick={onClose}
            className="w-full px-4 py-2 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded-lg font-medium transition-colors"
          >
            Done
          </button>
        </div>
      </div>
    </div>
  )
}