'use client'

import type { BrainfishRESTRequest } from '@/lib/api-docs/types'

interface RequestBuilderProps {
  request: BrainfishRESTRequest
  params: Array<{ key: string; value: string; active: boolean }>
  headers: Array<{ key: string; value: string; active: boolean }>
  body: string | null
  variables: Array<{ key: string; value: string; active: boolean }>
  onParamsChange: (params: Array<{ key: string; value: string; active: boolean }>) => void
  onHeadersChange: (headers: Array<{ key: string; value: string; active: boolean }>) => void
  onBodyChange: (body: string | null) => void
  onVariablesChange: (variables: Array<{ key: string; value: string; active: boolean }>) => void
}

export function RequestBuilder({
  request,
  params,
  headers,
  body,
  variables,
  onParamsChange,
  onHeadersChange,
  onBodyChange,
  onVariablesChange,
}: RequestBuilderProps) {
  return (
    <div className="p-6 space-y-6">
      {/* URL */}
      <div>
        <label className="block text-sm font-medium mb-2">Endpoint</label>
        <input
          type="text"
          value={request.endpoint}
          disabled
          className="w-full px-3 py-2 border rounded bg-muted text-sm font-mono"
        />
      </div>

      {/* Path Variables */}
      {variables.length > 0 && (
        <div>
          <h3 className="text-sm font-semibold mb-2">Path Variables</h3>
          <div className="space-y-2">
            {variables.map((variable, index) => (
              <div key={index} className="flex gap-2">
                <input
                  type="text"
                  value={variable.key}
                  disabled
                  className="flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
                />
                <input
                  type="text"
                  value={variable.value}
                  onChange={(e) => {
                    const newVars = [...variables]
                    newVars[index].value = e.target.value
                    onVariablesChange(newVars)
                  }}
                  placeholder="value"
                  className="flex-1 px-3 py-2 border rounded text-sm"
                />
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Query Parameters */}
      {params.length > 0 && (
        <div>
          <h3 className="text-sm font-semibold mb-2">Query Parameters</h3>
          <div className="space-y-2">
            {params.map((param, index) => (
              <div key={index} className="flex gap-2 items-center">
                <input
                  type="checkbox"
                  checked={param.active}
                  onChange={(e) => {
                    const newParams = [...params]
                    newParams[index].active = e.target.checked
                    onParamsChange(newParams)
                  }}
                  className="w-4 h-4"
                />
                <input
                  type="text"
                  value={param.key}
                  disabled
                  className="flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
                />
                <input
                  type="text"
                  value={param.value}
                  onChange={(e) => {
                    const newParams = [...params]
                    newParams[index].value = e.target.value
                    onParamsChange(newParams)
                  }}
                  placeholder="value"
                  className="flex-1 px-3 py-2 border rounded text-sm"
                />
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Headers */}
      {headers.length > 0 && (
        <div>
          <h3 className="text-sm font-semibold mb-2">Headers</h3>
          <div className="space-y-2">
            {headers.map((header, index) => (
              <div key={index} className="flex gap-2 items-center">
                <input
                  type="checkbox"
                  checked={header.active}
                  onChange={(e) => {
                    const newHeaders = [...headers]
                    newHeaders[index].active = e.target.checked
                    onHeadersChange(newHeaders)
                  }}
                  className="w-4 h-4"
                />
                <input
                  type="text"
                  value={header.key}
                  disabled
                  className="flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
                />
                <input
                  type="text"
                  value={header.value}
                  onChange={(e) => {
                    const newHeaders = [...headers]
                    newHeaders[index].value = e.target.value
                    onHeadersChange(newHeaders)
                  }}
                  placeholder="value"
                  className="flex-1 px-3 py-2 border rounded text-sm"
                />
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Body */}
      {request.body.body !== null && request.body.contentType && (
        <div>
          <h3 className="text-sm font-semibold mb-2">Request Body</h3>
          <div className="mb-2">
            <span className="text-xs text-muted-foreground">
              Content-Type: {request.body.contentType}
            </span>
          </div>
          {request.body.contentType === 'application/x-www-form-urlencoded' ? (
            <textarea
              value={body || ''}
              onChange={(e) => onBodyChange(e.target.value)}
              className="w-full h-64 px-3 py-2 border rounded font-mono text-sm"
              placeholder="key1: value1&#10;key2: value2"
            />
          ) : (
            <textarea
              value={body || ''}
              onChange={(e) => onBodyChange(e.target.value)}
              className="w-full h-64 px-3 py-2 border rounded font-mono text-sm"
              placeholder="Enter request body..."
            />
          )}
        </div>
      )}
    </div>
  )
}
