import "/src/assets/css/main.css";
import PrimeVue from "primevue/config";
import { createApp, ref, type App } from "vue";
import Popup from "@/Popup.vue";
import { Theme } from "@/themes/theme";

declare global {
  interface Window {
    setupelli: (elliProxy: any) => void;
    bridge: {
      data: any;
    };
    signalLoaded: (window: Window) => void;
  }
}

const scenario = ref({});
const elli = ref(null);
const onClose = ref(null);
const isVisible = ref(true);
let app: App<Element> | null = null;

function initializeApp() {
  console.log("Initializing popup app with scenario:", scenario.value);

  if (app) {
    return;
  }

  app = createApp(Popup);

  app.use(PrimeVue, {
    theme: {
      preset: Theme,
      options: {
        darkModeSelector: false,
        cssLayer: {
          name: "primevue",
          order: "tailwind-base, primevue, tailwind-utilities",
        },
      },
    },
  });

  app.provide("elli", elli);
  app.provide("scenario", scenario);
  app.provide("onClose", onClose);
  app.provide("isVisible", isVisible);

  app.mount("#app-child");
  console.log("Popup app mounted successfully");
}

window.setupelli = function (elliProxy) {
  console.log("setupelli called with:", elliProxy);
  console.log("Bridge data:", window.bridge);

  elli.value = elliProxy;
  scenario.value = window.bridge?.scenario || {};
  onClose.value = window.bridge?.onClose;

  console.log("Scenario set to:", scenario.value);

  initializeApp();
};

if (window.bridge) {
  console.log("Bridge data already available:", window.bridge);
  scenario.value = window.bridge.scenario || {};
  onClose.value = window.bridge.onClose;
  initializeApp();
}

window.signalLoaded(window);