package templates

templ AdminLibrary(user User) {
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Library Management - Bookhoard</title>
        <script src="/static/htmx.min.js"></script>
        <script src="/static/toast.js"></script>
        <link href="/static/style.css" rel="stylesheet">
    </head>
    <body class="theme-tokyo-night">
        <nav class="border-b" style="border-color: var(--border); background-color: var(--bg-secondary)">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between items-center h-16">
                    <div class="flex items-center">
                        <h1 class="text-xl font-bold" style="color: var(--text-primary)">📚 Bookhoard</h1>
                    </div>
                    <div class="flex items-center space-x-4">
                        <a href="/" class="px-3 py-2 text-sm hover:opacity-80" style="color: var(--text-secondary)">Library</a>
                        <span style="color: var(--text-secondary)">Welcome, { user.Username }!</span>
                        <button onclick="logout()" class="btn-primary px-4 py-2 rounded text-sm">
                            Logout
                        </button>
                    </div>
                </div>
            </div>
        </nav>

        <div class="flex min-h-screen" style="background-color: var(--bg-primary)">
            <aside class="w-64 border-r" style="background-color: var(--bg-secondary); border-color: var(--border)">
                <div class="p-6">
                    <h2 class="text-lg font-semibold mb-6" style="color: var(--text-primary)">Admin Panel</h2>
                    <nav class="space-y-2">
                        <a href="/admin" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
                            🏠 Dashboard
                        </a>
                        <a href="/admin/profile" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
                            👤 Profile Settings
                        </a>
                        <a href="/admin/library" class="block px-4 py-2 rounded-lg bg-accent text-bg-primary" style="color: var(--text-primary)">
                            📚 Library Management
                        </a>
                    </nav>
                </div>
            </aside>

            <main class="flex-1 p-8">
                <div class="max-w-6xl">
                    <div class="mb-8">
                        <div class="flex items-center justify-between mb-4">
                            <a href="/admin" class="btn-secondary px-4 py-2 rounded-lg font-medium">
                                ← Back to Dashboard
                            </a>
                            <button onclick="showCreateLibraryModal()" class="btn-primary px-4 py-2 rounded-lg font-medium">
                                + Create Library
                            </button>
                        </div>
                        <h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Library Management</h1>
                        <p style="color: var(--text-secondary)">Manage libraries and configure media scanning</p>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                        <!-- Libraries Section -->
                        <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
                            <h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">Libraries</h3>
                            <p style="color: var(--text-secondary)" class="mb-4">Manage media libraries and their folders</p>

                            <div id="libraries-list" class="space-y-3 mb-6">
                                <!-- Libraries will be loaded here -->
                            </div>
                        </div>

                        <!-- User Library Visibility Section -->
                        <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
                            <h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">Library Visibility</h3>
                            <p style="color: var(--text-secondary)" class="mb-4">Control which libraries are visible to users</p>

                            <div id="visibility-controls" class="space-y-4">
                                <!-- Visibility controls will be loaded here -->
                            </div>
                        </div>
                    </div>

                    <!-- User Visibility Management -->
                    <div class="mt-8 card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
                        <h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">User Library Access</h3>
                        <p style="color: var(--text-secondary)" class="mb-4">Manage individual user access to specific libraries</p>

                        <div class="mb-4">
                            <select id="user-select" onchange="loadUserVisibility()" class="px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">
                                <option value="">Select a user...</option>
                            </select>
                        </div>

                        <div id="user-libraries" class="space-y-3">
                            <!-- User library checkboxes will be loaded here -->
                        </div>
                    </div>
                </div>
            </main>
        </div>

        <!-- Create Library Modal -->
        <div id="create-library-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
            <div class="card p-6 rounded-lg border max-w-md w-full mx-4" style="background-color: var(--bg-secondary); border-color: var(--border)">
                <h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Create Library</h3>
                <form hx-post="/api/libraries" hx-target="#create-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' onsubmit="this.reset();">
                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Library Name</label>
                        <input type="text" name="name" placeholder="My Ebook Library" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Description</label>
                        <textarea name="description" placeholder="Optional description" rows="3" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"></textarea>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Library Type</label>
                        <select name="type" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
                            <option value="ebooks">📚 Ebooks</option>
                            <option value="comics">📖 Comics</option>
                            <option value="manga">🗾 Manga</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3">
                        <button type="button" onclick="hideCreateLibraryModal()" class="btn-secondary px-4 py-2 rounded">Cancel</button>
                        <button type="submit" class="btn-primary px-4 py-2 rounded">Create</button>
                    </div>
                </form>
                <div id="create-result" class="mt-2"></div>
            </div>
        </div>

        <script>
            let libraries = [];
            let users = [];
            let libraryTypes = [];

            function loadLibraries() {
                fetch('/api/libraries', {
                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
                })
                .then(response => response.json())
                .then(data => {
                    libraries = data;
                    renderLibraries();
                })
                .catch(error => console.error('Error loading libraries:', error));
            }

            function renderLibraries() {
                const container = document.getElementById('libraries-list');
                container.innerHTML = libraries.map(library => 
                    '<div class="p-4 border rounded-lg" style="background-color: var(--bg-primary); border-color: var(--border)">' +
                        '<div class="flex justify-between items-start mb-2">' +
                            '<div>' +
                                '<h4 class="font-semibold" style="color: var(--text-primary)">' + library.name + '</h4>' +
                                '<p class="text-sm" style="color: var(--text-secondary)">' + (library.description || '') + '</p>' +
                                '<span class="inline-block px-2 py-1 text-xs rounded" style="background-color: var(--accent); color: var(--bg-primary)">' + 
                                    (library.type_name || library.type) + '</span>' +
                            '</div>' +
                            '<div class="flex space-x-2">' +
                                '<button onclick="showLibraryFolders(\'' + library.id + '\')" class="text-xs px-2 py-1 rounded" style="background-color: var(--bg-secondary); color: var(--text-primary)">Folders</button>' +
                                '<button onclick="editLibrary(\'' + library.id + '\')" class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: var(--bg-primary)">Edit</button>' +
                                '<button onclick="deleteLibrary(\'' + library.id + '\')" class="text-xs px-2 py-1 rounded text-red-500">Delete</button>' +
                            '</div>' +
                        '</div>' +
                        '<div id="library-folders-' + library.id + '" class="hidden mt-3 space-y-2"></div>' +
                    '</div>'
                ).join('');
            }

            function loadUsers() {
                fetch('/api/auth/users', {
                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
                })
                .then(response => response.json())
                .then(data => {
                    users = data;
                    renderUserSelect();
                })
                .catch(error => console.error('Error loading users:', error));
            }

            function renderUserSelect() {
                const select = document.getElementById('user-select');
                select.innerHTML = '<option value="">Select a user...</option>' + 
                    users.map(user => '<option value="' + user.id + '">' + user.username + ' (' + user.email + ')</option>').join('');
            }

            function loadUserVisibility() {
                const userId = document.getElementById('user-select').value;
                if (!userId) {
                    document.getElementById('user-libraries').innerHTML = '<p style="color: var(--text-secondary)">Please select a user</p>';
                    return;
                }

                // Load user's visible libraries
                fetch('/api/libraries/visible', {
                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
                })
                .then(response => response.json())
                .then(visibleLibraries => {
                    const container = document.getElementById('user-libraries');
                    const visibleIds = visibleLibraries.map(lib => lib.id);
                    
                    container.innerHTML = libraries.map(library => {
                        const isVisible = visibleIds.includes(library.id);
                        return '<label class="flex items-center space-x-3 p-2 rounded" style="background-color: var(--bg-primary);">' +
                            '<input type="checkbox" ' + (isVisible ? 'checked' : '') + 
                                ' onchange="setLibraryVisibility(\'' + userId + '\', \'' + library.id + '\', this.checked)" ' +
                                'class="w-4 h-4">' +
                            '<span style="color: var(--text-primary)">' + library.name + ' (' + library.type_name + ')</span>' +
                        '</label>';
                    }).join('');
                })
                .catch(error => console.error('Error loading user libraries:', error));
            }

            function setLibraryVisibility(userId, libraryId, isVisible) {
                fetch('/api/libraries/visibility', {
                    method: 'POST',
                    headers: { 
                        'Authorization': 'Bearer ' + localStorage.getItem('token'),
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        library_id: libraryId,
                        is_visible: isVisible
                    })
                })
                .then(response => response.json())
                .then(() => {
                    // Refresh visibility controls
                    loadUserVisibility();
                })
                .catch(error => console.error('Error setting library visibility:', error));
            }

            function showCreateLibraryModal() {
                document.getElementById('create-library-modal').classList.remove('hidden');
            }

            function hideCreateLibraryModal() {
                document.getElementById('create-library-modal').classList.add('hidden');
            }

            function deleteLibrary(libraryId) {
                const library = libraries.find(l => l.id === libraryId);
                if (!library) return;
                
                if (confirm('Delete library "' + library.name + '"? This will permanently remove all associated media and cannot be undone.')) {
                    fetch('/api/libraries/' + libraryId, {
                        method: 'DELETE',
                        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
                    })
                    .then(response => {
                        if (response.ok) {
                            loadLibraries(); // Refresh
                        } else {
                            alert('Error deleting library');
                        }
                    })
                    .catch(error => console.error('Error deleting library:', error));
                }
            }

            function showLibraryFolders(libraryId) {
                const container = document.getElementById('library-folders-' + libraryId);
                const library = libraries.find(l => l.id === libraryId);
                
                if (container.classList.contains('hidden')) {
                    // Load folders for this library
                    fetch('/api/libraries/' + libraryId + '/folders', {
                        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
                    })
                    .then(response => response.json())
                    .then(folders => {
                        container.innerHTML = folders.map(folder => 
                            '<div class="flex justify-between items-center p-2 rounded" style="background-color: var(--bg-secondary); border-color: var(--border)">' +
                                '<span class="text-sm" style="color: var(--text-primary)">' + folder.folder_path + '</span>' +
                                '<button onclick="removeLibraryFolder(\'' + libraryId + '\', \'' + folder.folder_path + '\')" ' +
                                    'class="text-xs text-red-500">Remove</button>' +
                            '</div>'
                        ).join('');
                        
                        // Add folder input
                        container.innerHTML += '<div class="mt-2 flex space-x-2">' +
                            '<input type="text" id="folder-path-' + libraryId + '" placeholder="Add folder path" ' +
                                'class="flex-1 px-2 py-1 text-sm border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">' +
                            '<button onclick="addLibraryFolder(\'' + libraryId + '\')" ' +
                                'class="btn-primary px-2 py-1 text-xs rounded">Add</button>' +
                        '</div>';
                        
                        container.classList.remove('hidden');
                    })
                    .catch(error => console.error('Error loading folders:', error));
                } else {
                    container.classList.add('hidden');
                }
            }

            function addLibraryFolder(libraryId) {
                const input = document.getElementById('folder-path-' + libraryId);
                const folderPath = input.value.trim();
                
                if (!folderPath) return;
                
                fetch('/api/libraries/' + libraryId + '/folders', {
                    method: 'POST',
                    headers: { 
                        'Authorization': 'Bearer ' + localStorage.getItem('token'),
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ folder_path: folderPath })
                })
                .then(response => response.json())
                .then(() => {
                    input.value = '';
                    showLibraryFolders(libraryId); // Refresh
                })
                .catch(error => console.error('Error adding folder:', error));
            }

            function removeLibraryFolder(libraryId, folderPath) {
                if (confirm('Remove this folder from the library?')) {
                    fetch('/api/libraries/' + libraryId + '/folders', {
                        method: 'DELETE',
                        headers: { 
                            'Authorization': 'Bearer ' + localStorage.getItem('token'),
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ folder_path: folderPath })
                    })
                    .then(response => response.json())
                    .then(() => {
                        showLibraryFolders(libraryId); // Refresh
                    })
                    .catch(error => console.error('Error removing folder:', error));
                }
            }

            function logout() {
                localStorage.removeItem('token');
                localStorage.removeItem('user');
                window.location.href = '/';
            }

            function loadTheme() {
                // Load saved theme if exists
                const savedTheme = localStorage.getItem('theme');
                if (savedTheme) {
                    document.body.className = 'theme-' + savedTheme;
                }
            }

            document.addEventListener('DOMContentLoaded', function() {
                loadTheme();
                loadLibraries();
                loadUsers();
            });
        </script>
    </body>
    </html>
}