agentlens/apps/web/src/components/trace-detail.tsx

"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,
} 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";

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;
}

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})`}
          />
        </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} />}
      </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>
              <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.keys(span.metadata).length > 0 && (
            <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(span.metadata, null, 2)}
              </pre>
            </div>
          )}
        </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) => {
        const { icon: Icon, color } = eventTypeColors[event.type] || eventTypeColors.DEFAULT;
        return (
          <div
            key={event.id}
            className="flex items-center gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-xl hover:border-neutral-700 transition-colors"
          >
            <div className={cn("p-2 rounded-lg bg-neutral-800", color)}>
              <Icon className="w-4 h-4" />
            </div>
            <div className="flex-1">
              <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>
          </div>
        );
      })}
    </div>
  );
}