{% extends "base.html" %}

{% block title %}Session Dashboard{% endblock %}

{% block head %}
<style>
    .name-column {
        word-wrap: break-word;
        white-space: normal;
        max-width: 250px; /* Default max-width for larger screens */
    }
    @media (max-width: 768px) { /* For medium and smaller devices */
        .name-column {
            max-width: 25%; /* No more than 1/4th of the screen */
        }
    }
    .table-responsive {
        overflow-x: auto;
    }
    th:first-child, td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #212529; /* Match table background */
    }
    th:nth-child(2), td:nth-child(2) {
        position: sticky;
        left: 40px; /* Adjust based on the width of the first column */
        z-index: 2;
        background-color: #212529;
    }

    /* Enhanced table styling */
    .table {
        --bs-table-bg: transparent;
        --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
        --bs-table-active-bg: rgba(255, 255, 255, 0.06);
        --bs-table-hover-bg: rgba(13, 110, 253, 0.1);
        color: #e9ecef;
        border-color: #343a40;
    }

    .table th {
        background-color: #212529;
        color: #adb5bd;
        font-weight: 600;
        border-top: none;
    }

    .table td {
        border-color: #343a40;
        vertical-align: middle;
    }

    /* Enhanced badges */
    .badge {
        font-weight: 500;
        padding: 0.5em 0.75em;
    }

    .badge.bg-success {
        background-color: #198754 !important;
        color: white;
    }

    .badge.bg-secondary {
        background-color: #6c757d !important;
        color: white;
    }

    /* Enhanced button styling */
    .btn-group .btn {
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .btn-primary {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
    }

    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }

    .btn-secondary:hover {
        background-color: #5c636a;
        border-color: #565e64;
    }

    .btn-info {
        background-color: #17a2b8;
        border-color: #17a2b8;
    }

    .btn-info:hover {
        background-color: #138496;
        border-color: #117a8b;
    }

    /* Size column styling */
    .size-column {
        font-weight: 600;
        color: #4db8ff;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4" style="width: 90%; margin: auto;">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <h2>Session Dashboard</h2>
        <button id="delete-selected-btn" class="btn btn-danger" style="display: none;">Delete Selected</button>
    </div>

    <div class="table-responsive">
        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th scope="col" style="width: 3%;">S.No.</th>
                    <th scope="col" style="width: 3%;"><input type="checkbox" id="select-all-checkbox"></th>
                    <th scope="col" class="name-column">Name</th>
                    <th scope="col">Created At</th>
                    <th scope="col">Pages</th>
                    <th scope="col">Questions</th>
                    {% if show_size %}
                    <th scope="col">Size</th>
                    {% endif %}
                    <th scope="col">Status</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for session in sessions %}
                <tr data-session-id="{{ session.id }}">
                    <td>{{ loop.index }}</td>
                    <td><input type="checkbox" class="session-checkbox"></td>
                    <td class="editable-name name-column">
                        <span class="session-name">{{ session.name or session.original_filename }}</span>
                        <i class="fas fa-pencil-alt edit-name-icon ms-2" style="cursor: pointer;"></i>
                        <input type="text" class="form-control form-control-sm d-none" value="{{ session.name or session.original_filename }}">
                    </td>
                    <td><span class="badge bg-secondary">{{ session.created_at | humanize }}</span></td>
                    <td>{{ session.page_count }}</td>
                    <td>{{ session.question_count }}</td>
                    {% if show_size %}
                    <td class="size-column">{{ session.total_size_formatted }}</td>
                    {% endif %}
                    <td>
                        {% if session.persist %}
                            <span class="badge bg-success">Persisted</span>
                        {% else %}
                            <span class="badge bg-secondary">Not Persisted</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="btn-group" role="group">
                            {% if session.session_type == 'color_rm' %}
                                <a href="{{ url_for('main.color_rm_interface', session_id=session.id, image_index=0) }}" class="btn btn-sm btn-warning text-dark">Color RM</a>
                                <button class="btn btn-sm btn-info toggle-persist-btn">Toggle Persist</button>
                                {% if show_size %}
                                <button class="btn btn-sm btn-warning reduce-space-btn">Reduce Space</button>
                                {% endif %}
                            {% else %}
                                <a href="{{ url_for('main.question_entry_v2', session_id=session.id) }}" class="btn btn-sm btn-primary">View</a>
                                <a href="{{ url_for('main.crop_interface_v2', session_id=session.id, image_index=0) }}" class="btn btn-sm btn-secondary">Crop</a>
                                <button class="btn btn-sm btn-info toggle-persist-btn">Toggle Persist</button>
                                {% if show_size %}
                                <button class="btn btn-sm btn-warning reduce-space-btn">Reduce Space</button>
                                {% endif %}
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% else %}
                {% if show_size %}
                <tr>
                    <td colspan="10" class="text-center">No sessions found.</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="9" class="text-center">No sessions found.</td>
                </tr>
                {% endif %}
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
$(document).ready(function() {
    // Checkbox selection logic
    const deleteBtn = $('#delete-selected-btn');
    const selectAllCheckbox = $('#select-all-checkbox');
    const sessionCheckboxes = $('.session-checkbox');

    function toggleDeleteButton() {
        const anyChecked = sessionCheckboxes.is(':checked');
        deleteBtn.css('display', anyChecked ? 'inline-block' : 'none');
    }

    selectAllCheckbox.on('change', function() {
        sessionCheckboxes.prop('checked', $(this).prop('checked'));
        toggleDeleteButton();
    });

    sessionCheckboxes.on('change', function() {
        if (!$(this).prop('checked')) {
            selectAllCheckbox.prop('checked', false);
        }
        toggleDeleteButton();
    });

    // Batch delete
    deleteBtn.on('click', function() {
        const selectedIds = [];
        sessionCheckboxes.filter(':checked').each(function() {
            selectedIds.push($(this).closest('tr').data('session-id'));
        });

        if (selectedIds.length > 0 && confirm('Are you sure you want to delete the selected sessions?')) {
            $.ajax({
                url: '/sessions/batch_delete',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ ids: selectedIds }),
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    } else {
                        alert('Error deleting sessions: ' + response.error);
                    }
                }
            });
        }
    });

    // Editable name
    $('.edit-name-icon').on('click', function() {
        const icon = $(this);
        const span = icon.prev('.session-name');
        const input = icon.next('input');
        span.addClass('d-none');
        icon.addClass('d-none');
        input.removeClass('d-none').focus();
    });

    $('.editable-name input').on('blur keyup', function(e) {
        if (e.type === 'blur' || e.key === 'Enter') {
            const input = $(this);
            const span = input.siblings('.session-name');
            const icon = input.siblings('.edit-name-icon');
            const newName = input.val();
            const oldName = span.text();
            const sessionId = input.closest('tr').data('session-id');

            if (newName && newName !== oldName) {
                $.ajax({
                    url: `/rename_session/${sessionId}`,
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ new_name: newName }),
                    success: function(response) {
                        if (response.success) {
                            span.text(newName);
                        } else {
                            alert('Error renaming session: ' + response.error);
                            input.val(oldName); // Revert on error
                        }
                    }
                });
            }
            input.addClass('d-none');
            span.removeClass('d-none');
            icon.removeClass('d-none');
        }
    });

    // Toggle persist
    $('.toggle-persist-btn').on('click', function() {
        const button = $(this);
        const sessionId = button.closest('tr').data('session-id');
        $.ajax({
            url: `/toggle_persist/${sessionId}`,
            type: 'POST',
            success: function(response) {
                if (response.success) {
                    location.reload(); // Simple reload for now
                } else {
                    alert('Error toggling persistence: ' + response.error);
                }
            }
        });
    });

    // Reduce space - only bind event if the button exists
    {% if show_size %}
    $('.reduce-space-btn').on('click', function() {
        const button = $(this);
        const row = button.closest('tr');
        const sessionId = row.data('session-id');

        if (confirm('Are you sure you want to reduce space? This will truncate the original page images to save disk space, but you will still be able to view questions and generate reports.')) {
            $.ajax({
                url: `/sessions/reduce_space/${sessionId}`,
                type: 'POST',
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        // Refresh the page to update the size information
                        location.reload();
                    } else {
                        alert('Error reducing space: ' + response.error);
                    }
                },
                error: function(xhr) {
                    const response = JSON.parse(xhr.responseText);
                    alert('Error reducing space: ' + response.error);
                }
            });
        }
    });
    {% endif %}
});
</script>
{% endblock %}