'use client'

import { Bug, ArrowsClockwise } from '@phosphor-icons/react'
import { Badge } from '@/components/ui/badge'
import { MethodBadge } from '../../shared/method-badge'
import type { DebugContext } from '../../playground/response-viewer'
import type { HTTPMethod } from '@/lib/api-docs/types'
import { cn } from '@/lib/utils'

interface DebugContextCardProps {
  context: DebugContext
}

export function DebugContextCard({ context }: DebugContextCardProps) {
  const isError = context.status >= 400
  
  // Try to format the response body
  let formattedBody = context.responseBody
  try {
    const parsed = JSON.parse(context.responseBody)
    formattedBody = JSON.stringify(parsed, null, 2)
  } catch {
    // Keep original
  }
  
  // Truncate if too long
  const truncatedBody = formattedBody.length > 300 
    ? formattedBody.slice(0, 300) + '...' 
    : formattedBody
  
  return (
    <div 
      className={cn(
        "fade-in slide-in-from-bottom-1 animate-in duration-150",
        "mx-auto w-full max-w-[var(--thread-max-width)] px-2 py-3"
      )}
    >
      <div className="rounded-lg border border-border bg-muted/30 overflow-hidden">
        {/* Header */}
        <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 border-b border-border">
          <Bug className="h-4 w-4 text-amber-500" weight="bold" />
          <span className="text-xs font-medium text-muted-foreground">Debug Context</span>
        </div>
        
        {/* Endpoint info */}
        {context.endpointName && (
          <div className="px-3 py-2 border-b border-border">
            <div className="flex items-center gap-2">
              {context.endpointMethod && (
                <MethodBadge method={context.endpointMethod as HTTPMethod} size="sm" />
              )}
              <span className="text-sm font-medium text-foreground">{context.endpointName}</span>
            </div>
            {context.endpointPath && (
              <p className="text-xs text-muted-foreground mt-1 font-mono">{context.endpointPath}</p>
            )}
          </div>
        )}
        
        {/* Response status */}
        <div className="px-3 py-2 border-b border-border">
          <div className="flex items-center gap-2">
            <ArrowsClockwise className="h-3.5 w-3.5 text-muted-foreground" weight="bold" />
            <span className="text-xs text-muted-foreground">Response</span>
            <Badge variant={isError ? 'destructive' : 'default'} className="text-xs h-5">
              {context.status} {context.statusText}
            </Badge>
          </div>
        </div>
        
        {/* Response body preview */}
        <div className="px-3 py-2">
          <pre className="text-xs font-mono text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto max-h-32 overflow-y-auto">
            {truncatedBody}
          </pre>
        </div>
        
        {/* Request body if present */}
        {context.requestBody && (
          <div className="px-3 py-2 border-t border-border">
            <p className="text-xs text-muted-foreground mb-1">Request Body</p>
            <pre className="text-xs font-mono text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto max-h-20 overflow-y-auto">
              {context.requestBody.length > 200 ? context.requestBody.slice(0, 200) + '...' : context.requestBody}
            </pre>
          </div>
        )}
      </div>
    </div>
  )
}
