﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from "vue";
import PageNav from "./../components/PageNav.vue";
import ThemeSwitch from "../components/ThemeSwitch.vue";
import { AppConfig } from "../config";
import AppQuitConfirm from "../components/AppQuitConfirm.vue";
import { useDragWindow } from "../components/common/dragWindow";

const appQuitConfirm = ref<InstanceType<typeof AppQuitConfirm> | null>(null);
const isOsx = ref(false);
const isFullscreen = ref(false);

if (typeof (window as any).__page !== "undefined") {
    (window as any).__page.onEnterFullScreen(() => {
        isFullscreen.value = true;
    });
    (window as any).__page.onLeaveFullScreen(() => {
        isFullscreen.value = false;
    });
    (window as any).__page.onShowQuitConfirmDialog(() => {
        appQuitConfirm.value?.show();
    });
} else {
    console.warn("[Main.vue] window.__page is not ready");
}

const { onDragWindowMouseDown } = useDragWindow({
    name: "main",
    ignore: e => {
        return !!(e.target && (e.target as any).tagName === "INPUT");
    },
});

const onDbClick = async () => {
    if (window.$mapi?.app?.windowMax) {
        await window.$mapi.app.windowMax();
    } else {
        console.warn("[Main.vue] $mapi.app.windowMax is unavailable");
    }
};

onBeforeMount(async () => {
    if (window.$mapi?.app?.isPlatform) {
        isOsx.value = window.$mapi.app.isPlatform("osx");
    } else {
        isOsx.value = false;
    }
});

const doQuit = async () => {
    await appQuitConfirm.value?.show();
};

onMounted(() => {
    // keep mount hook for future shell setup
});
</script>

<template>
    <div class="window-container">
        <div class="window-header flex h-14 items-center border-b-0" :class="{ osx: isOsx, fullscreen: isFullscreen }">
            <div
                class="window-header-title no-drag flex-grow flex items-center"
                @dblclick="onDbClick"
                @mousedown="onDragWindowMouseDown"
            >
                <div class="pl-3 py-2">
                    <img src="/logo.png" class="h-9 w-auto max-w-[220px] object-contain" />
                </div>
                <div class="p-2 flex-grow text-gray-200 font-medium">
                    {{ AppConfig.title }}
                    <span class="bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-md px-2 py-0.5 text-xs inline-block ml-2 shadow-sm">
                        个人版
                    </span>
                </div>
            </div>
            <div class="window-header-actions no-drag flex items-center gap-2 pr-2">
                <ThemeSwitch />
                <div v-if="!isOsx" class="p-1 leading-4">
                    <div
                        class="inline-block w-8 h-8 leading-8 cursor-pointer text-gray-400 hover:text-white hover:bg-white/10 rounded transition-all mr-1"
                        @click="$mapi?.app?.windowMin?.()"
                    >
                        <i class="iconfont text-sm icon-min"></i>
                    </div>
                    <div
                        class="inline-block w-8 h-8 leading-8 cursor-pointer text-gray-400 hover:text-white hover:bg-white/10 rounded transition-all mr-1"
                        @click="$mapi?.app?.windowMax?.()"
                    >
                        <i class="iconfont text-sm icon-max"></i>
                    </div>
                    <div
                        class="inline-block w-8 h-8 leading-8 cursor-pointer text-gray-400 hover:text-white hover:bg-red-500/20 rounded transition-all"
                        @click="doQuit"
                    >
                        <i class="iconfont text-sm icon-close"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="window-body">
            <div class="page-container flex">
                <div class="w-12 flex-shrink-0 h-full text-white" style="background-color: var(--color-bg-page-nav)">
                    <PageNav />
                </div>
                <div class="flex-grow overflow-y-auto">
                    <router-view v-slot="{ Component }">
                        <keep-alive :max="5">
                            <component :is="Component" />
                        </keep-alive>
                    </router-view>
                </div>
            </div>
        </div>
    </div>
    <AppQuitConfirm ref="appQuitConfirm" />
</template>
