{% extends "company_base.html" %}

{% block title %}Inhalte verwalten - {{ session.company_name }}{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <h1 class="text-2xl font-bold text-white mb-6">Inhalte verwalten</h1>

    <!-- Employee Selector -->
    <div class="card-bg border rounded-xl p-6 mb-8">
        <label class="block text-sm font-medium text-gray-300 mb-3">Mitarbeiter auswählen</label>
        {% if active_employees %}
        <div class="flex flex-wrap gap-3">
            {% for emp in active_employees %}
            <a href="/company/manage?employee_id={{ emp.id }}"
               class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if selected_employee and selected_employee.id == emp.id %}bg-brand-highlight text-brand-bg-dark{% else %}bg-brand-bg hover:bg-brand-bg-light text-white{% endif %}">
                <div class="w-8 h-8 rounded-full {% if selected_employee and selected_employee.id == emp.id %}bg-brand-bg-dark/20{% else %}bg-brand-highlight/20{% endif %} flex items-center justify-center">
                    {% if emp.profile_picture or emp.linkedin_picture %}
                    <img src="{{ emp.profile_picture or emp.linkedin_picture }}" alt="" class="w-8 h-8 rounded-full">
                    {% else %}
                    <span class="{% if selected_employee and selected_employee.id == emp.id %}text-brand-bg-dark{% else %}text-brand-highlight{% endif %} text-sm font-medium">{{ (emp.display_name or emp.email)[0] | upper }}</span>
                    {% endif %}
                </div>
                <span class="font-medium">{{ emp.display_name or emp.email }}</span>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-8">
            <div class="w-16 h-16 bg-gray-600/30 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <p class="text-gray-400 mb-4">Keine aktiven Mitarbeiter vorhanden</p>
            <p class="text-gray-500 text-sm">Mitarbeiter erscheinen hier, sobald sie ihr Onboarding abgeschlossen haben.</p>
            <a href="/company/accounts" class="inline-block mt-4 text-brand-highlight hover:underline">Mitarbeiter einladen</a>
        </div>
        {% endif %}
    </div>

    {% if selected_employee %}
    <!-- Selected Employee Info -->
    <div class="card-bg border rounded-xl p-6 mb-8">
        <div class="flex items-center gap-4">
            <div class="w-16 h-16 rounded-full bg-brand-highlight/20 flex items-center justify-center overflow-hidden">
                {% if selected_employee.profile_picture or selected_employee.linkedin_picture %}
                <img src="{{ selected_employee.profile_picture or selected_employee.linkedin_picture }}" alt="" class="w-16 h-16 rounded-full">
                {% else %}
                <span class="text-brand-highlight text-2xl font-medium">{{ (selected_employee.display_name or selected_employee.email)[0] | upper }}</span>
                {% endif %}
            </div>
            <div>
                <h2 class="text-xl font-bold text-white">{{ selected_employee.display_name or selected_employee.email }}</h2>
                <p class="text-gray-400">{{ selected_employee.email }}</p>
            </div>
        </div>
    </div>

    <!-- Quick Actions (always shown, each gated by its own permission) -->
    <div class="card-bg border rounded-xl p-6 mb-8">
        <h3 class="text-lg font-semibold text-white mb-4">Aktionen</h3>
        <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4">
            {% if not selected_permissions or selected_permissions.can_do_research %}
            <a href="/company/manage/research?employee_id={{ selected_employee.id }}" class="flex items-center gap-3 p-4 bg-brand-bg rounded-lg hover:bg-brand-bg-light transition-colors">
                <div class="w-10 h-10 bg-brand-highlight/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>
                <div>
                    <p class="text-white font-medium">Recherche</p>
                    <p class="text-gray-400 text-sm">Themen recherchieren</p>
                </div>
            </a>
            {% endif %}
            {% if not selected_permissions or selected_permissions.can_create_posts %}
            <a href="/company/manage/create?employee_id={{ selected_employee.id }}" class="flex items-center gap-3 p-4 bg-brand-bg rounded-lg hover:bg-brand-bg-light transition-colors">
                <div class="w-10 h-10 bg-brand-highlight/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                </div>
                <div>
                    <p class="text-white font-medium">Neuer Post</p>
                    <p class="text-gray-400 text-sm">KI-generiert erstellen</p>
                </div>
            </a>
            <a href="/company/manage/chat-create?employee_id={{ selected_employee.id }}" class="flex items-center gap-3 p-4 bg-brand-bg rounded-lg hover:bg-brand-bg-light transition-colors">
                <div class="w-10 h-10 bg-brand-highlight/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                </div>
                <div>
                    <p class="text-white font-medium">Chat erstellen</p>
                    <p class="text-gray-400 text-sm">Im Dialog erstellen</p>
                </div>
            </a>
            {% endif %}
            {% if not selected_permissions or selected_permissions.can_manage_post_types %}
            <a href="/company/manage/post-types?employee_id={{ selected_employee.id }}" class="flex items-center gap-3 p-4 bg-brand-bg rounded-lg hover:bg-brand-bg-light transition-colors">
                <div class="w-10 h-10 bg-brand-highlight/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                </div>
                <div>
                    <p class="text-white font-medium">Post-Typen</p>
                    <p class="text-gray-400 text-sm">Kategorien verwalten</p>
                </div>
            </a>
            {% endif %}
            {% if not selected_permissions or selected_permissions.can_view_posts %}
            <a href="/company/manage/posts?employee_id={{ selected_employee.id }}" class="flex items-center gap-3 p-4 bg-brand-bg rounded-lg hover:bg-brand-bg-light transition-colors">
                <div class="w-10 h-10 bg-brand-highlight/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                </div>
                <div>
                    <p class="text-white font-medium">Alle Posts</p>
                    <p class="text-gray-400 text-sm">Posts anzeigen</p>
                </div>
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Stats + Recent Posts (only if can_view_posts) -->
    {% if selected_permissions and not selected_permissions.can_view_posts %}
    <div class="card-bg border border-red-500/30 rounded-xl p-6 mb-8 flex items-center gap-4">
        <div class="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
            <svg class="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
        </div>
        <div>
            <p class="text-white font-medium">Posts nicht zugänglich</p>
            <p class="text-gray-400 text-sm">{{ selected_employee.display_name or selected_employee.email }} hat den Zugriff auf Posts deaktiviert.</p>
        </div>
    </div>
    {% else %}

    <!-- Stats -->
    <div class="grid md:grid-cols-3 gap-6 mb-8">
        <div class="card-bg border rounded-xl p-6">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-brand-highlight/20 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                <div>
                    <p class="text-3xl font-bold text-white">{{ employee_posts | length }}</p>
                    <p class="text-gray-400 text-sm">Posts gesamt</p>
                </div>
            </div>
        </div>
        <div class="card-bg border rounded-xl p-6">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div>
                    <p class="text-3xl font-bold text-white">{{ pending_posts }}</p>
                    <p class="text-gray-400 text-sm">Ausstehend</p>
                </div>
            </div>
        </div>
        <div class="card-bg border rounded-xl p-6">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-400" 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>
                </div>
                <div>
                    <p class="text-3xl font-bold text-white">{{ approved_posts }}</p>
                    <p class="text-gray-400 text-sm">Genehmigt</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Posts -->
    {% if employee_posts %}
    <div class="card-bg border rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-white">Letzte Posts</h3>
            <a href="/company/manage/posts?employee_id={{ selected_employee.id }}" class="text-brand-highlight text-sm hover:underline">Alle anzeigen</a>
        </div>
        <div class="space-y-3">
            {% for post in employee_posts[:5] %}
            <a href="/company/manage/post/{{ post.id }}?employee_id={{ selected_employee.id }}" class="block p-4 bg-brand-bg rounded-lg hover:bg-brand-bg-light transition-colors">
                <div class="flex items-start gap-3">
                    <div class="flex-1">
                        <p class="text-white text-sm line-clamp-2">{{ post.post_content[:150] }}{% if post.post_content|length > 150 %}...{% endif %}</p>
                        <p class="text-gray-500 text-xs mt-2">{{ post.created_at.strftime('%d.%m.%Y %H:%M') }}</p>
                    </div>
                    <span class="text-xs px-2 py-1 rounded flex-shrink-0 {% if post.status == 'approved' %}bg-green-500/20 text-green-400{% elif post.status == 'rejected' %}bg-red-500/20 text-red-400{% else %}bg-yellow-500/20 text-yellow-400{% endif %}">
                        {% if post.status == 'approved' %}Genehmigt{% elif post.status == 'rejected' %}Abgelehnt{% else %}Ausstehend{% endif %}
                    </span>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class="card-bg border rounded-xl p-6 text-center">
        <div class="w-16 h-16 bg-gray-600/30 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        </div>
        <p class="text-gray-400">Noch keine Posts vorhanden</p>
        <a href="/company/manage/create?employee_id={{ selected_employee.id }}" class="inline-block mt-4 text-brand-highlight hover:underline">Ersten Post erstellen</a>
    </div>
    {% endif %}

    {% endif %}<!-- end can_view_posts check -->

    {% else %}
    <!-- No Employee Selected -->
    {% if active_employees %}
    <div class="card-bg border rounded-xl p-6 text-center">
        <div class="w-16 h-16 bg-brand-highlight/20 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
            </svg>
        </div>
        <p class="text-white text-lg font-medium mb-2">Mitarbeiter auswählen</p>
        <p class="text-gray-400">Wähle oben einen Mitarbeiter aus, um dessen Inhalte zu verwalten.</p>
    </div>
    {% endif %}
    {% endif %}
</div>
{% endblock %}
