@extends('admin.layout.master')

@section('title', __('routes.areas.index'))

@section('css')
    <x-vendor.leaflet-css />
    <style>
        #areas-map {
            width: 100%;
            height: 620px;
            border-radius: .5rem;
            z-index: 1;
        }

        .areas-list {
            max-height: 620px;
            overflow-y: auto;
        }

        .area-list-item {
            cursor: pointer;
            border-inline-start: 5px solid transparent;
            transition: background-color .15s ease;
        }

        .area-list-item:hover {
            background-color: rgba(0, 0, 0, .03);
        }

        .area-color-dot {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, .2);
            vertical-align: middle;
        }

        .area-popup-title {
            font-weight: 700;
            margin-bottom: 2px;
        }

        .area-popup-desc {
            color: #6c757d;
            margin-bottom: 8px;
        }
    </style>
@endsection

@section('content')
    <section id="areas-module">
        <div class="row match-height">
            <div class="col-lg-8 col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <h4 class="card-title mb-0">{{ __('admin.areas_map') }}</h4>
                            <span class="text-muted">{{ __('admin.areas_map_hint') }}</span>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-info mt-1" id="goto-current-location-btn">
                            <i class="feather icon-navigation"></i> {{ __('admin.go_to_current_location') }}
                        </button>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div id="shape-edit-bar"
                                class="alert alert-warning d-flex justify-content-between align-items-center d-none">
                                <span>{{ __('admin.reshape_hint') }}</span>
                                <span class="text-nowrap">
                                    <button type="button" class="btn btn-sm btn-success" id="shape-save-btn">
                                        {{ __('admin.save_shape') }}
                                    </button>
                                    <button type="button" class="btn btn-sm btn-secondary" id="shape-cancel-btn">
                                        {{ __('admin.cancel') }}
                                    </button>
                                </span>
                            </div>
                            <div id="areas-map"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('admin.areas') }}</h4>
                        <span class="badge badge-primary" id="areas-count">{{ $areas->count() }}</span>
                    </div>
                    <div class="card-content">
                        <div class="card-body p-0">
                            <ul class="list-group list-group-flush areas-list" id="areas-list">
                                <li class="list-group-item text-center text-muted py-3 d-none" id="areas-empty">
                                    {{ __('admin.no_areas_yet') }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Area details modal --}}
    <dialog class="modal fade" id="area-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="area-form">
                    <div class="modal-header">
                        <h5 class="modal-title" id="area-modal-title">{{ __('admin.add_area') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="area-id">
                        <input type="hidden" id="area-coordinates">

                        <div class="form-group">
                            <label for="area-name">{{ __('admin.area_name') }}</label>
                            <input type="text" class="form-control" id="area-name" maxlength="255" required>
                        </div>

                        <div class="form-group">
                            <label for="area-description">{{ __('admin.area_description') }}</label>
                            <textarea class="form-control" id="area-description" rows="3"></textarea>
                        </div>

                        <div class="form-group">
                            <label for="area-type">{{ __('admin.area_type') }}</label>
                            <select class="form-control" id="area-type" required>
                                @foreach (App\Enums\AreaType::toArray() as $type)
                                    <option value="{{ $type }}">{{ __('apis.area_type.' . $type) }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="area-color">{{ __('admin.area_color') }}</label>
                            <input type="color" class="form-control" id="area-color" value="#3388ff"
                                style="height: 42px; padding: 4px;">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
                            {{ __('admin.cancel') }}
                        </button>
                        <button type="submit" class="btn btn-primary" id="area-save-btn">
                            {{ __('admin.save') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </dialog>
@endsection

@section('js')
    <x-vendor.leaflet-js />

    <script>
        (function () {
            'use strict';

            const routes = {
                store: "{{ route('admin.areas.store') }}",
                update: "{{ url('admin/areas') }}",
                destroy: "{{ url('admin/areas') }}",
            };

            const perms = {
                store: @json(\App\Services\Admin\AdminPermissionService::can('admin.areas.store')),
                update: @json(\App\Services\Admin\AdminPermissionService::can('admin.areas.update')),
                destroy: @json(\App\Services\Admin\AdminPermissionService::can('admin.areas.delete')),
            };

            const trans = {
                add: @json(__('admin.add_area')),
                edit: @json(__('admin.edit_area')),
                confirmDelete: @json(__('admin.confirm_delete_area')),
                deleteBtn: @json(__('admin.delete')),
                editBtn: @json(__('admin.edit')),
                reshapeBtn: @json(__('admin.reshape_area')),
                genericError: @json(__('admin.something_went_wrong')),
                noAreas: @json(__('admin.no_areas_yet')),
                locationUnavailable: @json(__('admin.current_location_not_available')),
                areaTypes: @json(collect(App\Enums\AreaType::toArray())->mapWithKeys(fn ($type) => [$type => __('apis.area_type.' . $type)])->all()),
            };

            const defaultAreaType = @json(App\Enums\AreaType::PERMITTED);

            const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const initialAreas = @json($initialAreas);

            // layerId -> { data, layer }
            const areaLayers = {};

            const map = L.map('areas-map').setView([21.4225, 39.8262], 11);

            $('#goto-current-location-btn').on('click', function () {
                if (!navigator.geolocation) {
                    toast('error', trans.locationUnavailable);
                    return;
                }

                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        map.setView([position.coords.latitude, position.coords.longitude], 12);
                    },
                    function () {
                        toast('error', trans.locationUnavailable);
                    }
                );
            });

            L.tileLayer(globalThis.BEEB_OSM_TILE_URL, {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors',
            }).addTo(map);

            const drawnItems = new L.FeatureGroup();
            map.addLayer(drawnItems);

            if (perms.store) {
                const drawControl = new L.Control.Draw({
                    edit: {
                        featureGroup: drawnItems,
                        remove: false,
                    },
                    draw: {
                        polygon: {
                            allowIntersection: false,
                            showArea: true,
                            shapeOptions: { color: '#3388ff' },
                        },
                        polyline: false,
                        rectangle: false,
                        circle: false,
                        marker: false,
                        circlemarker: false,
                    },
                });
                map.addControl(drawControl);
            }

            // ---- helpers ---------------------------------------------------

            function latlngsToCoords(layer) {
                // first ring only (no holes)
                const latlngs = layer.getLatLngs()[0];
                return latlngs.map(p => [p.lat, p.lng]);
            }

            function areaTypeLabel(type) {
                return trans.areaTypes[type] || type;
            }

            function popupHtml(data) {
                const desc = data.description
                    ? `<div class="area-popup-desc">${escapeHtml(data.description)}</div>` : '';
                const type = data.type
                    ? `<div class="area-popup-desc">${escapeHtml(areaTypeLabel(data.type))}</div>` : '';
                const editBtns = perms.update
                    ? `<button class="btn btn-sm btn-primary js-edit-area" data-id="${data.id}">${trans.editBtn}</button>
                       <button class="btn btn-sm btn-outline-primary js-reshape-area" data-id="${data.id}">${trans.reshapeBtn}</button>`
                    : '';
                const deleteBtn = perms.destroy
                    ? `<button class="btn btn-sm btn-danger js-delete-area" data-id="${data.id}">${trans.deleteBtn}</button>`
                    : '';
                return `
                    <div class="area-popup" data-id="${data.id}">
                        <div class="area-popup-title">
                            <span class="area-color-dot" style="background:${data.color}"></span>
                            ${escapeHtml(data.name)}
                        </div>
                        ${type}
                        ${desc}
                        ${editBtns}
                        ${deleteBtn}
                    </div>`;
            }

            function escapeHtml(str) {
                return String(str ?? '').replace(/[&<>"']/g, s => ({
                    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
                }[s]));
            }

            function addAreaToMap(data) {
                const layer = L.polygon(data.coordinates, {
                    color: data.color,
                    fillColor: data.color,
                    fillOpacity: 0.25,
                    weight: 2,
                });
                const layerId = L.stamp(layer);
                layer.areaId = data.id;
                layer.bindPopup(popupHtml(data));
                drawnItems.addLayer(layer);
                areaLayers[layerId] = { data, layer };
                return layer;
            }

            function refreshList() {
                const $list = $('#areas-list');
                $list.find('.area-list-item').remove();

                const items = Object.values(areaLayers);
                $('#areas-count').text(items.length);
                $('#areas-empty').toggleClass('d-none', items.length > 0);

                items
                    .sort((a, b) => b.data.id - a.data.id)
                    .forEach(({ data }) => {
                        const $li = $(`
                            <li class="list-group-item area-list-item" data-id="${data.id}" style="border-inline-start-color:${data.color}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <span class="area-color-dot" style="background:${data.color}"></span>
                                        <strong>${escapeHtml(data.name)}</strong>
                                        <div class="text-muted small">${escapeHtml(areaTypeLabel(data.type || ''))}</div>
                                        <div class="text-muted small">${escapeHtml(data.description || '')}</div>
                                    </div>
                                    <div class="text-nowrap">
                                        ${perms.update ? `<button class="btn btn-sm btn-outline-primary js-edit-area" data-id="${data.id}">
                                            <i class="feather icon-edit-2"></i>
                                        </button>` : ''}
                                        ${perms.destroy ? `<button class="btn btn-sm btn-outline-danger js-delete-area" data-id="${data.id}">
                                            <i class="feather icon-trash-2"></i>
                                        </button>` : ''}
                                    </div>
                                </div>
                            </li>`);
                        $list.append($li);
                    });
            }

            function findLayerByAreaId(id) {
                const entry = Object.values(areaLayers).find(e => e.data.id == id);
                return entry ? entry.layer : null;
            }

            function focusArea(id) {
                const layer = findLayerByAreaId(id);
                if (layer) {
                    map.fitBounds(layer.getBounds(), { maxZoom: 14 });
                    layer.openPopup();
                }
            }

            function toast(type, message) {
                if (window.toastr) {
                    toastr[type](message);
                }
            }

            // ---- modal handling -------------------------------------------

            let pendingDrawnLayer = null; // layer waiting to be saved (new)

            function openModal(mode, data) {
                $('#area-modal-title').text(mode === 'edit' ? trans.edit : trans.add);
                $('#area-id').val(data.id || '');
                $('#area-coordinates').val(JSON.stringify(data.coordinates || []));
                $('#area-name').val(data.name || '');
                $('#area-description').val(data.description || '');
                $('#area-type').val(data.type || defaultAreaType);
                $('#area-color').val(data.color || '#3388ff');
                $('#area-modal').modal('show');
            }

            function closeModal() {
                $('#area-modal').modal('hide');
                // Safety net: fast AJAX + the Leaflet map regaining focus can
                // occasionally leave a stray backdrop behind, which looks like
                // the modal "not disappearing". Clean it up once no modal is open.
                setTimeout(function () {
                    if ($('.modal.show').length === 0) {
                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open').css('padding-right', '');
                    }
                }, 500);
            }

            // ---- draw events ----------------------------------------------

            map.on(L.Draw.Event.CREATED, function (e) {
                pendingDrawnLayer = e.layer;
                openModal('create', {
                    coordinates: latlngsToCoords(e.layer),
                    color: '#3388ff',
                });
            });

            map.on(L.Draw.Event.EDITED, function (e) {
                e.layers.eachLayer(function (layer) {
                    const entry = areaLayers[L.stamp(layer)];
                    if (!entry) return;
                    const coords = latlngsToCoords(layer);
                    saveArea('edit', {
                        id: entry.data.id,
                        name: entry.data.name,
                        description: entry.data.description,
                        type: entry.data.type,
                        color: entry.data.color,
                        coordinates: coords,
                    }, layer);
                });
            });

            // ---- form submit ----------------------------------------------

            $('#area-form').on('submit', function (e) {
                e.preventDefault();
                const id = $('#area-id').val();
                const payload = {
                    id: id || null,
                    name: $('#area-name').val().trim(),
                    description: $('#area-description').val().trim(),
                    type: $('#area-type').val(),
                    color: $('#area-color').val(),
                    coordinates: JSON.parse($('#area-coordinates').val() || '[]'),
                };

                if (!payload.name || payload.coordinates.length < 3) {
                    toast('error', trans.genericError);
                    return;
                }

                saveArea(id ? 'edit' : 'create', payload);
            });

            function saveArea(mode, payload, existingLayer) {
                const isEdit = mode === 'edit';
                const url = isEdit ? `${routes.update}/${payload.id}` : routes.store;

                $('#area-save-btn').prop('disabled', true);

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: {
                        _token: csrf,
                        _method: isEdit ? 'PUT' : 'POST',
                        name: payload.name,
                        description: payload.description,
                        type: payload.type,
                        color: payload.color,
                        coordinates: payload.coordinates,
                    },
                    success: function (res) {
                        // Close the modal, then reload the page so the freshly
                        // saved area is rendered from the server on next load.
                        closeModal();
                        toast('success', res.message);
                        window.location.reload();
                    },
                    error: function (xhr) {
                        const msg = xhr.responseJSON && xhr.responseJSON.message
                            ? xhr.responseJSON.message : trans.genericError;
                        toast('error', msg);
                    },
                    complete: function () {
                        $('#area-save-btn').prop('disabled', false);
                    },
                });
            }

            function deleteArea(id) {
                $.ajax({
                    url: `${routes.destroy}/${id}`,
                    method: 'POST',
                    data: { _token: csrf, _method: 'DELETE' },
                    success: function (res) {
                        const layer = findLayerByAreaId(id);
                        if (layer) {
                            delete areaLayers[L.stamp(layer)];
                            drawnItems.removeLayer(layer);
                        }
                        refreshList();
                        toast('success', res.message);
                    },
                    error: function (xhr) {
                        const msg = xhr.responseJSON && xhr.responseJSON.message
                            ? xhr.responseJSON.message : trans.genericError;
                        toast('error', msg);
                    },
                });
            }

            // ---- reshape (edit geometry) on the map -----------------------

            let reshapingLayer = null;

            function enableReshape(id) {
                cancelReshape(); // drop any in-progress reshape first

                const layer = findLayerByAreaId(id);
                if (!layer || !layer.editing) return;

                layer.closePopup();
                reshapingLayer = layer;
                layer.editing.enable();
                $('#shape-edit-bar').removeClass('d-none');
                map.fitBounds(layer.getBounds(), { maxZoom: 15, padding: [40, 40] });
            }

            function saveReshape() {
                if (!reshapingLayer) return;

                const entry = areaLayers[L.stamp(reshapingLayer)];
                if (!entry) {
                    cancelReshape();
                    return;
                }

                const coords = latlngsToCoords(reshapingLayer);
                reshapingLayer.editing.disable();
                $('#shape-edit-bar').addClass('d-none');

                const data = entry.data;
                const layer = entry.layer;
                reshapingLayer = null;

                saveArea('edit', {
                    id: data.id,
                    name: data.name,
                    description: data.description,
                    type: data.type,
                    color: data.color,
                    coordinates: coords,
                }, layer);
            }

            function cancelReshape() {
                if (reshapingLayer) {
                    const entry = areaLayers[L.stamp(reshapingLayer)];
                    reshapingLayer.editing.disable();
                    // Re-render from the stored (unchanged) coordinates to discard edits
                    if (entry) {
                        delete areaLayers[L.stamp(entry.layer)];
                        drawnItems.removeLayer(entry.layer);
                        addAreaToMap(entry.data);
                    }
                    reshapingLayer = null;
                }
                $('#shape-edit-bar').addClass('d-none');
            }

            $('#shape-save-btn').on('click', saveReshape);
            $('#shape-cancel-btn').on('click', cancelReshape);

            // ---- delegated UI events --------------------------------------

            $(document).on('click', '.js-reshape-area', function () {
                enableReshape($(this).data('id'));
            });

            $(document).on('click', '.js-edit-area', function () {
                const id = $(this).data('id');
                const entry = Object.values(areaLayers).find(e => e.data.id == id);
                if (entry) {
                    openModal('edit', entry.data);
                }
            });

            $(document).on('click', '.js-delete-area', function () {
                const id = $(this).data('id');
                if (window.confirm(trans.confirmDelete)) {
                    deleteArea(id);
                }
            });

            $(document).on('click', '.area-list-item', function (e) {
                if ($(e.target).closest('button').length) return;
                focusArea($(this).data('id'));
            });

            // ---- bootstrap existing areas ---------------------------------

            (initialAreas || []).forEach(addAreaToMap);
            refreshList();

            if (Object.keys(areaLayers).length) {
                try {
                    map.fitBounds(drawnItems.getBounds(), { padding: [30, 30] });
                } catch (err) { /* no-op */ }
            }

            // Leaflet inside a card sometimes needs a size recalculation
            setTimeout(() => map.invalidateSize(), 300);
        })();
    </script>
@endsection