{% extends "base.html" %}

{% block title %}Data Import - Orchid Continuum{% endblock %}

{% block content %}
<div class="container my-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-5 mb-3">
                <i data-feather="download" class="me-2"></i>Data Import Center
            </h1>
            <p class="lead text-muted">Connect your orchid photo collections and populate the database with hundreds of records</p>
        </div>
    </div>

    <!-- Current Database Status -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-warning">
                <h5 class="alert-heading"><i data-feather="alert-triangle" class="me-2"></i>Database Status</h5>
                <p><strong>Current Records:</strong> {{ stats.total_orchids }} orchids (Expected: 500+ from data sources)</p>
                <p class="mb-0"><strong>Missing Data:</strong> Your Google Drive collections, web scraping data, and batch uploads need to be connected</p>
            </div>
        </div>
    </div>

    <!-- Data Source Cards -->
    <div class="row g-4">
        <!-- Google Drive Import -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i data-feather="cloud" class="me-2"></i>Google Drive Import
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Import hundreds of orchid photos from your Google Drive folders.</p>
                    
                    <div class="mb-3">
                        <label class="form-label"><strong>Status:</strong></label>
                        <span class="badge bg-warning">Credentials Required</span>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">
                            <strong>What you need:</strong><br>
                            1. Google service account JSON credentials<br>
                            2. Shared Google Drive folder with orchid photos<br>
                            3. Folder permissions for the service account
                        </small>
                    </div>

                    <div class="d-grid gap-2">
                        <button class="btn btn-primary" id="setupGoogleDrive">
                            <i data-feather="settings" class="me-2"></i>Configure Google Drive
                        </button>
                        <button class="btn btn-outline-primary" id="testGoogleDrive" disabled>
                            <i data-feather="folder" class="me-2"></i>Browse Drive Folders
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Batch Upload -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i data-feather="upload" class="me-2"></i>Batch Photo Upload
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Upload ZIP archives containing hundreds of orchid photos.</p>
                    
                    <div class="mb-3">
                        <label class="form-label"><strong>Status:</strong></label>
                        <span class="badge bg-success">Ready</span>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">
                            <strong>Supported formats:</strong><br>
                            • ZIP archives up to 500MB<br>
                            • JPG, PNG, WEBP images<br>
                            • Automatic filename parsing for genus/species
                        </small>
                    </div>

                    <div class="d-grid gap-2">
                        <button class="btn btn-success" onclick="window.location.href='/upload?batch=true'">
                            <i data-feather="upload-cloud" class="me-2"></i>Upload Photo Archive
                        </button>
                        <button class="btn btn-outline-success" onclick="window.location.href='/admin/batch-history'">
                            <i data-feather="clock" class="me-2"></i>View Upload History
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Web Scraping -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i data-feather="globe" class="me-2"></i>Web Scraping
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Automatically collect orchid data from orchid websites.</p>
                    
                    <div class="mb-3">
                        <label class="form-label"><strong>Available Sources:</strong></label>
                        <ul class="list-unstyled mb-0">
                            <li>• Gary Yong Gee orchid database</li>
                            <li>• Roberta Fox cultural guides</li>
                            <li>• Additional orchid society websites</li>
                        </ul>
                    </div>

                    <div class="d-grid gap-2">
                        <button class="btn btn-info" onclick="runScraping('all')">
                            <i data-feather="download" class="me-2"></i>Run All Scrapers
                        </button>
                        <button class="btn btn-outline-info" onclick="window.location.href='/admin/scraping-logs'">
                            <i data-feather="list" class="me-2"></i>View Scraping Logs
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Google Forms Processing -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-warning text-white">
                    <h5 class="mb-0">
                        <i data-feather="file-text" class="me-2"></i>Form Submissions
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Process orchid submissions from Google Forms.</p>
                    
                    <div class="mb-3">
                        <label class="form-label"><strong>Status:</strong></label>
                        <span class="badge bg-warning">Credentials Required</span>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">
                            <strong>Features:</strong><br>
                            • Auto-process form submissions<br>
                            • AI validation and enhancement<br>
                            • Photo download and analysis
                        </small>
                    </div>

                    <div class="d-grid gap-2">
                        <button class="btn btn-warning" onclick="setupGoogleForms()">
                            <i data-feather="settings" class="me-2"></i>Configure Forms
                        </button>
                        <button class="btn btn-outline-warning" onclick="processFormsData()">
                            <i data-feather="refresh-cw" class="me-2"></i>Process Submissions
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Import Instructions -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 bg-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="help-circle" class="me-2"></i>Getting Started
                    </h5>
                </div>
                <div class="card-body">
                    <h6>Quick Setup for Hundreds of Orchid Photos:</h6>
                    <ol>
                        <li><strong>For immediate import:</strong> Use "Batch Photo Upload" to upload ZIP files of your orchid photos</li>
                        <li><strong>For Google Drive:</strong> Set up service account credentials to access your Drive folders</li>
                        <li><strong>For ongoing scraping:</strong> Configure web scrapers to automatically collect new orchid data</li>
                        <li><strong>For community submissions:</strong> Set up Google Forms integration for user contributions</li>
                    </ol>
                    
                    <div class="alert alert-info mt-3">
                        <strong>Need help setting up credentials?</strong> Contact the admin team for Google service account setup assistance.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Google Drive Setup Modal -->
<div class="modal fade" id="googleDriveModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Configure Google Drive Import</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <strong>Setup Instructions:</strong><br>
                    To import hundreds of orchid photos from Google Drive, you'll need to provide Google service account credentials.
                </div>

                <form id="googleDriveForm">
                    <div class="mb-3">
                        <label class="form-label">Google Service Account JSON</label>
                        <textarea class="form-control" id="serviceAccountJson" rows="10" 
                                  placeholder="Paste your Google service account JSON credentials here..."></textarea>
                        <small class="text-muted">This will be stored as GOOGLE_SERVICE_ACCOUNT_JSON environment variable</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Google Drive Folder URL (Optional)</label>
                        <input type="url" class="form-control" id="driveFolderUrl" 
                               placeholder="https://drive.google.com/drive/folders/your-folder-id">
                        <small class="text-muted">Link to the folder containing your orchid photos</small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveGoogleDriveConfig()">Save Configuration</button>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('setupGoogleDrive').addEventListener('click', function() {
    new bootstrap.Modal(document.getElementById('googleDriveModal')).show();
});

function saveGoogleDriveConfig() {
    const jsonData = document.getElementById('serviceAccountJson').value;
    const folderUrl = document.getElementById('driveFolderUrl').value;
    
    if (!jsonData.trim()) {
        alert('Please provide Google service account JSON credentials');
        return;
    }
    
    // Save credentials (this would typically be an admin-only operation)
    fetch('/admin/configure-google-drive', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            service_account_json: jsonData,
            folder_url: folderUrl
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Google Drive configured successfully! You can now import photos.');
            location.reload();
        } else {
            alert('Configuration failed: ' + data.error);
        }
    })
    .catch(error => {
        alert('Error saving configuration: ' + error);
    });
}

function runScraping(source) {
    if (!confirm('This will start scraping orchid data from external websites. Continue?')) {
        return;
    }
    
    const button = event.target;
    button.disabled = true;
    button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Scraping...';
    
    fetch('/admin/run-scraping', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({source: source})
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`Scraping completed! Added ${data.new_records} new orchid records.`);
            location.reload();
        } else {
            alert('Scraping failed: ' + data.error);
        }
    })
    .catch(error => {
        alert('Error during scraping: ' + error);
    })
    .finally(() => {
        button.disabled = false;
        button.innerHTML = '<i data-feather="download" class="me-2"></i>Run All Scrapers';
        feather.replace();
    });
}

function setupGoogleForms() {
    alert('Google Forms setup requires the same service account credentials as Google Drive. Configure Google Drive first.');
}

function processFormsData() {
    alert('Google Forms processing is not yet configured. Set up credentials first.');
}
</script>
{% endblock %}