import { useState, useEffect } from 'react'
import { useAuth } from '../contexts/AuthContext'

const ProvidersSection = () => {
  const { authFetch } = useAuth()
  const [providers, setProviders] = useState([])
  const [loading, setLoading] = useState(true)
  const [showConfigModal, setShowConfigModal] = useState(false)
  const [selectedProvider, setSelectedProvider] = useState(null)
  const [configValues, setConfigValues] = useState({})
  const [testing, setTesting] = useState(false)
  const [testResult, setTestResult] = useState(null)

  useEffect(() => {
    fetchProviders()
  }, [authFetch])

  const fetchProviders = async () => {
    try {
      const response = await authFetch('/api/providers')
      if (response.ok) {
        const data = await response.json()
        // Definiere feste Reihenfolge der Provider
        const providerOrder = ['dummy-ca', 'autodns', 'hetzner']
        const sortedProviders = providerOrder
          .map(id => data.find(p => p.id === id))
          .filter(p => p !== undefined)
          .concat(data.filter(p => !providerOrder.includes(p.id)))
        setProviders(sortedProviders)
      }
    } catch (err) {
      console.error('Error fetching providers:', err)
    } finally {
      setLoading(false)
    }
  }

  const handleToggleProvider = async (providerId, currentEnabled) => {
    try {
      const response = await authFetch(`/api/providers/${providerId}/enabled`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ enabled: !currentEnabled }),
      })

      if (response.ok) {
        fetchProviders()
      } else {
        alert('Fehler beim Ändern des Provider-Status')
      }
    } catch (err) {
      console.error('Error toggling provider:', err)
      alert('Fehler beim Ändern des Provider-Status')
    }
  }

  const handleOpenConfig = async (provider) => {
    setSelectedProvider(provider)
    setTestResult(null)
    
    // Lade aktuelle Konfiguration
    try {
      const response = await authFetch(`/api/providers/${provider.id}`)
      if (response.ok) {
        const data = await response.json()
        // Initialisiere Config-Werte
        const initialValues = {}
        provider.settings.forEach(setting => {
          if (data.config && data.config[setting.name] !== undefined) {
            // Wenn Wert "***" ist, bedeutet das, dass es ein Passwort ist - leer lassen
            initialValues[setting.name] = data.config[setting.name] === '***' ? '' : data.config[setting.name]
          } else {
            initialValues[setting.name] = setting.default || ''
          }
        })
        setConfigValues(initialValues)
      }
    } catch (err) {
      console.error('Error fetching provider config:', err)
      // Initialisiere mit leeren Werten
      const initialValues = {}
      provider.settings.forEach(setting => {
        initialValues[setting.name] = setting.default || ''
      })
      setConfigValues(initialValues)
    }
    
    setShowConfigModal(true)
  }

  const handleCloseConfig = () => {
    setShowConfigModal(false)
    setSelectedProvider(null)
    setConfigValues({})
    setTestResult(null)
  }

  const handleConfigChange = (name, value) => {
    setConfigValues({
      ...configValues,
      [name]: value,
    })
  }

  const handleTestConnection = async () => {
    if (!selectedProvider) return

    setTesting(true)
    setTestResult(null)

    try {
      const response = await authFetch(`/api/providers/${selectedProvider.id}/test`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ settings: configValues }),
      })

      const result = await response.json()
      setTestResult(result)
    } catch (err) {
      console.error('Error testing connection:', err)
      setTestResult({
        success: false,
        message: 'Fehler beim Testen der Verbindung',
      })
    } finally {
      setTesting(false)
    }
  }

  const handleSaveConfig = async () => {
    if (!selectedProvider) return

    try {
      const response = await authFetch(`/api/providers/${selectedProvider.id}/config`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ settings: configValues }),
      })

      if (response.ok) {
        handleCloseConfig()
        fetchProviders()
      } else {
        const error = await response.text()
        alert(`Fehler beim Speichern: ${error}`)
      }
    } catch (err) {
      console.error('Error saving config:', err)
      alert('Fehler beim Speichern der Konfiguration')
    }
  }

  if (loading) {
    return (
      <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 transition-all duration-300">
        <h2 className="text-2xl font-semibold text-white mb-4 transition-colors duration-300">
          SSL Certificate Providers
        </h2>
        <p className="text-slate-400 transition-colors duration-300">Lade Provider...</p>
      </div>
    )
  }

  return (
    <>
      <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 transition-all duration-300">
        <h2 className="text-2xl font-semibold text-white mb-4 transition-colors duration-300">
          SSL Certificate Providers
        </h2>
        <div className="space-y-3">
          {providers.map((provider) => (
            <div
              key={provider.id}
              className="bg-slate-700/50 rounded-lg p-4 border border-slate-600/50 transition-all duration-300"
            >
              <div className="flex items-center justify-between">
                <div className="flex-1">
                  <h3 className="text-lg font-semibold text-white mb-1 transition-colors duration-300">
                    {provider.displayName}
                  </h3>
                  <p className="text-sm text-slate-300 mb-2 transition-colors duration-300">
                    {provider.description}
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => handleOpenConfig(provider)}
                    className="p-2 text-slate-400 hover:text-white hover:bg-slate-700/50 rounded-lg transition-colors"
                    title="Konfiguration"
                    aria-label="Konfiguration"
                  >
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                      <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                  </button>
                  <label className="relative inline-flex items-center cursor-pointer">
                    <input
                      type="checkbox"
                      checked={provider.enabled}
                      onChange={() => handleToggleProvider(provider.id, provider.enabled)}
                      className="sr-only peer"
                    />
                    <div className="w-11 h-6 bg-slate-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 transition-all duration-300"></div>
                  </label>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Configuration Modal */}
      {showConfigModal && selectedProvider && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 transition-colors duration-300">
          <div className="bg-slate-800 rounded-xl shadow-2xl border border-slate-600/50 max-w-2xl w-full p-6 transition-all duration-300">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-2xl font-bold text-white transition-colors duration-300">
                {selectedProvider.displayName} - Konfiguration
              </h3>
              <button
                onClick={handleCloseConfig}
                className="p-2 text-slate-400 hover:text-white hover:bg-slate-700/50 rounded-lg transition-colors"
                aria-label="Schließen"
              >
                <svg
                  className="w-5 h-5"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <div className="space-y-4 mb-6">
              {selectedProvider.settings.length > 0 ? (
                selectedProvider.settings.map((setting) => (
                  <div key={setting.name}>
                    <label className="block text-sm font-medium text-slate-200 mb-2 transition-colors duration-300">
                      {setting.label}
                      {setting.required && <span className="text-red-400 ml-1">*</span>}
                    </label>
                    {setting.description && (
                      <p className="text-xs text-slate-400 mb-2 transition-colors duration-300">{setting.description}</p>
                    )}
                    {setting.type === 'password' ? (
                      <input
                        type="password"
                        value={configValues[setting.name] || ''}
                        onChange={(e) => handleConfigChange(setting.name, e.target.value)}
                        className="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                        placeholder={setting.label}
                        required={setting.required}
                      />
                    ) : (
                      <input
                        type={setting.type || 'text'}
                        value={configValues[setting.name] || ''}
                        onChange={(e) => handleConfigChange(setting.name, e.target.value)}
                        className="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                        placeholder={setting.label}
                        required={setting.required}
                      />
                    )}
                  </div>
                ))
              ) : (
                <p className="text-slate-300 text-center py-4 transition-colors duration-300">
                  Dieser Provider benötigt keine Konfiguration.
                </p>
              )}
            </div>

            {testResult && (
              <div
                className={`mb-4 p-4 rounded-lg border ${
                  testResult.success
                    ? 'bg-green-500/20 border-green-500/50'
                    : 'bg-red-500/20 border-red-500/50'
                }`}
              >
                <p
                  className={`text-sm ${
                    testResult.success ? 'text-green-300' : 'text-red-300'
                  }`}
                >
                  {testResult.success ? '✅' : '❌'} {testResult.message}
                </p>
              </div>
            )}

            <div className="flex gap-3">
              {selectedProvider.settings.length > 0 && (
                <button
                  onClick={handleTestConnection}
                  disabled={testing}
                  className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-slate-700 disabled:text-slate-500 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-all duration-200"
                >
                  {testing ? 'Teste...' : 'Verbindung testen'}
                </button>
              )}
              <button
                onClick={handleSaveConfig}
                className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200"
              >
                Speichern
              </button>
              <button
                onClick={handleCloseConfig}
                className="px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white font-semibold rounded-lg transition-colors duration-200"
              >
                Abbrechen
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}

export default ProvidersSection

