{% extends "base.html" %}

{% block title %}Manage Codebase & Data{% endblock %}

{% block head %}
<style>
    .commit-row { cursor: pointer; transition: background 0.2s; }
    .commit-row:hover { background: rgba(255,255,255,0.05); }
    .commit-row.current { border-left: 4px solid var(--accent-success); background: rgba(25, 135, 84, 0.1); }
    .hash { font-family: monospace; color: var(--accent-info); font-weight: bold; }
    .author { font-size: 0.85rem; color: var(--text-muted); }
    .date { font-size: 0.85rem; color: var(--text-muted); }
    .status-card { border-radius: 12px; border: 1px solid var(--border-subtle); margin-bottom: 20px; }
    .nav-pills .nav-link { color: var(--text-muted); }
    .nav-pills .nav-link.active { background-color: var(--accent-primary); color: white; }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-gear-wide-connected me-2"></i>System Management</h2>
        <div class="d-flex gap-2">
            <button id="btn-backup-now" class="btn btn-outline-info">
                <i class="bi bi-cloud-upload me-1"></i> Backup Data Now
            </button>
            <a href="{{ url_for('dashboard.dashboard') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left me-1"></i> Back to Dashboard
            </a>
        </div>
    </div>

    <!-- Status Section -->
    <div class="card status-card bg-dark text-white shadow-sm">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6 border-end border-secondary">
                    <h6 class="text-info mb-3"><i class="bi bi-code-slash me-2"></i>Code Status</h6>
                    <p class="mb-1 small">Branch: <span class="badge bg-primary">{{ current_branch }}</span></p>
                    <p class="mb-0 small">Active Commit: <span class="hash">{{ current_hash }}</span></p>
                    
                    {% if uncommitted_changes %}
                    <div class="text-warning mt-2 small">
                        <i class="bi bi-exclamation-triangle-fill me-1"></i>
                        Uncommitted code changes detected.
                    </div>
                    {% endif %}
                </div>
                <div class="col-md-6 ps-md-4">
                    <h6 class="text-success mb-3"><i class="bi bi-database me-2"></i>Data Status (Hugging Face)</h6>
                    <p class="mb-1 small">Repo: <code class="text-light">{{ hf_repo_id }}</code></p>
                    <div id="backup-info" class="small text-muted">
                        Auto-backup syncs every 2 minutes.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation Tabs -->
    <ul class="nav nav-pills mb-3" id="manageTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="code-tab" data-bs-toggle="pill" data-bs-target="#code-pane" type="button" role="tab">
                <i class="bi bi-git me-1"></i> Code Updates
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="data-tab" data-bs-toggle="pill" data-bs-target="#data-pane" type="button" role="tab">
                <i class="bi bi-cloud-check me-1"></i> Data Backups
            </button>
        </li>
    </ul>

    <div class="tab-content" id="manageTabsContent">
        <!-- Code Tab -->
        <div class="tab-pane fade show active" id="code-pane" role="tabpanel">
            <div class="card bg-dark text-white border-secondary">
                <div class="table-responsive">
                    <table class="table table-dark table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Hash</th>
                                <th>Message</th>
                                <th>Author</th>
                                <th>When</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for commit in code_commits %}
                            <tr class="commit-row {{ 'current' if commit.hash == current_hash else '' }}">
                                <td><span class="hash">{{ commit.hash }}</span></td>
                                <td>{{ commit.message }}</td>
                                <td><span class="author">{{ commit.author }}</span></td>
                                <td><span class="date">{{ commit.date }}</span></td>
                                <td>
                                    {% if commit.hash != current_hash %}
                                    <button class="btn btn-sm btn-outline-warning btn-switch-code" data-hash="{{ commit.hash }}">
                                        Switch
                                    </button>
                                    {% else %}
                                    <span class="badge bg-success">Active</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Data Tab -->
        <div class="tab-pane fade" id="data-pane" role="tabpanel">
            <div class="card bg-dark text-white border-secondary">
                <div class="table-responsive">
                    <table class="table table-dark table-hover mb-0">
                        <thead>
                            <tr>
                                <th>HF Hash</th>
                                <th>Description</th>
                                <th>Timestamp</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for commit in hf_commits %}
                            <tr class="commit-row">
                                <td><span class="hash text-success">{{ commit.hash[:8] }}</span></td>
                                <td>{{ commit.message }}</td>
                                <td><span class="date">{{ commit.date }}</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-danger btn-restore-data" data-hash="{{ commit.hash }}">
                                        Restore
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                            {% if not hf_commits %}
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">
                                    No Hugging Face backups found or HF_TOKEN not set.
                                </td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Switch Code -->
<div class="modal fade" id="switchCodeModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-dark text-white border-warning">
            <div class="modal-header border-secondary">
                <h5 class="modal-title text-warning">Switch Application Version</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Switching code to commit <span id="target-code-hash" class="hash"></span>.</p>
                <div class="alert alert-info py-2 small">
                    <i class="bi bi-shield-check me-2"></i>
                    <strong>Safety:</strong> We'll backup your data to HF and stash any uncommitted code before switching.
                </div>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form action="{{ url_for('main.manage_checkout') }}" method="POST">
                    <input type="hidden" name="hash" id="form-code-hash">
                    <button type="submit" class="btn btn-warning">Backup & Switch Code</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Restore Data -->
<div class="modal fade" id="restoreDataModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-dark text-white border-danger">
            <div class="modal-header border-secondary">
                <h5 class="modal-title text-danger">Restore Database & Images</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Restoring data from HF snapshot <span id="target-data-hash" class="hash"></span>.</p>
                <div class="alert alert-danger py-2 small">
                    <i class="bi bi-exclamation-octagon-fill me-2"></i>
                    <strong>Warning:</strong> This will replace your current database and images with this older version.
                </div>
                <div class="alert alert-success py-2 small">
                    <i class="bi bi-shield-lock me-2"></i>
                    <strong>Protection:</strong> We'll create a safety backup of your CURRENT state before restoring.
                </div>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form action="{{ url_for('main.manage_restore') }}" method="POST">
                    <input type="hidden" name="hash" id="form-data-hash">
                    <button type="submit" class="btn btn-danger">Backup Current & Restore Old</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    const switchCodeModal = new bootstrap.Modal($('#switchCodeModal'));
    const restoreDataModal = new bootstrap.Modal($('#restoreDataModal'));
    
    $('.btn-switch-code').on('click', function() {
        const hash = $(this).data('hash');
        $('#target-code-hash').text(hash);
        $('#form-code-hash').val(hash);
        switchCodeModal.show();
    });

    $('.btn-restore-data').on('click', function() {
        const hash = $(this).data('hash');
        $('#target-data-hash').text(hash.substring(0, 8));
        $('#form-data-hash').val(hash);
        restoreDataModal.show();
    });

    $('#btn-backup-now').on('click', function() {
        const btn = $(this);
        const originalHtml = btn.html();
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Uploading...');
        
        $.ajax({
            url: '/manage/backup',
            type: 'POST',
            success: function() {
                btn.html('<i class="bi bi-check-lg me-1"></i> Success');
                setTimeout(() => { btn.prop('disabled', false).html(originalHtml); }, 3000);
            },
            error: function() {
                btn.html('<i class="bi bi-x-lg me-1"></i> Failed');
                btn.addClass('btn-outline-danger').removeClass('btn-outline-info');
                setTimeout(() => { btn.prop('disabled', false).html(originalHtml).removeClass('btn-outline-danger').addClass('btn-outline-info'); }, 3000);
            }
        });
    });
});
</script>
{% endblock %}