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

{% block fatanalysis_content %}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 pb-2 border-bottom">
    <div>
        <h2 class="h4 mb-0 fw-bold">{% trans "AFAT Sync & Ingestion Management" %}</h2>
        <small class="text-muted">{% trans "INIT Auth Scraper, Bulk Historical Ingestion & Credentials" %}</small>
    </div>
    <div class="d-flex gap-2">
        <a href="{% url 'fatanalysis:period_list' %}" class="btn btn-outline-light btn-sm">
            <i class="fas fa-calendar-alt me-1"></i> {% trans "Recorded Periods" %} ({{ periods|length }})
        </a>
        <a href="{% url 'fatanalysis:index' %}" class="btn btn-outline-light btn-sm">
            <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Dashboard" %}
        </a>
    </div>
</div>

<div class="row g-4">
    <!-- Left Column: Bulk Sync, Single Month Sync, and Connection Config -->
    <div class="col-lg-7">
        <!-- 1. Initial Bulk Sync Card -->
        <div class="card shadow-sm mb-4 border-success border-opacity-50">
            <div class="card-header bg-success bg-opacity-10 fw-bold text-success d-flex justify-content-between align-items-center">
                <span><i class="fas fa-cloud-download-alt me-1"></i> {% trans "Initial Bulk Sync (Crawl All Historical Data)" %}</span>
                <span class="badge bg-success">{% trans "Automated" %}</span>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    {% trans "Crawl and ingest all historical corporation FAT reports from INIT Auth in a single pass. The scraper will query each month sequentially and atomically update the database." %}
                </p>
                <form id="bulk-sync-form" method="post" action="{% url 'fatanalysis:sync_management' %}">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="sync_bulk_history">
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">{% trans "Start Year" %}</label>
                            {{ bulk_form.start_year }}
                            <small class="text-muted">{% trans "Earliest year to crawl" %}</small>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">{% trans "End Year" %}</label>
                            {{ bulk_form.end_year }}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">{% trans "End Month" %}</label>
                            {{ bulk_form.end_month }}
                        </div>
                    </div>
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bulkSyncConfirmModal">
                        <i class="fas fa-play me-1"></i> {% trans "Start Initial Bulk Sync" %}
                    </button>
                </form>
            </div>
        </div>

        <!-- 2. Single Month Sync Card -->
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-bold">
                <i class="fas fa-calendar-check me-1 text-primary"></i> {% trans "Sync Specific Monthly Period" %}
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    {% trans "Fetch or update participation metrics for a single designated month directly from INIT Auth." %}
                </p>
                <form method="post" action="{% url 'fatanalysis:sync_management' %}">
                    {% csrf_token %}
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">{% trans "Year" %}</label>
                            {{ month_form.year }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">{% trans "Month" %}</label>
                            {{ month_form.month }}
                        </div>
                    </div>
                    <button type="submit" name="action" value="sync_single_month" class="btn btn-primary btn-sm">
                        <i class="fas fa-sync-alt me-1"></i> {% trans "Fetch & Ingest Month" %}
                    </button>
                </form>
            </div>
        </div>

        <!-- 3. INIT Auth Connection Configuration -->
        <div class="card shadow-sm">
            <div class="card-header fw-bold">
                <i class="fas fa-cog me-1 text-info"></i> {% trans "INIT Auth Connection & Credentials" %}
            </div>
            <div class="card-body">
                <form method="post" action="{% url 'fatanalysis:sync_management' %}">
                    {% csrf_token %}
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">{% trans "Corporation ID" %}</label>
                            {{ config_form.corporation_id }}
                            <small class="text-muted">{% trans "Game of Drones: 98089258" %}</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">{% trans "Corporation Name" %}</label>
                            {{ config_form.corporation_name }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">{% trans "Source URL" %}</label>
                        {{ config_form.source_url }}
                        <small class="text-muted">{% trans "Base URL to INIT Auth AFAT (e.g. https://zero.the-initiative.rocks/fleet-activity-tracking/)" %}</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">{% trans "Session Cookie (sessionid)" %}</label>
                        {{ config_form.session_cookie }}
                        <small class="text-muted">
                            {% trans "Active sessionid cookie from your browser session on INIT Auth. Kept securely on server." %}
                        </small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">{% trans "User Agent" %}</label>
                        {{ config_form.user_agent }}
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" name="action" value="save_config" class="btn btn-primary btn-sm">
                            <i class="fas fa-save me-1"></i> {% trans "Save Configuration" %}
                        </button>
                        <button type="submit" name="action" value="test_connection" class="btn btn-outline-info btn-sm">
                            <i class="fas fa-plug me-1"></i> {% trans "Test Connection" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Right Column: Diagnostics, Status, and Sync Activity Log -->
    <div class="col-lg-5">
        <!-- Status Card -->
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-bold">
                <i class="fas fa-info-circle me-1 text-info"></i> {% trans "Sync Status & Diagnostics" %}
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-5 text-muted">{% trans "Last Sync:" %}</dt>
                    <dd class="col-sm-7 fw-bold">
                        {% if config.last_sync_at %}
                            {{ config.last_sync_at|date:"Y-m-d H:i" }} UTC
                        {% else %}
                            <span class="text-muted">{% trans "Never" %}</span>
                        {% endif %}
                    </dd>

                    <dt class="col-sm-5 text-muted">{% trans "Status:" %}</dt>
                    <dd class="col-sm-7">
                        {% if config.last_sync_status == 'success' %}
                            <span class="badge bg-success">{% trans "Success" %}</span>
                        {% elif config.last_sync_status == 'never' %}
                            <span class="badge bg-secondary">{% trans "Not yet run" %}</span>
                        {% else %}
                            <span class="badge bg-danger">{{ config.last_sync_status }}</span>
                        {% endif %}
                    </dd>

                    <dt class="col-sm-5 text-muted">{% trans "Session Cookie:" %}</dt>
                    <dd class="col-sm-7">
                        {% if config.session_cookie %}
                            <span class="badge bg-success">{% trans "Configured" %}</span>
                        {% else %}
                            <span class="badge bg-warning text-dark">{% trans "Missing" %}</span>
                        {% endif %}
                    </dd>

                    <dt class="col-sm-5 text-muted">{% trans "Recorded Periods:" %}</dt>
                    <dd class="col-sm-7 fw-bold">
                        {{ periods|length }} {% trans "Periods" %}
                    </dd>
                </dl>
            </div>
        </div>

        <!-- Activity & Ingestion Log Card -->
        <div class="card shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-bold"><i class="fas fa-terminal me-1 text-warning"></i> {% trans "Sync Activity Log" %}</span>
                <form method="post" action="{% url 'fatanalysis:sync_management' %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" name="action" value="clear_log" class="btn btn-outline-light btn-sm py-0 px-2" style="font-size: 0.75rem;">
                        <i class="fas fa-eraser me-1"></i> {% trans "Clear" %}
                    </button>
                </form>
            </div>
            <div class="card-body p-2">
                <pre class="bg-dark text-light p-3 rounded small mb-0" style="max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 0.8rem;">{{ config.last_sync_log|default:"No synchronization events recorded yet." }}</pre>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Sync Confirmation Modal -->
<div class="modal fade" id="bulkSyncConfirmModal" tabindex="-1" aria-labelledby="bulkSyncConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-bottom border-secondary">
                <h5 class="modal-title fw-bold" id="bulkSyncConfirmModalLabel">
                    <i class="fas fa-cloud-download-alt text-success me-2"></i>{% trans "Confirm Bulk Synchronization" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body py-4">
                <div class="d-flex align-items-start mb-3">
                    <div class="me-3 fs-2 text-success opacity-75">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">{% trans "Start automated crawl from INIT Auth?" %}</h6>
                        <p class="text-muted small mb-0">
                            {% trans "This will crawl all monthly AFAT reports in the selected year and month range directly from INIT Auth. Existing data for the matched months will be atomically updated." %}
                        </p>
                    </div>
                </div>
                <div class="alert alert-info py-2 px-3 small mb-0">
                    <i class="fas fa-clock me-1"></i>
                    {% trans "Depending on the range of years selected, this process may take 15 to 30 seconds to complete." %}
                </div>
            </div>
            <div class="modal-footer border-top border-secondary">
                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
                    {% trans "Cancel" %}
                </button>
                <button type="button" class="btn btn-success" id="btn-confirm-bulk-sync">
                    <i class="fas fa-play me-1"></i> {% trans "Yes, Start Bulk Sync" %}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
    {{ block.super }}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var confirmBtn = document.getElementById('btn-confirm-bulk-sync');
            if (confirmBtn) {
                confirmBtn.addEventListener('click', function () {
                    this.disabled = true;
                    this.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> ' + '{% trans "Synchronizing..." %}';
                    document.getElementById('bulk-sync-form').submit();
                });
            }
        });
    </script>
{% endblock %}