innovatieplatform/resources/js/Pages/Map/MetroMap.vue

<script setup>
import { ref, computed } from 'vue'
import { usePage, router, useForm } from '@inertiajs/vue3'
import MetroCanvas from '@/Components/MetroMap/MetroCanvas.vue'
import Breadcrumb from '@/Components/MetroMap/Breadcrumb.vue'
import NodePreview from '@/Components/MetroMap/NodePreview.vue'
import FloatingActions from '@/Components/MetroMap/FloatingActions.vue'
import ProjectForm from '@/Components/Forms/ProjectForm.vue'
import CommitmentForm from '@/Components/Forms/CommitmentForm.vue'
import CliBar from '@/Components/Cli/CliBar.vue'

const page = usePage()

const props = defineProps({
    mapData: { type: Object, default: () => ({ lines: [], nodes: [], connections: [], level: 1 }) },
    users: { type: Array, default: () => [] },
    speerpunten: { type: Array, default: () => [] },
})

// Canvas ref
const canvasRef = ref(null)

// Navigation state
const selectedNode = ref(null)
const showPreview = ref(false)

// Dimension tracking (synced from canvas zoom transitions)
const canvasDepth = ref(1)
const canvasDimension = ref(null)

// Reactive breadcrumb
const breadcrumbPath = computed(() => {
    const pageLevel = props.mapData.level ?? 1
    const project = props.mapData.project ?? null
    const path = [{ label: 'Strategie', level: 1, data: null }]

    if (pageLevel === 2 && project) {
        path.push({ label: project.naam ?? project.name ?? 'Project', level: 2, data: project })
    } else if (canvasDepth.value > 1 && canvasDimension.value) {
        path.push({
            label: canvasDimension.value.parentName ?? 'Detail',
            level: 2,
            data: canvasDimension.value,
        })
    }
    return path
})

// Dimension-aware project ID
const currentProjectId = computed(() => {
    if (props.mapData.project?.id) return props.mapData.project.id
    if (canvasDimension.value?.parentEntityType === 'project') {
        return canvasDimension.value.parentEntityId
    }
    return null
})

const currentParentEntityType = computed(() => {
    if (props.mapData.level === 2) return 'project'
    return canvasDimension.value?.parentEntityType ?? null
})

// --- Node click / hover ---
const handleNodeClick = (node) => {
    selectedNode.value = node
    showPreview.value = true
}

const handleZoomIn = (node) => {
    showPreview.value = false
    if (node.entityType === 'project') {
        router.visit(`/map/project/${node.entityId}`)
    }
}

const handleBreadcrumbNavigate = (item, index) => {
    showPreview.value = false
    selectedNode.value = null
    if (index === 0) {
        router.visit('/map')
    }
}

const handleDimensionChange = (event) => {
    canvasDepth.value = event.depth
    canvasDimension.value = event.dimension ?? null
    showPreview.value = false
    selectedNode.value = null
}

// --- Branch handle node creation ---
const handleCreateNode = (event) => {
    if (event.branchAngle === 0) {
        // Extend existing line — determine entity type from lineId
        handleExtendLine(event)
    } else {
        // Fork — create a new track + first node
        handleForkBranch(event)
    }
}

const handleExtendLine = (event) => {
    const lineId = event.lineId ?? ''

    // In dim 2 (project level): determine what type of entity to create
    if (event.depth > 1 && event.parentEntityType === 'project') {
        if (lineId.startsWith('lifecycle-') || lineId === 'lifecycle') {
            // Can't manually add lifecycle phases — they advance via transition
            return
        }
        if (lineId.startsWith('commitments-') || lineId === 'commitments') {
            pendingCreatePosition.value = { x: event.x, y: event.y }
            showCommitmentForm.value = true
            return
        }
        if (lineId.startsWith('documents-') || lineId === 'documents') {
            // Future: document upload
            console.log('Document creation at', event.x, event.y)
            return
        }
        // Custom line — create a metro node
        createMetroNode(event)
        return
    }

    // In dim 1 (strategy level): extend = add project to theme
    editingProject.value = null
    showProjectForm.value = true
}

const handleForkBranch = (event) => {
    // Fork creates a new track (metro line), then the first node on it
    if (event.parentEntityType === 'project' && event.parentEntityId) {
        pendingForkEvent.value = event
        showTrackForm.value = true
    }
}

const pendingCreatePosition = ref(null)
const pendingForkEvent = ref(null)

// --- Track creation form (for fork branches) ---
const showTrackForm = ref(false)
const trackForm = useForm({
    project_id: null,
    naam: '',
})

const submitTrackForm = () => {
    trackForm.project_id = currentProjectId.value
    trackForm.post('/metro-lines', {
        onSuccess: () => {
            showTrackForm.value = false
            trackForm.reset()
            pendingForkEvent.value = null
        },
    })
}

// --- Metro node creation (for custom line extend) ---
const createMetroNode = (event) => {
    // Determine metro_line_id from the lineId
    // lineId format for custom lines will need to be mapped
    // For now, emit a placeholder
    console.log('Create metro node on custom line:', event)
}

// --- FAB handlers ---
const handleCreateTheme = () => {
    // Future: thema creation form
    editingProject.value = null
    showProjectForm.value = true
}

const handleCreateTrack = () => {
    showTrackForm.value = true
}

const handleFabItemHover = (item) => {
    // Highlight the relevant line on canvas
    // (only meaningful in dim 2 where lines are visible)
    if (item.lineId) {
        canvasRef.value?.setHighlightedLine(item.lineId)
    }
}

const handleFabItemLeave = () => {
    canvasRef.value?.setHighlightedLine(null)
}

const handleCliCommand = (command) => {
    console.log('CLI command:', command)
}

const logout = () => {
    router.post('/logout')
}

const user = computed(() => page.props.auth?.user)
const hasNodes = computed(() => props.mapData.nodes && props.mapData.nodes.length > 0)

// Modal state
const showProjectForm = ref(false)
const showCommitmentForm = ref(false)
const editingProject = ref(null)
</script>

<template>
    <div class="metro-map-page">
        <!-- Top bar -->
        <div class="top-bar">
            <Breadcrumb
                :path="breadcrumbPath"
                @navigate="handleBreadcrumbNavigate"
            />
            <div class="user-controls">
                <span v-if="user" class="user-name">{{ user.name }}</span>
                <button @click="logout" class="logout-btn">[LOGOUT]</button>
            </div>
        </div>

        <template v-if="hasNodes">
            <MetroCanvas
                ref="canvasRef"
                :nodes="props.mapData.nodes"
                :lines="props.mapData.lines"
                :connections="props.mapData.connections"
                :current-level="props.mapData.level ?? 1"
                @node-click="handleNodeClick"
                @node-hover="() => {}"
                @node-leave="() => {}"
                @dimension-change="handleDimensionChange"
                @create-node="handleCreateNode"
            />

            <NodePreview
                :node="selectedNode"
                :visible="showPreview"
                @close="showPreview = false"
                @zoom-in="handleZoomIn"
            />
        </template>

        <div v-else class="empty-state">
            <span class="empty-message">Nog geen projecten. Gebruik het + icoon om een thema toe te voegen.</span>
        </div>

        <FloatingActions
            :depth="canvasDepth"
            :parent-entity-type="currentParentEntityType"
            :parent-project-id="currentProjectId"
            @create-theme="handleCreateTheme"
            @create-track="handleCreateTrack"
            @item-hover="handleFabItemHover"
            @item-leave="handleFabItemLeave"
        />

        <ProjectForm
            :show="showProjectForm"
            :project="editingProject"
            :speerpunten="speerpunten"
            @close="showProjectForm = false"
        />

        <CommitmentForm
            v-if="currentProjectId"
            :show="showCommitmentForm"
            :project-id="currentProjectId"
            :users="users"
            @close="showCommitmentForm = false; pendingCreatePosition = null"
        />

        <!-- Track creation modal (for fork branches and FAB) -->
        <Teleport to="body">
            <Transition name="modal-fade">
                <div v-if="showTrackForm" class="modal-backdrop" @click="showTrackForm = false">
                    <div class="modal-content" @click.stop>
                        <div class="modal-header">NIEUWE LIJN</div>
                        <form @submit.prevent="submitTrackForm">
                            <div class="form-group">
                                <label class="form-label">Naam</label>
                                <input
                                    v-model="trackForm.naam"
                                    type="text"
                                    class="form-input"
                                    placeholder="bijv. Risico's, Acties..."
                                    required
                                    autofocus
                                />
                            </div>
                            <div class="form-actions">
                                <button type="button" class="btn-cancel" @click="showTrackForm = false">Annuleren</button>
                                <button type="submit" class="btn-submit" :disabled="trackForm.processing">
                                    {{ trackForm.processing ? 'Bezig...' : 'Aanmaken' }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </Transition>
        </Teleport>

        <CliBar @command="handleCliCommand" />
    </div>
</template>

<style scoped>
.metro-map-page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #1a1a2e;
}

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: rgba(26, 26, 46, 0.85);
    border-bottom: 1px solid rgba(0, 210, 255, 0.15);
    backdrop-filter: blur(8px);
}

.user-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-name {
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #8892b0;
}

.logout-btn {
    font-family: 'VT323', monospace;
    font-size: 14px;
    color: #e94560;
    background: none;
    border: 1px solid rgba(233, 69, 96, 0.3);
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.2);
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-top: 48px;
}

.empty-message {
    font-family: 'VT323', monospace;
    font-size: 20px;
    color: #8892b0;
    text-align: center;
    opacity: 0.7;
}

/* Track creation modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #0d1b2a;
    border: 1px solid #00d2ff;
    border-radius: 6px;
    padding: 24px;
    min-width: 340px;
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.2);
}

.modal-header {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: #00d2ff;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-family: 'VT323', monospace;
    font-size: 14px;
    color: #8892b0;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    background: #16213e;
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 3px;
    color: #e8e8e8;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.form-input:focus {
    border-color: #00d2ff;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.2);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn-cancel {
    font-family: 'VT323', monospace;
    font-size: 15px;
    color: #8892b0;
    background: none;
    border: 1px solid rgba(136, 146, 176, 0.3);
    padding: 6px 16px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cancel:hover {
    color: #e8e8e8;
    border-color: #8892b0;
}

.btn-submit {
    font-family: 'VT323', monospace;
    font-size: 15px;
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid #00d2ff;
    padding: 6px 16px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

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

.btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal transitions */
.modal-fade-enter-active {
    transition: opacity 0.15s ease;
}

.modal-fade-leave-active {
    transition: opacity 0.1s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
    opacity: 0;
}
</style>