<script setup>
import { ref, computed } from 'vue'
import { usePage, router, useForm } from '@inertiajs/vue3'
import axios from 'axios'
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
}

// --- Refresh map data without full page reload ---
const refreshMapData = async () => {
    try {
        const url = currentProjectId.value
            ? `/api/map/project/${currentProjectId.value}`
            : '/api/map/strategy'
        const { data } = await axios.get(url)
        // Update the reactive props — Inertia page props are mutable
        Object.assign(props.mapData, data)
    } catch (e) {
        // Fallback: full page reload
        router.reload()
    }
}

// --- Branch handle node creation ---
const isExtendAngle = (angle) => [0, 180, 45, 315].includes(angle)

const handleCreateNode = (event) => {
    if (isExtendAngle(event.branchAngle)) {
        handleExtendLine(event)
    } else {
        // Vertical (90°, 270°) = new track
        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') {
            return // Lifecycle phases advance via transition, not manual creation
        }
        if (lineId.startsWith('commitments-') || lineId === 'commitments') {
            pendingCreateEvent.value = event
            showCommitmentForm.value = true
            return
        }
        if (lineId.startsWith('documents-') || lineId === 'documents') {
            pendingCreateEvent.value = event
            showMetroNodeForm.value = true
            return
        }
        // Custom line
        pendingCreateEvent.value = event
        showMetroNodeForm.value = true
        return
    }

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

const handleForkBranch = (event) => {
    if (event.depth > 1 && event.parentEntityType === 'project' && event.parentEntityId) {
        // Inside a project → create new metro line
        pendingCreateEvent.value = event
        showTrackForm.value = true
    } else {
        // At dim 1 → create new thema (= new metro line at root)
        pendingCreateEvent.value = event
        showThemaForm.value = true
    }
}

const pendingCreateEvent = ref(null)

// --- Track creation form (for fork branches in dim 2) ---
const showTrackForm = ref(false)
const trackFormData = ref({ naam: '' })
const trackFormProcessing = ref(false)

const submitTrackForm = async () => {
    trackFormProcessing.value = true
    try {
        await axios.post('/metro-lines', {
            project_id: currentProjectId.value,
            naam: trackFormData.value.naam,
        })
        showTrackForm.value = false
        trackFormData.value.naam = ''
        pendingCreateEvent.value = null
        await refreshMapData()
    } catch (e) {
        console.error('Track creation failed:', e.response?.data || e.message)
    } finally {
        trackFormProcessing.value = false
    }
}

// --- Thema creation form (for fork branches at dim 1) ---
const showThemaForm = ref(false)
const themaFormData = ref({ naam: '', beschrijving: '' })
const themaFormProcessing = ref(false)

const submitThemaForm = async () => {
    themaFormProcessing.value = true
    try {
        await axios.post('/themas', {
            naam: themaFormData.value.naam,
            beschrijving: themaFormData.value.beschrijving,
        })
        showThemaForm.value = false
        themaFormData.value = { naam: '', beschrijving: '' }
        pendingCreateEvent.value = null
        await refreshMapData()
    } catch (e) {
        console.error('Thema creation failed:', e.response?.data || e.message)
    } finally {
        themaFormProcessing.value = false
    }
}

// --- Metro node / generic item creation form ---
const showMetroNodeForm = ref(false)
const nodeFormData = ref({ naam: '', beschrijving: '' })
const nodeFormProcessing = ref(false)

const submitMetroNodeForm = async () => {
    const event = pendingCreateEvent.value
    if (!event) return

    nodeFormProcessing.value = true
    try {
        const lineId = event.lineId ?? ''
        const match = lineId.match(/\d+$/)

        await axios.post('/metro-nodes', {
            metro_line_id: match ? parseInt(match[0]) : null,
            naam: nodeFormData.value.naam,
            beschrijving: nodeFormData.value.beschrijving,
            x: event.x,
            y: event.y,
        })
        showMetroNodeForm.value = false
        nodeFormData.value = { naam: '', beschrijving: '' }
        pendingCreateEvent.value = null
        await refreshMapData()
    } catch (e) {
        console.error('Node creation failed:', e.response?.data || e.message)
    } finally {
        nodeFormProcessing.value = false
    }
}

// --- FAB handlers ---
const handleCreateTheme = () => {
    showThemaForm.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 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; pendingCreateEvent = null; refreshMapData()"
        />

        <!-- Track creation modal (fork in dim 2) -->
        <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="trackFormData.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="trackFormProcessing">
                                    {{ trackFormProcessing ? 'Bezig...' : 'Aanmaken' }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </Transition>
        </Teleport>

        <!-- Thema creation modal (fork at dim 1) -->
        <Teleport to="body">
            <Transition name="modal-fade">
                <div v-if="showThemaForm" class="modal-backdrop" @click="showThemaForm = false">
                    <div class="modal-content" @click.stop>
                        <div class="modal-header">NIEUW THEMA</div>
                        <form @submit.prevent="submitThemaForm">
                            <div class="form-group">
                                <label class="form-label">Naam</label>
                                <input v-model="themaFormData.naam" type="text" class="form-input"
                                    placeholder="Naam van het thema..." required autofocus />
                            </div>
                            <div class="form-group">
                                <label class="form-label">Beschrijving</label>
                                <textarea v-model="themaFormData.beschrijving" class="form-input form-textarea"
                                    placeholder="Omschrijving..." rows="3"></textarea>
                            </div>
                            <div class="form-actions">
                                <button type="button" class="btn-cancel" @click="showThemaForm = false">Annuleren</button>
                                <button type="submit" class="btn-submit" :disabled="themaFormProcessing">
                                    {{ themaFormProcessing ? 'Bezig...' : 'Aanmaken' }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </Transition>
        </Teleport>

        <!-- Metro node creation modal (extend on custom/document lines) -->
        <Teleport to="body">
            <Transition name="modal-fade">
                <div v-if="showMetroNodeForm" class="modal-backdrop" @click="showMetroNodeForm = false">
                    <div class="modal-content" @click.stop>
                        <div class="modal-header">NIEUW PUNT</div>
                        <form @submit.prevent="submitMetroNodeForm">
                            <div class="form-group">
                                <label class="form-label">Naam</label>
                                <input v-model="nodeFormData.naam" type="text" class="form-input"
                                    placeholder="Naam..." required autofocus />
                            </div>
                            <div class="form-group">
                                <label class="form-label">Beschrijving</label>
                                <textarea v-model="nodeFormData.beschrijving" class="form-input form-textarea"
                                    placeholder="Optioneel..." rows="3"></textarea>
                            </div>
                            <div class="form-actions">
                                <button type="button" class="btn-cancel" @click="showMetroNodeForm = false">Annuleren</button>
                                <button type="submit" class="btn-submit" :disabled="nodeFormProcessing">
                                    {{ nodeFormProcessing ? 'Bezig...' : 'Aanmaken' }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </Transition>
        </Teleport>

        <CliBar :project-id="currentProjectId" />
    </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-textarea {
    resize: vertical;
    min-height: 60px;
}

.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>
