"use client";

import { useState, useEffect } from "react";
import { API_BASE_URL } from "@/utils/api-config";

/**
 * SSLWarning - Zeigt eine Warnung für selbstsignierte SSL-Zertifikate an
 * und bietet eine Möglichkeit, diese zu akzeptieren
 */
export function SSLWarning() {
  const [showWarning, setShowWarning] = useState(false);
  
  useEffect(() => {
    // Prüfe, ob die Warnung angezeigt werden soll
    const hasSeenWarning = localStorage.getItem("ssl-warning-dismissed");
    
    // Zeige die Warnung nur an, wenn der Benutzer sie noch nicht gesehen hat
    if (!hasSeenWarning) {
      setShowWarning(true);
    }
  }, []);
  
  // Teste die Backend-Verbindung und prüfe auf Zertifikatsprobleme
  useEffect(() => {
    if (!showWarning) return;
    
    const testConnection = async () => {
      try {
        // Teste HTTPS-Verbindung
        await fetch(`${API_BASE_URL}/health`, { 
          method: 'GET',
          mode: 'no-cors' // Verwende no-cors für SSL-Tests
        });
        // Bei erfolgreicher Verbindung: Blende die Warnung aus
        setShowWarning(false);
      } catch (error) {
        console.warn("SSL-Verbindungstest fehlgeschlagen:", error);
        // Bei Fehlern: Zeige die Warnung an
        setShowWarning(true);
      }
    };
    
    testConnection();
  }, [showWarning]);
  
  const dismissWarning = () => {
    localStorage.setItem("ssl-warning-dismissed", "true");
    setShowWarning(false);
  };
  
  const openBackendDirectly = () => {
    // Öffne das Backend direkt in einem neuen Tab
    window.open(API_BASE_URL, "_blank");
  };
  
  if (!showWarning) {
    return null;
  }
  
  return (
    <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4 mx-8 mt-4 rounded shadow-md">
      <div className="flex items-start">
        <div className="flex-grow">
          <p className="font-bold">SSL-Sicherheitshinweis</p>
          <p className="text-sm mt-1">
            Diese Anwendung verwendet ein selbstsigniertes SSL-Zertifikat für sichere Kommunikation.
            Um Verbindungsprobleme zu vermeiden, öffnen Sie bitte einmalig die folgende URL und akzeptieren Sie das Zertifikat:
          </p>
          <button 
            onClick={openBackendDirectly}
            className="mt-2 text-blue-600 hover:text-blue-800 underline text-sm"
          >
            Backend-Verbindung bestätigen
          </button>
        </div>
        <button 
          onClick={dismissWarning}
          className="ml-4 text-gray-500 hover:text-gray-700"
          aria-label="Warnung schließen"
        >
          ✕
        </button>
      </div>
    </div>
  );
}