"use client";

import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";

interface Device {
  id: string;
  name: string;
  isActive: boolean;
}

interface MqttCredential {
  id: number;
  device_id: string;
  mqtt_username: string;
  mqtt_password_hash: string;
  enabled: number;
  created_at: string;
  updated_at: string;
  device_name: string;
  mqtt_password?: string; // Nur bei Erstellung/Regenerierung vorhanden
}

interface AclRule {
  id: number;
  device_id: string;
  topic_pattern: string;
  permission: 'read' | 'write' | 'readwrite';
  created_at: string;
}

interface SyncStatus {
  pending_changes: number;
  last_sync_at: string | null;
  last_sync_status: string;
}

export default function MqttPage() {
  const { data: session } = useSession();
  const userRole = (session?.user as any)?.role;
  const isAdmin = userRole === 'ADMIN';

  const [devices, setDevices] = useState<Device[]>([]);
  const [credentials, setCredentials] = useState<MqttCredential[]>([]);
  const [aclRules, setAclRules] = useState<Record<string, AclRule[]>>({});
  const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const [syncing, setSyncing] = useState(false);

  // Modal States
  const [showAddModal, setShowAddModal] = useState(false);
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [showAclModal, setShowAclModal] = useState(false);
  const [selectedDevice, setSelectedDevice] = useState<string | null>(null);
  const [generatedPassword, setGeneratedPassword] = useState<string>("");

  // Form States
  const [addFormData, setAddFormData] = useState({
    device_id: "",
    auto_generate: true,
  });

  const [aclFormData, setAclFormData] = useState({
    device_id: "",
    topic_pattern: "",
    permission: "readwrite" as 'read' | 'write' | 'readwrite',
    mqtt_username: "", // Needed for correct topic pattern
  });

  useEffect(() => {
    if (isAdmin) {
      fetchAll();
    }
  }, [isAdmin]);

  const fetchAll = async () => {
    try {
      await Promise.all([
        fetchDevices(),
        fetchCredentials(),
        fetchSyncStatus(),
      ]);
    } finally {
      setLoading(false);
    }
  };

  const fetchDevices = async () => {
    try {
      const response = await fetch("/api/devices");
      if (!response.ok) throw new Error("Failed to fetch devices");
      const data = await response.json();
      setDevices(data.devices || []);
    } catch (err) {
      console.error("Failed to fetch devices", err);
    }
  };

  const fetchCredentials = async () => {
    try {
      const response = await fetch("/api/mqtt/credentials");
      if (!response.ok) throw new Error("Failed to fetch credentials");
      const data = await response.json();
      setCredentials(data);

      // Lade ACL Regeln für alle Devices mit Credentials
      for (const cred of data) {
        await fetchAclRules(cred.device_id);
      }
    } catch (err) {
      console.error("Failed to fetch credentials", err);
    }
  };

  const fetchAclRules = async (deviceId: string) => {
    try {
      const response = await fetch(`/api/mqtt/acl?device_id=${deviceId}`);
      if (!response.ok) throw new Error("Failed to fetch ACL rules");
      const rules = await response.json();
      setAclRules(prev => ({ ...prev, [deviceId]: rules }));
    } catch (err) {
      console.error("Failed to fetch ACL rules", err);
    }
  };

  const fetchSyncStatus = async () => {
    try {
      const response = await fetch("/api/mqtt/sync");
      if (!response.ok) throw new Error("Failed to fetch sync status");
      const status = await response.json();
      setSyncStatus(status);
    } catch (err) {
      console.error("Failed to fetch sync status", err);
    }
  };

  const handleAddCredentials = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const response = await fetch("/api/mqtt/credentials", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(addFormData),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error || "Failed to create credentials");
      }

      const newCred = await response.json();

      // Zeige generiertes Passwort an
      if (newCred.mqtt_password) {
        setGeneratedPassword(`Username: ${newCred.mqtt_username}\nPassword: ${newCred.mqtt_password}`);
        setSelectedDevice(addFormData.device_id);
        setShowPasswordModal(true);
      }

      await fetchCredentials();
      await fetchSyncStatus();
      setShowAddModal(false);
      setAddFormData({ device_id: "", auto_generate: true });
    } catch (err: any) {
      alert(err.message);
    }
  };

  const handleDeleteCredentials = async (deviceId: string) => {
    if (!confirm("MQTT Credentials für dieses Device löschen?")) return;

    try {
      const response = await fetch(`/api/mqtt/credentials/${deviceId}`, {
        method: "DELETE",
      });

      if (!response.ok) throw new Error("Failed to delete credentials");

      await fetchCredentials();
      await fetchSyncStatus();
    } catch (err: any) {
      alert(err.message);
    }
  };

  const handleRegeneratePassword = async (deviceId: string) => {
    if (!confirm("Passwort neu generieren? Das alte Passwort wird ungültig.")) return;

    try {
      const response = await fetch(`/api/mqtt/credentials/${deviceId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ regenerate_password: true }),
      });

      if (!response.ok) throw new Error("Failed to regenerate password");

      const updated = await response.json();
      if (updated.mqtt_password) {
        setGeneratedPassword(`Username: ${updated.mqtt_username}\nPassword: ${updated.mqtt_password}`);
        setSelectedDevice(deviceId);
        setShowPasswordModal(true);
      }

      await fetchCredentials();
      await fetchSyncStatus();
    } catch (err: any) {
      alert(err.message);
    }
  };

  const handleToggleEnabled = async (deviceId: string, enabled: boolean) => {
    try {
      const response = await fetch(`/api/mqtt/credentials/${deviceId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ enabled }),
      });

      if (!response.ok) throw new Error("Failed to update credentials");

      await fetchCredentials();
      await fetchSyncStatus();
    } catch (err: any) {
      alert(err.message);
    }
  };

  const handleAddAclRule = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const response = await fetch("/api/mqtt/acl", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(aclFormData),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error || "Failed to create ACL rule");
      }

      await fetchAclRules(aclFormData.device_id);
      await fetchSyncStatus();
      setShowAclModal(false);
      setAclFormData({ device_id: "", topic_pattern: "", permission: "readwrite", mqtt_username: "" });
    } catch (err: any) {
      alert(err.message);
    }
  };

  const handleDeleteAclRule = async (ruleId: number, deviceId: string) => {
    if (!confirm("ACL Regel löschen?")) return;

    try {
      const response = await fetch(`/api/mqtt/acl/${ruleId}`, {
        method: "DELETE",
      });

      if (!response.ok) throw new Error("Failed to delete ACL rule");

      await fetchAclRules(deviceId);
      await fetchSyncStatus();
    } catch (err: any) {
      alert(err.message);
    }
  };

  const handleSync = async () => {
    setSyncing(true);
    try {
      const response = await fetch("/api/mqtt/sync", {
        method: "POST",
      });

      const result = await response.json();

      if (result.success) {
        alert(result.message);
      } else {
        alert(`Sync fehlgeschlagen: ${result.message}`);
      }

      await fetchSyncStatus();
    } catch (err: any) {
      alert("Sync fehlgeschlagen: " + err.message);
    } finally {
      setSyncing(false);
    }
  };

  const handleSendCredentialsEmail = async () => {
    if (!selectedDevice) return;

    // Parse username and password from generatedPassword string
    const lines = generatedPassword.split('\n');
    const usernameLine = lines.find(l => l.startsWith('Username:'));
    const passwordLine = lines.find(l => l.startsWith('Password:'));

    if (!usernameLine || !passwordLine) {
      alert('Fehler beim Extrahieren der Credentials');
      return;
    }

    const mqttUsername = usernameLine.replace('Username:', '').trim();
    const mqttPassword = passwordLine.replace('Password:', '').trim();

    try {
      const response = await fetch('/api/mqtt/send-credentials', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          deviceId: selectedDevice,
          mqttUsername,
          mqttPassword,
        }),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error || 'Failed to send email');
      }

      const result = await response.json();
      alert(result.message);
    } catch (err: any) {
      alert('Email senden fehlgeschlagen: ' + err.message);
    }
  };

  if (!isAdmin) {
    return <div className="p-8">Keine Berechtigung</div>;
  }

  if (loading) {
    return <div className="p-8">Lade...</div>;
  }

  const devicesWithoutCredentials = devices.filter(
    d => d.isActive && !credentials.find(c => c.device_id === d.id)
  );

  return (
    <div className="space-y-8">
      {/* Hero Section with Gradient */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-cyan-600 via-blue-700 to-indigo-800 p-8 shadow-xl">
        <div className="absolute top-0 right-0 -mt-4 -mr-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
        <div className="absolute bottom-0 left-0 -mb-4 -ml-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
        <div className="relative">
          <div className="flex justify-between items-center mb-4">
            <div>
              <h2 className="text-4xl font-bold text-white mb-2">MQTT Provisioning</h2>
              <p className="text-cyan-100 text-lg">Verwalte MQTT-Zugangsdaten und Berechtigungen</p>
            </div>
            <div className="flex gap-3">
              {syncStatus && syncStatus.pending_changes > 0 && (
                <span className="px-4 py-2 bg-yellow-400 text-yellow-900 rounded-lg text-sm font-bold shadow-lg">
                  {syncStatus.pending_changes} ausstehende Änderungen
                </span>
              )}
              <button
                onClick={handleSync}
                disabled={syncing || !syncStatus || syncStatus.pending_changes === 0}
                className="px-5 py-2.5 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl hover:from-green-600 hover:to-emerald-700 disabled:from-gray-400 disabled:to-gray-500 font-semibold shadow-lg hover:shadow-xl transition-all"
              >
                {syncing ? "Synchronisiere..." : "🔄 MQTT Sync"}
              </button>
              <button
                onClick={() => setShowAddModal(true)}
                className="px-5 py-2.5 bg-white text-cyan-700 rounded-xl hover:bg-cyan-50 font-semibold shadow-lg hover:shadow-xl transition-all"
              >
                + Device Provisionieren
              </button>
            </div>
          </div>
        </div>
      </div>

      {syncStatus && (
        <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
          <div className="bg-gradient-to-r from-slate-50 to-gray-50 px-6 py-4 border-b border-gray-200">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center text-white text-xl">
                🔄
              </div>
              <h3 className="text-xl font-bold text-gray-900">Sync Status</h3>
            </div>
          </div>
          <div className="p-6">
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-xl border border-blue-100">
                <p className="text-sm font-semibold text-blue-700 uppercase tracking-wide mb-1">Status</p>
                <p className={`text-2xl font-bold ${syncStatus.last_sync_status === 'success' ? 'text-green-600' : 'text-red-600'}`}>
                  {syncStatus.last_sync_status === 'success' ? '✓ Erfolgreich' : '✗ Fehler'}
                </p>
              </div>
              {syncStatus.last_sync_at && (
                <div className="bg-gradient-to-br from-purple-50 to-violet-50 p-4 rounded-xl border border-purple-100">
                  <p className="text-sm font-semibold text-purple-700 uppercase tracking-wide mb-1">Letzter Sync</p>
                  <p className="text-lg font-bold text-purple-900">{new Date(syncStatus.last_sync_at).toLocaleString('de-DE')}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      <div className="space-y-6">
        {credentials.map(cred => {
          const deviceRules = aclRules[cred.device_id] || [];

          return (
            <div key={cred.id} className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow">
              <div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-6 py-5 border-b border-blue-100">
                <div className="flex justify-between items-start">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white text-2xl shadow-lg">
                      📱
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-gray-900">{cred.device_name}</h3>
                      <p className="text-sm text-gray-600">Device ID: <code className="bg-white px-2 py-0.5 rounded font-mono text-xs">{cred.device_id}</code></p>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <button
                      onClick={() => handleToggleEnabled(cred.device_id, !cred.enabled)}
                      className={`px-4 py-2 rounded-lg text-sm font-bold shadow-md ${cred.enabled ? 'bg-gradient-to-r from-green-500 to-emerald-600 text-white' : 'bg-gradient-to-r from-red-500 to-red-600 text-white'}`}
                    >
                      {cred.enabled ? '✓ Aktiviert' : '✗ Deaktiviert'}
                    </button>
                  </div>
                </div>
              </div>
              <div className="p-6">
                <div className="bg-gradient-to-br from-gray-50 to-slate-50 rounded-xl p-4 mb-4 border border-gray-200">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Username</p>
                      <code className="text-sm font-mono text-gray-900 bg-white px-3 py-1.5 rounded-lg border border-gray-200 inline-block">{cred.mqtt_username}</code>
                    </div>
                    <div>
                      <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Erstellt</p>
                      <p className="text-sm text-gray-700">{new Date(cred.created_at).toLocaleString('de-DE')}</p>
                    </div>
                  </div>
                </div>

                <div className="flex gap-2 mb-4">
                  <button
                    onClick={() => handleRegeneratePassword(cred.device_id)}
                    className="flex-1 px-4 py-2.5 bg-gradient-to-r from-yellow-500 to-orange-500 text-white rounded-lg hover:from-yellow-600 hover:to-orange-600 text-sm font-semibold shadow-md hover:shadow-lg transition-all"
                  >
                    🔑 Passwort Reset
                  </button>
                  <button
                    onClick={() => {
                      setAclFormData({
                        device_id: cred.device_id,
                        topic_pattern: `owntracks/${cred.mqtt_username}/#`,
                        permission: "readwrite",
                        mqtt_username: cred.mqtt_username
                      });
                      setShowAclModal(true);
                    }}
                    className="flex-1 px-4 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 text-sm font-semibold shadow-md hover:shadow-lg transition-all"
                  >
                    + ACL Hinzufügen
                  </button>
                  <button
                    onClick={() => handleDeleteCredentials(cred.device_id)}
                    className="px-4 py-2.5 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-lg hover:from-red-700 hover:to-red-800 text-sm font-semibold shadow-md hover:shadow-lg transition-all"
                  >
                    🗑️ Löschen
                  </button>
                </div>

              <div>
                <h4 className="font-bold mb-3 text-gray-900 flex items-center gap-2">
                  <span className="text-lg">🔐</span>
                  ACL Regeln
                </h4>
                {deviceRules.length > 0 ? (
                  <div className="space-y-2">
                    {deviceRules.map(rule => (
                      <div key={rule.id} className="bg-gradient-to-br from-gray-50 to-slate-50 rounded-lg p-4 border border-gray-200 hover:border-blue-300 transition-colors">
                        <div className="flex items-center justify-between">
                          <div className="flex-1">
                            <div className="flex items-center gap-3 mb-2">
                              <code className="text-sm font-mono bg-white px-3 py-1.5 rounded-lg border border-gray-200">{rule.topic_pattern}</code>
                              <span className="px-3 py-1 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg text-xs font-bold">{rule.permission}</span>
                            </div>
                            <p className="text-xs text-gray-500">Erstellt: {new Date(rule.created_at).toLocaleString('de-DE')}</p>
                          </div>
                          <button
                            onClick={() => handleDeleteAclRule(rule.id, cred.device_id)}
                            className="ml-4 px-3 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 text-xs font-semibold"
                          >
                            Löschen
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="bg-gradient-to-br from-gray-50 to-slate-50 rounded-lg p-6 text-center border border-gray-200">
                    <p className="text-sm text-gray-500">Keine ACL Regeln definiert</p>
                  </div>
                )}
              </div>
              </div>
            </div>
          );
        })}

        {credentials.length === 0 && (
          <div className="relative overflow-hidden bg-gradient-to-br from-gray-50 to-slate-50 rounded-2xl shadow-lg p-12 text-center border border-gray-200">
            <div className="absolute top-0 right-0 text-9xl opacity-5">🔐</div>
            <p className="text-xl font-semibold text-gray-600 mb-2">Noch keine Devices provisioniert</p>
            <p className="text-gray-500">Erstelle MQTT-Credentials für dein erstes Device.</p>
          </div>
        )}
      </div>

      {/* Add Credentials Modal */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <h2 className="text-xl font-bold mb-4">Device Provisionieren</h2>
            <form onSubmit={handleAddCredentials}>
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">Device</label>
                <select
                  value={addFormData.device_id}
                  onChange={(e) => setAddFormData({ ...addFormData, device_id: e.target.value })}
                  className="w-full px-3 py-2 border rounded-md"
                  required
                >
                  <option value="">Device auswählen</option>
                  {devicesWithoutCredentials.map(d => (
                    <option key={d.id} value={d.id}>{d.name} (ID: {d.id})</option>
                  ))}
                </select>
              </div>
              <div className="mb-4">
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={addFormData.auto_generate}
                    onChange={(e) => setAddFormData({ ...addFormData, auto_generate: e.target.checked })}
                  />
                  <span className="text-sm">Automatisch Username & Passwort generieren</span>
                </label>
              </div>
              <div className="flex gap-2">
                <button type="submit" className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                  Erstellen
                </button>
                <button
                  type="button"
                  onClick={() => setShowAddModal(false)}
                  className="flex-1 px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400"
                >
                  Abbrechen
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Password Display Modal */}
      {showPasswordModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <h2 className="text-xl font-bold mb-4">MQTT Credentials</h2>
            <div className="mb-4 p-4 bg-gray-100 rounded-md">
              <pre className="text-sm whitespace-pre-wrap">{generatedPassword}</pre>
            </div>
            <p className="text-sm text-red-600 mb-4">
              ⚠️ Speichere diese Credentials! Das Passwort kann nicht nochmal angezeigt werden.
            </p>
            <button
              onClick={async () => {
                try {
                  // Moderne Clipboard API (bevorzugt)
                  if (navigator.clipboard && window.isSecureContext) {
                    await navigator.clipboard.writeText(generatedPassword);
                    alert("✓ In Zwischenablage kopiert!");
                  } else {
                    // Fallback für ältere Browser oder HTTP-Kontext
                    const textArea = document.createElement("textarea");
                    textArea.value = generatedPassword;
                    textArea.style.position = "fixed";
                    textArea.style.left = "-999999px";
                    textArea.style.top = "-999999px";
                    document.body.appendChild(textArea);
                    textArea.focus();
                    textArea.select();

                    try {
                      const successful = document.execCommand('copy');
                      if (successful) {
                        alert("✓ In Zwischenablage kopiert!");
                      } else {
                        throw new Error("Copy failed");
                      }
                    } finally {
                      document.body.removeChild(textArea);
                    }
                  }
                } catch (err) {
                  console.error("Clipboard error:", err);
                  alert("❌ Kopieren fehlgeschlagen. Bitte manuell kopieren:\n\n" + generatedPassword);
                }
              }}
              className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 mb-2"
            >
              📋 In Zwischenablage kopieren
            </button>
            <button
              onClick={handleSendCredentialsEmail}
              className="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 mb-2"
            >
              Per Email senden
            </button>
            <button
              onClick={() => {
                setShowPasswordModal(false);
                setSelectedDevice(null);
              }}
              className="w-full px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400"
            >
              Schließen
            </button>
          </div>
        </div>
      )}

      {/* Add ACL Rule Modal */}
      {showAclModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md">
            <h2 className="text-xl font-bold mb-4">ACL Regel Hinzufügen</h2>
            <form onSubmit={handleAddAclRule}>
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">Topic Pattern</label>
                <input
                  type="text"
                  value={aclFormData.topic_pattern}
                  onChange={(e) => setAclFormData({ ...aclFormData, topic_pattern: e.target.value })}
                  className="w-full px-3 py-2 border rounded-md"
                  placeholder={`owntracks/${aclFormData.mqtt_username || '<Username>'}/#`}
                  required
                />
                <p className="text-xs text-gray-500 mt-1">
                  Format: owntracks/&lt;Username&gt;/# (z.B. owntracks/device_12_4397af93/#)
                </p>
              </div>
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">Berechtigung</label>
                <select
                  value={aclFormData.permission}
                  onChange={(e) => setAclFormData({ ...aclFormData, permission: e.target.value as any })}
                  className="w-full px-3 py-2 border rounded-md"
                >
                  <option value="read">Read (Lesen)</option>
                  <option value="write">Write (Schreiben)</option>
                  <option value="readwrite">Read/Write (Lesen & Schreiben)</option>
                </select>
              </div>
              <div className="flex gap-2">
                <button type="submit" className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                  Hinzufügen
                </button>
                <button
                  type="button"
                  onClick={() => setShowAclModal(false)}
                  className="flex-1 px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400"
                >
                  Abbrechen
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}
