{% extends "common/base.html" %}
{% from "components/header.html" import header %}

{% block title %}Instances - DocuPulse{% endblock %}

{% block content %}
{{ header(
    title="Instances",
    description="Manage your DocuPulse instances",
    icon="fa-server",
    buttons=[
        {
            'text': 'Launch New Instance',
            'url': '#',
            'icon': 'fa-rocket',
            'class': 'btn-primary',
            'onclick': 'showAddInstanceModal()'
        },
        {
            'text': 'Add Existing Instance',
            'url': '#',
            'icon': 'fa-link',
            'class': 'btn-primary',
            'onclick': 'showAddExistingInstanceModal()'
        }
    ]
) }}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Company</th>
                                    <th>Rooms</th>
                                    <th>Conversations</th>
                                    <th>Data</th>
                                    <th>Payment Plan</th>
                                    <th>Main URL</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for instance in instances %}
                                <tr>
                                    <td>{{ instance.name }}</td>
                                    <td>{{ instance.company }}</td>
                                    <td>{{ instance.rooms_count }}</td>
                                    <td>{{ instance.conversations_count }}</td>
                                    <td>{{ "%.1f"|format(instance.data_size) }} GB</td>
                                    <td>{{ instance.payment_plan }}</td>
                                    <td>{{ instance.main_url }}</td>
                                    <td>
                                        <span class="badge bg-{{ 'success' if instance.status == 'active' else 'danger' }}">
                                            {{ instance.status|title }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button class="btn btn-sm btn-outline-primary" onclick="editInstance({{ instance.id }})">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" onclick="deleteInstance({{ instance.id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Instance Modal -->
<div class="modal fade" id="addInstanceModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Launch New Instance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addInstanceForm">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <div class="mb-3">
                        <label for="name" class="form-label">Instance Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="main_url" class="form-label">Main URL</label>
                        <input type="url" class="form-control" id="main_url" name="main_url" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitAddInstance()">Launch Instance</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Instance Modal -->
<div class="modal fade" id="editInstanceModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Instance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editInstanceForm">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" id="edit_instance_id">
                    <div class="mb-3">
                        <label for="edit_name" class="form-label">Instance Name</label>
                        <input type="text" class="form-control" id="edit_name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_main_url" class="form-label">Main URL</label>
                        <input type="url" class="form-control" id="edit_main_url" name="main_url" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitEditInstance()">Save Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Add Existing Instance Modal -->
<div class="modal fade" id="addExistingInstanceModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Existing Instance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addExistingInstanceForm">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <div class="mb-3">
                        <label for="existing_url" class="form-label">Instance URL</label>
                        <input type="url" class="form-control" id="existing_url" name="url" required onchange="updateInstanceFields()">
                    </div>
                    <div class="mb-3">
                        <label for="existing_name" class="form-label">Instance Name</label>
                        <input type="text" class="form-control" id="existing_name" name="name" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitAddExistingInstance()">Add Instance</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// Modal instances
let addInstanceModal;
let editInstanceModal;
let addExistingInstanceModal;

document.addEventListener('DOMContentLoaded', function() {
    addInstanceModal = new bootstrap.Modal(document.getElementById('addInstanceModal'));
    editInstanceModal = new bootstrap.Modal(document.getElementById('editInstanceModal'));
    addExistingInstanceModal = new bootstrap.Modal(document.getElementById('addExistingInstanceModal'));
});

// Show modals
function showAddInstanceModal() {
    document.getElementById('addInstanceForm').reset();
    addInstanceModal.show();
}

function showAddExistingInstanceModal() {
    document.getElementById('addExistingInstanceForm').reset();
    addExistingInstanceModal.show();
}

// CRUD operations
async function submitAddInstance() {
    const form = document.getElementById('addInstanceForm');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    try {
        const response = await fetch('/instances/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': formData.get('csrf_token')
            },
            body: JSON.stringify({
                name: data.name,
                company: data.name.charAt(0).toUpperCase() + data.name.slice(1),
                rooms_count: 0,
                conversations_count: 0,
                data_size: 0.0,
                payment_plan: 'Basic',
                main_url: data.main_url,
                status: 'inactive'
            })
        });

        if (!response.ok) throw new Error('Failed to add instance');

        const result = await response.json();
        addInstanceModal.hide();
        location.reload(); // Refresh to show new instance
    } catch (error) {
        alert('Error adding instance: ' + error.message);
    }
}

async function editInstance(id) {
    try {
        const response = await fetch(`/instances/${id}`);
        if (!response.ok) throw new Error('Failed to fetch instance');
        
        const instance = await response.json();
        
        // Populate form
        document.getElementById('edit_instance_id').value = instance.id;
        document.getElementById('edit_name').value = instance.name;
        document.getElementById('edit_main_url').value = instance.main_url;
        
        editInstanceModal.show();
    } catch (error) {
        alert('Error fetching instance: ' + error.message);
    }
}

async function submitEditInstance() {
    const form = document.getElementById('editInstanceForm');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    const id = document.getElementById('edit_instance_id').value;

    try {
        const response = await fetch(`/instances/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': formData.get('csrf_token')
            },
            body: JSON.stringify({
                name: data.name,
                company: data.name.charAt(0).toUpperCase() + data.name.slice(1),
                main_url: data.main_url
            })
        });

        if (!response.ok) throw new Error('Failed to update instance');

        editInstanceModal.hide();
        location.reload(); // Refresh to show updated instance
    } catch (error) {
        alert('Error updating instance: ' + error.message);
    }
}

async function deleteInstance(id) {
    if (!confirm('Are you sure you want to delete this instance?')) return;

    const form = document.getElementById('editInstanceForm');
    const formData = new FormData(form);

    try {
        const response = await fetch(`/instances/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-Token': formData.get('csrf_token')
            }
        });

        if (!response.ok) throw new Error('Failed to delete instance');

        location.reload(); // Refresh to show updated list
    } catch (error) {
        alert('Error deleting instance: ' + error.message);
    }
}

function updateInstanceFields() {
    const url = document.getElementById('existing_url').value;
    if (url) {
        try {
            const urlObj = new URL(url);
            const hostname = urlObj.hostname;
            const name = hostname.split('.')[0];
            document.getElementById('existing_name').value = name;
        } catch (e) {
            console.error('Invalid URL:', e);
        }
    }
}

async function submitAddExistingInstance() {
    const form = document.getElementById('addExistingInstanceForm');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    try {
        const response = await fetch('/instances/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': formData.get('csrf_token')
            },
            body: JSON.stringify({
                name: data.name,
                company: data.name.charAt(0).toUpperCase() + data.name.slice(1),
                rooms_count: 0,
                conversations_count: 0,
                data_size: 0.0,
                payment_plan: 'Basic',
                main_url: data.url,
                status: 'inactive'
            })
        });

        if (!response.ok) throw new Error('Failed to add instance');

        addExistingInstanceModal.hide();
        location.reload(); // Refresh to show new instance
    } catch (error) {
        alert('Error adding instance: ' + error.message);
    }
}
</script>
{% endblock %} 