<section class="mobile-page-header">
    <span class="badge">Nova ocorrência</span>
    <h2>Registrar ocorrência</h2>
    <p>Toque no mapa para ajustar o ponto. Se estiver no celular, sua localização pode ser preenchida automaticamente.</p>
</section>

<?php if ($erro = Session::getFlash('erro')): ?>
    <div class="alert error"><?= e($erro) ?></div>
<?php endif; ?>

<form method="POST" action="<?= base_url((isset($appMode) && $appMode) ? '/app/registrar' : '/registrar') ?>" enctype="multipart/form-data" class="mobile-form-shell" id="citizen-mobile-form">
    <div class="field-group">
        <?php
            $categoriaSelecionada = (int)(
                $_GET['categoria_id']
                ?? $_GET['cat']
                ?? 0
            );
            ?>

            <label>Categoria</label>
            <select name="categoria_id" required>
                <option value="">Selecione</option>
                <?php foreach ($categorias as $categoria): ?>
                    <option value="<?= (int)$categoria['id'] ?>"
                        <?= $categoriaSelecionada === (int)$categoria['id'] ? 'selected' : '' ?>>
                        <?= e($categoria['nome']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
    </div>

    <div class="field-group">
        <label>Descrição</label>
        <textarea name="descricao" rows="4" required placeholder="Ex.: buraco grande próximo à esquina da praça."></textarea>
    </div>

    <div class="mobile-grid-single">
        <div class="field-group">
            <label>Foto</label>
            <input type="file" name="imagem" accept=".jpg,.jpeg,.png,.webp" capture="environment">
        </div>
        <div class="field-group">
            <label>Endereço de referência</label>
            <input type="text" name="endereco_referencia" id="endereco_referencia" placeholder="Rua, bairro ou ponto de referência">
        </div>
    </div>

    <div class="app-map-toolbar">
        <button type="button" class="btn btn-outline btn-inline" onclick="obterLocalizacao()">Usar minha localização</button>
        <button type="button" class="btn btn-secondary btn-inline" onclick="preencherEnderecoAutomatico()">Atualizar endereço</button>
    </div>

    <div id="mapa-ocorrencia" class="app-map"></div>
    <p class="help-text">Você pode tocar no mapa para mover o pino com precisão.</p>

    <div class="mobile-grid-single coords-card">
        <div>
            <label>Latitude</label>
            <input type="text" name="latitude" id="latitude" required>
        </div>
        <div>
            <label>Longitude</label>
            <input type="text" name="longitude" id="longitude" required>
        </div>
    </div>

    <label class="checkbox-inline app-checkbox">
        <input type="checkbox" name="anonima" value="1" id="anonima-checkbox">
        Enviar ocorrência anonimamente
    </label>

    <div class="mobile-grid-single" id="bloco-identificacao">
        <div>
            <label>Nome</label>
            <input type="text" name="cidadao_nome">
        </div>
        <div>
            <label>Telefone</label>
            <input type="text" name="cidadao_telefone" placeholder="(00) 00000-0000">
        </div>
    </div>

    <label id="label-email">E-mail</label>
    <input type="email" name="cidadao_email" id="cidadao_email">

    <button type="submit" class="mobile-primary-button" id="mobile-submit-btn">Enviar ocorrência</button>
    <div class="form-feedback" id="form-feedback"></div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof initOccurrenceMap === 'function') {
        initOccurrenceMap('mapa-ocorrencia', 'latitude', 'longitude', 'categoria_id');
    }

    var anonima = document.getElementById('anonima-checkbox');
    var bloco = document.getElementById('bloco-identificacao');
    var email = document.getElementById('cidadao_email');
    var labelEmail = document.getElementById('label-email');

    function toggleIdentificacao() {
        var hide = anonima.checked;
        bloco.style.display = hide ? 'none' : 'grid';
        email.style.display = hide ? 'none' : 'block';
        labelEmail.style.display = hide ? 'none' : 'block';
    }

    anonima.addEventListener('change', toggleIdentificacao);
    toggleIdentificacao();

    if (navigator.geolocation) {
        setTimeout(function () {
            obterLocalizacao(true);
        }, 500);
    }
});

function obterLocalizacao(silent) {
    if (!navigator.geolocation) {
        if (!silent) alert('Geolocalização não suportada neste dispositivo.');
        return;
    }

    navigator.geolocation.getCurrentPosition(function(pos) {
        var lat = pos.coords.latitude.toFixed(8);
        var lng = pos.coords.longitude.toFixed(8);
        document.getElementById('latitude').value = lat;
        document.getElementById('longitude').value = lng;
        if (typeof updateOccurrenceMarker === 'function') {
            updateOccurrenceMarker(parseFloat(lat), parseFloat(lng));
        }
        preencherEnderecoAutomatico();
    }, function() {
        if (!silent) alert('Não foi possível obter a localização.');
    }, { enableHighAccuracy: true, timeout: 9000 });
}

function preencherEnderecoAutomatico() {
    var lat = document.getElementById('latitude').value;
    var lng = document.getElementById('longitude').value;
    if (!lat || !lng || typeof reverseGeocodeOccurrence !== 'function') {
        return;
    }
    reverseGeocodeOccurrence(parseFloat(lat), parseFloat(lng), 'endereco_referencia');
}
</script>
