<script setup lang="ts">
import {ref} from "vue";
import ServerActionDelete from "../components/Server/ServerActionDelete.vue";
import ServerActionInfo from "../components/Server/ServerActionInfo.vue";
import ServerActionLog from "../components/Server/ServerActionLog.vue";
import ServerActionSetting from "../components/Server/ServerActionSetting.vue";
import ServerActionStartStop from "../components/Server/ServerActionStartStop.vue";
import ServerAddDialog from "../components/Server/ServerAddDialog.vue";
import ServerStartTime from "../components/Server/ServerStartTime.vue";
import ServerStatus from "../components/Server/ServerStatus.vue";
import {AppConfig} from "../config";
import {t} from "../lang";
import {functionToLabels} from "../lib/aigcpanel";
import ModelSettingDialog from "../module/Model/ModelSettingDialog.vue";
import {useServerStore} from "../store/modules/server";
import {EnumServerType} from "../types/Server";

const addDialog = ref<InstanceType<typeof ServerAddDialog> | null>(null);
const modelSettingDialog = ref<InstanceType<typeof ModelSettingDialog> | null>(null);
const serverStore = useServerStore();
const helpShow = ref(false);

const doHelp = () => {
    window.$mapi.app.openExternal(AppConfig.helpUrl);
};

const doRefresh = async () => {
    await serverStore.refresh();
};

const typeName = (type: string) => {
    if (EnumServerType.LOCAL === type) {
        return t("本地模型");
    } else if (EnumServerType.LOCAL_DIR === type) {
        return t("本地模型目录");
    } else if (EnumServerType.CLOUD === type) {
        return t("云端模型");
    }
};
</script>

<template>
    <div class="home-page p-6 h-full overflow-hidden overflow-y-auto w-full">
        <div class="mb-4 flex items-center">
            <div class="text-2xl font-bold flex-grow">
                {{ $t("模型") }}
            </div>
            <div class="flex items-center">
                <a-button class="ml-1" @click="modelSettingDialog?.show()">
                    <template #icon>
                        <icon-command/>
                    </template>
                    {{ $t("大模型设置") }}
                </a-button>
                <a-button v-if="serverStore.records.length > 0" class="ml-1" @click="addDialog?.show()">
                    <template #icon>
                        <icon-plus/>
                    </template>
                    {{ $t("添加本地模型") }}
                </a-button>
            </div>
        </div>
        <div>
            <div v-if="!serverStore.records.length" class="py-20">
                <div class="text-center">
                    <img class="h-32 m-auto opacity-50" src="./../assets/image/server-empty.svg"/>
                </div>
                <div class="mt-5 text-center text-gray-400">
                    <div>{{ $t("暂时还没有模型，请添加模型~") }}</div>
                </div>
                <div class="mt-5 text-center">
                    <a-button class="ml-1" @click="addDialog?.show()">
                        <template #icon>
                            <icon-plus/>
                        </template>
                        {{ $t("添加本地模型") }}
                    </a-button>
                    <a-button v-if="0" class="ml-1">
                        <template #icon>
                            <icon-apps/>
                        </template>
                        {{ $t("添加云端模型") }}
                    </a-button>
                    <a-button class="mx-1" @click="helpShow = true">
                        <template #icon>
                            <icon-book class="mr-1"/>
                        </template>
                        {{ $t("如何添加模型？") }}
                    </a-button>
                </div>
                <div v-if="helpShow" class="pt-5 text-center">
                    <div class="inline-block home-card text-left rounded-lg p-6 leading-8">
                        <div>① {{ $t("访问模型市场，下载模型到本地") }}</div>
                        <div>② {{ $t("解压模型压缩包，选择目录中的config.json文件") }}</div>
                        <div class="pt-3">
                            {{ $t("更多内容，请查看") }}
                            <a href="javascript:;" class="text-blue-500" @click="doHelp">
                                <icon-book/>
                                {{ $t("在线文档") }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="flex flex-wrap -mx-2">
                <div v-for="record in serverStore.records" class="w-full lg:w-1/2 2xl:w-1/3 p-2 mb-1">
                    <div class="home-card rounded-lg p-4 hover:shadow-xl transition-all">
                        <div class="flex items-center">
                            <div class="flex-grow">
                                <div class="inline-block mr-4">
                                    <a-tooltip :content="typeName(record.type as string)" mini>
                                        <div class="inline-block">
                                            <i class="iconfont icon-folder"></i>
                                        </div>
                                    </a-tooltip>
                                </div>
                                <div class="inline-block mr-4">
                                    {{ record.title }}
                                    <div class="inline-block rounded-3xl bg-white/5 border border-white/10 px-3">v{{ record.version }}</div>
                                </div>
                            </div>
                            <div class="flex items-center gap-1">
                                <a-tooltip v-if="record.config?.mode?.type==='watch'"
                                           :content="$t('连续调用加速已开启')">
                                    <icon-thunderbolt/>
                                </a-tooltip>
                                <ServerStatus
                                    :status="record.status"
                                    :auto-start="record.autoStart!"
                                    :runtime="record.runtime"
                                />
                            </div>
                        </div>
                        <div class="h-12 pt-4">
                            <div class="text-sm">
                                <a-tag v-for="label in functionToLabels(record.functions)"
                                       class="mr-1 rounded-lg">
                                    {{ label }}
                                </a-tag>
                            </div>
                        </div>
                        <div class="pt-4 flex items-center">
                            <div class="flex-grow">
                                <ServerActionStartStop
                                    v-if="!record.autoStart && record.type === EnumServerType.LOCAL_DIR"
                                    :record="record"
                                />
                                <ServerActionLog :record="record"/>
                                <ServerActionDelete :record="record" @update="doRefresh"/>
                                <ServerActionInfo :record="record"/>
                                <ServerActionSetting
                                    v-if="record.settings && Object.keys(record.settings).length > 0"
                                    :record="record"
                                />
                            </div>
                            <div>
                                <ServerStartTime :record="record"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ServerAddDialog ref="addDialog" @update="doRefresh" />
    <ModelSettingDialog ref="modelSettingDialog" />
</template>

<style lang="less" scoped>
.home-page {
    background: linear-gradient(180deg, #1a1d25 0%, #151820 100%);
    color: #e5e7eb;
}

.home-card {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(20, 25, 35, 0.95) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

    &:hover {
        border-color: rgba(59, 130, 246, 0.4);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    }

    .font-bold {
        color: #f3f4f6;
    }

    .text-gray-500 {
        color: #9ca3af;
    }

    .text-gray-600 {
        color: #9ca3af;
    }
}
</style>
