'use client'

import type { BrainfishRESTRequestResponses } from '@/lib/api-docs/types'
import { CodeViewer } from '../../playground/code-editor'

interface ResponsesSectionProps {
  responses: BrainfishRESTRequestResponses
}

export function ResponsesSection({ responses }: ResponsesSectionProps) {
  const responseEntries = Object.entries(responses)

  if (responseEntries.length === 0) {
    return null
  }

  return (
    <section>
      <h2 className="text-2xl font-semibold mb-4">Responses</h2>
      <div className="space-y-4">
        {responseEntries.map(([name, response]) => {
          // Pass raw JSON - CodeViewer will format it
          const bodyContent = response.body
            ? typeof response.body === 'string'
              ? response.body
              : JSON.stringify(response.body)
            : null

          return (
            <div key={name} className="border rounded-sm overflow-hidden">
              <div className="bg-muted/50 px-4 py-3 border-b">
                <div className="flex items-center gap-3">
                  <span
                    className={`px-2 py-1 rounded text-xs font-semibold ${
                      response.code >= 200 && response.code < 300
                        ? 'bg-green-500 text-white'
                        : response.code >= 400
                          ? 'bg-red-500 text-white'
                          : 'bg-gray-500 text-white'
                    }`}
                  >
                    {response.code}
                  </span>
                  <span className="font-medium">{response.status}</span>
                  {name !== response.status && (
                    <span className="text-sm text-muted-foreground">({name})</span>
                  )}
                </div>
              </div>

              {response.headers.length > 0 && (
                <div className="px-4 py-3 border-b bg-muted/30">
                  <p className="text-sm font-medium mb-2">Headers:</p>
                  <div className="space-y-1">
                    {response.headers.map((header, index) => (
                      <div key={index} className="text-sm">
                        <code className="bg-background px-2 py-1 rounded">
                          {header.key}
                        </code>
                        <span className="text-muted-foreground ml-2">{header.value}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {bodyContent && (
                <div className="dark-editor">
                  <CodeViewer
                    value={bodyContent}
                    language="json"
                    theme="dark"
                    height="auto"
                    minHeight={100}
                    maxHeight={500}
                    showBorder={false}
                    rounded={false}
                  />
                </div>
              )}
            </div>
          )
        })}
      </div>
    </section>
  )
}
