{% extends "base.html" %}
{% block title %}Lizenzschlüssel - Admin{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-white mb-2">Lizenzschlüssel</h1>
    <p class="text-gray-400">Verwalte Lizenzschlüssel für Unternehmensregistrierungen</p>
</div>

{% if error %}
<div class="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded-lg mb-6">
    <strong>Error:</strong> {{ error }}
</div>
{% endif %}

<!-- Summary Cards -->
<div class="grid grid-cols-3 gap-4 mb-6">
    <div class="card-bg rounded-xl border p-6">
        <p class="text-gray-400 text-sm mb-1">Gesamt</p>
        <p class="text-3xl font-bold text-white">{{ total_keys }}</p>
    </div>
    <div class="card-bg rounded-xl border p-6">
        <p class="text-gray-400 text-sm mb-1">Verfügbar</p>
        <p class="text-3xl font-bold text-green-400">{{ available_keys }}</p>
    </div>
    <div class="card-bg rounded-xl border p-6">
        <p class="text-gray-400 text-sm mb-1">Verwendet</p>
        <p class="text-3xl font-bold text-gray-500">{{ used_keys }}</p>
    </div>
</div>

<!-- Generate Button -->
<button onclick="openGenerateModal()"
        class="px-6 py-3 rounded-lg font-medium transition-colors btn-primary mb-6 flex items-center gap-2">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
    </svg>
    Neuen Schlüssel generieren
</button>

<!-- License Keys Table -->
<div class="card-bg rounded-xl border overflow-hidden">
    <table class="w-full">
        <thead class="bg-brand-bg-dark border-b border-brand-bg-light">
            <tr>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase">Schlüssel</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase">Limits</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase">Status</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase">Erstellt</th>
                <th class="px-6 py-4 text-right text-xs font-medium text-gray-400 uppercase">Aktionen</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-brand-bg-light">
            {% for key in keys %}
            {% set key_offers = offers_by_key.get(key.id | string, []) %}
            <tr class="hover:bg-brand-bg/30">
                <td class="px-6 py-4">
                    <div class="font-mono text-white font-medium">{{ key.key }}</div>
                    {% if key.description %}
                    <div class="text-sm text-gray-400 mt-1">{{ key.description }}</div>
                    {% endif %}
                </td>
                <td class="px-6 py-4">
                    <div class="text-sm text-gray-300 space-y-1">
                        <div>👥 {{ key.max_employees }} Mitarbeiter</div>
                        <div>🪙 {% if key.daily_token_limit %}{{ key.daily_token_limit | int | string }} Tokens/Tag{% else %}Unbegrenzt{% endif %}</div>
                    </div>
                </td>
                <td class="px-6 py-4">
                    {% if key.used %}
                    <span class="px-3 py-1 bg-gray-600/30 text-gray-400 rounded-lg text-sm">Verwendet</span>
                    {% else %}
                    <span class="px-3 py-1 bg-green-600/30 text-green-400 rounded-lg text-sm">Verfügbar</span>
                    {% endif %}
                </td>
                <td class="px-6 py-4 text-sm text-gray-400">
                    {{ key.created_at.strftime('%d.%m.%Y') if key.created_at else '-' }}
                    {% if key_offers %}
                    <button onclick="toggleOffers('{{ key.id }}')"
                            class="ml-2 px-2 py-0.5 bg-brand-highlight/20 text-brand-highlight rounded text-xs font-medium hover:bg-brand-highlight/30 transition-colors">
                        📄 {{ key_offers | length }} Angebot{{ 'e' if key_offers | length != 1 else '' }}
                    </button>
                    {% endif %}
                </td>
                <td class="px-6 py-4 text-right">
                    <button onclick="editKey('{{ key.id }}', {{ key.max_employees }}, {{ key.daily_token_limit or '' }}, '{{ key.description or '' }}')"
                            class="text-blue-400 hover:text-blue-300 p-2 rounded transition-colors" title="Bearbeiten">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                    </button>
                    <button onclick="openOfferModal('{{ key.id }}', {{ key.max_employees }}, {{ key.daily_token_limit or 0 }}, '{{ key.description or '' }}')"
                            class="text-green-400 hover:text-green-300 p-2 rounded transition-colors" title="Angebot in MOCO erstellen">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </button>
                    {% if not key.used %}
                    <button onclick="copyKey('{{ key.key }}')"
                            class="text-brand-highlight hover:text-brand-highlight-dark p-2 rounded transition-colors" title="Kopieren">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                        </svg>
                    </button>
                    <button onclick="deleteKey('{{ key.id }}')"
                            class="text-red-400 hover:text-red-300 p-2 rounded transition-colors" title="Löschen">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                    </button>
                    {% endif %}
                </td>
            </tr>
            {% if key_offers %}
            <tr id="offers-{{ key.id }}" class="hidden bg-brand-bg/20">
                <td colspan="5" class="px-6 py-3">
                    <div class="space-y-2">
                        {% for offer in key_offers %}
                        <div class="flex items-center justify-between bg-brand-bg rounded-lg px-4 py-2.5 border border-brand-bg-light">
                            <div class="flex items-center gap-4 text-sm">
                                <a href="{{ offer.moco_offer_url }}" target="_blank"
                                   class="font-medium text-white hover:text-brand-highlight transition-colors">
                                    {{ offer.moco_offer_identifier or offer.offer_title or 'Angebot' }}
                                </a>
                                <span class="text-gray-400">{{ offer.company_name }}</span>
                                <span class="text-gray-400">
                                    {% if offer.price %}{{ "%.2f"|format(offer.price) }} €{% endif %}
                                    {% if offer.payment_frequency %} / {{ offer.payment_frequency }}{% endif %}
                                </span>
                                <span class="text-gray-500 text-xs">{{ offer.created_at.strftime('%d.%m.%Y') if offer.created_at else '' }}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                {% if offer.status == 'sent' %}
                                <span class="px-2 py-0.5 bg-green-600/30 text-green-400 rounded text-xs">Versendet</span>
                                {% else %}
                                <span class="px-2 py-0.5 bg-yellow-600/30 text-yellow-400 rounded text-xs">Entwurf</span>
                                <button onclick="openSendModal('{{ offer.id }}', '{{ offer.moco_offer_identifier or offer.offer_title }}', '{{ offer.company_name }}')"
                                        class="px-3 py-1 bg-brand-highlight text-brand-bg rounded text-xs font-semibold hover:bg-brand-highlight-dark transition-colors">
                                    Versenden
                                </button>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </td>
            </tr>
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Edit Modal -->
<div id="editModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="card-bg rounded-xl border p-8 max-w-md w-full mx-4">
        <h2 class="text-2xl font-bold text-white mb-6">Lizenzschlüssel bearbeiten</h2>

        <form id="editForm" class="space-y-4">
            <input type="hidden" id="edit_key_id" name="key_id">

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    Max. Mitarbeiter
                </label>
                <input type="number" id="edit_max_employees" name="max_employees" min="1" required
                       class="w-full px-4 py-3 bg-brand-bg border border-brand-bg-light rounded-lg text-white">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    Tägliches Token-Limit
                </label>
                <input type="number" id="edit_daily_token_limit" name="daily_token_limit" min="1000" placeholder="z.B. 100000"
                       class="w-full px-4 py-3 bg-brand-bg border border-brand-bg-light rounded-lg text-white">
                <p class="text-xs text-gray-500 mt-1">Leer lassen = unbegrenzt</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    Beschreibung (optional)
                </label>
                <input type="text" id="edit_description" name="description" placeholder="z.B. Starter Plan, Premium Plan..."
                       class="w-full px-4 py-3 bg-brand-bg border border-brand-bg-light rounded-lg text-white">
            </div>

            <div class="flex gap-3 pt-4">
                <button type="submit" class="flex-1 px-6 py-3 btn-primary rounded-lg font-medium">
                    Speichern
                </button>
                <button type="button" onclick="closeEditModal()"
                        class="px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors">
                    Abbrechen
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Offer Modal -->
<div id="offerModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="card-bg rounded-xl border p-8 max-w-lg w-full mx-4">
        <h2 class="text-2xl font-bold text-white mb-1">Angebot in MOCO erstellen</h2>
        <p class="text-gray-400 text-sm mb-6">Erstellt ein Angebot direkt in MOCO. Versand erfolgt manuell in MOCO.</p>

        <form id="offerForm" class="space-y-4">
            <input type="hidden" id="offer_key_id" name="key_id">
            <input type="hidden" id="offer_company_name_hidden" name="company_name">

            <!-- Plan Info -->
            <div id="offerCalcInfo" class="bg-brand-bg/60 rounded-lg p-4 text-sm space-y-1 border border-gray-600">
                <div class="flex justify-between"><span class="text-gray-400">Plan:</span><span id="offer_plan" class="text-white font-medium"></span></div>
                <div class="flex justify-between"><span class="text-gray-400">Mitarbeiter:</span><span id="offer_employees" class="text-white"></span></div>
                <div class="flex justify-between"><span class="text-gray-400">Token-Limit/Tag:</span><span id="offer_tokens" class="text-white"></span></div>
                <div class="flex justify-between"><span class="text-gray-400">Ca. Posts/Monat:</span><span id="offer_posts" class="text-white"></span></div>
                <div class="border-t border-gray-600 pt-2 mt-2 flex justify-between"><span class="text-gray-400">Empfohlener Preis:</span><span id="offer_suggested" class="text-brand-highlight font-bold"></span></div>
            </div>

            <!-- Company Dropdown -->
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Firma (MOCO)</label>
                <select id="offer_company_select" name="company_id" required
                        onchange="onCompanySelect(this)"
                        class="w-full px-4 py-3 bg-brand-bg border border-brand-bg-light rounded-lg text-white focus:border-brand-highlight focus:outline-none">
                    <option value="">Wird geladen…</option>
                </select>
            </div>

            <!-- Price -->
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Angebotspreis (€/Monat)</label>
                <input type="number" id="offer_price" name="price" step="0.01" min="0" required
                       class="w-full px-4 py-3 bg-brand-bg border border-brand-bg-light rounded-lg text-white focus:border-brand-highlight focus:outline-none">
            </div>

            <!-- Payment frequency -->
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Zahlungsweise</label>
                <div class="grid grid-cols-3 gap-2" id="freq-buttons">
                    <button type="button" onclick="selectFreq('monatlich')" id="freq-monatlich"
                            class="freq-btn active-freq px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors">
                        Monatlich
                    </button>
                    <button type="button" onclick="selectFreq('jährlich')" id="freq-jährlich"
                            class="freq-btn px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors">
                        Jährlich
                    </button>
                    <button type="button" onclick="selectFreq('einmalig')" id="freq-einmalig"
                            class="freq-btn px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors">
                        Einmalig
                    </button>
                </div>
                <input type="hidden" id="offer_payment_frequency" name="payment_frequency" value="monatlich">
            </div>

            <!-- Yearly total hint -->
            <div id="yearly-hint" class="hidden text-sm text-gray-400 bg-brand-bg/40 rounded p-3 border border-gray-700">
                Jährlicher Gesamtbetrag: <span id="yearly-total" class="text-white font-semibold"></span>
            </div>

            <div id="offer-status" class="hidden text-sm rounded-lg px-4 py-3"></div>

            <div class="flex gap-3 pt-2">
                <button type="submit" id="offerSubmitBtn"
                        class="flex-1 px-6 py-3 btn-primary rounded-lg font-medium flex items-center justify-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Angebot in MOCO erstellen
                </button>
                <button type="button" onclick="closeOfferModal()"
                        class="px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors">
                    Abbrechen
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Send Offer Confirmation Modal -->
<div id="sendModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="card-bg rounded-xl border p-8 max-w-md w-full mx-4">
        <h2 class="text-2xl font-bold text-white mb-1">Angebot versenden</h2>
        <p class="text-gray-400 text-sm mb-6">Das Angebot wird per E-Mail an die hinterlegten Empfänger in MOCO gesendet.</p>

        <div id="sendOfferInfo" class="bg-brand-bg/60 rounded-lg p-4 text-sm space-y-1 border border-gray-600 mb-6">
            <div class="flex justify-between"><span class="text-gray-400">Angebot:</span><span id="send_offer_title" class="text-white font-medium"></span></div>
            <div class="flex justify-between"><span class="text-gray-400">Firma:</span><span id="send_offer_company" class="text-white"></span></div>
        </div>

        <div id="send-status" class="hidden text-sm rounded-lg px-4 py-3 mb-4"></div>

        <div class="flex gap-3">
            <button id="sendConfirmBtn" onclick="confirmSendOffer()"
                    class="flex-1 px-6 py-3 btn-primary rounded-lg font-medium flex items-center justify-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                Jetzt versenden
            </button>
            <button type="button" onclick="closeSendModal()"
                    class="px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors">
                Abbrechen
            </button>
        </div>
    </div>
</div>

<!-- Generate Modal -->
<div id="generateModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="card-bg rounded-xl border p-8 max-w-md w-full mx-4">
        <h2 class="text-2xl font-bold text-white mb-6">Neuen Schlüssel generieren</h2>

        <form id="generateForm" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    Max. Mitarbeiter
                </label>
                <input type="number" name="max_employees" min="1" value="5" required
                       class="w-full px-4 py-3 bg-brand-bg border border-brand-bg-light rounded-lg text-white">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    Tägliches Token-Limit
                </label>
                <input type="number" name="daily_token_limit" min="1000" value="100000"
                       class="w-full px-4 py-3 bg-brand-bg border border-brand-bg-light rounded-lg text-white">
                <p class="text-xs text-gray-500 mt-1">Leer lassen = unbegrenzt</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    Beschreibung (optional)
                </label>
                <input type="text" name="description" placeholder="z.B. Starter Plan, Premium Plan..."
                       class="w-full px-4 py-3 bg-brand-bg border border-brand-bg-light rounded-lg text-white">
            </div>

            <div class="flex gap-3 pt-4">
                <button type="submit" class="flex-1 px-6 py-3 btn-primary rounded-lg font-medium">
                    Generieren
                </button>
                <button type="button" onclick="closeGenerateModal()"
                        class="px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors">
                    Abbrechen
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block head %}
<style>
.freq-btn { background-color: #3d4848; border-color: #5a6868; color: #9ca3af; }
.freq-btn:hover { background-color: #4a5858; color: #e5e7eb; }
.freq-btn.active-freq { background-color: #ffc700; border-color: #ffc700; color: #2d3838; font-weight: 700; }
</style>
{% endblock %}

{% block scripts %}
<script>
function openGenerateModal() {
    document.getElementById('generateModal').classList.remove('hidden');
}

function closeGenerateModal() {
    document.getElementById('generateModal').classList.add('hidden');
    document.getElementById('generateForm').reset();
}

function editKey(keyId, maxEmployees, dailyTokenLimit, description) {
    document.getElementById('edit_key_id').value = keyId;
    document.getElementById('edit_max_employees').value = maxEmployees;
    document.getElementById('edit_daily_token_limit').value = dailyTokenLimit || '';
    document.getElementById('edit_description').value = description;
    document.getElementById('editModal').classList.remove('hidden');
}

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
    document.getElementById('editForm').reset();
}

document.getElementById('editForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const keyId = formData.get('key_id');

    try {
        const response = await fetch(`/admin/api/license-keys/${keyId}`, {
            method: 'PATCH',
            body: formData
        });

        if (!response.ok) throw new Error('Update failed');

        alert('Lizenzschlüssel aktualisiert!');
        location.reload();
    } catch (error) {
        alert('Fehler beim Aktualisieren: ' + error.message);
    }
});

document.getElementById('generateForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);

    try {
        const response = await fetch('/admin/api/license-keys/generate', {
            method: 'POST',
            body: formData
        });

        if (!response.ok) throw new Error('Generation failed');

        const data = await response.json();
        alert(`Schlüssel generiert: ${data.key.key}\n\nBitte kopiere diesen Schlüssel jetzt!`);
        location.reload();
    } catch (error) {
        alert('Fehler beim Generieren: ' + error.message);
    }
});

function copyKey(key) {
    navigator.clipboard.writeText(key);
    alert('Schlüssel kopiert: ' + key);
}

async function deleteKey(keyId) {
    if (!confirm('Schlüssel wirklich löschen?')) return;

    try {
        const response = await fetch(`/admin/api/license-keys/${keyId}`, {
            method: 'DELETE'
        });

        if (!response.ok) throw new Error('Delete failed');
        location.reload();
    } catch (error) {
        alert('Fehler beim Löschen: ' + error.message);
    }
}

// ── Offer Modal (MOCO) ─────────────────────────────────────────────────────
const AVG_TOKENS_PER_POST = 50000;
const API_COST_PER_1K_EUR = 0.003;
const SERVER_SHARE_EUR = 1.60;

function calcSuggestedPrice(dailyTokenLimit) {
    if (!dailyTokenLimit) return null;
    const monthlyTokens = dailyTokenLimit * 30;
    const apiCostEur = (monthlyTokens / 1000) * API_COST_PER_1K_EUR;
    const raw = apiCostEur * 2.5 + SERVER_SHARE_EUR * 2 + 5;
    return Math.ceil(raw / 5) * 5;
}

function fmtNum(n) { return n.toLocaleString('de-DE'); }

function openOfferModal(keyId, maxEmployees, dailyTokenLimit, description) {
    document.getElementById('offer_key_id').value = keyId;
    document.getElementById('offer_plan').textContent = description || 'Standard Plan';
    document.getElementById('offer_employees').textContent = maxEmployees + ' Nutzer';

    if (dailyTokenLimit) {
        const postsPerMonth = Math.floor(dailyTokenLimit * 30 / AVG_TOKENS_PER_POST);
        document.getElementById('offer_tokens').textContent = fmtNum(dailyTokenLimit) + ' Tokens/Tag';
        document.getElementById('offer_posts').textContent = '~' + postsPerMonth + ' Posts';
        const suggested = calcSuggestedPrice(dailyTokenLimit);
        document.getElementById('offer_suggested').textContent = suggested + ' €';
        document.getElementById('offer_price').value = suggested;
    } else {
        document.getElementById('offer_tokens').textContent = 'Unbegrenzt';
        document.getElementById('offer_posts').textContent = '–';
        document.getElementById('offer_suggested').textContent = '–';
    }

    // Reset company select
    const sel = document.getElementById('offer_company_select');
    sel.innerHTML = '<option value="">Wird geladen…</option>';
    document.getElementById('offer_company_name_hidden').value = '';
    loadCompanies();

    selectFreq('monatlich');
    document.getElementById('offer-status').classList.add('hidden');
    document.getElementById('offerModal').classList.remove('hidden');
}

function closeOfferModal() {
    document.getElementById('offerModal').classList.add('hidden');
    document.getElementById('offerForm').reset();
}

function selectFreq(freq) {
    document.getElementById('offer_payment_frequency').value = freq;
    ['monatlich', 'jährlich', 'einmalig'].forEach(f => {
        document.getElementById('freq-' + f).classList.toggle('active-freq', f === freq);
    });
    const price = parseFloat(document.getElementById('offer_price').value) || 0;
    const hint = document.getElementById('yearly-hint');
    if (freq === 'jährlich' && price > 0) {
        document.getElementById('yearly-total').textContent = (price * 12).toLocaleString('de-DE', {minimumFractionDigits: 2}) + ' €';
        hint.classList.remove('hidden');
    } else {
        hint.classList.add('hidden');
    }
}

document.getElementById('offer_price').addEventListener('input', () => {
    if (document.getElementById('offer_payment_frequency').value === 'jährlich') selectFreq('jährlich');
});

// ── Company select ─────────────────────────────────────────────────────────
async function loadCompanies() {
    const sel = document.getElementById('offer_company_select');
    try {
        const resp = await fetch('/admin/api/moco/companies');
        if (!resp.ok) throw new Error('Fehler beim Laden');
        const companies = await resp.json();
        sel.innerHTML = '<option value="">Firma auswählen…</option>';
        companies.forEach(c => {
            const opt = document.createElement('option');
            opt.value = c.id;
            opt.textContent = c.name;
            sel.appendChild(opt);
        });
    } catch (e) {
        sel.innerHTML = '<option value="">Fehler beim Laden der Firmen</option>';
        console.error('Company load error', e);
    }
}

function onCompanySelect(sel) {
    const name = sel.options[sel.selectedIndex]?.text || '';
    document.getElementById('offer_company_name_hidden').value = sel.value ? name : '';
}

document.getElementById('offerForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const keyId = formData.get('key_id');
    const companyId = formData.get('company_id');
    const statusEl = document.getElementById('offer-status');
    const submitBtn = document.getElementById('offerSubmitBtn');

    if (!companyId) {
        statusEl.className = 'text-sm rounded-lg px-4 py-3 bg-red-900/40 border border-red-600 text-red-300';
        statusEl.textContent = 'Bitte eine Firma auswählen.';
        statusEl.classList.remove('hidden');
        return;
    }

    submitBtn.disabled = true;
    submitBtn.textContent = 'Wird erstellt…';
    statusEl.classList.add('hidden');

    try {
        const response = await fetch(`/admin/api/license-keys/${keyId}/create-offer`, {
            method: 'POST',
            body: formData
        });

        const data = await response.json();
        if (!response.ok) throw new Error(data.detail || 'Fehler beim Erstellen');

        statusEl.className = 'text-sm rounded-lg px-4 py-3 bg-green-900/40 border border-green-600 text-green-300';
        statusEl.innerHTML = 'Angebot erfolgreich erstellt! '
            + (data.offer_url ? `<a href="${data.offer_url}" target="_blank" class="underline font-semibold text-green-300 hover:text-white">In MOCO öffnen →</a>` : '');
        statusEl.classList.remove('hidden');
        submitBtn.textContent = '✓ Erstellt';
        // Reset button after 4 seconds so another offer can be created
        setTimeout(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Angebot in MOCO erstellen';
            location.reload();
        }, 3000);
    } catch (error) {
        statusEl.className = 'text-sm rounded-lg px-4 py-3 bg-red-900/40 border border-red-600 text-red-300';
        statusEl.textContent = 'Fehler: ' + error.message;
        statusEl.classList.remove('hidden');
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Angebot in MOCO erstellen';
    }
});

// ── Offer sub-rows toggle ───────────────────────────────────────────────────
function toggleOffers(keyId) {
    const row = document.getElementById('offers-' + keyId);
    if (!row) return;
    row.classList.toggle('hidden');
}

// ── Send Offer Modal ────────────────────────────────────────────────────────
let currentSendOfferId = null;

function openSendModal(offerId, title, company) {
    currentSendOfferId = offerId;
    document.getElementById('send_offer_title').textContent = title || 'Angebot';
    document.getElementById('send_offer_company').textContent = company || '–';
    const statusEl = document.getElementById('send-status');
    statusEl.classList.add('hidden');
    statusEl.textContent = '';
    const btn = document.getElementById('sendConfirmBtn');
    btn.disabled = false;
    btn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> Jetzt versenden';
    document.getElementById('sendModal').classList.remove('hidden');
}

function closeSendModal() {
    document.getElementById('sendModal').classList.add('hidden');
    currentSendOfferId = null;
}

async function confirmSendOffer() {
    if (!currentSendOfferId) return;
    const statusEl = document.getElementById('send-status');
    const btn = document.getElementById('sendConfirmBtn');

    btn.disabled = true;
    btn.textContent = 'Wird versendet…';
    statusEl.classList.add('hidden');

    try {
        const response = await fetch(`/admin/api/license-key-offers/${currentSendOfferId}/send`, {
            method: 'POST'
        });
        const data = await response.json();
        if (!response.ok) throw new Error(data.detail || 'Fehler beim Versenden');

        statusEl.className = 'text-sm rounded-lg px-4 py-3 bg-green-900/40 border border-green-600 text-green-300';
        statusEl.textContent = 'Angebot erfolgreich versendet!';
        statusEl.classList.remove('hidden');
        btn.textContent = '✓ Versendet';
        setTimeout(() => {
            closeSendModal();
            location.reload();
        }, 2000);
    } catch (error) {
        statusEl.className = 'text-sm rounded-lg px-4 py-3 bg-red-900/40 border border-red-600 text-red-300';
        statusEl.textContent = 'Fehler: ' + error.message;
        statusEl.classList.remove('hidden');
        btn.disabled = false;
        btn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> Erneut versuchen';
    }
}
</script>
{% endblock %}