"use client";

import { useState } from "react";
import Link from "next/link";
import {
  ArrowLeft,
  CheckCircle,
  XCircle,
  Activity,
  Clock,
  Calendar,
  GitBranch,
  Layers,
  Zap,
  ChevronDown,
  ChevronRight,
  FileJson,
  DollarSign,
  AlertCircle,
  Terminal,
  Cpu,
  FileEdit,
  Search,
  Eye,
  FolderOpen,
  FilePlus,
} from "lucide-react";
import { cn, formatDuration, formatRelativeTime } from "@/lib/utils";
import { DecisionTree } from "./decision-tree";
import { TraceAnalytics } from "./trace-analytics";

type TraceStatus = "RUNNING" | "COMPLETED" | "ERROR";
type TabType = "tree" | "analytics" | "decisions" | "spans" | "events" | "agent";

interface DecisionPoint {
  id: string;
  type: string;
  chosenAction: string;
  alternatives: string[];
  reasoning: string | null;
  contextSnapshot: Record<string, unknown> | null;
  confidence: number | null;
  timestamp: string;
  parentSpanId?: string | null;
}

interface Span {
  id: string;
  name: string;
  type: string;
  status: "OK" | "ERROR" | "CANCELLED";
  startedAt: string;
  endedAt: string | null;
  durationMs: number | null;
  input: unknown;
  output: unknown;
  metadata: Record<string, unknown>;
  parentSpanId?: string | null;
}

interface Event {
  id: string;
  type: string;
  name: string;
  timestamp: string;
  metadata: Record<string, unknown>;
  spanId?: string | null;
}

interface Trace {
  id: string;
  name: string;
  status: TraceStatus;
  startedAt: string;
  endedAt: string | null;
  durationMs: number | null;
  tags: string[];
  metadata: Record<string, unknown>;
  costUsd: number | null;
  totalTokens: number | null;
  totalCost: number | null;
}

interface TraceDetailProps {
  trace: Trace;
  decisionPoints: DecisionPoint[];
  spans: Span[];
  events: Event[];
}

const statusConfig: Record<TraceStatus, { label: string; icon: React.ComponentType<{ className?: string }>; color: string; bgColor: string }> = {
  RUNNING: {
    label: "Running",
    icon: Activity,
    color: "text-amber-400",
    bgColor: "bg-amber-500/10 border-amber-500/20",
  },
  COMPLETED: {
    label: "Completed",
    icon: CheckCircle,
    color: "text-emerald-400",
    bgColor: "bg-emerald-500/10 border-emerald-500/20",
  },
  ERROR: {
    label: "Error",
    icon: XCircle,
    color: "text-red-400",
    bgColor: "bg-red-500/10 border-red-500/20",
  },
};

const decisionTypeColors: Record<string, { bg: string; text: string; border: string }> = {
  TOOL_SELECTION: {
    bg: "bg-blue-500/10",
    text: "text-blue-400",
    border: "border-blue-500/20",
  },
  PATH_SELECTION: {
    bg: "bg-purple-500/10",
    text: "text-purple-400",
    border: "border-purple-500/20",
  },
  RESPONSE_FORMULATION: {
    bg: "bg-emerald-500/10",
    text: "text-emerald-400",
    border: "border-emerald-500/20",
  },
  DEFAULT: {
    bg: "bg-neutral-700/30",
    text: "text-neutral-400",
    border: "border-neutral-600/30",
  },
};

const spanStatusColors: Record<string, string> = {
  OK: "text-emerald-400 bg-emerald-500/10 border-emerald-500/20",
  ERROR: "text-red-400 bg-red-500/10 border-red-500/20",
  CANCELLED: "text-amber-400 bg-amber-500/10 border-amber-500/20",
};

const eventTypeColors: Record<string, { icon: React.ComponentType<{ className?: string }>; color: string }> = {
  LLM_CALL: { icon: Zap, color: "text-purple-400" },
  TOOL_CALL: { icon: Terminal, color: "text-blue-400" },
  ERROR: { icon: AlertCircle, color: "text-red-400" },
  DEFAULT: { icon: Activity, color: "text-neutral-400" },
};

export function TraceDetail({
  trace,
  decisionPoints,
  spans,
  events,
}: TraceDetailProps) {
  const [activeTab, setActiveTab] = useState<TabType>("tree");
  const status = statusConfig[trace.status];
  const StatusIcon = status.icon;

  return (
    <div className="space-y-6">
      {/* Back Button */}
      <Link
        href="/dashboard"
        className="inline-flex items-center gap-2 text-neutral-400 hover:text-emerald-400 transition-colors"
      >
        <ArrowLeft className="w-4 h-4" />
        <span>Back to traces</span>
      </Link>

      {/* Header */}
      <div className="p-6 bg-neutral-900 border border-neutral-800 rounded-xl">
        <div className="flex flex-col lg:flex-row lg:items-start gap-6">
          {/* Title and Status */}
          <div className="flex-1">
            <div className="flex items-center gap-3 mb-3">
              <h1 className="text-2xl font-bold text-neutral-100">
                {trace.name}
              </h1>
              <div
                className={cn(
                  "flex items-center gap-1.5 px-3 py-1.5 rounded-full border",
                  status.bgColor,
                  status.color
                )}
              >
                <StatusIcon className="w-4 h-4" />
                <span className="text-sm font-medium">{status.label}</span>
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-4 text-sm text-neutral-400">
              <span className="flex items-center gap-1.5">
                <Calendar className="w-4 h-4" />
                Started {formatRelativeTime(trace.startedAt)}
              </span>
              <span className="flex items-center gap-1.5">
                <Clock className="w-4 h-4" />
                Duration {formatDuration(trace.durationMs)}
              </span>
              {trace.costUsd !== null && (
                <span className="flex items-center gap-1.5">
                  <DollarSign className="w-4 h-4" />
                  Cost ${trace.costUsd.toFixed(4)}
                </span>
              )}
            </div>

            {trace.tags.length > 0 && (
              <div className="flex items-center gap-2 mt-4">
                {trace.tags.map((tag) => (
                  <span
                    key={tag}
                    className="px-2.5 py-1 rounded-md bg-neutral-800 text-neutral-300 text-xs"
                  >
                    {tag}
                  </span>
                ))}
              </div>
            )}
          </div>

          {/* Stats */}
          <div className="flex items-center gap-6">
            <div className="text-center">
              <div className="flex items-center justify-center gap-2 mb-1">
                <GitBranch className="w-4 h-4 text-emerald-400" />
                <span className="text-2xl font-bold text-neutral-100">
                  {decisionPoints.length}
                </span>
              </div>
              <span className="text-xs text-neutral-500">Decisions</span>
            </div>
            <div className="w-px h-12 bg-neutral-800" />
            <div className="text-center">
              <div className="flex items-center justify-center gap-2 mb-1">
                <Layers className="w-4 h-4 text-blue-400" />
                <span className="text-2xl font-bold text-neutral-100">
                  {spans.length}
                </span>
              </div>
              <span className="text-xs text-neutral-500">Spans</span>
            </div>
            <div className="w-px h-12 bg-neutral-800" />
            <div className="text-center">
              <div className="flex items-center justify-center gap-2 mb-1">
                <Activity className="w-4 h-4 text-purple-400" />
                <span className="text-2xl font-bold text-neutral-100">
                  {events.length}
                </span>
              </div>
              <span className="text-xs text-neutral-500">Events</span>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="border-b border-neutral-800">
        <div className="flex gap-1">
          <TabButton
            active={activeTab === "tree"}
            onClick={() => setActiveTab("tree")}
            icon={GitBranch}
            label="Tree"
          />
          <TabButton
            active={activeTab === "analytics"}
            onClick={() => setActiveTab("analytics")}
            icon={Activity}
            label="Analytics"
          />
          <TabButton
            active={activeTab === "decisions"}
            onClick={() => setActiveTab("decisions")}
            icon={GitBranch}
            label={`Decisions (${decisionPoints.length})`}
          />
          <TabButton
            active={activeTab === "spans"}
            onClick={() => setActiveTab("spans")}
            icon={Layers}
            label={`Spans (${spans.length})`}
          />
          <TabButton
            active={activeTab === "events"}
            onClick={() => setActiveTab("events")}
            icon={Activity}
            label={`Events (${events.length})`}
          />
          {trace.tags.includes("opencode") && (
            <TabButton
              active={activeTab === "agent"}
              onClick={() => setActiveTab("agent")}
              icon={Cpu}
              label="Agent"
            />
          )}
        </div>
      </div>

      {/* Tab Content */}
      <div className="min-h-[600px]">
        {activeTab === "tree" && (
          <DecisionTree
            trace={trace}
            spans={spans}
            decisionPoints={decisionPoints}
            events={events}
          />
        )}
        {activeTab === "analytics" && (
          <TraceAnalytics
            trace={trace}
            spans={spans}
            decisionPoints={decisionPoints}
            events={events}
          />
        )}
        {activeTab === "decisions" && (
          <DecisionsTab decisionPoints={decisionPoints} />
        )}
        {activeTab === "spans" && <SpansTab spans={spans} />}
        {activeTab === "events" && <EventsTab events={events} />}
        {activeTab === "agent" && (
          <CodingAgentTab spans={spans} events={events} />
        )}
      </div>
    </div>
  );
}

function TabButton({
  active,
  onClick,
  icon: Icon,
  label,
}: {
  active: boolean;
  onClick: () => void;
  icon: React.ComponentType<{ className?: string }>;
  label: string;
}) {
  return (
    <button
      onClick={onClick}
      className={cn(
        "flex items-center gap-2 px-4 py-3 text-sm font-medium transition-all border-b-2 -mb-px",
        active
          ? "text-emerald-400 border-emerald-400"
          : "text-neutral-400 border-transparent hover:text-neutral-200 hover:border-neutral-700"
      )}
    >
      <Icon className="w-4 h-4" />
      {label}
    </button>
  );
}

function DecisionsTab({ decisionPoints }: { decisionPoints: DecisionPoint[] }) {
  if (decisionPoints.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-neutral-500">No decision points recorded</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {decisionPoints.map((decision) => (
        <DecisionCard key={decision.id} decision={decision} />
      ))}
    </div>
  );
}

function DecisionCard({ decision }: { decision: DecisionPoint }) {
  const [expanded, setExpanded] = useState(false);
  const colors = decisionTypeColors[decision.type] || decisionTypeColors.DEFAULT;

  return (
    <div className="p-5 bg-neutral-900 border border-neutral-800 rounded-xl hover:border-neutral-700 transition-colors">
      <div className="flex items-start gap-4">
        <div
          className={cn(
            "px-2.5 py-1 rounded-md border text-xs font-medium uppercase tracking-wide",
            colors.bg,
            colors.text,
            colors.border
          )}
        >
          {decision.type}
        </div>
        <div className="flex-1">
          <h3 className="font-semibold text-neutral-100 mb-1">
            {decision.chosenAction}
          </h3>
          <p className="text-sm text-neutral-500">
            {formatRelativeTime(decision.timestamp)}
          </p>
        </div>
        {decision.confidence !== null && (
          <div className="text-right">
            <span className="text-xs text-neutral-500">Confidence</span>
            <p className="font-semibold text-emerald-400">
              {Math.round(decision.confidence * 100)}%
            </p>
          </div>
        )}
      </div>

      {decision.reasoning && (
        <div className="mt-4 p-4 bg-neutral-800/50 border-l-2 border-emerald-500/50 rounded-r-lg">
          <p className="text-sm text-neutral-300 italic">
            &ldquo;{decision.reasoning}&rdquo;
          </p>
        </div>
      )}

      {decision.alternatives.length > 0 && (
        <div className="mt-4">
          <button
            onClick={() => setExpanded(!expanded)}
            className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
          >
            {expanded ? (
              <ChevronDown className="w-4 h-4" />
            ) : (
              <ChevronRight className="w-4 h-4" />
            )}
            {decision.alternatives.length} alternative
            {decision.alternatives.length !== 1 ? "s" : ""} considered
          </button>

          {expanded && (
            <div className="mt-3 space-y-2">
              {decision.alternatives.map((alt, idx) => (
                <div
                  key={idx}
                  className="flex items-center gap-2 px-3 py-2 bg-neutral-800/50 rounded-lg text-sm text-neutral-400"
                >
                  <span className="text-neutral-600">#{idx + 1}</span>
                  {alt}
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {decision.contextSnapshot && Object.keys(decision.contextSnapshot).length > 0 && (
        <div className="mt-4 pt-4 border-t border-neutral-800">
          <details className="group">
            <summary className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-200 cursor-pointer transition-colors">
              <FileJson className="w-4 h-4" />
              <span>Context snapshot</span>
              <ChevronRight className="w-4 h-4 group-open:rotate-90 transition-transform" />
            </summary>
            <pre className="mt-3 p-4 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300">
              {JSON.stringify(decision.contextSnapshot, null, 2)}
            </pre>
          </details>
        </div>
      )}
    </div>
  );
}

function SpansTab({ spans }: { spans: Span[] }) {
  if (spans.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-neutral-500">No spans recorded</p>
      </div>
    );
  }

  const maxDuration = Math.max(...spans.map((s) => s.durationMs || 0));

  return (
    <div className="space-y-3">
      {spans.map((span) => (
        <SpanItem key={span.id} span={span} maxDuration={maxDuration} />
      ))}
    </div>
  );
}

function SpanItem({ span, maxDuration }: { span: Span; maxDuration: number }) {
  const [expanded, setExpanded] = useState(false);
  const statusColor = spanStatusColors[span.status] || spanStatusColors.CANCELLED;
  const durationPercent = maxDuration > 0 ? ((span.durationMs || 0) / maxDuration) * 100 : 0;

  return (
    <div className="p-4 bg-neutral-900 border border-neutral-800 rounded-xl hover:border-neutral-700 transition-colors">
      <button
        onClick={() => setExpanded(!expanded)}
        className="w-full flex items-center gap-4"
      >
        <div className={cn("px-2 py-1 rounded text-xs font-medium border", statusColor)}>
          {span.status}
        </div>
        <div className="flex-1 text-left">
          <h4 className="font-medium text-neutral-100">{span.name}</h4>
          <p className="text-xs text-neutral-500">{span.type}</p>
        </div>
        <div className="flex items-center gap-4">
          <div className="w-32 h-2 bg-neutral-800 rounded-full overflow-hidden">
            <div
              className="h-full bg-emerald-500 rounded-full"
              style={{ width: `${durationPercent}%` }}
            />
          </div>
          <span className="text-sm text-neutral-400 w-16 text-right">
            {formatDuration(span.durationMs)}
          </span>
          {expanded ? (
            <ChevronDown className="w-5 h-5 text-neutral-500" />
          ) : (
            <ChevronRight className="w-5 h-5 text-neutral-500" />
          )}
        </div>
      </button>

      {expanded && (
        <div className="mt-4 pt-4 border-t border-neutral-800 space-y-4">
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <h5 className="text-xs font-medium text-neutral-500 mb-2">Input</h5>
              <pre className="p-3 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300">
                {JSON.stringify(span.input, null, 2)}
              </pre>
            </div>
            <div>
              <h5 className="text-xs font-medium text-neutral-500 mb-2">Output</h5>
              {span.output === null || span.output === undefined || span.output === "" ? (
                <p className="text-sm text-neutral-500 italic">No output recorded</p>
              ) : (
                <pre className="p-3 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300">
                  {JSON.stringify(span.output, null, 2)}
                </pre>
              )}
            </div>
          </div>
          {Object.entries(span.metadata).some(([, v]) => v !== null && v !== undefined) && (
            <div>
              <h5 className="text-xs font-medium text-neutral-500 mb-2">Metadata</h5>
              <pre className="p-3 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300">
                {JSON.stringify(
                  Object.fromEntries(Object.entries(span.metadata).filter(([, v]) => v !== null && v !== undefined)),
                  null,
                  2
                )}
              </pre>
            </div>
          )}
          <details className="group">
            <summary className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-200 cursor-pointer transition-colors">
              <FileJson className="w-4 h-4" />
              <span>Raw JSON</span>
              <ChevronRight className="w-4 h-4 group-open:rotate-90 transition-transform" />
            </summary>
            <pre className="mt-3 p-4 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300 max-h-96 overflow-y-auto">
              {JSON.stringify(span, null, 2)}
            </pre>
          </details>
        </div>
      )}
    </div>
  );
}

function EventItem({ event }: { event: Event }) {
  const [expanded, setExpanded] = useState(false);
  const { icon: Icon, color } = eventTypeColors[event.type] || eventTypeColors.DEFAULT;
  const hasMetadata = event.metadata && Object.entries(event.metadata).some(([, v]) => v !== null && v !== undefined);

  return (
    <div className="bg-neutral-900 border border-neutral-800 rounded-xl hover:border-neutral-700 transition-colors">
      <button
        onClick={() => setExpanded(!expanded)}
        className="w-full flex items-center gap-4 p-4"
      >
        <div className={cn("p-2 rounded-lg bg-neutral-800", color)}>
          <Icon className="w-4 h-4" />
        </div>
        <div className="flex-1 text-left">
          <h4 className="font-medium text-neutral-100">{event.name}</h4>
          <p className="text-xs text-neutral-500">{event.type}</p>
        </div>
        <span className="text-sm text-neutral-400">
          {formatRelativeTime(event.timestamp)}
        </span>
        {hasMetadata && (
          expanded ? (
            <ChevronDown className="w-5 h-5 text-neutral-500" />
          ) : (
            <ChevronRight className="w-5 h-5 text-neutral-500" />
          )
        )}
      </button>
      {expanded && hasMetadata && (
        <div className="px-4 pb-4 pt-0 border-t border-neutral-800">
          <pre className="mt-3 p-3 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300 max-h-64 overflow-y-auto">
            {JSON.stringify(event.metadata, null, 2)}
          </pre>
        </div>
      )}
    </div>
  );
}

function EventsTab({ events }: { events: Event[] }) {
  if (events.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-neutral-500">No events recorded</p>
      </div>
    );
  }

  return (
    <div className="space-y-2">
      {events.map((event) => (
        <EventItem key={event.id} event={event} />
      ))}
    </div>
  );
}

const toolCategoryColors: Record<string, { bar: string; label: string }> = {
  file: { bar: "bg-blue-500", label: "text-blue-400" },
  search: { bar: "bg-purple-500", label: "text-purple-400" },
  shell: { bar: "bg-amber-500", label: "text-amber-400" },
  lsp: { bar: "bg-emerald-500", label: "text-emerald-400" },
  other: { bar: "bg-neutral-500", label: "text-neutral-400" },
};

function getToolCategory(toolName: string): string {
  const lower = toolName.toLowerCase();
  if (["read", "write", "edit", "glob", "file"].some((k) => lower.includes(k))) return "file";
  if (["grep", "search", "find"].some((k) => lower.includes(k))) return "search";
  if (["bash", "shell", "terminal", "exec"].some((k) => lower.includes(k))) return "shell";
  if (["lsp", "diagnostics", "definition", "references", "symbols", "rename"].some((k) => lower.includes(k))) return "lsp";
  return "other";
}

function truncateFilePath(filePath: string): string {
  const segments = filePath.replace(/\\/g, "/").split("/").filter(Boolean);
  if (segments.length <= 3) return segments.join("/");
  return ".../" + segments.slice(-3).join("/");
}

type FileInteractionKind = "read" | "edit" | "create";

interface FileInteraction {
  kind: FileInteractionKind;
  filePath: string;
  timestamp: string;
  source: string;
}

function getFileInteractionIcon(kind: FileInteractionKind) {
  switch (kind) {
    case "read":
      return Eye;
    case "edit":
      return FileEdit;
    case "create":
      return FilePlus;
  }
}

function getFileInteractionColor(kind: FileInteractionKind): string {
  switch (kind) {
    case "read":
      return "text-blue-400 bg-blue-500/10 border-blue-500/20";
    case "edit":
      return "text-amber-400 bg-amber-500/10 border-amber-500/20";
    case "create":
      return "text-emerald-400 bg-emerald-500/10 border-emerald-500/20";
  }
}

function CodingAgentTab({ spans, events }: { spans: Span[]; events: Event[] }) {
  const toolCallSpans = spans.filter((s) => s.type === "TOOL_CALL");

  const toolCounts: Record<string, number> = {};
  for (const span of toolCallSpans) {
    toolCounts[span.name] = (toolCounts[span.name] || 0) + 1;
  }

  const sortedTools = Object.entries(toolCounts).sort((a, b) => b[1] - a[1]);
  const maxToolCount = sortedTools.length > 0 ? sortedTools[0][1] : 0;

  const fileInteractions: FileInteraction[] = [];

  for (const event of events) {
    if (event.name === "file.edited" && event.metadata.filePath) {
      fileInteractions.push({
        kind: "edit",
        filePath: String(event.metadata.filePath),
        timestamp: event.timestamp,
        source: "event",
      });
    }
  }

  const fileToolPatterns: Record<string, FileInteractionKind> = {
    read: "read",
    glob: "read",
    grep: "read",
    edit: "edit",
    write: "create",
  };

  for (const span of toolCallSpans) {
    const lower = span.name.toLowerCase();
    for (const [pattern, kind] of Object.entries(fileToolPatterns)) {
      if (lower.includes(pattern)) {
        let filePath = "";
        if (span.metadata.filePath) {
          filePath = String(span.metadata.filePath);
        } else if (span.input && typeof span.input === "object" && span.input !== null) {
          const inputObj = span.input as Record<string, unknown>;
          if (inputObj.filePath) filePath = String(inputObj.filePath);
          else if (inputObj.path) filePath = String(inputObj.path);
          else if (inputObj.pattern) filePath = String(inputObj.pattern);
        }
        if (filePath) {
          fileInteractions.push({
            kind,
            filePath,
            timestamp: span.startedAt,
            source: span.name,
          });
        }
        break;
      }
    }
  }

  fileInteractions.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());

  const hasData = sortedTools.length > 0 || fileInteractions.length > 0;

  if (!hasData) {
    return (
      <div className="flex flex-col items-center justify-center py-20">
        <div className="p-4 rounded-2xl bg-neutral-800/50 mb-4">
          <Cpu className="w-8 h-8 text-neutral-600" />
        </div>
        <p className="text-neutral-500 text-sm">No coding agent data available</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {sortedTools.length > 0 && (
        <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-5">
          <div className="flex items-center gap-3 mb-5">
            <div className="p-2 rounded-lg bg-blue-500/10">
              <Terminal className="w-4 h-4 text-blue-400" />
            </div>
            <h3 className="text-sm font-semibold text-neutral-200 uppercase tracking-wider">
              Tool Usage Breakdown
            </h3>
            <span className="ml-auto text-xs text-neutral-500">
              {toolCallSpans.length} total calls
            </span>
          </div>
          <div className="space-y-2.5">
            {sortedTools.map(([toolName, count]) => {
              const category = getToolCategory(toolName);
              const colors = toolCategoryColors[category];
              const widthPercent = maxToolCount > 0 ? (count / maxToolCount) * 100 : 0;
              return (
                <div key={toolName} className="group">
                  <div className="flex items-center gap-3">
                    <span className={cn("text-xs font-mono w-36 truncate shrink-0", colors.label)} title={toolName}>
                      {toolName}
                    </span>
                    <div className="flex-1 h-6 bg-neutral-800/60 rounded-md overflow-hidden relative">
                      <div
                        className={cn("h-full rounded-md transition-all duration-500 ease-out opacity-80 group-hover:opacity-100", colors.bar)}
                        style={{ width: `${Math.max(widthPercent, 2)}%` }}
                      />
                    </div>
                    <span className="text-xs font-mono text-neutral-300 w-8 text-right tabular-nums">
                      {count}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="flex items-center gap-4 mt-5 pt-4 border-t border-neutral-800">
            {Object.entries(toolCategoryColors).map(([category, colors]) => {
              const categoryCount = sortedTools
                .filter(([name]) => getToolCategory(name) === category)
                .reduce((sum, [, c]) => sum + c, 0);
              if (categoryCount === 0) return null;
              return (
                <div key={category} className="flex items-center gap-1.5">
                  <div className={cn("w-2.5 h-2.5 rounded-sm", colors.bar)} />
                  <span className="text-xs text-neutral-500 capitalize">{category}</span>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {fileInteractions.length > 0 && (
        <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-5">
          <div className="flex items-center gap-3 mb-5">
            <div className="p-2 rounded-lg bg-amber-500/10">
              <FolderOpen className="w-4 h-4 text-amber-400" />
            </div>
            <h3 className="text-sm font-semibold text-neutral-200 uppercase tracking-wider">
              File Changes Timeline
            </h3>
            <span className="ml-auto text-xs text-neutral-500">
              {fileInteractions.length} interactions
            </span>
          </div>
          <div className="relative">
            <div className="absolute left-[15px] top-2 bottom-2 w-px bg-neutral-800" />
            <div className="space-y-1">
              {fileInteractions.map((interaction, idx) => {
                const InteractionIcon = getFileInteractionIcon(interaction.kind);
                const colorClass = getFileInteractionColor(interaction.kind);
                return (
                  <div
                    key={`${interaction.filePath}-${idx}`}
                    className="flex items-center gap-3 pl-1 py-1.5 group"
                  >
                    <div className={cn("relative z-10 p-1.5 rounded-md border shrink-0", colorClass)}>
                      <InteractionIcon className="w-3 h-3" />
                    </div>
                    <div className="flex-1 min-w-0 flex items-center gap-2">
                      <span className="text-xs font-mono text-neutral-300 truncate" title={interaction.filePath}>
                        {truncateFilePath(interaction.filePath)}
                      </span>
                      <span className={cn(
                        "shrink-0 px-1.5 py-0.5 rounded text-[10px] font-medium uppercase tracking-wide border",
                        colorClass
                      )}>
                        {interaction.kind}
                      </span>
                    </div>
                    <span className="text-[11px] text-neutral-600 shrink-0 tabular-nums">
                      {formatRelativeTime(interaction.timestamp)}
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
