// ClawdDotNet — WebUI Haupteinstiegspunkt
//
// Initialisiert Authentifizierung, Router, Ereignisstrom, Farbschema und Kopfzeile.

import { api, hatToken, loescheToken, beiUnberechtigt } from "./modules/api.js";
import { verbindeStrom, trenneStrom, beiVerbindungsStatus, abonnieren } from "./modules/events.js";
import { initialisiereTheme, wechsleTheme } from "./modules/theme.js";
import { registriereRoute, initialisiereRouter, navigiere } from "./modules/router.js";
import { initialisiereLogin, zeigeAnmeldung, versteckeAnmeldung } from "./views/login.js";

// Ansichten
import { rendereChat } from "./views/chat.js";
import { rendereAgenten } from "./views/agents.js";
import { rendereAufgaben } from "./views/tasks.js";
import { rendereDienste } from "./views/services.js";
import { rendereStaging, holeWartendeAnzahl } from "./views/staging.js";
import { rendereVerbrauch } from "./views/usage.js";
import { rendereProtokoll, trenneLogStream } from "./views/logs.js";
import { rendereInfo } from "./views/info.js";
import { rendereSicherung, rendereEinstellungen, rendereAgentenChats } from "./views/placeholders.js";

// ─── 1. Routen registrieren ───

registriereRoute("/chat", () => { trenneLogStream(); return rendereChat(); });
registriereRoute("/chat/:agentId", (p) => { trenneLogStream(); return rendereChat(p); });
registriereRoute("/agenten", () => { trenneLogStream(); return rendereAgenten(); });
registriereRoute("/agenten/:agentId", (p) => { trenneLogStream(); return rendereAgenten(p); });
registriereRoute("/aufgaben", () => { trenneLogStream(); return rendereAufgaben(); });
registriereRoute("/dienste", () => { trenneLogStream(); return rendereDienste(); });
registriereRoute("/staging", () => { trenneLogStream(); return rendereStaging(); });
registriereRoute("/verbrauch", () => { trenneLogStream(); return rendereVerbrauch(); });
registriereRoute("/agenten-chats", () => { trenneLogStream(); return rendereAgentenChats(); });
registriereRoute("/protokoll", () => rendereProtokoll());
registriereRoute("/sicherung", () => { trenneLogStream(); return rendereSicherung(); });
registriereRoute("/einstellungen", () => { trenneLogStream(); return rendereEinstellungen(); });
registriereRoute("/info", () => { trenneLogStream(); return rendereInfo(); });

// ─── 2. DOM-Verdrahtung ───

const seitenleiste = document.getElementById("seitenleiste");
const sidebarToggle = document.getElementById("sidebar-toggle");
const mobilMenueBtn = document.getElementById("mobil-menue-btn");
const seitenleisteBackdrop = document.getElementById("seitenleiste-backdrop");
const themeSchalter = document.getElementById("theme-schalter");
const abmeldenBtn = document.getElementById("abmelden-btn");
const verbindungPunkt = document.getElementById("verbindung-punkt");
const kopfInstanz = document.getElementById("kopf-instanz");
const kopfOpenRouter = document.getElementById("kopf-openrouter-status");

// Seitenleiste kollabieren (Desktop)
sidebarToggle?.addEventListener("click", () => {
  seitenleiste?.classList.toggle("kollabiert");
});

// Mobil-Menü öffnen
mobilMenueBtn?.addEventListener("click", () => {
  seitenleiste?.classList.add("mobil-offen");
  if (seitenleisteBackdrop) seitenleisteBackdrop.hidden = false;
});

// Mobil-Menü schließen bei Klick auf Backdrop oder Link
function schliesseMobilMenue() {
  seitenleiste?.classList.remove("mobil-offen");
  if (seitenleisteBackdrop) seitenleisteBackdrop.hidden = true;
}

seitenleisteBackdrop?.addEventListener("click", schliesseMobilMenue);
document.querySelectorAll(".nav-link").forEach((link) => {
  link.addEventListener("click", () => {
    if (window.innerWidth <= 768) schliesseMobilMenue();
  });
});

// Farbschema umschalten
themeSchalter?.addEventListener("click", () => {
  wechsleTheme();
});

// Abmelden
abmeldenBtn?.addEventListener("click", () => {
  loescheToken();
  trenneStrom();
  trenneLogStream();
  zeigeAnmeldung();
});

// Bei unberechtigtem API-Aufruf (401) sofort zur Anmeldung springen
beiUnberechtigt(() => {
  trenneStrom();
  trenneLogStream();
  zeigeAnmeldung();
});

// Verbindungsstatus des Ereignisstroms
beiVerbindungsStatus((istOffen) => {
  if (!verbindungPunkt) return;
  if (istOffen) {
    verbindungPunkt.classList.add("offen");
    verbindungPunkt.title = "Ereignisstrom: verbunden";
  } else {
    verbindungPunkt.classList.remove("offen");
    verbindungPunkt.title = "Ereignisstrom: getrennt";
  }
});

// ─── 3. Start & Initialisierung ───

initialisiereTheme();
initialisiereLogin(starteHauptAnwendung);

async function aktualisiereKopfStatus() {
  try {
    const status = await api("/status");
    if (kopfOpenRouter && status) {
      kopfOpenRouter.textContent = status.creditsText
        ? `OpenRouter: ${status.creditsText}`
        : (status.isApiReachable ? "OpenRouter: OK" : "OpenRouter: offline");
    }
  } catch {
    if (kopfOpenRouter) kopfOpenRouter.textContent = "";
  }
}

async function aktualisiereStagingZaehler() {
  const anzahl = await holeWartendeAnzahl();
  const badge = document.getElementById("staging-badge");
  if (badge) {
    if (anzahl > 0) {
      badge.textContent = String(anzahl);
      badge.hidden = false;
    } else {
      badge.hidden = true;
    }
  }
}

async function starteHauptAnwendung(info) {
  versteckeAnmeldung();

  if (kopfInstanz && info) {
    kopfInstanz.textContent = `${info.instanceName} (${info.instanceId})`;
  }

  // Ereignisstrom verbinden
  verbindeStrom();

  // Status & Zähler laden
  await aktualisiereKopfStatus();
  await aktualisiereStagingZaehler();

  // Ereignisse für Kopf-Updates
  abonnieren("status", () => {
    aktualisiereKopfStatus();
  });

  abonnieren("instance", (daten) => {
    if (daten.kind === "Settings") {
      aktualisiereKopfStatus();
    }
  });

  // Router initialisieren
  initialisiereRouter();
}

// Prüfe bestehende Session
if (hatToken()) {
  api("/info")
    .then((info) => {
      starteHauptAnwendung(info);
    })
    .catch(() => {
      loescheToken();
      zeigeAnmeldung();
    });
} else {
  zeigeAnmeldung();
}