<script setup>
/*
 * MelissaDocumentosTemplates — Página nativa Melissa pros templates de
 * documentos (substitui o embed). 3 views: list / create / edit.
 *
 * Layout 1-col empilhado (sem sidebar — separação global/tenant é visual
 * via cards distintos).
 *
 * Lógica idêntica à DocumentTemplatesPage (composable
 * useDocumentTemplates + DocumentTemplateEditor reusado).
 */
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';

import { useDocumentTemplates } from '@/features/documents/composables/useDocumentTemplates';
import DocumentTemplateEditor from '@/features/documents/components/DocumentTemplateEditor.vue';
// Button/Menu/Skeleton: auto via PrimeVueResolver
import Menu from 'primevue/menu';

const emit = defineEmits(['close']);
const toast = useToast();
const confirm = useConfirm();

const {
    templates, loading,
    globalTemplates, tenantTemplates,
    TIPOS_TEMPLATE,
    fetchTemplates, create, update, remove, duplicate
} = useDocumentTemplates();

// ── Views ───────────────────────────────────────────────
const view = ref('list');
const editingTemplate = ref({});
const editingId = ref(null);

// ── Acoes ───────────────────────────────────────────────
function openCreate() {
    editingId.value = null;
    editingTemplate.value = {};
    view.value = 'create';
}

function openEdit(tpl) {
    if (tpl.is_global) {
        toast.add({
            severity: 'warn',
            summary: 'Somente leitura',
            detail: 'Templates padrão não podem ser editados. Duplique para personalizar.',
            life: 3000
        });
        return;
    }
    editingId.value = tpl.id;
    editingTemplate.value = { ...tpl };
    view.value = 'edit';
}

async function onSave(payload) {
    try {
        if (view.value === 'create') {
            await create(payload);
            toast.add({ severity: 'success', summary: 'Criado', detail: payload.nome_template, life: 3000 });
        } else {
            await update(editingId.value, payload);
            toast.add({ severity: 'success', summary: 'Salvo', detail: payload.nome_template, life: 3000 });
        }
        view.value = 'list';
        fetchTemplates(true);
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
    }
}

function onDuplicate(tpl) {
    confirm.require({
        message: `Deseja copiar "${tpl.nome_template}" para os seus templates? Você poderá editá-lo livremente.`,
        header: 'Duplicar template',
        icon: 'pi pi-copy',
        acceptLabel: 'Copiar',
        rejectLabel: 'Cancelar',
        accept: async () => {
            try {
                await duplicate(tpl.id);
                toast.add({ severity: 'success', summary: 'Duplicado', detail: `"${tpl.nome_template}" copiado para Meus Templates.`, life: 3000 });
            } catch (e) {
                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
            }
        }
    });
}

function onDelete(tpl) {
    confirm.require({
        message: `Desativar template "${tpl.nome_template}"?`,
        header: 'Confirmar',
        icon: 'pi pi-exclamation-triangle',
        accept: async () => {
            try {
                await remove(tpl.id);
                toast.add({ severity: 'success', summary: 'Desativado', life: 2000 });
            } catch (e) {
                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message });
            }
        }
    });
}

function onCancel() {
    view.value = 'list';
}

function tipoLabel(tipo) {
    return TIPOS_TEMPLATE.find((t) => t.value === tipo)?.label || tipo;
}

// ── Card menu (templates do tenant) ─────────────────────
function getCardMenuItems(tpl) {
    const items = [
        { label: 'Duplicar', icon: 'pi pi-copy', command: () => onDuplicate(tpl) }
    ];
    if (!tpl.is_global) {
        items.push(
            { label: 'Editar', icon: 'pi pi-pencil', command: () => openEdit(tpl) },
            { separator: true },
            { label: 'Desativar', icon: 'pi pi-trash', class: 'text-red-500', command: () => onDelete(tpl) }
        );
    }
    return items;
}

onMounted(() => {
    fetchTemplates(true);
});
</script>

<template>
    <ConfirmDialog />

    <section class="mdt-page">
        <header class="mdt-page__head">
            <div class="mdt-page__title">
                <button
                    v-if="view !== 'list'"
                    class="mdt-back-btn"
                    v-tooltip.bottom="'Voltar à lista'"
                    @click="view = 'list'"
                >
                    <i class="pi pi-arrow-left" />
                </button>
                <i v-else class="pi pi-file-edit mdt-page__title-icon" />
                <span>
                    <template v-if="view === 'list'">Templates de documentos</template>
                    <template v-else-if="view === 'create'">Novo template</template>
                    <template v-else>Editar template</template>
                </span>
                <span v-if="view === 'list'" class="mdt-page__count">{{ templates.length }}</span>
            </div>
            <div class="mdt-page__actions">
                <template v-if="view === 'list'">
                    <button
                        class="mdt-act-btn mdt-act-btn--primary"
                        v-tooltip.bottom="'Criar novo template personalizado'"
                        @click="openCreate"
                    >
                        <i class="pi pi-plus" />
                        <span>Novo template</span>
                    </button>
                    <button
                        class="mdt-head-btn"
                        v-tooltip.bottom="'Atualizar'"
                        :disabled="loading"
                        @click="fetchTemplates(true)"
                    >
                        <i :class="loading ? 'pi pi-spin pi-spinner' : 'pi pi-refresh'" />
                    </button>
                </template>
                <template v-else>
                    <button
                        class="mdt-act-btn"
                        @click="view = 'list'"
                    >
                        <i class="pi pi-times" />
                        <span>Cancelar</span>
                    </button>
                    <button
                        class="mdt-act-btn mdt-act-btn--primary"
                        @click="onSave(editingTemplate)"
                    >
                        <i class="pi pi-check" />
                        <span>{{ view === 'create' ? 'Criar template' : 'Salvar' }}</span>
                    </button>
                </template>
                <button class="mdt-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
                    <i class="pi pi-times" />
                </button>
            </div>
        </header>

        <!-- Subheader -->
        <div v-if="view === 'list'" class="mdt-subheader">
            <i class="pi pi-info-circle mdt-subheader__icon" />
            <span class="mdt-subheader__text">
                Modelos reutilizáveis pra <strong>declarações</strong>,
                <strong>atestados</strong>, <strong>recibos</strong> e outros documentos.
                Templates padrão são <strong>somente leitura</strong> — duplique pra
                personalizar.
            </span>
        </div>

        <!-- Body -->
        <div class="mdt-body">
            <!-- ══ LIST VIEW ══ -->
            <template v-if="view === 'list'">
                <!-- Loading -->
                <div v-if="loading && !templates.length" class="mdt-loading">
                    <i class="pi pi-spin pi-spinner" />
                    <span>Carregando templates…</span>
                </div>

                <!-- Empty -->
                <div v-else-if="!templates.length" class="mdt-empty">
                    <i class="pi pi-file-edit mdt-empty__icon" />
                    <div class="mdt-empty__title">Nenhum template encontrado</div>
                    <div class="mdt-empty__hint">Crie seu primeiro template personalizado.</div>
                    <button class="mdt-act-btn mdt-act-btn--primary mdt-empty__btn" @click="openCreate">
                        <i class="pi pi-plus" />
                        <span>Criar primeiro template</span>
                    </button>
                </div>

                <template v-else>
                    <!-- Templates globais (padrão) -->
                    <div v-if="globalTemplates.length" class="mdt-section">
                        <div class="mdt-section__head">
                            <div class="mdt-section__title">
                                <i class="pi pi-shield" />
                                <span>Templates padrão do sistema</span>
                            </div>
                            <span class="mdt-section__count is-info">{{ globalTemplates.length }}</span>
                        </div>
                        <div class="mdt-grid">
                            <button
                                v-for="tpl in globalTemplates"
                                :key="tpl.id"
                                class="mdt-card mdt-card--global"
                                type="button"
                                @click="onDuplicate(tpl)"
                            >
                                <div class="mdt-card__head">
                                    <span class="mdt-card__icon mdt-card__icon--info">
                                        <i class="pi pi-file" />
                                    </span>
                                    <div class="mdt-card__main">
                                        <div class="mdt-card__name">{{ tpl.nome_template }}</div>
                                        <div class="mdt-card__tipo">{{ tipoLabel(tpl.tipo) }}</div>
                                        <div v-if="tpl.descricao" class="mdt-card__desc">{{ tpl.descricao }}</div>
                                    </div>
                                </div>
                                <span class="mdt-card__badge mdt-card__badge--info">padrão</span>
                                <div class="mdt-card__hint">
                                    <i class="pi pi-copy" />
                                    Click pra duplicar e personalizar
                                </div>
                            </button>
                        </div>
                    </div>

                    <!-- Templates do tenant (meus) -->
                    <div v-if="tenantTemplates.length" class="mdt-section">
                        <div class="mdt-section__head">
                            <div class="mdt-section__title">
                                <i class="pi pi-user-edit" />
                                <span>Meus templates</span>
                            </div>
                            <span class="mdt-section__count is-accent">{{ tenantTemplates.length }}</span>
                        </div>
                        <div class="mdt-grid">
                            <div
                                v-for="tpl in tenantTemplates"
                                :key="tpl.id"
                                class="mdt-card mdt-card--tenant"
                                role="button"
                                tabindex="0"
                                @click="openEdit(tpl)"
                                @keydown.enter.prevent="openEdit(tpl)"
                            >
                                <div class="mdt-card__head">
                                    <span class="mdt-card__icon mdt-card__icon--primary">
                                        <i class="pi pi-file-edit" />
                                    </span>
                                    <div class="mdt-card__main">
                                        <div class="mdt-card__name">{{ tpl.nome_template }}</div>
                                        <div class="mdt-card__tipo">{{ tipoLabel(tpl.tipo) }}</div>
                                        <div v-if="tpl.descricao" class="mdt-card__desc">{{ tpl.descricao }}</div>
                                    </div>
                                </div>

                                <!-- Menu de ações -->
                                <div class="mdt-card__menu" @click.stop>
                                    <Button
                                        icon="pi pi-ellipsis-v"
                                        text
                                        rounded
                                        size="small"
                                        class="!w-7 !h-7"
                                        @click.stop="$refs[`menu_${tpl.id}`]?.[0]?.toggle($event)"
                                    />
                                    <Menu
                                        :ref="`menu_${tpl.id}`"
                                        :model="getCardMenuItems(tpl)"
                                        :popup="true"
                                    />
                                </div>

                                <div class="mdt-card__foot">
                                    <span v-if="!tpl.ativo" class="mdt-card__badge mdt-card__badge--inactive">
                                        inativo
                                    </span>
                                    <span class="mdt-card__vars">
                                        <i class="pi pi-code" />
                                        {{ tpl.variaveis?.length || 0 }} variáveis
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </template>

            <!-- ══ CREATE / EDIT VIEW ══ -->
            <template v-if="view === 'create' || view === 'edit'">
                <DocumentTemplateEditor
                    v-model="editingTemplate"
                    :mode="view"
                    @save="onSave"
                    @cancel="onCancel"
                />
            </template>
        </div>
    </section>
</template>

<style scoped>
/* ─── Page chrome ─── */
.mdt-page {
    position: absolute;
    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-medium);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border: 1px solid var(--m-border);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--m-text);
    animation: mdt-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes mdt-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

.mdt-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--m-border);
    flex-shrink: 0;
    gap: 10px;
}
.mdt-page__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 500;
}
.mdt-page__title-icon { color: var(--p-primary-color); font-size: 1.05rem; }
.mdt-page__title > span:not(.mdt-page__count) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mdt-page__count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--m-accent);
    background: var(--m-accent-soft);
    border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
}

.mdt-back-btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 140ms ease;
}
.mdt-back-btn:hover { background: var(--m-bg-soft-hover); }
.mdt-back-btn > i { font-size: 0.85rem; }

.mdt-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.mdt-close, .mdt-head-btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 140ms ease;
}
.mdt-close:hover, .mdt-head-btn:hover { background: var(--m-bg-soft-hover); }
.mdt-head-btn > i { font-size: 0.85rem; }
.mdt-head-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mdt-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color 140ms ease, transform 140ms ease;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
}
.mdt-act-btn:hover { background: var(--m-bg-soft-hover); }
.mdt-act-btn--primary {
    background: var(--m-accent);
    border-color: var(--m-accent);
    color: white;
}
.mdt-act-btn--primary:hover {
    background: color-mix(in srgb, var(--m-accent) 88%, white);
    transform: translateY(-1px);
}
.mdt-act-btn > i { font-size: 0.78rem; }

/* Subheader */
.mdt-subheader {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    font-size: 0.78rem;
    color: var(--m-text-muted);
    line-height: 1.45;
    flex-shrink: 0;
}
.mdt-subheader__icon { color: var(--p-primary-color); font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
.mdt-subheader__text { flex: 1; min-width: 0; }
.mdt-subheader__text strong { color: var(--m-text); font-weight: 600; }

/* Body */
.mdt-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mdt-body::-webkit-scrollbar { width: 5px; }
.mdt-body::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }

/* Loading + Empty */
.mdt-loading,
.mdt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 28px;
    text-align: center;
    color: var(--m-text-muted);
    gap: 8px;
    flex: 1;
}
.mdt-loading > i { font-size: 1.4rem; color: var(--p-primary-color); }
.mdt-empty__icon { font-size: 2.2rem; color: var(--m-text-faint); margin-bottom: 4px; }
.mdt-empty__title { font-size: 0.95rem; font-weight: 600; color: var(--m-text); }
.mdt-empty__hint { font-size: 0.82rem; }
.mdt-empty__btn { margin-top: 8px; }

/* ─── Section (cards de templates) ─── */
.mdt-section {
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.mdt-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--m-border);
}
.mdt-section__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--m-text);
}
.mdt-section__title > i {
    font-size: 0.92rem;
    color: var(--m-text-muted);
}
.mdt-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}
.mdt-section__count.is-info {
    background: color-mix(in srgb, rgb(37, 99, 235) 18%, transparent);
    color: rgb(37, 99, 235);
}
.mdt-section__count.is-accent {
    background: var(--m-accent);
    color: white;
}

.mdt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    padding: 12px;
}

/* Card de template (global ou tenant) */
.mdt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 10px;
    color: var(--m-text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.mdt-card:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--p-primary-color);
    transform: translateY(-1px);
}
.mdt-card:focus-visible {
    outline: 2px solid var(--p-primary-color);
    outline-offset: 2px;
}

.mdt-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.mdt-card__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    flex-shrink: 0;
    font-size: 1rem;
}
.mdt-card__icon--info {
    background: color-mix(in srgb, rgb(37, 99, 235) 15%, transparent);
    color: rgb(37, 99, 235);
}
.mdt-card__icon--primary {
    background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
    color: var(--p-primary-color);
}
.mdt-card__main {
    flex: 1;
    min-width: 0;
}
.mdt-card__name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--m-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.mdt-card__tipo {
    font-size: 0.72rem;
    color: var(--m-text-muted);
    margin-top: 2px;
}
.mdt-card__desc {
    font-size: 0.72rem;
    color: var(--m-text-muted);
    line-height: 1.5;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0.85;
}
.mdt-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mdt-card__badge--info {
    background: color-mix(in srgb, rgb(37, 99, 235) 18%, transparent);
    color: rgb(37, 99, 235);
}
.mdt-card__badge--inactive {
    background: rgba(220, 38, 38, 0.15);
    color: rgb(220, 38, 38);
}
.mdt-card__hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--m-text-muted);
    opacity: 0;
    transition: opacity 140ms ease;
    margin-top: auto;
}
.mdt-card:hover .mdt-card__hint { opacity: 1; }
.mdt-card__hint > i { font-size: 0.7rem; }

.mdt-card__menu {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 140ms ease;
}
.mdt-card:hover .mdt-card__menu { opacity: 1; }

.mdt-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.mdt-card__vars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--m-text-muted);
}
.mdt-card__vars > i { font-size: 0.65rem; }

/* Mobile (<1024px) */
@media (max-width: 1023px) {
    .mdt-page__title > span:nth-child(2):not(.mdt-page__count) {
        font-size: 0.92rem;
    }
    .mdt-act-btn span { display: none; }
    .mdt-act-btn { width: 32px; padding: 0; justify-content: center; }
    .mdt-grid { grid-template-columns: 1fr; }
}
</style>
