{% 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-redirect-delay="{% block progress_redirect_delay %}1000{% endblock %}"
        data-redirect-url="{% block progress_redirect_url %}{% endblock %}"
        data-stream-url="{% block progress_stream_url %}{% endblock %}"
        x-data="{
            has_error: false,
            message: 'Initializing...',
            overall_percent: 0,
            tasks: {},

            async init() {
                let stream = new ProgressStream(this.$el.dataset.streamUrl, {
                    on_complete: () => {
                        setTimeout(() => close_modal(), 500);
                    },
                    on_error: (data) => {
                        this.has_error = true;
                        this.message = data.message || 'An error occurred';
                    },
                    on_update: (data) => {
                        this.overall_percent = data.overall_percent;
                        this.tasks = data.tasks;
                    },
                    redirect_delay: parseInt(this.$el.dataset.redirectDelay),
                    redirect_url: this.$el.dataset.redirectUrl,
                });

                await stream.start();
            },

            get_status_icon(status) {
                if (status === 'complete') return 'bi-check-circle-fill text-success';
                if (status === 'error') return 'bi-x-circle-fill text-danger';
                if (status === 'running') return 'bi-arrow-repeat text-primary spin';
                return 'bi-circle text-secondary';
            }
        }"
    >
        <div class="row g-3">
            <div class="col-12" x-show="!has_error">
                <template x-for="(task, task_id) in tasks" :key="task_id">
                    <div class="mb-3">
                        <div class="d-flex align-items-center mb-1">
                            <i class="bi me-2" :class="get_status_icon(task.status)"></i>
                            <span class="fw-medium" x-text="task.name"></span>
                            <span class="ms-auto fs-7" x-text="task.percent + '%'"></span>
                        </div>
                        <div class="progress" style="height: 4px;">
                            <div
                                class="progress-bar progress-bar-smooth"
                                :class="task.status === 'error' ? 'bg-danger' : 'bg-success'"
                                role="progressbar"
                                :style="'width: ' + task.percent + '%'"
                            ></div>
                        </div>
                        <small class="text-muted" x-text="task.message"></small>
                    </div>
                </template>

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

                <p class="text-app-secondary mb-0 fs-7 text-center mt-3">
                    {% block progress_wait_message %}This may take a moment. Please do not close this window.{% endblock %}
                </p>
            </div>

            <div class="col-12" x-show="has_error" x-cloak>
                <div class="d-flex align-items-center justify-content-center py-4">
                    <i class="bi bi-x-circle-fill text-danger me-3 fs-4"></i>
                    <span class="fs-5" x-text="message"></span>
                </div>
                <div class="text-center">
                    <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>

    <style>
        .progress-bar-smooth {
            transition: width 0.15s ease-out;
        }
        .spin {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
{% endblock %}