{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Onboarding Dashboard" %}{% endblock %}

{% block content %}
<div class="p-6 md:p-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">
            {% trans "Onboarding Dashboard" %}
        </h1>
        <p class="text-gray-500">
            {% trans "Manage staff onboarding progress and settings" %}
        </p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-3">
                <div class="bg-blue-100 p-2 rounded-xl">
                    <i data-lucide="users" class="text-blue-500 w-5 h-5"></i>
                </div>
                <span class="text-gray-500 text-sm font-medium">{% trans "Total Invited" %}</span>
            </div>
            <div class="text-3xl font-bold text-gray-800">{{ stats.total_invited }}</div>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-3">
                <div class="bg-green-100 p-2 rounded-xl">
                    <i data-lucide="check-circle" class="text-green-500 w-5 h-5"></i>
                </div>
                <span class="text-gray-500 text-sm font-medium">{% trans "Completed" %}</span>
            </div>
            <div class="text-3xl font-bold text-gray-800">{{ stats.completed }}</div>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-3">
                <div class="bg-orange-100 p-2 rounded-xl">
                    <i data-lucide="clock" class="text-orange-500 w-5 h-5"></i>
                </div>
                <span class="text-gray-500 text-sm font-medium">{% trans "In Progress" %}</span>
            </div>
            <div class="text-3xl font-bold text-gray-800">{{ stats.in_progress }}</div>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-3">
                <div class="bg-red-100 p-2 rounded-xl">
                    <i data-lucide="x-circle" class="text-red-500 w-5 h-5"></i>
                </div>
                <span class="text-gray-500 text-sm font-medium">{% trans "Not Started" %}</span>
            </div>
            <div class="text-3xl font-bold text-gray-800">{{ stats.not_started }}</div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <a href="{% url 'accounts:onboarding_bulk_invite' %}" class="group">
            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-gray-100 hover:border-blue hover:shadow-md transition">
                <div class="flex items-center gap-4">
                    <div class="bg-light p-3 rounded-xl group-hover:bg-blue-100 transition">
                        <i data-lucide="mail-plus" class="text-navy w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-1">{% trans "Send Bulk Invitations" %}</h3>
                        <p class="text-sm text-gray-500">{% trans "Invite multiple staff members to onboarding" %}</p>
                    </div>
                </div>
            </div>
        </a>

        <a href="{% url 'accounts:onboarding_checklist_list' %}" class="group">
            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-gray-100 hover:border-blue-400 hover:shadow-md transition">
                <div class="flex items-center gap-4">
                    <div class="bg-blue-100 p-3 rounded-xl group-hover:bg-blue-200 transition">
                        <i data-lucide="clipboard-list" class="text-blue-500 w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-1">{% trans "Manage Checklists" %}</h3>
                        <p class="text-sm text-gray-500">{% trans "View and edit onboarding checklist items" %}</p>
                    </div>
                </div>
            </div>
        </a>

        <a href="{% url 'accounts:onboarding_content_list' %}" class="group">
            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-gray-100 hover:border-green-400 hover:shadow-md transition">
                <div class="flex items-center gap-4">
                    <div class="bg-green-100 p-3 rounded-xl group-hover:bg-green-200 transition">
                        <i data-lucide="file-text" class="text-green-500 w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-1">{% trans "Manage Content" %}</h3>
                        <p class="text-sm text-gray-500">{% trans "View and edit onboarding content" %}</p>
                    </div>
                </div>
            </div>
        </a>

        <a href="{% url 'accounts:onboarding_provisional_list' %}" class="group">
            <div class="bg-white p-6 rounded-2xl shadow-sm border-2 border-gray-100 hover:border-purple-400 hover:shadow-md transition">
                <div class="flex items-center gap-4">
                    <div class="bg-purple-100 p-3 rounded-xl group-hover:bg-purple-200 transition">
                        <i data-lucide="user-plus" class="text-purple-500 w-6 h-6"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 mb-1">{% trans "Provisional Accounts" %}</h3>
                        <p class="text-sm text-gray-500">{% trans "View accounts pending activation" %}</p>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Recent Activity -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
            <i data-lucide="activity" class="w-5 h-5 text-navy"></i>
            {% trans "Recent Onboarding Activity" %}
        </h2>
        <div class="space-y-4">
            {% for activity in recent_activity %}
            <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-xl">
                <div class="flex items-center justify-center w-10 h-10 bg-white rounded-full shadow-sm">
                    {% if activity.status == 'completed' %}
                        <i data-lucide="check-circle" class="w-5 h-5 text-green-500"></i>
                    {% elif activity.status == 'in_progress' %}
                        <i data-lucide="loader" class="w-5 h-5 text-orange-500"></i>
                    {% else %}
                        <i data-lucide="clock" class="w-5 h-5 text-gray-400"></i>
                    {% endif %}
                </div>
                <div class="flex-1">
                    <p class="font-medium text-gray-800">{{ activity.user }}</p>
                    <p class="text-sm text-gray-500">{{ activity.action }}</p>
                </div>
                <span class="text-sm text-gray-400">{{ activity.timestamp|timesince }}</span>
            </div>
            {% empty %}
            <div class="text-center py-8">
                <i data-lucide="inbox" class="w-12 h-12 text-gray-300 mx-auto mb-3"></i>
                <p class="text-gray-500">{% trans "No recent activity" %}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}