src/components/ModelSelector.tsx

"use client"

/**
 * Model Selector - WeKnora Integration
 * 
 * Allows users to switch between AI models dynamically
 */

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { 
  Sparkles, 
  Zap, 
  Brain, 
  Rocket,
  Info
} from "lucide-react"
import { cn } from "@/lib/utils"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

interface AIModel {
  id: string
  name: string
  provider: string
  description: string
  speed: 'fast' | 'medium' | 'slow'
  quality: 'standard' | 'high' | 'premium'
  icon: React.ReactNode
  available: boolean
}

// Prioritize Moonshot and Gemini (user has these APIs)
const AI_MODELS: AIModel[] = [
  {
    id: "moonshot-v1-8k",
    name: "Moonshot V1",
    provider: "Moonshot",
    description: "Fast, efficient for most queries",
    speed: "fast",
    quality: "high",
    icon: <Zap className="h-4 w-4" />,
    available: true
  },
  {
    id: "gemini-2.5-flash",
    name: "Gemini 2.5 Flash",
    provider: "Google",
    description: "Latest Gemini, great balance",
    speed: "fast",
    quality: "high",
    icon: <Sparkles className="h-4 w-4" />,
    available: true
  },
  {
    id: "gemini-1.5-pro",
    name: "Gemini 1.5 Pro",
    provider: "Google",
    description: "Best for complex analysis",
    speed: "medium",
    quality: "premium",
    icon: <Brain className="h-4 w-4" />,
    available: true
  },
  {
    id: "gpt-4o-mini",
    name: "GPT-4o Mini",
    provider: "OpenAI",
    description: "Requires OpenAI API key",
    speed: "fast",
    quality: "high",
    icon: <Sparkles className="h-4 w-4" />,
    available: false
  },
  {
    id: "claude-3.5-sonnet",
    name: "Claude 3.5 Sonnet",
    provider: "Anthropic",
    description: "Requires Anthropic API key",
    speed: "medium",
    quality: "premium",
    icon: <Rocket className="h-4 w-4" />,
    available: false
  }
]

interface ModelSelectorProps {
  selected: string
  onChange: (modelId: string) => void
  className?: string
  showDetails?: boolean
}

export function ModelSelector({
  selected,
  onChange,
  className,
  showDetails = true
}: ModelSelectorProps) {
  const selectedModel = AI_MODELS.find(m => m.id === selected) || AI_MODELS[0]

  const getSpeedBadge = (speed: string) => {
    switch (speed) {
      case 'fast': return <Badge variant="default" className="bg-green-500 text-xs">Fast</Badge>
      case 'medium': return <Badge variant="secondary" className="text-xs">Medium</Badge>
      case 'slow': return <Badge variant="outline" className="text-xs">Slow</Badge>
    }
  }

  const getQualityBadge = (quality: string) => {
    switch (quality) {
      case 'premium': return <Badge variant="default" className="bg-purple-500 text-xs">Premium</Badge>
      case 'high': return <Badge variant="secondary" className="text-xs">High</Badge>
      case 'standard': return <Badge variant="outline" className="text-xs">Standard</Badge>
    }
  }

  return (
    <div className={cn("flex items-center gap-2", className)}>
      <Select value={selected} onValueChange={onChange}>
        <SelectTrigger className="w-[200px]">
          <div className="flex items-center gap-2">
            {selectedModel.icon}
            <SelectValue placeholder="Select model" />
          </div>
        </SelectTrigger>
        <SelectContent>
          {AI_MODELS.map((model) => (
            <SelectItem key={model.id} value={model.id}>
              <div className="flex items-center gap-2">
                {model.icon}
                <div className="flex flex-col">
                  <span className="font-medium">{model.name}</span>
                  <span className="text-xs text-muted-foreground">{model.provider}</span>
                </div>
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      
      {showDetails && (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="ghost" size="icon" className="h-8 w-8">
                <Info className="h-4 w-4 text-muted-foreground" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="bottom" className="max-w-[250px]">
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  {selectedModel.icon}
                  <span className="font-medium">{selectedModel.name}</span>
                </div>
                <p className="text-xs text-muted-foreground">{selectedModel.description}</p>
                <div className="flex gap-2">
                  {getSpeedBadge(selectedModel.speed)}
                  {getQualityBadge(selectedModel.quality)}
                </div>
              </div>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      )}
    </div>
  )
}

// Compact version for sidebar
export function ModelSelectorCompact({
  selected,
  onChange
}: {
  selected: string
  onChange: (modelId: string) => void
}) {
  const selectedModel = AI_MODELS.find(m => m.id === selected) || AI_MODELS[0]
  
  return (
    <Select value={selected} onValueChange={onChange}>
      <SelectTrigger className="w-full h-9">
        <div className="flex items-center gap-2 text-sm">
          {selectedModel.icon}
          <span>{selectedModel.name}</span>
        </div>
      </SelectTrigger>
      <SelectContent>
        {AI_MODELS.map((model) => (
          <SelectItem key={model.id} value={model.id}>
            <div className="flex items-center gap-2">
              {model.icon}
              <span>{model.name}</span>
            </div>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

export default ModelSelector