{% extends "base.html" %}

{% block title %}{{ _('Import/Export PyArchInit') }}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-0">
                <i class="fas fa-exchange-alt me-2"></i>
                {{ _('Import/Export from PyArchInit') }}
            </h1>
            <p class="text-muted mt-2">
                {{ _('Import data from PyArchInit (full version) or export data to PyArchInit database') }}
            </p>
        </div>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-4" id="importExportTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="import-tab" data-bs-toggle="tab" data-bs-target="#import"
                    type="button" role="tab" aria-controls="import" aria-selected="true">
                <i class="fas fa-download me-2"></i>{{ _('Import from PyArchInit') }}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="export-tab" data-bs-toggle="tab" data-bs-target="#export"
                    type="button" role="tab" aria-controls="export" aria-selected="false">
                <i class="fas fa-upload me-2"></i>{{ _('Export to PyArchInit') }}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="create-tab" data-bs-toggle="tab" data-bs-target="#create"
                    type="button" role="tab" aria-controls="create" aria-selected="false">
                <i class="fas fa-plus-circle me-2"></i>{{ _('Create Empty Database') }}
            </button>
        </li>
    </ul>

    <div class="tab-content" id="importExportTabContent">
        <!-- IMPORT TAB -->
        <div class="tab-pane fade show active" id="import" role="tabpanel" aria-labelledby="import-tab">
            <div class="row">
                <div class="col-lg-8">
                    <!-- Database Connection -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">{{ _('Source PyArchInit Database') }}</h5>
                        </div>
                        <div class="card-body">
                            <!-- Database Type -->
                            <div class="mb-3">
                                <label class="form-label">{{ _('Database Type') }}</label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="import_db_type" id="import_sqlite"
                                           value="sqlite" checked autocomplete="off">
                                    <label class="btn btn-outline-primary" for="import_sqlite">
                                        <i class="fas fa-database me-2"></i>SQLite
                                    </label>

                                    <input type="radio" class="btn-check" name="import_db_type" id="import_postgresql"
                                           value="postgresql" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="import_postgresql">
                                        <i class="fas fa-server me-2"></i>PostgreSQL
                                    </label>
                                </div>
                            </div>

                            <!-- SQLite Connection -->
                            <div id="import_sqlite_config">
                                <div class="mb-3">
                                    <label for="import_db_path" class="form-label">{{ _('Database File Path') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="import_db_path"
                                               placeholder="/Users/yourname/pyarchinit/pyarchinit_DB_folder/pyarchinit_db.sqlite">
                                        <button class="btn btn-outline-secondary" type="button" id="browse_import_db">
                                            <i class="fas fa-folder-open me-1"></i>{{ _('Browse') }}
                                        </button>
                                    </div>
                                    <div class="form-text">
                                        {{ _('Full absolute path to PyArchInit SQLite database file') }}<br>
                                        <small class="text-muted">{{ _('Click Browse to select a file or type the path manually') }}</small>
                                    </div>
                                </div>
                            </div>

                            <!-- PostgreSQL Connection -->
                            <div id="import_postgresql_config" style="display: none;">
                                <div class="row">
                                    <div class="col-md-8 mb-3">
                                        <label for="import_pg_host" class="form-label">{{ _('Host') }}</label>
                                        <input type="text" class="form-control" id="import_pg_host"
                                               value="localhost" placeholder="localhost">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="import_pg_port" class="form-label">{{ _('Port') }}</label>
                                        <input type="text" class="form-control" id="import_pg_port"
                                               value="5432" placeholder="5432">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="import_pg_database" class="form-label">{{ _('Database Name') }}</label>
                                    <input type="text" class="form-control" id="import_pg_database"
                                           value="pyarchinit" placeholder="pyarchinit">
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="import_pg_user" class="form-label">{{ _('User') }}</label>
                                        <input type="text" class="form-control" id="import_pg_user" placeholder="postgres">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="import_pg_password" class="form-label">{{ _('Password') }}</label>
                                        <input type="password" class="form-control" id="import_pg_password">
                                    </div>
                                </div>
                            </div>

                            <button type="button" class="btn btn-outline-secondary" id="test_import_connection">
                                <i class="fas fa-check-circle me-2"></i>{{ _('Test Connection') }}
                            </button>
                            <span id="import_connection_status" class="ms-3"></span>
                        </div>
                    </div>

                    <!-- What to Import -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">{{ _('What to Import') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="import_sites" checked>
                                <label class="form-check-label" for="import_sites">
                                    <strong>{{ _('Sites') }}</strong> (site_table)
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="import_us" checked>
                                <label class="form-check-label" for="import_us">
                                    <strong>{{ _('US - Stratigraphic Units') }}</strong> (us_table)
                                </label>
                            </div>
                            <div class="form-check mb-2 ms-4">
                                <input class="form-check-input" type="checkbox" id="import_relationships" checked>
                                <label class="form-check-label" for="import_relationships">
                                    {{ _('Import US Relationships (from rapporti field)') }}
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="import_inventario" checked>
                                <label class="form-check-label" for="import_inventario">
                                    <strong>{{ _('Inventario Materiali') }}</strong> (inventario_materiali_table)
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="import_periodizzazione">
                                <label class="form-check-label" for="import_periodizzazione">
                                    <strong>{{ _('Periodizzazione') }}</strong> (periodizzazione_table)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="import_thesaurus">
                                <label class="form-check-label" for="import_thesaurus">
                                    <strong>{{ _('Thesaurus') }}</strong> (pyarchinit_thesaurus_sigle)
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Site Filter -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">{{ _('Filter by Sites') }} <small class="text-muted">({{ _('optional') }})</small></h5>
                        </div>
                        <div class="card-body">
                            <div id="available_sites_container" style="display: none;">
                                <p class="text-muted mb-2">
                                    <i class="fas fa-info-circle me-2"></i>
                                    {{ _('Select specific sites to import, or leave unselected to import all') }}
                                </p>
                                <select multiple class="form-select" id="import_site_filter" size="8">
                                    <!-- Sites will be populated after connection test -->
                                </select>
                                <div class="mt-2">
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="select_all_import_sites">
                                        {{ _('Select All') }}
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="deselect_all_import_sites">
                                        {{ _('Deselect All') }}
                                    </button>
                                </div>
                            </div>
                            <div id="no_sites_message">
                                <p class="text-muted mb-0">
                                    <i class="fas fa-arrow-up me-2"></i>
                                    {{ _('Test connection first to load available sites') }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Start Import Button -->
                    <button type="button" class="btn btn-primary btn-lg" id="start_import_btn">
                        <i class="fas fa-download me-2"></i>{{ _('Start Import') }}
                    </button>
                </div>

                <div class="col-lg-4">
                    <!-- Status Panel -->
                    <div class="card">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">{{ _('Status') }}</h5>
                        </div>
                        <div class="card-body">
                            <div id="import_status" class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>{{ _('Ready to import') }}
                            </div>

                            <div id="import_progress" style="display: none;">
                                <div class="progress mb-3">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated"
                                         role="progressbar" style="width: 100%"></div>
                                </div>
                            </div>

                            <div id="import_results" style="display: none;">
                                <h6 class="mb-3">{{ _('Import Results:') }}</h6>
                                <div id="import_results_content"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Manual Datazione Sync -->
                    <div class="card mt-3">
                        <div class="card-header bg-light">
                            <h5 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>{{ _('Datazione Sync') }}</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted small mb-3">
                                <i class="fas fa-info-circle me-2"></i>
                                {{ _('If you already imported periodizzazione data, use this button to manually synchronize datazioni table and US datazione fields.') }}
                            </p>
                            <button type="button" class="btn btn-sm btn-outline-primary w-100" id="sync_datazioni_btn">
                                <i class="fas fa-sync-alt me-2"></i>{{ _('Sync Datazioni from Periodizzazione') }}
                            </button>
                            <div id="sync_status" class="mt-2" style="display: none;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- EXPORT TAB -->
        <div class="tab-pane fade" id="export" role="tabpanel" aria-labelledby="export-tab">
            <div class="row">
                <div class="col-lg-8">
                    <!-- Target Database -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">{{ _('Target PyArchInit Database') }}</h5>
                        </div>
                        <div class="card-body">
                            <!-- Database Type -->
                            <div class="mb-3">
                                <label class="form-label">{{ _('Database Type') }}</label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="export_db_type" id="export_sqlite"
                                           value="sqlite" checked autocomplete="off">
                                    <label class="btn btn-outline-primary" for="export_sqlite">
                                        <i class="fas fa-database me-2"></i>SQLite
                                    </label>

                                    <input type="radio" class="btn-check" name="export_db_type" id="export_postgresql"
                                           value="postgresql" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="export_postgresql">
                                        <i class="fas fa-server me-2"></i>PostgreSQL
                                    </label>
                                </div>
                            </div>

                            <!-- SQLite Connection -->
                            <div id="export_sqlite_config">
                                <div class="mb-3">
                                    <label for="export_db_path" class="form-label">{{ _('Database File Path') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="export_db_path"
                                               placeholder="/Users/yourname/pyarchinit/pyarchinit_DB_folder/pyarchinit_db.sqlite">
                                        <button class="btn btn-outline-secondary" type="button" id="browse_export_db">
                                            <i class="fas fa-folder-open me-1"></i>{{ _('Browse') }}
                                        </button>
                                    </div>
                                    <div class="form-text">
                                        {{ _('Full absolute path to target PyArchInit SQLite database') }}<br>
                                        <small class="text-muted">{{ _('Click Browse to select a file or type the path manually') }}</small>
                                    </div>
                                </div>
                            </div>

                            <!-- PostgreSQL Connection -->
                            <div id="export_postgresql_config" style="display: none;">
                                <div class="row">
                                    <div class="col-md-8 mb-3">
                                        <label for="export_pg_host" class="form-label">{{ _('Host') }}</label>
                                        <input type="text" class="form-control" id="export_pg_host"
                                               value="localhost" placeholder="localhost">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="export_pg_port" class="form-label">{{ _('Port') }}</label>
                                        <input type="text" class="form-control" id="export_pg_port"
                                               value="5432" placeholder="5432">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="export_pg_database" class="form-label">{{ _('Database Name') }}</label>
                                    <input type="text" class="form-control" id="export_pg_database"
                                           value="pyarchinit" placeholder="pyarchinit">
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="export_pg_user" class="form-label">{{ _('User') }}</label>
                                        <input type="text" class="form-control" id="export_pg_user" placeholder="postgres">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="export_pg_password" class="form-label">{{ _('Password') }}</label>
                                        <input type="password" class="form-control" id="export_pg_password">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- What to Export -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">{{ _('What to Export') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="export_sites" checked>
                                <label class="form-check-label" for="export_sites">
                                    <strong>{{ _('Sites') }}</strong>
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="export_us" checked>
                                <label class="form-check-label" for="export_us">
                                    <strong>{{ _('US - Stratigraphic Units') }}</strong>
                                </label>
                            </div>
                            <div class="form-check mb-3 ms-4">
                                <input class="form-check-input" type="checkbox" id="export_relationships" checked>
                                <label class="form-check-label" for="export_relationships">
                                    {{ _('Export US Relationships (to rapporti field)') }}
                                </label>
                            </div>
                            <div class="alert alert-info mb-0">
                                <i class="fas fa-info-circle me-2"></i>
                                <small>{{ _('Note: Only Sites and US can be exported to PyArchInit full version') }}</small>
                            </div>
                        </div>
                    </div>

                    <!-- Start Export Button -->
                    <button type="button" class="btn btn-success btn-lg" id="start_export_btn">
                        <i class="fas fa-upload me-2"></i>{{ _('Start Export') }}
                    </button>
                </div>

                <div class="col-lg-4">
                    <!-- Status Panel -->
                    <div class="card">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">{{ _('Status') }}</h5>
                        </div>
                        <div class="card-body">
                            <div id="export_status" class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>{{ _('Ready to export') }}
                            </div>

                            <div id="export_progress" style="display: none;">
                                <div class="progress mb-3">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                         role="progressbar" style="width: 100%"></div>
                                </div>
                            </div>

                            <div id="export_results" style="display: none;">
                                <h6 class="mb-3">{{ _('Export Results:') }}</h6>
                                <div id="export_results_content"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- CREATE DATABASE TAB -->
        <div class="tab-pane fade" id="create" role="tabpanel" aria-labelledby="create-tab">
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">{{ _('Create Empty PyArchInit Database') }}</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted">
                                {{ _('Create a new empty database with full PyArchInit-Mini schema. Useful for starting new projects or testing.') }}
                            </p>

                            <!-- Database Type -->
                            <div class="mb-3">
                                <label class="form-label">{{ _('Database Type') }}</label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="create_db_type" id="create_sqlite"
                                           value="sqlite" checked autocomplete="off">
                                    <label class="btn btn-outline-primary" for="create_sqlite">
                                        <i class="fas fa-database me-2"></i>SQLite
                                    </label>

                                    <input type="radio" class="btn-check" name="create_db_type" id="create_postgresql"
                                           value="postgresql" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="create_postgresql">
                                        <i class="fas fa-server me-2"></i>PostgreSQL
                                    </label>
                                </div>
                            </div>

                            <!-- SQLite Config -->
                            <div id="create_sqlite_config">
                                <div class="mb-3">
                                    <label for="create_db_path" class="form-label">{{ _('Database File Path') }}</label>
                                    <input type="text" class="form-control" id="create_db_path"
                                           placeholder="/Users/yourname/new_pyarchinit.db">
                                    <div class="form-text">
                                        {{ _('Full path where to create the SQLite database file') }}
                                    </div>
                                </div>
                            </div>

                            <!-- PostgreSQL Config -->
                            <div id="create_postgresql_config" style="display: none;">
                                <div class="row">
                                    <div class="col-md-8 mb-3">
                                        <label for="create_pg_host" class="form-label">{{ _('Host') }}</label>
                                        <input type="text" class="form-control" id="create_pg_host"
                                               value="localhost" placeholder="localhost">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="create_pg_port" class="form-label">{{ _('Port') }}</label>
                                        <input type="text" class="form-control" id="create_pg_port"
                                               value="5432" placeholder="5432">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="create_pg_database" class="form-label">{{ _('Database Name') }}</label>
                                    <input type="text" class="form-control" id="create_pg_database"
                                           placeholder="new_pyarchinit">
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="create_pg_user" class="form-label">{{ _('Username') }}</label>
                                        <input type="text" class="form-control" id="create_pg_user"
                                               placeholder="postgres">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="create_pg_password" class="form-label">{{ _('Password') }}</label>
                                        <input type="password" class="form-control" id="create_pg_password">
                                    </div>
                                </div>
                            </div>

                            <!-- Overwrite Option -->
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="create_overwrite">
                                    <label class="form-check-label" for="create_overwrite">
                                        {{ _('Overwrite if database already exists') }}
                                    </label>
                                    <div class="form-text text-warning">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        {{ _('Warning: This will delete existing database and all its data!') }}
                                    </div>
                                </div>
                            </div>

                            <!-- Create Button -->
                            <div class="d-grid">
                                <button type="button" class="btn btn-success btn-lg" id="create_database_btn">
                                    <i class="fas fa-plus-circle me-2"></i>{{ _('Create Database') }}
                                </button>
                            </div>

                            <!-- Status Area -->
                            <div id="create_status" class="mt-3" style="display: none;"></div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title">
                                <i class="fas fa-info-circle me-2"></i>{{ _('Database Schema') }}
                            </h6>
                            <p class="card-text small">
                                {{ _('The new database will include all PyArchInit-Mini tables:') }}
                            </p>
                            <ul class="small">
                                <li>{{ _('Sites (site_table)') }}</li>
                                <li>{{ _('Stratigraphic Units (us_table)') }}</li>
                                <li>{{ _('US Relationships (us_relationships_table)') }}</li>
                                <li>{{ _('Periodization (periodizzazione_table)') }}</li>
                                <li>{{ _('Dating Periods (datazioni_table)') }}</li>
                                <li>{{ _('Periods (period_table)') }}</li>
                                <li>{{ _('Harris Matrix (harris_matrix_table)') }}</li>
                                <li>{{ _('Inventory (inventario_materiali_table)') }}</li>
                                <li>{{ _('Thesaurus (thesaurus tables)') }}</li>
                                <li>{{ _('Media (media_table, media_thumb_table)') }}</li>
                                <li>{{ _('Documentation (documentation_table)') }}</li>
                                <li>{{ _('Users (users)') }}</li>
                            </ul>
                            <p class="card-text small text-muted mt-3">
                                <i class="fas fa-lightbulb me-1"></i>
                                {{ _('Tip: Use this to create test databases or start new excavation projects.') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

<script>
// Toggle database type visibility (Import)
document.querySelectorAll('input[name="import_db_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        if (this.value === 'sqlite') {
            document.getElementById('import_sqlite_config').style.display = 'block';
            document.getElementById('import_postgresql_config').style.display = 'none';
        } else {
            document.getElementById('import_sqlite_config').style.display = 'none';
            document.getElementById('import_postgresql_config').style.display = 'block';
        }
    });
});

// Toggle database type visibility (Export)
document.querySelectorAll('input[name="export_db_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        if (this.value === 'sqlite') {
            document.getElementById('export_sqlite_config').style.display = 'block';
            document.getElementById('export_postgresql_config').style.display = 'none';
        } else {
            document.getElementById('export_sqlite_config').style.display = 'none';
            document.getElementById('export_postgresql_config').style.display = 'block';
        }
    });
});

// Test Import Connection
document.getElementById('test_import_connection').addEventListener('click', function() {
    const dbType = document.querySelector('input[name="import_db_type"]:checked').value;
    const statusEl = document.getElementById('import_connection_status');

    let data = { db_type: dbType };

    if (dbType === 'sqlite') {
        data.db_path = document.getElementById('import_db_path').value;
    } else {
        data.pg_host = document.getElementById('import_pg_host').value;
        data.pg_port = document.getElementById('import_pg_port').value;
        data.pg_database = document.getElementById('import_pg_database').value;
        data.pg_user = document.getElementById('import_pg_user').value;
        data.pg_password = document.getElementById('import_pg_password').value;
    }

    statusEl.innerHTML = '<span class="text-muted"><i class="fas fa-spinner fa-spin me-2"></i>{{ _("Testing...") }}</span>';

    fetch('/pyarchinit-import-export/api/pyarchinit/test-connection', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            statusEl.innerHTML = `<span class="text-success"><i class="fas fa-check-circle me-2"></i>${result.message} (${result.sites_count} {{ _("sites") }})</span>`;

            // Populate sites dropdown
            const sitesSelect = document.getElementById('import_site_filter');
            sitesSelect.innerHTML = '';
            result.sites.forEach(site => {
                const option = document.createElement('option');
                option.value = site;
                option.textContent = site;
                sitesSelect.appendChild(option);
            });

            document.getElementById('available_sites_container').style.display = 'block';
            document.getElementById('no_sites_message').style.display = 'none';
        } else {
            statusEl.innerHTML = `<span class="text-danger"><i class="fas fa-times-circle me-2"></i>${result.message}</span>`;
        }
    })
    .catch(error => {
        statusEl.innerHTML = `<span class="text-danger"><i class="fas fa-times-circle me-2"></i>{{ _("Error") }}: ${error.message}</span>`;
    });
});

// Select/Deselect All Sites
document.getElementById('select_all_import_sites').addEventListener('click', function() {
    const select = document.getElementById('import_site_filter');
    for (let option of select.options) {
        option.selected = true;
    }
});

document.getElementById('deselect_all_import_sites').addEventListener('click', function() {
    const select = document.getElementById('import_site_filter');
    for (let option of select.options) {
        option.selected = false;
    }
});

// Start Import
document.getElementById('start_import_btn').addEventListener('click', function() {
    if (!confirm('{{ _("Start importing data from PyArchInit? This may take several minutes.") }}')) {
        return;
    }

    const dbType = document.querySelector('input[name="import_db_type"]:checked').value;
    let data = { db_type: dbType };

    if (dbType === 'sqlite') {
        data.db_path = document.getElementById('import_db_path').value;
    } else {
        data.pg_host = document.getElementById('import_pg_host').value;
        data.pg_port = document.getElementById('import_pg_port').value;
        data.pg_database = document.getElementById('import_pg_database').value;
        data.pg_user = document.getElementById('import_pg_user').value;
        data.pg_password = document.getElementById('import_pg_password').value;
    }

    data.import_sites = document.getElementById('import_sites').checked;
    data.import_us = document.getElementById('import_us').checked;
    data.import_inventario = document.getElementById('import_inventario').checked;
    data.import_periodizzazione = document.getElementById('import_periodizzazione').checked;
    data.import_thesaurus = document.getElementById('import_thesaurus').checked;
    data.import_relationships = document.getElementById('import_relationships').checked;

    const siteFilter = Array.from(document.getElementById('import_site_filter').selectedOptions).map(opt => opt.value);
    data.site_filter = siteFilter;

    document.getElementById('import_status').innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ _("Importing...") }}';
    document.getElementById('import_status').className = 'alert alert-info';
    document.getElementById('import_progress').style.display = 'block';
    document.getElementById('import_results').style.display = 'none';

    fetch('/pyarchinit-import-export/api/pyarchinit/import', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        document.getElementById('import_progress').style.display = 'none';

        if (result.success) {
            document.getElementById('import_status').innerHTML = '<i class="fas fa-check-circle me-2"></i>{{ _("Import completed successfully!") }}';
            document.getElementById('import_status').className = 'alert alert-success';

            // Display results
            let resultsHTML = '<table class="table table-sm">';
            resultsHTML += '<thead><tr><th>{{ _("Table") }}</th><th>{{ _("Imported") }}</th><th>{{ _("Updated") }}</th><th>{{ _("Errors") }}</th></tr></thead><tbody>';

            for (const [table, stats] of Object.entries(result.results)) {
                resultsHTML += `<tr>
                    <td><strong>${table}</strong></td>
                    <td class="text-success">${stats.imported || 0}</td>
                    <td class="text-warning">${stats.updated || 0}</td>
                    <td class="text-danger">${stats.errors ? stats.errors.length : 0}</td>
                </tr>`;
            }

            resultsHTML += '</tbody></table>';
            document.getElementById('import_results_content').innerHTML = resultsHTML;
            document.getElementById('import_results').style.display = 'block';
        } else {
            document.getElementById('import_status').innerHTML = `<i class="fas fa-times-circle me-2"></i>{{ _("Error") }}: ${result.message}`;
            document.getElementById('import_status').className = 'alert alert-danger';
        }
    })
    .catch(error => {
        document.getElementById('import_progress').style.display = 'none';
        document.getElementById('import_status').innerHTML = `<i class="fas fa-times-circle me-2"></i>{{ _("Error") }}: ${error.message}`;
        document.getElementById('import_status').className = 'alert alert-danger';
    });
});

// Start Export
document.getElementById('start_export_btn').addEventListener('click', function() {
    if (!confirm('{{ _("Start exporting data to PyArchInit? Existing data may be updated.") }}')) {
        return;
    }

    const dbType = document.querySelector('input[name="export_db_type"]:checked').value;
    let data = { db_type: dbType };

    if (dbType === 'sqlite') {
        data.db_path = document.getElementById('export_db_path').value;
    } else {
        data.pg_host = document.getElementById('export_pg_host').value;
        data.pg_port = document.getElementById('export_pg_port').value;
        data.pg_database = document.getElementById('export_pg_database').value;
        data.pg_user = document.getElementById('export_pg_user').value;
        data.pg_password = document.getElementById('export_pg_password').value;
    }

    data.export_sites = document.getElementById('export_sites').checked;
    data.export_us = document.getElementById('export_us').checked;
    data.export_relationships = document.getElementById('export_relationships').checked;

    document.getElementById('export_status').innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ _("Exporting...") }}';
    document.getElementById('export_status').className = 'alert alert-info';
    document.getElementById('export_progress').style.display = 'block';
    document.getElementById('export_results').style.display = 'none';

    fetch('/pyarchinit-import-export/api/pyarchinit/export', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        document.getElementById('export_progress').style.display = 'none';

        if (result.success) {
            document.getElementById('export_status').innerHTML = '<i class="fas fa-check-circle me-2"></i>{{ _("Export completed successfully!") }}';
            document.getElementById('export_status').className = 'alert alert-success';

            // Display results
            let resultsHTML = '<table class="table table-sm">';
            resultsHTML += '<thead><tr><th>{{ _("Table") }}</th><th>{{ _("Exported") }}</th><th>{{ _("Updated") }}</th><th>{{ _("Errors") }}</th></tr></thead><tbody>';

            for (const [table, stats] of Object.entries(result.results)) {
                resultsHTML += `<tr>
                    <td><strong>${table}</strong></td>
                    <td class="text-success">${stats.exported || 0}</td>
                    <td class="text-warning">${stats.updated || 0}</td>
                    <td class="text-danger">${stats.errors ? stats.errors.length : 0}</td>
                </tr>`;
            }

            resultsHTML += '</tbody></table>';
            document.getElementById('export_results_content').innerHTML = resultsHTML;
            document.getElementById('export_results').style.display = 'block';
        } else {
            document.getElementById('export_status').innerHTML = `<i class="fas fa-times-circle me-2"></i>{{ _("Error") }}: ${result.message}`;
            document.getElementById('export_status').className = 'alert alert-danger';
        }
    })
    .catch(error => {
        document.getElementById('export_progress').style.display = 'none';
        document.getElementById('export_status').innerHTML = `<i class="fas fa-times-circle me-2"></i>{{ _("Error") }}: ${error.message}`;
        document.getElementById('export_status').className = 'alert alert-danger';
    });
});

// ============================================
// FILE BROWSER
// ============================================

let fileBrowserTargetInput = null;

// File Browser Modal
const fileBrowserModal = `
<div class="modal fade" id="fileBrowserModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-folder-open me-2"></i>{{ _('Select SQLite Database') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Breadcrumb -->
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb" id="fileBrowserBreadcrumb"></ol>
                </nav>

                <!-- File List -->
                <div id="fileBrowserList" class="list-group" style="max-height: 400px; overflow-y: auto;">
                    <div class="text-center p-4">
                        <i class="fas fa-spinner fa-spin fa-2x"></i>
                        <p class="mt-2">{{ _('Loading...') }}</p>
                    </div>
                </div>

                <!-- Current Selection -->
                <div class="mt-3">
                    <label class="form-label">{{ _('Selected File') }}:</label>
                    <input type="text" class="form-control" id="fileBrowserSelected" readonly>
                </div>
            </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" id="fileBrowserConfirm" disabled>
                    <i class="fas fa-check me-2"></i>{{ _('Select') }}
                </button>
            </div>
        </div>
    </div>
</div>
`;

// Add modal to page
document.body.insertAdjacentHTML('beforeend', fileBrowserModal);

// File browser functions
let currentBrowserPath = '';
let selectedFilePath = '';

function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
}

function loadDirectory(path) {
    const listEl = document.getElementById('fileBrowserList');
    listEl.innerHTML = '<div class="text-center p-4"><i class="fas fa-spinner fa-spin fa-2x"></i></div>';

    // Ensure path is a string, use empty string if null/undefined
    const requestPath = path ? path.trim() : '';

    console.log('Loading directory:', requestPath || '(home)');

    fetch('/pyarchinit-import-export/api/pyarchinit/browse-files', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ path: requestPath })
    })
    .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers.get('Content-Type'));

        // Get the raw text first to see what we're actually receiving
        return response.text().then(text => {
            console.log('Raw response text:', text);

            // Try to parse as JSON
            try {
                return JSON.parse(text);
            } catch (e) {
                console.error('Failed to parse JSON:', e);
                console.error('Response was:', text);
                throw new Error('Server returned invalid JSON: ' + text.substring(0, 100));
            }
        });
    })
    .then(result => {
        console.log('Parsed result:', result);
        if (result.success) {
            currentBrowserPath = result.current_path;
            renderBreadcrumb(result.current_path);
            renderFileList(result.items, result.parent_path);
        } else {
            listEl.innerHTML = `<div class="alert alert-danger">${result.message}</div>`;
        }
    })
    .catch(error => {
        console.error('File browser error:', error);
        listEl.innerHTML = `<div class="alert alert-danger">{{ _('Error') }}: ${error.message}</div>`;
    });
}

function renderBreadcrumb(path) {
    const breadcrumb = document.getElementById('fileBrowserBreadcrumb');
    const parts = path.split('/').filter(p => p);

    let html = '<li class="breadcrumb-item"><a href="#" data-path="/"><i class="fas fa-home"></i></a></li>';

    let currentPath = '';
    parts.forEach((part, index) => {
        currentPath += '/' + part;
        const isLast = index === parts.length - 1;

        if (isLast) {
            html += `<li class="breadcrumb-item active">${part}</li>`;
        } else {
            html += `<li class="breadcrumb-item"><a href="#" data-path="${currentPath}">${part}</a></li>`;
        }
    });

    breadcrumb.innerHTML = html;

    // Add click handlers to breadcrumb links
    breadcrumb.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            loadDirectory(this.getAttribute('data-path'));
        });
    });
}

function renderFileList(items, parentPath) {
    const listEl = document.getElementById('fileBrowserList');
    let html = '';

    // Parent directory link
    if (parentPath) {
        html += `
        <a href="#" class="list-group-item list-group-item-action" data-path="${parentPath}" data-type="parent">
            <i class="fas fa-level-up-alt me-2"></i>
            <strong>{{ _('Parent Directory') }}</strong>
        </a>`;
    }

    // Directories and files
    items.forEach(item => {
        const icon = item.is_dir ? 'fa-folder' : 'fa-database';
        const iconColor = item.is_dir ? 'text-warning' : 'text-primary';
        const sizeText = item.is_dir ? '' : `<small class="text-muted">(${formatFileSize(item.size)})</small>`;

        html += `
        <a href="#" class="list-group-item list-group-item-action"
           data-path="${item.path}"
           data-type="${item.is_dir ? 'dir' : 'file'}"
           data-is-sqlite="${item.is_sqlite}">
            <i class="fas ${icon} ${iconColor} me-2"></i>
            ${item.name}
            ${sizeText}
        </a>`;
    });

    if (html === '') {
        html = '<div class="alert alert-info m-3">{{ _('No directories or SQLite databases found') }}</div>';
    }

    listEl.innerHTML = html;

    // Add click handlers
    listEl.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const path = this.getAttribute('data-path');
            const type = this.getAttribute('data-type');
            const isSqlite = this.getAttribute('data-is-sqlite') === 'true';

            if (type === 'parent' || type === 'dir') {
                // Navigate to directory
                loadDirectory(path);
                selectedFilePath = '';
                document.getElementById('fileBrowserSelected').value = '';
                document.getElementById('fileBrowserConfirm').disabled = true;
            } else if (type === 'file' && isSqlite) {
                // Select file
                selectedFilePath = path;
                document.getElementById('fileBrowserSelected').value = path;
                document.getElementById('fileBrowserConfirm').disabled = false;

                // Highlight selection
                listEl.querySelectorAll('.list-group-item').forEach(item => {
                    item.classList.remove('active');
                });
                this.classList.add('active');
            }
        });
    });
}

// Browse button handlers
document.getElementById('browse_import_db').addEventListener('click', function() {
    fileBrowserTargetInput = document.getElementById('import_db_path');
    const currentValue = fileBrowserTargetInput.value || '';

    selectedFilePath = currentValue;
    document.getElementById('fileBrowserSelected').value = selectedFilePath;
    document.getElementById('fileBrowserConfirm').disabled = !selectedFilePath;

    const modal = new bootstrap.Modal(document.getElementById('fileBrowserModal'));
    modal.show();

    // If there's a current value, start from its parent directory, otherwise start from home
    let startPath = '';
    if (currentValue && currentValue.includes('/')) {
        startPath = currentValue.substring(0, currentValue.lastIndexOf('/'));
    }
    console.log('Opening file browser, start path:', startPath || '(home)');
    loadDirectory(startPath);
});

document.getElementById('browse_export_db').addEventListener('click', function() {
    fileBrowserTargetInput = document.getElementById('export_db_path');
    const currentValue = fileBrowserTargetInput.value || '';

    selectedFilePath = currentValue;
    document.getElementById('fileBrowserSelected').value = selectedFilePath;
    document.getElementById('fileBrowserConfirm').disabled = !selectedFilePath;

    const modal = new bootstrap.Modal(document.getElementById('fileBrowserModal'));
    modal.show();

    // If there's a current value, start from its parent directory, otherwise start from home
    let startPath = '';
    if (currentValue && currentValue.includes('/')) {
        startPath = currentValue.substring(0, currentValue.lastIndexOf('/'));
    }
    console.log('Opening file browser, start path:', startPath || '(home)');
    loadDirectory(startPath);
});

// Confirm selection
document.getElementById('fileBrowserConfirm').addEventListener('click', function() {
    if (selectedFilePath && fileBrowserTargetInput) {
        fileBrowserTargetInput.value = selectedFilePath;
        bootstrap.Modal.getInstance(document.getElementById('fileBrowserModal')).hide();
    }
});

// Manual Datazione Sync
document.getElementById('sync_datazioni_btn').addEventListener('click', function() {
    if (!confirm('{{ _("Synchronize datazioni from periodizzazione data? This will update datazioni_table and us_table.datazione fields.") }}')) {
        return;
    }

    const statusEl = document.getElementById('sync_status');
    statusEl.style.display = 'block';
    statusEl.innerHTML = '<div class="alert alert-info mb-0"><i class="fas fa-spinner fa-spin me-2"></i>{{ _("Synchronizing...") }}</div>';

    fetch('/pyarchinit-import-export/api/pyarchinit/sync-datazioni', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({})
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            let resultsHTML = '<div class="alert alert-success mb-0">';
            resultsHTML += '<i class="fas fa-check-circle me-2"></i>' + result.message + '<br>';

            if (result.results.datazioni_sync) {
                resultsHTML += '<small>Datazioni: ' + result.results.datazioni_sync.created + ' {{ _("created") }}, ';
                resultsHTML += result.results.datazioni_sync.skipped + ' {{ _("skipped") }}</small><br>';
            }

            if (result.results.us_datazione_update) {
                resultsHTML += '<small>US Updated: ' + result.results.us_datazione_update.updated + ' {{ _("updated") }}, ';
                resultsHTML += result.results.us_datazione_update.skipped + ' {{ _("skipped") }}</small>';
            }

            resultsHTML += '</div>';
            statusEl.innerHTML = resultsHTML;
        } else {
            statusEl.innerHTML = '<div class="alert alert-danger mb-0"><i class="fas fa-times-circle me-2"></i>{{ _("Error") }}: ' + result.message + '</div>';
        }
    })
    .catch(error => {
        statusEl.innerHTML = '<div class="alert alert-danger mb-0"><i class="fas fa-times-circle me-2"></i>{{ _("Error") }}: ' + error.message + '</div>';
    });
});

// ===== CREATE DATABASE TAB =====

// Toggle between SQLite and PostgreSQL configuration
document.querySelectorAll('input[name="create_db_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        if (this.value === 'sqlite') {
            document.getElementById('create_sqlite_config').style.display = 'block';
            document.getElementById('create_postgresql_config').style.display = 'none';
        } else {
            document.getElementById('create_sqlite_config').style.display = 'none';
            document.getElementById('create_postgresql_config').style.display = 'block';
        }
    });
});

// Create Database Button
document.getElementById('create_database_btn').addEventListener('click', function() {
    const dbType = document.querySelector('input[name="create_db_type"]:checked').value;
    const overwrite = document.getElementById('create_overwrite').checked;
    const statusEl = document.getElementById('create_status');

    let requestData = {
        db_type: dbType,
        overwrite: overwrite
    };

    // Collect configuration based on database type
    if (dbType === 'sqlite') {
        const dbPath = document.getElementById('create_db_path').value.trim();
        if (!dbPath) {
            statusEl.style.display = 'block';
            statusEl.innerHTML = '<div class="alert alert-danger mb-0"><i class="fas fa-exclamation-circle me-2"></i>{{ _("Please provide database path") }}</div>';
            return;
        }
        requestData.db_path = dbPath;
    } else {
        const pgHost = document.getElementById('create_pg_host').value.trim();
        const pgPort = document.getElementById('create_pg_port').value.trim();
        const pgDatabase = document.getElementById('create_pg_database').value.trim();
        const pgUser = document.getElementById('create_pg_user').value.trim();
        const pgPassword = document.getElementById('create_pg_password').value;

        if (!pgHost || !pgPort || !pgDatabase || !pgUser) {
            statusEl.style.display = 'block';
            statusEl.innerHTML = '<div class="alert alert-danger mb-0"><i class="fas fa-exclamation-circle me-2"></i>{{ _("Please fill in all PostgreSQL connection details") }}</div>';
            return;
        }

        requestData.pg_host = pgHost;
        requestData.pg_port = pgPort;
        requestData.pg_database = pgDatabase;
        requestData.pg_user = pgUser;
        requestData.pg_password = pgPassword;
    }

    // Show loading status
    statusEl.style.display = 'block';
    statusEl.innerHTML = '<div class="alert alert-info mb-0"><i class="fas fa-spinner fa-spin me-2"></i>{{ _("Creating database...") }}</div>';
    
    // Disable button during creation
    const btn = document.getElementById('create_database_btn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ _("Creating...") }}';

    // Call API
    fetch('/pyarchinit-import-export/api/pyarchinit/create-database', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(requestData)
    })
    .then(response => response.json())
    .then(result => {
        btn.disabled = false;
        btn.innerHTML = originalHTML;

        if (result.success) {
            let message = '<div class="alert alert-success mb-0">';
            message += '<i class="fas fa-check-circle me-2"></i><strong>{{ _("Success!") }}</strong><br>';
            message += result.message + '<br>';
            message += '<small>{{ _("Tables created") }}: ' + result.tables_created + '</small><br>';
            message += '<small>{{ _("Database type") }}: ' + result.db_type + '</small>';
            message += '</div>';
            statusEl.innerHTML = message;

            // Clear sensitive fields
            if (dbType === 'postgresql') {
                document.getElementById('create_pg_password').value = '';
            }
        } else {
            statusEl.innerHTML = '<div class="alert alert-danger mb-0"><i class="fas fa-exclamation-circle me-2"></i>' + result.message + '</div>';
        }
    })
    .catch(error => {
        btn.disabled = false;
        btn.innerHTML = originalHTML;
        statusEl.innerHTML = '<div class="alert alert-danger mb-0"><i class="fas fa-exclamation-circle me-2"></i>{{ _("Error") }}: ' + error.message + '</div>';
    });
});

</script>
{% endblock %}