{% extends "base.html" %}

{% block title %}Admin Panel{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Neue Lizenz erstellen</h2>
        <div>
            <a href="/batch" class="btn btn-primary">🔑 Batch</a>
            <a href="/licenses" class="btn btn-secondary">📋 Lizenzen</a>
            <a href="/customers" class="btn btn-secondary">👥 Kunden</a>
            <a href="/sessions" class="btn btn-secondary">🟢 Sessions</a>
            <a href="/backups" class="btn btn-secondary">💾 Backups</a>
        </div>
    </div>

    <form method="post" action="/create" accept-charset="UTF-8">
        <div class="row g-3">
            <div class="col-md-12">
                <label for="customerSelect" class="form-label">Kunde auswählen</label>
                <select class="form-select" id="customerSelect" name="customer_id" required>
                    <option value="">🔍 Kunde suchen oder neuen Kunden anlegen...</option>
                    <option value="new">➕ Neuer Kunde</option>
                </select>
            </div>
            <div class="col-md-6" id="customerNameDiv" style="display: none;">
                <label for="customerName" class="form-label">Kundenname</label>
                <input type="text" class="form-control" id="customerName" name="customer_name" accept-charset="UTF-8">
            </div>
            <div class="col-md-6" id="emailDiv" style="display: none;">
                <label for="email" class="form-label">E-Mail</label>
                <input type="email" class="form-control" id="email" name="email" accept-charset="UTF-8">
            </div>
            <div class="col-md-4">
                <label for="licenseKey" class="form-label">Lizenzschlüssel</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="licenseKey" name="license_key" 
                           placeholder="AF-F-YYYYMM-XXXX-YYYY-ZZZZ" required
                           pattern="AF-[FT]-\d{6}-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}"
                           title="Format: AF-F-YYYYMM-XXXX-YYYY-ZZZZ">
                    <button type="button" class="btn btn-outline-primary" onclick="generateLicenseKey()">
                        🔑 Generieren
                    </button>
                </div>
                <div class="form-text">Format: AF-F-YYYYMM-XXXX-YYYY-ZZZZ (F=Full, T=Test)</div>
            </div>
            <div class="col-md-4">
                <label for="licenseType" class="form-label">Lizenztyp</label>
                <select class="form-select" id="licenseType" name="license_type" required>
                    <option value="full">Vollversion</option>
                    <option value="test">Testversion</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="validFrom" class="form-label">Kaufdatum</label>
                <input type="date" class="form-control" id="validFrom" name="valid_from" required>
            </div>
            <div class="col-md-1">
                <label for="duration" class="form-label">Laufzeit</label>
                <input type="number" class="form-control" id="duration" name="duration" value="1" min="1" required>
            </div>
            <div class="col-md-1">
                <label for="durationType" class="form-label">Einheit</label>
                <select class="form-select" id="durationType" name="duration_type" required>
                    <option value="days">Tage</option>
                    <option value="months">Monate</option>
                    <option value="years" selected>Jahre</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="validUntil" class="form-label">Ablaufdatum</label>
                <input type="date" class="form-control" id="validUntil" name="valid_until" readonly style="background-color: #e9ecef;">
            </div>
        </div>

        <!-- Resource Pool Allocation -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-server"></i> Ressourcen-Zuweisung
                    <small class="text-muted float-end" id="resourceStatus"></small>
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="domainCount" class="form-label">
                            <i class="fas fa-globe"></i> Domains
                        </label>
                        <select class="form-select" id="domainCount" name="domain_count" required>
                            {% for i in range(11) %}
                            <option value="{{ i }}" {% if i == 1 %}selected{% endif %}>{{ i }}</option>
                            {% endfor %}
                        </select>
                        <small class="form-text text-muted">
                            Verfügbar: <span id="domainsAvailable" class="fw-bold">-</span>
                        </small>
                    </div>
                    <div class="col-md-4">
                        <label for="ipv4Count" class="form-label">
                            <i class="fas fa-network-wired"></i> IPv4-Adressen
                        </label>
                        <select class="form-select" id="ipv4Count" name="ipv4_count" required>
                            {% for i in range(11) %}
                            <option value="{{ i }}" {% if i == 1 %}selected{% endif %}>{{ i }}</option>
                            {% endfor %}
                        </select>
                        <small class="form-text text-muted">
                            Verfügbar: <span id="ipv4Available" class="fw-bold">-</span>
                        </small>
                    </div>
                    <div class="col-md-4">
                        <label for="phoneCount" class="form-label">
                            <i class="fas fa-phone"></i> Telefonnummern
                        </label>
                        <select class="form-select" id="phoneCount" name="phone_count" required>
                            {% for i in range(11) %}
                            <option value="{{ i }}" {% if i == 1 %}selected{% endif %}>{{ i }}</option>
                            {% endfor %}
                        </select>
                        <small class="form-text text-muted">
                            Verfügbar: <span id="phoneAvailable" class="fw-bold">-</span>
                        </small>
                    </div>
                </div>
                <div class="alert alert-info mt-3 mb-0" role="alert">
                    <i class="fas fa-info-circle"></i> 
                    Die Ressourcen werden bei der Lizenzerstellung automatisch aus dem Pool zugewiesen.
                    Wählen Sie 0, wenn für diesen Typ keine Ressourcen benötigt werden.
                </div>
            </div>
        </div>

        <!-- Test Data Checkbox -->
        <div class="form-check mt-3">
            <input class="form-check-input" type="checkbox" id="isTest" name="is_test">
            <label class="form-check-label" for="isTest">
                <i class="fas fa-flask"></i> Als Testdaten markieren
                <small class="text-muted">(wird von der Software ignoriert)</small>
            </label>
        </div>

        <div class="mt-4">
            <button type="submit" class="btn btn-primary">➕ Lizenz erstellen</button>
        </div>
    </form>
</div>

<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
            {% for category, message in messages %}
                <div class="toast show align-items-center text-white bg-{{ 'danger' if category == 'error' else 'success' }} border-0" role="alert">
                    <div class="d-flex">
                        <div class="toast-body">
                            {{ message }}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endwith %}

<script>
// License Key Generator
function generateLicenseKey() {
    const licenseType = document.getElementById('licenseType').value;
    
    // Zeige Ladeindikator
    const button = event.target;
    const originalText = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '⏳ Generiere...';
    
    // API-Call
    fetch('/api/generate-license-key', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({type: licenseType})
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('licenseKey').value = data.key;
            // Visuelles Feedback
            document.getElementById('licenseKey').classList.add('border-success');
            setTimeout(() => {
                document.getElementById('licenseKey').classList.remove('border-success');
            }, 2000);
        } else {
            alert('Fehler bei der Key-Generierung: ' + (data.error || 'Unbekannter Fehler'));
        }
    })
    .catch(error => {
        console.error('Fehler:', error);
        alert('Netzwerkfehler bei der Key-Generierung');
    })
    .finally(() => {
        // Button zurücksetzen
        button.disabled = false;
        button.innerHTML = originalText;
    });
}

// Event Listener für Lizenztyp-Änderung
document.getElementById('licenseType').addEventListener('change', function() {
    const keyField = document.getElementById('licenseKey');
    if (keyField.value && keyField.value.startsWith('AF-')) {
        // Prüfe ob der Key zum neuen Typ passt
        const currentType = this.value;
        const keyType = keyField.value.charAt(3); // Position des F/T im Key (AF-F-...)
        
        if ((currentType === 'full' && keyType === 'T') || 
            (currentType === 'test' && keyType === 'F')) {
            if (confirm('Der aktuelle Key passt nicht zum gewählten Lizenztyp. Neuen Key generieren?')) {
                generateLicenseKey();
            }
        }
    }
});

// Auto-Uppercase für License Key Input
document.getElementById('licenseKey').addEventListener('input', function(e) {
    e.target.value = e.target.value.toUpperCase();
});

// Funktion zur Berechnung des Ablaufdatums
function calculateValidUntil() {
    const validFrom = document.getElementById('validFrom').value;
    const duration = parseInt(document.getElementById('duration').value) || 1;
    const durationType = document.getElementById('durationType').value;
    
    if (!validFrom) return;
    
    const startDate = new Date(validFrom);
    let endDate = new Date(startDate);
    
    switch(durationType) {
        case 'days':
            endDate.setDate(endDate.getDate() + duration);
            break;
        case 'months':
            endDate.setMonth(endDate.getMonth() + duration);
            break;
        case 'years':
            endDate.setFullYear(endDate.getFullYear() + duration);
            break;
    }
    
    // Ein Tag abziehen, da der Starttag mitgezählt wird
    endDate.setDate(endDate.getDate() - 1);
    
    document.getElementById('validUntil').value = endDate.toISOString().split('T')[0];
}

// Event Listener für Änderungen
document.getElementById('validFrom').addEventListener('change', calculateValidUntil);
document.getElementById('duration').addEventListener('input', calculateValidUntil);
document.getElementById('durationType').addEventListener('change', calculateValidUntil);

// Setze heutiges Datum als Standard für valid_from
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('validFrom').value = today;
    
    // Berechne initiales Ablaufdatum
    calculateValidUntil();
    
    // Initialisiere Select2 für Kundenauswahl
    $('#customerSelect').select2({
        theme: 'bootstrap-5',
        placeholder: '🔍 Kunde suchen oder neuen Kunden anlegen...',
        allowClear: true,
        ajax: {
            url: '/api/customers',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term,
                    page: params.page || 1
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                
                // "Neuer Kunde" Option immer oben anzeigen
                const results = data.results || [];
                if (params.page === 1) {
                    results.unshift({
                        id: 'new',
                        text: '➕ Neuer Kunde',
                        isNew: true
                    });
                }
                
                return {
                    results: results,
                    pagination: data.pagination
                };
            },
            cache: true
        },
        minimumInputLength: 0,
        language: {
            inputTooShort: function() { return ''; },
            noResults: function() { return 'Keine Kunden gefunden'; },
            searching: function() { return 'Suche...'; },
            loadingMore: function() { return 'Lade weitere Ergebnisse...'; }
        }
    });
    
    // Vorausgewählten Kunden setzen (falls von kombinierter Ansicht kommend)
    {% if preselected_customer_id %}
    // Lade Kundendetails und setze Auswahl
    fetch('/api/customers?id={{ preselected_customer_id }}')
        .then(response => response.json())
        .then(data => {
            if (data.results && data.results.length > 0) {
                const customer = data.results[0];
                // Erstelle Option und setze sie als ausgewählt
                const option = new Option(customer.text, customer.id, true, true);
                $('#customerSelect').append(option).trigger('change');
                // Verstecke die Eingabefelder
                document.getElementById('customerNameDiv').style.display = 'none';
                document.getElementById('emailDiv').style.display = 'none';
            }
        });
    {% endif %}
    
    // Event Handler für Kundenauswahl
    $('#customerSelect').on('select2:select', function (e) {
        const selectedValue = e.params.data.id;
        const nameDiv = document.getElementById('customerNameDiv');
        const emailDiv = document.getElementById('emailDiv');
        const nameInput = document.getElementById('customerName');
        const emailInput = document.getElementById('email');
        
        if (selectedValue === 'new') {
            // Zeige Eingabefelder für neuen Kunden
            nameDiv.style.display = 'block';
            emailDiv.style.display = 'block';
            nameInput.required = true;
            emailInput.required = true;
        } else {
            // Verstecke Eingabefelder bei bestehendem Kunden
            nameDiv.style.display = 'none';
            emailDiv.style.display = 'none';
            nameInput.required = false;
            emailInput.required = false;
            nameInput.value = '';
            emailInput.value = '';
        }
    });
    
    // Clear handler
    $('#customerSelect').on('select2:clear', function (e) {
        document.getElementById('customerNameDiv').style.display = 'none';
        document.getElementById('emailDiv').style.display = 'none';
        document.getElementById('customerName').required = false;
        document.getElementById('email').required = false;
    });
    
    // Resource Availability Check
    checkResourceAvailability();
    
    // Event Listener für Resource Count Änderungen
    document.getElementById('domainCount').addEventListener('change', checkResourceAvailability);
    document.getElementById('ipv4Count').addEventListener('change', checkResourceAvailability);
    document.getElementById('phoneCount').addEventListener('change', checkResourceAvailability);
});

// Funktion zur Prüfung der Ressourcen-Verfügbarkeit
function checkResourceAvailability() {
    const domainCount = parseInt(document.getElementById('domainCount').value) || 0;
    const ipv4Count = parseInt(document.getElementById('ipv4Count').value) || 0;
    const phoneCount = parseInt(document.getElementById('phoneCount').value) || 0;
    
    // API-Call zur Verfügbarkeitsprüfung
    fetch(`/api/resources/check-availability?domain=${domainCount}&ipv4=${ipv4Count}&phone=${phoneCount}`)
        .then(response => response.json())
        .then(data => {
            // Update der Verfügbarkeitsanzeigen
            updateAvailabilityDisplay('domainsAvailable', data.domain_available, domainCount);
            updateAvailabilityDisplay('ipv4Available', data.ipv4_available, ipv4Count);
            updateAvailabilityDisplay('phoneAvailable', data.phone_available, phoneCount);
            
            // Gesamtstatus aktualisieren
            updateResourceStatus(data, domainCount, ipv4Count, phoneCount);
        })
        .catch(error => {
            console.error('Fehler bei Verfügbarkeitsprüfung:', error);
        });
}

// Hilfsfunktion zur Anzeige der Verfügbarkeit
function updateAvailabilityDisplay(elementId, available, requested) {
    const element = document.getElementById(elementId);
    const container = element.parentElement;
    
    // Verfügbarkeit mit Prozentanzeige
    const percent = Math.round((available / (available + requested + 50)) * 100);
    let statusHtml = `<strong>${available}</strong>`;
    
    if (requested > 0 && available < requested) {
        element.classList.remove('text-success', 'text-warning');
        element.classList.add('text-danger');
        statusHtml += ` <i class="bi bi-exclamation-triangle"></i>`;
        
        // Füge Warnung hinzu
        if (!container.querySelector('.availability-warning')) {
            const warning = document.createElement('div');
            warning.className = 'availability-warning text-danger small mt-1';
            warning.innerHTML = `<i class="bi bi-x-circle"></i> Nicht genügend Ressourcen verfügbar!`;
            container.appendChild(warning);
        }
    } else {
        // Entferne Warnung wenn vorhanden
        const warning = container.querySelector('.availability-warning');
        if (warning) warning.remove();
        
        if (available < 20) {
            element.classList.remove('text-success');
            element.classList.add('text-danger');
            statusHtml += ` <span class="badge bg-danger">Kritisch</span>`;
        } else if (available < 50) {
            element.classList.remove('text-success', 'text-danger');
            element.classList.add('text-warning');
            statusHtml += ` <span class="badge bg-warning text-dark">Niedrig</span>`;
        } else {
            element.classList.remove('text-danger', 'text-warning');
            element.classList.add('text-success');
            statusHtml += ` <span class="badge bg-success">OK</span>`;
        }
    }
    
    element.innerHTML = statusHtml;
    
    // Zeige Fortschrittsbalken
    updateResourceProgressBar(elementId.replace('Available', ''), available, requested);
}

// Fortschrittsbalken für Ressourcen
function updateResourceProgressBar(resourceType, available, requested) {
    const progressId = `${resourceType}Progress`;
    let progressBar = document.getElementById(progressId);
    
    // Erstelle Fortschrittsbalken wenn nicht vorhanden
    if (!progressBar) {
        const container = document.querySelector(`#${resourceType}Available`).parentElement.parentElement;
        const progressDiv = document.createElement('div');
        progressDiv.className = 'mt-2';
        progressDiv.innerHTML = `
            <div class="progress" style="height: 20px;" id="${progressId}">
                <div class="progress-bar bg-success" role="progressbar" style="width: 0%">
                    <span class="progress-text"></span>
                </div>
            </div>
        `;
        container.appendChild(progressDiv);
        progressBar = document.getElementById(progressId);
    }
    
    const total = available + requested;
    const availablePercent = total > 0 ? (available / total) * 100 : 100;
    const bar = progressBar.querySelector('.progress-bar');
    const text = progressBar.querySelector('.progress-text');
    
    // Setze Farbe basierend auf Verfügbarkeit
    bar.classList.remove('bg-success', 'bg-warning', 'bg-danger');
    if (requested > 0 && available < requested) {
        bar.classList.add('bg-danger');
    } else if (availablePercent < 30) {
        bar.classList.add('bg-warning');
    } else {
        bar.classList.add('bg-success');
    }
    
    // Animiere Fortschrittsbalken
    bar.style.width = `${availablePercent}%`;
    text.textContent = requested > 0 ? `${available} von ${total}` : `${available} verfügbar`;
}

// Gesamtstatus der Ressourcen-Verfügbarkeit
function updateResourceStatus(data, domainCount, ipv4Count, phoneCount) {
    const statusElement = document.getElementById('resourceStatus');
    let hasIssue = false;
    let message = '';
    
    if (domainCount > 0 && data.domain_available < domainCount) {
        hasIssue = true;
        message = '⚠️ Nicht genügend Domains';
    } else if (ipv4Count > 0 && data.ipv4_available < ipv4Count) {
        hasIssue = true;
        message = '⚠️ Nicht genügend IPv4-Adressen';
    } else if (phoneCount > 0 && data.phone_available < phoneCount) {
        hasIssue = true;
        message = '⚠️ Nicht genügend Telefonnummern';
    } else {
        message = '✅ Alle Ressourcen verfügbar';
    }
    
    statusElement.textContent = message;
    statusElement.className = hasIssue ? 'text-danger' : 'text-success';
}
</script>
{% endblock %}