{% extends "base/base.html" %}

{% block title %}{{ model_name }} Administration{% endblock %}

{% set include_sidebar_and_header = True %}

{% block extra_head %}
<style>
    .admin-content {
        padding: 2rem;
        max-width: 1400px;
        margin: 0 auto;
    }

    .success-banner {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 1.25rem;
        padding: 0.75rem 1rem;
        border-radius: var(--border-radius, 6px);
        background: rgba(34, 197, 94, 0.12);
        border: 1px solid rgba(34, 197, 94, 0.4);
        color: #15803d;
    }

    .dark-theme .success-banner {
        background: rgba(34, 197, 94, 0.15);
        color: #4ade80;
    }

    .success-banner-icon {
        font-weight: 700;
    }

    .success-banner-text {
        flex: 1;
    }

    .success-banner-close {
        background: none;
        border: none;
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        color: inherit;
        opacity: 0.7;
    }

    .success-banner-close:hover {
        opacity: 1;
    }

    .page-header {
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .page-title {
        color: var(--text-primary-light);
        font-size: 1.5rem;
        font-weight: 600;
    }

    .dark-theme .page-title {
        color: var(--text-primary-dark);
    }

    /* Action Buttons */
    .action-buttons {
        display: flex;
        gap: 0.5rem;
    }

    .action-button {
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-radius: var(--border-radius-md);
        font-weight: 500;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
    }

    .add-button {
        background: var(--primary-color);
        color: white;
        text-decoration: none;
    }

    .add-button:hover {
        background: var(--primary-dark);
    }

    .update-button {
        background: #F59E0B;  /* Amber-500 - softer yellow */
        color: white;
        text-decoration: none;
    }

    .update-button:hover {
        background: #D97706;  /* Amber-600 */
    }

    .delete-button {
        background: #EF4444;  /* Red-500 - softer red */
        color: white;
        text-decoration: none;
    }

    .delete-button:hover {
        background: #DC2626;  /* Red-600 */
    }

    .hidden {
        display: none;
    }

    /* Search Bar */
    .search-container {
        background: var(--bg-primary-light);
        border: 1px solid var(--border-light);
        border-radius: var(--border-radius-lg);
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .dark-theme .search-container {
        background: var(--bg-primary-dark);
        border-color: var(--border-dark);
    }

    .search-group {
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }

    .search-button {
        background: var(--primary-color);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: var(--border-radius-md);
        border: none;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .search-button:hover {
        background: var(--primary-dark);
    }

    /* Select and Input Styling */
    .column-select select, .search-input {
        padding: 0.5rem;
        border: 1px solid var(--border-light);
        border-radius: var(--border-radius-md);
        background: var(--bg-secondary-light);
        color: var(--text-primary-light);
        font-size: 0.875rem;
    }

    .dark-theme .column-select select,
    .dark-theme .search-input {
        background: var(--bg-secondary-dark);
        border-color: var(--border-dark);
        color: var(--text-primary-dark);
    }

    .column-select select {
        min-width: 150px;
    }

    .search-input {
        flex: 1;
        min-width: 200px;
    }

    .search-input::placeholder {
        color: var(--text-secondary-light);
    }

    .dark-theme .search-input::placeholder {
        color: var(--text-secondary-dark);
    }

    /* Table Styling */
    .table-container {
        background: var(--bg-primary-light);
        border: 1px solid var(--border-light);
        border-radius: var(--border-radius-lg);
        margin-bottom: 1.5rem;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .dark-theme .table-container {
        background: var(--bg-primary-dark);
        border-color: var(--border-dark);
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875rem;
    }

    .data-table th {
        background: var(--bg-secondary-light);
        color: var(--text-secondary-light);
        font-weight: 600;
        text-align: left;
        padding: 0.75rem 1rem;
        border-bottom: 2px solid var(--border-light);
    }

    .dark-theme .data-table th {
        background: var(--bg-secondary-dark);
        color: var(--text-secondary-dark);
        border-bottom-color: var(--border-dark);
    }

    .data-table td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-light);
        color: var(--text-primary-light);
    }

    .dark-theme .data-table td {
        border-bottom-color: var(--border-dark);
        color: var(--text-primary-dark);
    }

    .data-table tr:last-child td {
        border-bottom: none;
    }

    .data-table tr:hover {
        background: var(--bg-secondary-light);
    }

    .dark-theme .data-table tr:hover {
        background: var(--bg-secondary-dark);
    }

    /* Checkbox styling */
    .checkbox-cell {
        width: 40px;
        text-align: center;
    }

    .checkbox-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-checkbox {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    /* Pagination Controls */
    .pagination-controls {
        background: var(--bg-primary-light);
        border: 1px solid var(--border-light);
        border-radius: var(--border-radius-lg);
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .dark-theme .pagination-controls {
        background: var(--bg-primary-dark);
        border-color: var(--border-dark);
    }

    .rows-per-page-form select {
        padding: 0.5rem;
        border: 1px solid var(--border-light);
        border-radius: var(--border-radius-md);
        background: var(--bg-secondary-light);
        color: var(--text-primary-light);
    }

    .dark-theme .rows-per-page-form select {
        background: var(--bg-secondary-dark);
        border-color: var(--border-dark);
        color: var(--text-primary-dark);
    }

    .pagination-buttons {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .pagination-buttons button {
        padding: 0.5rem 1rem;
        border: 1px solid var(--border-light);
        border-radius: var(--border-radius-md);
        background: var(--bg-secondary-light);
        color: var(--text-primary-light);
        cursor: pointer;
        transition: all 0.2s;
    }

    .dark-theme .pagination-buttons button {
        background: var(--bg-secondary-dark);
        border-color: var(--border-dark);
        color: var(--text-primary-dark);
    }

    .pagination-buttons button:hover:not(:disabled) {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

    .pagination-buttons button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pagination-info {
        color: var(--text-secondary-light);
        font-size: 0.875rem;
    }

    .dark-theme .pagination-info {
        color: var(--text-secondary-dark);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .admin-content {
            padding: 1rem;
        }

        .page-header {
            flex-direction: column;
            gap: 1rem;
            align-items: flex-start;
        }

        .search-group {
            flex-direction: column;
        }

        .search-button {
            padding: 0.75rem;
        }

        .pagination-controls {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
        }

        .pagination-buttons {
            justify-content: center;
        }

        .action-buttons {
            width: 100%;
            flex-direction: column;
        }

        .action-button {
            width: 100%;
            justify-content: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="admin-content">
    {% if success_message %}
    <div class="success-banner" id="successBanner" role="status">
        <span class="success-banner-icon">✓</span>
        <span class="success-banner-text">{{ success_message }}</span>
        <button type="button" class="success-banner-close"
                onclick="document.getElementById('successBanner').remove()"
                aria-label="Dismiss">&times;</button>
    </div>
    <script>
        // Auto-dismiss and strip the ?success param so a refresh doesn't re-show it.
        setTimeout(function () {
            var b = document.getElementById('successBanner');
            if (b) b.remove();
        }, 4000);
        if (window.history.replaceState) {
            var url = new URL(window.location);
            url.searchParams.delete('success');
            window.history.replaceState({}, '', url);
        }
    </script>
    {% endif %}
    <div class="page-header">
        <h1 class="page-title">{{ model_name }} Administration</h1>
        <div class="action-buttons">
            {% if 'create' in allowed_actions %}
            <a href="{{ url_prefix }}/{{ model_name }}/create"
               class="add-button action-button"
               id="createButton"
               hx-get="{{ url_prefix }}/{{ model_name }}/create_page"
               hx-target="body">
                + Add {{ model_name }}
            </a>
            {% endif %}

            {% if 'update' in allowed_actions %}
            <a href="#"
               class="update-button action-button hidden"
               id="updateButton"
               onclick="handleUpdate()">
                ✎ Update
            </a>
            {% endif %}

            {% if 'delete' in allowed_actions %}
            <button class="delete-button action-button hidden"
                    id="deleteButton"
                    onclick="handleDelete()">
                🗑 Delete Selected
            </button>
            {% endif %}
        </div>
    </div>

    <!-- Search Bar -->
    <div class="search-container">
        <div class="search-group">
            <div class="column-select">
                <select name="column-to-search"
                        hx-get="{{ url_prefix }}/{{ model_name }}/get_model_list"
                        hx-target="#model-list"
                        hx-trigger="change"
                        hx-include="[name='search-input']">
                    {% for header in table_columns %}
                    <option value="{{ header }}" {% if selected_column == header %}selected{% endif %}>
                        {{ header }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <input type="text"
                   name="search-input"
                   class="search-input"
                   placeholder="Search..."
                   hx-get="{{ url_prefix }}/{{ model_name }}/get_model_list"
                   hx-target="#model-list"
                   hx-trigger="keyup changed delay:500ms, search"
                   hx-include="[name='column-to-search']">
            <button class="search-button"
                    hx-get="{{ url_prefix }}/{{ model_name }}/get_model_list"
                    hx-target="#model-list"
                    hx-include="[name='column-to-search'],[name='search-input']">
                Search
            </button>
        </div>
    </div>

    <div class="model-list-container">
        {% include 'admin/model/components/list_content.html' %}
    </div>
</div>

<script>
    function updateActionButtons() {
        const checkedBoxes = document.querySelectorAll('input[name="rowSelect"]:checked');
        const createButton = document.getElementById('createButton');
        const updateButton = document.getElementById('updateButton');
        const deleteButton = document.getElementById('deleteButton');

        if (checkedBoxes.length === 0) {
            if (createButton) createButton.classList.remove('hidden');
            if (updateButton) updateButton.classList.add('hidden');
            if (deleteButton) deleteButton.classList.add('hidden');
        } else if (checkedBoxes.length === 1) {
            if (createButton) createButton.classList.add('hidden');
            if (updateButton) updateButton.classList.remove('hidden');
            if (deleteButton) deleteButton.classList.remove('hidden');
        } else {
            if (createButton) createButton.classList.add('hidden');
            if (updateButton) updateButton.classList.add('hidden');
            if (deleteButton) deleteButton.classList.remove('hidden');
        }
    }

    function handleSelectAll(checkbox) {
        const rowCheckboxes = document.querySelectorAll('input[name="rowSelect"]');
        rowCheckboxes.forEach(box => box.checked = checkbox.checked);
        updateActionButtons();
    }

    function handleRowSelect() {
        updateActionButtons();

        // Update "select all" checkbox
        const allCheckboxes = document.querySelectorAll('input[name="rowSelect"]');
        const checkedBoxes = document.querySelectorAll('input[name="rowSelect"]:checked');
        const selectAllCheckbox = document.querySelector('input[name="select-all"]');

        selectAllCheckbox.checked = allCheckboxes.length === checkedBoxes.length;
    }

    function convertValue(value, type) {
        if (!type) {
            return value;
        }

        // Normalize the type by removing SQL-specific prefixes/suffixes and converting to lowercase
        const baseType = type.toString().toLowerCase()
            .replace(/(sql|types|py|_type|\(.*\))/g, '')
            .trim();

        switch(baseType) {
            // Integer types
            case 'int':
            case 'integer':
            case 'bigint':
            case 'smallint':
                const intValue = parseInt(value, 10);
                if (isNaN(intValue)) {
                    throw new Error(`Invalid integer value: ${value}`);
                }
                return intValue;

            // Float types
            case 'float':
            case 'real':
            case 'double':
            case 'numeric':
            case 'decimal':
                const floatValue = parseFloat(value);
                if (isNaN(floatValue)) {
                    throw new Error(`Invalid float value: ${value}`);
                }
                return floatValue;

            // Boolean types
            case 'bool':
            case 'boolean':
                if (typeof value === 'boolean') return value;
                const strValue = String(value).toLowerCase();
                if (!['true', 'false', '0', '1'].includes(strValue)) {
                    throw new Error(`Invalid boolean value: ${value}`);
                }
                return ['true', '1'].includes(strValue);

            // UUID types
            case 'uuid':
                const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
                if (!uuidRegex.test(value)) {
                    throw new Error(`Invalid UUID format: ${value}`);
                }
                return value;

            // String types
            case 'str':
            case 'string':
            case 'text':
            case 'varchar':
            case 'char':
                return String(value);

            // Default case for unknown types
            default:
                return value;
        }
    }

    async function handleDelete() {
        const checkedBoxes = document.querySelectorAll('input[name="rowSelect"]:checked');
        if (checkedBoxes.length === 0) {
            alert('Please select items to delete');
            return;
        }

        if (!confirm('Are you sure you want to delete the selected items?')) {
            return;
        }

        const modelList = document.getElementById('model-list');
        const pkType = modelList.dataset.pkType;

        // Get current page and rows per page
        const paginationInfo = document.querySelector('.pagination-info');
        const currentPageMatch = paginationInfo?.textContent.match(/Page (\d+) of/);
        const currentPage = currentPageMatch ? currentPageMatch[1] : '1';

        const rowsPerPageSelect = document.querySelector('[name="rows-per-page-select"]');
        const rowsPerPage = rowsPerPageSelect ? rowsPerPageSelect.value : '10';

        // Convert and validate IDs
        const ids = Array.from(checkedBoxes).map(box => {
            const rawValue = box.value.trim();
            if (pkType === 'int') {
                const num = parseInt(rawValue, 10);
                if (isNaN(num)) {
                    throw new Error(`Invalid integer value: ${rawValue}`);
                }
                return num;
            }
            return rawValue;
        });

        // Log the IDs being sent for debugging
        console.log('Sending delete request for IDs:', ids);

        try {
            const response = await fetch(`{{ url_prefix }}/{{ model_name }}/bulk-delete?page=${currentPage}&rows-per-page-select=${rowsPerPage}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    ids: ids,
                    page: parseInt(currentPage),
                    rows_per_page: parseInt(rowsPerPage)
                })
            });

            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.detail?.[0]?.msg || 'Error deleting items');
            }

            const htmlContent = await response.text();
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = htmlContent;
            htmx.process(tempDiv);
            modelList.replaceWith(tempDiv.firstElementChild);
            updateActionButtons();

        } catch (error) {
            alert(error.message || 'Failed to delete items');
        }
    }

    function handleUpdate() {
        const checkedBox = document.querySelector('input[name="rowSelect"]:checked');
        const id = checkedBox.value;
        window.location.href = `{{ url_prefix }}/{{ model_name }}/update/${id}`;
    }

    // Initialize event listeners when content is loaded or updated
    document.addEventListener('htmx:afterSwap', function() {
        updateActionButtons();
    });

    // Initialize when the page first loads
    document.addEventListener('DOMContentLoaded', function() {
        updateActionButtons();
    });
</script>
{% endblock %}