import type { NodeName } from '../lib/events'
import { NODE_LABELS, TOOL_LABELS } from '../lib/events'
import type { TraceEntry } from '../lib/useAgentStream'

const NODE_ACCENT: Record<NodeName, string> = {
  gatekeeper: 'text-sky-300 border-sky-400/30 bg-sky-400/10',
  planner: 'text-violet-300 border-violet-400/30 bg-violet-400/10',
  tool_executor: 'text-amber-300 border-amber-400/30 bg-amber-400/10',
  auditor: 'text-rose-300 border-rose-400/30 bg-rose-400/10',
  synthesizer: 'text-emerald-300 border-emerald-400/30 bg-emerald-400/10',
}

function formatMs(ms?: number) {
  if (ms === undefined) return null
  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`
}

function Spinner() {
  return (
    <span className="inline-block size-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
  )
}

function ToolRow({ tool }: { tool: TraceEntry['tools'][number] }) {
  return (
    <li className="animate-trace-in rounded-lg border border-edge/70 bg-canvas/60 p-2.5">
      <div className="flex items-center gap-2">
        {tool.status === 'running' ? (
          <span className="text-amber-300">
            <Spinner />
          </span>
        ) : tool.status === 'failed' ? (
          <span className="text-rose-400">✕</span>
        ) : (
          <span className="text-emerald-400">✓</span>
        )}
        <span className="font-mono text-xs font-medium text-amber-200">
          {TOOL_LABELS[tool.toolName] ?? tool.toolName}
        </span>
        <span className="ml-auto font-mono text-[11px] text-slate-500">
          {formatMs(tool.durationMs)}
          {tool.resultCount != null && tool.resultCount > 0 && (
            <span className="ml-1.5">· {tool.resultCount} hits</span>
          )}
        </span>
      </div>
      <p className="mt-1.5 truncate font-mono text-[11px] text-slate-500" title={tool.toolInput}>
        “{tool.toolInput}”
      </p>
      {tool.preview && (
        <p className="mt-1.5 line-clamp-2 text-[11px] leading-relaxed text-slate-400">
          {tool.preview}
        </p>
      )}
      {tool.error && <p className="mt-1.5 text-[11px] text-rose-400">{tool.error}</p>}
    </li>
  )
}

function AuditVerdict({ audit }: { audit: NonNullable<TraceEntry['audit']> }) {
  const replan = audit.action === 'replan'
  return (
    <div
      className={`animate-trace-in mt-2 rounded-lg border p-2.5 ${
        replan ? 'border-rose-500/40 bg-rose-500/10' : 'border-emerald-500/40 bg-emerald-500/10'
      }`}
    >
      <div className="flex items-center gap-2">
        <span className="font-mono text-[11px] tracking-wide text-slate-300">
          confidence
        </span>
        <span className="flex gap-0.5">
          {[1, 2, 3, 4, 5].map((n) => (
            <span
              key={n}
              className={`h-3.5 w-1.5 rounded-sm ${
                n <= audit.confidenceScore
                  ? replan
                    ? 'bg-rose-400'
                    : 'bg-emerald-400'
                  : 'bg-slate-700'
              }`}
            />
          ))}
        </span>
        <span className="font-mono text-[11px] text-slate-400">{audit.confidenceScore}/5</span>
        <span
          className={`ml-auto rounded px-1.5 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-wider ${
            replan ? 'bg-rose-500/20 text-rose-300' : 'bg-emerald-500/20 text-emerald-300'
          }`}
        >
          {replan ? 'replan' : 'accept'}
        </span>
      </div>
      <p className="mt-2 text-[11px] leading-relaxed text-slate-400">{audit.reasoning}</p>
    </div>
  )
}

function TraceCard({ entry, isLast }: { entry: TraceEntry; isLast: boolean }) {
  const running = entry.status === 'running'
  return (
    <li className="animate-trace-in relative pl-8">
      {/* Connector down to the next node. */}
      {!isLast && <span className="absolute left-[11px] top-6 h-[calc(100%-0.5rem)] w-px bg-edge" />}
      <span
        className={`absolute left-0 top-1 flex size-[23px] items-center justify-center rounded-full border text-[10px] ${
          NODE_ACCENT[entry.node]
        }`}
      >
        {running ? <Spinner /> : '✓'}
      </span>

      <div className="flex items-baseline gap-2">
        <h3 className="text-sm font-semibold text-slate-200">{NODE_LABELS[entry.node]}</h3>
        {entry.attempt > 1 && (
          <span className="rounded bg-rose-500/15 px-1.5 py-0.5 font-mono text-[10px] font-semibold text-rose-300">
            attempt {entry.attempt}
          </span>
        )}
        <span className="ml-auto font-mono text-[11px] text-slate-500">
          {running ? 'running…' : formatMs(entry.durationMs)}
        </span>
      </div>

      {entry.plan && (
        <ol className="mt-2 space-y-1">
          {entry.plan.map((step, i) => (
            <li key={`${step.tool_name}-${i}`} className="flex items-center gap-2 text-[11px]">
              <span className="font-mono text-slate-600">{i + 1}.</span>
              <span
                className={`font-mono ${
                  step.tool_name === 'FINISH' ? 'text-slate-500' : 'text-violet-300'
                }`}
              >
                {TOOL_LABELS[step.tool_name] ?? step.tool_name}
              </span>
              {step.tool_input && (
                <span className="truncate text-slate-500" title={step.tool_input}>
                  {step.tool_input}
                </span>
              )}
            </li>
          ))}
        </ol>
      )}

      {entry.tools.length > 0 && (
        <ul className="mt-2 space-y-1.5">
          {entry.tools.map((tool, i) => (
            <ToolRow key={`${tool.toolName}-${i}`} tool={tool} />
          ))}
        </ul>
      )}

      {entry.audit && <AuditVerdict audit={entry.audit} />}
    </li>
  )
}

export function AgentTrace({ trace }: { trace: TraceEntry[] }) {
  if (trace.length === 0) {
    return (
      <p className="px-1 text-xs leading-relaxed text-slate-500">
        Node transitions appear here as the supervisor graph runs — plans, tool calls, and the
        Auditor's verdict on each one.
      </p>
    )
  }
  return (
    <ol className="space-y-5">
      {trace.map((entry, i) => (
        <TraceCard key={entry.id} entry={entry} isLast={i === trace.length - 1} />
      ))}
    </ol>
  )
}