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

{% block title %}{{ page_title }} - PX360{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">
                <i class="fas fa-eye text-primary me-2"></i>{% trans "Wizard Preview" %}
            </h4>
            <p class="text-muted mb-0">{% trans "Preview the onboarding experience for different user roles" %}</p>
        </div>
        <a href="{% url 'accounts:acknowledgement-content-list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>{% trans "Back to Content" %}
        </a>
    </div>

    <!-- Role Selector -->
    <div class="card mb-4">
        <div class="card-header bg-white">
            <h5 class="card-title mb-0">
                <i class="fas fa-user-tag text-info me-2"></i>{% trans "Select Role to Preview" %}
            </h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                {% for role in available_roles %}
                <div class="col-md-3">
                    <a href="{% url 'accounts:preview-wizard-role' role=role.name %}" 
                       class="card text-decoration-none h-100 {% if selected_role and selected_role.name == role.name %}border-primary bg-primary bg-opacity-10{% else %}border-light{% endif %}">
                        <div class="card-body text-center">
                            <i class="fas fa-user-shield fa-2x mb-2 {% if selected_role and selected_role.name == role.name %}text-primary{% else %}text-muted{% endif %}"></i>
                            <h6 class="card-title mb-0">{{ role.name }}</h6>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {% if selected_role %}
    <!-- Preview Stats -->
    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <div class="card bg-info text-white">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title mb-0">{% trans "Content Sections" %}</h6>
                        <h2 class="mb-0">{{ content_count }}</h2>
                    </div>
                    <i class="fas fa-file-alt fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-warning text-dark">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="card-title mb-0">{% trans "Checklist Items" %}</h6>
                        <h2 class="mb-0">{{ checklist_count }}</h2>
                    </div>
                    <i class="fas fa-tasks fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Preview Content -->
    <div class="row g-4">
        <!-- Content Sections -->
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-file-alt text-info me-2"></i>{% trans "Content Sections" %}
                    </h5>
                    <span class="badge bg-info">{{ content_count }}</span>
                </div>
                <div class="card-body p-0">
                    <div class="accordion" id="contentAccordion">
                        {% for content in preview_content %}
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button {% if not forloop.first %}collapsed{% endif %}" type="button" 
                                        data-bs-toggle="collapse" data-bs-target="#content{{ forloop.counter }}">
                                    <span class="badge bg-secondary me-2">{{ forloop.counter }}</span>
                                    {{ content.title_en }}
                                    {% if content.role %}
                                    <span class="badge bg-info ms-2">{{ content.get_role_display }}</span>
                                    {% else %}
                                    <span class="badge bg-success ms-2">{% trans "All Roles" %}</span>
                                    {% endif %}
                                </button>
                            </h2>
                            <div id="content{{ forloop.counter }}" class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
                                 data-bs-parent="#contentAccordion">
                                <div class="accordion-body">
                                    <h6>{{ content.title_en }}</h6>
                                    <p class="text-muted">{{ content.description_en }}</p>
                                    <hr>
                                    <div class="small">
                                        {{ content.content_en|safe|truncatewords:50 }}
                                    </div>
                                    {% if content.content_ar %}
                                    <hr>
                                    <div class="small text-end" dir="rtl">
                                        <strong>{% trans "Arabic:" %}</strong>
                                        {{ content.content_ar|safe|truncatewords:30 }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-center py-5 text-muted">
                            <i class="fas fa-inbox fa-3x mb-3"></i>
                            <p>{% trans "No content sections for this role" %}</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Checklist Items -->
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-tasks text-warning me-2"></i>{% trans "Checklist Items" %}
                    </h5>
                    <span class="badge bg-warning text-dark">{{ checklist_count }}</span>
                </div>
                <div class="card-body">
                    {% for item in preview_checklist %}
                    <div class="d-flex align-items-start mb-3 p-3 border rounded {% if item.is_required %}border-warning bg-warning bg-opacity-10{% else %}border-light{% endif %}">
                        <div class="form-check flex-grow-1">
                            <input class="form-check-input" type="checkbox" disabled 
                                   {% if item.is_required %}checked{% endif %}>
                            <label class="form-check-label">
                                <strong>{{ item.text_en }}</strong>
                                {% if item.is_required %}
                                <span class="badge bg-danger ms-1">{% trans "Required" %}</span>
                                {% endif %}
                            </label>
                            {% if item.description_en %}
                            <p class="text-muted small mb-0 mt-1">{{ item.description_en }}</p>
                            {% endif %}
                            {% if item.content %}
                            <p class="text-info small mb-0 mt-1">
                                <i class="fas fa-link me-1"></i>{{ item.content.title_en }}
                            </p>
                            {% endif %}
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center py-5 text-muted">
                        <i class="fas fa-clipboard-check fa-3x mb-3"></i>
                        <p>{% trans "No checklist items for this role" %}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- User Experience Preview -->
    <div class="card mt-4">
        <div class="card-header bg-white">
            <h5 class="card-title mb-0">
                <i class="fas fa-mobile-alt text-success me-2"></i>{% trans "User Experience Summary" %}
            </h5>
        </div>
        <div class="card-body">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-book-open text-primary fa-2x"></i>
                        </div>
                        <h6>{% trans "Step 1: Learn" %}</h6>
                        <p class="text-muted small mb-0">
                            {% blocktrans %}Users will see {{ content_count }} content sections to learn about PX360.{% endblocktrans %}
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-check-double text-warning fa-2x"></i>
                        </div>
                        <h6>{% trans "Step 2: Acknowledge" %}</h6>
                        <p class="text-muted small mb-0">
                            {% blocktrans %}Users must acknowledge {{ checklist_count }} checklist items.{% endblocktrans %}
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-signature text-success fa-2x"></i>
                        </div>
                        <h6>{% trans "Step 3: Sign & Activate" %}</h6>
                        <p class="text-muted small mb-0">
                            {% trans "Users provide digital signature and create their account." %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% else %}
    <!-- No Role Selected -->
    <div class="card">
        <div class="card-body text-center py-5">
            <i class="fas fa-hand-pointer text-muted fa-4x mb-3"></i>
            <h5 class="text-muted">{% trans "Select a role above to preview the onboarding experience" %}</h5>
            <p class="text-muted">{% trans "You can see exactly what users with different roles will experience during onboarding." %}</p>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}