{% extends "layout.html" %}

{% block title %}Report Traffic Jam - OpenEventDatabase{% endblock %}

{% block css %}
<link rel="stylesheet" href="/static/traffic.css">
{% endblock %}

{% block header %}Report Road Issue{% endblock %}

{% block content %}
<!-- Hidden OAuth2 configuration for the JavaScript module -->
<input type="hidden" id="osmClientId" value="{{ client_id }}">
<input type="hidden" id="osmClientSecret" value="{{ client_secret }}">
<input type="hidden" id="osmRedirectUri" value="{{ client_redirect }}">
<!-- Hidden Panoramax configuration (upload endpoint and token) -->
<input type="hidden" id="panoramaxUploadUrl" value="{{ panoramax_upload_url }}">
<input type="hidden" id="panoramaxToken" value="{{ panoramax_token }}">

<!-- Authentication section will be rendered by JavaScript or server-side -->
<div id="auth-section">
    {% if is_authenticated %}
        <div class="auth-info">
            <div>
                <p>Logged in as <strong>{{ osm_username }}</strong></p>
                <p><a href="https://www.openstreetmap.org/user/{{ osm_username }}" >View OSM Profile</a></p>
                <input type="hidden" id="osmUsername" value="{{ osm_username }}">
                <input type="hidden" id="osmUserId" value="{{ osm_user_id }}">
            </div>
        </div>
    {% else %}
        <p>Authenticate with your OpenStreetMap account to include your username in the traffic report.</p>
        <a href="https://www.openstreetmap.org/oauth2/authorize?client_id={{ client_id }}&redirect_uri={{ client_redirect }}&response_type=code&scope={{ client_authorizations }}" class="osm-login-btn">
            <span class="osm-logo"></span>
            Login with OpenStreetMap
        </a>
    {% endif %}
    
    <script>
        // Préserve l'affichage serveur si présent, sinon laisse traffic.js/dema_auth gérer
        document.addEventListener('DOMContentLoaded', function() {
            const hasServerAuth = document.getElementById('osmUsername') && document.getElementById('osmUsername').value;
            if (hasServerAuth) return;
            if (window.osmAuth && osmAuth.renderAuthSection) {
                const clientId = document.getElementById('osmClientId').value;
                const redirectUri = document.getElementById('osmRedirectUri').value;
                const authSection = document.getElementById('auth-section');
                authSection.innerHTML = osmAuth.renderAuthSection(clientId, redirectUri);
            }
        });
    </script>
</div>

<h3>Select Issue Type</h3>

<!-- Tab Navigation -->
<div class="tabs">
    <div class="tab-item active" data-tab="road">
        <i class="fas fa-road"></i> Route
    </div>
    <div class="tab-item" data-tab="rail">
        <i class="fas fa-train"></i> Rail
    </div>
    <div class="tab-item" data-tab="weather">
        <i class="fas fa-cloud-sun-rain"></i> Météo
    </div>
    <div class="tab-item" data-tab="emergency">
        <i class="fas fa-exclamation-circle"></i> Urgences
    </div>
    <div class="tab-item" data-tab="civic">
        <i class="fas fa-bicycle"></i> Cycles
    </div>
</div>

<!-- Tab Content -->
<div class="tab-content">
    <!-- Road Tab -->
    <div class="tab-pane active" id="road-tab">
        <div class="issue-buttons">
            <div class="issue-button road pothole" onclick="fillForm('pothole')">
                <i class="fas fa-dot-circle"></i>
                Pothole
            </div>
            <div class="issue-button road obstacle" onclick="fillForm('obstacle')">
                <i class="fas fa-exclamation-triangle"></i>
                Obstacle
            </div>
            <div class="issue-button road vehicle" onclick="fillForm('vehicle')">
                <i class="fas fa-car"></i>
                Véhicule sur le bas côté de la route
            </div>
            <div class="issue-button road danger" onclick="fillForm('danger')">
                <i class="fas fa-skull-crossbones"></i>
                Danger
            </div>
            <div class="issue-button road accident" onclick="fillForm('accident')">
                <i class="fas fa-car-crash"></i>
                Accident
            </div>
            <div class="issue-button road flooded-road" onclick="fillForm('flooded_road')">
                <i class="fas fa-water"></i>
                Route inondée
            </div>
            <div class="issue-button road roadwork" onclick="fillForm('roadwork')">
                <i class="fas fa-hard-hat"></i>
                Travaux
            </div>
            <div class="issue-button road traffic-jam" onclick="fillForm('traffic_jam')">
                <i class="fas fa-traffic-light"></i>
                Embouteillage
            </div>
            <div class="issue-button road traffic-jam" onclick="fillForm('traffic_mammoth')">
                <i class="fas fa-traffic-light"></i>
                Mammouth
            </div>
        </div>
    </div>
    
    <!-- Rail Tab -->
    <div class="tab-pane" id="rail-tab">
        <div class="issue-buttons">
            <div class="issue-button rail delay" onclick="fillForm('rail_delay')">
                <i class="fas fa-clock"></i>
                Retard
            </div>
            <div class="issue-button rail cancellation" onclick="fillForm('rail_cancellation')">
                <i class="fas fa-ban"></i>
                Annulation
            </div>
            <div class="issue-button rail works" onclick="fillForm('rail_works')">
                <i class="fas fa-tools"></i>
                Travaux
            </div>
            <div class="issue-button rail incident" onclick="fillForm('rail_incident')">
                <i class="fas fa-exclamation-triangle"></i>
                Incident
            </div>
        </div>
    </div>
    
    <!-- Weather Tab -->
    <div class="tab-pane" id="weather-tab">
        <div class="issue-buttons">
            <div class="issue-button weather storm" onclick="fillForm('weather_storm')">
                <i class="fas fa-bolt"></i>
                Orage
            </div>
            <div class="issue-button weather flood" onclick="fillForm('weather_flood')">
                <i class="fas fa-water"></i>
                Inondation
            </div>
            <div class="issue-button weather snow" onclick="fillForm('weather_snow')">
                <i class="fas fa-snowflake"></i>
                Neige
            </div>
            <div class="issue-button weather fog" onclick="fillForm('weather_fog')">
                <i class="fas fa-smog"></i>
                Brouillard
            </div>
            <div class="issue-button weather heat" onclick="fillForm('weather_heat')">
                <i class="fas fa-temperature-high"></i>
                Canicule
            </div>
        </div>
    </div>
    
    <!-- Emergency Tab -->
    <div class="tab-pane" id="emergency-tab">
        <div class="issue-buttons">
            <div class="issue-button emergency fire" onclick="fillForm('emergency_fire')">
                <i class="fas fa-fire"></i>
                Incendie
            </div>
            <div class="issue-button emergency medical" onclick="fillForm('emergency_medical')">
                <i class="fas fa-ambulance"></i>
                Urgence médicale
            </div>
            <div class="issue-button emergency police" onclick="fillForm('emergency_police')">
                <i class="fas fa-shield-alt"></i>
                Intervention police
            </div>
            <div class="issue-button emergency evacuation" onclick="fillForm('emergency_evacuation')">
                <i class="fas fa-running"></i>
                Évacuation
            </div>
        </div>
    </div>
    
    <!-- Civic Tab -->
    <div class="tab-pane" id="civic-tab">
        <div class="issue-buttons">
            <div class="issue-button civic bike-lane" onclick="fillForm('civic_bike_lane')">
                <i class="fas fa-bicycle"></i>
                Problème piste cyclable
            </div>
            <div class="issue-button civic sidewalk" onclick="fillForm('civic_sidewalk')">
                <i class="fas fa-walking"></i>
                Problème trottoir
            </div>
            <div class="issue-button civic lighting" onclick="fillForm('civic_lighting')">
                <i class="fas fa-lightbulb"></i>
                Éclairage défectueux
            </div>
            <div class="issue-button civic garbage" onclick="fillForm('civic_garbage')">
                <i class="fas fa-trash"></i>
                Déchets
            </div>
        </div>
    </div>
</div>

<h3>Report Details</h3>

<form id="reportForm" class="report-form">
    <div class="form-group">
        <label for="what" class="required">Type d'événement</label>
        <input type="text" id="what" name="what" required placeholder="e.g., road.hazard.pothole">
        <div class="note">Catégorie de l'événement (e.g., road.hazard.pothole, road.traffic.jam)</div>
    </div>
    
    <div class="form-group">
        <label for="label" class="required">Titre</label>
        <input type="text" id="label" name="label" required placeholder="e.g., Nid de poule sur la D123">
    </div>
    
    <div class="form-group">
        <label for="description">Description</label>
        <textarea id="description" name="description" rows="3" placeholder="Description détaillée du problème"></textarea>
    </div>
    
    <div class="form-row">
        <div class="form-group">
            <label for="type">Type de rapport</label>
            <select id="type" name="type">
                <option value="unscheduled">Non planifié (incident)</option>
                <option value="scheduled">Planifié (travaux)</option>
                <option value="forecast">Prévision</option>
            </select>
        </div>
    </div>
    
    <div class="form-row">
        <div class="form-group">
            <label for="start" class="required">Début</label>
            <input type="datetime-local" id="start" name="start" required>
        </div>
        
        <div class="form-group">
            <label for="stop" class="required">Fin (estimée)</label>
            <input type="datetime-local" id="stop" name="stop" required>
        </div>
    </div>
    
<!--    <div class="form-group">-->
<!--        <label for="photo">Photos</label>-->
<!--        <input type="file" id="photo" name="photo" accept="image/*" multiple>-->
<!--        <div class="note">Vous pouvez ajouter plusieurs photos (optionnel)</div>-->
<!--        <div id="photoPreview" class="photo-preview-container"></div>-->
<!--    </div>-->
    
    <div class="form-group">
        <label class="required">Localisation</label>
        <div id="map"></div>
        <div class="note">Cliquez sur la carte pour définir la localisation du problème ou utilisez le bouton "Obtenir ma position actuelle"</div>
    </div>
    
    <button id="report_issue_button" type="submit" disabled>Signaler le problème</button>
</form>

<div id="result"></div>

<a href="/demo/view-events" class="view-saved-events">
    <i class="fas fa-map-marked-alt"></i> Voir tous les événements enregistrés sur la carte
</a>
{% endblock %}

{% block scripts %}
<script src="/static/traffic.js"></script>
{% endblock %}