@extends('layouts.main')

@section('title', 'Create Vena ETL Notebook — Prolytics Connect')

@section('styles')
<style>
    .wizard-step-badge {
        width: 32px; height: 32px;
        border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 600; font-size: 0.85rem;
        flex-shrink: 0;
    }
    .wizard-step-badge.active    { background: #007aff; color: #fff; }
    .wizard-step-badge.completed { background: #28a745; color: #fff; }
    .wizard-step-badge.pending   { background: #e9ecef; color: #6c757d; }
    .wizard-step-line {
        flex: 1; height: 2px; background: #e9ecef; margin: 0 8px;
    }
    .wizard-step-line.done { background: #28a745; }
    .mode-card {
        border: 2px solid #e9ecef;
        border-radius: 10px; padding: 12px;
        cursor: pointer; transition: all 0.15s;
    }
    .mode-card:hover { border-color: #007aff; background: #f0f6ff; }
    .mode-card.selected { border-color: #007aff; background: #e8f0fe; }
    .step-panel { display: none; }
    .step-panel.active { display: block; }
    .conn-item {
        border: 2px solid #e9ecef; border-radius: 8px; padding: 10px 14px;
        cursor: pointer; transition: all 0.15s; margin-bottom: 8px;
    }
    .conn-item:hover { border-color: #007aff; background: #f0f6ff; }
    .conn-item.selected { border-color: #007aff; background: #e8f0fe; }
</style>
@endsection

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-xl-7">

            {{-- Page header --}}
            <div class="d-flex align-items-center mb-4">
                <a href="{{ route('vena-notebooks.index') }}" class="btn btn-sm btn-outline-secondary me-3">
                    <i class="bx bx-arrow-back me-1"></i>Back
                </a>
                <div>
                    <h4 class="mb-0 fw-bold">
                        <i class="bx bx-transfer-alt me-2" style="color:#007aff;"></i>Create Vena ETL Notebook
                    </h4>
                    <small class="text-muted">Send data from<span id="lakehouseSubtitle"> your Microsoft Fabric Lakehouse</span> to a Vena ETL template</small>
                </div>
            </div>

            {{-- Step progress --}}
            <div class="d-flex align-items-center mb-4" id="stepIndicator">
                <div class="wizard-step-badge active" id="badge1">1</div>
                <div class="wizard-step-line" id="line1"></div>
                <div class="wizard-step-badge pending" id="badge2">2</div>
                <div class="wizard-step-line" id="line2"></div>
                <div class="wizard-step-badge pending" id="badge3">3</div>
                <div class="wizard-step-line" id="line3"></div>
                <div class="wizard-step-badge pending" id="badge4">4</div>
                <div class="wizard-step-line" id="line4"></div>
                <div class="wizard-step-badge pending" id="badge5">5</div>
            </div>

            {{-- Wizard card --}}
            <div class="card shadow-sm">
                <div class="card-body p-4">

                    {{-- ── Step 1: Connection ────────────────────────────────── --}}
                    <div class="step-panel active" id="step1">
                        <h5 class="fw-semibold mb-1">Step 1 — Vena Connection</h5>
                        <p class="text-muted small mb-4">
                            Select an existing Vena connection or create a new one.
                            Credentials are encrypted at rest.
                        </p>

                        {{-- Existing connections --}}
                        @if($connections->isNotEmpty())
                        <div class="mb-3">
                            <label class="form-label fw-medium">Existing Connections</label>
                            <div id="connectionList">
                                @foreach($connections as $conn)
                                <div class="conn-item" id="conn_{{ $conn->id }}"
                                     onclick="selectConnection({{ $conn->id }}, '{{ addslashes($conn->name) }}', '{{ $conn->vena_hub }}')">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <div class="fw-semibold">{{ $conn->name }}</div>
                                            <small class="text-muted">Hub: <strong>{{ $conn->vena_hub }}</strong></small>
                                        </div>
                                        <i class="bx bx-square" id="connCheck_{{ $conn->id }}"
                                           style="font-size:1.2rem; color:#ced4da;"></i>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="text-muted small mb-3 text-center">— or —</div>
                        @endif

                        {{-- New connection form --}}
                        <div class="card bg-light border-0">
                            <div class="card-body">
                                <p class="fw-medium mb-3 small">
                                    <i class="bx bx-plus-circle me-1 text-primary"></i>Create New Connection
                                </p>

                                <div class="mb-3">
                                    <label class="form-label fw-medium">Connection Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="connName"
                                           placeholder="e.g. Vena Production" maxlength="255">
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-medium">Workspace <span class="text-danger">*</span></label>
                                    @if($selectedWorkspaceId)
                                        <select class="form-select" id="connWorkspaceSelect" disabled>
                                            @foreach($workspaces as $ws)
                                                @if($ws->id == $selectedWorkspaceId)
                                                    <option value="{{ $ws->id }}" data-lakehouse-name="{{ $ws->lakehouse_name }}" selected>{{ $ws->name }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                        <small class="text-muted"><i class="bx bx-lock-alt me-1"></i>Workspace set from context.</small>
                                    @else
                                        <select class="form-select" id="connWorkspaceSelect">
                                            <option value="">— Select workspace —</option>
                                            @foreach($workspaces as $ws)
                                                <option value="{{ $ws->id }}" data-lakehouse-name="{{ $ws->lakehouse_name }}">{{ $ws->name }}</option>
                                            @endforeach
                                        </select>
                                    @endif
                                </div>

                                <div class="row g-3 mb-3">
                                    <div class="col-md-4">
                                        <label class="form-label fw-medium">Vena Hub <span class="text-danger">*</span></label>
                                        <select class="form-select" id="connHub">
                                            <option value="">— Hub —</option>
                                            @foreach(['us1','us2','us3','us4','us5','ca3','ca4','eu1','eu2','eu3'] as $hub)
                                                <option value="{{ $hub }}">{{ $hub }}</option>
                                            @endforeach
                                        </select>
                                        <small class="text-muted">Your Vena region</small>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-medium">API User <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control font-monospace" id="connApiUser"
                                           placeholder="847397542098239488.839669637163122688">
                                    <small class="text-muted">Format: <code>{org_id}.{user_id}</code></small>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-medium">API Key <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="password" class="form-control font-monospace" id="connApiKey"
                                               placeholder="847397542098239488.839669637163122688:6cf888…"
                                               autocomplete="new-password">
                                        <button class="btn btn-outline-secondary" type="button"
                                                onclick="toggleKeyVisibility()">
                                            <i class="bx bx-show" id="toggleKeyIcon"></i>
                                        </button>
                                    </div>
                                    <small class="text-muted">Format: <code>{org_id}.{user_id}:{secret_key}</code></small>
                                </div>

                                <button type="button" class="btn btn-outline-primary btn-sm"
                                        id="saveConnBtn" onclick="saveNewConnection()">
                                    <i class="bx bx-save me-1"></i>Save &amp; Select Connection
                                </button>
                                <div id="connSaveResult" class="mt-2" style="display:none;"></div>
                            </div>
                        </div>

                        <div id="selectedConnBadge" class="alert alert-success mt-3 small" style="display:none;">
                            <i class="bx bx-check-circle me-1"></i>
                            Connection selected: <strong id="selectedConnName">—</strong>
                            <span class="badge bg-secondary ms-1" id="selectedConnHub">—</span>
                        </div>
                    </div>

                    {{-- ── Step 2: Configuration ─────────────────────────────── --}}
                    <div class="step-panel" id="step2">
                        <h5 class="fw-semibold mb-1">Step 2 — Configuration</h5>
                        <p class="text-muted small mb-4">Configure the notebook name, source, and Vena template.</p>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Notebook Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="notebookName"
                                   placeholder="e.g. Sales Data to Vena Daily" maxlength="255">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Description</label>
                            <textarea class="form-control" id="notebookDesc" rows="2"
                                      placeholder="Optional description" maxlength="1000"></textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Workspace <span class="text-danger">*</span></label>
                            @if($selectedWorkspaceId)
                                <select class="form-select" id="workspaceSelect" disabled>
                                    @foreach($workspaces as $ws)
                                        @if($ws->id == $selectedWorkspaceId)
                                            <option value="{{ $ws->id }}" data-lakehouse-name="{{ $ws->lakehouse_name }}" selected>{{ $ws->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <small class="text-muted"><i class="bx bx-lock-alt me-1"></i>Workspace set from context.</small>
                            @else
                                <select class="form-select" id="workspaceSelect" onchange="loadLakehouseTables(); updateLakehouseSubtitle();">
                                    <option value="">— Select workspace —</option>
                                    @foreach($workspaces as $ws)
                                        <option value="{{ $ws->id }}" data-lakehouse-name="{{ $ws->lakehouse_name }}">{{ $ws->name }}</option>
                                    @endforeach
                                </select>
                                @if($workspaces->isEmpty())
                                    <small class="text-warning">
                                        <i class="bx bx-info-circle me-1"></i>
                                        No Fabric-linked workspaces found. Please create one first.
                                    </small>
                                @endif
                            @endif
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">
                                Source Lakehouse Table <span class="text-danger">*</span>
                            </label>
                            <div class="d-flex gap-2 align-items-center">
                                <select class="form-select font-monospace" id="sourceTable" style="flex:1;">
                                    <option value="">— Select workspace first —</option>
                                </select>
                                <button type="button" class="btn btn-outline-secondary btn-sm"
                                        id="refreshTablesBtn" onclick="loadLakehouseTables()" title="Refresh table list"
                                        style="white-space:nowrap;" disabled>
                                    <i class="bx bx-refresh" id="refreshTablesIcon"></i>
                                </button>
                            </div>
                            <small class="text-muted" id="sourceTableHint">
                                Select a workspace to load available Delta tables.
                            </small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">
                                Vena Template ID <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control font-monospace" id="venaTemplateId"
                                   placeholder="e.g. 1304634414545764353" maxlength="255">
                            <small class="text-muted">
                                Find this in Vena: ETL &rarr; Templates &rarr; select template &rarr; copy ID from URL.
                            </small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Transfer Mode <span class="text-danger">*</span></label>
                            <div class="row g-3">
                                <div class="col-6">
                                    <div class="mode-card selected" id="modeDataArray"
                                         onclick="setTransferMode('data_array')">
                                        <div class="fw-semibold">
                                            <i class="bx bx-table me-2 text-primary"></i>Data Array
                                        </div>
                                        <small class="text-muted">Sends rows as JSON array (recommended)</small>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mode-card" id="modeCsvFile"
                                         onclick="setTransferMode('csv_file')">
                                        <div class="fw-semibold">
                                            <i class="bx bx-file me-2 text-success"></i>CSV File
                                        </div>
                                        <small class="text-muted">Exports to CSV then uploads file</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ── Step 3: Options ───────────────────────────────────── --}}
                    <div class="step-panel" id="step3">
                        <h5 class="fw-semibold mb-1">Step 3 — Data Options</h5>
                        <p class="text-muted small mb-4">
                            Configure how data is extracted and prepared before sending to Vena.
                        </p>

                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="includeHeaders" checked>
                                <label class="form-check-label fw-medium" for="includeHeaders">
                                    Include Column Headers
                                </label>
                            </div>
                            <small class="text-muted">
                                When enabled, the first row sent to Vena will contain column names.
                                Most Vena templates expect headers.
                            </small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Filter Expression (optional)</label>
                            <input type="text" class="form-control font-monospace" id="filterExpression"
                                   placeholder="e.g. year = 2026 AND status = 'active'" maxlength="2000">
                            <small class="text-muted">
                                SQL WHERE clause applied to the Lakehouse table before sending.
                                Leave empty to send all rows.
                            </small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Column Mapping (optional)</label>
                            <div id="mappingRows">
                                <div class="row g-2 mb-2 mapping-row">
                                    <div class="col-5">
                                        <input type="text" class="form-control form-control-sm font-monospace"
                                               placeholder="Lakehouse column" name="map_src[]">
                                    </div>
                                    <div class="col-1 text-center py-2">→</div>
                                    <div class="col-5">
                                        <input type="text" class="form-control form-control-sm font-monospace"
                                               placeholder="Vena column" name="map_dst[]">
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                onclick="removeMappingRow(this)">
                                            <i class="bx bx-x"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary mt-1"
                                    onclick="addMappingRow()">
                                <i class="bx bx-plus me-1"></i>Add Column Mapping
                            </button>
                            <small class="d-block text-muted mt-1">
                                Maps Lakehouse column names to Vena template column names.
                                Leave empty to send all columns as-is.
                            </small>
                        </div>
                    </div>

                    {{-- ── Step 4: Schedule ─────────────────────────────────── --}}
                    <div class="step-panel" id="step4">
                        <h5 class="fw-semibold mb-1">Step 4 — Schedule</h5>
                        <p class="text-muted small mb-4">
                            Configure when the notebook should run automatically in Fabric.
                        </p>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Frequency</label>
                            <select class="form-select" id="schedFrequency"
                                    onchange="onScheduleFrequencyChange()"
                                    style="max-width:200px;">
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                            </select>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-auto">
                                <label class="form-label fw-medium">Time</label>
                                <input type="time" class="form-control" id="schedTime" value="06:00">
                            </div>
                            <div class="col-auto">
                                <label class="form-label fw-medium">Timezone</label>
                                <select class="form-select" id="schedTimezone">
                                    <option value="UTC">UTC</option>
                                    <option value="America/New_York">Eastern (ET)</option>
                                    <option value="America/Chicago">Central (CT)</option>
                                    <option value="America/Los_Angeles">Pacific (PT)</option>
                                    <option value="Europe/London">London (GMT)</option>
                                    <option value="Europe/Amsterdam">Amsterdam (CET)</option>
                                    <option value="Asia/Kolkata">India (IST)</option>
                                    <option value="Australia/Sydney">Sydney (AEST)</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-3" id="weekdaysRow" style="display:none;">
                            <label class="form-label fw-medium">Days of Week</label>
                            <div class="d-flex flex-wrap gap-2">
                                @foreach(['monday','tuesday','wednesday','thursday','friday','saturday','sunday'] as $day)
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input day-checkbox" type="checkbox"
                                           id="day_{{ $day }}" value="{{ $day }}"
                                           {{ in_array($day, ['monday','tuesday','wednesday','thursday','friday']) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="day_{{ $day }}">
                                        {{ ucfirst(substr($day, 0, 3)) }}
                                    </label>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="alert alert-secondary d-flex align-items-center small" role="alert">
                            <i class="bx bx-info-circle me-2 flex-shrink-0"></i>
                            Leave unchanged to skip scheduling — you can always run manually.
                        </div>
                    </div>

                    {{-- ── Step 5: Review & Create ──────────────────────────── --}}
                    <div class="step-panel" id="step5">
                        <h5 class="fw-semibold mb-4">Step 5 — Review &amp; Create</h5>

                        <div class="card bg-light border-0 mb-4">
                            <div class="card-body">
                                <dl class="row mb-0 small">
                                    <dt class="col-sm-4">Vena Connection</dt>
                                    <dd class="col-sm-8" id="reviewConnection">—</dd>
                                    <dt class="col-sm-4">Notebook Name</dt>
                                    <dd class="col-sm-8" id="reviewName">—</dd>
                                    <dt class="col-sm-4">Workspace</dt>
                                    <dd class="col-sm-8" id="reviewWorkspace">—</dd>
                                    <dt class="col-sm-4">Source Table</dt>
                                    <dd class="col-sm-8"><code id="reviewTable">—</code></dd>
                                    <dt class="col-sm-4">Vena Template ID</dt>
                                    <dd class="col-sm-8"><code id="reviewTemplateId">—</code></dd>
                                    <dt class="col-sm-4">Transfer Mode</dt>
                                    <dd class="col-sm-8" id="reviewMode">—</dd>
                                    <dt class="col-sm-4">Include Headers</dt>
                                    <dd class="col-sm-8" id="reviewHeaders">—</dd>
                                    <dt class="col-sm-4">Filter</dt>
                                    <dd class="col-sm-8" id="reviewFilter">—</dd>
                                    <dt class="col-sm-4">Schedule</dt>
                                    <dd class="col-sm-8" id="reviewSchedule">—</dd>
                                </dl>
                            </div>
                        </div>

                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="runImmediately">
                            <label class="form-check-label fw-medium" for="runImmediately">
                                Run notebook immediately after creation
                            </label>
                        </div>

                        <div id="createResult" style="display:none;"></div>
                    </div>

                </div>{{-- /card-body --}}

                {{-- Navigation footer --}}
                <div class="card-footer bg-transparent d-flex justify-content-between align-items-center py-3">
                    <button type="button" class="btn btn-outline-secondary" id="prevBtn"
                            onclick="wizardPrev()" style="display:none;">
                        <i class="bx bx-arrow-back me-1"></i>Previous
                    </button>
                    <div></div>
                    <div>
                        <button type="button" class="btn btn-primary" id="nextBtn"
                                onclick="wizardNext()"
                                style="background:#007aff; border-color:#007aff;">
                            Next <i class="bx bx-right-arrow-alt ms-1"></i>
                        </button>
                        <button type="button" class="btn btn-success d-none" id="createBtn"
                                onclick="submitCreate()">
                            <i class="bx bx-check me-1"></i>Create Notebook
                        </button>
                    </div>
                </div>
            </div>{{-- /card --}}

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// ============================================================================
// STATE
// ============================================================================
const TOTAL_STEPS   = 5;
const CSRF          = document.querySelector('meta[name="csrf-token"]').content;
let currentStep     = 1;
let selectedConnId  = null;
let selectedConnName = '';
let selectedConnHub  = '';
let selectedTransferMode = 'data_array';

// ============================================================================
// LAKEHOUSE TABLE LOADER
// ============================================================================
async function loadLakehouseTables() {
    const wsId      = document.getElementById('workspaceSelect').value;
    const select    = document.getElementById('sourceTable');
    const refreshBtn = document.getElementById('refreshTablesBtn');
    const icon      = document.getElementById('refreshTablesIcon');
    const hint      = document.getElementById('sourceTableHint');

    if (!wsId) {
        select.innerHTML = '<option value="">— Select workspace first —</option>';
        select.disabled  = true;
        refreshBtn.disabled = true;
        hint.textContent = 'Select a workspace to load available Delta tables.';
        return;
    }

    // Loading state
    select.innerHTML = '<option value="">Loading tables…</option>';
    select.disabled  = true;
    refreshBtn.disabled = true;
    icon.className   = 'bx bx-loader-alt bx-spin';
    hint.textContent = 'Fetching Delta tables from Lakehouse…';

    try {
        const res  = await fetch('/api/vena-notebooks/lakehouse-tables?workspace_id=' + wsId, {
            credentials: 'same-origin',
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        });
        const json = await res.json();

        if (json.success && json.tables.length > 0) {
            select.innerHTML = '<option value="">— Select table —</option>' +
                json.tables.map(t => `<option value="${t}">${t}</option>`).join('');
            select.disabled  = false;
            hint.textContent = json.tables.length + ' table(s) available in the Lakehouse.';
        } else if (json.success && json.tables.length === 0) {
            select.innerHTML = '<option value="">No tables found in Lakehouse</option>';
            select.disabled  = true;
            hint.textContent = 'No Delta tables found. Ensure data has been loaded into the Lakehouse.';
        } else {
            select.innerHTML = '<option value="">Failed to load tables</option>';
            select.disabled  = true;
            hint.textContent = json.message || 'Could not fetch tables. You can retry with the refresh button.';
        }
    } catch (e) {
        select.innerHTML = '<option value="">Error loading tables</option>';
        select.disabled  = true;
        hint.textContent = 'Network error while fetching tables.';
    }

    refreshBtn.disabled = false;
    icon.className = 'bx bx-refresh';
}

// Auto-load tables if workspace is pre-selected (including locked/disabled selects)
document.addEventListener('DOMContentLoaded', function () {
    const wsSelect = document.getElementById('workspaceSelect');
    if (wsSelect && wsSelect.value) {
        document.getElementById('refreshTablesBtn').disabled = false;
        loadLakehouseTables();
    }
    updateLakehouseSubtitle();
});

function updateLakehouseSubtitle() {
    const select = document.getElementById('workspaceSelect');
    const option = select ? select.options[select.selectedIndex] : null;
    const name   = option ? (option.dataset.lakehouseName || '') : '';
    const span   = document.getElementById('lakehouseSubtitle');
    if (span) span.textContent = name ? ' ' + name : ' your Microsoft Fabric Lakehouse';
}

// ============================================================================
// STEP NAVIGATION
// ============================================================================
function wizardNext() {
    if (!validateStep(currentStep)) return;
    if (currentStep < TOTAL_STEPS) goToStep(currentStep + 1);
}

function wizardPrev() {
    if (currentStep > 1) goToStep(currentStep - 1);
}

function goToStep(n) {
    document.getElementById('step' + currentStep).classList.remove('active');
    currentStep = n;
    document.getElementById('step' + n).classList.add('active');

    for (let i = 1; i <= TOTAL_STEPS; i++) {
        const badge = document.getElementById('badge' + i);
        if (i < n) {
            badge.className  = 'wizard-step-badge completed';
            badge.textContent = '✓';
        } else if (i === n) {
            badge.className  = 'wizard-step-badge active';
            badge.textContent = String(i);
        } else {
            badge.className  = 'wizard-step-badge pending';
            badge.textContent = String(i);
        }
        if (i < TOTAL_STEPS) {
            document.getElementById('line' + i).className =
                'wizard-step-line' + (i < n ? ' done' : '');
        }
    }

    document.getElementById('prevBtn').style.display = n > 1 ? '' : 'none';

    if (n === TOTAL_STEPS) {
        document.getElementById('nextBtn').classList.add('d-none');
        document.getElementById('createBtn').classList.remove('d-none');
        updateReview();
    } else {
        document.getElementById('nextBtn').classList.remove('d-none');
        document.getElementById('createBtn').classList.add('d-none');
    }
}

// ============================================================================
// VALIDATION
// ============================================================================
function validateStep(step) {
    if (step === 1) {
        if (!selectedConnId)
            return alert('Please select or create a Vena connection.') || false;
    }
    if (step === 2) {
        if (!document.getElementById('notebookName').value.trim())
            return alert('Please enter a notebook name.') || false;
        if (!document.getElementById('workspaceSelect').value)
            return alert('Please select a workspace.') || false;
        if (!document.getElementById('sourceTable').value)
            return alert('Please select a source Lakehouse table.') || false;
        if (!document.getElementById('venaTemplateId').value.trim())
            return alert('Please enter the Vena Template ID.') || false;
    }
    return true;
}

// ============================================================================
// CONNECTION SELECTION
// ============================================================================
function selectConnection(id, name, hub) {
    // Clear previous selection
    document.querySelectorAll('.conn-item').forEach(el => el.classList.remove('selected'));
    document.querySelectorAll('[id^="connCheck_"]').forEach(el => {
        el.className = 'bx bx-square';
        el.style.color = '#ced4da';
    });

    selectedConnId   = id;
    selectedConnName = name;
    selectedConnHub  = hub;

    const item  = document.getElementById('conn_' + id);
    const check = document.getElementById('connCheck_' + id);
    if (item)  item.classList.add('selected');
    if (check) { check.className = 'bx bx-checkbox-checked'; check.style.color = '#007aff'; }

    showSelectedConnBadge(name, hub);
}

function showSelectedConnBadge(name, hub) {
    document.getElementById('selectedConnName').textContent = name;
    document.getElementById('selectedConnHub').textContent  = hub;
    document.getElementById('selectedConnBadge').style.display = '';
}

// ============================================================================
// SAVE NEW CONNECTION
// ============================================================================
async function saveNewConnection() {
    const connName   = document.getElementById('connName').value.trim();
    const wsId       = document.getElementById('connWorkspaceSelect').value;
    const hub        = document.getElementById('connHub').value;
    const apiUser    = document.getElementById('connApiUser').value.trim();
    const apiKey     = document.getElementById('connApiKey').value.trim();

    if (!connName || !wsId || !hub || !apiUser || !apiKey) {
        return alert('Please fill in all connection fields (Name, Workspace, Hub, API User, API Key).');
    }

    const btn = document.getElementById('saveConnBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Saving…';

    try {
        const res = await fetch('/api/vena-notebooks/connections', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type':     'application/json',
                'Accept':           'application/json',
                'X-CSRF-TOKEN':     CSRF,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                workspace_id: parseInt(wsId),
                name:         connName,
                vena_hub:     hub,
                api_user:     apiUser,
                api_key:      apiKey,
            }),
        });

        const json = await res.json();
        const resultEl = document.getElementById('connSaveResult');

        if (json.success) {
            // Add to connection list and select it
            selectedConnId   = json.data.id;
            selectedConnName = json.data.name;
            selectedConnHub  = json.data.vena_hub;

            // Append to connection list UI
            const listEl = document.getElementById('connectionList');
            if (listEl) {
                const div = document.createElement('div');
                div.className = 'conn-item';
                div.id        = 'conn_' + json.data.id;
                div.onclick   = () => selectConnection(json.data.id, json.data.name, json.data.vena_hub);

                // Safe DOM construction — avoid innerHTML to prevent XSS
                const nameEl = document.createElement('div');
                nameEl.className = 'fw-semibold';
                nameEl.textContent = json.data.name;

                const hubEl = document.createElement('small');
                hubEl.className = 'text-muted';
                hubEl.textContent = 'Hub: ';
                const hubStrong = document.createElement('strong');
                hubStrong.textContent = json.data.vena_hub;
                hubEl.appendChild(hubStrong);

                const textDiv = document.createElement('div');
                textDiv.appendChild(nameEl);
                textDiv.appendChild(hubEl);

                const checkIcon = document.createElement('i');
                checkIcon.className = 'bx bx-square';
                checkIcon.id = 'connCheck_' + json.data.id;
                checkIcon.style.fontSize = '1.2rem';
                checkIcon.style.color = '#ced4da';

                const rowDiv = document.createElement('div');
                rowDiv.className = 'd-flex align-items-center justify-content-between';
                rowDiv.appendChild(textDiv);
                rowDiv.appendChild(checkIcon);

                div.appendChild(rowDiv);
                listEl.appendChild(div);
            }

            selectConnection(json.data.id, json.data.name, json.data.vena_hub);

            resultEl.innerHTML = '<div class="alert alert-success small mb-0 mt-2">' +
                '<i class="bx bx-check me-1"></i>Connection saved and selected.</div>';
            resultEl.style.display = '';

            // Clear form
            document.getElementById('connName').value   = '';
            document.getElementById('connApiUser').value = '';
            document.getElementById('connApiKey').value  = '';
        } else {
            const errs = Object.values(json.errors || {}).flat().join('<br>');
            resultEl.innerHTML = '<div class="alert alert-danger small mb-0 mt-2">' +
                '<i class="bx bx-error me-1"></i>' + (json.message || 'Failed to save connection.') +
                (errs ? '<br>' + errs : '') + '</div>';
            resultEl.style.display = '';
        }
    } catch (e) {
        document.getElementById('connSaveResult').innerHTML =
            '<div class="alert alert-danger small mb-0 mt-2"><i class="bx bx-error me-1"></i>Network error: ' +
            e.message + '</div>';
        document.getElementById('connSaveResult').style.display = '';
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="bx bx-save me-1"></i>Save &amp; Select Connection';
    }
}

function toggleKeyVisibility() {
    const input = document.getElementById('connApiKey');
    const icon  = document.getElementById('toggleKeyIcon');
    if (input.type === 'password') {
        input.type = 'text'; icon.classList.replace('bx-show', 'bx-hide');
    } else {
        input.type = 'password'; icon.classList.replace('bx-hide', 'bx-show');
    }
}

// ============================================================================
// TRANSFER MODE
// ============================================================================
function setTransferMode(mode) {
    selectedTransferMode = mode;
    document.getElementById('modeDataArray').classList.toggle('selected', mode === 'data_array');
    document.getElementById('modeCsvFile').classList.toggle('selected', mode === 'csv_file');
}

// ============================================================================
// COLUMN MAPPING
// ============================================================================
function addMappingRow() {
    const container = document.getElementById('mappingRows');
    const row = document.createElement('div');
    row.className = 'row g-2 mb-2 mapping-row';
    row.innerHTML = `
        <div class="col-5">
            <input type="text" class="form-control form-control-sm font-monospace"
                   placeholder="Lakehouse column" name="map_src[]">
        </div>
        <div class="col-1 text-center py-2">→</div>
        <div class="col-5">
            <input type="text" class="form-control form-control-sm font-monospace"
                   placeholder="Vena column" name="map_dst[]">
        </div>
        <div class="col-1">
            <button type="button" class="btn btn-sm btn-outline-danger"
                    onclick="removeMappingRow(this)">
                <i class="bx bx-x"></i>
            </button>
        </div>`;
    container.appendChild(row);
}

function removeMappingRow(btn) {
    btn.closest('.mapping-row').remove();
}

function getColumnMapping() {
    const rows  = document.querySelectorAll('.mapping-row');
    const mapping = {};
    rows.forEach(row => {
        const src = row.querySelector('[name="map_src[]"]').value.trim();
        const dst = row.querySelector('[name="map_dst[]"]').value.trim();
        if (src && dst) mapping[src] = dst;
    });
    return Object.keys(mapping).length ? mapping : null;
}

// ============================================================================
// SCHEDULE
// ============================================================================
function onScheduleFrequencyChange() {
    const freq = document.getElementById('schedFrequency').value;
    document.getElementById('weekdaysRow').style.display = freq === 'weekly' ? '' : 'none';
}

// ============================================================================
// REVIEW (Step 5)
// ============================================================================
function updateReview() {
    const wsSelect = document.getElementById('workspaceSelect');
    const freq     = document.getElementById('schedFrequency').value;
    const time     = document.getElementById('schedTime').value;
    const tz       = document.getElementById('schedTimezone').value;
    const filter   = document.getElementById('filterExpression').value.trim();

    document.getElementById('reviewConnection').textContent =
        selectedConnName ? selectedConnName + ' (' + selectedConnHub + ')' : '—';
    document.getElementById('reviewName').textContent      = document.getElementById('notebookName').value || '—';
    document.getElementById('reviewWorkspace').textContent  = wsSelect.options[wsSelect.selectedIndex]?.text || '—';
    document.getElementById('reviewTable').textContent      = document.getElementById('sourceTable').value || '—';
    document.getElementById('reviewTemplateId').textContent = document.getElementById('venaTemplateId').value || '—';
    document.getElementById('reviewMode').textContent       = selectedTransferMode === 'data_array' ? 'Data Array' : 'CSV File';
    document.getElementById('reviewHeaders').textContent    = document.getElementById('includeHeaders').checked ? 'Yes' : 'No';
    document.getElementById('reviewFilter').textContent     = filter || '(none)';
    document.getElementById('reviewSchedule').textContent   = `${freq} at ${time} ${tz}`;
}

// ============================================================================
// SUBMIT
// ============================================================================
async function submitCreate() {
    const createBtn = document.getElementById('createBtn');
    createBtn.disabled = true;
    createBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Creating…';

    const days = Array.from(document.querySelectorAll('.day-checkbox:checked')).map(el => el.value);

    const payload = {
        workspace_id:       parseInt(document.getElementById('workspaceSelect').value),
        vena_connection_id: selectedConnId,
        name:               document.getElementById('notebookName').value.trim(),
        description:        document.getElementById('notebookDesc').value.trim() || null,
        source_table_name:  document.getElementById('sourceTable').value.trim(),
        vena_template_id:   document.getElementById('venaTemplateId').value.trim(),
        transfer_mode:      selectedTransferMode,
        include_headers:    document.getElementById('includeHeaders').checked,
        filter_expression:  document.getElementById('filterExpression').value.trim() || null,
        column_mapping:     getColumnMapping(),
        schedule: {
            frequency: document.getElementById('schedFrequency').value,
            time:      document.getElementById('schedTime').value,
            timezone:  document.getElementById('schedTimezone').value,
            days:      days,
        },
        run_immediately: document.getElementById('runImmediately').checked,
    };

    try {
        const res  = await fetch('/api/vena-notebooks/create-and-schedule', {
            method:      'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type':     'application/json',
                'Accept':           'application/json',
                'X-CSRF-TOKEN':     CSRF,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify(payload),
        });

        const json = await res.json();

        if (json.success) {
            window.location.href = '/vena-notebooks/' + json.data.id;
        } else {
            showCreateError(json.message || 'Failed to create notebook.', json.errors || {}, json.steps || []);
        }
    } catch (e) {
        showCreateError('Network error: ' + e.message, {}, []);
    } finally {
        createBtn.disabled = false;
        createBtn.innerHTML = '<i class="bx bx-check me-1"></i>Create Notebook';
    }
}

function showCreateError(message, errors, steps) {
    const errorFields = Object.values(errors).flat();
    const fieldHtml   = errorFields.length
        ? '<ul class="mt-1 mb-0">' + errorFields.map(e => `<li>${e}</li>`).join('') + '</ul>'
        : '';
    const stepHtml = steps.map(s =>
        `<li class="${s.status === 'success' ? 'text-success' : s.status === 'warning' ? 'text-warning' : 'text-danger'}">
            ${s.step}: ${s.message}
         </li>`
    ).join('');

    const div = document.getElementById('createResult');
    div.innerHTML = `
        <div class="alert alert-danger">
            <strong><i class="bx bx-error me-1"></i>${message}</strong>
            ${fieldHtml}
            ${steps.length ? '<ul class="mt-2 mb-0 small">' + stepHtml + '</ul>' : ''}
        </div>`;
    div.style.display = '';
}
</script>
@endsection