import { StopCircle, Zap } from "lucide-react";
import { memo, type JSX } from "react";
import type { InspectorResponse } from "../../../../proxy/schemas";
import { formatTokens } from "../../../../lib/utils";
import { Badge } from "../../../ui/badge";
import { Separator } from "../../../ui/separator";
import { ResponseContentBlockRenderer } from "./ContentBlocks";

export const StructuredResponseViewAnthropic = memo(function StructuredResponseViewAnthropic({
  response,
}: {
  response: InspectorResponse;
}): JSX.Element {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2 flex-wrap">
        <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-mono">
          {response.model}
        </Badge>

        {response.stop_reason !== null && (
          <Badge
            variant="outline"
            className="text-[10px] px-1.5 py-0 h-5 font-mono flex items-center gap-1"
          >
            <StopCircle className="size-2.5" />
            {response.stop_reason}
          </Badge>
        )}

        <span className="flex items-center gap-1 text-muted-foreground text-xs">
          <Zap className="size-3" />
          <span className="font-mono tabular-nums">
            {formatTokens(response.usage.input_tokens ?? 0)} in /{" "}
            {formatTokens(response.usage.output_tokens ?? 0)} out
          </span>
          {response.usage.cache_creation_input_tokens !== undefined &&
            response.usage.cache_creation_input_tokens !== null &&
            response.usage.cache_creation_input_tokens > 0 && (
              <span className="font-mono tabular-nums text-emerald-400">
                Cache +{formatTokens(response.usage.cache_creation_input_tokens)}
              </span>
            )}
          {response.usage.cache_read_input_tokens !== undefined &&
            response.usage.cache_read_input_tokens !== null &&
            response.usage.cache_read_input_tokens > 0 && (
              <span className="font-mono tabular-nums text-purple-400">
                Cache ~{formatTokens(response.usage.cache_read_input_tokens)}
              </span>
            )}
        </span>
      </div>

      <Separator className="opacity-50" />

      <div className="space-y-2">
        {response.content.map((block, i) => (
          <ResponseContentBlockRenderer key={i} block={block} />
        ))}
        {response.content.length === 0 && (
          <p className="text-xs text-muted-foreground italic">Empty response content</p>
        )}
      </div>
    </div>
  );
});
