<template>
    <aside id="fmt-preview-panel" class="fmt-preview-panel" :aria-label="__('Form Preview', 'formatrica')">
        <div class="fmt-preview-panel__header">
            <h2>{{ __("Form Preview", "formatrica") }}</h2>
            <div class="fmt-preview-panel__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
                    type="button"
                    class="fmt-preview-action"
                    :title="__('Open large preview', 'formatrica')"
                    :aria-label="__('Open large preview', 'formatrica')"
                    @click="$emit('expand')"
                >
                    <img :src="ICON_MAXIMIZE" alt="" aria-hidden="true" />
                </button>
                <button
                    type="button"
                    class="fmt-preview-action"
                    :title="__('Unpin preview', 'formatrica')"
                    :aria-label="__('Unpin preview', 'formatrica')"
                    @click="$emit('unpin')"
                >
                    <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-panel__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>

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

<script setup>
import { computed, ref } 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_BRUSH from "../../../../assets/icons/brush.svg";
import ICON_CLOSE from "../../../../assets/icons/square-letter-x.svg";
import ICON_MAXIMIZE from "../../../../assets/icons/eye.svg";

const props = defineProps({
    formTitle: String,
    fields: Array,
    theme: { type: Object, default: null },
    layoutMode: { type: String, default: "single" },
});

const emit = defineEmits(["unpin", "expand", "apply-theme"]);

const zoomLevel = ref(100);
const showThemePopover = ref(false);
const previewOverride = ref(null);

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

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

const onApply = (theme) => {
    emit("apply-theme", theme);
    previewOverride.value = null;
    showThemePopover.value = false;
};
</script>

<style scoped>
.fmt-preview-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
    min-width: 0;
    max-height: calc(100vh - 180px);
    position: sticky;
    top: 46px;
}

.fmt-preview-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #dcdcde;
}

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

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

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

.fmt-preview-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

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

.fmt-preview-panel__footer {
    display: flex;
    justify-content: center;
    padding: 10px;
    border-top: 1px solid #dcdcde;
}

.fmt-preview-panel__footer label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
}

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

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