"use client"

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import type { AIProvider } from "@/types/chat"

interface ProviderSelectorProps {
  selected: AIProvider
  onSelect: (provider: AIProvider) => void
  selectedModel?: string
  onModelSelect?: (model: string) => void
}

const providers = [
  {
    id: "openai" as AIProvider,
    name: "OpenAI",
    badge: "GPT-4",
    models: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "gpt-3.5-turbo"],
  },
  {
    id: "openrouter" as AIProvider,
    name: "OpenRouter",
    badge: "Multi-Model",
    models: ["openai/gpt-4o", "anthropic/claude-3.5-sonnet", "meta-llama/llama-3.1-405b", "google/gemini-pro-1.5"],
  },
  {
    id: "groq" as AIProvider,
    name: "Groq",
    badge: "Fast",
    models: ["llama-3.1-70b-versatile", "llama-3.1-8b-instant", "mixtral-8x7b-32768"],
  },
  {
    id: "grok" as AIProvider,
    name: "Grok",
    badge: "xAI",
    models: ["grok-beta", "grok-vision-beta"],
  },
]

export function ProviderSelector({ selected, onSelect, selectedModel, onModelSelect }: ProviderSelectorProps) {
  const currentProvider = providers.find((p) => p.id === selected)

  return (
    <div className="flex items-center gap-3">
      <span className="text-sm font-medium">AI Provider:</span>
      <Select value={selected} onValueChange={onSelect}>
        <SelectTrigger className="w-48">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {providers.map((provider) => (
            <SelectItem key={provider.id} value={provider.id}>
              <div className="flex items-center gap-2">
                <span>{provider.name}</span>
                <Badge variant="secondary" className="text-xs">
                  {provider.badge}
                </Badge>
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      {onModelSelect && currentProvider && (
        <>
          <span className="text-sm font-medium">Model:</span>
          <Select value={selectedModel || currentProvider.models[0]} onValueChange={onModelSelect}>
            <SelectTrigger className="w-64">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {currentProvider.models.map((model) => (
                <SelectItem key={model} value={model}>
                  <span className="font-mono text-sm">{model}</span>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </>
      )}
    </div>
  )
}