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

<script setup>
import { ref, computed } from 'vue'
import { usePage, router } 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 CliBar from '@/Components/Cli/CliBar.vue'

const page = usePage()

// Navigation state
const currentLevel = ref(1)
const breadcrumbPath = ref([{ label: 'Strategie', level: 1, data: null }])
const selectedNode = ref(null)
const showPreview = ref(false)

// Demo data for Level 1: Strategy map
// Each theme is a metro line, projects are stations
const demoLines = ref([
    { id: 'water-quality', name: 'Waterkwaliteit', color: '#00d2ff' },
    { id: 'smart-infra', name: 'Slimme Infrastructuur', color: '#e94560' },
    { id: 'data-driven', name: 'Data-gedreven Beheer', color: '#00ff88' },
    { id: 'sustainability', name: 'Duurzaamheid', color: '#7b68ee' },
])

const demoNodes = ref([
    // Water Quality line — y spacing of 160px between lines for label clearance
    { id: 'wq1', name: 'Smart Sensors', lineId: 'water-quality', x: -200, y: -240, order: 1, status: 'actief', description: 'Slimme sensoren voor waterkwaliteitsmonitoring', owner: 'Jan Visser', children: 5, badge: 'Experiment' },
    { id: 'wq2', name: 'Biomonitoring', lineId: 'water-quality', x: 50, y: -240, order: 2, status: 'concept', description: 'Biologische monitoring methoden', owner: 'Sara Jansen', children: 3, badge: 'Concept' },
    { id: 'wq3', name: 'Voorspelmodel', lineId: 'water-quality', x: 300, y: -240, order: 3, status: 'signaal', description: 'Predictief model waterkwaliteit', badge: 'Signaal' },

    // Smart Infrastructure line
    { id: 'si1', name: 'Edge Computing', lineId: 'smart-infra', x: -200, y: -80, order: 1, status: 'actief', description: 'Edge-layer evolutie voor OT-omgevingen', owner: 'Rene de Ren', children: 8, badge: 'Pilot' },
    { id: 'si2', name: 'Digital Twin', lineId: 'smart-infra', x: 50, y: -80, order: 2, status: 'verkenning', description: 'Digitale tweeling van zuiveringsinstallaties', children: 2, badge: 'Verkenning' },
    { id: 'si3', name: 'Predictive Maint.', lineId: 'smart-infra', x: 300, y: -80, order: 3, status: 'concept', description: 'Voorspellend onderhoud op basis van sensordata', badge: 'Concept' },

    // Data-driven line
    { id: 'dd1', name: 'Data Platform', lineId: 'data-driven', x: -200, y: 80, order: 1, status: 'afgerond', description: 'Centraal dataplatform voor operationele data', owner: 'Lisa de Boer', badge: 'Afgerond' },
    { id: 'dd2', name: 'ML Pipeline', lineId: 'data-driven', x: 50, y: 80, order: 2, status: 'actief', description: 'Machine learning pipeline voor anomalie-detectie', owner: 'Tom Bakker', children: 4, badge: 'Experiment' },
    { id: 'dd3', name: 'Dashboard Suite', lineId: 'data-driven', x: 300, y: 80, order: 3, status: 'overdracht_bouwen', description: 'Operationele dashboards voor beheerders', badge: 'Overdracht' },

    // Sustainability line
    { id: 'su1', name: 'Energietransitie', lineId: 'sustainability', x: -200, y: 240, order: 1, status: 'pilot', description: 'Energieneutraal zuiveren', owner: 'Mark de Vries', children: 6, badge: 'Pilot' },
    { id: 'su2', name: 'Circulair Water', lineId: 'sustainability', x: 50, y: 240, order: 2, status: 'verkenning', description: 'Circulaire waterbehandeling', badge: 'Verkenning' },
])

const demoConnections = ref([
    { from: 'wq1', to: 'dd2' }, // Smart sensors feeds ML Pipeline
    { from: 'si1', to: 'dd1' }, // Edge computing depends on data platform
    { from: 'dd2', to: 'si3' }, // ML pipeline enables predictive maintenance
])

// Handlers
const handleNodeClick = (node) => {
    selectedNode.value = node
    showPreview.value = true
}

const handleNodeHover = (node) => {
    // Could highlight related nodes/connections
}

const handleNodeLeave = () => {
    // Reset highlights
}

const handleZoomIn = (node) => {
    showPreview.value = false
    currentLevel.value++
    breadcrumbPath.value.push({
        label: node.name,
        level: currentLevel.value,
        data: node,
    })
    // In real app: load child nodes for this project
}

const handleBreadcrumbNavigate = (item, index) => {
    breadcrumbPath.value = breadcrumbPath.value.slice(0, index + 1)
    currentLevel.value = item.level
    showPreview.value = false
    selectedNode.value = null
}

const handleCliCommand = (command) => {
    console.log('CLI command:', command)
    // Will be connected to AI service
}

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

const user = computed(() => page.props.auth?.user)
</script>

<template>
    <div class="metro-map-page">
        <!-- Top bar: breadcrumb left, user/logout right -->
        <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>

        <MetroCanvas
            :nodes="demoNodes"
            :lines="demoLines"
            :connections="demoConnections"
            :current-level="currentLevel"
            @node-click="handleNodeClick"
            @node-hover="handleNodeHover"
            @node-leave="handleNodeLeave"
        />

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

        <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);
}
</style>