frontend/src/lib/node-icons.ts

/**
 * Ultra-simple, single-line SVG designs for reliable rendering
 */
const iconSVGs: Record<string, string> = {
  Bot: `<circle cx="12" cy="12" r="10" fill="white"/><rect x="8" y="6" width="8" height="6" rx="1" fill="#ef4444"/><circle cx="10" cy="8" r="0.8" fill="white"/><circle cx="14" cy="8" r="0.8" fill="white"/><rect x="9" y="10" width="6" height="1" fill="white"/><rect x="7" y="13" width="2" height="4" fill="#ef4444"/><rect x="15" y="13" width="2" height="4" fill="#ef4444"/>`,
  User: `<circle cx="12" cy="12" r="10" fill="white"/><circle cx="12" cy="8" r="2.5" fill="#ec4899"/><rect x="8.5" y="12" width="7" height="6" rx="1" fill="#ec4899"/>`,
  Wrench: `<circle cx="12" cy="12" r="10" fill="white"/><circle cx="12" cy="12" r="5" fill="#10b981"/><circle cx="12" cy="12" r="2" fill="white"/><rect x="10" y="5" width="4" height="3" rx="1" fill="#10b981"/><rect x="10" y="16" width="4" height="3" rx="1" fill="#10b981"/><rect x="5" y="10" width="3" height="4" rx="1" fill="#10b981"/><rect x="16" y="10" width="3" height="4" rx="1" fill="#10b981"/>`,
  FileText: `<circle cx="12" cy="12" r="10" fill="white"/><rect x="7" y="7" width="10" height="10" rx="1" fill="#3b82f6"/><polyline points="9,12 11,14 15,10" stroke="white" stroke-width="2" fill="none"/>`,
  Upload: `<circle cx="12" cy="12" r="10" fill="white"/><path d="M12,8 L16,8 L16,16 L12,16" fill="none" stroke="#8b5cf6" stroke-width="2"/><rect x="7" y="11" width="5" height="2" fill="#8b5cf6"/><polygon points="14,12 9,9 9,15" fill="#8b5cf6"/>`,
  Download: `<circle cx="12" cy="12" r="10" fill="white"/><path d="M12,8 L8,8 L8,16 L12,16" fill="none" stroke="#f59e0b" stroke-width="2"/><rect x="11" y="11" width="5" height="2" fill="#f59e0b"/><polygon points="18,12 13,9 13,15" fill="#f59e0b"/>`,
  Users: `<circle cx="9" cy="8" r="2" fill="#10b981"/><circle cx="15" cy="8" r="2" fill="#10b981"/><rect x="6" y="12" width="6" height="4" rx="1" fill="#10b981"/><rect x="12" y="12" width="6" height="4" rx="1" fill="#10b981"/>`,
  Circle: `<circle cx="12" cy="12" r="6" fill="#06b6d4"/>`,
};

/**
 * Convert an icon name to an SVG data URI for use in Cytoscape
 */
function createIconDataUri(iconName: string, size: number = 48): string {
  const iconContent = iconSVGs[iconName] || iconSVGs.Circle;

  // Create compact SVG without extra whitespace
  const svg = `<svg width="${size}" height="${size}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${iconContent}</svg>`;

  // Use URL encoding instead of base64 for better compatibility
  const dataUri = `data:image/svg+xml,${encodeURIComponent(svg)}`;

  // Debug logging to help diagnose issues
  console.log(`🎨 Icon ${iconName}:`, {
    svgLength: svg.length,
    dataUriLength: dataUri.length,
    dataUriPreview: dataUri.substring(0, 80) + "...",
  });

  return dataUri;
}

/**
 * Get the appropriate icon for a node type
 */
export function getNodeIcon(type?: string): string {
  const iconMap: Record<string, string> = {
    // Primary types
    Agent: "Bot",
    Human: "User",
    Tool: "Wrench",

    // Task/IO types
    Task: "FileText",
    Input: "Upload",
    Output: "Download",

    // Group types
    Entity: "Circle",
    Person: "User",
    Organization: "Users",

    // Fallback
    Unknown: "Circle",
  };

  const iconName = iconMap[type || "Unknown"] || "Circle";
  return createIconDataUri(iconName, 48);
}

/**
 * Get node icon with custom size
 */
export function getNodeIconWithSize(type?: string, size: number = 48): string {
  const iconMap: Record<string, string> = {
    Agent: "Bot",
    Human: "User",
    Tool: "Wrench",
    Task: "FileText",
    Input: "Upload",
    Output: "Download",
    Entity: "Circle",
    Person: "User",
    Organization: "Users",
    Unknown: "Circle",
  };

  const iconName = iconMap[type || "Unknown"] || "Circle";
  return createIconDataUri(iconName, size);
}