{% extends 'devtools/base.html' %}
{% load devtools_extras %}

{% block title %}Tables - DevTools{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1><i class="bi bi-table"></i> Table explorer</h1>
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#selectModelModal">
                <i class="bi bi-search"></i> Choose a table
            </button>
        </div>
    </div>
</div>

{% if error %}
    <div class="alert alert-danger">
        <i class="bi bi-exclamation-triangle"></i> {{ error }}
    </div>
{% endif %}

{% if model %}
    <!-- model information -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-info-circle"></i> Model information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Application:</strong> {{ app_label }}
                        </div>
                        <div class="col-md-3">
                            <strong>Model:</strong> {{ model_name }}
                        </div>
                        <div class="col-md-3">
                            <strong>Table:</strong> <code>{{ model._meta.db_table }}</code>
                        </div>
                        <div class="col-md-3">
                            <strong>Total:</strong> <span class="badge bg-info">{{ total_count }} record{{ total_count|pluralize }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- pagination and options -->
    <div class="row mb-3">
        <div class="col-md-6">
            <div class="btn-group" role="group">
                <input type="button" class="btn btn-outline-secondary" id="limit-25" value="25" onclick="changeLimit(25)">
                <input type="button" class="btn btn-outline-secondary" id="limit-50" value="50" onclick="changeLimit(50)">
                <input type="button" class="btn btn-outline-secondary" id="limit-100" value="100" onclick="changeLimit(100)">
                <input type="button" class="btn btn-outline-secondary" id="limit-200" value="200" onclick="changeLimit(200)">
            </div>
            <small class="text-muted ms-2">Records per page</small>
        </div>
        <div class="col-md-6 text-end">
            {% if total_pages > 1 %}
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        {% if has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?app={{ app_label }}&model={{ model_name }}&page={{ previous_page }}&limit={{ limit }}">
                                    <i class="bi bi-chevron-left"></i>
                                </a>
                            </li>
                        {% endif %}
                        
                        <li class="page-item active">
                            <span class="page-link">{{ current_page }} / {{ total_pages }}</span>
                        </li>
                        
                        {% if has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?app={{ app_label }}&model={{ model_name }}&page={{ next_page }}&limit={{ limit }}">
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
    </div>

    <!-- data tables -->
    {% if data %}
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        {% for field in fields %}
                            <th>
                                {{ field.verbose_name }}
                                <br><small class="text-muted">{{ field.type }}</small>
                            </th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in data %}
                        <tr>
                            {% for field in fields %}
                                <td>
                                    {% with value=row|lookup:field.name %}
                                        {% if value == 'NULL' %}
                                            <span class="text-muted fst-italic">NULL</span>
                                        {% elif value|length > 50 %}
                                            <span title="{{ value }}">{{ value|truncatechars:50 }}</span>
                                        {% else %}
                                            {{ value }}
                                        {% endif %}
                                    {% endwith %}
                                </td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> No data found for this model.
        </div>
    {% endif %}
{% else %}
    <div class="row">
        <div class="col-12">
            <div class="text-center py-5">
                <i class="bi bi-table display-1 text-muted"></i>
                <h3 class="mt-3">Select a table to explore</h3>
                <p class="text-muted">Click on "Choose a table" to start exploring the data.</p>
            </div>
        </div>
    </div>
{% endif %}

<!-- model selection modal -->
<div class="modal fade" id="selectModelModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Select a table to explore</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="modelsContainer">
                    <div class="text-center">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Custom filter to access dictionary values
Vue.filter('lookup', function (object, key) {
    return object[key];
});

function changeLimit(newLimit) {
    const url = new URL(window.location);
    url.searchParams.set('limit', newLimit);
    url.searchParams.set('page', 1);
    window.location = url;
}

// Mark the current limit button
document.addEventListener('DOMContentLoaded', function() {
    const currentLimit = new URLSearchParams(window.location.search).get('limit') || '50';
    const button = document.getElementById('limit-' + currentLimit);
    if (button) {
        button.classList.remove('btn-outline-secondary');
        button.classList.add('btn-secondary');
    }
});

// Loading models in the modal
document.getElementById('selectModelModal').addEventListener('show.bs.modal', function() {
    fetch('{% url "devtools:api_models" %}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayModels(data.data);
            } else {
                document.getElementById('modelsContainer').innerHTML = 
                    '<div class="alert alert-danger">Error loading models</div>';
            }
        })
        .catch(error => {
            document.getElementById('modelsContainer').innerHTML = 
                '<div class="alert alert-danger">Connection error</div>';
        });
});

function displayModels(apps) {
    let html = '';
    
    apps.forEach(app => {
        html += `
            <div class="mb-4">
                <h6><i class="bi bi-app"></i> ${app.app_verbose_name}</h6>
                <div class="row">
        `;
        
        app.models.forEach(model => {
            html += `
                <div class="col-md-6 mb-2">
                    <a href="?app=${model.app_label}&model=${model.name}" 
                       class="btn btn-outline-primary btn-sm w-100 text-start">
                        <i class="bi bi-table"></i> ${model.verbose_name}
                        <span class="badge bg-secondary float-end">${model.count}</span>
                    </a>
                </div>
            `;
        });
        
        html += `
                </div>
            </div>
        `;
    });
    
    document.getElementById('modelsContainer').innerHTML = html;
}
</script>
{% endblock %}