import {
  ArrowDown,
  ArrowUp,
  ChevronDown,
  ChevronRight,
  Clock,
  FileTerminal,
  Globe,
  Loader2,
  MessageSquare,
  Radio,
  Wrench,
  Zap,
} from "lucide-react";
import type { JSX } from "react";
import { memo, useMemo } from "react";
import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
import type { CapturedLog } from "../../proxy/schemas";
import { Badge } from "../ui/badge";
import { ProviderLogo, detectProvider } from "../providers/ProviderLogo";
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
import type { CacheTrend } from "./cacheTrend";

function formatElapsed(ms: number): string {
  if (ms < 1000) return `${ms}ms`;
  return `${(ms / 1000).toFixed(1)}s`;
}

const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
  success: "bg-emerald-500/15 text-emerald-400 border-emerald-500/25",
  client_error: "bg-amber-500/15 text-amber-400 border-amber-500/25",
  server_error: "",
  pending: "bg-muted text-muted-foreground border-border",
};

/**
 * Inline trend indicator: small arrow (green up / red down) plus the absolute
 * delta in compact form. Returns `null` when there is no trend to display.
 */
function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Element | null {
  if (trend === null) return null;
  const isUp = trend.direction === "up";
  const Icon = isUp ? ArrowUp : ArrowDown;
  const sign = isUp ? "+" : "-";
  return (
    <span className="flex items-center gap-0.5 text-muted-foreground tabular-nums">
      <Icon className={isUp ? "size-3 text-emerald-400" : "size-3 text-rose-400"} />
      <span className="font-mono">
        {sign}
        {formatTokens(trend.delta)}
      </span>
    </span>
  );
}

export type LogEntryHeaderProps = {
  log: CapturedLog;
  /** Number of messages in the request (supports both Anthropic and OpenAI formats). */
  messageCount?: number | null;
  /** Number of tools defined in the request (supports both Anthropic and OpenAI formats). */
  toolCount?: number | null;
  expanded: boolean;
  onToggle: () => void;
  /** Tool call names extracted from the model response (e.g., ["read_file", "grep"]). */
  responseToolNames?: string[] | null;
  /** Per-log cache token trend (creation + read) relative to the previous log
   * in the same conversation group. When `undefined` or a field is `null`,
   * the corresponding cache span renders as it did before — no arrow.
   */
  cacheTrend?: { creation: CacheTrend | null; read: CacheTrend | null } | null;
};

export const LogEntryHeader = memo(function ({
  log,
  messageCount = null,
  toolCount = null,
  expanded,
  onToggle,
  responseToolNames = null,
  cacheTrend = null,
}: LogEntryHeaderProps): JSX.Element {
  const statusCategory = getStatusCategory(log.responseStatus);

  const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
  const toolNamesJoined = useMemo(() => responseToolNames?.join(", ") ?? null, [responseToolNames]);

  return (
    <TooltipProvider>
      <div
        role="button"
        tabIndex={0}
        className={cn(
          "flex items-center gap-2 px-3 py-1 cursor-pointer transition-colors",
          "hover:bg-muted/50",
          "select-none",
        )}
        onClick={onToggle}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            onToggle();
          }
        }}
      >
        {/* Request ID */}
        <span className="text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0">
          #{log.id}
        </span>

        {/* Model — logo icon only, model name in tooltip */}
        {log.model !== null && (
          <Tooltip>
            <TooltipTrigger asChild>
              <span className="shrink-0">
                <ProviderLogo provider={detectProvider(log.model)} className="size-4" />
              </span>
            </TooltipTrigger>
            <TooltipContent>{log.model}</TooltipContent>
          </Tooltip>
        )}

        {/* Response Status — only shown for non-200 or pending */}
        {statusCategory !== "success" && (
          <>
            {statusCategory === "server_error" ? (
              <Badge
                variant="destructive"
                className="text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums"
              >
                {log.responseStatus}
              </Badge>
            ) : statusCategory === "pending" ? (
              <Badge
                variant="outline"
                className={cn(
                  "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
                  STATUS_BADGE_CLASSES[statusCategory],
                )}
              >
                <Loader2 className="size-3 animate-spin" />
              </Badge>
            ) : (
              <Badge
                variant="outline"
                className={cn(
                  "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
                  STATUS_BADGE_CLASSES[statusCategory],
                )}
              >
                {log.responseStatus}
              </Badge>
            )}
          </>
        )}

        {/* Elapsed time */}
        {log.elapsedMs !== null && (
          <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
            <Clock className="size-3" />
            <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
          </span>
        )}

        {/* Token counts */}
        {hasTokens && (
          <span className="flex items-center gap-1 text-xs shrink-0">
            <Zap className="size-3 text-muted-foreground" />
            <span className="font-mono tabular-nums">
              <span
                className={log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground"}
              >
                IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"}
              </span>
              {" / "}
              <span
                className={log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground"}
              >
                OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "—"}
              </span>
            </span>
          </span>
        )}
        {/* Cache tokens */}
        {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
          <Tooltip>
            <TooltipTrigger asChild>
              <span className="flex items-center gap-1 text-xs shrink-0">
                <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
                <span className="font-mono tabular-nums text-emerald-400">
                  Cache +{formatTokens(log.cacheCreationInputTokens)}
                </span>
              </span>
            </TooltipTrigger>
            <TooltipContent>Tokens cached for reuse, reducing future API cost</TooltipContent>
          </Tooltip>
        )}
        {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
          <Tooltip>
            <TooltipTrigger asChild>
              <span className="flex items-center gap-1 text-xs shrink-0">
                <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
                <span className="font-mono tabular-nums text-purple-400">
                  Cache ~{formatTokens(log.cacheReadInputTokens)}
                </span>
              </span>
            </TooltipTrigger>
            <TooltipContent>Tokens served from cache, reducing API cost</TooltipContent>
          </Tooltip>
        )}

        {/* Message count */}
        {messageCount !== null && (
          <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
            <MessageSquare className="size-3" />
            <span className="font-mono tabular-nums">{messageCount}</span>
          </span>
        )}

        {/* Tool count */}
        {toolCount !== null && (
          <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
            <Wrench className="size-3" />
            <span className="font-mono tabular-nums">{toolCount}</span>
          </span>
        )}

        {/* Response tool calls — tool names the model requested to invoke */}
        {responseToolNames !== null && responseToolNames.length > 0 && (
          <span className="flex items-center gap-1 text-amber-400/80 text-xs shrink-0">
            <Wrench className="size-3" />
            <span className="font-mono tabular-nums truncate max-w-[160px]">{toolNamesJoined}</span>
          </span>
        )}

        {/* Origin */}
        {log.origin !== null && (
          <span
            className="hidden xl:flex items-center gap-1 text-muted-foreground text-xs shrink-0"
            title={`Origin: ${log.origin}`}
          >
            <Globe className="size-3" />
            <span className="font-mono tabular-nums truncate max-w-[120px]" title={log.origin}>
              {log.origin}
            </span>
          </span>
        )}

        {/* Client info (PID + project folder) */}
        {(log.clientPid !== null || log.clientProjectFolder !== null) && (
          <Tooltip>
            <TooltipTrigger asChild>
              <span className="hidden xl:flex items-center gap-1 text-purple-400/80 text-xs shrink-0">
                <FileTerminal className="size-3" />
                {log.clientProjectFolder !== null ? (
                  <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
                ) : (
                  <span className="font-mono tabular-nums">PID {log.clientPid}</span>
                )}
              </span>
            </TooltipTrigger>
            <TooltipContent>
              {log.clientCwd !== null
                ? `PID: ${log.clientPid ?? "?"}  CWD: ${log.clientCwd}`
                : `Process ID: ${log.clientPid ?? "?"}`}
            </TooltipContent>
          </Tooltip>
        )}

        {/* Streaming indicator */}
        {log.streaming && (
          <Tooltip>
            <TooltipTrigger asChild>
              <Radio className="size-3 text-muted-foreground/60 shrink-0" />
            </TooltipTrigger>
            <TooltipContent>Request used SSE streaming</TooltipContent>
          </Tooltip>
        )}

        {/* Spacer */}
        <span className="flex-1 min-w-0" />

        {/* Expand chevron */}
        {expanded ? (
          <ChevronDown className="size-4 text-muted-foreground shrink-0" />
        ) : (
          <ChevronRight className="size-4 text-muted-foreground shrink-0" />
        )}
      </div>
    </TooltipProvider>
  );
});
