@extends('layouts.landingPage.template')

@php
    $map = $developmentMap['map'] ?? [];
    $stats = $developmentMap['stats'] ?? [];
    $breadcrumbs = $developmentMap['breadcrumbs'] ?? [];
@endphp

@section('title', 'Plano de ' . ($developmentMap['name'] ?? 'Desarrollo') . ' | ' . ($landing['brand']['full'] ??
    'Fraccionamientos Colima'))

@section('extra-styles')
    <style>
        .development-map-status {
            transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
        }

        .development-map-status [data-map-status-dot] {
            transition: background-color 180ms ease;
        }

        .development-map-status[data-tone='loading'] {
            background-color: rgba(255, 251, 235, 0.94);
            border-color: rgba(245, 158, 11, 0.28);
            color: #b45309;
        }

        .dark .development-map-status[data-tone='loading'] {
            background-color: rgba(120, 53, 15, 0.42);
            border-color: rgba(245, 158, 11, 0.24);
            color: #fde68a;
        }

        .development-map-status[data-tone='loading'] [data-map-status-dot] {
            background-color: #f59e0b;
        }

        .development-map-status[data-tone='ready'] {
            background-color: rgba(255, 255, 255, 0.94);
            border-color: rgba(148, 163, 184, 0.28);
            color: #334155;
        }

        .dark .development-map-status[data-tone='ready'] {
            background-color: rgba(15, 23, 42, 0.88);
            border-color: rgba(148, 163, 184, 0.18);
            color: #e2e8f0;
        }

        .development-map-status[data-tone='ready'] [data-map-status-dot] {
            background-color: #137fec;
        }

        .development-map-status[data-tone='error'] {
            background-color: rgba(254, 242, 242, 0.96);
            border-color: rgba(239, 68, 68, 0.28);
            color: #b91c1c;
        }

        .dark .development-map-status[data-tone='error'] {
            background-color: rgba(127, 29, 29, 0.42);
            border-color: rgba(239, 68, 68, 0.24);
            color: #fecaca;
        }

        .development-map-status[data-tone='error'] [data-map-status-dot] {
            background-color: #ef4444;
        }

        .lot-map-filter[data-active='true'] {
            border-color: #137fec;
            background-color: #137fec;
            color: #ffffff;
        }

        .lot-map-list-item[data-active='true'] {
            border-color: #137fec;
            box-shadow: 0 16px 32px rgba(19, 127, 236, 0.14);
        }

        #development-lot-map-frame:fullscreen {
            background: #0f172a;
            padding: 12px;
        }

        #development-lot-map-frame:fullscreen #development-lot-map {
            height: calc(100vh - 24px);
        }
    </style>
@endsection

@section('main-content')
    <section class="bg-slate-50 py-8 dark:bg-background-dark">
        <div class="mx-auto flex max-w-7xl flex-col gap-7 px-4 sm:px-6 lg:px-8">
            <nav class="flex flex-wrap items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
                @foreach ($breadcrumbs as $breadcrumb)
                    @if (!$loop->first)
                        <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                    @endif
                    <a class="font-semibold transition-colors hover:text-primary" href="{{ $breadcrumb['url'] }}">
                        {{ $breadcrumb['label'] }}
                    </a>
                @endforeach
            </nav>

            <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-end">
                <div>
                    <div class="mb-4 flex flex-wrap items-center gap-3">
                        <span
                            class="{{ $developmentMap['status_badge_class'] }} inline-flex items-center rounded-full px-3 py-1 text-xs font-bold uppercase tracking-[0.2em]">
                            {{ $developmentMap['status_label'] }}
                        </span>
                        <span
                            class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-bold uppercase tracking-[0.2em] text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
                            <span class="material-symbols-outlined text-[16px] text-primary">location_on</span>
                            {{ $developmentMap['location_label'] }}
                        </span>
                    </div>
                    <h1 class="text-3xl font-black tracking-tight text-slate-950 dark:text-white md:text-5xl">
                        Plano interactivo: {{ $developmentMap['name'] }}
                    </h1>
                    <p class="mt-4 max-w-3xl text-base leading-7 text-slate-600 dark:text-slate-300">
                        {{ $developmentMap['description'] }}
                    </p>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row lg:flex-col">
                    <a class="inline-flex h-12 items-center justify-center gap-2 rounded-lg bg-primary px-5 text-sm font-bold text-white shadow-lg shadow-primary/20 transition-colors hover:bg-primary-dark"
                        href="{{ $developmentMap['contact_url'] }}" rel="noreferrer" target="_blank">
                        <span class="material-symbols-outlined text-[18px]">chat</span>
                        WhatsApp
                    </a>
                    <a class="inline-flex h-12 items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-5 text-sm font-bold text-slate-700 transition-colors hover:border-primary hover:text-primary dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
                        href="{{ $developmentMap['properties_url'] }}">
                        <span class="material-symbols-outlined text-[18px]">view_list</span>
                        Ver lotes
                    </a>
                </div>
            </div>

            <div class="grid gap-3 sm:grid-cols-3">
                <div class="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
                    <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-400">Total</p>
                    <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">
                        {{ number_format($stats['total_lots'] ?? 0) }}</p>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">lotes publicados</p>
                </div>
                <div class="rounded-lg border border-emerald-200 bg-white p-5 dark:border-emerald-900/60 dark:bg-slate-900">
                    <p class="text-xs font-bold uppercase tracking-[0.2em] text-emerald-600 dark:text-emerald-400">
                        Disponibles</p>
                    <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">
                        {{ number_format($stats['available_lots'] ?? 0) }}</p>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                        {{ $stats['available_percent'] ?? 0 }}% del inventario</p>
                </div>
                <div class="rounded-lg border border-red-200 bg-white p-5 dark:border-red-900/60 dark:bg-slate-900">
                    <p class="text-xs font-bold uppercase tracking-[0.2em] text-red-600 dark:text-red-400">Bloqueados</p>
                    <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">
                        {{ number_format($stats['blocked_lots'] ?? 0) }}</p>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                        {{ $stats['blocked_percent'] ?? 0 }}% no disponible</p>
                </div>
            </div>

            <div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
                <div
                    class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <div class="relative" id="development-lot-map-frame">
                        <div class="h-[68vh] min-h-[520px] w-full bg-slate-200 dark:bg-slate-800" id="development-lot-map">
                        </div>

                        <div class="absolute left-4 top-4">
                            <div id="development-lot-map-status"
                                class="development-map-status inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold shadow-sm backdrop-blur"
                                data-tone="loading">
                                <span data-map-status-dot class="h-2.5 w-2.5 rounded-full"></span>
                                <span data-map-status-label>Cargando GeoJSON...</span>
                            </div>
                        </div>

                        <div class="absolute right-4 top-4 flex flex-col items-end gap-2">
                            <button id="development-lot-map-fullscreen" type="button"
                                class="inline-flex items-center gap-2 rounded-full bg-white/90 px-4 py-2 text-xs font-semibold text-slate-700 shadow-sm transition-colors hover:bg-white dark:bg-slate-900/90 dark:text-slate-200 dark:hover:bg-slate-900">
                                <span data-fullscreen-icon
                                    class="material-symbols-outlined text-[16px] text-primary">open_in_full</span>
                                <span data-fullscreen-label>Expandir plano</span>
                            </button>
                        </div>

                        <div class="absolute bottom-4 left-4 right-4 flex flex-wrap gap-2">
                            @foreach ($map['legend'] ?? [] as $legendItem)
                                <span
                                    class="inline-flex items-center gap-2 rounded-full bg-white/92 px-3 py-2 text-xs font-bold text-slate-700 shadow-sm backdrop-blur dark:bg-slate-950/90 dark:text-slate-200">
                                    <span class="h-2.5 w-2.5 rounded-full"
                                        style="background-color: {{ $legendItem['color'] }}"></span>
                                    {{ $legendItem['label'] }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>

                <aside class="flex flex-col gap-4">
                    <div class="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
                        <div class="grid grid-cols-3 gap-2">
                            <button
                                class="lot-map-filter rounded-lg border border-slate-200 px-3 py-2 text-xs font-bold text-slate-700 transition-colors dark:border-slate-700 dark:text-slate-200"
                                data-active="true" data-lot-filter="all" type="button">Todos</button>
                            <button
                                class="lot-map-filter rounded-lg border border-slate-200 px-3 py-2 text-xs font-bold text-slate-700 transition-colors dark:border-slate-700 dark:text-slate-200"
                                data-active="false" data-lot-filter="available" type="button">Disponibles</button>
                            <button
                                class="lot-map-filter rounded-lg border border-slate-200 px-3 py-2 text-xs font-bold text-slate-700 transition-colors dark:border-slate-700 dark:text-slate-200"
                                data-active="false" data-lot-filter="blocked" type="button">Bloqueados</button>
                        </div>
                        <label
                            class="mt-3 flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 dark:border-slate-700 dark:bg-slate-950">
                            <span class="material-symbols-outlined text-[18px] text-slate-400">search</span>
                            <input id="lot-map-search"
                                class="w-full border-0 bg-transparent p-0 text-sm text-slate-700 placeholder:text-slate-400 focus:ring-0 dark:text-slate-100"
                                placeholder="Buscar lote o manzana" type="search">
                        </label>
                    </div>

                    <div class="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
                        <p class="text-xs font-bold uppercase tracking-[0.2em] text-slate-400">Detalle del lote</p>
                        <div class="mt-4" id="lot-map-selected">
                            <p class="text-lg font-black text-slate-950 dark:text-white" data-selected-title>Sin lote
                                seleccionado</p>
                            <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" data-selected-status>
                                Sin seleccion activa.
                            </p>
                            <div class="mt-4 hidden grid-cols-2 gap-3" data-selected-metrics>
                                <div class="rounded-lg bg-slate-50 p-3 dark:bg-slate-800">
                                    <p class="text-xs font-bold uppercase tracking-[0.16em] text-slate-400">Superficie</p>
                                    <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white" data-selected-area>
                                    </p>
                                </div>
                                <div class="rounded-lg bg-slate-50 p-3 dark:bg-slate-800">
                                    <p class="text-xs font-bold uppercase tracking-[0.16em] text-slate-400">Precio</p>
                                    <p class="mt-1 text-sm font-bold text-slate-900 dark:text-white" data-selected-price>
                                    </p>
                                </div>
                            </div>
                            <div class="mt-4 flex flex-col gap-2" data-selected-actions></div>
                        </div>
                    </div>

                    <div
                        class="min-h-0 rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 lg:max-h-[520px]">
                        <div class="mb-3 flex items-center justify-between gap-3">
                            <p class="text-sm font-black text-slate-950 dark:text-white">Inventario</p>
                            <span
                                class="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500 dark:bg-slate-800 dark:text-slate-300"
                                id="lot-map-result-count">0</span>
                        </div>
                        <div class="max-h-[440px] space-y-2 overflow-y-auto pr-1" id="lot-map-list"></div>
                        <p class="hidden rounded-lg border border-dashed border-slate-300 p-4 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400"
                            id="lot-map-empty">Sin lotes con este filtro.</p>
                    </div>
                </aside>
            </div>
        </div>
    </section>
@endsection

@section('extra-scripts')
    <script>
        (() => {
            const mapConfig = {{ \Illuminate\Support\Js::from($map) }};
            const lotSnapshots = Array.isArray(mapConfig.lot_snapshots) ? mapConfig.lot_snapshots : [];
            const state = {
                filter: 'all',
                search: '',
                activeLotId: null,
                map: null,
                infoWindow: null,
                fullBounds: null,
                featureIndexMap: new Map(),
                lotFeatureMap: new Map(),
                featureLotMap: new Map(),
            };

            const elements = {
                container: document.getElementById('development-lot-map'),
                frame: document.getElementById('development-lot-map-frame'),
                status: document.getElementById('development-lot-map-status'),
                statusLabel: document.querySelector('#development-lot-map-status [data-map-status-label]'),
                list: document.getElementById('lot-map-list'),
                empty: document.getElementById('lot-map-empty'),
                count: document.getElementById('lot-map-result-count'),
                search: document.getElementById('lot-map-search'),
                fullscreen: document.getElementById('development-lot-map-fullscreen'),
                selectedTitle: document.querySelector('[data-selected-title]'),
                selectedStatus: document.querySelector('[data-selected-status]'),
                selectedMetrics: document.querySelector('[data-selected-metrics]'),
                selectedArea: document.querySelector('[data-selected-area]'),
                selectedPrice: document.querySelector('[data-selected-price]'),
                selectedActions: document.querySelector('[data-selected-actions]'),
                filters: Array.from(document.querySelectorAll('[data-lot-filter]')),
            };

            const statusStyles = {
                available: {
                    fill: '#16a34a',
                    stroke: '#047857',
                },
                blocked: {
                    fill: '#ef4444',
                    stroke: '#991b1b',
                },
                unmatched: {
                    fill: '#64748b',
                    stroke: '#334155',
                },
            };

            const normalizeLookupValue = (value) => {
                const normalized = String(value ?? '').trim().replace(/\s+/g, '').toLowerCase();

                if (/^\d+$/.test(normalized)) {
                    return String(Number(normalized));
                }

                return normalized;
            };

            const escapeHtml = (value) => String(value ?? '')
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');

            const setStatus = (label, tone = 'ready') => {
                if (elements.status) {
                    elements.status.dataset.tone = tone;
                }

                if (elements.statusLabel) {
                    elements.statusLabel.textContent = label;
                }
            };

            const toLatLng = (point) => {
                if (!point || point.lat === undefined || point.lng === undefined) {
                    return null;
                }

                const lat = Number(point.lat);
                const lng = Number(point.lng);

                return Number.isFinite(lat) && Number.isFinite(lng) ? {
                    lat,
                    lng,
                } : null;
            };

            const featureDisplayValue = (feature, keys) => {
                for (const key of keys) {
                    const value = feature.getProperty(key);

                    if (value !== null && value !== undefined && String(value).trim() !== '') {
                        return String(value).trim();
                    }
                }

                return '';
            };

            const featureBounds = (feature) => {
                const bounds = new google.maps.LatLngBounds();
                feature.getGeometry()?.forEachLatLng((latLng) => bounds.extend(latLng));

                return bounds;
            };

            const lotSearchHaystack = (lot) => [
                lot.title,
                lot.status_label,
                lot.lot_number,
                lot.block_number,
                lot.type_label,
            ].map((value) => normalizeLookupValue(value)).join(' ');

            const lotMatchesCurrentFilters = (lot) => {
                if (state.filter !== 'all' && lot.availability_key !== state.filter) {
                    return false;
                }

                if (state.search !== '' && !lotSearchHaystack(lot).includes(state.search)) {
                    return false;
                }

                return true;
            };

            const filteredLots = () => lotSnapshots.filter(lotMatchesCurrentFilters);

            const findLotSnapshot = (feature) => {
                const enrichedLotId = Number(feature.getProperty('lot_map_lot_id'));

                if (Number.isInteger(enrichedLotId) && enrichedLotId > 0) {
                    const enrichedLot = lotSnapshots.find((candidateLot) => Number(candidateLot.id) ===
                        enrichedLotId);

                    if (enrichedLot) {
                        return enrichedLot;
                    }
                }

                const featureIndex = state.featureIndexMap.get(feature);
                const featureLot = normalizeLookupValue(featureDisplayValue(feature, ['lote', 'lot',
                    'numero_lote'
                ]));
                const featureBlock = normalizeLookupValue(featureDisplayValue(feature, ['manzana', 'block',
                    'numero_manzana'
                ]));
                const featureIdCandidates = [
                    feature.getId(),
                    feature.getProperty('id'),
                    feature.getProperty('feature_id'),
                    feature.getProperty('geojson_feature_id'),
                ].map((value) => normalizeLookupValue(value)).filter((value) => value !== '');

                return lotSnapshots.find((candidateLot) => {
                    const candidateFeatureId = normalizeLookupValue(candidateLot.geojson_feature_id);

                    if (candidateFeatureId !== '' && featureIdCandidates.includes(candidateFeatureId)) {
                        return true;
                    }

                    if (Number.isInteger(candidateLot.geojson_index) && Number.isInteger(featureIndex) &&
                        candidateLot.geojson_index === featureIndex) {
                        return true;
                    }

                    const candidateLotNumber = normalizeLookupValue(candidateLot.lot_number);
                    const candidateBlockNumber = normalizeLookupValue(candidateLot.block_number);

                    if (candidateLotNumber === '' || candidateLotNumber !== featureLot) {
                        return false;
                    }

                    if (candidateBlockNumber === '' || featureBlock === '') {
                        return true;
                    }

                    return candidateBlockNumber === featureBlock;
                }) ?? null;
            };

            const buildInfoHtml = (lot, feature = null) => {
                const title = lot?.title || featureDisplayValue(feature, ['lot_map_title']) ||
                    `Lote ${escapeHtml(featureDisplayValue(feature, ['lote', 'lot', 'numero_lote']))}`;
                const status = lot?.status_label || featureDisplayValue(feature, ['lot_map_status_label', 'estatus',
                        'status', 'estado'
                    ]) ||
                    'Sin estatus';
                const area = lot?.area_label || featureDisplayValue(feature, ['lot_map_area_label', 'm2', 'area',
                    'superficie'
                ]);
                const price = lot?.price_formatted || featureDisplayValue(feature, ['lot_map_price_formatted',
                    'precio',
                    'price'
                ]);
                const detailUrl = lot?.detail_url || featureDisplayValue(feature, ['lot_map_detail_url']);
                const action = detailUrl ?
                    `<a href="${escapeHtml(detailUrl)}" style="margin-top:10px;display:inline-flex;align-items:center;border-radius:8px;background:#137fec;padding:8px 12px;font-size:12px;font-weight:700;color:#ffffff;text-decoration:none">Ver detalle</a>` :
                    '';

                return `
                    <div style="font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-width:220px">
                        <div style="font-weight:800;margin-bottom:6px">${escapeHtml(title)}</div>
                        <div><b>Estatus:</b> ${escapeHtml(status)}</div>
                        ${area ? `<div><b>Superficie:</b> ${escapeHtml(area)}</div>` : ''}
                        ${price ? `<div><b>Precio:</b> ${escapeHtml(price)}</div>` : ''}
                        ${action}
                    </div>
                `;
            };

            const applyFeatureStyles = () => {
                if (!state.map) {
                    return;
                }

                state.map.data.setStyle((feature) => {
                    const lot = state.featureLotMap.get(feature) ?? findLotSnapshot(feature);
                    const featureAvailability = normalizeLookupValue(feature.getProperty(
                        'lot_map_availability_key'));
                    const style = statusStyles[lot?.availability_key] ?? statusStyles[
                        featureAvailability] ??
                        statusStyles.unmatched;
                    const isActive = lot && Number(lot.id) === Number(state.activeLotId);
                    const isVisible = lot ? lotMatchesCurrentFilters(lot) : state.filter === 'all' && state
                        .search === '';

                    return {
                        fillColor: style.fill,
                        fillOpacity: isActive ? 0.58 : 0.38,
                        strokeColor: isActive ? '#0f172a' : style.stroke,
                        strokeOpacity: 0.95,
                        strokeWeight: isActive ? 3.5 : 2,
                        clickable: true,
                        visible: isVisible,
                    };
                });
            };

            const focusFeature = (feature) => {
                if (!state.map || !feature) {
                    return;
                }

                const bounds = featureBounds(feature);

                if (!bounds.isEmpty()) {
                    state.map.fitBounds(bounds, 96);
                }
            };

            const openLotInfo = (lot, feature = null) => {
                if (!state.infoWindow || !state.map) {
                    return;
                }

                const targetFeature = feature ?? state.lotFeatureMap.get(Number(lot.id));
                const bounds = targetFeature ? featureBounds(targetFeature) : null;
                const position = bounds && !bounds.isEmpty() ? bounds.getCenter() : toLatLng(mapConfig
                    .marker_position);

                state.infoWindow.setContent(buildInfoHtml(lot, targetFeature));

                if (position) {
                    state.infoWindow.setPosition(position);
                    state.infoWindow.open(state.map);
                }
            };

            const renderSelectedLot = (lot) => {
                if (!elements.selectedTitle || !elements.selectedStatus) {
                    return;
                }

                if (!lot) {
                    elements.selectedTitle.textContent = 'Sin lote seleccionado';
                    elements.selectedStatus.textContent = 'Sin seleccion activa.';
                    elements.selectedMetrics?.classList.add('hidden');

                    if (elements.selectedActions) {
                        elements.selectedActions.innerHTML = '';
                    }

                    return;
                }

                elements.selectedTitle.textContent = lot.title;
                elements.selectedStatus.textContent = lot.status_label;
                elements.selectedMetrics?.classList.remove('hidden');
                elements.selectedMetrics?.classList.add('grid');

                if (elements.selectedArea) {
                    elements.selectedArea.textContent = lot.area_label || 'Por confirmar';
                }

                if (elements.selectedPrice) {
                    elements.selectedPrice.textContent = lot.price_formatted || 'Precio a consultar';
                }

                if (!elements.selectedActions) {
                    return;
                }

                const actions = [];

                if (lot.detail_url) {
                    actions.push(
                        `<a class="inline-flex h-10 items-center justify-center rounded-lg bg-primary px-4 text-sm font-bold text-white transition-colors hover:bg-primary-dark" href="${escapeHtml(lot.detail_url)}">Ver detalle</a>`
                    );
                }

                if (lot.contact_url) {
                    actions.push(
                        `<a class="inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 px-4 text-sm font-bold text-slate-700 transition-colors hover:border-primary hover:text-primary dark:border-slate-700 dark:text-slate-200" href="${escapeHtml(lot.contact_url)}" rel="noreferrer" target="_blank">WhatsApp</a>`
                    );
                }

                elements.selectedActions.innerHTML = actions.join('');
            };

            const setActiveLot = (lot, focus = true) => {
                state.activeLotId = lot ? Number(lot.id) : null;
                renderSelectedLot(lot);
                renderList();
                applyFeatureStyles();

                if (!lot) {
                    return;
                }

                const feature = state.lotFeatureMap.get(Number(lot.id));

                if (focus) {
                    focusFeature(feature);
                }

                openLotInfo(lot, feature);
            };

            const renderList = () => {
                const lots = filteredLots();

                if (elements.count) {
                    elements.count.textContent = `${lots.length}`;
                }

                if (elements.empty) {
                    elements.empty.classList.toggle('hidden', lots.length > 0);
                }

                if (!elements.list) {
                    return;
                }

                elements.list.innerHTML = lots.map((lot) => {
                    const isActive = Number(lot.id) === Number(state.activeLotId);
                    const toneClass = lot.availability_key === 'available' ?
                        'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300' :
                        'bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300';

                    return `
                        <button class="lot-map-list-item w-full rounded-lg border border-slate-200 bg-white p-3 text-left transition-all hover:border-primary dark:border-slate-700 dark:bg-slate-950" data-active="${isActive ? 'true' : 'false'}" data-lot-id="${escapeHtml(lot.id)}" type="button">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <p class="text-sm font-black text-slate-950 dark:text-white">${escapeHtml(lot.title)}</p>
                                    <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Manzana ${escapeHtml(lot.block_number || 'S/N')}</p>
                                </div>
                                <span class="rounded-full px-2.5 py-1 text-[11px] font-bold ${toneClass}">${escapeHtml(lot.status_label)}</span>
                            </div>
                            <div class="mt-3 flex items-center justify-between gap-3 text-xs text-slate-500 dark:text-slate-400">
                                <span>${escapeHtml(lot.area_label || 'Superficie por confirmar')}</span>
                                <span class="font-bold text-slate-700 dark:text-slate-200">${escapeHtml(lot.price_formatted || 'Precio a consultar')}</span>
                            </div>
                        </button>
                    `;
                }).join('');

                elements.list.querySelectorAll('[data-lot-id]').forEach((button) => {
                    button.addEventListener('click', () => {
                        const lot = lotSnapshots.find((candidate) => Number(candidate.id) ===
                            Number(button.dataset
                                .lotId));
                        setActiveLot(lot ?? null);
                    });
                });
            };

            const focusAll = () => {
                if (!state.map) {
                    return;
                }

                if (state.fullBounds && !state.fullBounds.isEmpty()) {
                    state.map.fitBounds(state.fullBounds, 80);
                    return;
                }

                const center = toLatLng(mapConfig.development_center) ?? toLatLng(mapConfig.marker_position);

                if (center) {
                    state.map.setCenter(center);
                    state.map.setZoom(17);
                }
            };

            const syncFullscreenButton = () => {
                if (!elements.fullscreen || !elements.frame) {
                    return;
                }

                const isFullscreen = document.fullscreenElement === elements.frame;
                const icon = elements.fullscreen.querySelector('[data-fullscreen-icon]');
                const label = elements.fullscreen.querySelector('[data-fullscreen-label]');

                elements.fullscreen.setAttribute('aria-pressed', isFullscreen ? 'true' : 'false');

                if (icon) {
                    icon.textContent = isFullscreen ? 'close_fullscreen' : 'open_in_full';
                }

                if (label) {
                    label.textContent = isFullscreen ? 'Cerrar plano' : 'Expandir plano';
                }
            };

            const initializeControls = () => {
                elements.filters.forEach((button) => {
                    button.addEventListener('click', () => {
                        state.filter = button.dataset.lotFilter || 'all';
                        elements.filters.forEach((candidate) => {
                            candidate.dataset.active = candidate === button ? 'true' :
                                'false';
                        });
                        renderList();
                        applyFeatureStyles();
                    });
                });

                elements.search?.addEventListener('input', () => {
                    state.search = normalizeLookupValue(elements.search.value);
                    renderList();
                    applyFeatureStyles();
                });

                elements.fullscreen?.addEventListener('click', async () => {
                    if (!elements.frame) {
                        return;
                    }

                    try {
                        if (document.fullscreenElement === elements.frame) {
                            await document.exitFullscreen();
                        } else {
                            await elements.frame.requestFullscreen();
                        }
                    } catch (error) {
                        console.error('No se pudo cambiar a pantalla completa.', error);
                    }
                });

                document.addEventListener('fullscreenchange', () => {
                    syncFullscreenButton();

                    if (state.map) {
                        window.setTimeout(() => {
                            google.maps.event.trigger(state.map, 'resize');
                            focusAll();
                        }, 180);
                    }
                });
            };

            window.initDevelopmentLotMap = async function() {
                if (!elements.container || typeof google === 'undefined' || typeof google.maps ===
                    'undefined') {
                    setStatus('Mapa no disponible en este momento.', 'error');
                    return;
                }

                const center = toLatLng(mapConfig.development_center) ?? {
                    lat: 19.2433,
                    lng: -103.724,
                };

                state.map = new google.maps.Map(elements.container, {
                    center,
                    zoom: 17,
                    mapId: 'Mapa_Fraccionamiento_Publico',
                    mapTypeId: 'satellite',
                    streetViewControl: false,
                    fullscreenControl: false,
                    mapTypeControl: false,
                });
                state.infoWindow = new google.maps.InfoWindow();
                state.fullBounds = new google.maps.LatLngBounds();

                setStatus('Cargando GeoJSON...', 'loading');

                try {
                    if (!mapConfig.geojson_url) {
                        setStatus('GeoJSON no configurado.', 'error');

                        return;
                    }

                    const response = await fetch(mapConfig.geojson_url, {
                        headers: {
                            Accept: 'application/geo+json',
                        },
                    });

                    if (!response.ok) {
                        throw new Error('GeoJSON no disponible');
                    }

                    const geojson = await response.json();
                    const features = state.map.data.addGeoJson(geojson);

                    features.forEach((feature, index) => {
                        state.featureIndexMap.set(feature, index);
                        const bounds = featureBounds(feature);

                        if (!bounds.isEmpty()) {
                            state.fullBounds.union(bounds);
                        }

                        const lot = findLotSnapshot(feature);

                        if (lot) {
                            state.lotFeatureMap.set(Number(lot.id), feature);
                            state.featureLotMap.set(feature, lot);
                        }
                    });

                    state.map.data.addListener('click', (event) => {
                        const lot = state.featureLotMap.get(event.feature) ?? findLotSnapshot(event
                            .feature);

                        if (lot) {
                            setActiveLot(lot, false);
                        } else {
                            state.infoWindow.setContent(buildInfoHtml(null, event.feature));
                            state.infoWindow.setPosition(event.latLng);
                            state.infoWindow.open(state.map);
                        }
                    });

                    applyFeatureStyles();
                    focusAll();
                    setStatus('GeoJSON cargado.', 'ready');
                } catch (error) {
                    console.error('No se pudo cargar el plano del desarrollo.', error);
                    focusAll();
                    setStatus('No se pudo cargar el GeoJSON.', 'error');
                }
            };

            initializeControls();
            renderList();
            syncFullscreenButton();
        })();
    </script>
    <script async
        src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key', '') }}&callback=initDevelopmentLotMap&v=weekly&libraries=marker"
        defer></script>
@endsection