<template>
    <div
        v-if="isOpen"
        class="fmt-template-modal-backdrop"
        @click="handleBackdropClick"
    >
        <div class="fmt-template-modal" role="dialog" aria-modal="true">
            <div class="fmt-template-modal__header">
                <h2>{{ __("Choose a Template", "formatrica") }}</h2>
                <button
                    type="button"
                    class="fmt-close-btn"
                    @click="emit('close')"
                    :aria-label="__('Close', 'formatrica')"
                >
                    <img :src="ICON_CLOSE" alt="" aria-hidden="true" />
                </button>
            </div>
            <div class="fmt-template-modal__content">
                <div class="fmt-template-grid">
                    <button
                        v-for="template in templates"
                        :key="template.id"
                        type="button"
                        class="fmt-template-card"
                        :class="{ 'fmt-template-card--locked': isLocked(template) }"
                        :disabled="isLocked(template)"
                        :title="isLocked(template) ? __('This template uses Pro features.', 'formatrica') : ''"
                        @click="selectTemplate(template)"
                    >
                        <img
                            v-if="getIcon(template)"
                            :src="getIcon(template)"
                            class="fmt-template-card__icon"
                            alt=""
                            aria-hidden="true"
                        />
                        <h3 class="fmt-template-card__title">
                            {{ template.name }}
                            <span v-if="template.capability && !hasCapability(template.capability)" class="fmt-template-card__pro">{{ __("Pro", "formatrica") }}</span>
                        </h3>
                        <p class="fmt-template-card__description">
                            {{ template.description }}
                        </p>
                        <div class="fmt-template-card__fields">
                            {{ template.fields.length }} fields
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { formTemplates } from "@/admin/constants/templates";
import { __ } from "@/utils/i18n";
import { useCapabilities } from "@/admin/composables/useCapabilities";
// Vite define — a literal after build, so the minifier deletes dead branches.
// eslint-disable-next-line no-undef
const PRO_UI = __FMT_PRO_UI__;
import ICON_CLOSE from "../../../assets/icons/hexagon-letter-x.svg";

import ICON_ADDRESS_BOOK from "../../../assets/icons/form-template-icons/address-book.svg";
import ICON_ARTICLE from "../../../assets/icons/form-template-icons/article.svg";
import ICON_BOOKMARK_QUESTION from "../../../assets/icons/form-template-icons/bookmark-question.svg";
import ICON_BUILDING_ESTATE from "../../../assets/icons/form-template-icons/building-estate.svg";
import ICON_BUSINESSPLAN from "../../../assets/icons/form-template-icons/businessplan.svg";
import ICON_CALCULATOR from "../../../assets/icons/form-template-icons/calculator.svg";
import ICON_CALENDAR_SHARE from "../../../assets/icons/form-template-icons/calendar-share.svg";
import ICON_CALENDAR_STATS from "../../../assets/icons/form-template-icons/calendar-stats.svg";
import ICON_COOKIE_OFF from "../../../assets/icons/form-template-icons/cookie-off.svg";
import ICON_FILE_CV from "../../../assets/icons/form-template-icons/file-cv.svg";
import ICON_HAND_GRAB from "../../../assets/icons/form-template-icons/hand-grab.svg";
import ICON_HEART_DOLLAR from "../../../assets/icons/form-template-icons/heart-dollar.svg";
import ICON_HELP_CIRCLE from "../../../assets/icons/form-template-icons/help-circle.svg";
import ICON_LAYOUT_BOARD from "../../../assets/icons/form-template-icons/layout-board.svg";
import ICON_MAIL_FORWARD from "../../../assets/icons/form-template-icons/mail-forward.svg";
import ICON_MAIL_HEART from "../../../assets/icons/form-template-icons/mail-heart.svg";
import ICON_MESSAGE_REPLY from "../../../assets/icons/form-template-icons/message-reply.svg";
import ICON_MONEYBAG_PLUS from "../../../assets/icons/form-template-icons/moneybag-plus.svg";
import ICON_SPEAKERPHONE from "../../../assets/icons/form-template-icons/speakerphone.svg";
import ICON_TREADMILL from "../../../assets/icons/form-template-icons/treadmill.svg";
import ICON_TRUCK_LOADING from "../../../assets/icons/form-template-icons/truck-loading.svg";
import ICON_USER_HEART from "../../../assets/icons/form-template-icons/user-heart.svg";
import ICON_USER_PLUS from "../../../assets/icons/form-template-icons/user-plus.svg";
import ICON_USER from "../../../assets/icons/form-template-icons/user.svg";
import ICON_SHOPPING_CART from "../../../assets/icons/form-template-icons/shopping-cart.svg";

// icon-string (template.icon) → imported SVG asset.
const TEMPLATE_ICONS = {
    "address-book": ICON_ADDRESS_BOOK,
    article: ICON_ARTICLE,
    "bookmark-question": ICON_BOOKMARK_QUESTION,
    "building-estate": ICON_BUILDING_ESTATE,
    businessplan: ICON_BUSINESSPLAN,
    calculator: ICON_CALCULATOR,
    "calendar-share": ICON_CALENDAR_SHARE,
    "calendar-stats": ICON_CALENDAR_STATS,
    "cookie-off": ICON_COOKIE_OFF,
    "file-cv": ICON_FILE_CV,
    "hand-grab": ICON_HAND_GRAB,
    "heart-dollar": ICON_HEART_DOLLAR,
    "help-circle": ICON_HELP_CIRCLE,
    "layout-board": ICON_LAYOUT_BOARD,
    "mail-forward": ICON_MAIL_FORWARD,
    "mail-heart": ICON_MAIL_HEART,
    "message-reply": ICON_MESSAGE_REPLY,
    "moneybag-plus": ICON_MONEYBAG_PLUS,
    speakerphone: ICON_SPEAKERPHONE,
    treadmill: ICON_TREADMILL,
    "truck-loading": ICON_TRUCK_LOADING,
    "user-heart": ICON_USER_HEART,
    "user-plus": ICON_USER_PLUS,
    user: ICON_USER,
    "shopping-cart": ICON_SHOPPING_CART,
};

defineProps({
    isOpen: {
        type: Boolean,
        required: true,
    },
});

const emit = defineEmits(["close", "select"]);

// wporg bundle: Pro templates are absent (never registered) — hidden, never
// locked. The capability filter is belt-and-suspenders.
const templates = PRO_UI ? formTemplates() : formTemplates().filter((t) => !t.capability);

// Pro templates (P16): visible-but-locked on Free — the admin sees they exist
// but can't apply them without the capability their features need.
const { has: hasCapability } = useCapabilities();
const isLocked = (template) =>
    !!template.capability && !hasCapability(template.capability);

const getIcon = (template) => TEMPLATE_ICONS[template.icon] || null;

function selectTemplate(template) {
    if (isLocked(template)) {
        return;
    }
    emit("select", template);
    emit("close");
}

function handleBackdropClick(event) {
    if (event.target === event.currentTarget) {
        emit("close");
    }
}
</script>

<style scoped>
.fmt-template-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
}

.fmt-template-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

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

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

.fmt-template-modal__close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #50575e;
}

.fmt-template-modal__close:hover {
    background: #f0f0f1;
    color: #000;
}

.fmt-template-modal__content {
    padding: 24px;
    overflow-y: auto;
}

.fmt-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.fmt-template-card {
    background: #fff;
    border: 2px solid #dcdcde;
    border-radius: 6px;
    padding: 20px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.fmt-template-card:hover {
    border-color: #2271b1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.fmt-template-card:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.fmt-template-card__icon {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
}

.fmt-template-card__title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
}

.fmt-template-card__description {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #50575e;
    line-height: 1.5;
}

.fmt-template-card__fields {
    font-size: 13px;
    color: #787c82;
    font-weight: 500;
}

.fmt-template-card--locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.fmt-template-card--locked:hover {
    border-color: #dcdcde;
    box-shadow: none;
    transform: none;
}

.fmt-template-card__pro {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8b5cf6;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}
</style>
