'use client'

import React from 'react'
import { cn } from '@/lib/utils'

/**
 * ParamField and ResponseField Components for MDX Documentation
 * 
 * Mintlify-compatible components for documenting API parameters and responses.
 */

interface ParamFieldProps {
  /** Parameter path/name (e.g., "body.user.name" or "query.limit") */
  path?: string
  /** Parameter name (alternative to path) */
  name?: string
  /** Parameter type (e.g., "string", "number", "object") */
  type?: string
  /** Whether the parameter is required */
  required?: boolean
  /** Whether the parameter is deprecated */
  deprecated?: boolean
  /** Default value */
  default?: string
  /** Placeholder text */
  placeholder?: string
  /** Additional description as children */
  children?: React.ReactNode
  className?: string
}

export function ParamField({
  path,
  name,
  type,
  required = false,
  deprecated = false,
  default: defaultValue,
  placeholder,
  children,
  className,
}: ParamFieldProps) {
  const paramName = name || path?.split('.').pop() || 'param'
  const paramPath = path || name
  
  return (
    <div
      className={cn(
        'py-4 border-b border-border last:border-0',
        deprecated && 'opacity-60',
        className
      )}
    >
      <div className="flex flex-wrap items-baseline gap-2 mb-1">
        {/* Parameter name */}
        <code className="text-sm font-semibold text-foreground">
          {paramName}
        </code>
        
        {/* Type badge */}
        {type && (
          <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono">
            {type}
          </span>
        )}
        
        {/* Required badge */}
        {required && (
          <span className="text-xs px-1.5 py-0.5 rounded bg-red-500/10 text-red-600 dark:text-red-400 font-medium">
            required
          </span>
        )}
        
        {/* Deprecated badge */}
        {deprecated && (
          <span className="text-xs px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400 font-medium">
            deprecated
          </span>
        )}
      </div>
      
      {/* Full path if different from name */}
      {paramPath && paramPath !== paramName && (
        <div className="text-xs text-muted-foreground mb-2 font-mono">
          {paramPath}
        </div>
      )}
      
      {/* Default value */}
      {defaultValue && (
        <div className="text-xs text-muted-foreground mb-2">
          Default: <code className="bg-muted px-1 py-0.5 rounded">{defaultValue}</code>
        </div>
      )}
      
      {/* Placeholder */}
      {placeholder && (
        <div className="text-xs text-muted-foreground mb-2">
          Example: <code className="bg-muted px-1 py-0.5 rounded">{placeholder}</code>
        </div>
      )}
      
      {/* Description */}
      {children && (
        <div className="text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0">
          {children}
        </div>
      )}
    </div>
  )
}

interface ResponseFieldProps {
  /** Field name */
  name: string
  /** Field type */
  type?: string
  /** Whether the field is always present */
  required?: boolean
  /** Additional description */
  children?: React.ReactNode
  className?: string
}

export function ResponseField({
  name,
  type,
  required = false,
  children,
  className,
}: ResponseFieldProps) {
  return (
    <div className={cn('py-4 border-b border-border last:border-0', className)}>
      <div className="flex flex-wrap items-baseline gap-2 mb-1">
        {/* Field name */}
        <code className="text-sm font-semibold text-foreground">
          {name}
        </code>
        
        {/* Type badge */}
        {type && (
          <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono">
            {type}
          </span>
        )}
        
        {/* Required/always present badge */}
        {required && (
          <span className="text-xs px-1.5 py-0.5 rounded bg-green-500/10 text-green-600 dark:text-green-400 font-medium">
            always present
          </span>
        )}
      </div>
      
      {/* Description */}
      {children && (
        <div className="text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0">
          {children}
        </div>
      )}
    </div>
  )
}

/**
 * Expandable component for nested objects
 */
interface ExpandableProps {
  title?: string
  defaultOpen?: boolean
  children: React.ReactNode
  className?: string
}

export function Expandable({
  title = 'Show child attributes',
  defaultOpen = false,
  children,
  className,
}: ExpandableProps) {
  const [isOpen, setIsOpen] = React.useState(defaultOpen)
  
  return (
    <div className={cn('mt-2 ml-4 border-l-2 border-border', className)}>
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="text-xs text-primary hover:text-primary/80 transition-colors pl-3 py-1"
      >
        {isOpen ? 'Hide' : 'Show'} {title.replace('Show ', '').replace('Hide ', '')}
      </button>
      
      {isOpen && (
        <div className="pl-4 pt-2">
          {children}
        </div>
      )}
    </div>
  )
}
