'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { X } from 'lucide-react'
import type { TopologyNode, NetworkTopology } from '@/lib/types/infrastructure'

interface NodeDetailsPanelProps {
  node: TopologyNode
  topology: NetworkTopology
  onClose: () => void
  onEdit?: () => void
  onDelete?: () => void
}

export function NodeDetailsPanel({
  node,
  topology,
  onClose,
  onEdit,
  onDelete,
}: NodeDetailsPanelProps) {
  const connections = topology.edges.filter(
    (e) => e.source === node.id || e.target === node.id
  )

  const connectedNodes = connections.map((edge) => {
    const otherId = edge.source === node.id ? edge.target : edge.source
    return topology.nodes.find((n) => n.id === otherId)
  }).filter(Boolean) as TopologyNode[]

  return (
    <Card className="fixed right-4 top-4 w-80 z-50 max-h-[80vh] overflow-y-auto">
      <CardHeader>
        <div className="flex items-start justify-between">
          <div>
            <CardTitle>{node.label}</CardTitle>
            <CardDescription>{node.type}</CardDescription>
          </div>
          <Button size="sm" variant="ghost" onClick={onClose}>
            <X className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <div className="text-sm font-semibold text-studio-medium mb-2">Details</div>
          <div className="space-y-2 text-sm">
            <div>
              <span className="text-studio-medium">Region:</span>{' '}
              <span className="text-studio-light">{node.region}</span>
            </div>
            <div>
              <span className="text-studio-medium">Entity:</span>{' '}
              <span className="text-studio-light">{node.entity}</span>
            </div>
            <div>
              <span className="text-studio-medium">Position:</span>{' '}
              <span className="text-studio-light">
                ({Math.round(node.position.x)}, {Math.round(node.position.y)})
              </span>
            </div>
          </div>
        </div>

        {Object.keys(node.metadata || {}).length > 0 && (
          <div>
            <div className="text-sm font-semibold text-studio-medium mb-2">Metadata</div>
            <div className="space-y-1 text-sm">
              {Object.entries(node.metadata || {}).map(([key, value]) => (
                <div key={key}>
                  <span className="text-studio-medium">{key}:</span>{' '}
                  <span className="text-studio-light">
                    {typeof value === 'object' ? JSON.stringify(value) : String(value)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

        {connectedNodes.length > 0 && (
          <div>
            <div className="text-sm font-semibold text-studio-medium mb-2">Connections</div>
            <div className="space-y-2">
              {connectedNodes.map((connectedNode) => (
                <div
                  key={connectedNode.id}
                  className="p-2 bg-studio-medium/20 rounded text-sm"
                >
                  <div className="font-medium">{connectedNode.label}</div>
                  <div className="text-xs text-studio-medium">{connectedNode.type}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="flex gap-2 pt-2 border-t border-studio-medium">
          {onEdit && (
            <Button size="sm" variant="outline" onClick={onEdit} className="flex-1">
              Edit
            </Button>
          )}
          {onDelete && (
            <Button size="sm" variant="destructive" onClick={onDelete} className="flex-1">
              Delete
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  )
}

