import React, { useState } from "react";
import { useQuery } from "@tanstack/react-query";

// Helper function to generate map coordinates based on address
function generateMapUrl(address: any) {
  // Use coordinates from config or default to Kiel coordinates
  const lat = address.latitude || 54.3233;
  const lon = address.longitude || 10.1228;
  
  // Generate bounding box around the coordinates (0.05 degrees ≈ 5km radius)
  const bbox = `${lon - 0.05},${lat - 0.05},${lon + 0.05},${lat + 0.05}`;
  
  const embedUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat},${lon}`;
  const fullUrl = `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=16/${lat}/${lon}`;
  
  return { embedUrl, fullUrl };
}

export default function LegalPage() {
  const [activeSection, setActiveSection] = useState<"impressum" | "datenschutz">("impressum");

  const { data: legalConfig, isLoading, error } = useQuery({
    queryKey: ["legal", "config"],
    queryFn: async () => {
      console.log("Fetching legal config...");
      try {
        const response = await fetch("/api/legal-config");
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        console.log("Legal config result:", result);
        return result;
      } catch (err) {
        console.error("Legal config error:", err);
        throw err;
      }
    },
    retry: false,
  });

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center">
        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
          <div className="flex items-center justify-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-500"></div>
            <span className="ml-3 text-gray-600">Lade rechtliche Informationen...</span>
          </div>
        </div>
      </div>
    );
  }

  if (error || !legalConfig) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center">
        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
          <div className="text-center">
            <div className="w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
              <svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
              </svg>
            </div>
            <h2 className="text-xl font-bold text-gray-900 mb-2">Fehler</h2>
            <p className="text-gray-600 mb-4">
              Die rechtlichen Informationen konnten nicht geladen werden.
              {error && (
                <><br /><span className="text-sm text-red-600">Fehler: {error.message}</span></>
              )}
            </p>
            <a 
              href="/" 
              className="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors"
            >
              Zur Startseite
            </a>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50">
      <div className="max-w-4xl mx-auto px-4 py-8">
        {/* Header */}
        <div className="bg-white rounded-lg shadow-lg mb-6">
          <div className="px-6 py-4 border-b border-gray-200">
            <div 
              className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity"
              onClick={() => window.location.href = '/'}
            >
              <img
                src="/assets/stargilnails_logo_transparent_112.png"
                alt="Stargil Nails Logo"
                className="w-12 h-12 object-contain"
              />
              <div>
                <h1 className="text-2xl font-bold text-gray-900">Rechtliche Informationen</h1>
                <p className="text-sm text-gray-600">Impressum und Datenschutz</p>
              </div>
            </div>
          </div>
          
          {/* Tab Navigation */}
          <div className="px-6 py-4">
            <div className="flex space-x-1 bg-gray-100 p-1 rounded-lg">
              <button
                onClick={() => setActiveSection("impressum")}
                className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
                  activeSection === "impressum"
                    ? "bg-white text-pink-600 shadow-sm"
                    : "text-gray-600 hover:text-gray-900"
                }`}
              >
                📋 Impressum
              </button>
              <button
                onClick={() => setActiveSection("datenschutz")}
                className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
                  activeSection === "datenschutz"
                    ? "bg-white text-pink-600 shadow-sm"
                    : "text-gray-600 hover:text-gray-900"
                }`}
              >
                🔒 Datenschutz
              </button>
            </div>
          </div>
        </div>

        {/* Content */}
        <div className="bg-white rounded-lg shadow-lg p-6">
          {activeSection === "impressum" ? (
            <div className="prose max-w-none">
              <h2 className="text-2xl font-bold text-gray-900 mb-6">Impressum</h2>
              
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Anbieter</h3>
                  <p className="text-gray-700">
                    <strong>{legalConfig.companyName}</strong><br />
                    Inhaber: {legalConfig.ownerName}
                  </p>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Anschrift</h3>
                  <p className="text-gray-700">
                    {legalConfig.address.street}<br />
                    {legalConfig.address.postalCode} {legalConfig.address.city}<br />
                    {legalConfig.address.country}
                  </p>
                  
                  {/* Map */}
                  <div className="mt-4">
                    {(() => {
                      const { embedUrl, fullUrl } = generateMapUrl(legalConfig.address);
                      return (
                        <>
                          <iframe
                            src={embedUrl}
                            width="100%"
                            height="300"
                            style={{ border: 0 }}
                            allowFullScreen
                            loading="lazy"
                            referrerPolicy="no-referrer-when-downgrade"
                            title={`Karte der Umgebung von ${legalConfig.companyName}`}
                          ></iframe>
                          <div className="mt-2">
                            <a 
                              href={fullUrl}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="text-sm text-blue-600 hover:text-blue-800 underline"
                            >
                              Größere Karte anzeigen
                            </a>
                          </div>
                        </>
                      );
                    })()}
                  </div>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Kontakt</h3>
                  <p className="text-gray-700">
                    <strong>Telefon:</strong> {legalConfig.contact.phone}<br />
                    <strong>E-Mail:</strong> {legalConfig.contact.email}<br />
                    <strong>Website:</strong> {legalConfig.contact.website}
                  </p>
                </div>

                {legalConfig.businessDetails.taxId && (
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Geschäftliche Angaben</h3>
                    <p className="text-gray-700">
                      {legalConfig.businessDetails.taxId && (
                        <>Steuernummer: {legalConfig.businessDetails.taxId}<br /></>
                      )}
                      {legalConfig.businessDetails.vatId && (
                        <>USt-IdNr.: {legalConfig.businessDetails.vatId}<br /></>
                      )}
                      {legalConfig.businessDetails.commercialRegister && (
                        <>Handelsregister: {legalConfig.businessDetails.commercialRegister}<br /></>
                      )}
                      Verantwortlich für den Inhalt: {legalConfig.businessDetails.responsibleForContent}
                    </p>
                  </div>
                )}

                <div className="bg-gray-50 p-4 rounded-lg">
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Haftungsausschluss</h3>
                  <p className="text-sm text-gray-600">
                    Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, 
                    Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. 
                    Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten 
                    nach den allgemeinen Gesetzen verantwortlich.
                  </p>
                </div>
              </div>
            </div>
          ) : (
            <div className="prose max-w-none">
              <h2 className="text-2xl font-bold text-gray-900 mb-6">Datenschutzerklärung</h2>
              
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Verantwortlicher</h3>
                  <p className="text-gray-700">
                    {legalConfig.dataProtection.responsiblePerson}<br />
                    E-Mail: {legalConfig.dataProtection.email}
                  </p>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Zweck der Datenverarbeitung</h3>
                  <p className="text-gray-700">{legalConfig.dataProtection.purpose}</p>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Rechtsgrundlage</h3>
                  <p className="text-gray-700">{legalConfig.dataProtection.legalBasis}</p>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Datenspeicherung</h3>
                  <p className="text-gray-700">{legalConfig.dataProtection.dataRetention}</p>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Ihre Rechte</h3>
                  <p className="text-gray-700">{legalConfig.dataProtection.rights}</p>
                </div>

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Cookies</h3>
                  <p className="text-gray-700">{legalConfig.dataProtection.cookies}</p>
                </div>

                {legalConfig.dataProtection.thirdPartyServices.length > 0 && (
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Drittanbieter-Services</h3>
                    <ul className="list-disc list-inside text-gray-700 space-y-1">
                      {legalConfig.dataProtection.thirdPartyServices.map((service, index) => (
                        <li key={index}>{service}</li>
                      ))}
                    </ul>
                  </div>
                )}

                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">Datensicherheit</h3>
                  <p className="text-gray-700">{legalConfig.dataProtection.dataSecurity}</p>
                </div>

                <div className="bg-blue-50 p-4 rounded-lg">
                  <h3 className="text-lg font-semibold text-blue-900 mb-2">Kontakt zum Datenschutz</h3>
                  <p className="text-blue-800">{legalConfig.dataProtection.contactDataProtection}</p>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Back to Home */}
        <div className="text-center mt-6">
          <a 
            href="/" 
            className="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors"
          >
            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Zurück zur Startseite
          </a>
        </div>
      </div>
    </div>
  );
}