import React, { useState, useMemo } from 'react';
import { ReverseGraphNode, ReverseGraphEdge, ReverseTraversalPath } from '../types/database';
import { calculateReverseTraversal } from '../services/relationalDataGenerator';
import { 
  GitFork, 
  ArrowLeft, 
  ArrowRight, 
  Search, 
  Sliders, 
  Maximize2, 
  ShieldAlert, 
  Layers, 
  Eye,
  RotateCcw,
  Zap,
  Activity,
  Compass,
  DollarSign
} from 'lucide-react';

interface ReverseNetworkGraphProps {
  nodes: ReverseGraphNode[];
  edges: ReverseGraphEdge[];
  onSelectNodeInDatabase?: (nodeId: string) => void;
}

// Continuous Depth Color Scale (Continuity Gradient)
export const DEPTH_COLORS: Record<number, { bg: string; border: string; glow: string; text: string; hex: string }> = {
  0: { bg: 'bg-rose-950/80', border: 'border-rose-500', glow: 'rgba(244, 63, 94, 0.4)', text: 'text-rose-300', hex: '#f43f5e' }, // Sink
  1: { bg: 'bg-orange-950/80', border: 'border-orange-500', glow: 'rgba(249, 115, 22, 0.4)', text: 'text-orange-300', hex: '#f97316' }, // Mixer
  2: { bg: 'bg-amber-950/80', border: 'border-amber-500', glow: 'rgba(234, 179, 8, 0.4)', text: 'text-amber-300', hex: '#eab308' }, // Hawala
  3: { bg: 'bg-emerald-950/80', border: 'border-emerald-500', glow: 'rgba(16, 185, 129, 0.4)', text: 'text-emerald-300', hex: '#10b981' }, // Smurf
  4: { bg: 'bg-cyan-950/80', border: 'border-cyan-500', glow: 'rgba(6, 182, 212, 0.4)', text: 'text-cyan-300', hex: '#06b6d4' }, // Fiat Gateway
  5: { bg: 'bg-indigo-950/80', border: 'border-indigo-500', glow: 'rgba(99, 102, 241, 0.4)', text: 'text-indigo-300', hex: '#6366f1' }, // Proxy / ISP
  6: { bg: 'bg-purple-950/80', border: 'border-purple-500', glow: 'rgba(168, 85, 247, 0.4)', text: 'text-purple-300', hex: '#a855f7' }, // Origin Source
};

export const getDepthColor = (depth: number) => {
  const clamped = Math.min(Math.max(depth, 0), 6);
  return DEPTH_COLORS[clamped] || DEPTH_COLORS[6];
};

export const ReverseNetworkGraph: React.FC<ReverseNetworkGraphProps> = ({
  nodes,
  edges,
  onSelectNodeInDatabase,
}) => {
  // Find default sink node (depth 0 or terminal node)
  const defaultSink = nodes.find(n => n.depth === 0) || nodes[nodes.length - 1];
  
  const [selectedSinkId, setSelectedSinkId] = useState<string>(defaultSink ? defaultSink.id : (nodes[0]?.id || ''));
  const [inspectedNodeId, setInspectedNodeId] = useState<string | null>(null);
  const [traversalDirection, setTraversalDirection] = useState<'REVERSE' | 'FORWARD'>('REVERSE');
  const [layoutMode, setLayoutMode] = useState<'HIERARCHICAL' | 'CONCENTRIC'>('HIERARCHICAL');
  const [maxDepthFilter, setMaxDepthFilter] = useState<number>(5);
  const [minAmountFilter, setMinAmountFilter] = useState<number>(0);
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [showAnimation, setShowAnimation] = useState<boolean>(true);

  // Compute Active Reverse Traversal Path from selected sink
  const traversalResult: ReverseTraversalPath = useMemo(() => {
    if (!selectedSinkId || nodes.length === 0) {
      return {
        sinkId: '',
        paths: [],
        visitedNodeIds: new Set(),
        visitedEdgeIds: new Set(),
        totalUpstreamVolumeUsd: 0,
        maxDepth: 0,
        bottlenecks: [],
      };
    }
    return calculateReverseTraversal(selectedSinkId, nodes, edges);
  }, [selectedSinkId, nodes, edges]);

  // Filtered nodes & edges
  const filteredEdges = useMemo(() => {
    return edges.filter(e => {
      const matchAmount = e.amountUsd >= minAmountFilter;
      const matchTraversal = traversalResult.visitedEdgeIds.has(e.id);
      return matchAmount && (traversalDirection === 'FORWARD' || matchTraversal || traversalResult.visitedEdgeIds.size === 0);
    });
  }, [edges, minAmountFilter, traversalResult, traversalDirection]);

  // Position calculation for Hierarchical & Concentric Layouts
  const nodePositions = useMemo(() => {
    const pos: Record<string, { x: number; y: number; depth: number }> = {};
    const width = 880;
    const height = 480;
    const paddingX = 70;
    const paddingY = 50;

    if (layoutMode === 'HIERARCHICAL') {
      // Group nodes by depth
      const depthGroups: Record<number, ReverseGraphNode[]> = {};
      nodes.forEach(n => {
        const d = n.depth;
        if (!depthGroups[d]) depthGroups[d] = [];
        depthGroups[d].push(n);
      });

      const maxD = Math.max(...nodes.map(n => n.depth), 1);

      Object.entries(depthGroups).forEach(([depthStr, groupNodes]) => {
        const d = Number(depthStr);
        // Reverse layout: Depth 0 (Sink) on Right, Depth N (Origins) on Left
        const xPercent = 1 - (d / maxD);
        const x = paddingX + xPercent * (width - 2 * paddingX);

        groupNodes.forEach((node, idx) => {
          const ySpacing = (height - 2 * paddingY) / Math.max(groupNodes.length, 1);
          const y = paddingY + idx * ySpacing + ySpacing / 2;
          pos[node.id] = { x, y, depth: d };
        });
      });
    } else {
      // Concentric Rings: Center is Sink (Depth 0), Outer Rings are Upstream Sources
      const centerX = width / 2;
      const centerY = height / 2;
      const maxRadius = Math.min(width, height) / 2 - 40;

      const depthGroups: Record<number, ReverseGraphNode[]> = {};
      nodes.forEach(n => {
        const d = n.depth;
        if (!depthGroups[d]) depthGroups[d] = [];
        depthGroups[d].push(n);
      });

      const maxD = Math.max(...nodes.map(n => n.depth), 1);

      Object.entries(depthGroups).forEach(([depthStr, groupNodes]) => {
        const d = Number(depthStr);
        const radius = d === 0 ? 0 : (d / maxD) * maxRadius;

        groupNodes.forEach((node, idx) => {
          if (d === 0) {
            pos[node.id] = { x: centerX, y: centerY, depth: 0 };
          } else {
            const angle = (idx / groupNodes.length) * 2 * Math.PI - Math.PI / 2;
            const x = centerX + Math.cos(angle) * radius;
            const y = centerY + Math.sin(angle) * radius;
            pos[node.id] = { x, y, depth: d };
          }
        });
      });
    }

    return pos;
  }, [nodes, layoutMode]);

  const inspectedNode = nodes.find(n => n.id === inspectedNodeId) || nodes.find(n => n.id === selectedSinkId);

  return (
    <div className="space-y-4">
      {/* Top Header & Reverse Traversal Control Bar */}
      <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 shadow-lg flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <div className="p-2.5 rounded-lg bg-cyan-950/80 border border-cyan-800 text-cyan-400">
            <GitFork className="w-5 h-5 rotate-180" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h3 className="text-sm font-bold uppercase tracking-wider font-mono text-slate-100">
                Reverse Network Topology & Upstream Traversal Engine
              </h3>
              <span className="text-[10px] font-mono px-2 py-0.5 rounded bg-cyan-950 text-cyan-300 border border-cyan-800 font-bold">
                CONTINUOUS CHROMATIC DEPTH GRADIENT
              </span>
            </div>
            <p className="text-xs text-slate-400 font-mono">
              Backpropagate and identify upstream liquidity sources, smurfing pools, and proxy relays from any target sink.
            </p>
          </div>
        </div>

        {/* Action Controls */}
        <div className="flex items-center gap-2">
          <div className="flex items-center bg-slate-950 border border-slate-800 rounded-lg p-1 text-xs font-mono">
            <button
              onClick={() => setTraversalDirection('REVERSE')}
              className={`flex items-center gap-1 px-2.5 py-1 rounded cursor-pointer transition-all ${
                traversalDirection === 'REVERSE'
                  ? 'bg-cyan-900/70 text-cyan-200 font-bold shadow-sm'
                  : 'text-slate-400 hover:text-slate-200'
              }`}
              title="Trace backwards from Target Sink to Root Sources"
            >
              <ArrowLeft className="w-3.5 h-3.5" />
              <span>Reverse Traceback</span>
            </button>
            <button
              onClick={() => setTraversalDirection('FORWARD')}
              className={`flex items-center gap-1 px-2.5 py-1 rounded cursor-pointer transition-all ${
                traversalDirection === 'FORWARD'
                  ? 'bg-cyan-900/70 text-cyan-200 font-bold shadow-sm'
                  : 'text-slate-400 hover:text-slate-200'
              }`}
              title="Show Forward Ingress Liquidity Flow"
            >
              <ArrowRight className="w-3.5 h-3.5" />
              <span>Forward Ingress</span>
            </button>
          </div>

          <div className="flex items-center bg-slate-950 border border-slate-800 rounded-lg p-1 text-xs font-mono">
            <button
              onClick={() => setLayoutMode('HIERARCHICAL')}
              className={`px-2 py-1 rounded cursor-pointer transition-all ${
                layoutMode === 'HIERARCHICAL' ? 'bg-slate-800 text-slate-200 font-bold' : 'text-slate-400'
              }`}
            >
              Layered Tree
            </button>
            <button
              onClick={() => setLayoutMode('CONCENTRIC')}
              className={`px-2 py-1 rounded cursor-pointer transition-all ${
                layoutMode === 'CONCENTRIC' ? 'bg-slate-800 text-slate-200 font-bold' : 'text-slate-400'
              }`}
            >
              Concentric Rings
            </button>
          </div>

          <button
            onClick={() => setShowAnimation(!showAnimation)}
            className={`p-2 rounded-lg border text-xs font-mono transition-all cursor-pointer ${
              showAnimation
                ? 'bg-cyan-950 text-cyan-300 border-cyan-800'
                : 'bg-slate-950 text-slate-500 border-slate-800'
            }`}
            title="Toggle Flow Particle Pulses"
          >
            <Activity className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* Traversal Summary Bar & Filters */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
        {/* Metric 1: Selected Target Sink */}
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-3 shadow">
          <div className="text-[10px] font-mono text-slate-400 uppercase tracking-wider mb-1 flex items-center justify-between">
            <span>Root Focus Sink</span>
            <span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse" />
          </div>
          <select
            value={selectedSinkId}
            onChange={(e) => {
              setSelectedSinkId(e.target.value);
              setInspectedNodeId(e.target.value);
            }}
            className="w-full bg-slate-950 border border-slate-700 text-slate-200 text-xs font-mono rounded px-2 py-1 focus:outline-none focus:border-cyan-500"
          >
            {nodes.map(n => (
              <option key={n.id} value={n.id}>
                [{n.depth === 0 ? 'SINK' : `D${n.depth}`}] {n.label} ({n.jurisdiction})
              </option>
            ))}
          </select>
        </div>

        {/* Metric 2: Upstream Backpropagation Volume */}
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-3 shadow">
          <div className="text-[10px] font-mono text-slate-400 uppercase tracking-wider mb-1 flex items-center gap-1">
            <DollarSign className="w-3.5 h-3.5 text-emerald-400" />
            <span>Upstream Volume Trace</span>
          </div>
          <div className="text-lg font-bold font-mono text-emerald-400">
            ${traversalResult.totalUpstreamVolumeUsd.toLocaleString()} <span className="text-xs text-slate-400 font-normal">USD</span>
          </div>
          <div className="text-[10px] font-mono text-slate-400">
            Across {traversalResult.visitedNodeIds.size} ancestor nodes ({traversalResult.maxDepth} depth tiers)
          </div>
        </div>

        {/* Metric 3: Critical Bottlenecks */}
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-3 shadow">
          <div className="text-[10px] font-mono text-slate-400 uppercase tracking-wider mb-1 flex items-center gap-1">
            <ShieldAlert className="w-3.5 h-3.5 text-amber-400" />
            <span>Critical Cut-Set Bottlenecks</span>
          </div>
          <div className="text-lg font-bold font-mono text-amber-300">
            {traversalResult.bottlenecks.length} Intermediary Nodes
          </div>
          <div className="text-[10px] font-mono text-slate-400 truncate">
            {traversalResult.bottlenecks.join(', ') || 'No single-point cuts'}
          </div>
        </div>

        {/* Metric 4: Search & Depth Filter */}
        <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-3 shadow flex flex-col justify-between">
          <div className="flex items-center justify-between text-[10px] font-mono text-slate-400">
            <span>Traversal Depth Limit:</span>
            <span className="text-cyan-400 font-bold">{maxDepthFilter} Hops</span>
          </div>
          <input
            type="range"
            min="1"
            max="6"
            value={maxDepthFilter}
            onChange={(e) => setMaxDepthFilter(Number(e.target.value))}
            className="w-full accent-cyan-500 cursor-pointer h-1.5 bg-slate-950 rounded"
          />
          <div className="flex items-center justify-between text-[9px] font-mono text-slate-500">
            <span>1 (Immediate)</span>
            <span>6 (Deep Origin)</span>
          </div>
        </div>
      </div>

      {/* Main Canvas / SVG Reverse Graph Area */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
        {/* SVG Graph Viewport (3 Cols) */}
        <div className="lg:col-span-3 bg-slate-950 border border-slate-800 rounded-xl p-3 relative overflow-hidden shadow-2xl">
          {/* Depth Gradient Legend Bar */}
          <div className="flex items-center justify-between bg-slate-900/90 border border-slate-800 px-3 py-1.5 rounded-lg text-[10px] font-mono mb-2">
            <span className="text-slate-400 flex items-center gap-1">
              <Compass className="w-3 h-3 text-cyan-400" />
              <span>Depth & Continuity Color Gradient:</span>
            </span>
            <div className="flex items-center gap-2">
              <span className="flex items-center gap-1 text-rose-400"><span className="w-2 h-2 rounded-full bg-rose-500" /> D0 (Sink)</span>
              <span className="text-slate-600">&rarr;</span>
              <span className="flex items-center gap-1 text-orange-400"><span className="w-2 h-2 rounded-full bg-orange-500" /> D1 (Mixer)</span>
              <span className="text-slate-600">&rarr;</span>
              <span className="flex items-center gap-1 text-amber-400"><span className="w-2 h-2 rounded-full bg-amber-500" /> D2 (Hawala)</span>
              <span className="text-slate-600">&rarr;</span>
              <span className="flex items-center gap-1 text-emerald-400"><span className="w-2 h-2 rounded-full bg-emerald-500" /> D3 (Smurf)</span>
              <span className="text-slate-600">&rarr;</span>
              <span className="flex items-center gap-1 text-cyan-400"><span className="w-2 h-2 rounded-full bg-cyan-500" /> D4 (Gateway)</span>
              <span className="text-slate-600">&rarr;</span>
              <span className="flex items-center gap-1 text-indigo-400"><span className="w-2 h-2 rounded-full bg-indigo-500" /> D5 (Origin)</span>
            </div>
          </div>

          {/* SVG Canvas */}
          <div className="w-full h-[460px] relative bg-gradient-to-br from-slate-950 via-slate-900/40 to-slate-950 rounded-lg border border-slate-800/60 overflow-auto">
            <svg
              viewBox="0 0 880 480"
              className="w-full h-full min-w-[700px]"
              style={{ filter: 'drop-shadow(0 0 1px rgba(0,0,0,0.5))' }}
            >
              <defs>
                {/* Dynamic Linear Gradients for Continuous Edge Coloring */}
                {filteredEdges.map(edge => {
                  const sourceDepth = nodePositions[edge.source]?.depth ?? 3;
                  const targetDepth = nodePositions[edge.target]?.depth ?? 0;
                  const sourceColor = getDepthColor(sourceDepth).hex;
                  const targetColor = getDepthColor(targetDepth).hex;

                  return (
                    <linearGradient
                      key={`grad-${edge.id}`}
                      id={`edge-grad-${edge.id}`}
                      x1="0%"
                      y1="0%"
                      x2="100%"
                      y2="0%"
                    >
                      <stop offset="0%" stopColor={sourceColor} stopOpacity="0.8" />
                      <stop offset="100%" stopColor={targetColor} stopOpacity="0.9" />
                    </linearGradient>
                  );
                })}

                {/* Marker Arrows */}
                <marker
                  id="arrow-head"
                  markerWidth="8"
                  markerHeight="8"
                  refX="18"
                  refY="4"
                  orient="auto"
                >
                  <polygon points="0 0, 8 4, 0 8" fill="#38bdf8" />
                </marker>
                <marker
                  id="arrow-head-reverse"
                  markerWidth="8"
                  markerHeight="8"
                  refX="-10"
                  refY="4"
                  orient="auto"
                >
                  <polygon points="8 0, 0 4, 8 8" fill="#f43f5e" />
                </marker>
              </defs>

              {/* Background Grid Pattern */}
              <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(51, 65, 85, 0.15)" strokeWidth="1" />
              </pattern>
              <rect width="100%" height="100%" fill="url(#grid)" />

              {/* Draw Edges / Flows */}
              {filteredEdges.map(edge => {
                const src = nodePositions[edge.source];
                const dst = nodePositions[edge.target];
                if (!src || !dst) return null;

                const isPathActive = traversalResult.visitedEdgeIds.has(edge.id);
                const strokeWidth = isPathActive ? Math.min(Math.max(edge.amountUsd / 20000, 2.5), 6) : 1.5;
                const opacity = isPathActive ? 0.9 : 0.3;

                // Bezier curved connector
                const dx = dst.x - src.x;
                const dy = dst.y - src.y;
                const cx1 = src.x + dx * 0.5;
                const cy1 = src.y;
                const cx2 = dst.x - dx * 0.5;
                const cy2 = dst.y;
                const pathD = `M ${src.x} ${src.y} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${dst.x} ${dst.y}`;

                return (
                  <g key={edge.id} className="transition-all duration-300">
                    {/* Glowing Underlay */}
                    {isPathActive && (
                      <path
                        d={pathD}
                        fill="none"
                        stroke={`url(#edge-grad-${edge.id})`}
                        strokeWidth={strokeWidth + 4}
                        strokeOpacity="0.25"
                        strokeLinecap="round"
                      />
                    )}

                    {/* Main Edge Path */}
                    <path
                      d={pathD}
                      fill="none"
                      stroke={`url(#edge-grad-${edge.id})`}
                      strokeWidth={strokeWidth}
                      strokeOpacity={opacity}
                      strokeLinecap="round"
                      markerEnd={traversalDirection === 'FORWARD' ? 'url(#arrow-head)' : undefined}
                    />

                    {/* Flow Particle Animation */}
                    {showAnimation && isPathActive && (
                      <path
                        d={pathD}
                        fill="none"
                        stroke="#ffffff"
                        strokeWidth={2}
                        strokeDasharray="6, 12"
                        strokeOpacity="0.7"
                        className={traversalDirection === 'REVERSE' ? 'animate-pulse' : ''}
                      >
                        <animate
                          attributeName="stroke-dashoffset"
                          from={traversalDirection === 'REVERSE' ? "0" : "36"}
                          to={traversalDirection === 'REVERSE' ? "36" : "0"}
                          dur="1.8s"
                          repeatCount="indefinite"
                        />
                      </path>
                    )}

                    {/* Edge Label on Midpoint */}
                    <text
                      x={(src.x + dst.x) / 2}
                      y={(src.y + dst.y) / 2 - 6}
                      fill="#94a3b8"
                      fontSize="9"
                      fontFamily="monospace"
                      textAnchor="middle"
                      className="select-none bg-slate-950/80 px-1"
                    >
                      ${(edge.amountUsd / 1000).toFixed(0)}k {edge.asset}
                    </text>
                  </g>
                );
              })}

              {/* Draw Nodes */}
              {nodes.map(node => {
                const pos = nodePositions[node.id];
                if (!pos) return null;

                const isSink = node.depth === 0 || node.id === selectedSinkId;
                const isInspected = node.id === inspectedNodeId;
                const isVisited = traversalResult.visitedNodeIds.has(node.id);
                const isBottleneck = node.isBottleneck;
                const colorDef = getDepthColor(node.depth);

                const nodeRadius = isSink ? 22 : isBottleneck ? 19 : 16;

                return (
                  <g
                    key={node.id}
                    transform={`translate(${pos.x}, ${pos.y})`}
                    onClick={() => {
                      setInspectedNodeId(node.id);
                      if (node.depth === 0 || !selectedSinkId) {
                        setSelectedSinkId(node.id);
                      }
                    }}
                    className="cursor-pointer transition-transform hover:scale-110 select-none"
                  >
                    {/* Outer Glow Halo for Active Path & Bottleneck */}
                    {(isVisited || isInspected) && (
                      <circle
                        r={nodeRadius + 8}
                        fill="none"
                        stroke={colorDef.hex}
                        strokeWidth="2"
                        strokeOpacity="0.35"
                        strokeDasharray={isBottleneck ? "4, 4" : "none"}
                        className="animate-pulse"
                      />
                    )}

                    {/* Node Body Circle */}
                    <circle
                      r={nodeRadius}
                      fill="#0f172a"
                      stroke={colorDef.hex}
                      strokeWidth={isInspected ? 3.5 : isSink ? 3 : 2}
                      style={{ filter: `drop-shadow(0 0 6px ${colorDef.glow})` }}
                    />

                    {/* Inner Badge Glyph */}
                    <text
                      y="4"
                      textAnchor="middle"
                      fill="#f8fafc"
                      fontSize={isSink ? "11" : "9"}
                      fontWeight="bold"
                      fontFamily="monospace"
                    >
                      {isSink ? 'SINK' : `D${node.depth}`}
                    </text>

                    {/* Node Label Below */}
                    <text
                      y={nodeRadius + 14}
                      textAnchor="middle"
                      fill={isInspected ? "#38bdf8" : "#cbd5e1"}
                      fontSize="10"
                      fontWeight={isInspected ? "bold" : "normal"}
                      fontFamily="monospace"
                      className="drop-shadow"
                    >
                      {node.label.length > 18 ? node.label.slice(0, 16) + '...' : node.label}
                    </text>

                    {/* Jurisdiction Subtitle */}
                    <text
                      y={nodeRadius + 25}
                      textAnchor="middle"
                      fill="#64748b"
                      fontSize="8"
                      fontFamily="monospace"
                    >
                      {node.jurisdiction}
                    </text>

                    {/* Sanction Alert Badge if Applicable */}
                    {node.isSanctioned && (
                      <g transform={`translate(${nodeRadius - 4}, -${nodeRadius - 4})`}>
                        <circle r="6" fill="#ef4444" />
                        <text y="3" textAnchor="middle" fill="#fff" fontSize="8" fontWeight="bold">!</text>
                      </g>
                    )}
                  </g>
                );
              })}
            </svg>
          </div>
        </div>

        {/* Node Inspector Drawer & Upstream Breakdown (1 Col) */}
        <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 shadow-xl space-y-4">
          <div className="flex items-center justify-between border-b border-slate-800 pb-2">
            <div className="flex items-center gap-2">
              <Eye className="w-4 h-4 text-cyan-400" />
              <span className="text-xs font-bold uppercase font-mono text-slate-200">
                Entity Forensic Profile
              </span>
            </div>
            {inspectedNode && (
              <span className={`text-[10px] font-mono px-2 py-0.5 rounded border font-bold ${getDepthColor(inspectedNode.depth).bg} ${getDepthColor(inspectedNode.depth).text} ${getDepthColor(inspectedNode.depth).border}`}>
                DEPTH {inspectedNode.depth}
              </span>
            )}
          </div>

          {inspectedNode ? (
            <div className="space-y-3 font-mono text-xs">
              <div>
                <div className="text-[10px] text-slate-400">ENTITY ALIAS / LABEL</div>
                <div className="text-sm font-bold text-slate-100">{inspectedNode.label}</div>
                <div className="text-[10px] text-cyan-400 truncate">{inspectedNode.ipOrAddress}</div>
              </div>

              <div className="grid grid-cols-2 gap-2 bg-slate-950 p-2.5 rounded-lg border border-slate-800">
                <div>
                  <div className="text-[9px] text-slate-400">CLASSIFICATION</div>
                  <div className="text-[11px] font-bold text-slate-200 truncate">{inspectedNode.entityType}</div>
                </div>
                <div>
                  <div className="text-[9px] text-slate-400">JURISDICTION</div>
                  <div className="text-[11px] font-bold text-slate-200 truncate">{inspectedNode.jurisdiction}</div>
                </div>
                <div>
                  <div className="text-[9px] text-slate-400">INFLOW VOLUME</div>
                  <div className="text-[11px] font-bold text-emerald-400">${inspectedNode.totalInflowUsd.toLocaleString()}</div>
                </div>
                <div>
                  <div className="text-[9px] text-slate-400">OUTFLOW VOLUME</div>
                  <div className="text-[11px] font-bold text-amber-400">${inspectedNode.totalOutflowUsd.toLocaleString()}</div>
                </div>
              </div>

              {/* Sanctions & Risk Status */}
              <div className="space-y-1.5">
                <div className="flex items-center justify-between text-[11px]">
                  <span className="text-slate-400">Threat / AML Risk Score:</span>
                  <span className={`font-bold ${inspectedNode.riskScore >= 80 ? 'text-rose-400' : 'text-amber-400'}`}>
                    {inspectedNode.riskScore}/100
                  </span>
                </div>
                <div className="w-full bg-slate-950 rounded-full h-1.5 border border-slate-800">
                  <div
                    className={`h-1.5 rounded-full ${inspectedNode.riskScore >= 80 ? 'bg-rose-500' : 'bg-amber-500'}`}
                    style={{ width: `${inspectedNode.riskScore}%` }}
                  />
                </div>
              </div>

              {inspectedNode.isSanctioned && (
                <div className="p-2 rounded bg-rose-950/80 border border-rose-800 text-[10px] text-rose-300 flex items-center gap-1.5">
                  <ShieldAlert className="w-4 h-4 text-rose-400 shrink-0" />
                  <span>Flagged on Specially Designated Global Terrorist (SDGT) Sanctions List.</span>
                </div>
              )}

              {inspectedNode.isBottleneck && (
                <div className="p-2 rounded bg-amber-950/80 border border-amber-800 text-[10px] text-amber-300 flex items-center gap-1.5">
                  <Zap className="w-4 h-4 text-amber-400 shrink-0" />
                  <span>Topological Cut-Set: Critical liquidity bottleneck for this operation.</span>
                </div>
              )}

              {/* Query in SQL Database button */}
              <button
                onClick={() => {
                  if (onSelectNodeInDatabase) {
                    onSelectNodeInDatabase(inspectedNode.id);
                  }
                }}
                className="w-full bg-cyan-900/50 hover:bg-cyan-800 text-cyan-200 border border-cyan-700 py-2 rounded-lg text-xs font-bold transition-all shadow cursor-pointer flex items-center justify-center gap-1.5"
              >
                <Layers className="w-3.5 h-3.5" />
                <span>Query in Relational SQL Studio</span>
              </button>
            </div>
          ) : (
            <div className="p-6 text-center text-slate-500 text-xs font-mono">
              Click on any node in the canvas above to inspect details and trace ancestors.
            </div>
          )}
        </div>
      </div>
    </div>
  );
};