<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: 2, label: 'LW', image: 'https://static.gwvkyk.com/media/39bea8462f7961673f860.gif' },
    { page: 5, label: 'GE', image: 'https://static.gwvkyk.com/media/989cd0562f796ef90eb9d.gif' },
    { page: 6, label: 'DM', image: 'https://static.gwvkyk.com/media/5ab815562f7961db8a170.gif' },
    { page: 7, label: 'PK', image: 'https://static.gwvkyk.com/media/fa67bd562f79668049b3b.gif' },
]

const bannerCode = ref(`<div class='promo-container'>
    <div class='lw-wrapper promo-wrapper'><button class='lw-button promo-button' onclick='programPage(2);'>Click</button></div>
    <div class='ge-wrapper promo-wrapper'><button class='ge-button promo-button' onclick='programPage(5);'>Click</button></div>
    <div class='dm-wrapper promo-wrapper'><button class='dm-button promo-button' onclick='programPage(6);'>Click</button></div>
    <div class='pk-wrapper promo-wrapper'><button class='pk-button promo-button' onclick='programPage(7);'>Click</button></div>
</div>
<style>
    .lw-button { background-image: url(https://static.gwvkyk.com/media/39bea8462f7961673f860.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .ge-button { background-image: url(https://static.gwvkyk.com/media/989cd0562f796ef90eb9d.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .dm-button { background-image: url(https://static.gwvkyk.com/media/5ab815562f7961db8a170.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .pk-button { background-image: url(https://static.gwvkyk.com/media/fa67bd562f79668049b3b.gif); width: 100%; height: 100%; padding: 38% 5% 7% 11%; }
    .promo-wrapper { background-size: 100% 100%; background-repeat: no-repeat; background-position: center; background-color: transparent; margin: 10px 0; }
    .promo-button { background-size: 100% 100%; background-repeat: no-repeat; background-position: center; background-color: transparent; font-size: 0; border: 0; cursor: pointer; }
</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://1xaud.g2ma.co/p' + page + '.aspx');

        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);

        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>
