@extends('control-panel::layout/layout')

@section('content')
    <div id="content-transfer-alerts"></div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <h4 class="mb-1">Import archive</h4>
            <p class="text-muted mb-4 small">Upload a content transfer ZIP file to queue an import.</p>

            <form id="content-transfer-import-form" enctype="multipart/form-data">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="import_owner_email" class="form-label small mb-1">Course owner</label>
                        <input type="email" class="form-control form-control-sm" id="import_owner_email"
                            name="owner_email" placeholder="user@example.com" required autocomplete="email">
                        <div class="form-text mb-0">&nbsp;</div>
                    </div>
                </div>
                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label for="import_content_type" class="form-label small mb-1">Content type</label>
                        <select class="form-select form-select-sm" id="import_content_type" name="content_type">
                            @foreach ($contentTypes as $typeKey => $typeLabel)
                                <option value="{{ $typeKey }}">{{ $typeLabel }}</option>
                            @endforeach
                        </select>
                        <div class="form-text mb-0">&nbsp;</div>
                    </div>
                    <div class="col-md-5">
                        <label for="import_file" class="form-label small mb-1">ZIP file</label>
                        <input type="file" class="form-control form-control-sm" id="import_file" name="import_file"
                            accept=".zip,application/zip" required>
                        <div class="form-text mb-0">Max {{ $maxImportFileSize }}.</div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-light border flex-fill" id="preview-import-button">
                                <i class="bi bi-eye me-1"></i>
                                Preview
                            </button>
                            <button type="submit" class="btn btn-primary flex-fill" id="queue-import-button">
                                <i class="bi bi-box-arrow-in-down me-1"></i>
                                Queue import
                            </button>
                        </div>
                        <div class="form-text mb-0">&nbsp;</div>
                    </div>
                </div>
            </form>

            <div id="import-manifest-preview" class="mt-3 d-none">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="mb-0">Manifest preview</h6>
                    <button type="button" class="btn-close" id="close-import-preview" aria-label="Close preview"></button>
                </div>
                <pre class="bg-body-tertiary border rounded p-3 small mb-0 overflow-auto import-manifest-json"
                    id="import-manifest-json"></pre>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0">Exported archives</h4>
                <button type="button" class="btn btn-sm btn-light border" id="refresh-exports">
                    <i class="bi bi-arrow-clockwise me-1"></i>
                    Refresh
                </button>
            </div>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th scope="col">Type</th>
                            <th scope="col">Archive</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody id="export-archives-body">
                        @include('control-panel::partials.content-transfer-export-rows', [
                            'exports' => $exports,
                        ])
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
                <div>
                    <h4 class="mb-1">New export</h4>
                    <p class="text-muted mb-0 small">Choose content, select items, then queue an export archive.</p>
                </div>
                <span class="badge rounded-pill text-bg-light border text-secondary px-3 py-2" id="selection-summary">0
                    selected</span>
            </div>

            <form id="content-transfer-export-form">
                <input type="hidden" id="content_type" name="content_type" value="courses">

                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
                    <div class="btn-group" role="group" aria-label="Content type" id="content-type-buttons">
                        @foreach ($contentTypes as $typeKey => $typeLabel)
                            <button type="button"
                                class="btn btn-sm {{ $typeKey === 'courses' ? 'btn-primary' : 'btn-light border' }} content-type-button"
                                data-type="{{ $typeKey }}">
                                {{ $typeLabel }}
                            </button>
                        @endforeach
                    </div>

                    <div class="input-group input-group-sm" style="min-width: 220px; max-width: 320px;">
                        <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
                        <input type="search" class="form-control" id="content-search" placeholder="Search by name or ID">
                    </div>
                </div>

                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
                    <span class="text-muted small" id="content-items-count">Loading...</span>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-light border" id="show-selected-only">Show selected
                            only</button>
                        <button type="button" class="btn btn-sm btn-light border" id="select-all-items">Select
                            all</button>
                        <button type="button" class="btn btn-sm btn-light border" id="clear-all-items">Clear</button>
                    </div>
                </div>

                <div class="border rounded overflow-hidden mb-3">
                    <div class="list-group-item bg-light border-bottom py-2 px-3 small text-muted content-items-header d-none"
                        id="content-items-header">
                        <div class="d-flex align-items-center gap-3 content-item-layout">
                            <span class="content-item-checkbox-spacer"></span>
                            <span class="content-item-id-heading">ID</span>
                            <span class="flex-grow-1">Name</span>
                            <span class="content-item-type-heading">Type</span>
                        </div>
                    </div>
                    <div class="list-group list-group-flush content-items-panel" id="content-items-list">
                        <div class="list-group-item text-center text-muted py-4">Loading...</div>
                    </div>
                </div>

                <div class="collapse" id="manual-ids-panel">
                    <div class="bg-body-tertiary border rounded p-3 mb-3">
                        <label for="content_ids_text" class="form-label small mb-1">Manual IDs</label>
                        <input type="text" class="form-control form-control-sm" id="content_ids_text"
                            name="content_ids_text" placeholder="e.g. 1, 2, 3">
                        <div class="form-text mb-0">Comma-separated IDs. Used when no items are selected above.</div>
                    </div>
                </div>

                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 pt-3 border-top">
                    <button type="button" class="btn btn-link btn-sm text-secondary px-0" data-bs-toggle="collapse"
                        data-bs-target="#manual-ids-panel" aria-expanded="false" aria-controls="manual-ids-panel">
                        <i class="bi bi-input-cursor-text me-1"></i>
                        Enter IDs manually
                    </button>

                    <button type="submit" class="btn btn-primary px-4" id="queue-export-button">
                        <i class="bi bi-box-arrow-up me-1"></i>
                        Queue export
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="mb-1">Transfer history</h4>
                    <p class="text-muted mb-0 small">Recent 10 import and export activity from application logs.</p>
                </div>
                <button type="button" class="btn btn-sm btn-light border" id="refresh-transfer-log">
                    <i class="bi bi-arrow-clockwise me-1"></i>
                    Refresh
                </button>
            </div>

            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0 transfer-log-table" id="transfer-log-table">
                    <thead>
                        <tr>
                            <th scope="col">Logged at</th>
                            <th scope="col">Action</th>
                            <th scope="col">Type</th>
                            <th scope="col">Detail</th>
                            <th scope="col">Status</th>
                            <th scope="col">Error</th>
                        </tr>
                    </thead>
                    @include('control-panel::partials.content-transfer-log-history-rows', [
                        'transferLogHistory' => $transferLogHistory,
                    ])
                </table>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <h4 class="mb-1">Compare APIs</h4>
            <p class="text-muted mb-4 small">Compare preview or export payloads for two course or learning path IDs.</p>

            <form id="content-transfer-compare-form" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label for="compare_content_type" class="form-label small mb-1">Content type</label>
                    <select class="form-select form-select-sm" id="compare_content_type" name="content_type">
                        @foreach ($contentTypes as $typeKey => $typeLabel)
                            <option value="{{ $typeKey }}">{{ $typeLabel }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="compare_type" class="form-label small mb-1">Compare type</label>
                    <select class="form-select form-select-sm" id="compare_type" name="compare_type">
                        <option value="preview">Preview API</option>
                        <option value="export">Export API</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="compare_left_id" class="form-label small mb-1">Left ID</label>
                    <input type="text" class="form-control form-control-sm" id="compare_left_id" name="left"
                        placeholder="e.g. 1" inputmode="numeric">
                </div>
                <div class="col-md-2">
                    <label for="compare_right_id" class="form-label small mb-1">Right ID</label>
                    <input type="text" class="form-control form-control-sm" id="compare_right_id" name="right"
                        placeholder="e.g. 2" inputmode="numeric">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100" id="compare-submit-button">
                        <i class="bi bi-arrow-left-right me-1"></i>
                        Compare
                    </button>
                </div>
            </form>

            <div id="compare-diff-result" class="mt-3"></div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .content-items-panel {
            height: 360px;
            overflow-y: auto;
        }

        .content-item-row {
            cursor: pointer;
            transition: background-color 0.15s ease;
        }

        .content-item-row:hover {
            background-color: var(--bs-tertiary-bg);
        }

        .content-item-row.filtered-out {
            display: none !important;
        }

        .content-item-layout {
            width: 100%;
        }

        .content-item-checkbox-spacer,
        .content-id-checkbox {
            width: 1.25rem;
            flex-shrink: 0;
        }

        .content-item-id-heading,
        .content-item-id {
            min-width: 3.5rem;
            flex-shrink: 0;
        }

        .content-item-type-heading,
        .content-item-type {
            min-width: 7rem;
            flex-shrink: 0;
        }

        .transfer-log-table {
            border-collapse: separate;
            border-spacing: 0 0.625rem;
        }

        .transfer-log-table thead th {
            border-bottom-width: 1px;
        }

        .transfer-log-entry tr.transfer-log-row>td {
            background-color: var(--bs-table-bg);
            border-color: var(--bs-border-color);
            vertical-align: top;
        }

        .transfer-log-entry:not(:has(.transfer-log-json-row)) tr.transfer-log-row>td {
            border-top: 1px solid var(--bs-border-color);
            border-bottom: 1px solid var(--bs-border-color);
        }

        .transfer-log-entry:not(:has(.transfer-log-json-row)) tr.transfer-log-row>td:first-child {
            border-left: 1px solid var(--bs-border-color);
            border-top-left-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
        }

        .transfer-log-entry:not(:has(.transfer-log-json-row)) tr.transfer-log-row>td:last-child {
            border-right: 1px solid var(--bs-border-color);
            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
        }

        .transfer-log-entry:has(.transfer-log-json-row) tr.transfer-log-row>td {
            border-top: 1px solid var(--bs-border-color);
            border-bottom: 0;
        }

        .transfer-log-entry:has(.transfer-log-json-row) tr.transfer-log-row>td:first-child {
            border-left: 1px solid var(--bs-border-color);
            border-top-left-radius: 0.5rem;
        }

        .transfer-log-entry:has(.transfer-log-json-row) tr.transfer-log-row>td:last-child {
            border-right: 1px solid var(--bs-border-color);
            border-top-right-radius: 0.5rem;
        }

        .transfer-log-json-cell {
            border: 1px solid var(--bs-border-color);
            border-top: 0;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            padding: 0 0.75rem 0.75rem;
            background-color: var(--bs-table-bg);
        }

        .transfer-log-error-cell {
            word-break: break-word;
        }

        .transfer-log-json {
            margin: 0;
        }

        .transfer-log-json-summary {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.5rem;
            margin: 0 -0.25rem;
            color: var(--bs-secondary-color);
            cursor: pointer;
            user-select: none;
            list-style: none;
        }

        .transfer-log-json-summary::-webkit-details-marker {
            display: none;
        }

        .transfer-log-json-chevron {
            font-size: 0.7rem;
            transition: transform 0.15s ease;
        }

        .transfer-log-json[open] .transfer-log-json-chevron {
            transform: rotate(90deg);
        }

        .transfer-log-json-pre {
            max-height: 16rem;
            overflow: auto;
            white-space: pre-wrap;
            word-break: break-word;
            margin: 0;
            padding: 0.75rem;
            border: 1px solid var(--bs-border-color-translucent);
            border-radius: 0.375rem;
            background-color: var(--bs-tertiary-bg);
            font-size: 0.75rem;
        }

        .import-manifest-json {
            max-height: 22rem;
            white-space: pre-wrap;
            word-break: break-word;
            font-size: 0.75rem;
        }

        .transfer-log-entry--empty td {
            border: 0;
            background: transparent;
        }

        #compare-diff-result .jsondiffpatch-delta {
            font-size: 0.8rem;
        }

        #compare-diff-result .compare-diff-panel {
            border: 1px solid var(--bs-border-color-translucent);
            border-radius: 0.375rem;
            padding: 0.75rem;
            background-color: var(--bs-tertiary-bg);
            overflow: auto;
            max-height: 32rem;
        }
    </style>
@endpush

@push('scripts')
    <script>
        const routes = {
            exports: @json(route('control-panel.contentTransferExports')),
            contentItems: @json(route('control-panel.contentTransferContentItems')),
            export: @json(route('control-panel.contentTransferExport')),
            import: @json(route('control-panel.contentTransferImport')),
            importPreview: @json(route('control-panel.contentTransferImportPreview')),
            transferLogHistory: @json(route('control-panel.contentTransferLogHistory')),
            compare: @json(route('control-panel.contentTransferCompare')),
            deleteExport: @json(route('control-panel.contentTransferDeleteExport')),
            download: @json(route('control-panel.contentTransferDownload')),
        };

        const csrfToken = @json(csrf_token());
        const contentTypeInput = document.getElementById('content_type');
        const contentTypeButtons = document.querySelectorAll('.content-type-button');
        const exportForm = document.getElementById('content-transfer-export-form');
        const exportArchivesBody = document.getElementById('export-archives-body');
        const contentItemsList = document.getElementById('content-items-list');
        const contentItemsHeader = document.getElementById('content-items-header');
        const contentItemsCount = document.getElementById('content-items-count');
        const contentSearchInput = document.getElementById('content-search');
        const selectionSummary = document.getElementById('selection-summary');
        const alertsContainer = document.getElementById('content-transfer-alerts');
        const refreshExportsButton = document.getElementById('refresh-exports');
        const queueExportButton = document.getElementById('queue-export-button');
        const importForm = document.getElementById('content-transfer-import-form');
        const importOwnerEmailInput = document.getElementById('import_owner_email');
        const importContentTypeInput = document.getElementById('import_content_type');
        const importFileInput = document.getElementById('import_file');
        const queueImportButton = document.getElementById('queue-import-button');
        const previewImportButton = document.getElementById('preview-import-button');
        const importManifestPreview = document.getElementById('import-manifest-preview');
        const importManifestJson = document.getElementById('import-manifest-json');
        const closeImportPreviewButton = document.getElementById('close-import-preview');
        const transferLogTable = document.getElementById('transfer-log-table');
        const refreshTransferLogButton = document.getElementById('refresh-transfer-log');
        const compareForm = document.getElementById('content-transfer-compare-form');
        const compareDiffResult = document.getElementById('compare-diff-result');
        const compareSubmitButton = document.getElementById('compare-submit-button');
        const showSelectedOnlyButton = document.getElementById('show-selected-only');
        const transferLogColumnCount = 6;
        let showSelectedOnly = false;
        const checkboxes = () => document.querySelectorAll('.content-id-checkbox');

        const escapeHtml = (value) => String(value)
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#039;');

        const clearTransferLogEntries = () => {
            transferLogTable.querySelectorAll('tbody.transfer-log-entry').forEach((tbody) => tbody.remove());
        };

        const renderTransferLogEntry = (entry) => {
            const hasJson = entry.log_json && Object.keys(entry.log_json).length > 0;
            const jsonRow = hasJson ? `
        <tr class="transfer-log-json-row">
          <td colspan="${transferLogColumnCount}" class="transfer-log-json-cell">
            <details class="transfer-log-json">
              <summary class="transfer-log-json-summary">
                <i class="bi bi-chevron-right transfer-log-json-chevron" aria-hidden="true"></i>
                <span>Log payload</span>
              </summary>
              <pre class="small mb-0 transfer-log-json-pre">${escapeHtml(JSON.stringify(entry.log_json, null, 2))}</pre>
            </details>
          </td>
        </tr>
      ` : '';

            return `
        <tbody class="transfer-log-entry">
          <tr class="transfer-log-row${hasJson ? ' transfer-log-row--has-json' : ''}">
            <td class="small text-nowrap">${escapeHtml(entry.logged_at)}</td>
            <td>
              ${entry.operation === 'import'
                ? '<span class="badge text-bg-primary-subtle border border-primary-subtle text-primary">Import</span>'
                : '<span class="badge text-bg-info-subtle border border-info-subtle text-info">Export</span>'}
            </td>
            <td><span class="badge text-bg-light border">${escapeHtml(entry.content_type_label)}</span></td>
            <td class="font-monospace small">${escapeHtml(entry.detail || '—')}</td>
            <td>
              ${entry.status === 'completed'
                ? '<span class="badge text-bg-success-subtle border border-success-subtle text-success">Completed</span>'
                : '<span class="badge text-bg-danger-subtle border border-danger-subtle text-danger">Failed</span>'}
            </td>
            <td class="small text-muted transfer-log-error-cell">${escapeHtml(entry.error || '—')}</td>
          </tr>
          ${jsonRow}
        </tbody>
      `;
        };

        const renderTransferLog = (transferLogHistory) => {
            clearTransferLogEntries();

            if (!transferLogHistory.length) {
                transferLogTable.insertAdjacentHTML('beforeend', `
          <tbody class="transfer-log-entry transfer-log-entry--empty">
            <tr>
              <td colspan="${transferLogColumnCount}" class="text-center text-muted py-3">No import or export history in logs yet.</td>
            </tr>
          </tbody>
        `);
                return;
            }

            transferLogHistory.forEach((entry) => {
                transferLogTable.insertAdjacentHTML('beforeend', renderTransferLogEntry(entry));
            });
        };

        const loadTransferLog = async () => {
            refreshTransferLogButton.disabled = true;
            clearTransferLogEntries();
            transferLogTable.insertAdjacentHTML('beforeend', `
        <tbody class="transfer-log-entry transfer-log-entry--empty">
          <tr>
            <td colspan="${transferLogColumnCount}" class="text-center text-muted py-3">Loading...</td>
          </tr>
        </tbody>
      `);

            try {
                const response = await fetch(`${routes.transferLogHistory}?_=${Date.now()}`, {
                    headers: {
                        'Accept': 'application/json'
                    },
                });
                const data = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(data.message || 'Failed to load transfer history.');
                }

                renderTransferLog(data.transferLogHistory || []);
            } catch (error) {
                clearTransferLogEntries();
                transferLogTable.insertAdjacentHTML('beforeend', `
          <tbody class="transfer-log-entry transfer-log-entry--empty">
            <tr>
              <td colspan="${transferLogColumnCount}" class="text-center text-danger py-3">${escapeHtml(error.message)}</td>
            </tr>
          </tbody>
        `);
            } finally {
                refreshTransferLogButton.disabled = false;
            }
        };

        const formatDate = (value) => {
            const date = new Date(value);
            if (Number.isNaN(date.getTime())) {
                return value;
            }

            const pad = (part) => String(part).padStart(2, '0');
            return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
        };

        const showAlert = (message, type = 'success') => {
            alertsContainer.innerHTML = `<div class="alert alert-${type}">${escapeHtml(message)}</div>`;
        };

        const renderExportRows = (exports) => {
            if (!exports.length) {
                exportArchivesBody.innerHTML = `
          <tr>
            <td colspan="3" class="text-center text-muted py-4">No export archives yet.</td>
          </tr>
        `;
                return;
            }

            exportArchivesBody.innerHTML = exports.map((item) => `
        <tr>
          <td><span class="badge text-bg-light border">${escapeHtml(item.content_type_label)}</span></td>
          <td>
            <div class="font-monospace small">${escapeHtml(item.name)}</div>
            <div class="text-muted small">${escapeHtml(item.size_readable)} · ${escapeHtml(formatDate(item.modified_at))}</div>
          </td>
          <td class="text-end">
            <div class="d-inline-flex gap-2">
              <a class="btn btn-sm btn-light border"
                href="${routes.download}?type=${encodeURIComponent(item.content_type)}&file=${encodeURIComponent(item.name)}">
                <i class="bi bi-download me-1"></i>
                Download
              </a>
              <button type="button" class="btn btn-sm btn-outline-danger border delete-export-button"
                data-type="${encodeURIComponent(item.content_type)}" data-file="${encodeURIComponent(item.name)}">
                <i class="bi bi-trash me-1"></i>
                Delete
              </button>
            </div>
          </td>
        </tr>
      `).join('');
        };

        const renderContentRows = (items) => {
            contentSearchInput.value = '';
            setShowSelectedOnlyFilter(false);
            const showTypeColumn = contentTypeInput.value === 'courses';
            contentItemsHeader.classList.toggle('d-none', !showTypeColumn);

            if (!items.length) {
                contentItemsList.innerHTML = `
          <div class="list-group-item text-center text-muted py-4">No items found.</div>
        `;
                contentItemsCount.textContent = '0 items';
                updateSelectionSummary();
                return;
            }

            contentItemsList.innerHTML = items.map((item) => `
        <label class="list-group-item list-group-item-action py-2 content-item-row"
          data-id="${item.id}"
          data-name="${escapeHtml(String(item.name).toLowerCase())}">
          <div class="d-flex align-items-center gap-3 content-item-layout">
            <input class="form-check-input mt-0 flex-shrink-0 content-id-checkbox" type="checkbox"
              name="content_ids[]" value="${item.id}">
            <span class="badge text-bg-light border text-secondary content-item-id">#${item.id}</span>
            <span class="flex-grow-1 text-wrap">${escapeHtml(item.name)}</span>
            ${showTypeColumn ? `<span class="text-secondary text-capitalize content-item-type">${escapeHtml((item.type || '—').replaceAll('_', ' '))}</span>` : ''}
          </div>
        </label>
      `).join('');

            contentItemsCount.textContent = `${items.length} items`;
            updateSelectionSummary();
            applyContentFilters();
        };

        const updateSelectionSummary = () => {
            const selectedCount = Array.from(checkboxes()).filter((checkbox) => checkbox.checked).length;
            selectionSummary.textContent = `${selectedCount} selected`;
            selectionSummary.classList.toggle('text-bg-primary', selectedCount > 0);
            selectionSummary.classList.toggle('border-primary', selectedCount > 0);
            selectionSummary.classList.toggle('text-bg-light', selectedCount === 0);
            selectionSummary.classList.toggle('text-secondary', selectedCount === 0);
        };

        const setActiveContentType = (contentType) => {
            contentTypeInput.value = contentType;
            contentTypeButtons.forEach((button) => {
                const isActive = button.dataset.type === contentType;
                button.classList.toggle('btn-primary', isActive);
                button.classList.toggle('btn-light', !isActive);
                button.classList.toggle('border', !isActive);
            });
        };

        const setShowSelectedOnlyFilter = (enabled) => {
            showSelectedOnly = enabled;
            showSelectedOnlyButton.classList.toggle('btn-primary', showSelectedOnly);
            showSelectedOnlyButton.classList.toggle('btn-light', !showSelectedOnly);
            showSelectedOnlyButton.classList.toggle('border', !showSelectedOnly);
        };

        const matchesContentSearch = (row, query) => {
            if (query === '') {
                return true;
            }

            const id = row.dataset.id || '';
            const name = row.dataset.name || '';

            return id === query || name.includes(query);
        };

        const applyContentFilters = () => {
            const query = contentSearchInput.value.trim().toLowerCase();
            let visibleCount = 0;
            const rows = document.querySelectorAll('.content-item-row');

            rows.forEach((row) => {
                const checkbox = row.querySelector('.content-id-checkbox');
                const matchesSearch = matchesContentSearch(row, query);
                const matchesSelected = !showSelectedOnly || (checkbox && checkbox.checked);
                const visible = matchesSearch && matchesSelected;

                row.classList.toggle('filtered-out', !visible);
                if (visible) {
                    visibleCount += 1;
                }
            });

            const totalCount = rows.length;

            if (showSelectedOnly) {
                contentItemsCount.textContent = query === '' ?
                    `${visibleCount} selected` :
                    `${visibleCount} of ${totalCount} selected`;
            } else if (query !== '') {
                contentItemsCount.textContent = `${visibleCount} of ${totalCount} items by filter`;
            } else {
                contentItemsCount.textContent = `${totalCount} items`;
            }
        };

        const loadExports = async () => {
            refreshExportsButton.disabled = true;
            exportArchivesBody.innerHTML = `
        <tr>
          <td colspan="3" class="text-center text-muted py-4">Loading...</td>
        </tr>
      `;

            try {
                const response = await fetch(`${routes.exports}?_=${Date.now()}`, {
                    headers: {
                        'Accept': 'application/json'
                    },
                });
                const data = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(data.message || 'Failed to load export archives.');
                }

                renderExportRows(data.exports || []);
            } catch (error) {
                exportArchivesBody.innerHTML = `
          <tr>
            <td colspan="3" class="text-center text-danger py-4">${escapeHtml(error.message)}</td>
          </tr>
        `;
            } finally {
                refreshExportsButton.disabled = false;
            }
        };

        const loadContentItems = async (contentType) => {
            setActiveContentType(contentType);
            contentTypeButtons.forEach((button) => {
                button.disabled = true;
            });
            contentItemsList.innerHTML = `
        <div class="list-group-item text-center text-muted py-4">Loading...</div>
      `;

            try {
                const response = await fetch(
                    `${routes.contentItems}?type=${encodeURIComponent(contentType)}&_=${Date.now()}`, {
                        headers: {
                            'Accept': 'application/json'
                        },
                    });
                const data = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(data.message || 'Failed to load content items.');
                }

                renderContentRows(data.items || []);
            } catch (error) {
                contentItemsList.innerHTML = `
          <div class="list-group-item text-center text-danger py-4">${escapeHtml(error.message)}</div>
        `;
                contentItemsCount.textContent = '0 items';
            } finally {
                contentTypeButtons.forEach((button) => {
                    button.disabled = false;
                });
            }
        };

        contentTypeButtons.forEach((button) => {
            button.addEventListener('click', function() {
                if (button.dataset.type === contentTypeInput.value) {
                    return;
                }

                loadContentItems(button.dataset.type);
            });
        });

        contentSearchInput.addEventListener('input', applyContentFilters);

        showSelectedOnlyButton.addEventListener('click', function() {
            contentSearchInput.value = '';
            setShowSelectedOnlyFilter(!showSelectedOnly);
            applyContentFilters();
        });

        contentItemsList.addEventListener('change', function(event) {
            if (event.target.classList.contains('content-id-checkbox')) {
                updateSelectionSummary();
                applyContentFilters();
            }
        });

        refreshExportsButton.addEventListener('click', loadExports);
        refreshTransferLogButton.addEventListener('click', loadTransferLog);

        const renderCompareDiff = (left, right, leftId, rightId) => {
            if (!compareDiffResult) {
                return;
            }

            compareDiffResult.innerHTML = `
                <link rel="stylesheet" href="https://esm.sh/jsondiffpatch@0.6.0/lib/formatters/styles/html.css"/>
                <div class="compare-diff-panel">
                    <div class="small text-muted mb-2">Compare #${escapeHtml(leftId)} vs #${escapeHtml(rightId)}</div>
                    <div id="ct-api-diff"></div>
                </div>
            `;

            const script = document.createElement('script');
            script.type = 'module';
            script.textContent = `
                import * as jsondiffpatch from 'https://esm.sh/jsondiffpatch@0.6.0';
                import * as htmlFormatter from 'https://esm.sh/jsondiffpatch@0.6.0/formatters/html';
                const left = ${JSON.stringify(left)};
                const right = ${JSON.stringify(right)};
                document.getElementById('ct-api-diff').innerHTML = htmlFormatter.format(jsondiffpatch.diff(left, right), left);
            `;
            compareDiffResult.appendChild(script);
        };

        compareForm?.addEventListener('submit', async (event) => {
            event.preventDefault();

            const leftId = compareForm.querySelector('[name="left"]')?.value?.trim() || '';
            const rightId = compareForm.querySelector('[name="right"]')?.value?.trim() || '';

            if (!leftId || !rightId) {
                showAlert('Enter both IDs to compare.', 'danger');
                return;
            }

            const params = new URLSearchParams(new FormData(compareForm));
            compareSubmitButton.disabled = true;
            compareDiffResult.innerHTML = '<div class="text-muted small py-2">Loading comparison...</div>';

            try {
                const response = await fetch(`${routes.compare}?${params.toString()}`, {
                    headers: {
                        'Accept': 'application/json',
                    },
                });
                const data = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(data.message || 'Failed to compare content.');
                }

                renderCompareDiff(data.left, data.right, leftId, rightId);
            } catch (error) {
                compareDiffResult.innerHTML = '';
                showAlert(error.message, 'danger');
            } finally {
                compareSubmitButton.disabled = false;
            }
        });

        exportArchivesBody.addEventListener('click', async function(event) {
            const button = event.target.closest('.delete-export-button');
            if (!button) {
                return;
            }

            const contentType = decodeURIComponent(button.dataset.type);
            const fileName = decodeURIComponent(button.dataset.file);

            if (!confirm(`Delete "${fileName}"?`)) {
                return;
            }

            button.disabled = true;

            try {
                const response = await fetch(routes.deleteExport, {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                    body: JSON.stringify({
                        type: contentType,
                        file: fileName,
                    }),
                });

                const data = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(data.message || 'Failed to delete export archive.');
                }

                renderExportRows(data.exports || []);
                showAlert(data.message || 'Export archive deleted.');
            } catch (error) {
                showAlert(error.message, 'danger');
                button.disabled = false;
            }
        });

        document.getElementById('select-all-items').addEventListener('click', function() {
            checkboxes().forEach((checkbox) => {
                checkbox.checked = true;
            });
            updateSelectionSummary();
            applyContentFilters();
        });

        document.getElementById('clear-all-items').addEventListener('click', function() {
            checkboxes().forEach((checkbox) => {
                checkbox.checked = false;
            });
            updateSelectionSummary();
            applyContentFilters();
        });

        updateSelectionSummary();

        loadContentItems(contentTypeInput.value);

        const hideImportManifestPreview = () => {
            importManifestPreview.classList.add('d-none');
            importManifestJson.textContent = '';
        };

        const showImportManifestPreview = (manifest) => {
            importManifestJson.textContent = JSON.stringify(manifest, null, 2);
            importManifestPreview.classList.remove('d-none');
        };

        closeImportPreviewButton.addEventListener('click', hideImportManifestPreview);

        previewImportButton.addEventListener('click', async function() {
            if (!importFileInput.files.length) {
                alert('Upload a ZIP file to preview.');
                return;
            }

            previewImportButton.disabled = true;

            try {
                const formData = new FormData();
                formData.append('_token', csrfToken);
                formData.append('content_type', importContentTypeInput.value);
                formData.append('import_file', importFileInput.files[0]);

                const response = await fetch(routes.importPreview, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                    body: formData,
                });

                const data = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(data.message || 'Failed to preview import.');
                }

                showImportManifestPreview(data.manifest || {});
            } catch (error) {
                hideImportManifestPreview();
                showAlert(error.message, 'danger');
            } finally {
                previewImportButton.disabled = false;
            }
        });

        importForm.addEventListener('submit', async function(event) {
            event.preventDefault();

            const ownerEmail = importOwnerEmailInput.value.trim();
            if (ownerEmail === '') {
                alert('Enter the course owner email.');
                return;
            }

            if (!importFileInput.files.length) {
                alert('Upload a ZIP file to import.');
                return;
            }

            queueImportButton.disabled = true;
            previewImportButton.disabled = true;

            try {
                const formData = new FormData();
                formData.append('_token', csrfToken);
                formData.append('owner_email', ownerEmail);
                formData.append('content_type', importContentTypeInput.value);
                formData.append('import_file', importFileInput.files[0]);

                const response = await fetch(routes.import, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                    body: formData,
                });

                const data = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(data.message || 'Failed to queue import.');
                }

                showAlert(data.message || 'Import queued.');
                importForm.reset();
                importContentTypeInput.value = 'courses';
                hideImportManifestPreview();
                renderTransferLog(data.transferLogHistory || []);
            } catch (error) {
                showAlert(error.message, 'danger');
            } finally {
                queueImportButton.disabled = false;
                previewImportButton.disabled = false;
            }
        });

        exportForm.addEventListener('submit', async function(event) {
            event.preventDefault();

            const selected = Array.from(checkboxes()).some((checkbox) => checkbox.checked);
            const manualIds = document.getElementById('content_ids_text').value.trim();

            if (!selected && manualIds === '') {
                alert('Select at least one item or enter IDs to export.');
                return;
            }

            queueExportButton.disabled = true;

            try {
                const formData = new FormData(exportForm);
                formData.append('_token', csrfToken);
                const response = await fetch(routes.export, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                    body: formData,
                });

                const data = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(data.message || 'Failed to queue export.');
                }

                showAlert(data.message || 'Export queued.');
                exportForm.querySelectorAll('.content-id-checkbox:checked').forEach((checkbox) => {
                    checkbox.checked = false;
                });
                document.getElementById('content_ids_text').value = '';
                updateSelectionSummary();
                applyContentFilters();
                renderTransferLog(data.transferLogHistory || []);
            } catch (error) {
                showAlert(error.message, 'danger');
            } finally {
                queueExportButton.disabled = false;
            }
        });
    </script>
@endpush