{% extends "base.html" %}
{% set page_title = "Google Drive Import" %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="text-light">
                    <i data-feather="cloud-download" class="me-2"></i>Google Drive Import
                </h2>
                <div>
                    <a href="/admin" class="btn btn-outline-light">
                        <i data-feather="arrow-left" class="me-1"></i>Back to Admin
                    </a>
                </div>
            </div>

            <!-- Import Form -->
            <div class="card bg-dark border-secondary mb-4">
                <div class="card-header">
                    <h5 class="mb-0 text-light">
                        <i data-feather="folder" class="me-2"></i>Import Orchid Images from Google Drive Folder
                    </h5>
                </div>
                <div class="card-body">
                    <form id="importForm">
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <label for="folderUrl" class="form-label text-light">Google Drive Folder URL</label>
                                <input type="url" class="form-control" id="folderUrl" 
                                       placeholder="https://drive.google.com/drive/folders/..." 
                                       value="https://drive.google.com/drive/folders/1YqIWmIfaXSy_0_bAbvSG8EMQjAuNq0lj"
                                       required>
                                <div class="form-text">Paste the Google Drive folder URL containing orchid images</div>
                            </div>
                            <div class="col-md-2">
                                <label for="importLimit" class="form-label text-light">Import Limit</label>
                                <input type="number" class="form-control" id="importLimit" value="50" min="1" max="500">
                                <div class="form-text">Max files to import</div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label text-light d-block">Options</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="autoProcess" checked>
                                    <label class="form-check-label text-light" for="autoProcess">
                                        Auto-process images
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-info" onclick="previewFolder()">
                                    <i data-feather="eye" class="me-1"></i>Preview Folder Contents
                                </button>
                            </div>
                            <div class="col-md-6 text-end">
                                <button type="button" class="btn btn-success" onclick="importFolder()" id="importBtn">
                                    <i data-feather="download" class="me-1"></i>Import Orchid Images
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Preview Results -->
            <div class="card bg-dark border-secondary mb-4" id="previewCard" style="display: none;">
                <div class="card-header">
                    <h5 class="mb-0 text-light">
                        <i data-feather="image" class="me-2"></i>Folder Preview
                    </h5>
                </div>
                <div class="card-body">
                    <div id="previewContent">
                        <!-- Preview content will be loaded here -->
                    </div>
                </div>
            </div>

            <!-- Import Progress -->
            <div class="card bg-dark border-secondary mb-4" id="progressCard" style="display: none;">
                <div class="card-header">
                    <h5 class="mb-0 text-light">
                        <i data-feather="activity" class="me-2"></i>Import Progress
                    </h5>
                </div>
                <div class="card-body">
                    <div class="progress mb-3" style="height: 20px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             id="progressBar" role="progressbar" style="width: 0%">
                            <span id="progressText">Starting import...</span>
                        </div>
                    </div>
                    <div id="progressDetails" class="small text-muted">
                        <!-- Progress details will appear here -->
                    </div>
                </div>
            </div>

            <!-- Import Results -->
            <div class="card bg-dark border-secondary" id="resultsCard" style="display: none;">
                <div class="card-header">
                    <h5 class="mb-0 text-light">
                        <i data-feather="check-circle" class="me-2"></i>Import Results
                    </h5>
                </div>
                <div class="card-body">
                    <div id="resultsContent">
                        <!-- Results will be displayed here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Alert Container -->
<div id="alertContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1050;">
</div>

<script>
function previewFolder() {
    const folderUrl = document.getElementById('folderUrl').value;
    if (!folderUrl) {
        showAlert('Please enter a Google Drive folder URL', 'warning');
        return;
    }

    showLoading(true);
    
    fetch('/drive-import/preview-folder', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({folder_url: folderUrl})
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            displayPreview(data);
        } else {
            showAlert(data.error || 'Failed to preview folder', 'danger');
        }
    })
    .catch(error => {
        showAlert('Network error: ' + error.message, 'danger');
    })
    .finally(() => {
        showLoading(false);
    });
}

function displayPreview(data) {
    const previewCard = document.getElementById('previewCard');
    const previewContent = document.getElementById('previewContent');
    
    let html = `
        <div class="row mb-3">
            <div class="col-md-6">
                <h6 class="text-success">Folder Analysis Complete</h6>
                <p class="mb-0">Found <strong>${data.total_files}</strong> image files ready for import</p>
                <p class="small text-muted">Folder ID: ${data.folder_id}</p>
            </div>
            <div class="col-md-6 text-end">
                <span class="badge bg-info fs-6">${data.file_count} files previewed</span>
            </div>
        </div>
    `;
    
    if (data.files && data.files.length > 0) {
        html += '<div class="row">';
        data.files.forEach((file, index) => {
            const fileSize = file.size ? (parseInt(file.size) / 1024 / 1024).toFixed(2) + ' MB' : 'Unknown size';
            html += `
                <div class="col-md-6 col-lg-4 mb-3">
                    <div class="card bg-secondary">
                        <div class="card-body p-2">
                            <h6 class="card-title text-truncate" title="${file.name}">${file.name}</h6>
                            <p class="card-text small">
                                <span class="text-muted">${fileSize}</span><br>
                                <span class="text-success">${file.mime_type}</span>
                            </p>
                        </div>
                    </div>
                </div>
            `;
        });
        html += '</div>';
        
        if (data.total_files > data.files.length) {
            html += `<p class="text-muted text-center">... and ${data.total_files - data.files.length} more files</p>`;
        }
    }
    
    previewContent.innerHTML = html;
    previewCard.style.display = 'block';
    
    showAlert(`Preview complete! Found ${data.total_files} orchid images ready for import.`, 'success');
}

function importFolder() {
    const folderUrl = document.getElementById('folderUrl').value;
    const limit = parseInt(document.getElementById('importLimit').value);
    const autoProcess = document.getElementById('autoProcess').checked;
    
    if (!folderUrl) {
        showAlert('Please enter a Google Drive folder URL', 'warning');
        return;
    }
    
    // Show progress
    const progressCard = document.getElementById('progressCard');
    progressCard.style.display = 'block';
    
    // Disable import button
    const importBtn = document.getElementById('importBtn');
    importBtn.disabled = true;
    importBtn.innerHTML = '<i data-feather="loader" class="me-1"></i>Importing...';
    feather.replace();
    
    updateProgress(10, 'Connecting to Google Drive...');
    
    fetch('/drive-import/import-folder', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            folder_url: folderUrl,
            limit: limit,
            auto_process: autoProcess
        })
    })
    .then(response => response.json())
    .then(data => {
        updateProgress(100, 'Import completed!');
        
        if (data.success) {
            displayResults(data);
            showAlert(`Successfully imported ${data.imported_count} orchid images!`, 'success');
        } else {
            showAlert(data.error || 'Import failed', 'danger');
        }
    })
    .catch(error => {
        updateProgress(100, 'Import failed');
        showAlert('Network error: ' + error.message, 'danger');
    })
    .finally(() => {
        // Re-enable import button
        importBtn.disabled = false;
        importBtn.innerHTML = '<i data-feather="download" class="me-1"></i>Import Orchid Images';
        feather.replace();
    });
}

function updateProgress(percent, message) {
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');
    const progressDetails = document.getElementById('progressDetails');
    
    progressBar.style.width = percent + '%';
    progressText.textContent = message;
    progressDetails.innerHTML = `Progress: ${percent}%<br>${message}`;
}

function displayResults(data) {
    const resultsCard = document.getElementById('resultsCard');
    const resultsContent = document.getElementById('resultsContent');
    
    let html = `
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="text-center">
                    <h3 class="text-success">${data.imported_count}</h3>
                    <p class="small text-muted">Images Imported</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <h3 class="text-info">${data.total_processed}</h3>
                    <p class="small text-muted">Files Processed</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <h3 class="text-primary">${data.processed_records || 0}</h3>
                    <p class="small text-muted">Database Records</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <h3 class="text-warning">${data.total_processed - data.imported_count}</h3>
                    <p class="small text-muted">Errors</p>
                </div>
            </div>
        </div>
    `;
    
    html += `
        <div class="mt-3">
            <h6 class="text-light mb-3">Next Steps:</h6>
            <ul class="text-light">
                <li>Review imported orchids in the <a href="/gallery" class="text-info">Gallery</a></li>
                <li>Validate orchid names and classifications in the <a href="/admin" class="text-info">Admin Panel</a></li>
                <li>Use the <a href="/photo-editor" class="text-info">Photo Editor</a> to enhance images</li>
                <li>Enable AI analysis for automatic plant identification</li>
            </ul>
        </div>
    `;
    
    resultsContent.innerHTML = html;
    resultsCard.style.display = 'block';
}

function showLoading(show) {
    // This would show/hide a loading indicator
}

function showAlert(message, type) {
    const alertContainer = document.getElementById('alertContainer');
    const alertId = 'alert-' + Date.now();
    
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" id="${alertId}" role="alert">
            <i data-feather="${type === 'success' ? 'check-circle' : type === 'danger' ? 'x-circle' : 'info'}"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    alertContainer.innerHTML = alertHtml;
    feather.replace();
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        const alertEl = document.getElementById(alertId);
        if (alertEl) {
            alertEl.remove();
        }
    }, 5000);
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
});
</script>
{% endblock %}