@extends('layouts.main')

@section('title', 'Create Xero Accounting 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; }
    .connection-card {
        border: 2px solid #e9ecef; border-radius: 10px; padding: 14px;
        cursor: pointer; transition: all 0.15s;
    }
    .connection-card:hover { border-color: #007aff; background: #f0f6ff; }
    .connection-card.selected { border-color: #007aff; background: #e8f0fe; }
    .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('xero-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-calculator me-2" style="color:#007aff;"></i>Create Xero Accounting Notebook
                    </h4>
                    <small class="text-muted">Extract Xero Accounting data to your Microsoft Fabric Lakehouse<span id="lakehouseSubtitle"></span></small>
                </div>
            </div>

            {{-- OAuth success flash --}}
            @if(session('xero_connected'))
            <div class="alert alert-success d-flex align-items-center mb-4" role="alert">
                <i class="bx bx-check-circle me-2"></i>
                {{ session('xero_connected') }}
            </div>
            @endif

            @if($errors->has('xero'))
            <div class="alert alert-danger d-flex align-items-center mb-4" role="alert">
                <i class="bx bx-error me-2"></i>
                {{ $errors->first('xero') }}
            </div>
            @endif

            {{-- 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 class="wizard-step-line" id="line5"></div>
                <div class="wizard-step-badge pending" id="badge6">6</div>
            </div>

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

                    {{-- ── Step 1: Xero Connection ─────────────────────────── --}}
                    <div class="step-panel active" id="step1">
                        <h5 class="fw-semibold mb-1">Step 1 — Xero Connection</h5>
                        <p class="text-muted small mb-3">Select an existing connection or authorise a new Xero organisation.</p>

                        {{-- Before-you-begin callout --}}
                        <div class="alert alert-info border-0 mb-4" style="background:#e8f4fd;">
                            <div class="d-flex align-items-start">
                                <i class="bx bx-info-circle me-2 mt-1" style="font-size:1.2rem;color:#0c6cad;flex-shrink:0;"></i>
                                <div class="small">
                                    <div class="fw-semibold mb-1" style="color:#0c6cad;">Before you begin — register the redirect URI</div>
                                    <ol class="mb-2 ps-3" style="color:#333;">
                                        <li>Go to <a href="https://developer.xero.com/app/manage" target="_blank" rel="noopener" class="fw-medium">developer.xero.com/app/manage</a> and create a free OAuth2 app.</li>
                                        <li>Under <strong>Redirect URIs</strong>, add exactly the URL below.</li>
                                        <li>Copy the <strong>Client ID</strong> and <strong>Client Secret</strong> from the app — you'll need them in the form below.</li>
                                    </ol>
                                    <div class="d-flex align-items-center gap-2 mt-2">
                                        <code id="redirectUriDisplay" class="px-2 py-1 rounded flex-grow-1"
                                              style="background:#d0eaf9;color:#0c6cad;font-size:0.8rem;word-break:break-all;">{{ config('xero.redirect_uri') }}</code>
                                        <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2"
                                                onclick="copyRedirectUri()" title="Copy to clipboard" style="font-size:0.75rem;white-space:nowrap;">
                                            <i class="bx bx-copy me-1"></i>Copy
                                        </button>
                                    </div>
                                    <div class="mt-1" style="color:#6c757d;">
                                        Trial and Demo Company accounts work fine. The Demo Company at developer.xero.com never expires and is ideal for testing.
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($connections->isNotEmpty())
                        {{-- Existing connections --}}
                        <div class="mb-4">
                            <label class="form-label fw-medium">Select an existing connection</label>
                            <div class="row g-2" id="connectionList">
                                @foreach($connections as $conn)
                                <div class="col-12">
                                    <div class="connection-card {{ $selectedConnectionId == $conn->id ? 'selected' : '' }}"
                                         id="conn_{{ $conn->id }}"
                                         onclick="selectConnection({{ $conn->id }}, '{{ addslashes($conn->name) }}', '{{ addslashes($conn->tenant_name) }}')">
                                        <div class="d-flex align-items-center">
                                            <div class="me-3" style="width:36px;height:36px;background:rgba(0,122,255,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                                <i class="bx bx-building" style="color:#007aff;font-size:1.2rem;"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="fw-semibold">{{ $conn->tenant_name }}</div>
                                                <div class="small text-muted">{{ $conn->name }}</div>
                                            </div>
                                            <div>
                                                <i class="bx {{ $selectedConnectionId == $conn->id ? 'bx-checkbox-checked text-primary' : 'bx-square text-muted' }}"
                                                   id="connCheck_{{ $conn->id }}" style="font-size:1.3rem;"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="text-center text-muted small mb-3">— or connect a new Xero organisation —</div>
                        @endif

                        {{-- New connection form --}}
                        <div class="card border bg-light" id="newConnForm">
                            <div class="card-body">
                                <h6 class="fw-semibold mb-3">
                                    <i class="bx bx-plug me-1" style="color:#007aff;"></i>
                                    Connect New Xero Organisation
                                </h6>
                                <form method="GET" action="/api/xero/authorize" id="oauthForm">
                                    @csrf
                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Connection Name</label>
                                        <input type="text" class="form-control" name="connection_name"
                                               placeholder="e.g. Acme Corp Xero" maxlength="255">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Xero Client ID <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control font-monospace" name="client_id"
                                               placeholder="From Xero developer portal" required
                                               oninput="onOAuthInputChange()">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Xero Client Secret <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="password" class="form-control font-monospace" name="client_secret"
                                                   id="clientSecretInput" placeholder="From Xero developer portal" required
                                                   oninput="onOAuthInputChange()">
                                            <button class="btn btn-outline-secondary" type="button"
                                                    onclick="toggleSecret()">
                                                <i class="bx bx-show" id="secretToggleIcon"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100" id="connectXeroBtn" disabled
                                            style="background:#007aff; border-color:#007aff;">
                                        <i class="bx bx-link-external me-1"></i>Connect to Xero
                                    </button>
                                </form>
                                <div class="alert alert-info d-flex align-items-start mt-3 small mb-0">
                                    <i class="bx bx-lock-alt me-2 mt-1 flex-shrink-0"></i>
                                    <div>Client credentials are encrypted at rest and never exposed in logs or API responses.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ── Step 2: Configuration ───────────────────────────── --}}
                    <div class="step-panel" id="step2">
                        <h5 class="fw-semibold mb-4">Step 2 — 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. Xero Accounting 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 3: Verify Connection ───────────────────────── --}}
                    <div class="step-panel" id="step3">
                        <h5 class="fw-semibold mb-1">Step 3 — Verify Connection &amp; Discover Entities</h5>
                        <p class="text-muted small mb-4">
                            Click <strong>Verify &amp; Discover</strong> to probe each Xero endpoint and check
                            which data your organisation can access with the granted scopes.
                        </p>

                        <div id="selectedConnBanner" class="alert alert-light border mb-3 small d-flex align-items-center">
                            <i class="bx bx-building me-2" style="color:#007aff;"></i>
                            <span id="selectedConnLabel">—</span>
                        </div>

                        <button class="btn btn-primary mb-4" type="button" id="verifyBtn"
                                onclick="verifyConnection()"
                                style="background:#007aff; border-color:#007aff;">
                            <i class="bx bx-search-alt me-1"></i>Verify &amp; Discover
                        </button>

                        <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 Xero 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>

                    {{-- ── Step 4: Entity Selection ────────────────────────── --}}
                    <div class="step-panel" id="step4">
                        <h5 class="fw-semibold mb-1">Step 4 — Select Entities</h5>
                        <p class="text-muted small mb-1">
                            Only entities accessible with your Xero connection are shown.
                            Greyed-out items were blocked (403) or unavailable (404) for your organisation.
                        </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 connection verification in Step 3 to see available entities.
                            </div>
                        </div>
                    </div>

                    {{-- ── Step 5: Schedule ────────────────────────────────── --}}
                    <div class="step-panel" id="step5">
                        <h5 class="fw-semibold mb-1">Step 5 — 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 6: Review & Create ─────────────────────────── --}}
                    <div class="step-panel" id="step6">
                        <h5 class="fw-semibold mb-4">Step 6 — 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">Xero Connection</dt>
                                    <dd class="col-sm-8" id="reviewConnection">—</dd>
                                    <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>
// ============================================================================
// UTILITIES
// ============================================================================
function copyRedirectUri() {
    const uri = document.getElementById('redirectUriDisplay').textContent.trim();
    navigator.clipboard.writeText(uri).then(() => {
        const btn = event.currentTarget;
        const original = btn.innerHTML;
        btn.innerHTML = '<i class="bx bx-check me-1"></i>Copied!';
        btn.classList.replace('btn-outline-primary', 'btn-success');
        setTimeout(() => { btn.innerHTML = original; btn.classList.replace('btn-success', 'btn-outline-primary'); }, 2000);
    });
}

// ============================================================================
// STATE
// ============================================================================
const TOTAL_STEPS    = 6;
const CSRF           = document.querySelector('meta[name="csrf-token"]').content;
let currentStep      = 1;
let selectedLoadType = 'INCREMENTAL';
let selectedEntities = [];
let verifiedEntities = [];
let connectionVerified = false;

// Pre-selected connection (from OAuth callback ?connection_id=X)
let selectedConnectionId   = {{ $selectedConnectionId ?? 'null' }};
let selectedConnectionLabel = '';

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

    // If returning from OAuth callback with a connection pre-selected
    if (selectedConnectionId) {
        @foreach($connections as $conn)
        if ({{ $conn->id }} === selectedConnectionId) {
            selectConnection({{ $conn->id }}, '{{ addslashes($conn->name) }}', '{{ addslashes($conn->tenant_name) }}');
        }
        @endforeach
    }
});

// ============================================================================
// CONNECTION SELECTION
// ============================================================================
function selectConnection(id, name, tenantName) {
    // Deselect all
    document.querySelectorAll('.connection-card').forEach(c => c.classList.remove('selected'));
    document.querySelectorAll('[id^="connCheck_"]').forEach(i => {
        i.className = 'bx bx-square text-muted';
        i.style.fontSize = '1.3rem';
    });

    // Select this one
    const card = document.getElementById('conn_' + id);
    if (card) {
        card.classList.add('selected');
        const check = document.getElementById('connCheck_' + id);
        if (check) { check.className = 'bx bx-checkbox-checked text-primary'; }
    }

    selectedConnectionId    = id;
    selectedConnectionLabel = tenantName + ' (' + name + ')';

    // Update verify step banner
    const banner = document.getElementById('selectedConnBanner');
    const label  = document.getElementById('selectedConnLabel');
    if (banner && label) {
        label.textContent = selectedConnectionLabel;
    }
}

// ============================================================================
// OAUTH FORM HELPERS
// ============================================================================
function onOAuthInputChange() {
    const clientId     = document.querySelector('[name="client_id"]')?.value.trim();
    const clientSecret = document.querySelector('[name="client_secret"]')?.value.trim();
    const btn          = document.getElementById('connectXeroBtn');
    if (btn) btn.disabled = !(clientId && clientSecret);
}

function toggleSecret() {
    const input = document.getElementById('clientSecretInput');
    const icon  = document.getElementById('secretToggleIcon');
    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');
    }
}

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

// ============================================================================
// CONNECTION VERIFICATION (Step 3)
// ============================================================================
async function verifyConnection() {
    if (!selectedConnectionId) {
        alert('Please select a Xero connection in Step 1 first.');
        return;
    }

    connectionVerified = false;
    verifiedEntities   = [];
    selectedEntities   = [];

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

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Verifying…';
    panel.style.display   = '';
    loading.style.display = '';
    results.style.display = 'none';

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

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

        if (!json.success || !json.connection_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 || 'Xero connection is invalid or expired.') +
                '</div>';
            return;
        }

        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. Please check your Xero app scopes.' +
                '</div>';
        } else {
            connectionVerified = true;
            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>';
            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 {
        btn.disabled = false;
        btn.innerHTML = '<i class="bx bx-search-alt me-1"></i>Verify &amp; Discover';
    }
}

// ============================================================================
// ENTITY GRID (Step 4)
// ============================================================================
function renderEntityGrid() {
    const grid   = document.getElementById('entityGrid');
    const prefix = getTablePrefix();

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

    if (!verifiedEntities.length) {
        grid.innerHTML = '<div class="col-12 text-muted text-center py-3">No entities found — complete 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 4 in case name changed
    if (n === 4 && verifiedEntities.length) renderEntityGrid();
    // Update verify banner when entering step 3
    if (n === 3 && selectedConnectionId) {
        const label = document.getElementById('selectedConnLabel');
        if (label) label.textContent = selectedConnectionLabel || 'Connection #' + selectedConnectionId;
    }
}

// ============================================================================
// VALIDATION
// ============================================================================
function validateStep(step) {
    if (step === 1) {
        if (!selectedConnectionId)
            return alert('Please select an existing Xero connection or connect a new one.') || 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 (step === 3) {
        if (!connectionVerified)
            return alert('Please click "Verify & Discover" to check your connection before proceeding.') || false;
    }
    if (step === 4) {
        if (!selectedEntities.length)
            return alert('Please select at least one entity.') || false;
    }
    return true;
}

// ============================================================================
// REVIEW (Step 6)
// ============================================================================
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('reviewConnection').textContent = selectedConnectionLabel || '—';
    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),
        xero_connection_id:        selectedConnectionId,
        name:                      document.getElementById('notebookName').value.trim(),
        description:               document.getElementById('notebookDesc').value.trim() || null,
        load_type:                 selectedLoadType,
        entities:                  selectedEntities,
        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/xero-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 = '/xero-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