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

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

{% block content %}
<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center gap-3 mb-4">
            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl shadow-lg shadow-blue-200">
                <i data-lucide="eye" class="w-8 h-8 text-white"></i>
            </div>
            <div>
                <a href="{% url 'accounts:acknowledgement-dashboard' %}" class="inline-flex items-center text-blue hover:text-navy mb-2 font-medium">
                    <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
                    {% trans "Back to Dashboard" %}
                </a>
                <h1 class="text-3xl font-bold text-navy">
                    {% trans "Preview Onboarding Flow" %}
                </h1>
                <p class="text-slate">
                    {% trans "Preview the staff onboarding experience by role" %}
                </p>
            </div>
        </div>
    </div>

    <!-- Role Selection -->
    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 md:p-8 mb-8">
        <h2 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
            <i data-lucide="user-cog" class="w-5 h-5 text-blue"></i>
            {% trans "Select Role to Preview" %}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {% for role in available_roles %}
            <a href="{% url 'accounts:preview-wizard-role' role.name %}" 
               class="group p-6 border-2 {% if selected_role == role %}border-blue bg-blue-50{% else %}border-blue-100 hover:border-blue{% endif %} rounded-2xl transition-all hover:shadow-lg hover:-translate-y-1">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center group-hover:shadow-lg transition">
                        <i data-lucide="user" class="w-6 h-6 text-white"></i>
                    </div>
                    <h3 class="font-bold text-navy">{{ role.name }}</h3>
                </div>
                <p class="text-sm text-slate">{{ role.description|truncatechars:80|default:"Preview the onboarding flow for this role" }}</p>
            </a>
            {% empty %}
            <div class="col-span-full text-center py-12">
                <i data-lucide="user-x" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
                <p class="text-slate">{% trans "No roles available" %}</p>
            </div>
            {% endfor %}
        </div>
    </div>

    {% if selected_role %}
    <!-- Preview Content for Selected Role -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Content Sections -->
        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
                <h3 class="font-bold text-navy flex items-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
                    {% trans "Content Sections" %}
                </h3>
            </div>
            <div class="p-6">
                {% if preview_content %}
                <div class="space-y-4">
                    {% for content in preview_content %}
                    <div class="p-4 border-2 border-blue-100 rounded-xl hover:border-blue hover:bg-blue-50/50 transition">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 bg-gradient-to-br from-blue to-indigo-500 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i data-lucide="file-check" class="w-5 h-5 text-white"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-bold text-navy mb-1">{{ content.title_en }}</h4>
                                <p class="text-sm text-slate">{{ content.description_en|truncatewords:15 }}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-8">
                    <i data-lucide="file-text" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
                    <p class="text-slate">{% trans "No content sections for this role" %}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Checklist Items -->
        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
            <div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
                <h3 class="font-bold text-navy flex items-center gap-2">
                    <i data-lucide="list-checks" class="w-5 h-5 text-blue"></i>
                    {% trans "Checklist Items" %}
                </h3>
            </div>
            <div class="p-6">
                {% if preview_checklist %}
                <div class="space-y-3">
                    {% for item in preview_checklist %}
                    <div class="flex items-center gap-3 p-4 border-2 border-blue-100 rounded-xl hover:border-blue hover:bg-blue-50/50 transition">
                        <div class="w-6 h-6 border-2 border-blue-300 rounded flex items-center justify-center flex-shrink-0">
                            {% if item.is_required %}
                            <i data-lucide="asterisk" class="w-3 h-3 text-blue-500"></i>
                            {% endif %}
                        </div>
                        <div class="flex-1">
                            <p class="font-bold text-navy text-sm">{{ item.text_en }}</p>
                            {% if item.is_required %}
                            <span class="text-xs text-red-600 font-medium">{% trans "Required" %}</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-8">
                    <i data-lucide="list-checks" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
                    <p class="text-slate">{% trans "No checklist items for this role" %}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Start Full Preview -->
    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-8 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue to-navy rounded-full mb-6 shadow-lg shadow-blue-200">
            <i data-lucide="play" class="w-10 h-10 text-white"></i>
        </div>
        <h2 class="text-2xl font-bold text-navy mb-2">{% trans "Start Full Preview" %}</h2>
        <p class="text-slate mb-6 max-w-2xl mx-auto">
            {% trans "Experience the complete onboarding flow from start to finish as a" %} <strong>{{ selected_role.name }}</strong> {% trans "user" %}
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{% url 'accounts:onboarding-welcome' %}" class="inline-flex items-center bg-gradient-to-r from-blue to-navy text-white px-8 py-4 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
                <i data-lucide="rocket" class="w-5 h-5 mr-2"></i>
                {% trans "Begin Preview" %}
                <i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i>
            </a>
            <a href="{% url 'accounts:onboarding-step-checklist' %}" class="inline-flex items-center bg-white border-2 border-blue-200 text-navy px-8 py-4 rounded-xl font-bold hover:bg-blue-50 transition">
                <i data-lucide="list-checks" class="w-5 h-5 mr-2"></i>
                {% trans "View Checklist" %}
            </a>
        </div>
    </div>
    {% else %}
    <!-- No Role Selected -->
    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-12 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full mb-6">
            <i data-lucide="hand" class="w-10 h-10 text-blue-500"></i>
        </div>
        <h2 class="text-2xl font-bold text-navy mb-2">{% trans "Select a Role" %}</h2>
        <p class="text-slate max-w-xl mx-auto">
            {% trans "Choose a role from the options above to preview the onboarding experience for that specific role" %}
        </p>
    </div>
    {% endif %}
</div>

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