{% extends "base.html" %}

{% block title %}Incident Toevoegen - Snauw Counter{% endblock %}

{% block content %}
<div class="card">
    <h2>📝 Incident Registreren</h2>
    <p>Registreer een nieuw incident met alle details.</p>

    <form action="{{ url_for('main.add_incident') }}" method="POST" onsubmit="return validateIncidentForm()">
        <div class="form-group">
            <label>Snauw-index (1-5 schaal) *:</label>
            <div class="severity-selector">
                {% set snauw_descriptions = [
                    'Lichte correctie',
                    'Geprikkelde waarschuwing',
                    'Openlijke snauw',
                    'Bijtende aanval',
                    'Explosieve uitval'
                ] %}
                {% for i in range(1, 6) %}
                    <button type="button" class="severity-btn" data-severity="{{ i }}" title="Fase {{ i }}: {{ snauw_descriptions[i-1] }}">
                        {{ i }}
                    </button>
                {% endfor %}
            </div>
            <input type="hidden" id="severity-input" name="severity" required>

            <!-- Snauw-index uitleg -->
            <div class="snauw-index-info" style="margin-top: 1rem; font-size: 0.9rem; color: #6c757d;">
                <details>
                    <summary style="cursor: pointer; font-weight: 500;">📖 Uitleg Snauw-index</summary>
                    <div style="margin-top: 0.5rem; padding: 1rem; background: #f8f9fa; border-radius: 8px;">
                        <div class="snauw-phases">
                            <div style="margin-bottom: 0.5rem;"><strong>Fase 1 - Lichte correctie:</strong><br><small>Licht geïrriteerd, kortaf of subtiel sarcastisch. Nog beheerst en goed bij te sturen.</small></div>
                            <div style="margin-bottom: 0.5rem;"><strong>Fase 2 - Geprikkelde waarschuwing:</strong><br><small>Irritatie wordt uitgesproken, toon scherper. Duidelijk signaal dat grenzen naderen.</small></div>
                            <div style="margin-bottom: 0.5rem;"><strong>Fase 3 - Openlijke snauw:</strong><br><small>Emotie overheerst, stem verheft zich. Verwijtend. Gesprek wordt gespannen.</small></div>
                            <div style="margin-bottom: 0.5rem;"><strong>Fase 4 - Bijtende aanval:</strong><br><small>Persoonlijk, cynisch en scherp. Kans op defensief of escalatie.</small></div>
                            <div style="margin-bottom: 0.5rem;"><strong>Fase 5 - Explosieve uitval:</strong><br><small>Volledige ontlading, hard en fel. Communicatie niet meer mogelijk.</small></div>
                        </div>
                    </div>
                </details>
            </div>
        </div>

        <div class="form-group">
            <label for="incident_time">Tijdstip incident:</label>
            <input type="datetime-local" id="incident_time" name="incident_time">
            <script>((f)=>f())(()=>{const d=new Date(),i=document.getElementById('incident_time');if(i)i.value=`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}T${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`})</script>
            <small style="color: #6c757d;">Automatisch ingevuld, pas aan indien nodig</small>
        </div>

        <div class="form-group">
            <label for="notes">Beschrijving (optioneel):</label>
            <textarea id="notes" name="notes" rows="4"
                      placeholder="Wat gebeurde er precies? Wat was de context? Hoe reageerde je?..."></textarea>
            <small style="color: #6c757d;">Deze informatie kan helpen bij het herkennen van patronen</small>
        </div>

        <div style="display: flex; gap: 0.5rem;">
            <button type="submit" class="btn btn-success">💾 Opslaan</button>
            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">❌ Annuleren</a>
        </div>
    </form>
</div>

<div class="card" style="background: #f8f9fa; border: 1px dashed #dee2e6;">
    <h4>💡 Tips voor nauwkeurige registratie</h4>
    <ul style="margin-left: 1rem; color: #495057;">
        <li><strong>Snauw-index:</strong> Gebruik de 5-punts schaal consistent</li>
        <li><strong>Timing:</strong> Registreer zo snel mogelijk na het incident</li>
        <li><strong>Context:</strong> Noteer relevante omstandigheden (stress, vermoeidheid, etc.)</li>
        <li><strong>Objectiviteit:</strong> Beschrijf wat er gebeurde, niet hoe je je voelde</li>
    </ul>
</div>
{% endblock %}

{% block scripts %}
<script>
// Auto-focus on severity selector for mobile
document.addEventListener('DOMContentLoaded', function() {
    // Scroll to severity selector for mobile
    if (window.innerWidth <= 768) {
        const severitySelector = document.querySelector('.severity-selector');
        setTimeout(() => {
            severitySelector.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }, 300);
    }
});

// Quick keyboard shortcuts for desktop
document.addEventListener('keydown', function(e) {
    // Numbers 1-5 for Snauw-index
    if (e.key >= '1' && e.key <= '5') {
        const severity = parseInt(e.key);
        const btn = document.querySelector(`[data-severity="${severity}"]`);
        if (btn) {
            btn.click();
            e.preventDefault();
        }
    }
});
</script>
{% endblock %}