{% extends 'django_spire/modal/content/modal_title_content.html' %}

{% block modal_content_title %}
    <i class="bi bi-magic"></i>
    {% block progress_modal_title %}Processing{% endblock %}
{% endblock %}

{% block modal_content_close_button %}
{% endblock %}

{% block modal_content_content %}
    <div
        data-stream-url="{% block progress_stream_url %}{% endblock %}"
        data-redirect-url="{% block progress_redirect_url %}{% endblock %}"
        data-redirect-delay="{% block progress_redirect_delay %}1000{% endblock %}"
        x-data="{
            tasks: {},
            task_order: [],
            overall_progress: 0,
            message: 'Initializing...',
            has_error: false,
            stream: null,

            init() {
                let stream_url = this.$el.dataset.streamUrl;
                let redirect_url = this.$el.dataset.redirectUrl;
                let redirect_delay = parseInt(this.$el.dataset.redirectDelay);

                this.stream = new ProgressStream(stream_url, {
                    on_update: (data) => {
                        this.message = data.message;
                        this.overall_progress = data.progress;
                        if (data.task_order) {
                            this.task_order = data.task_order;
                        }
                        if (data.tasks) {
                            this.tasks = data.tasks;
                        }
                    },
                    on_complete: (data) => {
                        setTimeout(() => {
                            close_modal();
                        }, 500);
                    },
                    on_error: (data) => {
                        this.has_error = true;
                        this.message = data.message;
                    },
                    redirect_on_complete: redirect_url,
                    redirect_delay: redirect_delay
                });
                this.stream.start();
            },

            format_task_name(name) {
                return name.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
            },

            get_progress_class(step) {
                if (step === 'complete') return 'bg-success';
                if (step === 'error') return 'bg-danger';
                if (step === 'processing') return 'bg-app-accent';
                return 'bg-secondary';
            }
        }"
    >
        <div class="row g-3">
            <div class="col-12" x-show="!has_error">
                <template x-for="name in task_order" :key="name">
                    <div class="mb-3" x-show="tasks[name]">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="fs-7" x-text="format_task_name(name)"></span>
                            <span class="fs-7" x-text="tasks[name]?.progress + '%'"></span>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div
                                class="progress-bar"
                                :class="get_progress_class(tasks[name]?.step)"
                                role="progressbar"
                                :style="'width: ' + (tasks[name]?.progress || 0) + '%'"
                            ></div>
                        </div>
                    </div>
                </template>

                <div class="mt-4 pt-3 border-top">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="fs-6 fw-medium">Overall Progress</span>
                        <span class="fs-6" x-text="overall_progress + '%'"></span>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div
                            class="progress-bar bg-app-accent"
                            role="progressbar"
                            :style="'width: ' + overall_progress + '%'"
                        ></div>
                    </div>
                </div>
            </div>

            <div class="col-12" x-show="!has_error">
                <p class="text-app-secondary mb-0 fs-7">
                    {% block progress_wait_message %}Processing your request. This may take a moment.{% endblock %}
                </p>
            </div>

            <div class="col-12" x-show="has_error" x-cloak>
                <div class="row g-2">
                    <div class="col-12">
                        {% include 'django_spire/element/attribute_element.html' with attribute_title='Error' %}
                        <span class="fs-6 text-app-danger" x-text="message"></span>
                    </div>
                    <div class="col-12">
                        <span @click="close_modal()">
                            {% block progress_error_button %}
                                {% include 'django_spire/button/primary_button.html' with button_text='Close' %}
                            {% endblock %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
