{% extends "admin/base_site.html" %}
{% load static %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'admin/css/changelists.css' %}">
<style>
    .table-list {
        margin: 20px 0;
    }
    .table-item {
        padding: 15px;
        margin: 10px 0;
        background: #f9f9f9;
        border-left: 4px solid #417690;
        display: flex;
        align-items: center;
    }
    .table-item:hover {
        background: #f0f0f0;
    }
    .table-item.configured {
        background: #e8f4f8;
        border-left-color: #79aec8;
        opacity: 0.7;
    }
    .table-checkbox {
        margin-right: 15px;
        transform: scale(1.3);
        cursor: pointer;
    }
    .table-details {
        flex-grow: 1;
    }
    .table-name {
        font-weight: bold;
        color: #333;
        font-size: 14px;
    }
    .table-schema {
        display: inline-block;
        background: #79aec8;
        color: white;
        padding: 2px 8px;
        border-radius: 3px;
        font-size: 12px;
        margin-left: 10px;
    }
    .table-status {
        color: #666;
        font-size: 12px;
        margin-top: 5px;
    }
    .table-comment {
        color: #888;
        font-size: 11px;
        font-style: italic;
        margin-top: 3px;
    }
    .status-badge {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 11px;
        margin-right: 5px;
    }
    .status-badge.enabled {
        background: #28a745;
        color: white;
    }
    .status-badge.disabled {
        background: #dc3545;
        color: white;
    }
    .status-badge.force {
        background: #ffc107;
        color: black;
    }
    .status-badge.configured {
        background: #6c757d;
        color: white;
    }
    .action-buttons {
        margin: 20px 0;
        text-align: right;
    }
    .btn-primary {
        background: #417690;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 14px;
        cursor: pointer;
        border-radius: 4px;
    }
    .btn-primary:hover {
        background: #356677;
    }
    .btn-primary:disabled {
        background: #ccc;
        cursor: not-allowed;
    }
    .filter-section {
        background: #f9f9f9;
        padding: 15px;
        margin: 15px 0;
        border-radius: 4px;
    }
    .filter-section label {
        margin-right: 15px;
        font-weight: normal;
    }
    .filter-section input[type="checkbox"] {
        margin-right: 5px;
    }
    .select-all-section {
        background: #e8f4f8;
        padding: 10px 15px;
        margin: 15px 0;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    .select-all-section input[type="checkbox"] {
        margin-right: 10px;
        transform: scale(1.3);
    }
    .stats-section {
        background: #fff;
        padding: 15px;
        margin: 15px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .stats-section strong {
        margin-right: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div id="content-main">
    <h1>Discover Database Tables</h1>
    
    <div class="stats-section">
        <strong>Total Tables: <span id="totalCount">{{ tables|length }}</span></strong>
        <strong>Unconfigured: <span id="unconfiguredCount">0</span></strong>
        <strong>Already Configured: <span id="configuredCount">0</span></strong>
        <strong>Selected: <span id="selectedCount">0</span></strong>
    </div>

    <div class="filter-section">
        <strong>Filters:</strong>
        <label>
            <input type="checkbox" id="hideConfigured" checked>
            Hide already configured tables
        </label>
        <label>
            <input type="checkbox" id="showRLSOnly">
            Show only RLS-enabled tables
        </label>
    </div>

    <div class="select-all-section">
        <input type="checkbox" id="selectAll">
        <label for="selectAll" style="margin: 0;">Select/Deselect All Visible Tables</label>
    </div>

    <form method="post" action="{% url 'admin:create_table_configs' %}" id="tableForm">
        {% csrf_token %}
        <div class="table-list" id="tableList">
            {% for table in tables %}
            <div class="table-item {% if table.is_configured %}configured{% endif %}" 
                 data-configured="{{ table.is_configured|lower }}"
                 data-rls-enabled="{{ table.rls_enabled|lower }}">
                <input type="checkbox" 
                       class="table-checkbox" 
                       name="tables" 
                       value="{{ table.full_table_name }}|{{ table.rls_enabled }}|{{ table.force_rls }}"
                       {% if table.is_configured %}disabled{% endif %}>
                <div class="table-details">
                    <div class="table-name">
                        {{ table.full_table_name }}
                        <span class="table-schema">{{ table.schema }}</span>
                    </div>
                    <div class="table-status">
                        {% if table.is_configured %}
                        <span class="status-badge configured">Already Configured</span>
                        {% endif %}
                        {% if table.rls_enabled %}
                        <span class="status-badge enabled">RLS Enabled</span>
                        {% else %}
                        <span class="status-badge disabled">RLS Disabled</span>
                        {% endif %}
                        {% if table.force_rls %}
                        <span class="status-badge force">Force RLS</span>
                        {% endif %}
                    </div>
                    {% if table.table_comment %}
                    <div class="table-comment">
                        {{ table.table_comment }}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% empty %}
            <p>No tables found in the database.</p>
            {% endfor %}
        </div>

        <div class="action-buttons">
            <button type="submit" class="btn-primary" id="submitBtn">
                Create Configurations for Selected Tables
            </button>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('.table-checkbox:not([disabled])');
        const selectAllCheckbox = document.getElementById('selectAll');
        const hideConfiguredCheckbox = document.getElementById('hideConfigured');
        const showRLSOnlyCheckbox = document.getElementById('showRLSOnly');
        const selectedCountSpan = document.getElementById('selectedCount');
        const configuredCountSpan = document.getElementById('configuredCount');
        const unconfiguredCountSpan = document.getElementById('unconfiguredCount');
        const submitBtn = document.getElementById('submitBtn');
        const tableItems = document.querySelectorAll('.table-item');

        // Calculate initial stats
        function updateStats() {
            let configuredCount = 0;
            let unconfiguredCount = 0;
            let selectedCount = 0;

            tableItems.forEach(item => {
                const isConfigured = item.dataset.configured === 'true';
                if (isConfigured) {
                    configuredCount++;
                } else {
                    unconfiguredCount++;
                    const checkbox = item.querySelector('.table-checkbox');
                    if (checkbox && checkbox.checked) {
                        selectedCount++;
                    }
                }
            });

            configuredCountSpan.textContent = configuredCount;
            unconfiguredCountSpan.textContent = unconfiguredCount;
            selectedCountSpan.textContent = selectedCount;
            submitBtn.disabled = selectedCount === 0;
        }

        // Apply filters
        function applyFilters() {
            const hideConfigured = hideConfiguredCheckbox.checked;
            const showRLSOnly = showRLSOnlyCheckbox.checked;

            tableItems.forEach(item => {
                const isConfigured = item.dataset.configured === 'true';
                const isRLSEnabled = item.dataset.rlsEnabled === 'true';

                let shouldShow = true;

                if (hideConfigured && isConfigured) {
                    shouldShow = false;
                }

                if (showRLSOnly && !isRLSEnabled) {
                    shouldShow = false;
                }

                item.style.display = shouldShow ? 'flex' : 'none';
            });

            updateStats();
        }

        // Select/deselect all visible tables
        selectAllCheckbox.addEventListener('change', function() {
            const visibleCheckboxes = Array.from(checkboxes).filter(cb => {
                const item = cb.closest('.table-item');
                return item.style.display !== 'none';
            });

            visibleCheckboxes.forEach(checkbox => {
                checkbox.checked = selectAllCheckbox.checked;
            });

            updateStats();
        });

        // Update count when individual checkboxes change
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                updateStats();
                
                // Update select all checkbox state
                const visibleCheckboxes = Array.from(checkboxes).filter(cb => {
                    const item = cb.closest('.table-item');
                    return item.style.display !== 'none';
                });
                const allChecked = visibleCheckboxes.length > 0 && 
                                 visibleCheckboxes.every(cb => cb.checked);
                selectAllCheckbox.checked = allChecked;
            });
        });

        // Apply filters when filter checkboxes change
        hideConfiguredCheckbox.addEventListener('change', applyFilters);
        showRLSOnlyCheckbox.addEventListener('change', applyFilters);

        // Initial filter application
        applyFilters();
    });
</script>
{% endblock %}