@extends('layouts.dashboard.inface', ['section' => 'developments'])

@section('extra-styles')
    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            font-size: 20px;
        }

        .icon-filled {
            font-variation-settings: 'FILL' 1;
        }

        .wizard-step-active {
            @apply border-primary text-primary;
        }

        .wizard-step-complete {
            @apply border-primary bg-primary text-white;
        }

        .wizard-step-inactive {
            @apply border-gray-300 text-gray-400;
        }
    </style>
@endsection

@section('content')
    <section class="overflow-y-auto"
        x-data="{
            step: {{ max(1, min(6, (int) request()->query('step', 1))) }},
            totalSteps: 6,
            setStep(value) {
                const nextStep = Number(value) || 1;
                this.step = Math.min(this.totalSteps, Math.max(1, nextStep));
            },
            next() {
                this.setStep(this.step + 1);
            },
            prev() {
                this.setStep(this.step - 1);
            },
        }">
        @if ($stageContext ?? null)
            <div class="border-b border-primary/20 bg-primary/5 px-6 py-4">
                <div class="mx-auto flex max-w-6xl flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <p class="text-xs font-black uppercase tracking-wide text-primary">Configuración independiente de etapa</p>
                        <p class="mt-1 font-black text-slate-900 dark:text-white">{{ $stageContext['parent_name'] }} / {{ $stageContext['name'] }} ({{ $stageContext['code'] }})</p>
                    </div>
                    <a href="{{ route('realEstate.developmentStages.index', ['development' => $stageContext['parent_id']]) }}" class="text-sm font-bold text-primary hover:underline">Volver a etapas</a>
                </div>
            </div>
        @endif
        @include('realEstates.fraccionamientos.create.tabs_wizard', [
            'steps' => [
                ['title' => 'Datos Generales'],
                ['title' => 'Configuración'],
                ['title' => 'Lotes'],
                ['title' => 'Publicación'],
                ['title' => 'Preguntas'],
                ['title' => 'Resumen'],
            ],
        ])

        <livewire:real-estate.developments.create.development-create
            :development-id="$developmentId ?? null"></livewire:real-estate.developments.create.development-create>
    </section>
@endsection

@section('extra-scripts')
    <script>
        (() => {
            const DEFAULT_CENTER = {
                lat: 19.4326,
                lng: -99.1332,
            };
            const registry = new WeakMap();
            let mapsReady = typeof window.google !== 'undefined' && typeof window.google.maps !== 'undefined';
            const pendingRenders = [];

            function normalizeConfig(config = {}) {
                const lat = Number(config.lat);
                const lng = Number(config.lng);

                return {
                    geojsonUrl: config.geojsonUrl || null,
                    lat: Number.isFinite(lat) ? lat : DEFAULT_CENTER.lat,
                    lng: Number.isFinite(lng) ? lng : DEFAULT_CENTER.lng,
                };
            }

            function readFeatureProperty(feature, keys) {
                for (const key of keys) {
                    const value = feature.getProperty(key);
                    if (value !== undefined && value !== null && value !== '') {
                        return value;
                    }
                }

                return '';
            }

            function colorByStatus(status) {
                const normalizedStatus = String(status || '').toLowerCase().trim();

                if (normalizedStatus === 'vendido' || normalizedStatus === 'sold') {
                    return '#ef4444';
                }

                if (normalizedStatus === 'apartado' || normalizedStatus === 'reservado') {
                    return '#f59e0b';
                }

                return '#22c55e';
            }

            function createMap(element, config) {
                const map = new google.maps.Map(element, {
                    center: {
                        lat: config.lat,
                        lng: config.lng,
                    },
                    zoom: 17,
                    mapId: 'Mapa_Fraccionamiento',
                    mapTypeId: 'satellite',
                    streetViewControl: false,
                    mapTypeControl: false,
                    fullscreenControl: true,
                });

                const infoWindow = new google.maps.InfoWindow();

                map.data.setStyle((feature) => {
                    const status = readFeatureProperty(feature, ['estatus', 'status', 'estado', 'availability']);
                    const fillColor = colorByStatus(status);

                    return {
                        fillColor,
                        fillOpacity: 0.35,
                        strokeColor: fillColor,
                        strokeOpacity: 0.9,
                        strokeWeight: 2,
                        clickable: true,
                    };
                });

                map.data.addListener('click', (event) => {
                    const feature = event.feature;
                    const lot = readFeatureProperty(feature, ['lote', 'Lote', 'lot', 'numero_lote', 'id']);
                    const block = readFeatureProperty(feature, ['manzana', 'Manzana', 'block', 'mz', 'sector']);
                    const area = readFeatureProperty(feature, ['m2', 'M2', 'area', 'Area', 'superficie', 'Size']);
                    const status = readFeatureProperty(feature, ['estatus', 'status', 'estado', 'availability']) || 'disponible';
                    const price = readFeatureProperty(feature, ['precio', 'price', 'precio_m2']);

                    infoWindow.setContent(`
                        <div style="font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-width:220px">
                            <div style="font-weight:700;margin-bottom:6px">Lote ${lot || '-'} ${block ? `- Manzana ${block}` : ''}</div>
                            <div><b>Estatus:</b> ${status}</div>
                            ${area ? `<div><b>m²:</b> ${area}</div>` : ''}
                            ${price ? `<div><b>Precio:</b> $${price}</div>` : ''}
                        </div>
                    `);
                    infoWindow.setPosition(event.latLng);
                    infoWindow.open(map);
                });

                const state = {
                    map,
                    infoWindow,
                    marker: null,
                    lastGeojsonUrl: null,
                };

                registry.set(element, state);

                return state;
            }

            function ensureMarker(state, config) {
                const position = {
                    lat: config.lat,
                    lng: config.lng,
                };

                if (google.maps.marker?.AdvancedMarkerElement) {
                    if (!state.marker) {
                        state.marker = new google.maps.marker.AdvancedMarkerElement({
                            map: state.map,
                            position,
                        });

                        return;
                    }

                    state.marker.position = position;
                    state.marker.map = state.map;

                    return;
                }

                if (!state.marker) {
                    state.marker = new google.maps.Marker({
                        map: state.map,
                        position,
                    });

                    return;
                }

                state.marker.setPosition(position);
                state.marker.setMap(state.map);
            }

            function clearGeojsonLayer(map) {
                const features = [];

                map.data.forEach((feature) => features.push(feature));
                features.forEach((feature) => map.data.remove(feature));
            }

            async function renderMap(element, rawConfig = {}) {
                if (!element) {
                    return;
                }

                if (!mapsReady || typeof window.google === 'undefined' || typeof window.google.maps === 'undefined') {
                    pendingRenders.push(() => renderMap(element, rawConfig));

                    return;
                }

                if (!element.isConnected) {
                    return;
                }

                const config = normalizeConfig(rawConfig);
                const state = registry.get(element) ?? createMap(element, config);

                state.map.setCenter({
                    lat: config.lat,
                    lng: config.lng,
                });
                ensureMarker(state, config);
                clearGeojsonLayer(state.map);

                if (!config.geojsonUrl) {
                    state.lastGeojsonUrl = null;
                    state.map.setZoom(17);

                    return;
                }

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

                    if (!response.ok) {
                        throw new Error(await response.text());
                    }

                    const geojson = await response.json();

                    if (!element.isConnected) {
                        return;
                    }

                    state.map.data.addGeoJson(geojson);
                    state.lastGeojsonUrl = config.geojsonUrl;

                    const bounds = new google.maps.LatLngBounds();
                    let hasGeometry = false;

                    state.map.data.forEach((feature) => {
                        feature.getGeometry().forEachLatLng((latLng) => {
                            bounds.extend(latLng);
                            hasGeometry = true;
                        });
                    });

                    if (hasGeometry) {
                        state.map.fitBounds(bounds);
                    }
                } catch (error) {
                    console.error('No se pudo cargar GeoJSON', error);
                }
            }

            window.syncDevelopmentCreateGeojsonMap = (element, config) => {
                renderMap(element, config);
            };

            window.refreshDevelopmentCreateGeojsonMap = (element, config) => {
                renderMap(element, config);
            };

            window.zoomDevelopmentCreateGeojsonMap = (element, delta) => {
                const state = registry.get(element);

                if (!state) {
                    return;
                }

                const currentZoom = state.map.getZoom() ?? 17;
                state.map.setZoom(currentZoom + delta);
            };

            window.initDevelopmentCreateMapApi = () => {
                mapsReady = true;

                while (pendingRenders.length > 0) {
                    const nextRender = pendingRenders.shift();
                    nextRender?.();
                }
            };
        })();
    </script>
    <script async
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDhcYxl6BiYEjhsrhYgLH-UHftbUueEdcc&callback=initDevelopmentCreateMapApi&v=weekly&libraries=marker"
        defer></script>
@endsection