import { Terminal } from 'lucide-react';
import { Panel } from '@/components/ui/Panel';
import { Badge } from '@/components/ui/Badge';
import { EmptyState } from '@/components/ui/EmptyState';
import { JsonViewer } from '@/components/ui/JsonViewer';
import type { McpResponse } from './McpRequestBuilder';

interface McpResponseViewerProps {
  response: McpResponse | null;
}

export function McpResponseViewer({ response }: McpResponseViewerProps) {
  return (
    <Panel title="Response">
      {!response ? (
        <EmptyState
          icon={Terminal}
          title="Execute a tool to see results"
          description="Select a server and tool, then click Execute."
        />
      ) : (
        <div className="space-y-3">
          {/* Status + timing header */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Badge status={response.status === 'success' ? 'ok' : 'error'}>
                {response.status}
              </Badge>
              <span className="text-xs text-text-muted">
                {response.server} / {response.tool}
              </span>
            </div>
            <span className="text-xs text-text-muted">{response.timing} ms</span>
          </div>

          {/* Response body */}
          <div className="max-h-[60vh] overflow-auto">
            <JsonViewer data={response.data} />
          </div>
        </div>
      )}
    </Panel>
  );
}
