{% extends 'default.html.twig' %}

{% block head_assets %}
    {% do assets.addCss('theme://css-compiled/post-form.css') %}
    <script type="module" src="{{ url('theme://js/post/post-form.js') }}"></script>
{% endblock %}

{% block content %}
<div class="post-form-wrap">
    <h1>New Entry</h1>
    {% include 'forms/form.html.twig' ignore missing %}

    <div class="form-action-row">
        <button type="button" id="get-location" class="btn-action">📍 Get Location</button>
        <button type="button" id="get-weather" class="btn-action">🌤 Get Weather</button>
    </div>
    <p id="location-status" class="form-status"></p>
    <p id="weather-status" class="form-status"></p>
</div>

<script>
// Custom validation — form uses novalidate so we handle it here
(function() {
    var REQUIRED = ['title', 'content'];
    var form = document.querySelector('form[name="new-entry"]');
    if (!form) return;

    function clearErrors() {
        form.querySelectorAll('.field-error').forEach(function(el) { el.remove(); });
        form.querySelectorAll('.field-invalid').forEach(function(el) { el.classList.remove('field-invalid'); });
    }

    function showError(field, msg) {
        field.classList.add('field-invalid');
        var err = document.createElement('span');
        err.className = 'field-error';
        err.textContent = msg;
        field.parentNode.insertBefore(err, field.nextSibling);
    }

    form.addEventListener('submit', function(e) {
        clearErrors();
        var firstInvalid = null;
        REQUIRED.forEach(function(name) {
            var field = form.querySelector('[name="data[' + name + ']"]');
            if (field && !field.value.trim()) {
                showError(field, name.charAt(0).toUpperCase() + name.slice(1) + ' is required.');
                if (!firstInvalid) firstInvalid = field;
            }
        });
        if (firstInvalid) {
            e.preventDefault();
            firstInvalid.focus();
            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });
}());
</script>

<script>
var WMO_MAP = {
    0:'Sunny',1:'Partly cloudy',2:'Partly cloudy',3:'Cloudy',
    45:'Foggy',48:'Foggy',
    51:'Drizzle',53:'Drizzle',55:'Drizzle',56:'Drizzle',57:'Drizzle',
    61:'Rain',63:'Rain',65:'Rain',66:'Rain',67:'Rain',80:'Rain',81:'Rain',82:'Rain',
    71:'Snow',73:'Snow',75:'Snow',77:'Snow',85:'Snow',86:'Snow',
    95:'Thunderstorm',96:'Thunderstorm',99:'Thunderstorm'
};

function getField(name) {
    return document.querySelector('input[name="data[' + name + ']"]');
}

document.getElementById('get-location').addEventListener('click', function() {
    var status = document.getElementById('location-status');
    status.className = 'form-status';
    status.textContent = 'Getting location…';
    if (!navigator.geolocation) {
        status.textContent = 'Geolocation not supported.';
        return;
    }
    navigator.geolocation.getCurrentPosition(function(pos) {
        var lat = pos.coords.latitude.toFixed(6);
        var lng = pos.coords.longitude.toFixed(6);
        var latField = getField('lat');
        var lngField = getField('lng');
        if (latField) latField.value = lat;
        if (lngField) lngField.value = lng;
        status.textContent = '✓ Location captured · ' + lat + ', ' + lng;
        status.classList.add('form-status--ok');
    }, function(err) {
        status.textContent = '✗ Could not get location: ' + err.message;
        status.classList.add('form-status--err');
    });
});

document.getElementById('get-weather').addEventListener('click', function() {
    var status = document.getElementById('weather-status');
    status.className = 'form-status';
    var latField = getField('lat');
    var lngField = getField('lng');
    var lat = latField ? latField.value.trim() : '';
    var lng = lngField ? lngField.value.trim() : '';
    if (!lat || !lng) {
        status.textContent = 'Get location first, then fetch weather.';
        return;
    }
    status.textContent = 'Fetching weather…';
    var url = 'https://api.open-meteo.com/v1/forecast?latitude=' + lat +
              '&longitude=' + lng +
              '&current=temperature_2m,weather_code&temperature_unit=celsius';
    fetch(url)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var temp = Math.round(data.current.temperature_2m);
            var code = data.current.weather_code;
            var desc = WMO_MAP[code] || 'Cloudy';
            var tempField = getField('weather_temp_c');
            var descField = getField('weather_desc');
            if (tempField) tempField.value = temp;
            if (descField) descField.value = desc;
            status.textContent = '✓ Weather set · ' + desc + ' · ' + temp + '°C';
            status.classList.add('form-status--ok');
        })
        .catch(function() {
            status.textContent = '✗ Could not fetch weather — enter manually if needed.';
            status.classList.add('form-status--err');
        });
});
</script>
{% endblock %}