<!--
|--------------------------------------------------------------------------
| DevDrawer — drawer lateral reusável pra forms de edição
|--------------------------------------------------------------------------
-->
<script setup>
import { watch } from 'vue';

const props = defineProps({
    open: { type: Boolean, default: false },
    title: { type: String, default: 'Editar' },
    subtitle: { type: String, default: '' },
    width: { type: String, default: '480px' },
    canSave: { type: Boolean, default: true },
    saving: { type: Boolean, default: false },
    saveLabel: { type: String, default: 'Salvar' },
    danger: { type: Boolean, default: false }
});

const emit = defineEmits(['close', 'save', 'delete']);

function close() {
    if (props.saving) return;
    emit('close');
}

// ESC fecha
watch(
    () => props.open,
    (isOpen) => {
        if (isOpen) {
            const handler = (e) => {
                if (e.key === 'Escape') {
                    close();
                    document.removeEventListener('keydown', handler);
                }
            };
            document.addEventListener('keydown', handler);
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
        }
    }
);
</script>

<template>
    <Teleport to="body">
        <transition name="drawer">
            <div v-if="open" class="dev-drawer-wrapper">
                <div class="dev-drawer-backdrop" @click="close" />
                <aside class="dev-drawer" :style="{ width }">
                    <header class="dd-head">
                        <div class="dd-title-wrap">
                            <h3 class="dd-title">{{ title }}</h3>
                            <p v-if="subtitle" class="dd-subtitle">{{ subtitle }}</p>
                        </div>
                        <button class="dd-close" @click="close" aria-label="Fechar">
                            <i class="pi pi-times" />
                        </button>
                    </header>

                    <div class="dd-body">
                        <slot />
                    </div>

                    <footer class="dd-foot">
                        <button v-if="$slots.leftAction || props.danger" class="dd-btn dd-btn-danger" @click="emit('delete')">
                            <slot name="leftAction"><i class="pi pi-trash" /> Excluir</slot>
                        </button>
                        <div class="dd-foot-spacer" />
                        <button class="dd-btn dd-btn-ghost" @click="close">Cancelar</button>
                        <button
                            class="dd-btn dd-btn-primary"
                            :disabled="!canSave || saving"
                            @click="emit('save')"
                        >
                            <i v-if="saving" class="pi pi-spin pi-spinner" />
                            <i v-else class="pi pi-check" />
                            {{ saveLabel }}
                        </button>
                    </footer>
                </aside>
            </div>
        </transition>
    </Teleport>
</template>

<style scoped>
.dev-drawer-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
}

.dev-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.dev-drawer {
    position: relative;
    max-width: 100vw;
    background: var(--surface-card, #fff);
    border-left: 1px solid var(--surface-border, #e2e8f0);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

.dd-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--surface-border);
}

.dd-title-wrap {
    flex: 1;
    min-width: 0;
}
.dd-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
}
.dd-subtitle {
    font-size: 11px;
    color: var(--text-color-secondary);
    margin: 3px 0 0;
    line-height: 1.5;
}

.dd-close {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: var(--text-color-secondary);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.15s;
}
.dd-close:hover {
    background: var(--surface-ground);
    color: var(--text-color);
}

.dd-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
}

.dd-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--surface-border);
    background: var(--surface-ground);
}

.dd-foot-spacer { flex: 1; }

.dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.dd-btn-primary {
    background: var(--primary-color);
    color: white;
}
.dd-btn-primary:hover:not(:disabled) { opacity: 0.9; }
.dd-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dd-btn-ghost {
    background: transparent;
    color: var(--text-color-secondary);
}
.dd-btn-ghost:hover {
    background: var(--surface-card);
    color: var(--text-color);
}

.dd-btn-danger {
    background: transparent;
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.dd-btn-danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* Transição */
.drawer-enter-active,
.drawer-leave-active {
    transition: opacity 0.2s ease;
}
.drawer-enter-active .dev-drawer,
.drawer-leave-active .dev-drawer {
    transition: transform 0.2s ease;
}
.drawer-enter-from,
.drawer-leave-to {
    opacity: 0;
}
.drawer-enter-from .dev-drawer,
.drawer-leave-to .dev-drawer {
    transform: translateX(100%);
}
</style>
