{% extends "base.html" %}
{% block content %}
    <div class="w-full max-w-[160rem] mx-auto">
        <!-- Page header -->
        <div class="mb-6">
            <h1 class="text-3xl font-bold">{{ title }}</h1>
            <p class="text-gray-600 mt-2">
                Select sequences from the left to add to the project. Drag sequences on the right to reorder.
            </p>
        </div>
        <!-- Hidden input for current view mode -->
        <input type="hidden"
               id="current-sequence-view"
               name="view"
               value="{{ current_view|default:'table' }}" />
        <!-- Split panel container -->
        <div class="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-4 h-[calc(100vh-300px)]">
            <!-- LEFT PANEL: Available Sequences -->
            <div class="flex flex-col border rounded-lg overflow-hidden bg-white shadow">
                <div class="flex-shrink-0 border-b p-4">
                    <h2 class="text-lg font-bold">Available Sequences</h2>
                    <p class="text-sm text-gray-500">{{ sequence_count }} sequences</p>
                </div>
                <!-- Left panel content (will be updated via HTMX) -->
                <div id="split-available-panel"
                     class="flex-1 overflow-hidden flex flex-col">
                    {% include "lara_django_sequences/partials/split-sequences-available.html" %}
                </div>
            </div>
            <!-- CENTER: Action buttons -->
            <div class="flex flex-col items-center justify-center gap-3 lg:gap-2">
                <!-- Add button (arrow right) -->
                <button type="button"
                        class="btn btn-circle btn-lg btn-primary hover:btn-accent transition-all hidden"
                        title="Add selected sequences to project"
                        id="split-add-btn">
                    <i class="fa-solid fa-arrow-right text-xl"></i>
                </button>
                <!-- Remove button (arrow left) -->
                <button type="button"
                        class="btn btn-circle btn-lg btn-error hover:btn-accent transition-all hidden"
                        title="Remove selected sequences from project"
                        id="split-remove-btn">
                    <i class="fa-solid fa-arrow-left text-xl"></i>
                </button>
            </div>
            <!-- RIGHT PANEL: Project Sequences -->
            <div class="flex flex-col border rounded-lg overflow-hidden bg-white shadow">
                <div class="flex-shrink-0 border-b p-4 flex justify-between items-center">
                    <div>
                        <h2 class="text-lg font-bold">Sequences in Project</h2>
                        <p class="text-sm text-gray-500">{{ project_sequence_count }} sequences</p>
                    </div>
                    <button type="button"
                            class="btn btn-sm btn-error hidden"
                            id="split-bulk-remove-btn"
                            hx-post="{% url 'lara_django_sequences:split-bulk-remove' sequences_subset.pk %}"
                            hx-target="#split-selected-list"
                            hx-swap="outerHTML"
                            hx-include=".split-sequence-checkbox-selected:checked"
                            hx-confirm="__dynamic__"
                            hx-on:htmx:confirm="event.preventDefault(); var n = getSelectedIds('split-selected').length; if (confirm('Are you sure you want to remove ' + n + ' sequence' + (n !== 1 ? 's' : '') + ' from the project?')) event.detail.issueRequest(true);">
                        Delete Selected
                    </button>
                </div>
                <!-- Right panel content (will be updated via HTMX) -->
                <div id="split-selected-list" class="flex-1 overflow-y-auto">
                    {% include "lara_django_sequences/partials/split-sequences-selected-list.html" %}
                </div>
            </div>
        </div>
    </div>
    <script>
        // Update button visibility based on checkbox selections
        function updateSplitButtonVisibility() {
            const leftChecked = document.querySelectorAll('.split-sequence-checkbox-available:checked').length > 0;
            const rightChecked = document.querySelectorAll('.split-sequence-checkbox-selected:checked').length > 0;
            const addBtn = document.getElementById('split-add-btn');
            const removeBtn = document.getElementById('split-remove-btn');
            const bulkBtn = document.getElementById('split-bulk-remove-btn');
            leftChecked ? addBtn.classList.remove('hidden') : addBtn.classList.add('hidden');
            rightChecked ? removeBtn.classList.remove('hidden') : removeBtn.classList.add('hidden');
            rightChecked ? bulkBtn.classList.remove('hidden') : bulkBtn.classList.add('hidden');
        }

        // Listen for checkbox changes in both panels
        document.addEventListener('change', (e) => {
            if (e.target.classList.contains('split-sequence-checkbox-available') ||
                e.target.classList.contains('split-sequence-checkbox-selected')) {
                updateSplitButtonVisibility();
            }
        });

        // Add sequence on button click
        document.getElementById('split-add-btn').addEventListener('click', function() {
            const checked = document.querySelectorAll('.split-sequence-checkbox-available:checked');
            checked.forEach(checkbox => {
                const form = new FormData();
                form.append('sequence_pk', checkbox.value);
                fetch('{% url "lara_django_sequences:split-add" sequences_subset.pk %}', {
                    method: 'POST',
                    body: form,
                    headers: {
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                        'HX-Request': 'true',
                        'HX-Target': 'split-selected-list',
                    }
                })
                .then(response => htmx.ajax('GET', window.location.href + '?t=' + Date.now(), {target: '#split-selected-list', swap: 'outerHTML'}));
                checkbox.checked = false;
            });
            updateSplitButtonVisibility();
        });

        // Remove sequence on button click
        document.getElementById('split-remove-btn').addEventListener('click', function() {
            const checked = document.querySelectorAll('.split-sequence-checkbox-selected:checked');
            checked.forEach(checkbox => {
                const form = new FormData();
                form.append('sequence_pk', checkbox.dataset.sequencePk);
                fetch('{% url "lara_django_sequences:split-remove" sequences_subset.pk %}', {
                    method: 'POST',
                    body: form,
                    headers: {
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                        'HX-Request': 'true',
                        'HX-Target': 'split-selected-list',
                    }
                })
                .then(response => htmx.ajax('GET', window.location.href + '?t=' + Date.now(), {target: '#split-selected-list', swap: 'outerHTML'}));
                checkbox.checked = false;
            });
            updateSplitButtonVisibility();
        });

        // Drag and drop for right panel
        let draggedRow = null;
        document.addEventListener('dragstart', (e) => {
            if (e.target.classList.contains('split-sequence-row-draggable')) {
                draggedRow = e.target;
                e.target.style.opacity = '0.5';
            }
        });

        document.addEventListener('dragend', (e) => {
            if (e.target.classList.contains('split-sequence-row-draggable')) {
                e.target.style.opacity = '1';
                draggedRow = null;
            }
        });

        document.addEventListener('dragover', (e) => {
            e.preventDefault();
            const target = e.target.closest('.split-sequence-row-draggable');
            if (target && draggedRow && draggedRow !== target) {
                const rect = target.getBoundingClientRect();
                if (e.clientY < rect.top + rect.height / 2) {
                    target.parentNode.insertBefore(draggedRow, target);
                } else {
                    target.parentNode.insertBefore(draggedRow, target.nextSibling);
                }
                // Update order after drop
                updateSequenceOrder();
            }
        });

        function updateSequenceOrder() {
            const rows = document.querySelectorAll('#split-selected-list .split-sequence-row-draggable');
            const order = Array.from(rows).map(row => row.dataset.sequencePk).join(',');
            const form = new FormData();
            form.append('sequence_order', order);
            fetch('{% url "lara_django_sequences:split-reorder" sequences_subset.pk %}', {
                method: 'POST',
                body: form,
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    'HX-Request': 'true',
                    'HX-Target': 'split-selected-list',
                }
            });
        }

        // Get selected IDs helper
        function getSelectedIds(panel) {
            const selector = panel === 'split-selected' ? '.split-sequence-checkbox-selected:checked' : '.split-sequence-checkbox-available:checked';
            return Array.from(document.querySelectorAll(selector)).map(cb => cb.value);
        }

        // Initialize button visibility
        updateSplitButtonVisibility();
    </script>
{% endblock content %}