<template>
    <div class="default-main program-widget-page">
        <section class="panel">
            <div class="panel-title">{{ t('embed.programWidget.title') }}</div>

            <div class="code-section">
                <div class="section-heading">{{ t('embed.programWidget.bannerCode') }}:</div>
                <p class="section-help">
                    {{ t('embed.programWidget.bannerHelpPrefix') }}
                    <strong>JDK Back-end &gt; DISPLAY &gt; SEO &gt; Heading 1</strong>
                    {{ t('embed.programWidget.bannerHelpSuffix') }}
                </p>
                <el-input v-model="bannerCode" type="textarea" :rows="7" readonly resize="vertical" />
                <div class="section-actions">
                    <el-button @click="previewVisible = true">{{ t('embed.programWidget.preview') }}</el-button>
                    <el-button type="primary" plain @click="copyCode(bannerCode)">
                        {{ t('embed.programWidget.copyBanner') }}
                    </el-button>
                </div>
            </div>

            <div class="code-section function-section">
                <div class="section-heading">{{ t('embed.programWidget.functionCode') }}:</div>
                <p class="section-help">
                    {{ t('embed.programWidget.functionHelpPrefix') }}
                    <strong>JDK Back-end &gt; LAYOUT &gt; Home Page · Floating Widget &gt; HTML</strong>
                </p>
                <el-input v-model="functionCode" type="textarea" :rows="7" readonly resize="vertical" />
                <div class="section-actions">
                    <el-button type="primary" plain @click="copyCode(functionCode)">
                        {{ t('embed.programWidget.copyFunction') }}
                    </el-button>
                </div>
            </div>
        </section>

        <el-dialog v-model="previewVisible" :title="t('embed.programWidget.previewTitle')" width="760px">
            <div class="preview-grid">
                <button
                    v-for="program in programs"
                    :key="program.page"
                    type="button"
                    class="program-banner"
                    :style="{ backgroundImage: `url(${program.image})` }"
                    @click="previewProgram(program.page)"
                >
                    <span>{{ program.label }}</span>
                </button>
            </div>
            <p class="preview-note">{{ t('embed.programWidget.previewNote') }}</p>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

defineOptions({
    name: 'embed/programWidget',
})

const { t } = useI18n()
const previewVisible = ref(false)

const programs = [
    { page: 262, label: 'WF', image: 'https://admin.tl-tech.top/images/262.gif' },
    { page: 263, label: 'FE', image: 'https://admin.tl-tech.top/images/263.gif' },
    { page: 264, label: 'CD', image: 'https://admin.tl-tech.top/images/264.gif' },
    { page: 265, label: 'GL', image: 'https://admin.tl-tech.top/images/265.gif' },
    { page: 266, label: 'LS', image: 'https://admin.tl-tech.top/images/266.gif' },
    { page: 267, label: 'DP', image: 'https://admin.tl-tech.top/images/267.gif' },
    { page: 268, label: 'PB', image: 'https://admin.tl-tech.top/images/268.gif' },
    { page: 269, label: 'GE', image: 'https://admin.tl-tech.top/images/269.gif' },
    { page: 270, label: 'SW', image: 'https://admin.tl-tech.top/images/270.gif' },
]

const bannerCode = ref(`<div class='promo-container'>
    <div class='wf-wrapper promo-wrapper'><button class='wf-button promo-button' onclick='programPage(262);'>Click</button></div>
    <div class='fe-wrapper promo-wrapper'><button class='fe-button promo-button' onclick='programPage(263);'>Click</button></div>
    <div class='cd-wrapper promo-wrapper'><button class='cd-button promo-button' onclick='programPage(264);'>Click</button></div>
    <div class='gl-wrapper promo-wrapper'><button class='gl-button promo-button' onclick='programPage(265);'>Click</button></div>
    <div class='ls-wrapper promo-wrapper'><button class='ls-button promo-button' onclick='programPage(266);'>Click</button></div>
    <div class='dp-wrapper promo-wrapper'><button class='dp-button promo-button' onclick='programPage(267);'>Click</button></div>
    <div class='pb-wrapper promo-wrapper'><button class='pb-button promo-button' onclick='programPage(268);'>Click</button></div>
    <div class='ge-wrapper promo-wrapper'><button class='ge-button promo-button' onclick='programPage(269);'>Click</button></div>
    <div class='sw-wrapper promo-wrapper'><button class='sw-button promo-button' onclick='programPage(270);'>Click</button></div>
</div>
<style>
    .wf-button { background-image: url(https://admin.tl-tech.top/images/262.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .fe-button { background-image: url(https://admin.tl-tech.top/images/263.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .cd-button { background-image: url(https://admin.tl-tech.top/images/264.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .gl-button { background-image: url(https://admin.tl-tech.top/images/265.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .ls-button { background-image: url(https://admin.tl-tech.top/images/266.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .dp-button { background-image: url(https://admin.tl-tech.top/images/267.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .pb-button { background-image: url(https://admin.tl-tech.top/images/268.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .ge-button { background-image: url(https://admin.tl-tech.top/images/269.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .sw-button { background-image: url(https://admin.tl-tech.top/images/270.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
</style>`)

const functionCode = ref(`<script>
    function programPage(page) {
        let userId = '';
        let merchantId = (typeof _ !== 'undefined' && typeof _.getVar === 'function') ? (_.getVar('merchantId') ?? '') : '';
        if (!merchantId) { alert('merchantId not found'); return; }

        var refValue = 'jdkUserId';
        if (!localStorage.getItem('USER')) { alert('Please login first!'); return; }
        userId = JSON.parse(localStorage.getItem('USER')).id;
        if (typeof userId == 'undefined' || userId == '') { alert('Please login first!'); return; }
        if (userId === null) { alert('user id is null'); return; }

        var content = refValue + '=' + userId;
        var encodedContent = btoa(content);
        var form = document.createElement('form');
        form.setAttribute('method', 'POST');
        form.setAttribute('action', 'https://admin.tl-tech.top/index.php/api/index/xyxLogin');

        var input1 = document.createElement('input');
        input1.setAttribute('type', 'hidden');
        input1.setAttribute('name', 'userData');
        input1.setAttribute('value', encodedContent);

        var input2 = document.createElement('input');
        input2.setAttribute('type', 'hidden');
        input2.setAttribute('name', 'clientMerchant');
        input2.setAttribute('value', merchantId);
        input2.setAttribute('page', page);

        form.appendChild(input1);
        form.appendChild(input2);
        document.body.appendChild(form);
        form.submit();
        form.remove();
    }
<\/script>`)

const copyCode = async (code: string) => {
    try {
        await navigator.clipboard.writeText(code)
        ElMessage.success(t('embed.programWidget.copied'))
    } catch {
        ElMessage.error(t('embed.programWidget.copyFailed'))
    }
}

const previewProgram = (page: number) => {
    ElMessage.info(t('embed.programWidget.previewProgram', { page }))
}
</script>

<style scoped lang="scss">
.program-widget-page {
    padding: var(--ba-main-space);
    color: var(--el-text-color-primary);
}

.panel {
    overflow: hidden;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    background: var(--el-bg-color);
}

.panel-title {
    padding: 10px 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: #333;
}

.code-section {
    padding: 14px;
}

.function-section {
    border-top: 1px solid var(--el-border-color);
}

.section-heading {
    margin-bottom: 5px;
    color: var(--el-color-danger);
    font-weight: 700;
}

.section-help {
    margin: 0 0 10px;
    color: var(--el-text-color-regular);
    font-size: 13px;

    strong {
        color: var(--el-text-color-primary);
    }
}

:deep(textarea) {
    min-height: 120px !important;
    padding: 10px;
    color: var(--el-text-color-primary);
    background: var(--el-fill-color-light);
    font-family: monospace;
    font-size: 12px;
    line-height: 1.55;
}

.section-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;

    .el-button {
        margin: 0;
    }
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.program-banner {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    background-color: var(--el-fill-color-light);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

    &:hover {
        box-shadow: var(--el-box-shadow-light);
        transform: translateY(-2px);
    }

    span {
        position: absolute;
        right: 10px;
        bottom: 10px;
        padding: 3px 8px;
        border-radius: 3px;
        color: #fff;
        background: rgb(0 0 0 / 55%);
        font-size: 12px;
        font-weight: 700;
    }
}

.preview-note {
    margin: 14px 0 0;
    color: var(--el-text-color-secondary);
    font-size: 12px;
}

@media (max-width: 720px) {
    .program-widget-page {
        padding: 12px;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .section-actions {
        align-items: stretch;
        flex-direction: column;

        .el-button {
            width: 100%;
        }
    }
}
</style>
