{% extends "company_base.html" %}

{% block title %}Dashboard - {{ session.company_name }}{% endblock %}

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

    <!-- Stats Cards -->
    <div class="grid md:grid-cols-3 gap-6 mb-8">
        <!-- Employees Card -->
        <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="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>
                <div>
                    {% if license_key %}
                    <p class="text-3xl font-bold text-white">{{ total_employees }}<span class="text-xl text-gray-500">/{{ license_key.max_employees }}</span></p>
                    <p class="text-gray-400 text-sm">Mitarbeiter</p>
                    <p class="text-xs text-gray-500 mt-1">
                        {% set remaining = license_key.max_employees - total_employees %}
                        {% if remaining > 0 %}
                        Noch {{ remaining }} verfügbar
                        {% else %}
                        <span class="text-yellow-400">Limit erreicht</span>
                        {% endif %}
                    </p>
                    {% else %}
                    <p class="text-3xl font-bold text-white">{{ total_employees }}</p>
                    <p class="text-gray-400 text-sm">Mitarbeiter</p>
                    <p class="text-xs text-green-400 mt-1">Unbegrenzt</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Pending Invitations Card -->
        <div class="card-bg border rounded-xl p-6">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-400" 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>
                </div>
                <div>
                    <p class="text-3xl font-bold text-white">{{ pending_invitations | length }}</p>
                    <p class="text-gray-400 text-sm">Offene Einladungen</p>
                </div>
            </div>
        </div>

        <!-- Strategy Status Card -->
        <div class="card-bg border rounded-xl p-6">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 {% if company.company_strategy %}bg-green-500/20{% else %}bg-yellow-500/20{% endif %} rounded-lg flex items-center justify-center">
                    {% if company.company_strategy and company.company_strategy.mission %}
                    <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>
                    {% else %}
                    <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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                    {% endif %}
                </div>
                <div>
                    {% if company.company_strategy and company.company_strategy.mission %}
                    <p class="text-lg font-bold text-green-400">Aktiv</p>
                    <p class="text-gray-400 text-sm">Strategie definiert</p>
                    {% else %}
                    <p class="text-lg font-bold text-yellow-400">Ausstehend</p>
                    <p class="text-gray-400 text-sm">Strategie fehlt</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Daily Quota Section -->
    {% if quota %}
    <div class="card-bg border rounded-xl p-6 mb-8">
        <h2 class="text-lg font-semibold text-white mb-4">Token-Verbrauch heute</h2>

        <div class="bg-brand-bg/30 rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm text-gray-400">Tokens heute</span>
                <span class="text-xs text-gray-500">
                    {{ quota.tokens_used | default(0) }}
                    /
                    {% if license_key and license_key.daily_token_limit %}{{ license_key.daily_token_limit }}{% else %}∞{% endif %}
                </span>
            </div>
            <div class="w-full bg-brand-bg rounded-full h-2">
                {% if license_key and license_key.daily_token_limit and license_key.daily_token_limit > 0 %}
                    {% set token_pct = ((quota.tokens_used / license_key.daily_token_limit * 100) | round) %}
                    {% set token_pct = [token_pct, 100] | min %}
                {% else %}
                    {% set token_pct = 0 %}
                {% endif %}
                <div class="h-2 rounded-full transition-all {% if token_pct >= 90 %}bg-red-500{% elif token_pct >= 70 %}bg-yellow-500{% else %}bg-brand-highlight{% endif %}"
                     style="width: {{ token_pct }}%"></div>
            </div>
        </div>
        <p class="text-xs text-gray-500 mt-3">
            Limits werden täglich um Mitternacht zurückgesetzt.
            {% if license_key %}(Lizenz: {{ license_key.key }}){% else %}Unbegrenzter Account.{% endif %}
        </p>
    </div>
    {% endif %}

    <!-- Quick Actions -->
    <div class="card-bg border rounded-xl p-6 mb-8">
        <h2 class="text-lg font-semibold text-white mb-4">Schnellzugriff</h2>
        <div class="grid md:grid-cols-2 gap-4">
            <a href="/company/accounts" 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">
                    <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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-white font-medium">Mitarbeiter einladen</p>
                    <p class="text-gray-400 text-sm">Neue Teammitglieder hinzufügen</p>
                </div>
            </a>
            <a href="/company/strategy" 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">
                    <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="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>
                </div>
                <div>
                    <p class="text-white font-medium">Strategie bearbeiten</p>
                    <p class="text-gray-400 text-sm">Brand Voice und Richtlinien anpassen</p>
                </div>
            </a>
        </div>
    </div>

    <!-- Recent Employees -->
    {% if employees %}
    <div class="card-bg border rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-white">Mitarbeiter</h2>
            <a href="/company/accounts" class="text-brand-highlight text-sm hover:underline">Alle anzeigen</a>
        </div>
        <div class="space-y-3">
            {% for emp in employees[:5] %}
            <div class="flex items-center gap-3 p-3 bg-brand-bg rounded-lg">
                <div class="w-8 h-8 rounded-full bg-brand-highlight/20 flex items-center justify-center overflow-hidden">
                    {% if emp.avatar_url %}
                    <img src="{{ emp.avatar_url }}" alt="{{ emp.display_name }}" class="w-8 h-8 object-cover" referrerpolicy="no-referrer">
                    {% else %}
                    <span class="text-brand-highlight text-sm font-medium">{{ (emp.display_name or emp.email)[0] | upper }}</span>
                    {% endif %}
                </div>
                <div class="flex-1">
                    <p class="text-white text-sm">{{ emp.display_name or emp.email }}</p>
                    <p class="text-gray-500 text-xs">{{ emp.email }}</p>
                </div>
                <span class="text-xs px-2 py-1 rounded {% if emp.onboarding_status == 'completed' %}bg-green-500/20 text-green-400{% else %}bg-yellow-500/20 text-yellow-400{% endif %}">
                    {% if emp.onboarding_status == 'completed' %}Aktiv{% else %}Onboarding{% endif %}
                </span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}