{% extends "onboarding/base.html" %}

{% block title %}Post-Typen{% endblock %}

{% block content %}
<div class="text-center mb-8">
    <h1 class="text-2xl font-bold text-white mb-2">Post-Typen definieren</h1>
    <p class="text-gray-400">Definiere die verschiedenen Arten von Posts, die du schreibst.</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">
    {{ error }}
</div>
{% endif %}

<!-- Predefined Post Types -->
<div class="mb-8">
    <h3 class="text-lg font-medium text-white mb-4">Vordefinierte Post-Typen</h3>
    <p class="text-sm text-gray-400 mb-4">Wähle die Post-Typen aus, die zu deinem Content passen:</p>

    <div class="grid md:grid-cols-2 gap-4" id="predefined-types">
        <label class="flex items-start gap-3 p-4 border border-gray-600 rounded-lg cursor-pointer hover:border-brand-highlight transition-colors">
            <input type="checkbox" name="predefined_type" value="thought_leadership" class="mt-1">
            <div>
                <span class="text-white font-medium">Thought Leadership</span>
                <p class="text-sm text-gray-400">Brancheninsights, Meinungen, Trends</p>
            </div>
        </label>

        <label class="flex items-start gap-3 p-4 border border-gray-600 rounded-lg cursor-pointer hover:border-brand-highlight transition-colors">
            <input type="checkbox" name="predefined_type" value="personal_story" class="mt-1">
            <div>
                <span class="text-white font-medium">Personal Story</span>
                <p class="text-sm text-gray-400">Persönliche Erfahrungen, Learnings</p>
            </div>
        </label>

        <label class="flex items-start gap-3 p-4 border border-gray-600 rounded-lg cursor-pointer hover:border-brand-highlight transition-colors">
            <input type="checkbox" name="predefined_type" value="how_to" class="mt-1">
            <div>
                <span class="text-white font-medium">How-To / Tutorial</span>
                <p class="text-sm text-gray-400">Anleitungen, Tipps, Best Practices</p>
            </div>
        </label>

        <label class="flex items-start gap-3 p-4 border border-gray-600 rounded-lg cursor-pointer hover:border-brand-highlight transition-colors">
            <input type="checkbox" name="predefined_type" value="news_commentary" class="mt-1">
            <div>
                <span class="text-white font-medium">News & Kommentar</span>
                <p class="text-sm text-gray-400">Aktuelle Nachrichten mit Einordnung</p>
            </div>
        </label>

        <label class="flex items-start gap-3 p-4 border border-gray-600 rounded-lg cursor-pointer hover:border-brand-highlight transition-colors">
            <input type="checkbox" name="predefined_type" value="case_study" class="mt-1">
            <div>
                <span class="text-white font-medium">Case Study</span>
                <p class="text-sm text-gray-400">Erfolgsgeschichten, Projektberichte</p>
            </div>
        </label>

        <label class="flex items-start gap-3 p-4 border border-gray-600 rounded-lg cursor-pointer hover:border-brand-highlight transition-colors">
            <input type="checkbox" name="predefined_type" value="engagement" class="mt-1">
            <div>
                <span class="text-white font-medium">Engagement Post</span>
                <p class="text-sm text-gray-400">Fragen, Umfragen, Diskussionen</p>
            </div>
        </label>
    </div>
</div>

<!-- Custom Post Types -->
<div class="mb-8">
    <h3 class="text-lg font-medium text-white mb-4">Eigene Post-Typen</h3>

    <div id="custom-types-list" class="space-y-3 mb-4">
        <!-- Custom types will be added here -->
    </div>

    <button type="button" id="add-custom-type-btn"
            class="btn-secondary py-2 px-4 rounded-lg transition-colors flex items-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="M12 4v16m8-8H4"/>
        </svg>
        Eigenen Typ hinzufügen
    </button>
</div>

<!-- Navigation -->
<form method="POST" action="/onboarding/post-types" id="post-types-form">
    <input type="hidden" name="post_types_json" id="post-types-json">

    <div class="flex justify-between pt-6 border-t border-gray-600">
        <a href="/onboarding/posts" class="btn-secondary font-medium py-3 px-6 rounded-lg transition-colors">
            Zurück
        </a>
        <button type="submit" class="btn-primary font-medium py-3 px-8 rounded-lg transition-colors">
            Weiter
        </button>
    </div>
</form>

<!-- Custom Type Modal -->
<div id="custom-type-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="card-bg rounded-xl p-6 w-full max-w-md mx-4">
        <h3 class="text-lg font-medium text-white mb-4">Eigenen Post-Typ erstellen</h3>

        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-1">Name *</label>
                <input type="text" id="custom-type-name"
                       class="w-full input-bg border rounded-lg px-4 py-2 text-white"
                       placeholder="z.B. Produktvorstellung">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-1">Beschreibung</label>
                <textarea id="custom-type-description" rows="2"
                          class="w-full input-bg border rounded-lg px-4 py-2 text-white"
                          placeholder="Kurze Beschreibung..."></textarea>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-1">Keywords (kommagetrennt)</label>
                <input type="text" id="custom-type-keywords"
                       class="w-full input-bg border rounded-lg px-4 py-2 text-white"
                       placeholder="produkt, launch, neu">
            </div>
        </div>

        <div class="flex justify-end gap-3 mt-6">
            <button type="button" onclick="closeCustomTypeModal()"
                    class="btn-secondary py-2 px-4 rounded-lg">Abbrechen</button>
            <button type="button" onclick="addCustomType()"
                    class="btn-primary py-2 px-4 rounded-lg">Hinzufügen</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const customTypes = [];

    // Predefined types mapping
    const predefinedTypes = {
        'thought_leadership': {name: 'Thought Leadership', description: 'Brancheninsights, Meinungen, Trends', keywords: ['insight', 'trend', 'meinung']},
        'personal_story': {name: 'Personal Story', description: 'Persönliche Erfahrungen, Learnings', keywords: ['story', 'erfahrung', 'learning']},
        'how_to': {name: 'How-To / Tutorial', description: 'Anleitungen, Tipps, Best Practices', keywords: ['howto', 'tipps', 'anleitung']},
        'news_commentary': {name: 'News & Kommentar', description: 'Aktuelle Nachrichten mit Einordnung', keywords: ['news', 'aktuell', 'kommentar']},
        'case_study': {name: 'Case Study', description: 'Erfolgsgeschichten, Projektberichte', keywords: ['case', 'projekt', 'erfolg']},
        'engagement': {name: 'Engagement Post', description: 'Fragen, Umfragen, Diskussionen', keywords: ['frage', 'umfrage', 'diskussion']}
    };

    document.getElementById('add-custom-type-btn').addEventListener('click', function() {
        document.getElementById('custom-type-modal').classList.remove('hidden');
    });

    function closeCustomTypeModal() {
        document.getElementById('custom-type-modal').classList.add('hidden');
        document.getElementById('custom-type-name').value = '';
        document.getElementById('custom-type-description').value = '';
        document.getElementById('custom-type-keywords').value = '';
    }

    function addCustomType() {
        const name = document.getElementById('custom-type-name').value.trim();
        const description = document.getElementById('custom-type-description').value.trim();
        const keywords = document.getElementById('custom-type-keywords').value.split(',').map(k => k.trim()).filter(k => k);

        if (!name) {
            alert('Name ist erforderlich');
            return;
        }

        customTypes.push({name, description, keywords, custom: true});
        renderCustomTypes();
        closeCustomTypeModal();
    }

    function removeCustomType(index) {
        customTypes.splice(index, 1);
        renderCustomTypes();
    }

    function renderCustomTypes() {
        const container = document.getElementById('custom-types-list');
        container.innerHTML = customTypes.map((type, index) => `
            <div class="flex items-center justify-between p-3 bg-brand-bg border border-gray-600 rounded-lg">
                <div>
                    <span class="text-white font-medium">${type.name}</span>
                    ${type.description ? `<p class="text-sm text-gray-400">${type.description}</p>` : ''}
                </div>
                <button type="button" onclick="removeCustomType(${index})" class="text-gray-500 hover:text-red-400">
                    <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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        `).join('');
    }

    // Form submission
    document.getElementById('post-types-form').addEventListener('submit', function(e) {
        // Collect selected predefined types
        const selected = Array.from(document.querySelectorAll('input[name="predefined_type"]:checked'))
            .map(cb => {
                const def = predefinedTypes[cb.value];
                return {
                    name: def.name,
                    description: def.description,
                    identifying_keywords: def.keywords,
                    custom: false
                };
            });

        // Add custom types
        const allTypes = [...selected, ...customTypes.map(t => ({
            name: t.name,
            description: t.description,
            identifying_keywords: t.keywords,
            custom: true
        }))];

        document.getElementById('post-types-json').value = JSON.stringify(allTypes);
    });
</script>
{% endblock %}