import {
  CheckCircle,
  XCircle,
  AlertCircle,
  Timer,
  DollarSign,
  GitFork,
  Terminal,
  Hash,
  Code as CodeIcon,
} from "lucide-react"
import { InfoIcon } from "./info-icon"

interface TraceSummaryProps {
  status: "Completed" | "Partial" | "Failed"
  source: string
  durationSeconds: number
  totalCost: number
  totalTokens: number
  candidatesCount?: number
}

export function TraceSummary({
  status,
  source,
  durationSeconds,
  totalCost,
  totalTokens,
  candidatesCount,
}: TraceSummaryProps) {
  function getStatusColor(status: string): string {
    switch (status) {
      case "Failed":
        return "text-red-600 dark:text-red-400"
      case "Partial":
        return "text-yellow-600 dark:text-yellow-400"
      default:
        return "text-green-600 dark:text-green-400"
    }
  }

  function getStatusIcon(status: string) {
    switch (status) {
      case "Completed":
        return CheckCircle
      case "Failed":
        return XCircle
      default:
        return AlertCircle
    }
  }

  const statusColor = getStatusColor(status)
  const StatusIcon = getStatusIcon(status)

  const SourceIcon = source.toLowerCase().includes("github") ? GitFork : Terminal

  return (
    <div className="bg-white dark:bg-zinc-950 rounded-sm p-6 border border-zinc-200 dark:border-zinc-800">
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
        <div className="group">
          <div className="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400 font-medium mb-2">
            <StatusIcon className="h-4 w-4" />
            <span>Status</span>
            <InfoIcon content="Overall trace status based on all contained calls" side="top" />
          </div>
          <div className={`text-xl font-bold ${statusColor}`}>{status}</div>
        </div>

        <div className="group">
          <div className="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400 font-medium mb-2">
            <SourceIcon className="h-4 w-4" />
            <span>Source</span>
            <InfoIcon content="Where this optimization was triggered from" side="top" />
          </div>
          <div className="text-xl font-bold text-zinc-900 dark:text-zinc-50">
            <span className="px-2 py-1 bg-zinc-100 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300 rounded-sm text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-150">
              {source}
            </span>
          </div>
        </div>

        <div className="group">
          <div className="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400 font-medium mb-2">
            <Timer className="h-4 w-4" />
            <span>Duration</span>
            <InfoIcon content="Total time from first call to last call completion" side="top" />
          </div>
          <div className="text-xl font-bold text-zinc-900 dark:text-zinc-50">
            {durationSeconds.toFixed(2)}s
          </div>
        </div>

        <div className="group">
          <div className="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400 font-medium mb-2">
            <DollarSign className="h-4 w-4" />
            <span>Cost</span>
            <InfoIcon content="Sum of all LLM call costs in this trace" side="top" />
          </div>
          <div className="text-xl font-bold text-zinc-900 dark:text-zinc-50">
            ${totalCost.toFixed(4)}
          </div>
        </div>

        <div className="group">
          <div className="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400 font-medium mb-2">
            <Hash className="h-4 w-4" />
            <span>Tokens</span>
            <InfoIcon content="Total tokens (prompt + completion) across all calls" side="top" />
          </div>
          <div className="text-xl font-bold text-zinc-900 dark:text-zinc-50">
            {totalTokens.toLocaleString()}
          </div>
        </div>

        {candidatesCount !== undefined && (
          <div className="group">
            <div className="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400 font-medium mb-2">
              <CodeIcon className="h-4 w-4" />
              <span>Candidates</span>
              <InfoIcon content="Number of optimization candidates generated" side="top" />
            </div>
            <div className="text-xl font-bold text-zinc-900 dark:text-zinc-50">
              {candidatesCount}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
