{% extends "base.html" %}

{% block title %}📚 Bibliothek - Tabellenansicht - {{ APP_VERSION }}{% endblock %}

{% block content %}
<style>
    /* Library table-only view styles */
    .library-table-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
    }

    .library-header {
        margin-bottom: 25px;
    }

    .library-header h1 {
        margin: 0 0 5px 0;
        font-size: 2em;
        color: var(--ui-text);
    }

    .library-header p {
        margin: 0;
        color: #666;
        font-size: 0.95em;
    }

    /* Library search bar */
    .library-search-bar {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .library-search-input {
        flex: 1;
        min-width: 250px;
        padding: 12px 16px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 16px;
        background: white;
    }

    /* Scanner panel */
    .library-scan-panel {
        background: var(--ui-surface);
        border: 1px solid #d9dde4;
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 20px;
    }

    .library-scan-controls {
        display: grid;
        grid-template-columns: 220px minmax(220px, 1fr) auto auto;
        gap: 10px;
        align-items: center;
    }

    .library-scan-controls select,
    .library-scan-controls input {
        padding: 10px 12px;
        border: 1px solid #d0d7e2;
        border-radius: 6px;
        font-size: 14px;
        background: var(--ui-surface);
    }

    .library-scan-status {
        margin-top: 10px;
        font-size: 0.92em;
        color: #4b5563;
    }

    .library-scan-status.ok {
        color: #1f7a38;
    }

    .library-scan-status.warn {
        color: #9a6700;
    }

    .library-scan-status.error {
        color: #b42318;
    }

    .library-scan-reader-wrap {
        display: none;
        margin-top: 12px;
        border: 1px solid #d9dde4;
        border-radius: 8px;
        overflow: hidden;
        background: var(--ui-surface);
        max-width: 460px;
    }

    .library-scan-reader {
        width: 100%;
        min-height: 280px;
    }

    .library-filter-toggle-btn {
        padding: 10px 16px;
        background: #f0f2f5;
        border: 1px solid #ddd;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        color: var(--ui-text);
        transition: all 0.2s ease;
    }

    .library-filter-toggle-btn:hover {
        background: #e4e6eb;
        border-color: #999;
    }

    .library-filter-toggle-btn.active {
        background: #e0e7ff;
        border-color: #4f46e5;
        color: #4f46e5;
    }

    /* Filter panel */
    .library-filter-panel {
        display: none;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .library-filter-panel.open {
        display: block;
    }

    .filter-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 15px;
    }

    .filter-row:last-child {
        margin-bottom: 0;
    }

    .filter-item {
        display: flex;
        flex-direction: column;
    }

    .filter-item label {
        font-weight: 600;
        font-size: 0.9em;
        color: var(--ui-text);
        margin-bottom: 6px;
    }

    .filter-item input,
    .filter-item select {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        background: white;
    }

    .filter-item input:focus,
    .filter-item select:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
    }

    .filter-buttons {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }

    .filter-buttons .button {
        flex: 1;
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Library table */
    .library-items-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .library-items-table thead {
        background: var(--ui-surface-soft);
        border-bottom: 2px solid #ddd;
    }

    .library-items-table th {
        padding: 14px 16px;
        text-align: left;
        font-weight: 600;
        color: var(--ui-text);
        font-size: 0.9em;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .library-items-table td {
        padding: 12px 16px;
        border-bottom: 1px solid #eee;
        color: #555;
        font-size: 0.95em;
    }

    .library-items-table tbody tr:hover {
        background: var(--ui-surface-soft);
    }

    .library-items-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Table cells */
    .table-title {
        font-weight: 600;
        color: var(--ui-text);
    }

    .table-status {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.85em;
        font-weight: 500;
    }

    .status-available {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .status-borrowed {
        background: #fff3e0;
        color: #e65100;
    }

    .status-damaged {
        background: #fee2e2;
        color: #991b1b;
    }

    /* Actions */
    .table-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .table-actions .button {
        padding: 6px 12px;
        font-size: 0.85em;
        white-space: nowrap;
    }

    /* Empty state */
    .library-empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #999;
    }

    .library-empty-state h3 {
        font-size: 1.3em;
        margin-bottom: 10px;
        color: #666;
    }

    .library-load-row {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .library-load-hint {
        font-size: 0.9em;
        color: #6b7280;
    }

    /* Modal styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .modal-content {
        background-color: var(--ui-surface);
        border-radius: 8px;
        padding: 20px;
        max-width: 900px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        position: relative;
    }

    .edit-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .edit-grid .full {
        grid-column: 1 / -1;
    }

    .edit-grid label {
        font-weight: 600;
        font-size: 0.9em;
        margin-bottom: 4px;
        display: block;
    }

    .edit-grid input,
    .edit-grid textarea,
    .edit-grid select {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #d0d7e2;
        border-radius: 6px;
    }

    .edit-actions {
        display: flex;
        gap: 10px;
        margin-top: 14px;
    }

    .close {
        position: absolute;
        right: 20px;
        top: 10px;
        font-size: 28px;
        font-weight: bold;
        color: #999;
        cursor: pointer;
    }

    .close:hover {
        color: var(--ui-text);
    }

    /* Mobile responsive */
    @media (max-width: 768px) {
        .library-table-container {
            padding: 10px;
        }

        .library-search-bar {
            flex-direction: column;
        }

        .library-search-input {
            width: 100%;
        }

        .library-items-table {
            font-size: 0.85em;
        }

        .library-items-table th,
        .library-items-table td {
            padding: 8px 10px;
        }

        .table-actions .button {
            padding: 4px 8px;
            font-size: 0.75em;
        }

        .filter-row {
            grid-template-columns: 1fr;
        }

        .library-scan-controls {
            grid-template-columns: 1fr;
        }

        .library-scan-reader-wrap {
            max-width: 100%;
        }
    }
</style>

<div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if is_admin else 0 }}">
    <!-- Header -->
    <div class="library-header">
        <h1>📚 Bibliothek</h1>
        <p>Bücher, CDs, DVDs und weitere Medien</p>
    </div>

    <!-- Search and Filter Toggle -->
    <div class="library-search-bar">
        <input 
            type="text" 
            id="librarySearch" 
            class="library-search-input" 
            placeholder="Nach Titel, ISBN suchen..."
        >
        <button 
            id="filterToggleBtn" 
            class="library-filter-toggle-btn"
            aria-label="Filter öffnen/schließen"
        >
            🔍 Filter
        </button>
    </div>

    <!-- Customizable Filter Panel -->

    <!-- Student card / quick scan workflow -->
   <div class="library-scan-panel">
        <div class="library-scan-controls">
            <select id="scanModeSelect" aria-label="Scan-Modus">
                <option value="card_only">Nur Ausweis erfassen</option>
                <option value="quick_toggle">Schnellmodus: Ausweis + Mediencode</option>
            </select>
            <input type="text" id="activeStudentCard" placeholder="Aktiver Ausweis (gescannt)" readonly>
            <button id="resetCardBtn" class="button" type="button">Ausweis löschen</button>
            <button id="toggleScannerBtn" class="button" type="button">Scanner starten</button>
        </div>
        <div id="scanStatus" class="library-scan-status">
            Hinweis: Im Schnellmodus zuerst den Schülerausweis scannen, danach den Buch-/Mediencode.
        </div>
        <div id="scanReaderWrap" class="library-scan-reader-wrap" style="display: none;">
            <div id="libraryQrReader" class="library-scan-reader">
                <div id="library-scanner-container"></div>
            </div>
        </div>
    </div>
    <div id="filterPanel" class="library-filter-panel">
        <div class="filter-row">
            <div class="filter-item">
                <label for="filterISBN">ISBN:</label>
                <input type="text" id="filterISBN" placeholder="z.B. 978-3...">
            </div>
            <div class="filter-item">
                <label for="filterType">Medientyp:</label>
                <select id="filterType">
                    <option value="">-- Alle Typen --</option>
                    <option value="book">Buch</option>
                    <option value="schulbuch">Schulbuch</option>
                    <option value="cd">CD</option>
                    <option value="dvd">DVD</option>
                    <option value="other">Sonstige</option>
                </select>
            </div>
            <div class="filter-item">
                <label for="filterStatus">Status:</label>
                <select id="filterStatus">
                    <option value="">-- Alle Status --</option>
                    <option value="available">Verfügbar</option>
                    <option value="borrowed">Ausgeliehen</option>
                    <option value="damaged">Defekt/Zerstört</option>
                </select>
            </div>
        </div>
        <div class="filter-buttons">
            <button id="applyFilterBtn" class="button" style="background: #4f46e5; color: white;">Filter anwenden</button>
            <button id="clearFilterBtn" class="button" style="background: #f0f2f5; color: var(--ui-text);">Zurücksetzen</button>
            <div style="flex-grow: 1;"></div>
            <button class="button" style="background: #10b981; color: white; display: flex; align-items: center; gap: 0.5rem;" onclick="window.location.href='/library/export/schulbuecher'">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                Schulbücher Excel
            </button>
            <button class="button" style="background: #10b981; color: white; display: flex; align-items: center; gap: 0.5rem;" onclick="window.location.href='/library/export/all_borrowed'">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                Alle ausgeliehen Excel
            </button>
        </div>
    </div>

    <!-- Items Table -->
    <div id="tableContainer">
        <table class="library-items-table">
            <thead>
                <tr>
                    <th style="width: 24%;">Titel</th>
                    <th style="width: 12%;">ISBN/Code</th>
                    <th style="width: 8%;">Typ</th>
                    <th style="width: 8%;">Anzahl</th>
                    <th style="width: 12%;">Status</th>
                    <th style="width: 22%;">Aktionen</th>
                </tr>
            </thead>
            <tbody id="itemsTableBody">
                <!-- Items will be loaded here -->
            </tbody>
        </table>
        <div id="loadMoreRow" class="library-load-row" style="display:none;">
            <span id="loadInfo" class="library-load-hint"></span>
            <button id="loadMoreBtn" class="button" type="button">Mehr laden</button>
        </div>
    </div>

    <!-- Empty state -->
    <div id="emptyState" class="library-empty-state" style="display: none;">
        <h3>📭 Keine Bücher gefunden</h3>
        <p>Versuchen Sie, die Filter anzupassen oder suchen Sie nach anderen Begriffen.</p>
    </div>
</div>

<!-- Detail Modal -->
<div id="detailModal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close" onclick="closeDetailModal()">&times;</span>
        <div id="detailContent"></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
<script>
    // =========================================================================
    // 1. GLOBAL STATE DEFINITIONS
    // =========================================================================
    let libraryItems = [];
    let filteredItems = [];
    let visibleItems = [];
    let currentSearchTerm = '';
    let activeFilters = {
        isbn: '',
        type: '',
        status: ''
    };
    let pagingState = {
        offset: 0,
        total: 0,
        hasMore: true,
        loading: false
    };
    const API_PAGE_SIZE = 120;
    const INITIAL_RENDER_COUNT = 120;
    const RENDER_BATCH_COUNT = 120;
    let renderedCount = INITIAL_RENDER_COUNT;
    let filterPanelOpen = false;
    
    // Scanner Related State Variables
    let scannerInstance = null;
    let scannerRunning = false; 
    let activeScannerCallback = null; 
    let activeStudentCardId = '';
    let lastScanValue = '';
    let lastScanAt = 0;
    
    const canEditLibraryItems = (document.getElementById('libraryTableContainer')?.dataset.canEdit === '1');

    // =========================================================================
    // 2. DATA LOADING & FILTERING ENGINE
    // =========================================================================
    async function fetchLibraryPage(offset, limit) {
        const response = await fetch(`/api/library_items?offset=${offset}&limit=${limit}`);
        if (!response.ok) {
            throw new Error('Failed to load library items');
        }
        return response.json();
    }

    async function loadLibraryItems() {
        if (pagingState.loading) return;
        pagingState.loading = true;
        try {
            const firstPage = await fetchLibraryPage(0, API_PAGE_SIZE);
            libraryItems = firstPage.items || [];
            pagingState.offset = (firstPage.offset || 0) + (firstPage.count || libraryItems.length);
            pagingState.total = firstPage.total || libraryItems.length;
            pagingState.hasMore = Boolean(firstPage.has_more);

            applyFiltersAndSearch(true);

            if (pagingState.hasMore) {
                loadRemainingLibraryItemsInBackground();
            }
        } catch (error) {
            console.error('Error loading library items:', error);
            document.getElementById('itemsTableBody').innerHTML = '<tr><td colspan="7" style="text-align:center; color:#999;">Fehler beim Laden der Bibliothekselemente.</td></tr>';
        } finally {
            pagingState.loading = false;
        }
    }

    async function loadRemainingLibraryItemsInBackground() {
        while (pagingState.hasMore) {
            try {
                const page = await fetchLibraryPage(pagingState.offset, API_PAGE_SIZE);
                const nextItems = page.items || [];
                if (nextItems.length === 0) {
                    pagingState.hasMore = false;
                    break;
                }

                libraryItems = libraryItems.concat(nextItems);
                pagingState.offset = (page.offset || pagingState.offset) + (page.count || nextItems.length);
                pagingState.total = page.total || pagingState.total;
                pagingState.hasMore = Boolean(page.has_more);

                applyFiltersAndSearch(false);

                if ('requestIdleCallback' in window) {
                    await new Promise(resolve => requestIdleCallback(() => resolve(), { timeout: 250 }));
                } else {
                    await new Promise(resolve => setTimeout(resolve, 0));
                }
            } catch (error) {
                console.error('Error loading additional library items:', error);
                break;
            }
        }
    }

    function filterItems(items) {
        const isbn = activeFilters.isbn;
        const type = activeFilters.type;
        const status = activeFilters.status;

        return items.filter(item => {
            const isbnMatch = !isbn || (item.ISBN || item.Code_4 || item.Code4 || '').toLowerCase().includes(isbn);
            const typeMatch = !type || (item.ItemType || 'book') === type;
            const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
            const statusMatch = !status || statusKey === status;
            return isbnMatch && typeMatch && statusMatch;
        });
    }

    function applySearch(items) {
        if (!currentSearchTerm) return items;
        return items.filter(item =>
            (item.Name || '').toLowerCase().includes(currentSearchTerm) ||
            (item.ISBN || item.Code_4 || item.Code4 || '').toLowerCase().includes(currentSearchTerm)
        );
    }

    function applyFiltersAndSearch(resetRenderCount) {
        const filteredByPanel = filterItems(libraryItems);
        filteredItems = applySearch(filteredByPanel);
        if (resetRenderCount) {
            renderedCount = Math.min(INITIAL_RENDER_COUNT, filteredItems.length);
        } else {
            renderedCount = Math.min(Math.max(renderedCount, INITIAL_RENDER_COUNT), filteredItems.length || INITIAL_RENDER_COUNT);
        }
        visibleItems = filteredItems;
        renderItems();
    }

    function renderItems() {
        const tbody = document.getElementById('itemsTableBody');
        const emptyState = document.getElementById('emptyState');
        const loadMoreRow = document.getElementById('loadMoreRow');
        const loadInfo = document.getElementById('loadInfo');
        const loadMoreBtn = document.getElementById('loadMoreBtn');

        if (visibleItems.length === 0) {
            tbody.innerHTML = '';
            emptyState.style.display = 'block';
            loadMoreRow.style.display = 'none';
            return;
        }

        emptyState.style.display = 'none';
        const rowsToRender = visibleItems.slice(0, renderedCount);

        tbody.innerHTML = rowsToRender.map(item => {
            const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
            const statusClass = statusKey === 'damaged' ? 'status-damaged' : (statusKey === 'borrowed' ? 'status-borrowed' : 'status-available');
            const statusText = statusKey === 'damaged' ? 'Defekt/Zerstört' : (statusKey === 'borrowed' ? 'Ausgeliehen' : 'Verfügbar');
            const actionLabel = statusKey === 'available' ? 'Ausleihen' : (statusKey === 'borrowed' ? 'Reservieren' : 'Nicht ausleihbar');
            const actionDisabled = statusKey === 'damaged' ? 'disabled' : '';
            return `
        <tr>
            <td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
            <td>${escapeHtml(item.ISBN || item.Code_4 || item.Code4 || '-')}</td>
            <td>${getItemTypeLabel(item.ItemType || 'book')}</td>
            <td style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
            <td>
                <span class="table-status ${statusClass}">
                    ${statusText}
                </span>
            </td>
            <td class="table-actions">
                <button class="button" onclick="showItemDetail('${item._id}')">Details</button>
                <button class="button" style="background: #28a745; color: white;" onclick="borrowItem('${item._id}')" ${actionDisabled}>
                    ${actionLabel}
                </button>
                ${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
                ${canEditLibraryItems ? `<button class="button" style="background:#dc2626;color:#fff; margin-left:6px;" onclick="confirmDeleteLibraryItem('${item._id}')">Löschen</button>` : ''}
            </td>
        </tr>`;
        }).join('');

        const canLoadMoreRows = renderedCount < visibleItems.length;
        if (canLoadMoreRows) {
            loadMoreRow.style.display = 'flex';
            loadMoreBtn.style.display = 'inline-block';
            loadInfo.textContent = `${renderedCount} von ${visibleItems.length} angezeigt`;
        } else {
            const backgroundHint = pagingState.hasMore ? `Lade weitere Medien im Hintergrund (${libraryItems.length}/${pagingState.total || '?'})...` : `${visibleItems.length} Treffer`;
            loadMoreRow.style.display = 'flex';
            loadMoreBtn.style.display = 'none';
            loadInfo.textContent = backgroundHint;
        }
    }

    async function deleteLibraryItem(itemId) {
        if (!itemId) return;
        document.body.style.cursor = 'wait';
        try {
            const resp = await fetch(`/delete_library_item/${itemId}`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'X-CSRF-Token': '{{ csrf_token }}'
                },
                credentials: 'same-origin'
            });

            const ct = resp.headers.get('Content-Type') || '';
            if (ct.includes('application/json')) {
                const j = await resp.json();
                if (!resp.ok || j.ok === false) {
                    alert(j.message || 'Fehler beim Löschen');
                } else {
                    alert(j.message || 'Gelöscht');
                }
                loadLibraryItems();
            } else {
                location.reload();
            }
        } catch (e) {
            console.error('Delete failed', e);
            alert('Fehler beim Löschen des Elements.');
        } finally {
            document.body.style.cursor = '';
        }
    }

    function confirmDeleteLibraryItem(itemId) {
        if (!itemId) return;
        if (!confirm('Dieses Bibliotheksmedium revisionssicher löschen? Diese Aktion deaktiviert alle zugehörigen Exemplare und archiviert Medien.')) return;
        deleteLibraryItem(itemId);
    }

    // =========================================================================
    // 3. CORE SCANNER ROUTING ENGINE (QUAGGA2)
    // =========================================================================
    function startScanner(targetCallback) {
        const readerWrap = document.getElementById('scanReaderWrap');
        const toggleBtn = document.getElementById('toggleScannerBtn');
        
        activeScannerCallback = targetCallback;

        if (readerWrap) readerWrap.style.display = 'block';
        setScanStatus('Initializing camera...', 'warn');
    
        Quagga.init({
            inputStream: {
                name: "Live",
                type: "LiveStream",
                target: document.querySelector('#library-scanner-container'), 
                constraints: {
                    width: 640,
                    height: 480,
                    facingMode: "environment" 
                },
            },
            decoder: {
                readers: [
                    "code_128_reader", 
                    "ean_reader", 
                    "code_39_reader", 
                    "upc_reader", 
                    "codabar_reader", 
                    "i2of5_reader"
                ]
            } 
        }, function(err) {
            if (err) {
                console.error('Scanner start failed:', err);
                if (readerWrap) readerWrap.style.display = 'none';
                const detail = (err && (err.message || err.name)) ? ` (${err.message || err.name})` : '';
                setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
                return;
            }
        
            Quagga.start();
            scannerRunning = true;
            
            if (!targetCallback && toggleBtn) {
                toggleBtn.textContent = 'Scanner stoppen';
            }
            setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
        });
    }
    
    function stopScanner() {
        if (!scannerRunning) return;
        
        const readerWrap = document.getElementById('scanReaderWrap');
        const toggleBtn = document.getElementById('toggleScannerBtn');
    
        Quagga.stop();
        scannerRunning = false;
        activeScannerCallback = null; 
    
        if (readerWrap) readerWrap.style.display = 'none';
        if (toggleBtn) toggleBtn.textContent = 'Scanner starten';
        setScanStatus('Scanner gestoppt.', 'warn');
    }
    
    Quagga.onDetected(function(data) {
        if (!data || !data.codeResult || !data.codeResult.code) return;
        
        const barcode = String(data.codeResult.code || '').trim();
        console.log("Barcode detected:", barcode);
    
        const currentCallback = activeScannerCallback;
        stopScanner();
    
        if (typeof currentCallback === "function") {
            currentCallback(barcode);
        } else {
            handleScanSuccess(barcode);
        }
    });

    function handleScanSuccess(decodedText) {
        const scannedCode = normalizeScannedCode(decodedText);
        if (!scannedCode) return;
    
        const now = Date.now();
        if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
            return;
        }
        lastScanValue = scannedCode;
        lastScanAt = now;
    
        const mode = (document.getElementById('scanModeSelect') || {}).value || 'card_only';
        if (mode === 'card_only') {
            setActiveStudentCard(scannedCode);
            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
            return;
        }
    
        processQuickToggleScan(scannedCode);
    }

    async function processQuickToggleScan(scannedCode) {
        if (!activeStudentCardId) {
            setActiveStudentCard(scannedCode);
            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
            return;
        }
    
        try {
            setScanStatus('Verarbeite Mediencode...', 'warn');
            const response = await fetch('/api/library_scan_action', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    student_card_id: activeStudentCardId,
                    item_code: scannedCode
                })
            });
        
            const result = await response.json();
            if (!response.ok || !result.ok) {
                setScanStatus(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
                return;
            }
        
            if (result.action === 'borrowed') {
                setScanStatus(`Ausgeliehen: ${result.item_name}`, 'ok');
            } else if (result.action === 'returned') {
                setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
            } else {
                setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
            }
        
            await loadLibraryItems();
        } catch (err) {
            console.error('Quick scan action failed:', err);
            setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
        }
    }

    function scanIntoEditCode() {
        const scanReaderWrap = document.getElementById('scanReaderWrap');
        const editCodeInput = document.getElementById('edit-code4');
        const scanEditBtn = document.getElementById('scan-edit-code-btn');
        if (!scanReaderWrap || !editCodeInput || !scanEditBtn) {
            return;
        }
    
        if (scannerRunning && scanReaderWrap.style.display !== 'none') {
            stopScanner();
            scanEditBtn.textContent = 'Barcode scannen';
            return;
        }
    
        scanEditBtn.textContent = 'Scanner schließen';
    
        startScanner(function(decodedText) {
            editCodeInput.value = decodedText;
            if(typeof validateCodeField === "function") {
                validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
            }
            scanEditBtn.textContent = 'Barcode scannen';
        });
    }

    // =========================================================================
    // 4. UI INTERACTIONS & UTILITIES
    // =========================================================================
    function borrowItem(itemId) {
        const selectedItem = (libraryItems || []).find(item => item._id === itemId);
        if (selectedItem && selectedItem.LibraryDisplayStatus === 'damaged') {
            alert('Dieses Medium ist als defekt/zerstört markiert und kann nicht ausgeliehen werden.');
            return;
        }
    
        const defaultCardId = activeStudentCardId || '';
        const cardId = (window.prompt('Bitte Schülerausweis-ID eingeben:', defaultCardId) || '').trim().toUpperCase();
        if (!cardId) {
            alert('Ausleihe abgebrochen: Für Bibliotheksmedien ist eine gültige Schülerausweis-ID erforderlich.');
            return;
        }
    
        setActiveStudentCard(cardId);
    
        const durationInput = (window.prompt('Ausleihdauer in Tagen (optional):') || '').trim();
        const maxAvailable = Math.max(1, parseInt(selectedItem?.AvailableGroupedCount || selectedItem?.Quantity || 1, 10) || 1);
        const countPrompt = (window.prompt(`Anzahl ausleihen? (Standard: 1, verfügbar: ${maxAvailable})`, '1') || '').trim();
        let borrowCount = parseInt(countPrompt || '1', 10);
        if (!Number.isFinite(borrowCount) || borrowCount < 1) {
            borrowCount = 1;
        }
        if (borrowCount > maxAvailable) {
            alert(`Es sind nur ${maxAvailable} Exemplar(e) verfügbar.`);
            return;
        }
    
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/ausleihen/${itemId}`;
    
        const csrfField = document.createElement('input');
        csrfField.type = 'hidden';
        csrfField.name = 'csrf_token';
        csrfField.value = '{{ csrf_token }}';
        form.appendChild(csrfField);
    
        const cardField = document.createElement('input');
        cardField.type = 'hidden';
        cardField.name = 'borrower_card_id';
        cardField.value = cardId;
        form.appendChild(cardField);
    
        const returnTargetField = document.createElement('input');
        returnTargetField.type = 'hidden';
        returnTargetField.name = 'return_to';
        returnTargetField.value = 'library';
        form.appendChild(returnTargetField);
    
        if (durationInput) {
            const durationField = document.createElement('input');
            durationField.type = 'hidden';
            durationField.name = 'borrow_duration_days';
            durationField.value = durationInput;
            form.appendChild(durationField);
        }
    
        const countField = document.createElement('input');
        countField.type = 'hidden';
        countField.name = 'exemplare_count';
        countField.value = String(borrowCount || 1);
        form.appendChild(countField);
    
        document.body.appendChild(form);
        form.submit();
    }

    function setScanStatus(message, kind = '') {
        const el = document.getElementById('scanStatus');
        if (!el) return;
        el.textContent = message;
        el.classList.remove('ok', 'warn', 'error');
        if (kind) el.classList.add(kind);
    }
    
    function setActiveStudentCard(cardId) {
        activeStudentCardId = (cardId || '').trim().toUpperCase();
        const input = document.getElementById('activeStudentCard');
        if (input) input.value = activeStudentCardId;
    }
    
    function normalizeScannedCode(code) {
        return (code || '').trim();
    }

    function getItemTypeLabel(type) {
        const labels = { 'book': 'Buch', 'cd': 'CD', 'dvd': 'DVD', 'other': 'Sonstige' };
        return labels[type] || type;
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function showItemDetail(itemId) {
        fetch(`/api/item_detail/${itemId}`)
            .then(r => r.text())
            .then(html => {
                document.getElementById('detailContent').innerHTML = html;
                document.getElementById('detailModal').style.display = 'flex';
            })
            .catch(err => console.error('Error loading detail:', err));
    }

    function closeDetailModal() {
        document.getElementById('detailModal').style.display = 'none';
    }

// =========================================================================
    // 5. EVENT LISTENERS INITIALIZATION & ON-LOAD INITIALIZER
    // =========================================================================
    function wireScannerUi() {
        const toggleBtn = document.getElementById('toggleScannerBtn');
        const resetBtn = document.getElementById('resetCardBtn');
        const modeSelect = document.getElementById('scanModeSelect');
    
        if (toggleBtn) {
            toggleBtn.addEventListener('click', async () => {
                if (scannerRunning) {
                    await stopScanner();
                } else {
                    await startScanner(null);
                }
            });
        }
    
        if (resetBtn) {
            resetBtn.addEventListener('click', () => {
                setActiveStudentCard('');
                setScanStatus('Ausweis zurückgesetzt. Bitte neu scannen.', 'warn');
            });
        }
    
        if (modeSelect) {
            modeSelect.addEventListener('change', () => {
                if (modeSelect.value === 'quick_toggle' && !activeStudentCardId) {
                    setScanStatus('Schnellmodus: zuerst Schülerausweis scannen.', 'warn');
                } else if (modeSelect.value === 'card_only') {
                    setScanStatus('Nur Ausweis-Modus aktiv.', 'warn');
                }
            });
        }
    }

    // Run when DOM structure is entirely ready
    document.addEventListener('DOMContentLoaded', () => {
        wireScannerUi();       // Setup scanner control buttons 
        loadLibraryItems();   // Fetch your database items right away!

        // Safely connect standard Filters and Search inputs inside DOMContentLoaded
        const filterToggleBtn = document.getElementById('filterToggleBtn');
        if (filterToggleBtn) {
            filterToggleBtn.addEventListener('click', () => {
                filterPanelOpen = !filterPanelOpen;
                document.getElementById('filterPanel').classList.toggle('open');
                filterToggleBtn.classList.toggle('active');
            });
        }

        const applyFilterBtn = document.getElementById('applyFilterBtn');
        if (applyFilterBtn) {
            applyFilterBtn.addEventListener('click', () => {
                activeFilters.isbn = document.getElementById('filterISBN').value.toLowerCase();
                activeFilters.type = document.getElementById('filterType').value;
                activeFilters.status = document.getElementById('filterStatus').value;
                applyFiltersAndSearch(true);
            });
        }

        const clearFilterBtn = document.getElementById('clearFilterBtn');
        if (clearFilterBtn) {
            clearFilterBtn.addEventListener('click', () => {
                document.getElementById('filterISBN').value = '';
                document.getElementById('filterType').value = '';
                document.getElementById('filterStatus').value = '';
                activeFilters = { isbn: '', type: '', status: '' };
                applyFiltersAndSearch(true);
            });
        }

        const librarySearch = document.getElementById('librarySearch');
        if (librarySearch) {
            librarySearch.addEventListener('input', (e) => {
                currentSearchTerm = (e.target.value || '').toLowerCase();
                applyFiltersAndSearch(true);
            });
        }

        const loadMoreBtn = document.getElementById('loadMoreBtn');
        if (loadMoreBtn) {
            loadMoreBtn.addEventListener('click', () => {
                renderedCount = Math.min(renderedCount + RENDER_BATCH_COUNT, visibleItems.length);
                renderItems();
            });
        }

        // Edit Modal Form processing
        const editForm = document.getElementById('editLibraryForm');
        if (editForm) {
            editForm.addEventListener('submit', async function(e) {
                e.preventDefault(); 

                const itemId = document.getElementById('editLibraryItemId').value;

                const updatedData = {
                    name: document.getElementById('editLibraryName').value,
                    item_type: document.getElementById('editLibraryType').value,
                    isbn: document.getElementById('editLibraryIsbn').value,
                    code_4: document.getElementById('editLibraryCode4').value, 
                    ort: document.getElementById('editLibraryLocation').value,
                    beschreibung: document.getElementById('editLibraryDescription').value
                };

                try {
                    const response = await fetch(`/api/library_item/${itemId}/update`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': '{{ csrf_token }}', 
                            'X-CSRF-Token': '{{ csrf_token }}'
                        },
                        body: JSON.stringify(updatedData)
                    });

                    const result = await response.json();

                    if (response.ok && result.ok) {
                        alert(result.message || 'Medium erfolgreich aktualisiert!');
                        closeEditLibraryModal();

                        pagingState.loading = false; 
                        loadLibraryItems(); 
                    } else {
                        alert(result.message || 'Fehler beim Speichern der Änderungen.');
                    }
                } catch (error) {
                    console.error('Update failed:', error);
                    alert('Netzwerkfehler beim Aktualisieren des Mediums.');
                }
            });
        }
    });

    // Modal Control Functions (accessible globally from table buttons)
    function openEditLibraryItem(itemId) {
        const item = libraryItems.find(i => i._id === itemId);
        
        if (!item) {
            alert('Fehler: Das Medium konnte nicht gefunden werden.');
            return;
        }

        // Populate the form fields - Using correct German properties from MongoDB fields
        document.getElementById('editLibraryItemId').value = item._id || '';
        document.getElementById('editLibraryName').value = item.Name || '';
        document.getElementById('editLibraryType').value = item.ItemType || 'book';
        document.getElementById('editLibraryIsbn').value = item.ISBN || '';
        document.getElementById('editLibraryCode4').value = item.Code_4 || item.Code4 || '';
        document.getElementById('editLibraryLocation').value = item.Ort || ''; 
        document.getElementById('editLibraryDescription').value = item.Beschreibung || '';

        document.getElementById('editLibraryModal').style.display = 'flex'; 
    }

    function closeEditLibraryModal() {
        document.getElementById('editLibraryModal').style.display = 'none';
    }
</script>

<div id="editLibraryModal" class="modal" style="display:none;">
    <div class="modal-content" style="max-width: 760px;">
        <span class="close" onclick="closeEditLibraryModal()">&times;</span>
        <h3 style="margin-top:0;">Bibliotheksmedium bearbeiten</h3>
        <form id="editLibraryForm">
            <input type="hidden" id="editLibraryItemId">
            <div class="edit-grid">
                <div class="full">
                    <label for="editLibraryName">Titel</label>
                    <input id="editLibraryName" required>
                </div>
                <div>
                    <label for="editLibraryType">Medientyp</label>
                    <select id="editLibraryType">
                        <option value="book">Buch</option>
                        <option value="schulbuch">Schulbuch</option>
                        <option value="cd">CD</option>
                        <option value="dvd">DVD</option>
                        <option value="media">Sonstige Medien</option>
                    </select>
                </div>
                <div>
                    <label for="editLibraryIsbn">ISBN</label>
                    <input id="editLibraryIsbn" placeholder="optional ISBN-10/13">
                </div>
                <div>
                    <label for="editLibraryCode4">Code</label>
                    <input id="editLibraryCode4" placeholder="optional Mediencode">
                </div>
                <div class="full">
                    <label for="editLibraryLocation">Ort</label>
                    <input id="editLibraryLocation" required>
                </div>
                <div class="full">
                    <label for="editLibraryDescription">Beschreibung</label>
                    <textarea id="editLibraryDescription" rows="4" required></textarea>
                </div>
            </div>
            <div class="edit-actions">
                <button type="submit" class="button" style="background:#0ea5e9;color:#fff;">Speichern</button>
                <button type="button" class="button" onclick="closeEditLibraryModal()">Abbrechen</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}