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

{% block title %}Unternehmensstrategie{% endblock %}

{% block content %}
<div class="text-center mb-8">
    <h1 class="text-2xl font-bold text-white mb-2">Unternehmensstrategie</h1>
    <p class="text-gray-400">Definiere die Content-Strategie für dein Unternehmen. Diese Richtlinien werden bei jedem Post berücksichtigt.</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 %}

<form method="POST" action="/onboarding/strategy" class="space-y-8">
    <!-- Mission & Vision -->
    <div class="space-y-4">
        <h3 class="text-lg font-medium text-white">Mission & Vision</h3>

        <div>
            <label for="mission" class="block text-sm font-medium text-gray-300 mb-1">
                Mission
            </label>
            <textarea id="mission" name="mission" rows="2"
                      class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                      placeholder="Was ist der Zweck deines Unternehmens?">{{ strategy.mission if strategy else '' }}</textarea>
        </div>

        <div>
            <label for="vision" class="block text-sm font-medium text-gray-300 mb-1">
                Vision
            </label>
            <textarea id="vision" name="vision" rows="2"
                      class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                      placeholder="Wo soll dein Unternehmen in 5-10 Jahren stehen?">{{ strategy.vision if strategy else '' }}</textarea>
        </div>
    </div>

    <!-- Brand Voice -->
    <div class="space-y-4">
        <h3 class="text-lg font-medium text-white">Brand Voice & Tonalität</h3>

        <div>
            <label for="brand_voice" class="block text-sm font-medium text-gray-300 mb-1">
                Brand Voice
            </label>
            <textarea id="brand_voice" name="brand_voice" rows="2"
                      class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                      placeholder="Wie soll dein Unternehmen klingen? z.B. 'professionell aber nahbar', 'innovativ und zukunftsorientiert'">{{ strategy.brand_voice if strategy else '' }}</textarea>
        </div>

        <div>
            <label for="tone_guidelines" class="block text-sm font-medium text-gray-300 mb-1">
                Tonalitäts-Richtlinien
            </label>
            <textarea id="tone_guidelines" name="tone_guidelines" rows="3"
                      class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                      placeholder="Spezifische Anweisungen zur Tonalität, z.B. 'Wir duzen unsere Zielgruppe', 'Wir nutzen keine Anglizismen'">{{ strategy.tone_guidelines if strategy else '' }}</textarea>
        </div>
    </div>

    <!-- Content Pillars -->
    <div class="space-y-4">
        <h3 class="text-lg font-medium text-white">Content Pillars</h3>
        <p class="text-sm text-gray-400">Die Hauptthemen, über die dein Unternehmen kommuniziert (max. 5).</p>

        <div id="content-pillars" class="space-y-2">
            {% if strategy and strategy.content_pillars %}
                {% for pillar in strategy.content_pillars %}
                <div class="flex gap-2 pillar-row">
                    <input type="text" name="content_pillar" value="{{ pillar }}"
                           class="flex-1 input-bg border rounded-lg px-4 py-2 text-white"
                           placeholder="z.B. 'Digitale Transformation'">
                    <button type="button" onclick="removePillar(this)"
                            class="text-gray-500 hover:text-red-400 px-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="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
                {% endfor %}
            {% else %}
                <div class="flex gap-2 pillar-row">
                    <input type="text" name="content_pillar"
                           class="flex-1 input-bg border rounded-lg px-4 py-2 text-white"
                           placeholder="z.B. 'Digitale Transformation'">
                    <button type="button" onclick="removePillar(this)"
                            class="text-gray-500 hover:text-red-400 px-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="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            {% endif %}
        </div>

        <button type="button" onclick="addPillar()"
                class="text-sm text-brand-highlight hover:underline flex items-center gap-1">
            <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>
            Weiteren Pillar hinzufügen
        </button>
    </div>

    <!-- Target Audience -->
    <div>
        <label for="target_audience" class="block text-sm font-medium text-gray-300 mb-1">
            Zielgruppe
        </label>
        <textarea id="target_audience" name="target_audience" rows="2"
                  class="w-full input-bg border rounded-lg px-4 py-3 text-white"
                  placeholder="Wer ist eure Zielgruppe auf LinkedIn? z.B. 'B2B Entscheider in der DACH-Region, CEOs und CTOs von mittelstaendischen Unternehmen'">{{ strategy.target_audience if strategy else '' }}</textarea>
    </div>

    <!-- Do's and Don'ts -->
    <div class="grid md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-gray-300 mb-1">
                Do's (empfohlen)
            </label>
            <div id="dos-list" class="space-y-2 mb-2">
                {% if strategy and strategy.dos %}
                    {% for item in strategy.dos %}
                    <div class="flex gap-2 do-row">
                        <input type="text" name="do_item" value="{{ item }}"
                               class="flex-1 input-bg border rounded-lg px-3 py-2 text-white text-sm"
                               placeholder="z.B. 'Aktuelle Studien zitieren'">
                        <button type="button" onclick="removeItem(this)"
                                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>
                    {% endfor %}
                {% else %}
                    <div class="flex gap-2 do-row">
                        <input type="text" name="do_item"
                               class="flex-1 input-bg border rounded-lg px-3 py-2 text-white text-sm"
                               placeholder="z.B. 'Aktuelle Studien zitieren'">
                        <button type="button" onclick="removeItem(this)"
                                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>
                {% endif %}
            </div>
            <button type="button" onclick="addDo()"
                    class="text-xs text-brand-highlight hover:underline">+ Hinzufügen</button>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-300 mb-1">
                Don'ts (vermeiden)
            </label>
            <div id="donts-list" class="space-y-2 mb-2">
                {% if strategy and strategy.donts %}
                    {% for item in strategy.donts %}
                    <div class="flex gap-2 dont-row">
                        <input type="text" name="dont_item" value="{{ item }}"
                               class="flex-1 input-bg border rounded-lg px-3 py-2 text-white text-sm"
                               placeholder="z.B. 'Keine politischen Themen'">
                        <button type="button" onclick="removeItem(this)"
                                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>
                    {% endfor %}
                {% else %}
                    <div class="flex gap-2 dont-row">
                        <input type="text" name="dont_item"
                               class="flex-1 input-bg border rounded-lg px-3 py-2 text-white text-sm"
                               placeholder="z.B. 'Keine politischen Themen'">
                        <button type="button" onclick="removeItem(this)"
                                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>
                {% endif %}
            </div>
            <button type="button" onclick="addDont()"
                    class="text-xs text-brand-highlight hover:underline">+ Hinzufügen</button>
        </div>
    </div>

    <div class="flex justify-between pt-6 border-t border-gray-600">
        <a href="/onboarding/company" 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">
            Strategie speichern
        </button>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script>
    function addPillar() {
        const container = document.getElementById('content-pillars');
        if (container.querySelectorAll('.pillar-row').length >= 5) {
            alert('Maximal 5 Content Pillars erlaubt');
            return;
        }
        const row = document.createElement('div');
        row.className = 'flex gap-2 pillar-row';
        row.innerHTML = `
            <input type="text" name="content_pillar"
                   class="flex-1 input-bg border rounded-lg px-4 py-2 text-white"
                   placeholder="z.B. 'Digitale Transformation'">
            <button type="button" onclick="removePillar(this)"
                    class="text-gray-500 hover:text-red-400 px-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="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        `;
        container.appendChild(row);
    }

    function removePillar(btn) {
        const container = document.getElementById('content-pillars');
        if (container.querySelectorAll('.pillar-row').length > 1) {
            btn.closest('.pillar-row').remove();
        }
    }

    function addDo() {
        const container = document.getElementById('dos-list');
        const row = document.createElement('div');
        row.className = 'flex gap-2 do-row';
        row.innerHTML = `
            <input type="text" name="do_item"
                   class="flex-1 input-bg border rounded-lg px-3 py-2 text-white text-sm"
                   placeholder="z.B. 'Aktuelle Studien zitieren'">
            <button type="button" onclick="removeItem(this)"
                    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>
        `;
        container.appendChild(row);
    }

    function addDont() {
        const container = document.getElementById('donts-list');
        const row = document.createElement('div');
        row.className = 'flex gap-2 dont-row';
        row.innerHTML = `
            <input type="text" name="dont_item"
                   class="flex-1 input-bg border rounded-lg px-3 py-2 text-white text-sm"
                   placeholder="z.B. 'Keine politischen Themen'">
            <button type="button" onclick="removeItem(this)"
                    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>
        `;
        container.appendChild(row);
    }

    function removeItem(btn) {
        btn.closest('div').remove();
    }
</script>
{% endblock %}