<template>
    <a-drawer
        :title="data.title"
        :width="drawerWidth"
        :open="visible"
        :body-style="{ paddingBottom: '80px' }"
        :maskClosable="false"
        @close="onClose"
    >
        <a-descriptions bordered :column="1" size="small">
            <a-descriptions-item :label="$t('website_legal_page.title')">
                <strong>{{ data.title }}</strong>
            </a-descriptions-item>

            <a-descriptions-item :label="$t('website_legal_page.slug')">
                {{ data.slug }}
            </a-descriptions-item>

            <a-descriptions-item :label="$t('website_legal_page.page_url')">
                <div v-if="data.page_url">
                    <a-space size="small">
                        <a :href="data.page_url" target="_blank" style="word-break: break-all">
                            {{ data.page_url }}
                        </a>
                        <a-tooltip :title="$t('website_legal_page.copy_url')">
                            <a-button
                                type="text"
                                size="small"
                                @click="copyUrl(data.page_url)"
                            >
                                <template #icon><CopyOutlined /></template>
                            </a-button>
                        </a-tooltip>
                        <a-tooltip :title="$t('website_legal_page.open_in_new_tab')">
                            <a-button
                                type="text"
                                size="small"
                                @click="openUrl(data.page_url)"
                            >
                                <template #icon><LinkOutlined /></template>
                            </a-button>
                        </a-tooltip>
                    </a-space>
                </div>
                <span v-else>-</span>
            </a-descriptions-item>

            <a-descriptions-item :label="$t('website_legal_page.show_in_footer')">
                <a-tag :color="data.show_in_footer ? 'green' : 'red'">
                    {{ data.show_in_footer ? $t('common.yes') : $t('common.no') }}
                </a-tag>
            </a-descriptions-item>

            <a-descriptions-item :label="$t('website_legal_page.status')">
                <a-tag :color="statusColor">
                    {{ $t(`website_legal_page.${data.status}`) }}
                </a-tag>
            </a-descriptions-item>

            <a-descriptions-item :label="$t('website_legal_page.display_order')">
                {{ data.display_order ?? 0 }}
            </a-descriptions-item>

            <a-descriptions-item :label="$t('website_legal_page.meta_title')">
                {{ data.meta_title }}
            </a-descriptions-item>

            <a-descriptions-item :label="$t('website_legal_page.meta_description')">
                {{ data.meta_description }}
            </a-descriptions-item>

            <a-descriptions-item :label="$t('website_legal_page.meta_keywords')">
                {{ data.meta_keywords }}
            </a-descriptions-item>

            <a-descriptions-item :label="$t('website_legal_page.content')">
                <div class="content-preview" v-html="data.content"></div>
            </a-descriptions-item>
        </a-descriptions>
    </a-drawer>
</template>

<script setup>
import { computed } from "vue";
import { CopyOutlined, LinkOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

// Get common composable from global window object (exposed in main app.js)
const common = window.__composables.common;

const props = defineProps({
    data: Object,
    visible: Boolean,
});

const emit = defineEmits(["closed"]);

const { formatDateTime, formatAmountCurrency } = common();
const drawerWidth = window.innerWidth <= 991 ? "90%" : "60%";

const statusColor = computed(() => {
    return props.data.status === "active" ? "green" : "red";
});

const onClose = () => {
    emit("closed");
};

const copyUrl = async (url) => {
    try {
        await navigator.clipboard.writeText(url);
        message.success(window.i18n.global.t("website_legal_page.url_copied"));
    } catch (error) {
        // Fallback for older browsers
        const textArea = document.createElement("textarea");
        textArea.value = url;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand("copy");
        document.body.removeChild(textArea);
        message.success(window.i18n.global.t("website_legal_page.url_copied"));
    }
};

const openUrl = (url) => {
    window.open(url, "_blank");
};
</script>

<style scoped>
.content-preview {
    max-height: 400px;
    overflow-y: auto;
    padding: 12px;
    background: #fafafa;
    border-radius: 4px;
}

:global(.dark_theme) .content-preview {
    background: #1f1f1f;
}

.content-preview :deep(h1),
.content-preview :deep(h2),
.content-preview :deep(h3),
.content-preview :deep(h4),
.content-preview :deep(h5),
.content-preview :deep(h6) {
    margin-top: 16px;
    margin-bottom: 8px;
}

.content-preview :deep(p) {
    margin-bottom: 12px;
}

.content-preview :deep(ul),
.content-preview :deep(ol) {
    margin-bottom: 12px;
    padding-left: 24px;
}

.content-preview :deep(a) {
    color: #1890ff;
    text-decoration: underline;
}

:global(.dark_theme) .content-preview :deep(a) {
    color: #40a9ff;
}
</style>
