'use client'

import { CaretDown, Check } from '@phosphor-icons/react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import type { HTTPMethod } from '@/lib/api-docs/types'

const METHODS: HTTPMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS']

const METHOD_COLORS: Record<HTTPMethod, string> = {
  GET: 'text-green-500',
  POST: 'text-blue-500',
  PUT: 'text-orange-500',
  PATCH: 'text-purple-500',
  DELETE: 'text-red-500',
  HEAD: 'text-gray-500',
  OPTIONS: 'text-gray-500',
}

interface MethodSelectorProps {
  value: HTTPMethod
  onChange: (method: HTTPMethod) => void
  disabled?: boolean
}

export function MethodSelector({ value, onChange, disabled = false }: MethodSelectorProps) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className={`flex items-center gap-1 px-4 py-2 h-auto bg-muted/50 hover:bg-muted rounded-l-md rounded-r-none border-r border-border font-semibold text-sm ${
            METHOD_COLORS[value]
          }`}
          disabled={disabled}
        >
          <span className="w-16 text-left">{value}</span>
          <CaretDown className="h-4 w-4" weight="bold" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="min-w-[120px]">
        {METHODS.map((method) => (
          <DropdownMenuItem
            key={method}
            onClick={() => onChange(method)}
            className={`font-semibold ${METHOD_COLORS[method]}`}
          >
            <span className="flex-1">{method}</span>
            {value === method && <Check className="h-4 w-4 ml-2" weight="bold" />}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
