<template>
    <div class="min-h-screen">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-10">
                <Icon
                    @click="router.push('/')"
                    name="gg:arrow-left-o"
                    size="44"
                    class="cursor-pointer text-primary-500"
                />
                <h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
            </div>
        </div>

        <div class="px-[86px]">
            <div class="mt-6 border border-slate-200 mb-16">
                <div
                    v-for="entry in buildingLayouts"
                    :key="entry.building.id"
                    class="border-t border-slate-200 first:border-t-0"
                >
                    <div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide">
                        {{ entry.building.label || `Bâtiment ${entry.building.id}` }}
                    </div>

                    <div class="px-4 py-4">
                        <div v-if="!entry.layout" class="text-sm text-slate-400">
                            Aucun plan de bâtiment.
                        </div>

                        <div v-else>
                            <div class="overflow-auto">
                                <div class="grid" :style="entry.gridStyle">
                                    <template v-for="cell in entry.cells" :key="cell.key">
                                        <div
                                            v-if="cell.isEmpty"
                                            class="h-[50px] border-l-[2.5px] border-r-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]"
                                            :style="cell.spanStyle"
                                        ></div>
                                        <NuxtLink
                                            v-else
                                            class="flex items-center justify-center border border-slate-200 border-y-black hover:bg-primary-500/15 h-[50px]"
                                            :class="[
                                                !cell.caseId ? 'border-l-[2.5px] border-r-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]' : '',
                                                cell.hasGapLeft ? 'border-l-0' : '',
                                                cell.hasGapRight ? 'border-r-0' : '',
                                                cell.isOuterLeft ? '[border-left-style:dotted] border-l-[2.5px] border-l-slate-300' : '',
                                                cell.isOuterRight ? '[border-right-style:dotted] border-r-[2.5px] border-r-slate-300' : ''
                                            ]"
                                            :style="[cell.spanStyle, cell.caseStyle]"
                                            :to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
                                            :title="cell.caseStatusLabel ?? undefined"
                                        >
                                            {{ cell.display }}
                                        </NuxtLink>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-16 border border-slate-200">
                <div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide uppercase">
                    legendes
                </div>
                <div class="px-4 py-4">
                    <div v-if="statutLegend.length === 0" class="text-sm text-slate-400">
                        Aucun statut disponible.
                    </div>
                    <div v-else class="flex flex-wrap gap-3">
                        <div
                            v-for="statut in statutLegend"
                            :key="statut.id"
                            class="inline-flex items-center gap-2 rounded border border-slate-200 bg-white px-3 py-2"
                        >
                            <span
                                class="h-4 w-4 rounded border border-slate-300"
                                :style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
                            ></span>
                            <span class="text-sm uppercase text-slate-700">
                                {{ statut.label || "Sans libellé" }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { BuildingData } from "~/services/dto/building-data"
import type { BuildingLayoutData } from "~/services/dto/building-layout-data"
import type { BuildingCasePositionData } from "~/services/dto/building-case-position-data"
import type { BuildingCaseStatusData } from "~/services/dto/building-case-status-data"
import { getBuildingList } from "~/services/building"
import { getStatutList } from "~/services/statut"

definePageMeta({ layout: "default" })

const router = useRouter()
const buildingList = ref<BuildingData[]>([])
const statutLegend = ref<BuildingCaseStatusData[]>([])
const buildingLayouts = computed(() => {
    return buildingList.value.map((building) => {
        const layout = building.layouts?.[0] ?? null
        const view = layout ? buildLayoutView(layout) : null
        return {
            building,
            layout,
            cells: view?.cells ?? [],
            columnsTemplate: view?.columnsTemplate,
            gridStyle: view?.gridStyle ?? {}
        }
    })
})

type LayoutCell = {
    key: string
    x: number
    y: number
    w: number
    h: number
    isEmpty: boolean
    caseNumber: number | null
    caseId: number | null
    display: string
    rawId?: number | string
    hasGapLeft: boolean
    hasGapRight: boolean
    isOuterLeft: boolean
    isOuterRight: boolean
    caseStatusLabel: string | null
    caseStyle?: Record<string, string>
    spanStyle: Record<string, string>
}
const normalizeCaseStatusColor = (value: string | null | undefined): string | null => {
    const color = (value ?? "").trim()
    return color.length > 0 ? color : null
}
const buildLayoutView = (
    layout: BuildingLayoutData
): { cells: LayoutCell[]; columnsTemplate: string; gridStyle: Record<string, string> } | null => {
    const totalRows = layout.rows ?? 0
    const totalCols = layout.columns ?? 0
    if (totalRows <= 0 || totalCols <= 0) return null
    const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]

    // éviter des doublons/chevauchements dans la grille pour les spans.
    const covered = Array.from({ length: totalRows }, () => Array.from({ length: totalCols }, () => false))

    // map positions by (x,y)
    const map = new Map<string, BuildingCasePositionData>()
    const occupiedColumns = new Set<number>()

    for (const p of positions) {
        const rawX = p.x ?? 1
        const rawY = p.y ?? 1
        const key = `${rawX}-${rawY}`
        if (!map.has(key)) map.set(key, p)
        occupiedColumns.add(rawX)
    }
    const cells: LayoutCell[] = []
    const gapColumns: number[] = []
    for (let x = 1; x <= totalCols; x++) {
        if (!occupiedColumns.has(x)) gapColumns.push(x)
    }
    const gapColumnsSet = new Set(gapColumns)

    for (let y = 1; y <= totalRows; y++) {
        for (let x = 1; x <= totalCols; x++) {
            if (covered[y - 1][x - 1]) continue
            const p = map.get(`${x}-${y}`)
            if (!p) continue
            const w = p.w ?? 1
            const h = p.h ?? 1
            for (let dy = 0; dy < h; dy++) {
                for (let dx = 0; dx < w; dx++) {
                    const ty = y - 1 + dy
                    const tx = x - 1 + dx
                    if (ty < totalRows && tx < totalCols) covered[ty][tx] = true
                }
            }
            const caseNumber = (p.buildingCase?.caseNumber ?? null) as number | null
            const caseId = (p.buildingCase?.id ?? null) as number | null
            const statusLabel = p.buildingCase?.statut?.label ?? null
            const statusColor = normalizeCaseStatusColor(p.buildingCase?.statut?.couleur)
            const caseStatusLabel = statusLabel
            const caseStyle = statusColor
                ? { backgroundColor: statusColor }
                : undefined
            const spanStyle = {
                gridColumn: `${x} / span ${w}`,
                gridRow: `${y} / span ${h}`
            }
            const hasGapLeft = gapColumnsSet.has(x - 1)
            const hasGapRight = gapColumnsSet.has(x + w)
            const isOuterLeft = x === 1
            const isOuterRight = x + w - 1 === totalCols
            cells.push({
                key: `case-${layout.id}-${p.id}`,
                x,
                y,
                w,
                h,
                isEmpty: false,
                caseNumber,
                caseId,
                display: caseNumber !== null ? String(caseNumber) : "Case",
                rawId: p.id,
                hasGapLeft,
                hasGapRight,
                isOuterLeft,
                isOuterRight,
                caseStatusLabel,
                caseStyle,
                spanStyle
            })
        }

        for (const gapX of gapColumns) {
            const spanStyle = {
                gridColumn: `${gapX} / span 1`,
                gridRow: `${y} / span 1`
            }
            cells.push({
                key: `gap-${layout.id}-${y}-${gapX}`,
                x: gapX,
                y,
                w: 1,
                h: 1,
                isEmpty: true,
                caseNumber: null,
                caseId: null,
                display: "",
                rawId: undefined,
                hasGapLeft: false,
                hasGapRight: false,
                isOuterLeft: gapX === 1,
                isOuterRight: gapX === totalCols,
                caseStatusLabel: null,
                caseStyle: undefined,
                spanStyle
            })
        }
    }
    const columnsTemplate = Array.from({ length: totalCols }, (_, idx) =>
        gapColumnsSet.has(idx + 1) ? "24px" : "minmax(0, 1fr)"
    ).join(" ")
    const cols = Math.max(0, layout.columns ?? 0)
    const gridStyle = {
        gridTemplateColumns: columnsTemplate ?? `repeat(${cols}, minmax(0, 1fr))`,
        gridAutoRows: "1fr",
        rowGap: "18px",
        columnGap: "0px",
        width: "100%"
    }

    return { cells, columnsTemplate, gridStyle }
}

onMounted(async () => {
    const buildingsPromise = getBuildingList()
    const statutsPromise = getStatutList()
    const buildings = await buildingsPromise
    const statuts = await statutsPromise
    buildingList.value = buildings
    statutLegend.value = [...statuts].sort((a, b) =>
        (a.label ?? "").localeCompare(b.label ?? "", "fr", { sensitivity: "base" })
    )
})
</script>
