{% extends "base_wizard.html" %}

{% block title %}Central - Configure Adapters{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ==" crossorigin="anonymous">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous"></script>
{% endblock %}

{% block content %}
{% with step=4, step_name="Configure Adapters" %}
{% include "_wizard_header.html" %}
{% endwith %}

<article>
    <header>
        <h1>Configure Adapters</h1>
        <p>Enable and configure data source adapters. Each adapter polls an external API and normalizes events.</p>
    </header>

    {% if error %}
    <p style="color: var(--pico-color-red-500);">{{ error }}</p>
    {% endif %}

    <form action="/setup/adapters" method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        {% for adapter in adapters %}
        <details open style="margin-bottom: 2rem;">
            <summary><strong>{{ adapter.display_name or adapter.name }}</strong></summary>

            <div style="padding: 1rem; border-left: 3px solid var(--pico-primary);">
                <label>
                    <input type="checkbox" name="{{ adapter.name }}_enabled"
                           {% if form_data and form_data.get(adapter.name + '_enabled') %}checked
                           {% elif not form_data and adapter.enabled %}checked{% endif %}>
                    Enabled
                </label>
                {% if errors and errors.get(adapter.name + '_enabled') %}
                <small style="color: var(--pico-color-red-500); display: block;">{{ errors[adapter.name + '_enabled'] }}</small>
                {% endif %}

                <label for="{{ adapter.name }}_cadence_s">Cadence (seconds)</label>
                <input type="number" id="{{ adapter.name }}_cadence_s" name="{{ adapter.name }}_cadence_s"
                       value="{{ form_data.get(adapter.name + '_cadence_s') if form_data else adapter.cadence_s }}">
                {% if errors and errors.get(adapter.name + '_cadence_s') %}
                <small style="color: var(--pico-color-red-500);">{{ errors[adapter.name + '_cadence_s'] }}</small>
                {% endif %}

                {% for field in adapter.fields %}
                    {% set form_key = adapter.name + '_' + field.name %}

                    {% if field.widget == "text" %}
                        <label for="{{ form_key }}">{{ field.label }}</label>
                        <input type="text" id="{{ form_key }}" name="{{ form_key }}"
                               value="{{ form_data.get(form_key) if form_data else field.current_value or '' }}"
                               {% if field.required %}required{% endif %}>
                        {% if field.description %}
                        <small>{{ field.description }}</small>
                        {% endif %}
                        {% if errors and errors.get(form_key) %}
                        <small style="color: var(--pico-color-red-500);">{{ errors[form_key] }}</small>
                        {% endif %}

                    {% elif field.widget == "api_key_select" %}
                        <label for="{{ form_key }}">{{ field.label }}</label>
                        <select id="{{ form_key }}" name="{{ form_key }}">
                            <option value="">(none)</option>
                            {% for key in api_keys %}
                            <option value="{{ key.alias }}"
                                    {% if (form_data.get(form_key) if form_data else field.current_value) == key.alias %}selected{% endif %}>
                                {{ key.alias }}
                            </option>
                            {% endfor %}
                        </select>
                        {% if field.description %}
                        <small>{{ field.description }}</small>
                        {% endif %}
                        {% if errors and errors.get(form_key) %}
                        <small style="color: var(--pico-color-red-500);">{{ errors[form_key] }}</small>
                        {% endif %}

                    {% elif field.widget == "number" %}
                        <label for="{{ form_key }}">{{ field.label }}</label>
                        <input type="number" id="{{ form_key }}" name="{{ form_key }}"
                               value="{{ form_data.get(form_key) if form_data else field.current_value or '' }}"
                               {% if field.required %}required{% endif %}>
                        {% if field.description %}
                        <small>{{ field.description }}</small>
                        {% endif %}
                        {% if errors and errors.get(form_key) %}
                        <small style="color: var(--pico-color-red-500);">{{ errors[form_key] }}</small>
                        {% endif %}

                    {% elif field.widget == "checkbox" %}
                        <label>
                            <input type="checkbox" name="{{ form_key }}"
                                   {% if form_data and form_data.get(form_key) %}checked
                                   {% elif not form_data and field.current_value %}checked{% endif %}>
                            {{ field.label }}
                        </label>
                        {% if field.description %}
                        <small>{{ field.description }}</small>
                        {% endif %}
                        {% if errors and errors.get(form_key) %}
                        <small style="color: var(--pico-color-red-500);">{{ errors[form_key] }}</small>
                        {% endif %}

                    {% elif field.widget == "csv" %}
                        <label for="{{ form_key }}">{{ field.label }}</label>
                        <input type="text" id="{{ form_key }}" name="{{ form_key }}"
                               value="{{ form_data.get(form_key) if form_data else (field.current_value | join(',') if field.current_value else '') }}"
                               {% if field.required %}required{% endif %}>
                        <small>Comma-separated values{% if field.description %} — {{ field.description }}{% endif %}</small>
                        {% if errors and errors.get(form_key) %}
                        <small style="color: var(--pico-color-red-500);">{{ errors[form_key] }}</small>
                        {% endif %}

                    {% elif field.widget == "select" %}
                        <label for="{{ form_key }}">{{ field.label }}</label>
                        <select id="{{ form_key }}" name="{{ form_key }}">
                            {% for opt in field.options %}
                            <option value="{{ opt }}"
                                    {% if (form_data.get(form_key) if form_data else field.current_value) == opt %}selected{% endif %}>
                                {{ opt }}
                            </option>
                            {% endfor %}
                        </select>
                        {% if field.description %}
                        <small>{{ field.description }}</small>
                        {% endif %}
                        {% if errors and errors.get(form_key) %}
                        <small style="color: var(--pico-color-red-500);">{{ errors[form_key] }}</small>
                        {% endif %}

                    {% elif field.widget == "checkboxes" %}
                        <label>{{ field.label }}</label>
                        {% set current_values = form_data.getlist(form_key) if form_data else (field.current_value or []) %}
                        {% for opt in field.options %}
                        <label style="display: inline-block; margin-right: 1rem;">
                            <input type="checkbox" name="{{ form_key }}" value="{{ opt }}"
                                   {% if opt in current_values %}checked{% endif %}>
                            {{ opt }}
                        </label>
                        {% endfor %}
                        {% if field.description %}
                        <small style="display: block;">{{ field.description }}</small>
                        {% endif %}
                        {% if errors and errors.get(form_key) %}
                        <small style="color: var(--pico-color-red-500); display: block;">{{ errors[form_key] }}</small>
                        {% endif %}

                    {% elif field.widget == "region" %}
                        <h4>Region</h4>
                        {% set region_key = adapter.name + '_' + field.name %}
                        {% set region = field.current_value or {} %}
                        <div id="region-picker-{{ adapter.name }}"
                             data-adapter="{{ adapter.name }}"
                             data-field="{{ field.name }}"
                             data-north="{{ form_data.get(region_key + '_north') if form_data else (region.north if region else 49.5) }}"
                             data-south="{{ form_data.get(region_key + '_south') if form_data else (region.south if region else 31.0) }}"
                             data-east="{{ form_data.get(region_key + '_east') if form_data else (region.east if region else -102.0) }}"
                             data-west="{{ form_data.get(region_key + '_west') if form_data else (region.west if region else -124.5) }}"
                             data-tile-url="{{ tile_url }}"
                             data-tile-attr="{{ tile_attribution }}">

                            <div id="region-map-{{ adapter.name }}" style="height: 300px; margin-bottom: 1rem;"></div>

                            <div class="grid">
                                <div>
                                    <label>North</label>
                                    <input type="number" name="{{ region_key }}_north" step="0.0001" min="-90" max="90" readonly
                                           value="{{ form_data.get(region_key + '_north') if form_data else (region.north if region else 49.5) }}">
                                </div>
                                <div>
                                    <label>South</label>
                                    <input type="number" name="{{ region_key }}_south" step="0.0001" min="-90" max="90" readonly
                                           value="{{ form_data.get(region_key + '_south') if form_data else (region.south if region else 31.0) }}">
                                </div>
                                <div>
                                    <label>East</label>
                                    <input type="number" name="{{ region_key }}_east" step="0.0001" min="-180" max="180" readonly
                                           value="{{ form_data.get(region_key + '_east') if form_data else (region.east if region else -102.0) }}">
                                </div>
                                <div>
                                    <label>West</label>
                                    <input type="number" name="{{ region_key }}_west" step="0.0001" min="-180" max="180" readonly
                                           value="{{ form_data.get(region_key + '_west') if form_data else (region.west if region else -124.5) }}">
                                </div>
                            </div>
                            {% if errors and errors.get(region_key) %}
                            <small style="color: var(--pico-color-red-500);">{{ errors[region_key] }}</small>
                            {% endif %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </details>
        {% endfor %}

        <div style="display: flex; gap: 1rem; margin-top: 1rem;">
            <a href="/setup/keys" role="button" class="outline">&larr; Back</a>
            <button type="submit">Next &rarr;</button>
        </div>
    </form>
</article>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Find all region pickers dynamically
    const regionPickers = document.querySelectorAll('[id^="region-picker-"]');

    regionPickers.forEach(function(container) {
        const adapterName = container.dataset.adapter;
        const fieldName = container.dataset.field || 'region';

        const savedNorth = parseFloat(container.dataset.north);
        const savedSouth = parseFloat(container.dataset.south);
        const savedEast = parseFloat(container.dataset.east);
        const savedWest = parseFloat(container.dataset.west);
        const tileUrl = container.dataset.tileUrl || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
        const tileAttr = container.dataset.tileAttr || '&copy; OpenStreetMap contributors';

        const centerLat = (savedNorth + savedSouth) / 2;
        const centerLng = (savedEast + savedWest) / 2;
        const mapEl = document.getElementById('region-map-' + adapterName);
        const map = L.map(mapEl).setView([centerLat, centerLng], 4);

        L.tileLayer(tileUrl, {
            attribution: tileAttr,
            maxZoom: 18
        }).addTo(map);

        // Ensure map renders correctly even if container has not
        // finished laying out at init time
        setTimeout(function() { map.invalidateSize(); }, 100);

        const bounds = L.latLngBounds(
            L.latLng(savedSouth, savedWest),
            L.latLng(savedNorth, savedEast)
        );
        map.fitBounds(bounds.pad(0.1));

        let rectangle = L.rectangle(bounds, {
            color: '#3388ff',
            weight: 2,
            fillOpacity: 0.2
        });

        // Set up Leaflet.draw for click-to-draw
        const drawnItems = new L.FeatureGroup();
        drawnItems.addLayer(rectangle);
        map.addLayer(drawnItems);

        const drawControl = new L.Control.Draw({
            draw: {
                rectangle: { shapeOptions: { color: '#3388ff', weight: 2,
                                             fillOpacity: 0.2 } },
                polyline: false,
                polygon: false,
                circle: false,
                marker: false,
                circlemarker: false
            },
            edit: {
                featureGroup: drawnItems,
                edit: false,
                remove: false
            }
        });
        map.addControl(drawControl);

        rectangle.editing.enable();

        const inputPrefix = adapterName + '_' + fieldName;
        const northInput = container.querySelector('input[name="' + inputPrefix + '_north"]');
        const southInput = container.querySelector('input[name="' + inputPrefix + '_south"]');
        const eastInput = container.querySelector('input[name="' + inputPrefix + '_east"]');
        const westInput = container.querySelector('input[name="' + inputPrefix + '_west"]');

        function updateInputs() {
            const b = rectangle.getBounds();
            northInput.value = b.getNorth().toFixed(4);
            southInput.value = b.getSouth().toFixed(4);
            eastInput.value = b.getEast().toFixed(4);
            westInput.value = b.getWest().toFixed(4);
        }

        rectangle.on('edit', updateInputs);
        updateInputs();

        // When user draws a new rectangle, replace the existing one
        map.on(L.Draw.Event.CREATED, function(e) {
            drawnItems.clearLayers();
            rectangle = e.layer;
            rectangle.setStyle({ color: '#3388ff', weight: 2,
                                 fillOpacity: 0.2 });
            drawnItems.addLayer(rectangle);
            rectangle.editing.enable();
            rectangle.on('edit', updateInputs);
            updateInputs();
        });

        // Fix map size when details is opened
        const details = container.closest('details');
        if (details) {
            details.addEventListener('toggle', function() {
                setTimeout(function() { map.invalidateSize(); }, 100);
            });
        }
    });
});
</script>
{% endblock %}