@extends('layouts.main')

@section('title', 'Create Deel HR 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; }
    .entity-card {
        border: 2px solid #e9ecef;
        border-radius: 10px; padding: 12px;
        cursor: pointer; transition: all 0.15s;
    }
    .entity-card:hover:not(.disabled) { border-color: #007aff; background: #f0f6ff; }
    .entity-card.selected  { border-color: #007aff; background: #e8f0fe; }
    .entity-card.disabled  { opacity: 0.45; cursor: not-allowed; }
    .step-panel { display: none; }
    .step-panel.active { display: block; }
    .verify-result-row { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
    .verify-result-row:last-child { border-bottom: none; }
</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('deel-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-group me-2" style="color:#007aff;"></i>Create Deel HR Notebook
                    </h4>
                    <small class="text-muted">Extract Deel HR data to your Microsoft Fabric Lakehouse<span id="lakehouseSubtitle"></span></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: Configuration ────────────────────────────── --}}
                    <div class="step-panel active" id="step1">
                        <h5 class="fw-semibold mb-4">Step 1 — Configuration</h5>

                        <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. Deel HR Daily Sync" maxlength="255">
                            <small class="text-muted">
                                Lakehouse tables will be prefixed with <code id="prefixPreview">—</code>
                            </small>
                        </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">
                                    <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">Load Type <span class="text-danger">*</span></label>
                            <div class="row g-3">
                                <div class="col-6">
                                    <div class="entity-card selected" id="loadTypeIncremental"
                                         onclick="setLoadType('INCREMENTAL')">
                                        <div class="fw-semibold">
                                            <i class="bx bx-trending-up me-2 text-success"></i>Incremental
                                        </div>
                                        <small class="text-muted">Only new / changed records (recommended)</small>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="entity-card" id="loadTypeFull"
                                         onclick="setLoadType('FULL')">
                                        <div class="fw-semibold">
                                            <i class="bx bx-refresh me-2 text-primary"></i>Full Reload
                                        </div>
                                        <small class="text-muted">Replace all data on every run</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3" id="lookbackRow">
                            <label class="form-label fw-medium">Lookback Days (first incremental run)</label>
                            <input type="number" class="form-control" id="lookbackDays"
                                   value="30" min="1" max="365" style="max-width:180px;">
                            <small class="text-muted">How far back to fetch on the very first incremental load.</small>
                        </div>
                    </div>

                    {{-- ── Step 2: API Token + Verification ─────────────────── --}}
                    <div class="step-panel" id="step2">
                        <h5 class="fw-semibold mb-1">Step 2 — Deel API Token</h5>
                        <p class="text-muted small mb-4">
                            Enter your Deel Bearer token and click <strong>Verify &amp; Discover</strong>.
                            We'll probe each endpoint to find exactly which data your token can access.
                            Generate a token from <strong>Deel → Settings → API &amp; Webhooks</strong>.
                        </p>

                        <div class="mb-3">
                            <label class="form-label fw-medium">API Token <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control font-monospace" id="apiToken"
                                       placeholder="eyJ…" autocomplete="new-password"
                                       oninput="onTokenInput()">
                                <button class="btn btn-outline-secondary" type="button"
                                        onclick="toggleTokenVisibility()">
                                    <i class="bx bx-show" id="toggleTokenIcon"></i>
                                </button>
                                <button class="btn btn-primary" type="button" id="verifyBtn"
                                        onclick="verifyToken()" disabled
                                        style="background:#007aff; border-color:#007aff;">
                                    <i class="bx bx-search-alt me-1"></i>Verify &amp; Discover
                                </button>
                            </div>
                        </div>

                        {{-- Verification result panel --}}
                        <div id="verifyPanel" style="display:none;">
                            <div id="verifyLoading" style="display:none;" class="text-center py-3 text-muted">
                                <div class="spinner-border spinner-border-sm me-2"></div>
                                Probing Deel API endpoints…
                            </div>
                            <div id="verifyResults" style="display:none;">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="fw-semibold small">Endpoint Access Results</span>
                                    <span id="verifyCount" class="badge bg-primary"></span>
                                </div>
                                <div id="verifyList" class="border rounded p-3 small"></div>
                                <div id="verifyMessage" class="mt-2"></div>
                            </div>
                        </div>

                        <div class="alert alert-info d-flex align-items-start mt-3 small" role="alert">
                            <i class="bx bx-lock-alt me-2 mt-1 flex-shrink-0"></i>
                            <div>Your token is encrypted at rest and never exposed in logs or API responses.</div>
                        </div>
                    </div>

                    {{-- ── Step 3: Entity Selection ──────────────────────────── --}}
                    <div class="step-panel" id="step3">
                        <h5 class="fw-semibold mb-1">Step 3 — Select Entities</h5>
                        <p class="text-muted small mb-1">
                            Only entities accessible with your token are shown.
                            Greyed-out items were blocked (403) or unavailable (404) for your account.
                        </p>
                        <p class="text-muted small mb-4" id="tablePrefixNote"></p>
                        <div class="row g-3" id="entityGrid">
                            <div class="col-12 text-center text-muted py-3">
                                <i class="bx bx-info-circle me-1"></i>
                                Complete token verification in Step 2 to see available entities.
                            </div>
                        </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">Name</dt>
                                    <dd class="col-sm-8" id="reviewName">—</dd>
                                    <dt class="col-sm-4">Table Prefix</dt>
                                    <dd class="col-sm-8"><code id="reviewPrefix">—</code></dd>
                                    <dt class="col-sm-4">Workspace</dt>
                                    <dd class="col-sm-8" id="reviewWorkspace">—</dd>
                                    <dt class="col-sm-4">Load Type</dt>
                                    <dd class="col-sm-8" id="reviewLoadType">—</dd>
                                    <dt class="col-sm-4">Entities</dt>
                                    <dd class="col-sm-8" id="reviewEntities">—</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" checked>
                            <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 selectedLoadType = 'INCREMENTAL';
let selectedEntities = [];
let verifiedEntities = [];   // full objects returned by verify-token
let tokenVerified    = false;

// ============================================================================
// INIT
// ============================================================================
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('notebookName').addEventListener('input', updatePrefixPreview);

    // Update lakehouse name in subtitle when workspace selection changes
    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 + ')' : '';
    }

    const wsSelect = document.getElementById('workspaceSelect');
    if (wsSelect) {
        wsSelect.addEventListener('change', updateLakehouseSubtitle);
        updateLakehouseSubtitle(); // run on load for pre-selected workspace
    }
});

// ============================================================================
// TABLE PREFIX PREVIEW
// ============================================================================
function updatePrefixPreview() {
    const name   = document.getElementById('notebookName').value;
    const prefix = name.toLowerCase().replace(/ /g, '');
    document.getElementById('prefixPreview').textContent = prefix || '—';
}

function getTablePrefix() {
    return document.getElementById('notebookName').value.toLowerCase().replace(/ /g, '');
}

// ============================================================================
// LOAD TYPE
// ============================================================================
function setLoadType(type) {
    selectedLoadType = type;
    document.getElementById('loadTypeIncremental').classList.toggle('selected', type === 'INCREMENTAL');
    document.getElementById('loadTypeFull').classList.toggle('selected', type === 'FULL');
    document.getElementById('lookbackRow').style.display = type === 'INCREMENTAL' ? '' : 'none';
}

// ============================================================================
// TOKEN FIELD
// ============================================================================
function onTokenInput() {
    const hasValue = document.getElementById('apiToken').value.trim().length > 10;
    document.getElementById('verifyBtn').disabled = !hasValue;

    // Reset verification state if token is changed after a previous verify
    if (tokenVerified) {
        tokenVerified = false;
        verifiedEntities = [];
        selectedEntities = [];
        document.getElementById('verifyPanel').style.display = 'none';
    }
}

function toggleTokenVisibility() {
    const input = document.getElementById('apiToken');
    const icon  = document.getElementById('toggleTokenIcon');
    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');
    }
}

// ============================================================================
// TOKEN VERIFICATION
// ============================================================================
async function verifyToken() {
    const token = document.getElementById('apiToken').value.trim();
    if (!token) return;

    // Reset state
    tokenVerified    = false;
    verifiedEntities = [];
    selectedEntities = [];

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

    const panel   = document.getElementById('verifyPanel');
    const loading = document.getElementById('verifyLoading');
    const results = document.getElementById('verifyResults');

    panel.style.display   = '';
    loading.style.display = '';
    results.style.display = 'none';

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

        const json = await res.json();
        loading.style.display = 'none';
        results.style.display = '';

        if (!json.success || !json.token_valid) {
            document.getElementById('verifyList').innerHTML = '';
            document.getElementById('verifyCount').textContent = '';
            document.getElementById('verifyMessage').innerHTML =
                '<div class="alert alert-danger small mb-0">' +
                '<i class="bx bx-error me-1"></i>' +
                (json.message || 'Invalid or expired Deel API token.') +
                '</div>';
            return;
        }

        // Render per-entity results
        verifiedEntities = json.entities || [];
        const accessible = verifiedEntities.filter(e => e.accessible);
        document.getElementById('verifyCount').textContent =
            accessible.length + ' / ' + verifiedEntities.length + ' accessible';

        document.getElementById('verifyList').innerHTML = verifiedEntities.map(e => `
            <div class="verify-result-row d-flex align-items-center">
                <i class="bx ${e.accessible ? 'bx-check-circle text-success' : 'bx-x-circle text-danger'} me-2"
                   style="font-size:1.1rem;"></i>
                <div class="flex-grow-1">
                    <span class="fw-medium">${e.entity_name}</span>
                    ${e.accessible
                        ? '<span class="badge bg-success ms-2" style="font-size:0.65rem;">Accessible</span>'
                        : `<span class="badge bg-secondary ms-2" style="font-size:0.65rem;">${e.reason || 'Blocked'}</span>`
                    }
                </div>
                <code class="text-muted" style="font-size:0.75rem;">${e.status_code}</code>
            </div>
        `).join('');

        if (accessible.length === 0) {
            document.getElementById('verifyMessage').innerHTML =
                '<div class="alert alert-warning small mb-0 mt-2">' +
                '<i class="bx bx-error me-1"></i>' +
                'No entities are accessible with this token. Please check your token scopes.' +
                '</div>';
        } else {
            tokenVerified = true;
            // Pre-select all accessible entities
            selectedEntities = accessible.map(e => e.entity_key);
            document.getElementById('verifyMessage').innerHTML =
                '<div class="alert alert-success small mb-0 mt-2">' +
                '<i class="bx bx-check me-1"></i>' +
                accessible.length + ' entit' + (accessible.length === 1 ? 'y' : 'ies') + ' ready. ' +
                'Click <strong>Next</strong> to select which ones to include.' +
                '</div>';
            // Pre-populate entity grid for step 3
            renderEntityGrid();
        }

    } catch (err) {
        loading.style.display = 'none';
        results.style.display = '';
        document.getElementById('verifyList').innerHTML = '';
        document.getElementById('verifyCount').textContent = '';
        document.getElementById('verifyMessage').innerHTML =
            '<div class="alert alert-danger small mb-0">' +
            '<i class="bx bx-error me-1"></i>Network error: ' + err.message + '</div>';
    } finally {
        verifyBtn.disabled = false;
        verifyBtn.innerHTML = '<i class="bx bx-search-alt me-1"></i>Verify &amp; Discover';
    }
}

// ============================================================================
// ENTITY GRID (Step 3 — populated from verifiedEntities)
// ============================================================================
function renderEntityGrid() {
    const grid   = document.getElementById('entityGrid');
    const prefix = getTablePrefix();

    document.getElementById('tablePrefixNote').textContent =
        prefix ? 'Tables will be created as: ' + prefix + '_deel_contracts, ' + prefix + '_deel_timesheets, …' : '';

    if (!verifiedEntities.length) {
        grid.innerHTML = '<div class="col-12 text-muted text-center py-3">No entities found — complete token verification first.</div>';
        return;
    }

    grid.innerHTML = verifiedEntities.map(e => {
        const isAccessible = e.accessible;
        const isSelected   = selectedEntities.includes(e.entity_key);
        const cardClass    = isAccessible
            ? ('entity-card' + (isSelected ? ' selected' : ''))
            : 'entity-card disabled';
        const onclick      = isAccessible ? `onclick="toggleEntity('${e.entity_key}')"` : '';
        const checkIcon    = isAccessible && isSelected ? 'bx-checkbox-checked' : 'bx-square';
        const checkColor   = isAccessible && isSelected ? '#007aff' : '#ced4da';
        const tableLabel   = prefix ? prefix + '_' + e.table_name : e.table_name;

        return `
        <div class="col-md-6">
            <div class="${cardClass}" id="entity_${e.entity_key}" ${onclick}>
                <div class="d-flex align-items-start">
                    <div class="me-3 mt-1">
                        <i class="bx ${e.icon || 'bx-data'}"
                           style="font-size:1.4rem; color:${isAccessible ? '#007aff' : '#adb5bd'};"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="fw-semibold">${e.entity_name}
                            ${!isAccessible ? '<span class="badge bg-secondary ms-1" style="font-size:0.65rem;">' + (e.reason || 'Blocked') + '</span>' : ''}
                        </div>
                        <div class="small text-muted">${e.description || ''}</div>
                        <div class="small text-secondary mt-1">
                            → <code>${tableLabel}</code>
                            ${e.supports_incremental ? '<span class="badge bg-success ms-1" style="font-size:0.65rem;">Incremental</span>' : ''}
                        </div>
                    </div>
                    ${isAccessible ? `
                    <div class="ms-2">
                        <i class="bx ${checkIcon}" id="check_${e.entity_key}"
                           style="font-size:1.2rem; color:${checkColor};"></i>
                    </div>` : ''}
                </div>
            </div>
        </div>`;
    }).join('');
}

function toggleEntity(key) {
    const idx = selectedEntities.indexOf(key);
    if (idx >= 0) {
        selectedEntities.splice(idx, 1);
    } else {
        selectedEntities.push(key);
    }
    const card = document.getElementById('entity_' + key);
    const icon = document.getElementById('check_' + key);
    const on   = selectedEntities.includes(key);
    card.classList.toggle('selected', on);
    if (icon) {
        icon.className = 'bx ' + (on ? 'bx-checkbox-checked' : 'bx-square');
        icon.style.color = on ? '#007aff' : '#ced4da';
    }
}

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

// ============================================================================
// WIZARD 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');
    }

    // Re-render entity grid on step 3 in case name changed
    if (n === 3 && verifiedEntities.length) renderEntityGrid();
}

// ============================================================================
// VALIDATION
// ============================================================================
function validateStep(step) {
    if (step === 1) {
        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 (step === 2) {
        if (!document.getElementById('apiToken').value.trim())
            return alert('Please enter your Deel API token.') || false;
        if (!tokenVerified)
            return alert('Please click "Verify & Discover" to check your token before proceeding.') || false;
    }
    if (step === 3) {
        if (!selectedEntities.length)
            return alert('Please select at least one entity.') || false;
    }
    return true;
}

// ============================================================================
// REVIEW
// ============================================================================
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 prefix   = getTablePrefix();

    document.getElementById('reviewName').textContent      = document.getElementById('notebookName').value || '—';
    document.getElementById('reviewPrefix').textContent    = prefix || '—';
    document.getElementById('reviewWorkspace').textContent = wsSelect.options[wsSelect.selectedIndex]?.text || '—';
    document.getElementById('reviewLoadType').textContent  = selectedLoadType;
    document.getElementById('reviewEntities').textContent  = selectedEntities.join(', ') || '—';
    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),
        name:                      document.getElementById('notebookName').value.trim(),
        description:               document.getElementById('notebookDesc').value.trim() || null,
        load_type:                 selectedLoadType,
        entities:                  selectedEntities,
        api_token:                 document.getElementById('apiToken').value.trim(),
        schedule: {
            frequency: document.getElementById('schedFrequency').value,
            time:      document.getElementById('schedTime').value,
            timezone:  document.getElementById('schedTimezone').value,
            days:      days,
        },
        incremental_lookback_days: parseInt(document.getElementById('lookbackDays').value) || 30,
        run_immediately:           document.getElementById('runImmediately').checked,
    };

    try {
        const res  = await fetch('/api/deel-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 = '/deel-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