{% extends "base.html" %}

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

{% block content %}
<style>
    /* The Dark Background Overlay */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        /* Display is managed by JS (none/flex) */
        align-items: center; 
        justify-content: center;
        z-index: 1000;
    }

    /* The White Modal Box */
    .modal-content {
        background-color: #fff;
        padding: 20px;
        width: 80%;
        max-width: 600px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

        /* Flexbox allows the header to stay fixed while the body scrolls */
        display: flex;
        flex-direction: column;
        max-height: 85vh;
    }

    /* The Close Button */
    .close {
        align-self: flex-end;
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        line-height: 1;
        margin-bottom: 10px;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
    }

    /* The Scrollable Content Area */
    #detailContent {
        overflow-y: auto; /* Adds scrollbar only if needed */
        padding-right: 10px; /* Prevents text from rubbing against the scrollbar */
    }
    /* 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;
    }

    /* Small confirmation popup (toast) */
    .small-popup {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(17, 24, 39, 0.96);
        color: #fff;
        padding: 12px 16px;
        border-radius: 8px;
        box-shadow: 0 6px 24px rgba(2,6,23,0.6);
        z-index: 2000;
        display: flex;
        gap: 10px;
        align-items: center;
        max-width: 90%;
        font-size: 0.95em;
    }
    .small-popup.ok { background: rgba(16,185,129,0.95); color: #032; }
    .small-popup.error { background: rgba(239,68,68,0.95); color: #210; }
    .small-popup .close-x { margin-left: 8px; cursor: pointer; font-weight: 700; }

    /* 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 current_permissions.actions.get('can_edit', False) 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>
            <input type="text" id="manualItemCode" placeholder="Manueller Mediencode (optional)" style="min-width:180px;">
            <button id="resetCardBtn" class="button" type="button">Ausweis löschen</button>
            <button id="toggleScannerBtn" class="button" type="button">Scanner starten</button>
            <label style="display:flex; align-items:center; gap:8px; margin-left:6px;">
                <input type="checkbox" id="keyboardScannerToggle">
                <span style="font-size:0.9em;">Physischer Scanner</span>
            </label>
            <label style="display:flex; align-items:center; gap:8px; margin-left:6px;">
                <input type="checkbox" id="returnOnlyToggle">
                <span style="font-size:0.9em;">Nur Rückgabe (nur Mediencode)</span>
            </label>
            <button id="manualReturnBtn" class="button" type="button" style="margin-left:6px; background:#10b981;color:white;">Rückgabe per Code</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="schoolbook">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>
            <button class="button" style="background: #10b981; color: white; display: flex; align-items: center; gap: 0.5rem;" onclick="window.location.href='/library/export/all_books'">
                <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 Bücher 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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>

<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>
    // =========================================================================
    // 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;
    // Keyboard-scanner support (physical scanners that act as keyboard wedges)
    let keyboardScannerEnabled = false;
    let keyboardScanBuffer = '';
    let keyboardLastKeyAt = 0;
    const KEYBOARD_SCAN_INTERCHAR_MS = 100; // max time between keystrokes to consider them one scan
    let editLibraryState = {
        itemId: '',
        seriesGroupId: '',
        groupMembers: []
    };
    
    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.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();
    
        const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
        if (returnOnly) {
            // direct return flow
            returnByCode(barcode);
            return;
        }

        if (typeof currentCallback === "function") {
            currentCallback(barcode);
        } else {
            handleScanSuccess(barcode);
        }
    });

    // =========================================================================
    // Keyboard scanner handling (physical scanners that send chars then Enter)
    // =========================================================================
    function keyboardScanKeydownHandler(e) {
        // Only active when explicitly enabled
        if (!keyboardScannerEnabled) return;

        // Ignore if focus is in an input/textarea/contenteditable to avoid interfering with typing
        const active = document.activeElement;
        if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable)) return;

        const now = Date.now();

        // If Enter/Return pressed -> finalize buffer
        if (e.key === 'Enter') {
            const code = keyboardScanBuffer.trim();
            keyboardScanBuffer = '';
            keyboardLastKeyAt = 0;
            if (!code) return;
            // If return-only mode is active, attempt direct return
            const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
            if (returnOnly) {
                returnByCode(code);
                return;
            }

            // Process exactly like a camera scan
            handleScanSuccess(code);
            return;
        }

        // Only accept common printable characters; ignore modifier keys
        if (e.key.length === 1) {
            // If time gap too big, start new buffer
            if (keyboardLastKeyAt && (now - keyboardLastKeyAt) > KEYBOARD_SCAN_INTERCHAR_MS) {
                keyboardScanBuffer = '';
            }
            keyboardScanBuffer += e.key;
            keyboardLastKeyAt = now;
            // Prevent default so scanner input doesn't accidentally move focus or trigger shortcuts
            e.preventDefault();
        }
    }

    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) {
        // 1. Prüfen, ob "Nur Rückgabe"-Modus aktiv ist
        const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
        if (returnOnly) {
            await returnByCode(scannedCode);
            return;
        }

        // 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
        if (!activeStudentCardId) {
            setActiveStudentCard(scannedCode);
            setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
            return;
        }

        // 3. Ausleihe/Rückgabe verarbeiten (wenn Ausweis vorhanden)
        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');
                showSmallConfirm(`Ausgeliehen: ${result.item_name}`, 'ok');
            } else if (result.action === 'returned') {
                setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
                showSmallConfirm(`Zurückgegeben: ${result.item_name}`, 'ok');
            } else {
                setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
                showSmallConfirm(result.message || 'Aktion durchgeführt.', 'ok');
            }

            await loadLibraryItems();
        } catch (err) {
            console.error('Quick scan action failed:', err);
            setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
        }
    }

    async function returnByCode(code) {
        if (!code) return;
        setScanStatus('Verarbeite Rückgabe...', 'warn');
        try {
            const resp = await fetch('/api/library_return_by_code', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ item_code: code })
            });
            const result = await resp.json();
            if (!resp.ok || !result.ok) {
                setScanStatus(result.message || 'Rückgabe fehlgeschlagen.', 'error');
                showSmallConfirm(result.message || 'Rückgabe fehlgeschlagen.', 'error');
                return false;
            }
            setScanStatus(result.message || `Zurückgegeben: ${result.item_name || ''}`, 'ok');
            showSmallConfirm(result.message || `Zurückgegeben: ${result.item_name || ''}`, 'ok');
            await loadLibraryItems();
            return true;
        } catch (err) {
            console.error('Return by code failed:', err);
            setScanStatus('Fehler bei Rückgabe.', 'error');
            showSmallConfirm('Fehler bei Rückgabe.', 'error');
            return false;
        }
    }

    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 showSmallConfirm(message, kind='ok') {
        // Append the small helper text in German
        const helper = 'Sie können fortfahren. Dies ist nur eine kleine Benachrichtigung.';
        const el = document.createElement('div');
        el.className = `small-popup ${kind === 'error' ? 'error' : 'ok'}`;
        el.innerHTML = `<div>${escapeHtml(String(message || ''))}</div><div style="opacity:0.9; margin-left:8px; font-size:0.85em;">${helper}</div><div class="close-x">&times;</div>`;
        document.body.appendChild(el);
        // close handler
        el.querySelector('.close-x').addEventListener('click', () => {
            if (el && el.parentNode) el.parentNode.removeChild(el);
        });
        // auto remove after 3 seconds
        setTimeout(() => { try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e){} }, 3000);
    }

    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', 'schoolbook': 'Schulbuch' };
        return labels[type] || type;
    }

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

    // Opens the modal and fetches the data
    function showItemDetail(itemId) {
        const detailContent = document.getElementById('detailContent');
        const detailModal = document.getElementById('detailModal');

        // 1. Show the loading state immediately
        detailContent.innerHTML = '<p>Loading details...</p>';
        detailModal.style.display = 'flex';

        // 2. Fetch the data
        fetch(`/api/item_detail/${itemId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.text();
            })
            .then(html => {
                // 3. Clean the HTML and display it
                detailContent.innerHTML = DOMPurify.sanitize(html);
            })
            .catch(err => {
                console.error('Error loading detail:', err);
                detailContent.innerHTML = '<p>Sorry, we could not load the item details. Please try again later.</p>';
            });
    }

    // Closes the modal via the 'x' button
    function closeDetailModal() {
        document.getElementById('detailModal').style.display = 'none';
    }

    // Closes the modal if the user clicks the dark background overlay
    window.onclick = function(event) {
        const modal = document.getElementById('detailModal');
        // If the click happened directly on the dark overlay (not the white box)
        if (event.target === modal) {
            closeDetailModal();
        }
    };

    // =========================================================================
    // 5. EVENT LISTENERS INITIALIZATION & ON-LOAD INITIALIZER
    // =========================================================================
    function wireScannerUi() {
        const toggleBtn = document.getElementById('toggleScannerBtn');
        const resetBtn = document.getElementById('resetCardBtn');
        const modeSelect = document.getElementById('scanModeSelect');
        const keyboardToggle = document.getElementById('keyboardScannerToggle');

        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');
                }
            });
        }

        if (keyboardToggle) {
            keyboardToggle.addEventListener('change', () => {
                keyboardScannerEnabled = !!keyboardToggle.checked;
                if (keyboardScannerEnabled) {
                    document.addEventListener('keydown', keyboardScanKeydownHandler);
                    setScanStatus('Physischer Scanner aktiv (Schnellmodus empfohlen).', 'ok');
                } else {
                    document.removeEventListener('keydown', keyboardScanKeydownHandler);
                    setScanStatus('Physischer Scanner deaktiviert.', 'warn');
                }
            });
        }
    }

    // Run when DOM structure is entirely ready
    document.addEventListener('DOMContentLoaded', async () => {
        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();
            });
        }

        const manualReturnBtn = document.getElementById('manualReturnBtn');
        const manualItemCode = document.getElementById('manualItemCode');
        if (manualReturnBtn && manualItemCode) {
            manualReturnBtn.addEventListener('click', async () => {
                const code = (manualItemCode.value || '').trim();
                if (!code) {
                    alert('Bitte einen Mediencode eingeben.');
                    return;
                }
                await returnByCode(code);
            });
        }

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

                const itemId = document.getElementById('editLibraryItemId').value;
                const currentItem = libraryItems.find(i => i._id === itemId);
                if (!currentItem) return;

                const codeInputs = Array.from(document.querySelectorAll('#editLibraryCodesContainer input[data-item-id]'));

                // Daten aus dem Formular sammeln
                const sharedPayload = {
                    name: document.getElementById('editLibraryName').value,
                    item_type: document.getElementById('editLibraryType').value,
                    isbn: document.getElementById('editLibraryIsbn').value,
                    ort: document.getElementById('editLibraryLocation').value,
                    beschreibung: document.getElementById('editLibraryDescription').value,
                    ansch_jahr: currentItem.Anschaffungsjahr || '',
                    ansch_kost: currentItem.Anschaffungskosten || '',
                    reservierbar: currentItem.Reservierbar !== false,
                };

                const codeByItemId = new Map(codeInputs.map(input => [input.dataset.itemId, (input.value || '').trim()]));
                const groupMembers = editLibraryState.groupMembers.length > 0 ? editLibraryState.groupMembers : [currentItem];
                const isGroupedEdit = Boolean(currentItem.SeriesGroupId) && groupMembers.length > 1;

                // API-Aufruf
                try {
                    if (isGroupedEdit) {
                        const payload = {
                            series_group_id: currentItem.SeriesGroupId,
                            ...sharedPayload,
                            items: groupMembers.map(member => ({
                                id: member._id,
                                code_4: codeByItemId.get(member._id) || ''
                            }))
                        };

                        const response = await fetch('/update_group', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRFToken': '{{ csrf_token }}',
                                'X-CSRF-Token': '{{ csrf_token }}'
                            },
                            body: JSON.stringify(payload)
                        });

                        const result = await response.json();
                        if (response.ok && result.success) {
                            alert(result.message || 'Gruppe erfolgreich aktualisiert!');
                            closeEditLibraryModal();
                            pagingState.loading = false;
                            await loadLibraryItems();
                        } else {
                            alert(result.message || 'Fehler beim Speichern der Gruppenänderungen.');
                        }
                    } else {
                        const primaryCodeInput = codeInputs[0];
                        const payload = {
                            name: sharedPayload.name,
                            item_type: sharedPayload.item_type,
                            isbn: sharedPayload.isbn,
                            code_4: primaryCodeInput ? primaryCodeInput.value.trim() : (currentItem.Code_4 || currentItem.Code4 || '').trim(),
                            ort: sharedPayload.ort,
                            beschreibung: sharedPayload.beschreibung
                        };

                        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(payload)
                        });

                        const result = await response.json();
                        if (response.ok && result.ok) {
                            alert(result.message || 'Medium erfolgreich aktualisiert!');
                            closeEditLibraryModal();
                            pagingState.loading = false;
                            await loadLibraryItems();
                        } else {
                            alert(result.message || 'Fehler beim Speichern der Änderungen.');
                        }
                    }
                } catch (error) {
                    console.error('Update failed:', error);
                    alert('Netzwerkfehler beim Aktualisieren des Mediums.');
                }
            });
        }
    });

    async function fetchLibraryGroupMembers(seriesGroupId) {
        if (!seriesGroupId) return [];
        try {
            const response = await fetch(`/api/library_group/${encodeURIComponent(seriesGroupId)}`);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }

            const payload = await response.json();
            return Array.isArray(payload.items) ? payload.items : [];
        } catch (error) {
            console.warn('Falling back to loaded library items for group editing:', error);
            return (libraryItems || []).filter(item => item.SeriesGroupId === seriesGroupId);
        }
    }

    function renderLibraryGroupCodeFields(groupMembers, currentItemId) {
        const codesContainer = document.getElementById('editLibraryCodesContainer');
        const groupWarning = document.getElementById('editLibraryGroupWarning');
        const groupCount = document.getElementById('editLibraryGroupCount');
        const groupHint = document.getElementById('editLibraryGroupHint');

        if (!codesContainer) return;

        const items = Array.isArray(groupMembers) ? groupMembers.slice() : [];
        items.sort((a, b) => (a.SeriesPosition || 0) - (b.SeriesPosition || 0) || String(a.Name || '').localeCompare(String(b.Name || '')));

        editLibraryState.groupMembers = items;

        if (groupWarning) {
            groupWarning.style.display = items.length > 1 ? 'block' : 'none';
        }
        if (groupCount) {
            const totalCount = items.length || 1;
            const declaredCount = items[0]?.SeriesCount || totalCount;
            groupCount.textContent = `${totalCount} / ${declaredCount}`;
        }
        if (groupHint) {
            groupHint.textContent = items.length > 1
                ? 'Jeder Code gehört zu einem eigenen Exemplar. Änderungen werden für alle Codes gespeichert.'
                : 'Einzelnes Exemplar. Der Code wird direkt gespeichert.';
        }

        if (!items.length) {
            codesContainer.innerHTML = '<div style="padding:10px 0; color:#6b7280;">Keine Codes geladen.</div>';
            return;
        }

        codesContainer.innerHTML = items.map((member, index) => {
            const codeValue = member.Code_4 || member.Code4 || '';
            const labelParts = [];
            if (member.SeriesPosition !== undefined && member.SeriesPosition !== null) {
                labelParts.push(`Exemplar ${member.SeriesPosition}`);
            } else {
                labelParts.push(`Exemplar ${index + 1}`);
            }
            if (member._id === currentItemId) {
                labelParts.push('aktuelles Medium');
            }
            return `
            <div style="display:flex; flex-direction:column; gap:6px; margin-bottom:10px;">
                <label for="editLibraryCode-${member._id}" style="font-weight:600; font-size:0.9em; color:var(--ui-text);">${escapeHtml(labelParts.join(' · '))}</label>
                <input id="editLibraryCode-${member._id}" data-item-id="${escapeHtml(member._id)}" value="${escapeHtml(codeValue)}" placeholder="Mediencode" style="width:100%; padding:8px 10px; border:1px solid #d0d7e2; border-radius:6px;">
            </div>
            `;
        }).join('');
    }

    window.openEditLibraryItem = async function (itemId) {
        const item = libraryItems.find(i => i._id === itemId);
        if (!item) return;

        editLibraryState.itemId = item._id;
        editLibraryState.seriesGroupId = item.SeriesGroupId || '';
        editLibraryState.groupMembers = [];

        // Felder befüllen
        document.getElementById('editLibraryItemId').value = item._id;
        document.getElementById('editLibraryName').value = item.Name;
        document.getElementById('editLibraryType').value = item.ItemType;
        document.getElementById('editLibraryIsbn').value = item.ISBN || '';
        document.getElementById('editLibraryLocation').value = item.Ort;
        document.getElementById('editLibraryDescription').value = item.Beschreibung;

        const codesContainer = document.getElementById('editLibraryCodesContainer');
        if (codesContainer) {
            codesContainer.innerHTML = '<div style="padding:10px 0; color:#6b7280;">Lade Codes...</div>';
        }

        const groupMembers = item.SeriesGroupId ? await fetchLibraryGroupMembers(item.SeriesGroupId) : [item];
        renderLibraryGroupCodeFields(groupMembers.length > 0 ? groupMembers : [item], item._id);

        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; padding: 25px; border-radius: 8px;">
        <span class="close" onclick="closeEditLibraryModal()" style="cursor: pointer; float: right; font-size: 24px;">&times;</span>
        <h3 style="margin-top:0;">Bibliotheksmedium bearbeiten</h3>
        
        <!-- Bereich für Gruppen-Informationen (Hier konsolidiert!) -->
        <div id="editLibraryGroupWarning" style="display:none; background-color: #fff; padding: 15px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #0ea5e9;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px;">
                <strong style="color: #0ea5e9;">Gruppen-Range (Total: <span id="editLibraryGroupCount"></span>)</strong>
            </div>
            
            <p id="editLibraryGroupHint" style="margin: 5px 0; font-size: 12px; color: #555;">
                Änderungen an Titel, Ort und Beschreibung werden auf alle Exemplare der Gruppe übertragen.
            </p>

            <div style="margin-top: 15px; font-size: 11px; background: #e0f2fe; padding: 8px; border-radius: 4px;">
                <strong>Hinweis:</strong> Jeder Mediencode wird einzeln gespeichert, damit alle Exemplare der Gruppe korrekt bleiben.
            </div>
        </div>

        <form id="editLibraryForm">
            <input type="hidden" id="editLibraryItemId">
            <div class="edit-grid">
                <div class="full">
                    <label for="editLibraryName">Titel</label>
                    <input id="editLibraryName" required style="width: 100%;">
                </div>
                <div>
                    <label for="editLibraryType">Medientyp</label>
                    <select id="editLibraryType" style="width: 100%;">
                        <option value="Buch">Buch</option>
                        <option value="Schulbuch">Schulbuch</option>
                        <option value="cd">CD</option>
                        <option value="dvd">DVD</option>
                        <option value="other">Sonstige Medien</option>
                    </select>
                </div>
                <div>
                    <label for="editLibraryIsbn">ISBN</label>
                    <input id="editLibraryIsbn" placeholder="optional ISBN-10/13" style="width: 100%;">
                </div>
                <div>
                    <label>Mediencodes</label>
                    <div id="editLibraryCodesContainer"></div>
                </div>
                <div class="full">
                    <label for="editLibraryLocation">Ort</label>
                    <input id="editLibraryLocation" required style="width: 100%;">
                </div>
                <div class="full">
                    <label for="editLibraryDescription">Beschreibung</label>
                    <textarea id="editLibraryDescription" rows="4" required style="width: 100%;"></textarea>
                </div>
            </div>
            <div class="edit-actions" style="margin-top:20px;">
                <button type="submit" class="button" style="background:#0ea5e9;color:#fff;">Speichern & Synchronisieren</button>
                <button type="button" class="button" onclick="closeEditLibraryModal()">Abbrechen</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}