{% extends "base.html" %}

{% block title %}Onboarding - Mimir{% endblock %}

{% block content %}
<div class="container mt-5" data-testid="onboarding-welcome">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card shadow-sm">
                <div class="card-body text-center py-5 position-relative">
                    <a href="#"
                       class="small text-muted position-absolute top-0 end-0 m-3"
                       data-testid="onboarding-skip-link-top"
                       data-bs-toggle="modal"
                       data-bs-target="#onboardingSkipModal">
                        <i class="fa-solid fa-forward"></i> Skip tour
                    </a>
                    <h1 class="display-4 mb-4">
                        <i class="fa-solid fa-rocket text-success"></i>
                        Welcome to FOB
                    </h1>
                    <p class="lead text-muted mb-4">
                        Welcome to FOB – your simple workspace in Mimir for exploring and organizing your playbooks and workflows.
                    </p>
                    <hr class="my-4">
                    <p class="text-muted mb-2">
                        Your first steps in FOB:
                    </p>
                    <div class="d-flex justify-content-center mb-4">
                        <ol class="list-unstyled text-start mb-0">
                            <li class="mb-3" data-testid="onboarding-step-1">
                                <strong>1. Create Playbook</strong>
                                <div class="text-muted small">
                                    Start by creating a simple playbook that captures how you like to work.
                                </div>
                            </li>
                            <li class="mb-3" data-testid="onboarding-step-2">
                                <strong>2. Take a Quick Tour</strong>
                                <div class="text-muted small">
                                    Look around key areas like workflows, activities, and artifacts.
                                </div>
                            </li>
                            <li data-testid="onboarding-step-3">
                                <strong>3. Get Started</strong>
                                <div class="text-muted small mb-2">
                                    When you are ready, head to the dashboard and start using your playbooks.
                                </div>
                                <div class="text-center">
                                    <a href="{% url 'playbook_create' %}" class="btn btn-primary btn-lg mt-2"
                                       data-testid="onboarding-begin-journey-button"
                                       data-bs-toggle="tooltip"
                                       title="Create your first playbook and begin your journey">
                                        <i class="fa-solid fa-rocket"></i> Begin your journey
                                    </a>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Feature code marker for traceability -->
<div data-testid="onboarding-feature-code" style="display: none;">FOB-ONBOARDING-1</div>

<!-- Skip Tour Confirmation Modal -->
<div class="modal fade" id="onboardingSkipModal" tabindex="-1" aria-labelledby="onboardingSkipModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="onboardingSkipModalLabel">Skip tour?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure? You can access help anytime.
            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                        data-testid="onboarding-skip-cancel">
                    No, stay in tour
                </button>
                <form method="post" action="{% url 'onboarding_skip' %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit"
                            class="btn btn-primary"
                            data-testid="onboarding-skip-confirm">
                        Yes, skip
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var skipLinkTop = document.querySelector('[data-testid="onboarding-skip-link-top"]');
        if (skipLinkTop) {
            skipLinkTop.addEventListener('click', function () {
                console.log('[ONBOARD-04] Skip link clicked (top-right).');
            });
        }

        var skipConfirm = document.querySelector('[data-testid="onboarding-skip-confirm"]');
        if (skipConfirm) {
            skipConfirm.addEventListener('click', function () {
                console.log('[ONBOARD-04] Skip confirmed, redirecting to dashboard.');
            });
        }

        var skipCancel = document.querySelector('[data-testid="onboarding-skip-cancel"]');
        if (skipCancel) {
            skipCancel.addEventListener('click', function () {
                console.log('[ONBOARD-04] Skip cancelled, staying in onboarding.');
            });
        }
    });
</script>
{% endblock %}