"use client";
import { Zap, Wrench, Flag, AlertCircle, Loader2, CheckCircle, XCircle } from "lucide-react";
import { cn } from "@/lib/utils";
import type { ActivityNode } from "@/lib/api";

interface ActivityTimelineProps {
  nodes: ActivityNode[];
}

const TYPE_ICON: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
  status: Zap,
  tool: Wrench,
  done: Flag,
  error: AlertCircle,
};

function NodeIcon({ node }: { node: ActivityNode }) {
  if (node.nodeStatus === "running") {
    return <Loader2 size={14} className="text-[var(--gem-blue,#4285f4)] animate-spin" />;
  }
  if (node.nodeStatus === "success") {
    return <CheckCircle size={14} className="text-green-400" />;
  }
  if (node.nodeStatus === "error") {
    return <XCircle size={14} className="text-red-400" />;
  }
  const Icon = TYPE_ICON[node.type] ?? Zap;
  return <Icon size={14} className="text-[var(--gem-text-muted)]" />;
}

export function ActivityTimeline({ nodes }: ActivityTimelineProps) {
  if (nodes.length === 0) return null;
  return (
    <div className="space-y-0">
      {nodes.map((node, i) => (
        <div key={node.id} className="flex gap-3 relative">
          {i < nodes.length - 1 && (
            <div className="absolute left-[13px] top-7 bottom-0 w-px bg-[var(--gem-border)]" />
          )}
          <div className={cn(
            "w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 z-10",
            node.nodeStatus === "running"
              ? "bg-[var(--gem-blue,#4285f4)]/10 border border-[var(--gem-blue,#4285f4)]/30"
              : node.nodeStatus === "error"
              ? "bg-red-500/10 border border-red-500/30"
              : "bg-[var(--gem-surface-2)] border border-[var(--gem-border)]"
          )}>
            <NodeIcon node={node} />
          </div>
          <div className="flex-1 pb-4 min-w-0">
            <p className={cn(
              "text-xs font-medium leading-snug pt-1",
              node.nodeStatus === "running" ? "text-[var(--gem-text)]" : "text-[var(--gem-text-secondary)]"
            )}>
              {node.label}
            </p>
            {node.detail && (
              <p className="text-[10px] text-[var(--gem-text-muted)] mt-0.5">{node.detail}</p>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}