frontend/src/components/shared/GraphLegend.tsx

import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Info } from "lucide-react";
import { getNodeIconWithSize } from "@/lib/node-icons";

interface LegendItem {
  type: string;
  color: string;
}

const nodeTypes: LegendItem[] = [
  { type: "Input", color: "#8b5cf6" }, // Left side
  { type: "Task", color: "#3b82f6" }, // Left-center
  { type: "Agent", color: "#ff6b6b" }, // Center
  { type: "Tool", color: "#10b981" }, // Right-center
  { type: "Output", color: "#f59e0b" }, // Right side
  { type: "Human", color: "#ec4899" }, // Supervisor (top)
];



interface GraphLegendProps {
  className?: string;
  containerBounds?: { width: number; height: number };
}

export function GraphLegend({ className = "" }: GraphLegendProps) {
  return (
    <div
      className={`absolute top-4 left-4 z-40 pointer-events-none ${className}`}
    >
      <Card className="w-48 shadow-md border bg-white/95 pointer-events-auto">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 text-sm">
            <Info className="h-4 w-4 text-primary" />
            Graph Legend
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-xs pt-0">
          {/* Node Types */}
          <div>
            <h5 className="font-medium mb-1">Nodes</h5>
            <div className="text-xs text-muted-foreground mb-2 italic">
              Workflow: Left → Right
            </div>
            <div className="grid grid-cols-2 gap-1">
              {nodeTypes.map((item) => (
                <div key={item.type} className="flex items-center gap-1.5">
                  <img
                    src={getNodeIconWithSize(item.type, 20)}
                    alt={item.type}
                    className="w-5 h-5 flex-shrink-0"
                  />
                  <span className="text-xs truncate">{item.type}</span>
                </div>
              ))}
            </div>
          </div>



          {/* Highlight Zones */}
          <div>
            <h5 className="font-medium mb-1">Zones</h5>
            <div className="space-y-0.5">
              <div className="flex items-center gap-1.5">
                <div className="w-3 h-2 flex-shrink-0 rounded-sm bg-green-500/20 border border-green-500/30" />
                <span className="text-xs">Main Flow</span>
              </div>
              <div className="flex items-center gap-1.5">
                <div className="w-3 h-2 flex-shrink-0 rounded-sm bg-orange-500/20 border border-orange-500/30 border-dashed" />
                <span className="text-xs">Isolated</span>
              </div>
              <div className="flex items-center gap-1.5">
                <div className="w-3 h-2 flex-shrink-0 rounded-sm bg-red-500/20 border border-red-600/50" />
                <span className="text-xs">Failures</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}