'use client'

import { useState, useEffect } from 'react'

interface AIStatus {
  provider: string
  model: string
  is_available: boolean
  is_mock: boolean
  error?: string | null
}

interface LLMProviderToggleProps {
  aiStatus: AIStatus | null
  onStatusChange?: () => void
}

/**
 * LLM Provider Toggle Component
 *
 * Allows developers to switch between:
 * - Anthropic Claude API (Cloud, kostenpflichtig)
 * - Self-Hosted Ollama (Lokal auf Mac Mini, kostenlos, DSGVO-konform)
 */
export default function LLMProviderToggle({ aiStatus, onStatusChange }: LLMProviderToggleProps) {
  const [switching, setSwitching] = useState(false)
  const [showDetails, setShowDetails] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'

  const isAnthropicActive = aiStatus?.provider === 'anthropic'
  const isSelfHostedActive = aiStatus?.provider === 'self_hosted'
  const isMockActive = aiStatus?.provider === 'mock'

  const switchProvider = async (newProvider: 'anthropic' | 'self_hosted') => {
    setSwitching(true)
    setError(null)

    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/ai/switch-provider`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ provider: newProvider }),
      })

      if (res.ok) {
        const result = await res.json()
        console.log('Provider switched:', result)
        onStatusChange?.()
      } else {
        const errorText = await res.text()
        setError(`Fehler: ${errorText}`)
      }
    } catch (err) {
      console.error('Failed to switch provider:', err)
      setError('Verbindung zum Backend fehlgeschlagen')
    } finally {
      setSwitching(false)
    }
  }

  // Determine the badge color based on provider
  const getBadgeColor = () => {
    if (isMockActive) return 'bg-gray-100 text-gray-700 border-gray-300'
    if (isSelfHostedActive) return 'bg-green-100 text-green-700 border-green-300'
    if (isAnthropicActive) return 'bg-purple-100 text-purple-700 border-purple-300'
    return 'bg-gray-100 text-gray-600 border-gray-200'
  }

  const getProviderIcon = () => {
    if (isSelfHostedActive) {
      // Local/Server icon
      return (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
        </svg>
      )
    }
    if (isAnthropicActive) {
      // Cloud icon
      return (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
        </svg>
      )
    }
    // Mock/Unknown icon
    return (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    )
  }

  return (
    <div className="relative">
      {/* Toggle Button */}
      <button
        onClick={() => setShowDetails(!showDetails)}
        disabled={switching}
        className={`
          inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-lg border transition-all
          ${getBadgeColor()}
          hover:shadow-md cursor-pointer
          ${switching ? 'opacity-50' : ''}
        `}
      >
        {getProviderIcon()}
        <span>
          {isSelfHostedActive && 'Lokal (DSGVO)'}
          {isAnthropicActive && 'Anthropic API'}
          {isMockActive && 'Mock (Test)'}
          {!aiStatus && 'Laden...'}
        </span>
        <svg
          className={`w-4 h-4 transition-transform ${showDetails ? 'rotate-180' : ''}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {/* Dropdown Panel */}
      {showDetails && (
        <div className="absolute right-0 mt-2 w-96 bg-white rounded-xl shadow-xl border border-slate-200 z-50 overflow-hidden">
          {/* Header */}
          <div className="px-4 py-3 bg-slate-50 border-b border-slate-200">
            <h3 className="font-semibold text-slate-800">KI-Provider Einstellungen</h3>
            <p className="text-xs text-slate-500 mt-1">
              Wechseln Sie zwischen Cloud-API und lokalem Modell
            </p>
          </div>

          {/* Current Status */}
          <div className="px-4 py-3 border-b border-slate-100">
            <div className="flex items-center gap-2 text-sm">
              <span className="text-slate-500">Aktuell:</span>
              <span className="font-medium text-slate-800">{aiStatus?.provider || 'Unbekannt'}</span>
              <span className="text-slate-400">|</span>
              <span className="text-slate-600 text-xs">{aiStatus?.model || 'Kein Modell'}</span>
            </div>
          </div>

          {/* Provider Options */}
          <div className="p-3 space-y-2">
            {/* Self-Hosted Option */}
            <button
              onClick={() => switchProvider('self_hosted')}
              disabled={switching || isSelfHostedActive}
              className={`
                w-full p-3 rounded-lg border text-left transition-all
                ${isSelfHostedActive
                  ? 'bg-green-50 border-green-300 ring-2 ring-green-200'
                  : 'bg-white border-slate-200 hover:border-green-300 hover:bg-green-50'
                }
                ${switching ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
              `}
            >
              <div className="flex items-start gap-3">
                <div className={`p-2 rounded-lg ${isSelfHostedActive ? 'bg-green-200' : 'bg-slate-100'}`}>
                  <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
                  </svg>
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <span className="font-semibold text-slate-800">Self-Hosted (Ollama)</span>
                    <span className="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">DSGVO</span>
                    {isSelfHostedActive && (
                      <span className="px-2 py-0.5 text-xs bg-green-500 text-white rounded-full">Aktiv</span>
                    )}
                  </div>
                  <p className="text-xs text-slate-500 mt-1">
                    Lokales LLM auf dem Mac Mini M4 Pro (64GB RAM).
                  </p>
                  <div className="flex items-center gap-4 mt-2 text-xs">
                    <span className="text-green-600 font-medium">Kostenlos</span>
                    <span className="text-green-600">Daten bleiben intern</span>
                  </div>
                </div>
              </div>
            </button>

            {/* Anthropic Option */}
            <button
              onClick={() => switchProvider('anthropic')}
              disabled={switching || isAnthropicActive}
              className={`
                w-full p-3 rounded-lg border text-left transition-all
                ${isAnthropicActive
                  ? 'bg-purple-50 border-purple-300 ring-2 ring-purple-200'
                  : 'bg-white border-slate-200 hover:border-purple-300 hover:bg-purple-50'
                }
                ${switching ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
              `}
            >
              <div className="flex items-start gap-3">
                <div className={`p-2 rounded-lg ${isAnthropicActive ? 'bg-purple-200' : 'bg-slate-100'}`}>
                  <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                  </svg>
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <span className="font-semibold text-slate-800">Anthropic Claude API</span>
                    <span className="px-2 py-0.5 text-xs bg-yellow-100 text-yellow-700 rounded-full">Cloud</span>
                    {isAnthropicActive && (
                      <span className="px-2 py-0.5 text-xs bg-purple-500 text-white rounded-full">Aktiv</span>
                    )}
                  </div>
                  <p className="text-xs text-slate-500 mt-1">
                    Cloud-basierte KI von Anthropic (claude-sonnet-4).
                  </p>
                  <div className="flex items-center gap-4 mt-2 text-xs">
                    <span className="text-yellow-600 font-medium">Kostenpflichtig</span>
                    <span className="text-yellow-600">Daten gehen zu Anthropic</span>
                  </div>
                </div>
              </div>
            </button>
          </div>

          {/* Error Message */}
          {error && (
            <div className="px-4 py-2 bg-red-50 border-t border-red-200">
              <p className="text-sm text-red-600">{error}</p>
            </div>
          )}

          {/* Footer Info */}
          <div className="px-4 py-3 bg-slate-50 border-t border-slate-200">
            <p className="text-xs text-slate-500">
              <strong>Hinweis:</strong> Die Umschaltung gilt nur fuer diese Session.
              Fuer permanente Aenderungen docker-compose.yml anpassen.
            </p>
          </div>
        </div>
      )}

      {/* Click outside to close */}
      {showDetails && (
        <div
          className="fixed inset-0 z-40"
          onClick={() => setShowDetails(false)}
        />
      )}
    </div>
  )
}