<script setup lang="ts">
import { onMounted, ref } from "vue";
import InputInlineEditor from "../../components/common/InputInlineEditor.vue";
import VideoPlayer from "../../components/common/VideoPlayer.vue";
import { t } from "../../lang";
import { Dialog } from "../../lib/dialog";
import { VideoMaterialRecord, VideoMaterialService } from "../../service/VideoMaterialService";

const records = ref<VideoMaterialRecord[]>([]);
const loading = ref(true);
const uploading = ref(false);

const emitUpdated = () => {
    window.dispatchEvent(new CustomEvent("video-material-updated"));
};

const doRefresh = async () => {
    loading.value = true;
    records.value = await VideoMaterialService.list();
    loading.value = false;
};

const doUpload = async () => {
    try {
        const result = await window.$mapi.file.openFile({
            title: t("选择素材文件"),
            filters: [
                {
                    name: t("媒体文件"),
                    extensions: ["mp4", "mov", "avi", "mkv", "jpg", "jpeg", "png", "gif", "bmp", "webp"],
                },
            ],
            properties: ["openFile", "multiSelections"],
        });

        if (!result) {
            return;
        }

        const filePaths = Array.isArray(result) ? result : [result];
        if (!filePaths.length) {
            return;
        }

        uploading.value = true;
        await VideoMaterialService.importFiles(filePaths);
        await doRefresh();
        emitUpdated();
    } finally {
        uploading.value = false;
    }
};

const doDelete = async (record: VideoMaterialRecord) => {
    await Dialog.confirm(t("确认删除该素材？"));
    await VideoMaterialService.delete(record);
    await doRefresh();
    emitUpdated();
};

const onChangeTitle = async (record: VideoMaterialRecord, value: string) => {
    await VideoMaterialService.update(record.id!, { name: value });
    await doRefresh();
    emitUpdated();
};

onMounted(async () => {
    await doRefresh();
});
</script>

<template>
    <div class="video-material-page p-5">
        <div class="mb-4 flex items-center">
            <div class="flex-grow flex items-end">
                <div class="text-3xl font-bold material-page-title">{{ $t("素材库") }}</div>
                <div class="text-gray-400 ml-3 material-page-subtitle">{{ $t("管理画中画和字幕逐行切换素材") }}</div>
            </div>
            <div class="flex items-center">
                <a-button class="ml-2" @click="doRefresh">
                    <template #icon>
                        <icon-refresh />
                    </template>
                    {{ $t("刷新") }}
                </a-button>
                <a-button class="ml-2" type="primary" :loading="uploading" @click="doUpload">
                    <template #icon>
                        <icon-plus />
                    </template>
                    {{ $t("上传素材") }}
                </a-button>
            </div>
        </div>

        <div class="mb-4 text-sm text-gray-400 material-page-tip">
            {{ $t("上传后的素材会保存到本地素材库，画中画字幕模式可直接逐行选择，不需要每次重新选文件。") }}
        </div>

        <m-empty v-if="!records.length && !loading" />
        <m-loading v-else-if="!records.length && loading" page />

        <div v-else class="flex flex-wrap -mx-2">
            <div v-for="record in records" :key="record.id" class="w-1/4 flex-shrink-0 p-2">
                <div class="rounded-xl shadow border p-4 hover:shadow-lg material-card">
                    <div class="flex mb-3 items-start">
                        <div class="flex-grow w-0 mr-2">
                            <div class="inline-flex max-w-full items-center material-name rounded-full px-2 leading-8 h-8">
                                <div class="truncate overflow-hidden flex-grow cursor-pointer material-title-text">
                                    {{ record.name }}
                                </div>
                                <InputInlineEditor :value="record.name" @change="onChangeTitle(record, $event)">
                                    <a class="ml-1 text-gray-400 material-edit-trigger" href="javascript:;">
                                        <icon-pen />
                                    </a>
                                </InputInlineEditor>
                            </div>
                        </div>
                        <a-tag size="small" :color="record.type === 'image' ? 'arcoblue' : 'green'">
                            {{ record.type === 'image' ? $t("图片") : $t("视频") }}
                        </a-tag>
                    </div>

                    <div class="mb-3">
                        <div class="h-48 bg-black p-2 rounded-lg overflow-hidden flex items-center justify-center material-preview-shell">
                            <img
                                v-if="record.type === 'image'"
                                :src="'file://' + record.path"
                                :alt="record.name"
                                class="max-h-full max-w-full object-contain rounded"
                            />
                            <VideoPlayer
                                v-else
                                :url="'file://' + record.path"
                                :show-open-folder="false"
                                :controls="true"
                            />
                        </div>
                    </div>

                    <div class="text-xs text-gray-500 truncate mb-3 material-path">{{ record.path }}</div>

                    <div class="flex justify-end">
                        <a-button status="danger" @click="doDelete(record)">
                            <template #icon>
                                <icon-delete />
                            </template>
                            {{ $t("删除") }}
                        </a-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.material-title-text {
    color: #ffffff;
}

.material-page-title {
    color: #1e274c;
    text-shadow: none;
}

.material-page-subtitle,
.material-page-tip,
.material-path,
.material-edit-trigger {
    color: #5d6a95;
}

.material-card {
    background: #141414;
    border: 1px solid #333;
    box-shadow: none;
    transition: all 0.2s;
}

.material-card:hover {
    border-color: #4b5563;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.12);
}

.material-name {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #e5e7eb;
}

.material-preview-shell {
    background: #000000;
}

:deep(.arco-btn) {
    background-color: #2a2a2a;
    border-color: #333;
    color: #e5e7eb;
}

:deep(.arco-btn:hover) {
    background-color: #374151;
    border-color: #4b5563;
    color: #ffffff;
}

:global(body[data-theme="soft-light"]) .video-material-page .material-page-title,
:global(body[data-theme="soft-light"]) .video-material-page .font-bold.material-page-title {
    color: #1e274c !important;
    text-shadow: none !important;
}

:global(body[data-theme="soft-light"]) .material-page-subtitle,
:global(body[data-theme="soft-light"]) .material-page-tip {
    color: #5d6a95 !important;
}

:global(body[data-theme="soft-light"]) .material-card {
    background: #141414 !important;
    border-color: #333 !important;
    box-shadow:
        0 20px 46px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:global(body[data-theme="soft-light"]) .material-card:hover {
    border-color: #4b5563 !important;
    box-shadow:
        0 24px 52px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(96, 165, 250, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

:global(body[data-theme="soft-light"]) .material-name {
    background: #1a1a1a !important;
    border-color: #333 !important;
    color: #e5e7eb !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:global(body[data-theme="soft-light"]) .material-title-text {
    color: #ffffff !important;
    font-weight: 600;
}

:global(body[data-theme="soft-light"]) .video-material-page .material-edit-trigger,
:global(body[data-theme="soft-light"]) .video-material-page .material-path {
    color: #8ea0c8 !important;
    font-weight: 500;
}

:global(body[data-theme="soft-light"]) .material-preview-shell {
    background: #111111 !important;
    border: 1px solid #2f3542;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:global(body[data-theme="soft-light"]) :deep(.arco-btn) {
    background: linear-gradient(180deg, rgba(249, 250, 255, 0.98) 0%, rgba(238, 242, 255, 1) 100%) !important;
    border-color: rgba(132, 142, 220, 0.24) !important;
    color: #31406f !important;
}

:global(body[data-theme="soft-light"]) :deep(.arco-btn:hover) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 247, 255, 1) 100%) !important;
    border-color: rgba(106, 116, 247, 0.28) !important;
    color: #21305d !important;
}

:global(body[data-theme="soft-light"]) :deep(.arco-btn-status-danger) {
    background: rgba(200, 91, 107, 0.08) !important;
    border-color: rgba(200, 91, 107, 0.22) !important;
    color: #b3495b !important;
}

:global(body[data-theme="dark"]) .video-material-page .material-page-title,
:global(body[data-theme="dark"]) .video-material-page .material-title-text {
    color: #ffffff !important;
}

:global(body[data-theme="dark"]) .video-material-page .material-path,
:global(body[data-theme="dark"]) .video-material-page .material-page-subtitle,
:global(body[data-theme="dark"]) .video-material-page .material-page-tip {
    color: #9ca3af !important;
}
</style>
