<script setup>
defineProps({
    node: { type: Object, default: null },
    visible: { type: Boolean, default: false },
})

const emit = defineEmits(['close', 'zoom-in'])
</script>

<template>
    <Transition name="slide">
        <div v-if="visible && node" class="node-preview">
            <div class="preview-header">
                <h2 class="preview-title">{{ node.name }}</h2>
                <button @click="emit('close')" class="close-btn">[X]</button>
            </div>

            <div class="preview-meta">
                <span v-if="node.status" class="status-badge" :class="node.status">
                    {{ node.status }}
                </span>
                <span v-if="node.owner" class="owner">{{ node.owner }}</span>
            </div>

            <p v-if="node.description" class="preview-desc">{{ node.description }}</p>

            <div v-if="node.children" class="preview-children">
                <div class="children-label">Contains {{ node.children }} items</div>
            </div>

            <button @click="emit('zoom-in', node)" class="zoom-btn">
                ZOOM IN &gt;&gt;
            </button>
        </div>
    </Transition>
</template>

<style scoped>
.node-preview {
    position: fixed;
    right: 16px;
    top: 60px;
    width: 320px;
    background: #16213e;
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 6px;
    padding: 20px;
    z-index: 60;
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.1);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.preview-title {
    font-family: 'VT323', monospace;
    font-size: 22px;
    color: #00d2ff;
    margin: 0;
}

.close-btn {
    font-family: 'VT323', monospace;
    color: #8892b0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.close-btn:hover {
    color: #e94560;
}

.preview-meta {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
}

.status-badge {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.actief, .status-badge.active { background: rgba(0, 210, 255, 0.15); color: #00d2ff; }
.status-badge.afgerond, .status-badge.completed { background: rgba(0, 255, 136, 0.15); color: #00ff88; }
.status-badge.geparkeerd { background: rgba(255, 217, 61, 0.15); color: #ffd93d; }
.status-badge.gestopt { background: rgba(233, 69, 96, 0.15); color: #e94560; }

.owner {
    color: #8892b0;
}

.preview-desc {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: #8892b0;
    margin-top: 12px;
    line-height: 1.5;
}

.preview-children {
    margin-top: 12px;
}

.children-label {
    font-family: 'VT323', monospace;
    font-size: 14px;
    color: #7b68ee;
}

.zoom-btn {
    margin-top: 16px;
    width: 100%;
    padding: 8px;
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid #00d2ff;
    color: #00d2ff;
    font-family: 'VT323', monospace;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.zoom-btn:hover {
    background: rgba(0, 210, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

.slide-enter-active, .slide-leave-active {
    transition: all 0.25s ease;
}
.slide-enter-from, .slide-leave-to {
    opacity: 0;
    transform: translateX(20px);
}
</style>
