'use client'

import { useState, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { LoadingSpinner } from '@/components/ui/loading-spinner'
import { Badge } from '@/components/ui/badge'
import { 
  RefreshCw, 
  Database, 
  Plus,
  DollarSign,
  Cpu,
  Zap,
  Trash2,
  Eye,
  EyeOff,
  AlertCircle
} from 'lucide-react'

interface Model {
  id: string
  subscriptionPlanId: string
  modelId: string
  name: string
  provider: string
  serviceProvider: string
  outputType: string
  description?: string
  maxTokens?: number
  inputCostPer1k?: number
  outputCostPer1k?: number
  supportedFeatures?: Record<string, unknown>
  customLimits?: Record<string, unknown>
  isActive: boolean
  createdAt: string
  updatedAt: string
  subscriptionPlan: {
    id: string
    name: string
    displayName: string
  }
}

interface SubscriptionPlan {
  id: string
  displayName: string
  name: string
}

interface AvailableModel {
  modelId: string
  name: string
  provider: string
  serviceProvider: string
  outputType: string
  description?: string
  maxTokens?: number
  inputCostPer1k?: number
  outputCostPer1k?: number
  supportedFeatures?: Record<string, unknown>
  metadata?: Record<string, unknown>
}

export default function AdminModelsPage() {
  const t = useTranslations('admin')
  const [models, setModels] = useState<Model[]>([])
  const [plans, setPlans] = useState<SubscriptionPlan[]>([])
  const [availableModels, setAvailableModels] = useState<AvailableModel[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isFetching, setIsFetching] = useState(false)
  const [isAdding, setIsAdding] = useState(false)
  const [selectedPlan, setSelectedPlan] = useState<string>('')
  const [selectedModels, setSelectedModels] = useState<string[]>([])
  const [showAvailableModels, setShowAvailableModels] = useState(false)
  const [selectedServiceProvider, setSelectedServiceProvider] = useState<'openrouter' | 'replicate' | 'uniapi' | 'fal'>('openrouter')

  useEffect(() => {
    loadInitialData()
  }, [])

  const loadInitialData = async () => {
    try {
      setIsLoading(true)
      
      const [modelsRes, plansRes] = await Promise.all([
        fetch('/api/admin/models'),
        fetch('/api/admin/subscription-plans')
      ])

      if (modelsRes.ok) {
        const modelsData = await modelsRes.json()
        setModels(modelsData.models || [])
      }

      if (plansRes.ok) {
        const plansData = await plansRes.json()
        setPlans(plansData.plans || [])
      }
    } catch (error) {
      console.error('Error loading data:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const fetchModelsFromProvider = async () => {
    if (!selectedPlan) {
      alert(t('noPlanSelected'))
      return
    }

    try {
      setIsFetching(true)

      const response = await fetch('/api/admin/models', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          action: 'sync',
          planId: selectedPlan,
          serviceProvider: selectedServiceProvider
        })
      })

      if (response.ok) {
        const result = await response.json()
        setAvailableModels(result.availableModels || [])
        setShowAvailableModels(true)
        setSelectedModels([])
      } else {
        const error = await response.json()
        alert(`Error: ${error.error}`)
      }
    } catch (error) {
      console.error('Error fetching models:', error)
      alert(`Failed to fetch models from ${selectedServiceProvider}`)
    } finally {
      setIsFetching(false)
    }
  }

  const addSelectedModelsToplan = async () => {
    if (!selectedPlan || selectedModels.length === 0) {
      alert(selectedModels.length === 0 ? t('noModelsSelected') : t('noPlanSelected'))
      return
    }

    try {
      setIsAdding(true)
      
      const selectedModelData = availableModels.filter(model => 
        selectedModels.includes(model.modelId)
      )
      
      const response = await fetch('/api/admin/models', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          action: 'add',
          planId: selectedPlan,
          selectedModels: selectedModelData
        })
      })

      if (response.ok) {
        const result = await response.json()
        await loadInitialData() // 重新加载数据
        setShowAvailableModels(false)
        setSelectedModels([])
        alert(`${result.models?.length || 0} ${t('modelsAdded')}`)
      } else {
        const error = await response.json()
        alert(`Error: ${error.error}`)
      }
    } catch (error) {
      console.error('Error adding models:', error)
      alert('Failed to add models to plan')
    } finally {
      setIsAdding(false)
    }
  }

  const toggleModelStatus = async (modelId: string, currentStatus: boolean) => {
    try {
      const response = await fetch('/api/admin/models', {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          modelId,
          isActive: !currentStatus
        })
      })

      if (response.ok) {
        await loadInitialData()
      } else {
        const error = await response.json()
        alert(`Error: ${error.error}`)
      }
    } catch (error) {
      console.error('Error updating model status:', error)
      alert('Failed to update model status')
    }
  }

  const removeModel = async (modelId: string) => {
    if (!confirm('Are you sure you want to remove this model?')) {
      return
    }

    try {
      const response = await fetch(`/api/admin/models?id=${modelId}`, {
        method: 'DELETE'
      })

      if (response.ok) {
        await loadInitialData()
      } else {
        const error = await response.json()
        alert(`Error: ${error.error}`)
      }
    } catch (error) {
      console.error('Error removing model:', error)
      alert('Failed to remove model')
    }
  }

  const toggleModelSelection = (modelId: string) => {
    setSelectedModels(prev => 
      prev.includes(modelId) 
        ? prev.filter(id => id !== modelId)
        : [...prev, modelId]
    )
  }

  const getModelsByPlan = (planId: string) => {
    return models.filter(model => model.subscriptionPlanId === planId)
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <LoadingSpinner size="lg" />
          <p className="mt-4 text-muted-foreground">{t('loadingModels')}</p>
        </div>
      </div>
    )
  }

  return (
    <div className="container mx-auto px-4 py-8 max-w-7xl">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-foreground mb-2">{t('modelsConfig')}</h1>
        <p className="text-muted-foreground">
          {t('modelsConfigDesc')}
        </p>
      </div>

      {/* Add Models Section */}
      <Card className="p-6 mb-8">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-xl font-semibold mb-2 flex items-center">
              <Plus className="h-5 w-5 mr-2" />
              {t('addModelsTo')} {selectedPlan && plans.find(p => p.id === selectedPlan)?.displayName}
            </h2>
            <p className="text-muted-foreground">
              {t('syncFromOpenRouterDesc')}
            </p>
          </div>
        </div>
        
        <div className="space-y-4">
          {/* Plan Selection */}
          <div>
            <label className="block text-sm font-medium mb-2">{t('selectPlan')}</label>
            <select
              value={selectedPlan}
              onChange={(e) => {
                setSelectedPlan(e.target.value)
                setShowAvailableModels(false)
                setSelectedModels([])
              }}
              className="w-full md:w-64 bg-background border border-input rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
            >
              <option value="">{t('selectPlanPlaceholder')}</option>
              {plans.map(plan => (
                <option key={plan.id} value={plan.id}>
                  {plan.displayName}
                </option>
              ))}
            </select>
          </div>

          {/* Service Provider Selection */}
          {selectedPlan && (
            <div>
              <label className="block text-sm font-medium mb-2">Service Provider</label>
              <select
                value={selectedServiceProvider}
                onChange={(e) => {
                  setSelectedServiceProvider(e.target.value as 'openrouter' | 'replicate' | 'uniapi' | 'fal')
                  setShowAvailableModels(false)
                  setSelectedModels([])
                }}
                className="w-full md:w-64 bg-background border border-input rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
              >
                <option value="openrouter">OpenRouter (Text Models)</option>
                <option value="replicate">Replicate (Image/Video/Audio Models)</option>
                <option value="uniapi">UniAPI (Multi-modal Models)</option>
                <option value="fal">Fal.ai (AI Generation Models)</option>
              </select>
            </div>
          )}

          {/* Fetch Models Button */}
          {selectedPlan && (
            <div className="flex items-center space-x-4">
              <Button
                onClick={fetchModelsFromProvider}
                disabled={isFetching}
                className="flex items-center space-x-2"
              >
                <RefreshCw className={`h-4 w-4 ${isFetching ? 'animate-spin' : ''}`} />
                <span>{isFetching ? `Syncing ${selectedServiceProvider} models...` : `Fetch ${selectedServiceProvider} models`}</span>
              </Button>
              
              {showAvailableModels && (
                <div className="text-sm text-muted-foreground">
                  {availableModels.length} models available • {selectedModels.length} selected
                </div>
              )}
            </div>
          )}

          {/* Available Models Selection */}
          {showAvailableModels && availableModels.length > 0 && (
            <div className="border border-border rounded-lg p-4">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-medium">{t('availableModels')} ({availableModels.length})</h3>
                <Button
                  onClick={addSelectedModelsToplan}
                  disabled={selectedModels.length === 0 || isAdding}
                  size="sm"
                >
                  {isAdding ? (
                    <>
                      <LoadingSpinner size="sm" />
                      <span className="ml-2">{t('addingModels')}</span>
                    </>
                  ) : (
                    `${t('addSelectedModels')} (${selectedModels.length})`
                  )}
                </Button>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 max-h-96 overflow-y-auto">
                {availableModels.map(model => {
                  const isSelected = selectedModels.includes(model.modelId)
                  const isAlreadyAdded = models.some(m => 
                    m.modelId === model.modelId && m.subscriptionPlanId === selectedPlan
                  )
                  
                  return (
                    <div
                      key={model.modelId}
                      className={`border rounded-lg p-4 cursor-pointer transition-colors ${
                        isAlreadyAdded 
                          ? 'border-yellow-300 bg-yellow-50 dark:bg-yellow-900/20' 
                          : isSelected 
                            ? 'border-primary bg-primary/5' 
                            : 'border-border hover:bg-accent'
                      }`}
                      onClick={() => !isAlreadyAdded && toggleModelSelection(model.modelId)}
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex-1 min-w-0">
                          <div className="mb-2">
                            <h4 className="font-medium text-base truncate mb-2">{model.name}</h4>
                            <div className="flex flex-wrap gap-1">
                              <Badge variant="secondary" className="text-xs">
                                {model.provider}
                              </Badge>
                              <Badge variant="outline" className="text-xs">
                                {model.outputType}
                              </Badge>
                              <Badge variant="outline" className="text-xs">
                                {model.serviceProvider}
                              </Badge>
                            </div>
                          </div>
                          <div className="flex items-center space-x-2 text-xs text-muted-foreground">
                            {model.maxTokens && (
                              <span className="flex items-center">
                                <Zap className="h-3 w-3 mr-1" />
                                {model.maxTokens.toLocaleString()}
                              </span>
                            )}
                            {model.inputCostPer1k && (
                              <span className="flex items-center">
                                <DollarSign className="h-3 w-3 mr-1" />
                                ${model.inputCostPer1k.toFixed(4)}
                              </span>
                            )}
                          </div>
                          {isAlreadyAdded && (
                            <div className="flex items-center mt-1 text-xs text-yellow-600 dark:text-yellow-400">
                              <AlertCircle className="h-3 w-3 mr-1" />
                              Already added
                            </div>
                          )}
                        </div>
                        
                        {!isAlreadyAdded && (
                          <input
                            type="checkbox"
                            checked={isSelected}
                            onChange={(e) => e.stopPropagation()}
                            className="h-4 w-4 text-primary focus:ring-primary border-input rounded"
                          />
                        )}
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
          )}
        </div>
      </Card>

      {/* Current Models by Plan */}
      <div className="space-y-6">
        {plans.map(plan => {
          const planModels = getModelsByPlan(plan.id)
          
          return (
            <Card key={plan.id} className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <h2 className="text-xl font-semibold text-foreground">
                    {plan.displayName}
                  </h2>
                  <p className="text-sm text-muted-foreground">
                    {planModels.length} {t('planModelsCount')}
                  </p>
                </div>
              </div>
              
              {planModels.length === 0 ? (
                <div className="text-center py-8">
                  <Database className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <p className="text-muted-foreground mb-2">{t('noModelsConfigured')}</p>
                  <p className="text-xs text-muted-foreground">
                    Select this plan above and fetch models to get started
                  </p>
                </div>
              ) : (
                <div className="space-y-3">
                  {planModels.map(model => (
                    <div 
                      key={model.id} 
                      className="border border-border rounded-lg p-4"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex-1">
                          <div className="flex items-center space-x-3 mb-2">
                            <h3 className="font-medium text-foreground">{model.name}</h3>
                            <Badge variant="secondary" className="text-xs">
                              {model.provider}
                            </Badge>
                            <Badge variant="outline" className="text-xs">
                              {model.outputType}
                            </Badge>
                            <Badge variant="outline" className="text-xs">
                              {model.serviceProvider}
                            </Badge>
                            <Badge
                              variant={model.isActive ? "default" : "outline"}
                              className="text-xs"
                            >
                              {model.isActive ? t('modelEnabled') : t('modelDisabled')}
                            </Badge>
                          </div>
                          
                          <div className="flex items-center space-x-4 text-sm text-muted-foreground">
                            <span className="flex items-center">
                              <Cpu className="h-3 w-3 mr-1" />
                              {model.modelId}
                            </span>
                            {model.maxTokens && (
                              <span className="flex items-center">
                                <Zap className="h-3 w-3 mr-1" />
                                {model.maxTokens.toLocaleString()} tokens
                              </span>
                            )}
                            {model.inputCostPer1k && (
                              <span className="flex items-center">
                                <DollarSign className="h-3 w-3 mr-1" />
                                ${model.inputCostPer1k.toFixed(4)}/1K in
                              </span>
                            )}
                            {model.outputCostPer1k && (
                              <span className="flex items-center">
                                <DollarSign className="h-3 w-3 mr-1" />
                                ${model.outputCostPer1k.toFixed(4)}/1K out
                              </span>
                            )}
                          </div>
                          
                          {model.description && (
                            <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
                              {model.description}
                            </p>
                          )}
                        </div>
                        
                        <div className="flex items-center space-x-2">
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => toggleModelStatus(model.id, model.isActive)}
                          >
                            {model.isActive ? (
                              <EyeOff className="h-4 w-4" />
                            ) : (
                              <Eye className="h-4 w-4" />
                            )}
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => removeModel(model.id)}
                            className="text-red-600 hover:text-red-700"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </Card>
          )
        })}
      </div>
    </div>
  )
}