frontend/src/components/layout/Breadcrumb.tsx

import React from "react";
import { ChevronRight } from "lucide-react";
import { useNavigation, BreadcrumbItem } from "@/context/NavigationContext";
import { useAgentGraph } from "@/context/AgentGraphContext";

interface BreadcrumbProps {
  items?: BreadcrumbItem[];
  className?: string;
}

export function Breadcrumb({ items, className = "" }: BreadcrumbProps) {
  const navigation = useNavigation();
  const { actions } = useAgentGraph();
  const breadcrumbs = items || navigation.state.breadcrumbs;

  if (breadcrumbs.length === 0) {
    return null;
  }

  const handleBreadcrumbClick = (item: BreadcrumbItem) => {
    if (item.path && !item.active) {
      // Navigate based on the path
      switch (item.path) {
        case "welcome":
          actions.setActiveView("welcome");
          break;
        case "traces":
          actions.setActiveView("traces");
          break;
        case "trace-kg":
          actions.setActiveView("trace-kg");
          break;
        case "kg-visualizer":
          actions.setActiveView("kg-visualizer");
          break;
        case "advanced-processing":
          actions.setActiveView("advanced-processing");
          break;
        case "trace-editor":
          actions.setActiveView("trace-editor");
          break;
        case "temporal-visualizer":
          actions.setActiveView("temporal-visualizer");
          break;
        case "connections":
          actions.setActiveView("connections");
          break;
        case "upload":
          actions.setActiveView("upload");
          break;
        default:
          console.log("Navigate to:", item.path);
      }
    }
  };

  return (
    <nav
      className={`flex items-center space-x-1 text-xs text-muted-foreground ${className}`}
    >
      {breadcrumbs.map((item, index) => (
        <div key={index} className="flex items-center">
          {index > 0 && (
            <ChevronRight className="h-3 w-3 mx-1.5 text-muted-foreground/40" />
          )}
          <span
            className={`px-2 py-1 rounded-md transition-colors ${
              item.active || index === breadcrumbs.length - 1
                ? "text-foreground font-medium bg-muted/50"
                : "hover:text-foreground hover:bg-muted/30 cursor-pointer"
            }`}
            onClick={() => handleBreadcrumbClick(item)}
          >
            {item.label}
          </span>
        </div>
      ))}
    </nav>
  );
}