{% extends "admin_base.html" %}
{% load static %}

{% block title %}Tenant Management{% endblock %}
{% block page_title %}Tenant Management{% endblock %}
{% block page_description %}Manage all tenant organizations in the system{% endblock %}

{% block content %}
<!-- Quick Stats Row -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ total_tenants|default:0 }}</h3>
                    <p class="mb-0">Total Tenants</p>
                </div>
                <div>
                    <i class="fas fa-building fa-2x opacity-75 text-primary"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ active_tenants|default:0 }}</h3>
                    <p class="mb-0">Active</p>
                </div>
                <div>
                    <i class="fas fa-check-circle fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card warning">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ trial_tenants|default:0 }}</h3>
                    <p class="mb-0">Trial</p>
                </div>
                <div>
                    <i class="fas fa-clock fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card danger">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ expired_tenants|default:0 }}</h3>
                    <p class="mb-0">Expired</p>
                </div>
                <div>
                    <i class="fas fa-exclamation-triangle fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filters and Actions -->
<div class="admin-card mb-4">
    <div class="card-body">
        <div class="row align-items-end">
            <div class="col-lg-8">
                <form method="get" class="row g-3">
                    <div class="col-md-4">
                        <label for="search" class="form-label fw-semibold">Search</label>
                        <input type="text" class="form-control" name="search" id="search" 
                               placeholder="Name, subdomain, email..." value="{{ search }}">
                    </div>
                    <div class="col-md-3">
                        <label for="status" class="form-label fw-semibold">Status</label>
                        <select name="status" id="status" class="form-select">
                            <option value="">All Statuses</option>
                            {% for value, label in status_choices %}
                            <option value="{{ value }}" {% if status == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="plan" class="form-label fw-semibold">Plan</label>
                        <select name="plan" id="plan" class="form-select">
                            <option value="">All Plans</option>
                            <option value="basic" {% if plan == 'basic' %}selected{% endif %}>Basic</option>
                            <option value="standard" {% if plan == 'standard' %}selected{% endif %}>Standard</option>
                            <option value="premium" {% if plan == 'premium' %}selected{% endif %}>Premium</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-admin-primary w-100">
                            <i class="fas fa-search me-1"></i>Filter
                        </button>
                    </div>
                </form>
            </div>
            <div class="col-lg-4">
                <div class="d-flex gap-2 justify-content-lg-end">
                    <a href="{% url 'tenants_admin:tenant_create' %}" class="btn btn-admin-primary">
                        <i class="fas fa-plus me-2"></i>Add Tenant
                    </a>
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-cog me-1"></i>Actions
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" onclick="exportTenants()">
                                <i class="fas fa-download me-2"></i>Export CSV
                            </a></li>
                            <li><a class="dropdown-item" href="#" onclick="bulkEmailReminders()">
                                <i class="fas fa-envelope me-2"></i>Send Trial Reminders
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'tenants_admin:system_settings' %}">
                                <i class="fas fa-cogs me-2"></i>System Settings
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tenants Table -->
<div class="admin-card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">
                <i class="fas fa-building me-2"></i>All Tenants
            </h5>
            <div class="d-flex align-items-center gap-3">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="bulkSelect" onchange="toggleBulkSelect()">
                    <label class="form-check-label" for="bulkSelect">Bulk Select</label>
                </div>
                <small class="text-muted">{{ page_obj.paginator.count }} total</small>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th width="40" class="bulk-select-header d-none">
                            <input type="checkbox" class="form-check-input" id="selectAll">
                        </th>
                        <th>Organization</th>
                        <th>Tenant Code</th>
                        <th>Owner</th>
                        <th>Plan</th>
                        <th>Status</th>
                        <th>Days Remaining</th>
                        <th>Created</th>
                        <th width="120">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tenant in page_obj %}
                    <tr class="tenant-row" data-tenant-id="{{ tenant.id }}">
                        <td class="bulk-select-cell d-none">
                            <input type="checkbox" class="form-check-input tenant-checkbox" value="{{ tenant.id }}">
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="user-avatar me-3">
                                    {{ tenant.name.0|upper }}
                                </div>
                                <div>
                                    <div class="fw-semibold">{{ tenant.name }}</div>
                                    <small class="text-muted">{{ tenant.contact_email }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <code class="bg-light px-2 py-1 rounded">{{ tenant.tenant_code }}</code>
                                <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('{{ tenant.tenant_code }}')" title="Copy tenant code">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div>
                                <div class="fw-medium">{{ tenant.owner.get_full_name|default:tenant.owner.username }}</div>
                                <small class="text-muted">{{ tenant.owner.email }}</small>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-info">{{ tenant.get_plan_display }}</span>
                        </td>
                        <td>
                            <span class="badge bg-{% if tenant.status == 'active' %}success{% elif tenant.status == 'trial' %}warning{% elif tenant.status == 'expired' %}danger{% else %}secondary{% endif %}">
                                {{ tenant.get_status_display }}
                            </span>
                        </td>
                        <td>
                            {% if tenant.days_remaining > 0 %}
                                <span class="{% if tenant.days_remaining <= 3 %}text-danger{% elif tenant.days_remaining <= 7 %}text-warning{% else %}text-success{% endif %}">
                                    {{ tenant.days_remaining }} days
                                </span>
                            {% else %}
                                <span class="text-muted">Expired</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="text-muted">{{ tenant.created_at|date:"M d, Y" }}</span>
                        </td>
                        <td>
                            <div class="dropdown">
                                <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="{% url 'tenants_admin:tenant_detail' tenant.id %}">
                                        <i class="fas fa-eye me-2"></i>View Details
                                    </a></li>
                                    <li><a class="dropdown-item" href="{% url 'tenants_admin:tenant_edit' tenant.id %}">
                                        <i class="fas fa-edit me-2"></i>Edit
                                    </a></li>
                                    <li><a class="dropdown-item" href="#" onclick="loginAsTenant('{{ tenant.id }}')">
                                        <i class="fas fa-external-link-alt me-2"></i>Login as Tenant
                                    </a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="#" onclick="loginAsTenant('{{ tenant.id }}')">
                                        <i class="fas fa-sign-in-alt me-2"></i>Login As
                                    </a></li>
                                    <li><a class="dropdown-item" href="#" onclick="sendReminder('{{ tenant.id }}')">
                                        <i class="fas fa-envelope me-2"></i>Send Reminder
                                    </a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-warning" href="#" onclick="suspendTenant('{{ tenant.id }}')">
                                        <i class="fas fa-pause me-2"></i>Suspend
                                    </a></li>
                                    <li><a class="dropdown-item text-danger" href="#" onclick="deleteTenant('{{ tenant.id }}')">
                                        <i class="fas fa-trash me-2"></i>Delete
                                    </a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="9" class="text-center py-5">
                            <div class="text-muted">
                                <i class="fas fa-building fa-3x mb-3"></i>
                                <h5>No tenants found</h5>
                                <p>No tenants match your current filters.</p>
                                <a href="{% url 'tenants_admin:tenant_create' %}" class="btn btn-admin-primary">
                                    <i class="fas fa-plus me-2"></i>Create First Tenant
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
        <div class="card-footer">
            <nav aria-label="Tenants pagination">
                <ul class="pagination justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if plan %}&plan={{ plan }}{% endif %}">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if plan %}&plan={{ plan }}{% endif %}">{{ num }}</a>
                    </li>
                    {% endif %}
                    {% endfor %}
                    
                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if plan %}&plan={{ plan }}{% endif %}">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>

<!-- Bulk Actions Bar (Hidden by default) -->
<div id="bulkActionsBar" class="fixed-bottom bg-primary text-white p-3 d-none">
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <span id="selectedCount">0</span> tenants selected
            </div>
            <div class="d-flex gap-2">
                <button class="btn btn-light btn-sm" onclick="bulkStatusUpdate('active')">
                    <i class="fas fa-check me-1"></i>Activate
                </button>
                <button class="btn btn-warning btn-sm" onclick="bulkStatusUpdate('suspended')">
                    <i class="fas fa-pause me-1"></i>Suspend
                </button>
                <button class="btn btn-info btn-sm" onclick="bulkSendEmails()">
                    <i class="fas fa-envelope me-1"></i>Send Emails
                </button>
                <button class="btn btn-outline-light btn-sm" onclick="clearBulkSelection()">
                    <i class="fas fa-times me-1"></i>Clear
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let selectedTenants = new Set();

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        showAlert('Tenant code copied to clipboard!', 'success');
    }).catch(function() {
        // Fallback for older browsers
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        showAlert('Tenant code copied to clipboard!', 'success');
    });
}

function toggleBulkSelect() {
    const bulkSelect = document.getElementById('bulkSelect');
    const bulkElements = document.querySelectorAll('.bulk-select-header, .bulk-select-cell');
    
    if (bulkSelect.checked) {
        bulkElements.forEach(el => el.classList.remove('d-none'));
    } else {
        bulkElements.forEach(el => el.classList.add('d-none'));
        clearBulkSelection();
    }
}

function clearBulkSelection() {
    selectedTenants.clear();
    document.querySelectorAll('.tenant-checkbox').forEach(cb => cb.checked = false);
    document.getElementById('selectAll').checked = false;
    document.getElementById('bulkActionsBar').classList.add('d-none');
    updateSelectedCount();
}

function updateSelectedCount() {
    document.getElementById('selectedCount').textContent = selectedTenants.size;
    
    if (selectedTenants.size > 0) {
        document.getElementById('bulkActionsBar').classList.remove('d-none');
    } else {
        document.getElementById('bulkActionsBar').classList.add('d-none');
    }
}

// Event listeners
document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.tenant-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = this.checked;
        if (this.checked) {
            selectedTenants.add(cb.value);
        } else {
            selectedTenants.delete(cb.value);
        }
    });
    updateSelectedCount();
});

document.addEventListener('change', function(e) {
    if (e.target.classList.contains('tenant-checkbox')) {
        if (e.target.checked) {
            selectedTenants.add(e.target.value);
        } else {
            selectedTenants.delete(e.target.value);
        }
        updateSelectedCount();
        
        // Update select all checkbox
        const allCheckboxes = document.querySelectorAll('.tenant-checkbox');
        const checkedCheckboxes = document.querySelectorAll('.tenant-checkbox:checked');
        document.getElementById('selectAll').checked = allCheckboxes.length === checkedCheckboxes.length;
    }
});

// Action functions
function loginAsTenant(tenantId) {
    if (confirm('Login as this tenant? This will redirect you to their dashboard.')) {
        // Implement tenant login logic
        window.open('/admin/tenants/' + tenantId + '/login/', '_blank');
    }
}

function sendReminder(tenantId) {
    if (confirm('Send trial reminder email to this tenant?')) {
        fetch('/admin/tenants/' + tenantId + '/send-reminder/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('Reminder sent successfully!', 'success');
            } else {
                showAlert('Error: ' + data.error, 'danger');
            }
        });
    }
}

function suspendTenant(tenantId) {
    if (confirm('Suspend this tenant? They will lose access to their account.')) {
        updateTenantStatus(tenantId, 'suspended');
    }
}

function deleteTenant(tenantId) {
    const confirmText = 'DELETE';
    const userInput = prompt('This action cannot be undone. Type "' + confirmText + '" to confirm deletion:');
    
    if (userInput === confirmText) {
        fetch('/admin/tenants/' + tenantId + '/delete/', {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                showAlert('Error: ' + data.error, 'danger');
            }
        });
    }
}

function updateTenantStatus(tenantId, status) {
    fetch('/admin/tenants/' + tenantId + '/status/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'status=' + status
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            showAlert('Error: ' + data.error, 'danger');
        }
    });
}

function bulkStatusUpdate(status) {
    if (selectedTenants.size === 0) {
        showAlert('Please select tenants first', 'warning');
        return;
    }
    
    if (confirm(`Update status to "${status}" for ${selectedTenants.size} selected tenants?`)) {
        const tenantIds = Array.from(selectedTenants);
        
        fetch('/admin/tenants/bulk-status-update/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                tenant_ids: tenantIds,
                status: status
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(`Updated ${data.updated_count} tenants`, 'success');
                location.reload();
            } else {
                showAlert('Error: ' + data.error, 'danger');
            }
        });
    }
}

function bulkSendEmails() {
    if (selectedTenants.size === 0) {
        showAlert('Please select tenants first', 'warning');
        return;
    }
    
    if (confirm(`Send reminder emails to ${selectedTenants.size} selected tenants?`)) {
        const tenantIds = Array.from(selectedTenants);
        
        fetch('/admin/tenants/bulk-send-reminders/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                tenant_ids: tenantIds
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(`Sent emails to ${data.sent_count} tenants`, 'success');
            } else {
                showAlert('Error: ' + data.error, 'danger');
            }
        });
    }
}

function exportTenants() {
    window.location.href = '/admin/tenants/export/';
}

function bulkEmailReminders() {
    if (confirm('Send trial reminder emails to all tenants with trials expiring in the next 7 days?')) {
        fetch('/admin/tenants/send-trial-reminders/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(`Sent reminders to ${data.sent_count} tenants`, 'success');
            } else {
                showAlert('Error: ' + data.error, 'danger');
            }
        });
    }
}

function showAlert(message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'danger' ? 'exclamation-triangle' : 'info-circle'} me-2"></i>
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    const container = document.querySelector('.admin-main');
    container.insertBefore(alertDiv, container.firstChild);
    
    setTimeout(() => {
        const bsAlert = new bootstrap.Alert(alertDiv);
        bsAlert.close();
    }, 5000);
}

// Auto-refresh every 5 minutes to update days remaining
setInterval(() => {
    if (!document.hidden) {
        location.reload();
    }
}, 300000);
</script>
{% endblock %}