{% extends 'base.html' %}

{% block content %}
<h1>CloudKit Sync</h1>

<!-- Status Overview -->
<div class="stat-grid mb-2">
    <div class="stat-card {% if running_syncs > 0 %}primary{% endif %}">
        <div class="stat-value">{{ running_syncs|default:0 }}</div>
        <div class="stat-label">Running Syncs</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ total_records }}</div>
        <div class="stat-label">Total Records</div>
    </div>
</div>

<!-- CloudKit Configurations -->
<div class="card">
    <div class="card-header">
        <h3 style="margin: 0;">CloudKit Configurations</h3>
    </div>
    {% if all_configs %}
    <table class="table">
        <thead>
            <tr>
                <th>Config</th>
                <th>Environment</th>
                <th>Container</th>
                <th>Status</th>
                <th>Progress</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for c in all_configs %}
            <tr id="config-row-{{ c.id }}">
                <td><strong>{{ c.name }}</strong>{% if c.is_active %} ★{% endif %}</td>
                <td>
                    {% if c.environment == 'production' %}
                        <span class="badge badge-success">Production</span>
                    {% else %}
                        <span class="badge badge-info">Development</span>
                    {% endif %}
                </td>
                <td>{{ c.container_id }}</td>
                <td>
                    {% if c.is_active %}
                        <span class="badge badge-success">Active</span>
                    {% else %}
                        <span class="badge badge-secondary">Inactive</span>
                    {% endif %}
                </td>
                <td id="progress-{{ c.id }}" style="min-width: 200px;">
                    <span class="text-muted">-</span>
                </td>
                <td>
                    <button type="button" class="btn btn-primary sync-btn" data-config-id="{{ c.id }}" data-config-name="{{ c.name }}" data-environment="{{ c.environment }}" style="padding: 0.25rem 0.5rem; font-size: 0.85rem;">Sync Now</button>
                    <a href="{% url 'admin:cloudkit_cloudkitconfiguration_change' c.id %}" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.85rem;">Edit</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div style="padding: 1rem;">
        <p class="text-muted">No CloudKit configuration found. <a href="{% url 'admin:cloudkit_cloudkitconfiguration_add' %}">Create one</a>.</p>
    </div>
    {% endif %}
</div>

<!-- Confirmation Modal -->
<div id="sync-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 2rem; border-radius: 8px; max-width: 440px; width: 90%;">
        <h3 style="margin-top: 0;">Confirm Sync</h3>
        <p>Sync to <strong id="modal-config-name"></strong> (<span id="modal-environment"></span>)</p>

        <form id="sync-form" method="post" action="{% url 'dashboard:run_sync' %}">
            {% csrf_token %}
            <input type="hidden" name="config_id" id="modal-config-id">

            <div style="margin-bottom: 1rem;">
                <label style="font-weight: 600; display: block; margin-bottom: 0.5rem;">Record Types</label>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem;">
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="all" id="cb-all" checked onchange="toggleAll(this)"> <strong>Sync All</strong>
                    </label>
                    <div></div>
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="Sport" class="cb-type" onchange="uncheckAll()"> Sport
                    </label>
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="Conference" class="cb-type" onchange="uncheckAll()"> Conference
                    </label>
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="Division" class="cb-type" onchange="uncheckAll()"> Division
                    </label>
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="Team" class="cb-type" onchange="uncheckAll()"> Team
                    </label>
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="Stadium" class="cb-type" onchange="uncheckAll()"> Stadium
                    </label>
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="Game" class="cb-type" onchange="uncheckAll()"> Game
                    </label>
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="TeamAlias" class="cb-type" onchange="uncheckAll()"> TeamAlias
                    </label>
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="StadiumAlias" class="cb-type" onchange="uncheckAll()"> StadiumAlias
                    </label>
                    <label style="font-weight: normal; cursor: pointer;">
                        <input type="checkbox" name="record_types" value="LeagueStructure" class="cb-type" onchange="uncheckAll()"> LeagueStructure
                    </label>
                </div>
            </div>

            <div style="display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.5rem;">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Sync Now</button>
            </div>
        </form>
    </div>
</div>


<!-- Recent Sync Jobs -->
<div class="card">
    <div class="card-header">
        <h3 style="margin: 0;">Recent Sync Jobs</h3>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Config</th>
                <th>Status</th>
                <th>Type</th>
                <th>Trigger</th>
                <th>Started</th>
                <th>Duration</th>
                <th>Records</th>
            </tr>
        </thead>
        <tbody>
            {% for sync in recent_syncs %}
            <tr data-job-id="{{ sync.id }}">
                <td><a href="{% url 'admin:cloudkit_cloudkitsyncjob_change' sync.id %}">{{ sync.id }}</a></td>
                <td>
                    {{ sync.configuration.name }}
                    {% if sync.configuration.environment == 'production' %}
                        <span class="badge badge-success" style="font-size: 0.7rem;">Prod</span>
                    {% else %}
                        <span class="badge badge-info" style="font-size: 0.7rem;">Dev</span>
                    {% endif %}
                </td>
                <td>
                    {% if sync.status == 'completed' %}
                        <span class="badge badge-success">Completed</span>
                    {% elif sync.status == 'running' %}
                        <span class="badge badge-info">Running</span>
                    {% elif sync.status == 'failed' %}
                        <span class="badge badge-danger">Failed</span>
                    {% elif sync.status == 'cancelled' %}
                        <span class="badge badge-secondary">Cancelled</span>
                    {% else %}
                        <span class="badge badge-warning">{{ sync.status|title }}</span>
                    {% endif %}
                </td>
                <td>
                    {% if sync.record_type_filter %}
                        <span class="badge badge-info">{{ sync.record_type_filter }}</span>
                    {% else %}
                        All
                    {% endif %}
                </td>
                <td>{{ sync.triggered_by }}</td>
                <td class="text-muted">{% if sync.started_at %}{{ sync.started_at|timesince }} ago{% else %}-{% endif %}</td>
                <td>{{ sync.duration_display }}</td>
                <td>
                    {% if sync.records_synced or sync.records_failed %}
                        {{ sync.records_synced }} synced{% if sync.records_failed %}, <span class="text-danger">{{ sync.records_failed }} failed</span>{% endif %}
                        <div style="font-size: 0.78rem; color: #666; margin-top: 0.25rem; line-height: 1.5;">
                            {% if sync.sports_synced or sync.sports_failed %}
                                <span>Sport: {{ sync.sports_synced }}{% if sync.sports_failed %}<span class="text-danger">/{{ sync.sports_failed }}f</span>{% endif %}</span><br>
                            {% endif %}
                            {% if sync.conferences_synced or sync.conferences_failed %}
                                <span>Conf: {{ sync.conferences_synced }}{% if sync.conferences_failed %}<span class="text-danger">/{{ sync.conferences_failed }}f</span>{% endif %}</span><br>
                            {% endif %}
                            {% if sync.divisions_synced or sync.divisions_failed %}
                                <span>Div: {{ sync.divisions_synced }}{% if sync.divisions_failed %}<span class="text-danger">/{{ sync.divisions_failed }}f</span>{% endif %}</span><br>
                            {% endif %}
                            {% if sync.teams_synced or sync.teams_failed %}
                                <span>Team: {{ sync.teams_synced }}{% if sync.teams_failed %}<span class="text-danger">/{{ sync.teams_failed }}f</span>{% endif %}</span><br>
                            {% endif %}
                            {% if sync.stadiums_synced or sync.stadiums_failed %}
                                <span>Stadium: {{ sync.stadiums_synced }}{% if sync.stadiums_failed %}<span class="text-danger">/{{ sync.stadiums_failed }}f</span>{% endif %}</span><br>
                            {% endif %}
                            {% if sync.games_synced or sync.games_failed %}
                                <span>Game: {{ sync.games_synced }}{% if sync.games_failed %}<span class="text-danger">/{{ sync.games_failed }}f</span>{% endif %}</span><br>
                            {% endif %}
                            {% if sync.team_aliases_synced or sync.team_aliases_failed %}
                                <span>TeamAlias: {{ sync.team_aliases_synced }}{% if sync.team_aliases_failed %}<span class="text-danger">/{{ sync.team_aliases_failed }}f</span>{% endif %}</span><br>
                            {% endif %}
                            {% if sync.stadium_aliases_synced or sync.stadium_aliases_failed %}
                                <span>StadiumAlias: {{ sync.stadium_aliases_synced }}{% if sync.stadium_aliases_failed %}<span class="text-danger">/{{ sync.stadium_aliases_failed }}f</span>{% endif %}</span><br>
                            {% endif %}
                        </div>
                    {% else %}-{% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="8" class="text-muted">No sync jobs yet.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
let pollingIntervals = {};
let checkRunningInterval = null;

document.addEventListener('DOMContentLoaded', function() {
    // Attach click handlers to sync buttons
    document.querySelectorAll('.sync-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const configId = this.dataset.configId;
            const configName = this.dataset.configName;
            const environment = this.dataset.environment;
            showModal(configId, configName, environment);
        });
    });

    // Check for running syncs and start polling
    {% for sync in recent_syncs %}
    {% if sync.status == 'running' %}
    startPolling({{ sync.id }}, {{ sync.configuration.id }});
    {% endif %}
    {% endfor %}

    // Also check for running syncs after a delay (catches jobs started just before page load)
    setTimeout(checkForRunningSyncs, 1000);
    setTimeout(checkForRunningSyncs, 3000);
});

function checkForRunningSyncs() {
    fetch('/dashboard/api/running-syncs/')
        .then(response => response.json())
        .then(data => {
            data.running.forEach(function(job) {
                // Only start polling if not already polling this config
                if (!pollingIntervals[job.configuration_id]) {
                    startPolling(job.id, job.configuration_id);
                }
            });
        })
        .catch(error => console.error('Error checking running syncs:', error));
}

function showModal(configId, configName, environment) {
    document.getElementById('modal-config-id').value = configId;
    document.getElementById('modal-config-name').textContent = configName;
    document.getElementById('modal-environment').textContent = environment;
    // Reset to "Sync All" checked, individual unchecked
    document.getElementById('cb-all').checked = true;
    document.querySelectorAll('.cb-type').forEach(function(cb) { cb.checked = false; });
    document.getElementById('sync-modal').style.display = 'block';
}

function closeModal() {
    document.getElementById('sync-modal').style.display = 'none';
}

function toggleAll(allCb) {
    if (allCb.checked) {
        document.querySelectorAll('.cb-type').forEach(function(cb) { cb.checked = false; });
    }
}

function uncheckAll() {
    var anyChecked = document.querySelectorAll('.cb-type:checked').length > 0;
    document.getElementById('cb-all').checked = !anyChecked;
}

// Close modal on outside click
document.getElementById('sync-modal').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});

function startPolling(jobId, configId) {
    const btn = document.querySelector('.sync-btn[data-config-id="' + configId + '"]');
    if (btn) {
        btn.disabled = true;
        btn.textContent = 'Syncing...';
    }

    pollingIntervals[configId] = setInterval(function() {
        fetchProgress(jobId, configId);
    }, 1000);

    fetchProgress(jobId, configId);
}

function stopPolling(configId) {
    if (pollingIntervals[configId]) {
        clearInterval(pollingIntervals[configId]);
        delete pollingIntervals[configId];
    }
    const btn = document.querySelector('.sync-btn[data-config-id="' + configId + '"]');
    if (btn) {
        btn.disabled = false;
        btn.textContent = 'Sync Now';
    }
}

function fetchProgress(jobId, configId) {
    fetch('/dashboard/api/sync-progress/' + jobId + '/')
        .then(response => response.json())
        .then(data => {
            updateProgressColumn(configId, data);
            if (data.status === 'completed' || data.status === 'failed') {
                stopPolling(configId);
                setTimeout(function() { location.reload(); }, 2000);
            }
        })
        .catch(error => console.error('Error fetching progress:', error));
}

function updateProgressColumn(configId, data) {
    const progressEl = document.getElementById('progress-' + configId);
    if (!progressEl) return;

    if (data.status === 'running') {
        let html = '<div style="font-size: 0.85rem; line-height: 1.6;">';

        // Teams
        if (data.teams.total > 0) {
            const teamsDone = data.teams.synced + data.teams.failed;
            const teamsClass = teamsDone >= data.teams.total ? 'text-success' : (data.current_type === 'Team' ? 'text-primary' : 'text-muted');
            html += '<div class="' + teamsClass + '"><strong>Teams:</strong> ' + teamsDone + '/' + data.teams.total;
            if (data.teams.failed > 0) html += ' <span class="text-danger">(' + data.teams.failed + ' failed)</span>';
            html += '</div>';
        } else if (data.current_type === 'Team') {
            html += '<div class="text-primary"><strong>Teams:</strong> starting...</div>';
        }

        // Stadiums
        if (data.stadiums.total > 0) {
            const stadiumsDone = data.stadiums.synced + data.stadiums.failed;
            const stadiumsClass = stadiumsDone >= data.stadiums.total ? 'text-success' : (data.current_type === 'Stadium' ? 'text-primary' : 'text-muted');
            html += '<div class="' + stadiumsClass + '"><strong>Stadiums:</strong> ' + stadiumsDone + '/' + data.stadiums.total;
            if (data.stadiums.failed > 0) html += ' <span class="text-danger">(' + data.stadiums.failed + ' failed)</span>';
            html += '</div>';
        } else if (data.current_type === 'Stadium') {
            html += '<div class="text-primary"><strong>Stadiums:</strong> starting...</div>';
        }

        // Games
        if (data.games.total > 0) {
            const gamesDone = data.games.synced + data.games.failed;
            const gamesClass = gamesDone >= data.games.total ? 'text-success' : (data.current_type === 'Game' ? 'text-primary' : 'text-muted');
            html += '<div class="' + gamesClass + '"><strong>Games:</strong> ' + gamesDone + '/' + data.games.total;
            if (data.games.failed > 0) html += ' <span class="text-danger">(' + data.games.failed + ' failed)</span>';
            html += '</div>';
        } else if (data.current_type === 'Game') {
            html += '<div class="text-primary"><strong>Games:</strong> starting...</div>';
        }

        html += '</div>';
        progressEl.innerHTML = html;

    } else if (data.status === 'completed') {
        progressEl.innerHTML = '<span class="badge badge-success">Complete!</span> ' + data.synced + ' synced';
    } else if (data.status === 'failed') {
        progressEl.innerHTML = '<span class="badge badge-danger">Failed</span>';
    }
}
</script>
{% endblock %}