{% 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>Connection Token</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>
                                        <a href="{{ instance.main_url }}" 
                                           target="_blank" 
                                           class="text-decoration-none"
                                           style="color: var(--primary-color);">
                                            {{ instance.main_url }}
                                            <i class="fas fa-external-link-alt ms-1"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ 'success' if instance.status == 'active' else 'danger' }}" 
                                              data-bs-toggle="tooltip" 
                                              data-instance-id="{{ instance.id }}"
                                              data-token="{{ instance.connection_token }}"
                                              title="{{ instance.status_details }}">
                                            {{ instance.status|title }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if instance.connection_token %}
                                        <span class="badge bg-success" data-bs-toggle="tooltip" title="Instance is authenticated">
                                            Authenticated
                                        </span>
                                        {% else %}
                                        <span class="badge bg-warning" data-bs-toggle="tooltip" title="Click to authenticate instance">
                                            <a href="#" class="text-dark text-decoration-none" onclick="showAuthModal('{{ instance.main_url }}', {{ instance.id }})">
                                                Generate Token
                                            </a>
                                        </span>
                                        {% endif %}
                                    </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-info" onclick="window.location.href='/instances/{{ instance.id }}/detail'">
                                                <i class="fas fa-info-circle"></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="text-center mb-4">
                        <i class="fas fa-rocket fa-3x mb-3" style="color: var(--primary-color);"></i>
                        <h4>Ready to Launch?</h4>
                        <p class="text-muted">We'll guide you through the process of launching a new DocuPulse instance.</p>
                    </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="nextStepLaunchInstance()">
                    Next <i class="fas fa-arrow-right ms-1"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Launch Steps Modal -->
<div class="modal fade" id="launchStepsModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <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">
                <!-- Steps Navigation -->
                <div class="d-flex justify-content-between mb-4">
                    <div class="step-item active" data-step="1">
                        <div class="step-circle">1</div>
                        <div class="step-label">Connections</div>
                    </div>
                    <div class="step-item" data-step="2">
                        <div class="step-circle">2</div>
                        <div class="step-label">Configuration</div>
                    </div>
                    <div class="step-item" data-step="3">
                        <div class="step-circle">3</div>
                        <div class="step-label">Resources</div>
                    </div>
                    <div class="step-item" data-step="4">
                        <div class="step-circle">4</div>
                        <div class="step-label">Review</div>
                    </div>
                    <div class="step-item" data-step="5">
                        <div class="step-circle">5</div>
                        <div class="step-label">Launch</div>
                    </div>
                </div>

                <!-- Step Content -->
                <div class="step-content">
                    <!-- Step 1 -->
                    <div class="step-pane active" id="step1">
                        <h4>Connection Verification</h4>
                        <p class="text-muted mb-4">Let's verify that your connections are properly configured before proceeding.</p>
                        
                        <!-- Portainer Connection -->
                        <div class="connection-check mb-4">
                            <div class="d-flex align-items-center mb-2">
                                <i class="fas fa-server me-2"></i>
                                <h5 class="mb-0">Portainer Connection</h5>
                                <div class="ms-auto">
                                    <span class="connection-status" id="portainerStatus">
                                        <i class="fas fa-spinner fa-spin"></i> Checking...
                                    </span>
                                </div>
                            </div>
                            <div class="connection-details" id="portainerDetails">
                                <small class="text-muted">Verifying connection to Portainer...</small>
                            </div>
                        </div>

                        <!-- NGINX Connection -->
                        <div class="connection-check">
                            <div class="d-flex align-items-center mb-2">
                                <i class="fas fa-network-wired me-2"></i>
                                <h5 class="mb-0">NGINX Proxy Manager Connection</h5>
                                <div class="ms-auto">
                                    <span class="connection-status" id="nginxStatus">
                                        <i class="fas fa-spinner fa-spin"></i> Checking...
                                    </span>
                                </div>
                            </div>
                            <div class="connection-details" id="nginxDetails">
                                <small class="text-muted">Verifying connection to NGINX Proxy Manager...</small>
                            </div>
                        </div>

                        <!-- Retry Button -->
                        <div class="text-center mt-4">
                            <button class="btn btn-sm" 
                                    onclick="retryConnection('nginx')"
                                    style="background-color: var(--primary-color); color: white;">
                                <i class="fas fa-sync-alt me-1"></i> Retry
                            </button>
                        </div>
                    </div>

                    <!-- Step 2 -->
                    <div class="step-pane" id="step2">
                        <h4>Configuration</h4>
                        <p class="text-muted">Configure your instance settings.</p>
                    </div>

                    <!-- Step 3 -->
                    <div class="step-pane" id="step3">
                        <h4>Resources</h4>
                        <p class="text-muted">Set up your instance resources.</p>
                    </div>

                    <!-- Step 4 -->
                    <div class="step-pane" id="step4">
                        <h4>Review</h4>
                        <p class="text-muted">Review your instance configuration.</p>
                    </div>

                    <!-- Step 5 -->
                    <div class="step-pane" id="step5">
                        <h4>Launch</h4>
                        <p class="text-muted">Ready to launch your instance!</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="previousStep()">
                    <i class="fas fa-arrow-left me-1"></i> Previous
                </button>
                <button type="button" class="btn btn-primary" onclick="nextStep()">
                    Next <i class="fas fa-arrow-right ms-1"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.step-item {
    text-align: center;
    position: relative;
    flex: 1;
}

.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -50%;
    width: 100%;
    height: 2px;
    background-color: #e9ecef;
    z-index: 1;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    position: relative;
    z-index: 2;
}

.step-label {
    font-size: 0.875rem;
    color: #6c757d;
}

.step-item.active .step-circle {
    background-color: var(--primary-color);
    color: white;
}

.step-item.active .step-label {
    color: var(--primary-color);
    font-weight: 500;
}

.step-item.completed .step-circle {
    background-color: var(--primary-color);
    color: white;
}

.step-item.completed:not(:last-child)::after {
    background-color: var(--primary-color);
}

.step-pane {
    display: none;
}

.step-pane.active {
    display: block;
}

.connection-check {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
}

.connection-status {
    font-size: 0.875rem;
}

.connection-status.success {
    color: #198754;
}

.connection-status.error {
    color: #dc3545;
}

.connection-details {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
</style>

<!-- 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>

<!-- Auth Modal -->
<div class="modal fade" id="authModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Authenticate Instance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="authForm">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" id="instance_url" name="instance_url">
                    <input type="hidden" id="instance_id" name="instance_id">
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" name="password" 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="authenticateInstance()">Authenticate</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// Modal instances
let addInstanceModal;
let editInstanceModal;
let addExistingInstanceModal;
let authModal;
let launchStepsModal;
let currentStep = 1;

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'));
    authModal = new bootstrap.Modal(document.getElementById('authModal'));
    launchStepsModal = new bootstrap.Modal(document.getElementById('launchStepsModal'));
    
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Add refresh button to header
    const headerButtons = document.querySelector('.header-buttons');
    if (headerButtons) {
        const refreshButton = document.createElement('button');
        refreshButton.className = 'btn btn-outline-primary';
        refreshButton.innerHTML = '<i class="fas fa-sync-alt"></i> Refresh';
        refreshButton.onclick = function() {
            fetchCompanyNames();
        };
        headerButtons.appendChild(refreshButton);
    }
    
    // Wait a short moment to ensure the table is rendered
    setTimeout(() => {
        // Check statuses on page load
        checkAllInstanceStatuses();
        
        // Fetch company names for all instances
        fetchCompanyNames();
    }, 100);
    
    // Set up periodic status checks (every 30 seconds)
    setInterval(checkAllInstanceStatuses, 30000);
});

// Function to check status of all instances
async function checkAllInstanceStatuses() {
    const statusBadges = document.querySelectorAll('[data-instance-id]');
    for (const badge of statusBadges) {
        const instanceId = badge.dataset.instanceId;
        await checkInstanceStatus(instanceId);
    }
}

// Function to check status of a single instance
async function checkInstanceStatus(instanceId) {
    try {
        const response = await fetch(`/instances/${instanceId}/status`);
        if (!response.ok) throw new Error('Failed to check instance status');
        
        const data = await response.json();
        const badge = document.querySelector(`[data-instance-id="${instanceId}"]`);
        if (badge) {
            badge.className = `badge bg-${data.status === 'active' ? 'success' : 'danger'}`;
            badge.textContent = data.status.charAt(0).toUpperCase() + data.status.slice(1);
            
            // Parse the JSON string in status_details
            let tooltipContent = data.status;
            if (data.status_details) {
                try {
                    const details = JSON.parse(data.status_details);
                    tooltipContent = `Status: ${details.status}\nTimestamp: ${details.timestamp}`;
                    if (details.database) {
                        tooltipContent += `\nDatabase: ${details.database}`;
                    }
                } catch (e) {
                    tooltipContent = data.status_details;
                }
            }
            badge.title = tooltipContent;
            
            // Update tooltip
            const tooltip = bootstrap.Tooltip.getInstance(badge);
            if (tooltip) {
                tooltip.dispose();
            }
            new bootstrap.Tooltip(badge);
        }
    } catch (error) {
        console.error('Error checking instance status:', error);
    }
}

// Function to get JWT token using API key
async function getJWTToken(instanceUrl, apiKey) {
    try {
        const response = await fetch(`${instanceUrl}/api/admin/management-token`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-API-Key': apiKey
            }
        });

        if (!response.ok) {
            const errorText = await response.text();
            console.error(`HTTP error ${response.status}:`, errorText);
            throw new Error(`Server returned ${response.status}: ${errorText}`);
        }

        const data = await response.json();
        return data.token;
    } catch (error) {
        console.error('Error getting JWT token:', error);
        throw error;
    }
}

// Function to fetch instance statistics
async function fetchInstanceStats(instanceUrl, instanceId, jwtToken) {
    try {
        const response = await fetch(`${instanceUrl}/api/admin/statistics`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Authorization': `Bearer ${jwtToken}`
            }
        });

        if (!response.ok) {
            const errorText = await response.text();
            console.error(`HTTP error ${response.status}:`, errorText);
            throw new Error(`Server returned ${response.status}: ${errorText}`);
        }
        
        const data = await response.json();
        console.log('Received stats data:', data);

        const row = document.querySelector(`[data-instance-id="${instanceId}"]`).closest('tr');
        
        // Update rooms count
        const roomsCell = row.querySelector('td:nth-child(3)');
        if (roomsCell) {
            roomsCell.textContent = data.rooms || '0';
        }

        // Update conversations count
        const conversationsCell = row.querySelector('td:nth-child(4)');
        if (conversationsCell) {
            conversationsCell.textContent = data.conversations || '0';
        }

        // Update data usage
        const dataCell = row.querySelector('td:nth-child(5)');
        if (dataCell) {
            const dataSize = data.total_storage || 0;
            const dataSizeGB = (dataSize / (1024 * 1024 * 1024)).toFixed(1);
            dataCell.textContent = `${dataSizeGB} GB`;
        }

        return data;
    } catch (error) {
        console.error('Error fetching instance stats:', error);
        throw error;
    }
}

// Function to fetch company name from instance settings
async function fetchCompanyName(instanceUrl, instanceId) {
    const row = document.querySelector(`[data-instance-id="${instanceId}"]`).closest('tr');
    const companyCell = row.querySelector('td:nth-child(2)');
    
    // Show loading state
    if (companyCell) {
        companyCell.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
    }

    try {
        const apiKey = document.querySelector(`[data-instance-id="${instanceId}"]`).dataset.token;
        if (!apiKey) {
            throw new Error('No API key available');
        }

        console.log(`Getting JWT token for instance ${instanceId}`);
        const jwtToken = await getJWTToken(instanceUrl, apiKey);
        console.log('Got JWT token');

        // Fetch company name
        console.log(`Fetching company name for instance ${instanceId} from ${instanceUrl}/api/admin/settings`);
        const response = await fetch(`${instanceUrl}/api/admin/settings`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Authorization': `Bearer ${jwtToken}`
            }
        });

        if (!response.ok) {
            const errorText = await response.text();
            console.error(`HTTP error ${response.status}:`, errorText);
            throw new Error(`Server returned ${response.status}: ${errorText}`);
        }
        
        const data = await response.json();
        console.log('Received data:', data);

        if (companyCell) {
            companyCell.textContent = data.company_name || 'N/A';
        }

        // Fetch statistics using the same JWT token
        await fetchInstanceStats(instanceUrl, instanceId, jwtToken);

    } catch (error) {
        console.error('Error fetching company name:', error);
        if (companyCell) {
            const errorMessage = error.message || 'Unknown error';
            companyCell.innerHTML = `
                <span class="text-danger" 
                      data-bs-toggle="tooltip" 
                      data-bs-placement="top" 
                      title="${errorMessage}">
                    <i class="fas fa-exclamation-circle"></i> Error
                </span>`;
            
            // Initialize tooltip
            new bootstrap.Tooltip(companyCell.querySelector('[data-bs-toggle="tooltip"]'));

            // Also show error in stats cells
            const row = document.querySelector(`[data-instance-id="${instanceId}"]`).closest('tr');
            const statsCells = [
                row.querySelector('td:nth-child(3)'), // Rooms
                row.querySelector('td:nth-child(4)'), // Conversations
                row.querySelector('td:nth-child(5)')  // Data
            ];

            statsCells.forEach(cell => {
                if (cell) {
                    cell.innerHTML = `
                        <span class="text-danger" 
                              data-bs-toggle="tooltip" 
                              data-bs-placement="top" 
                              title="${errorMessage}">
                            <i class="fas fa-exclamation-circle"></i> Error
                        </span>`;
                    new bootstrap.Tooltip(cell.querySelector('[data-bs-toggle="tooltip"]'));
                }
            });
        }
    }
}

// Function to fetch company names for all instances
async function fetchCompanyNames() {
    const instances = document.querySelectorAll('[data-instance-id]');
    const loadingPromises = [];
    
    console.log('Starting to fetch company names and stats for all instances');
    
    for (const instance of instances) {
        const instanceId = instance.dataset.instanceId;
        const row = instance.closest('tr');
        
        // Debug: Log all cells in the row
        console.log(`Row for instance ${instanceId}:`, {
            cells: Array.from(row.querySelectorAll('td')).map(td => ({
                text: td.textContent.trim(),
                html: td.innerHTML.trim()
            }))
        });

        // Changed from nth-child(8) to nth-child(7) since Main URL is the 7th column
        const urlCell = row.querySelector('td:nth-child(7)');
        
        if (!urlCell) {
            console.error(`Could not find URL cell for instance ${instanceId}`);
            continue;
        }

        const urlLink = urlCell.querySelector('a');
        if (!urlLink) {
            console.error(`Could not find URL link for instance ${instanceId}`);
            continue;
        }

        const instanceUrl = urlLink.getAttribute('href');
        const token = instance.dataset.token;
        
        console.log(`Instance ${instanceId}:`, {
            url: instanceUrl,
            hasToken: !!token
        });

        if (instanceUrl && token) {
            loadingPromises.push(fetchCompanyName(instanceUrl, instanceId));
        } else {
            const cells = [
                row.querySelector('td:nth-child(2)'), // Company
                row.querySelector('td:nth-child(3)'), // Rooms
                row.querySelector('td:nth-child(4)'), // Conversations
                row.querySelector('td:nth-child(5)')  // Data
            ];

            cells.forEach(cell => {
                if (cell) {
                    cell.innerHTML = `
                        <span class="text-warning" 
                              data-bs-toggle="tooltip" 
                              data-bs-placement="top" 
                              title="${!instanceUrl ? 'No URL available' : 'No authentication token available'}">
                            <i class="fas fa-exclamation-triangle"></i> Not configured
                        </span>`;
                    new bootstrap.Tooltip(cell.querySelector('[data-bs-toggle="tooltip"]'));
                }
            });
        }
    }
    
    try {
        await Promise.all(loadingPromises);
        console.log('Finished fetching all company names and stats');
    } catch (error) {
        console.error('Error in fetchCompanyNames:', error);
    }
}

// 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 {
        // Find the row by looking for the edit button with the matching onclick handler
        const editButton = document.querySelector(`button[onclick="editInstance(${id})"]`);
        if (!editButton) {
            throw new Error('Instance row not found');
        }
        const row = editButton.closest('tr');
        if (!row) {
            throw new Error('Instance row not found');
        }

        // Get the name from the first cell
        const name = row.querySelector('td:first-child').textContent.trim();
        
        // Get the main URL from the link in the URL cell (7th column)
        const urlCell = row.querySelector('td:nth-child(7)');
        const urlLink = urlCell.querySelector('a');
        const mainUrl = urlLink ? urlLink.getAttribute('href') : urlCell.textContent.trim();

        // Populate form
        document.getElementById('edit_instance_id').value = id;
        document.getElementById('edit_name').value = name;
        document.getElementById('edit_main_url').value = mainUrl;
        
        editInstanceModal.show();
    } catch (error) {
        console.error('Error preparing instance edit:', error);
        alert('Error: ' + 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) {
            const errorText = await response.text();
            throw new Error(`Failed to update instance: ${errorText}`);
        }

        editInstanceModal.hide();
        location.reload(); // Refresh to show updated instance
    } catch (error) {
        console.error('Error updating instance:', error);
        alert('Error: ' + 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);
    }
}

function showAuthModal(instanceUrl, instanceId) {
    document.getElementById('instance_url').value = instanceUrl;
    document.getElementById('instance_id').value = instanceId;
    document.getElementById('authForm').reset();
    authModal.show();
}

async function authenticateInstance() {
    const form = document.getElementById('authForm');
    const formData = new FormData(form);
    const instanceUrl = formData.get('instance_url').replace(/\/+$/, ''); // Remove trailing slashes
    const instanceId = formData.get('instance_id');
    const email = formData.get('email');
    const password = formData.get('password');

    try {
        console.log('Attempting login to:', `${instanceUrl}/api/admin/login`);
        
        // First login to get token
        const loginResponse = await fetch(`${instanceUrl}/api/admin/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ email, password })
        });

        // Check content type
        const contentType = loginResponse.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            console.error('Unexpected content type:', contentType);
            const text = await loginResponse.text();
            console.error('Response text:', text);
            throw new Error(`Server returned non-JSON response (${contentType}). Please check if the instance is properly configured.`);
        }

        let responseData;
        try {
            responseData = await loginResponse.json();
            console.log('Login response:', responseData);
        } catch (e) {
            console.error('Failed to parse JSON response:', e);
            throw new Error('Invalid JSON response from server');
        }

        if (!loginResponse.ok) {
            throw new Error(responseData.message || 'Login failed');
        }

        if (responseData.status !== 'success') {
            throw new Error(responseData.message || 'Login failed');
        }

        const token = responseData.token;
        if (!token) {
            throw new Error('No token received from server');
        }

        // Then create management API key
        const keyResponse = await fetch(`${instanceUrl}/api/admin/management-api-key`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({
                name: `Connection from ${window.location.hostname}`
            })
        });

        // Check content type for key response
        const keyContentType = keyResponse.headers.get('content-type');
        if (!keyContentType || !keyContentType.includes('application/json')) {
            console.error('Unexpected content type for key response:', keyContentType);
            const text = await keyResponse.text();
            console.error('Key response text:', text);
            throw new Error(`Server returned non-JSON response for API key (${keyContentType})`);
        }

        let keyData;
        try {
            keyData = await keyResponse.json();
            console.log('API key response:', keyData);
        } catch (e) {
            console.error('Failed to parse JSON response for API key:', e);
            throw new Error('Invalid JSON response from server for API key');
        }

        if (!keyResponse.ok) {
            throw new Error(keyData.message || 'Failed to create API key');
        }

        const api_key = keyData.api_key;
        if (!api_key) {
            throw new Error('No API key received from server');
        }
        
        // Save the token to our database
        const saveResponse = await fetch(`/instances/${instanceId}/save-token`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': formData.get('csrf_token')
            },
            body: JSON.stringify({ token: api_key })
        });

        let saveData;
        try {
            saveData = await saveResponse.json();
            console.log('Save token response:', saveData);
        } catch (e) {
            console.error('Failed to parse JSON response for save token:', e);
            throw new Error('Invalid JSON response from server for save token');
        }

        if (!saveResponse.ok) {
            throw new Error(saveData.message || 'Failed to save token');
        }

        // Show success and refresh
        authModal.hide();
        location.reload();
    } catch (error) {
        console.error('Authentication error:', error);
        alert('Error: ' + error.message);
    }
}

function copyConnectionToken(button) {
    const input = button.previousElementSibling;
    input.select();
    document.execCommand('copy');
    
    // Show feedback
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-check"></i>';
    setTimeout(() => {
        button.innerHTML = originalText;
    }, 2000);
}

function nextStepLaunchInstance() {
    // Hide the initial modal
    addInstanceModal.hide();
    
    // Reset and show the steps modal
    currentStep = 1;
    updateStepDisplay();
    launchStepsModal.show();
    
    // Start verifying connections
    verifyConnections();
}

function updateStepDisplay() {
    // Update step indicators
    document.querySelectorAll('.step-item').forEach((item, index) => {
        const stepNum = index + 1;
        item.classList.remove('active', 'completed');
        if (stepNum === currentStep) {
            item.classList.add('active');
        } else if (stepNum < currentStep) {
            item.classList.add('completed');
        }
    });
    
    // Update step content
    document.querySelectorAll('.step-pane').forEach((pane, index) => {
        pane.classList.remove('active');
        if (index + 1 === currentStep) {
            pane.classList.add('active');
        }
    });
    
    // Update buttons
    const prevButton = document.querySelector('#launchStepsModal .btn-secondary');
    const nextButton = document.querySelector('#launchStepsModal .btn-primary');
    
    prevButton.style.display = currentStep === 1 ? 'none' : 'inline-block';
    nextButton.innerHTML = currentStep === 5 ? 'Launch <i class="fas fa-rocket ms-1"></i>' : 'Next <i class="fas fa-arrow-right ms-1"></i>';
}

function nextStep() {
    if (currentStep < 5) {
        // If we're on step 1, verify connections before proceeding
        if (currentStep === 1) {
            const portainerStatus = document.getElementById('portainerStatus');
            const nginxStatus = document.getElementById('nginxStatus');
            
            if (!portainerStatus.innerHTML.includes('Connected') || !nginxStatus.innerHTML.includes('Connected')) {
                alert('Please ensure all connections are working before proceeding.');
                return;
            }
        }
        
        currentStep++;
        updateStepDisplay();
    } else {
        // Handle launch
        console.log('Launching instance...');
    }
}

function previousStep() {
    if (currentStep > 1) {
        currentStep--;
        updateStepDisplay();
    }
}

async function verifyConnections() {
    // Verify Portainer connection
    try {
        const portainerResponse = await fetch('/api/admin/test-portainer-connection', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': document.querySelector('input[name="csrf_token"]').value
            },
            body: JSON.stringify({
                url: '{{ portainer_settings.url if portainer_settings else "" }}',
                api_key: '{{ portainer_settings.api_key if portainer_settings else "" }}'
            })
        });

        const portainerStatus = document.getElementById('portainerStatus');
        const portainerDetails = document.getElementById('portainerDetails');

        if (portainerResponse.ok) {
            portainerStatus.innerHTML = '<i class="fas fa-check-circle"></i> Connected';
            portainerStatus.className = 'connection-status success';
            portainerDetails.innerHTML = '<small class="text-success">Successfully connected to Portainer</small>';
        } else {
            const error = await portainerResponse.json();
            portainerStatus.innerHTML = '<i class="fas fa-times-circle"></i> Failed';
            portainerStatus.className = 'connection-status error';
            portainerDetails.innerHTML = `<small class="text-danger">${error.error || 'Failed to connect to Portainer'}</small>`;
        }
    } catch (error) {
        const portainerStatus = document.getElementById('portainerStatus');
        const portainerDetails = document.getElementById('portainerDetails');
        portainerStatus.innerHTML = '<i class="fas fa-times-circle"></i> Error';
        portainerStatus.className = 'connection-status error';
        portainerDetails.innerHTML = `<small class="text-danger">${error.message || 'Error checking Portainer connection'}</small>`;
    }

    // Verify NGINX connection
    try {
        const nginxResponse = await fetch('/api/admin/test-nginx-connection', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': document.querySelector('input[name="csrf_token"]').value
            },
            body: JSON.stringify({
                url: '{{ nginx_settings.url if nginx_settings else "" }}',
                username: '{{ nginx_settings.username if nginx_settings else "" }}',
                password: '{{ nginx_settings.password if nginx_settings else "" }}'
            })
        });

        const nginxStatus = document.getElementById('nginxStatus');
        const nginxDetails = document.getElementById('nginxDetails');

        if (nginxResponse.ok) {
            nginxStatus.innerHTML = '<i class="fas fa-check-circle"></i> Connected';
            nginxStatus.className = 'connection-status success';
            nginxDetails.innerHTML = '<small class="text-success">Successfully connected to NGINX Proxy Manager</small>';
        } else {
            const error = await nginxResponse.json();
            nginxStatus.innerHTML = '<i class="fas fa-times-circle"></i> Failed';
            nginxStatus.className = 'connection-status error';
            nginxDetails.innerHTML = `<small class="text-danger">${error.error || 'Failed to connect to NGINX Proxy Manager'}</small>`;
        }
    } catch (error) {
        const nginxStatus = document.getElementById('nginxStatus');
        const nginxDetails = document.getElementById('nginxDetails');
        nginxStatus.innerHTML = '<i class="fas fa-times-circle"></i> Error';
        nginxStatus.className = 'connection-status error';
        nginxDetails.innerHTML = `<small class="text-danger">${error.message || 'Error checking NGINX connection'}</small>`;
    }
}
</script>
{% endblock %} 