/**
 * Collection Create Page JavaScript
 * Handles creation of new collections
 */

// Use existing URLS configuration from config/urls.js
// Collection create endpoint is now available as URLS.LIBRARY_API.COLLECTION_CREATE

// Safe fetch wrapper with URL validation
async function safeFetch(url, options = {}) {
    // Internal URLs starting with '/' are safe
    if (!url.startsWith('/')) {
        if (!URLValidator.isSafeUrl(url)) {
            throw new Error(`Blocked unsafe URL: ${url}`);
        }
    }
    return fetch(url, options);
}

/**
 * Initialize the create page
 */
document.addEventListener('DOMContentLoaded', function() {
    console.log('Collection create page loaded');
    console.log('URLS available:', typeof URLS !== 'undefined', URLS);
    console.log('URLValidator available:', typeof URLValidator !== 'undefined', URLValidator);
    console.log('COLLECTION_CREATE URL:', URLS?.LIBRARY_API?.COLLECTION_CREATE);

    // Setup form submission
    const form = document.getElementById('create-collection-form');
    if (form) {
        console.log('Form found, attaching submit handler');
        form.addEventListener('submit', handleCreateCollection);
    } else {
        console.error('Form not found!');
    }

    // Setup name input character counter
    const nameInput = document.getElementById('collection-name');
    if (nameInput) {
        nameInput.addEventListener('input', function(e) {
            const maxLength = 100;
            const currentLength = e.target.value.length;
            const remaining = maxLength - currentLength;
            const counter = document.getElementById('name-counter');
            if (counter) {
                counter.textContent = `${remaining} characters remaining`;
            }
        });
    }
});

/**
 * Handle collection creation
 */
async function handleCreateCollection(e) {
    console.log('Create collection submit handler called');
    e.preventDefault();

    // Get form data
    const formData = new FormData(e.target);

    // Validate required fields
    const name = formData.get('name');
    const description = formData.get('description');

    if (!name || name.trim().length === 0) {
        showError('Collection name is required');
        return;
    }

    const submitBtn = e.target.querySelector('button[type="submit"]');
    const createBtn = document.getElementById('create-collection-btn');

    try {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating Collection...';
        createBtn.disabled = true;
        createBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating Collection...';

        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

        // Prepare JSON data
        const jsonData = {
            name: name.trim(),
            description: description ? description.trim() : '',
            type: 'user_uploads'
        };

        const response = await safeFetch(URLS.LIBRARY_API.COLLECTION_CREATE, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify(jsonData)
        });

        const data = await response.json();

        if (data.success) {
            showCreateResults(data);
            // Reset form
            document.getElementById('create-collection-form').reset();

            // Redirect to the new collection after a short delay
            setTimeout(() => {
                if (data.collection && data.collection.id) {
                    window.location.href = `/library/collections/${data.collection.id}`;
                } else {
                    window.location.href = '/library/collections';
                }
            }, 1500);
        } else {
            showError(data.error || 'Failed to create collection');
        }
    } catch (error) {
        console.error('Error creating collection:', error);
        showError('Failed to create collection: ' + error.message);
    } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-folder-plus"></i> Create Collection';
        createBtn.disabled = false;
        createBtn.innerHTML = '<i class="fas fa-folder-plus"></i> Create Collection';
    }
}

/**
 * Show creation results
 */
function showCreateResults(data) {
    const resultsDiv = document.getElementById('create-results');

    let html = '<div class="alert" style="background: #d4edda; color: #155724; border: 1px solid #c3e6cb; padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">';
    html += '<h4 style="margin: 0 0 0.5rem 0;"><i class="fas fa-check-circle"></i> Collection Created!</h4>';

    if (data.collection && data.collection.id) {
        html += `<p><strong>Collection created successfully!</strong></p>`;
        html += '<p>Your collection ID is: <strong>' + data.collection.id + '</strong></p>';
        html += '<div style="margin-top: 1rem;">';
        html += `<a href="/library/collections/${data.collection.id}" class="ldr-btn-collections ldr-btn-collections-primary">`;
        html += '<i class="fas fa-folder-open"></i> View Collection';
        html += '</a>';
        html += `<a href="/library/collections/${data.collection.id}/upload" class="ldr-btn-collections ldr-btn-collections-secondary" style="margin-left: 1rem;">`;
        html += '<i class="fas fa-plus"></i> Upload Files';
        html += '</a>';
        html += '</div>';
        html += '</div>';
    } else {
        html += '<p><strong>Collection created!</strong></p>';
        html += '<p>You can now start uploading files to organize your documents.</p>';
        html += '<div style="margin-top: 1rem;">';
        html += '<a href="/library/collections" class="ldr-btn-collections ldr-btn-collections-primary">';
        html += '<i class="fas fa-folder-open"></i> View All Collections';
        html += '</a>';
        html += '<button onclick="window.location.href=\'/library/collections/create\'" class="ldr-btn-collections ldr-btn-collections-secondary" style="margin-left: 1rem;">';
        html += '<i class="fas fa-plus"></i> Create Another Collection';
        html += '</button>';
        html += '</div>';
    }

    html += '</div>';

    resultsDiv.innerHTML = html;
    resultsDiv.style.display = 'block';
}

/**
 * Show error message
 */
function showError(message) {
    const resultsDiv = document.getElementById('create-results');
    const html = `
        <div class="alert" style="background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">
            <h4 style="margin: 0 0 0.5rem 0;"><i class="fas fa-exclamation-triangle"></i> Creation Error</h4>
            <p>${message}</p>
            <div style="margin-top: 1rem;">
                <a href="/library/collections" class="ldr-btn-collections ldr-btn-collections-primary">Back to Collections</a>
            </div>
        </div>
    `;

    resultsDiv.innerHTML = html;
    resultsDiv.style.display = 'block';
}
