{% extends "base.html" %}

{% block title %}My Rotations - AISBF{% endblock %}

{% block content %}
<div class="container">
    <h1>My Rotations</h1>
    <p>Manage your personal rotation configurations</p>

    {% if success %}
    <div class="alert alert-success">{{ success }}</div>
    {% endif %}

    {% if error %}
    <div class="alert alert-error">{{ error }}</div>
    {% endif %}

    <div class="card">
        <h2>Rotation Configurations</h2>
        <div id="rotations-list">
            <!-- Rotations will be loaded here -->
        </div>
        <button class="btn btn-primary" onclick="showAddRotationModal()">Add New Rotation</button>
    </div>
</div>

<!-- Modal for adding/editing rotations -->
<div id="rotation-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modal-title">Add Rotation</h3>
            <button class="close-btn" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <form id="rotation-form">
                <div class="form-group">
                    <label for="rotation-name">Rotation Name:</label>
                    <input type="text" id="rotation-name" required>
                </div>
                <div class="form-group">
                    <label for="rotation-config">Rotation Configuration (JSON):</label>
                    <textarea id="rotation-config" rows="20" placeholder='{"model_name": "rotation-name", "providers": []}'></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let rotations = {{ user_rotations_json | safe }};
let currentEditingIndex = -1;

function renderRotations() {
    const container = document.getElementById('rotations-list');
    container.innerHTML = '';

    if (rotations.length === 0) {
        container.innerHTML = '<p class="empty-state">No rotations configured yet. Click "Add New Rotation" to get started.</p>';
        return;
    }

    rotations.forEach((rotation, index) => {
        const div = document.createElement('div');
        div.className = 'rotation-item';
        div.innerHTML = `
            <div class="rotation-header">
                <h3>${rotation.rotation_id}</h3>
                <div class="rotation-actions">
                    <button class="btn btn-secondary btn-sm" onclick="editRotation(${index})">Edit</button>
                    <button class="btn btn-danger btn-sm" onclick="deleteRotation('${rotation.rotation_id}')">Delete</button>
                </div>
            </div>
            <div class="rotation-details">
                <p><strong>Created:</strong> ${new Date(rotation.created_at).toLocaleString()}</p>
                <p><strong>Last Updated:</strong> ${new Date(rotation.updated_at).toLocaleString()}</p>
                <details>
                    <summary>Configuration (JSON)</summary>
                    <pre>${JSON.stringify(rotation.config, null, 2)}</pre>
                </details>
            </div>
        `;
        container.appendChild(div);
    });
}

function showAddRotationModal() {
    currentEditingIndex = -1;
    document.getElementById('modal-title').textContent = 'Add Rotation';
    document.getElementById('rotation-name').value = '';
    document.getElementById('rotation-config').value = '{"model_name": "my-rotation", "providers": []}';
    document.getElementById('rotation-modal').style.display = 'block';
}

function editRotation(index) {
    currentEditingIndex = index;
    const rotation = rotations[index];
    document.getElementById('modal-title').textContent = 'Edit Rotation';
    document.getElementById('rotation-name').value = rotation.rotation_id;
    document.getElementById('rotation-name').readOnly = true;
    document.getElementById('rotation-config').value = JSON.stringify(rotation.config, null, 2);
    document.getElementById('rotation-modal').style.display = 'block';
}

function closeModal() {
    document.getElementById('rotation-modal').style.display = 'none';
    document.getElementById('rotation-name').readOnly = false;
    currentEditingIndex = -1;
}

function deleteRotation(rotationName) {
    if (!confirm(`Are you sure you want to delete the rotation "${rotationName}"? This action cannot be undone.`)) return;

    fetch('{{ url_for(request, "/dashboard/user/rotations") }}/' + encodeURIComponent(rotationName), {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(response => {
        if (response.ok) {
            location.reload();
        } else {
            return response.json().then(data => {
                throw new Error(data.error || 'Failed to delete rotation');
            });
        }
    }).catch(error => {
        alert('Error: ' + error.message);
    });
}

// Handle form submission
document.getElementById('rotation-form').addEventListener('submit', function(e) {
    e.preventDefault();

    const rotationName = document.getElementById('rotation-name').value.trim();
    const configText = document.getElementById('rotation-config').value.trim();

    if (!rotationName) {
        alert('Rotation name is required');
        return;
    }

    if (!configText) {
        alert('Rotation configuration is required');
        return;
    }

    let configObj;
    try {
        configObj = JSON.parse(configText);
    } catch (e) {
        alert('Invalid JSON configuration: ' + e.message);
        return;
    }

    const formData = new FormData();
    formData.append('rotation_name', rotationName);
    formData.append('rotation_config', JSON.stringify(configObj));

    const url = '{{ url_for(request, "/dashboard/user/rotations") }}';
    const method = currentEditingIndex >= 0 ? 'PUT' : 'POST';

    fetch(url, {
        method: method,
        body: formData
    }).then(response => {
        if (response.ok) {
            closeModal();
            location.reload();
        } else {
            return response.text().then(text => {
                throw new Error(text || 'Failed to save rotation');
            });
        }
    }).catch(error => {
        alert('Error: ' + error.message);
    });
});

renderRotations();
</script>

<style>
.rotation-item {
    background: #1a1a2e;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
}

.rotation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.rotation-header h3 {
    margin: 0;
}

.rotation-actions {
    display: flex;
    gap: 0.5rem;
}

.rotation-details p {
    margin: 0.5rem 0;
}

.rotation-details pre {
    background: #0f3460;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.empty-state {
    text-align: center;
    color: #a0a0a0;
    padding: 2rem;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: #1a1a2e;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #0f3460;
}

.modal-header h3 {
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #e0e0e0;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #0f3460;
    border-radius: 4px;
    background: #16213e;
    color: #e0e0e0;
    font-family: monospace;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
    min-height: 300px;
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}
</style>
{% endblock %}