<template>
    <div
        class="fmt-modal-backdrop"
        v-if="visible"
        @click.self="close"
        role="dialog"
        aria-labelledby="fmt-preview-title"
        aria-modal="true"
    >
        <div class="fmt-preview-modal">
            <div class="fmt-preview-modal__header">
                <h2 id="fmt-preview-title">{{ __("Form Preview", "formatrica") }}</h2>
                <div class="fmt-preview-modal__actions">
                    <button
                        type="button"
                        class="fmt-preview-action"
                        :title="__('Preview themes', 'formatrica')"
                        :aria-label="__('Preview themes', 'formatrica')"
                        :aria-expanded="showThemePopover ? 'true' : 'false'"
                        @click="showThemePopover = !showThemePopover"
                    >
                        <img :src="ICON_BRUSH" alt="" aria-hidden="true" />
                    </button>
                    <button
                        v-if="canPin"
                        type="button"
                        class="fmt-preview-action"
                        :title="__('Pin preview to the side', 'formatrica')"
                        :aria-label="__('Pin preview to the side', 'formatrica')"
                        @click="$emit('pin')"
                    >
                        <img :src="ICON_PIN" alt="" aria-hidden="true" />
                    </button>
                    <button
                        type="button"
                        class="fmt-close-btn"
                        @click="close"
                        :aria-label="__('Close', 'formatrica')"
                    >
                        <img :src="ICON_CLOSE" alt="" aria-hidden="true" />
                    </button>
                    <ThemePreviewPopover
                        v-if="showThemePopover"
                        :theme="theme"
                        @change="onPreviewChange"
                        @apply="onApply"
                    />
                </div>
            </div>

            <div class="fmt-preview-modal__body">
                <div class="fmt-preview-notice">
                    <span class="dashicons dashicons-info"></span>
                    {{ __("This is an approximate visual preview. The final look will adapt to your current theme. The form is not functional in preview mode.", "formatrica") }}
                </div>

                <FormPreviewSurface
                    :fields="fields"
                    :form-title="formTitle"
                    :theme="effectiveTheme"
                    :layout-mode="layoutMode"
                    :zoom="zoomLevel"
                />

                <div class="fmt-preview-zoom">
                    <label>
                        {{ __("Zoom:", "formatrica") }}
                        <input type="range" min="50" max="100" step="10" v-model.number="zoomLevel" />
                        <span>{{ zoomLevel }}%</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { __ } from "@/utils/i18n";
import { normalizeTheme } from "@/admin/utils/themeAppearance";
import FormPreviewSurface from "@/admin/components/preview/FormPreviewSurface.vue";
import ThemePreviewPopover from "@/admin/components/preview/ThemePreviewPopover.vue";
import ICON_CLOSE from "../../../assets/icons/hexagon-letter-x.svg";
import ICON_BRUSH from "../../../assets/icons/brush.svg";
import ICON_PIN from "../../../assets/icons/pin.svg";

const props = defineProps({
    visible: Boolean,
    formTitle: String,
    fields: Array,
    /** Saved form theme ({preset, brand_color, mode}). */
    theme: { type: Object, default: null },
    canPin: { type: Boolean, default: false },
    layoutMode: { type: String, default: "single" },
});

const emit = defineEmits(["close", "pin", "apply-theme"]);

const zoomLevel = ref(100);
const showThemePopover = ref(false);
// Preview-only override from the popover; null = show the saved theme.
const previewOverride = ref(null);

const effectiveTheme = computed(() => previewOverride.value || normalizeTheme(props.theme));

const onPreviewChange = (theme) => {
    previewOverride.value = theme;
};

// Apply writes the picked theme into the form's staged options (same path as
// the Appearance tab; toolbar Save still required) and drops the override.
const onApply = (theme) => {
    emit("apply-theme", theme);
    previewOverride.value = null;
    showThemePopover.value = false;
};

const close = () => {
    previewOverride.value = null;
    showThemePopover.value = false;
    emit("close");
};

watch(
    () => props.visible,
    (open) => {
        if (open) {
            previewOverride.value = null;
            showThemePopover.value = false;
        }
    },
);
</script>

<style scoped>
.fmt-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.fmt-preview-modal {
    background: #fff;
    border-radius: 8px;
    width: 90vw;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.fmt-preview-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #ddd;
}

.fmt-preview-modal__header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.fmt-preview-modal__actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fmt-preview-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.fmt-preview-action:hover {
    border-color: #2271b1;
}
.fmt-preview-action img {
    width: 18px;
    height: 18px;
}

.fmt-preview-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fmt-preview-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #e8f5fa;
    border-left: 4px solid #0073aa;
    border-radius: 4px;
    color: #135e96;
    font-size: 14px;
}

.fmt-preview-notice .dashicons {
    flex-shrink: 0;
    color: #0073aa;
}

.fmt-preview-zoom {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid #ddd;
}

.fmt-preview-zoom label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}

.fmt-preview-zoom input[type="range"] {
    width: 200px;
}

.fmt-preview-zoom span {
    min-width: 45px;
    text-align: right;
    color: #646970;
}
</style>
