/**
 * Toast System Module
 *
 * Provides toast notification functionality using Svelte 5 components
 * with proper DOM ready checking and theme support.
 */

import { mount, flushSync } from "svelte";
import ToastContainer from "$components/toast/ToastContainer.svelte";
import { ensureShadowMount } from "./shadowHost";

export interface ToastConfig {
  theme?: "light" | "dark";
}

// Type definitions for window globals
declare global {
  interface Window {
    __dumber_toast_loaded?: boolean;
    __dumber_initial_theme?: string;
  }
}

let toastInitialized = false;

// Apply theme based on current system/GTK preference
function updateTheme(isDark: boolean): void {
  if (isDark) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
}

export async function initializeToast(config?: ToastConfig): Promise<void> {
  if (toastInitialized || window.__dumber_toast_loaded) {
    // Verify functions still exist - if not, reinitialize
    if (
      typeof window.__dumber_showToast === "function" &&
      typeof window.__dumber_showZoomToast === "function"
    ) {
      console.log("✅ Toast system already initialized and functional");
      return;
    }
    // If functions are missing, reinitialize
    console.log("⚠️ Toast functions missing, reinitializing...");
    toastInitialized = false;
    window.__dumber_toast_loaded = false;
  }

  console.log("🚀 Initializing Svelte toast system at:", document.readyState);
  console.log(
    "📊 DOM state check - head:",
    !!document.head,
    "body:",
    !!document.body,
  );
  window.__dumber_toast_loaded = true;

  // Ensure DOM is ready
  if (document.readyState === "loading") {
    return new Promise((resolve) => {
      document.addEventListener("DOMContentLoaded", async () => {
        await initializeToast(config);
        resolve();
      });
    });
  }

  if (!document.head || !document.body) {
    console.warn(
      "❌ DOM structure not ready, deferring toast initialization. Retrying...",
    );
    window.__dumber_toast_loaded = false; // Reset the flag so we can try again
    return new Promise((resolve) => {
      const checkDOM = () => {
        if (document.head && document.body) {
          console.log("✅ DOM structure now ready, initializing toast system");
          initializeToast(config).then(() => resolve());
        } else {
          console.log("⏳ DOM still not ready, retrying in 50ms...");
          setTimeout(checkDOM, 50);
        }
      };
      setTimeout(checkDOM, 100);
    });
  }

  try {
    // Use the global Shadow DOM host for isolation
    const rootElement = ensureShadowMount("dumber-toast");

    // Initialize theme
    const initialTheme = config?.theme || window.__dumber_initial_theme;
    if (initialTheme !== undefined) {
      updateTheme(initialTheme === "dark");
    }

    // Mount the Svelte toast container (Svelte 5 syntax)
    mount(ToastContainer, {
      target: rootElement as unknown as Element,
    });

    // Signal isolated GUI readiness for page-world bridge
    try {
      document.documentElement.setAttribute("data-dumber-gui", "ready");
      document.dispatchEvent(new CustomEvent("dumber:gui-ready"));
    } catch {
      // Ignore errors in GUI readiness signaling
    }

    // Listen for page-world bridge events and forward to internal toast functions
    const handleShowToast = (e: Event) => {
      const detail = (e as CustomEvent).detail || {};
      if (typeof window.__dumber_showToast === "function") {
        window.__dumber_showToast(detail.message, detail.duration, detail.type);
      }
    };
    document.addEventListener("dumber:showToast", handleShowToast);
    document.addEventListener("dumber:toast:show", handleShowToast);

    const handleZoomToast = (e: Event) => {
      const detail = (e as CustomEvent).detail || {};
      if (typeof window.__dumber_showZoomToast === "function") {
        window.__dumber_showZoomToast(detail.level);
      }
    };
    document.addEventListener("dumber:showZoomToast", handleZoomToast);
    document.addEventListener("dumber:toast:zoom", handleZoomToast);

    // Force immediate effect execution to ensure onMount callbacks run
    flushSync();

    // Toast functions are now exposed by the component itself
    console.log("✅ Toast functions exposed via component instantiation");

    toastInitialized = true;
    console.log("✅ Toast system initialized with Svelte 5");
  } catch (error) {
    console.error("❌ Failed to initialize toast system:", error);

    // Fallback to basic toast system if Svelte fails
    initializeFallbackToast();
  }
}

function exposeToastFunctions(): void {
  // The Svelte ToastContainer component already exposes these functions
  // We just need to make sure they exist, they're handled by the component
  console.log("✅ Toast functions will be exposed by ToastContainer component");
}

function initializeFallbackToast(): void {
  console.warn("🔄 Falling back to basic toast system");

  // Create basic toast container for fallback
  const fallbackContainer = document.createElement("div");
  fallbackContainer.id = "dumber-fallback-toast";
  fallbackContainer.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
  `;
  document.documentElement.appendChild(fallbackContainer);

  // Expose toast functions for fallback too
  exposeToastFunctions();

  toastInitialized = true;
  console.log("✅ Fallback toast system ready");
}