<template>
  <div ref="container" class="univer-container"></div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, shallowRef } from "vue";
import { Univer, UniverInstanceType, LocaleType, Tools, IUniverInstanceService } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverUIPlugin } from "@univerjs/ui";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

// Import Locales
import zhCNDesign from "@univerjs/design/lib/locale/zh-CN";
import zhCNUI from "@univerjs/ui/lib/locale/zh-CN";
import zhCNDocsUI from "@univerjs/docs-ui/lib/locale/zh-CN";
import zhCNSheetsUI from "@univerjs/sheets-ui/lib/locale/zh-CN";

// Import CSS
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
// import "@univerjs/sheets-xlsx/lib/index.css"; // CSS not required or found

const props = defineProps<{
  // options?: any;
}>();

const container = ref<HTMLElement | null>(null);
const univerRef = shallowRef<Univer | null>(null);
const workbook = shallowRef<any | null>(null);

const initUniver = () => {
  if (!container.value) return;

  const univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.ZH_CN,
    locales: {
      [LocaleType.ZH_CN]: Tools.deepMerge(
        zhCNDesign,
        zhCNUI,
        zhCNDocsUI,
        zhCNSheetsUI
      ),
    },
  });

  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);
  univer.registerPlugin(UniverUIPlugin, {
    container: container.value,
    header: true,
    footer: true,
  });

  univer.registerPlugin(UniverDocsPlugin, {
    hasScroll: false,
  });
  univer.registerPlugin(UniverDocsUIPlugin);

  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);

  // Create empty workbook initially to avoid blank screen
  workbook.value = univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});

  univerRef.value = univer;
};

const createWorkbook = (data: any) => {
  const univer = univerRef.value;
  if (!univer) return;

  const injector = (univer as any).__getInjector();
  const instanceService = injector.get(IUniverInstanceService);

  // Dispose existing workbook if any
  if (workbook.value) {
    try {
      const unitId = workbook.value.getUnitId();
      instanceService.disposeUnit(unitId);
    } catch (e) {
      console.warn("Dispose unit failed:", e);
    }
  }

  // Create new workbook with data
  const newWorkbook = univer.createUnit(UniverInstanceType.UNIVER_SHEET, data);
  workbook.value = newWorkbook;

  // 显式设置为当前活跃单位，确保 UI 切换
  if (newWorkbook) {
    const unitId = newWorkbook.getUnitId();
    instanceService.setCurrentUnitForType(unitId);
    instanceService.focusUnit(unitId);
  }
};

onMounted(() => {
  initUniver();
});

onBeforeUnmount(() => {
  if (univerRef.value) {
    univerRef.value.dispose();
    univerRef.value = null;
  }
});

defineExpose({
  getUniver: () => univerRef.value,
  getWorkbook: () => workbook.value,
  createWorkbook,
});
</script>

<style scoped>
.univer-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

:deep(.univer-app-layout) {
  height: 100%;
}
</style>