@php
use App\Helpers\ActionHelper;
use Carbon\Carbon;
use Illuminate\Support\Str;
@endphp
@extends('layouts.app')

@section('title', __('clients.show_title'))

@section('breadcrumbs')
    @include('components.breadcrumbs', ['items' => [
        ['title' => $client->name, 'active' => true]
    ]])
@endsection

@section('content')
<style>
    /* === SEZIONI COLLASSABILI === */
    .section-collapsible {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 0;
    }

    .section-collapsible.show {
        max-height: 1000px;
        transition: max-height 0.5s ease-in, opacity 0.5s ease-in;
        opacity: 1;
    }

    /* === ANIMAZIONI BASE === */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .spin {
        animation: spin 1.5s linear infinite;
        display: inline-block;
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }

    .pulse {
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes glow {
        0% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.3); }
        50% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.6); }
        100% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.3); }
    }

    /* === PROGRESS BAR === */
    #scanProgressBar.bg-success {
        background: linear-gradient(90deg, #28a745 0%, #20c997 100%) !important;
    }

    .progress-bar-animated {
        background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent) !important;
        background-size: 1rem 1rem !important;
    }

</style>
    <div class="row">
        <div class="col">
            <div class="d-flex flex-wrap align-items-center mb-3">
            <h2 class="fw-bold mb-0">{{ $client->name }}</h2>
                         <a href="{{ route('clients.edit', $client->id) }}" class="header-action-btn ml-3 text-primary">
                 <i class="bi bi-gear me-1"></i> {{ __('clients.configure_client') }}
             </a>
            <div class="d-flex flex-wrap gap-2 align-items-center" id="headerActions" style="margin-left: auto;">
                @if(count($availableDates ?? []) > 0)
                    <form action="{{ route('clients.show', $client->id) }}" method="GET" id="dateFilterForm" class="ms-3">
                        <div class="input-group">
                            <label class="input-group-text" for="dateSelect">
                                <i class="bi bi-calendar3"></i>
                            </label>
                            <select class="form-select" id="dateSelect" name="date" onchange="this.form.submit()">
                                @foreach($availableDates as $dateOption)
                                    <option value="{{ $dateOption['value'] }}" {{ $dateOption['value'] == $selectedDate ? 'selected' : '' }}>
                                        {{ $dateOption['label'] }}
                                        @if($dateOption['is_current'])
                                            <span class="text-muted">({{ __('clients.latest_scans') }})</span>
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                @endif
            </div>
        </div>

        @if($client->scan_every > 0 && $nextScanDate)
            <div class="alert alert-info mb-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <i class="bi bi-calendar-check me-1"></i>
                        <strong>{{ __('clients.next_auto_scan') }}</strong> {{ $nextScanDate->format('d/m/Y H:i') }}
                    </div>
                </div>
            </div>
        @endif
    
        <!-- Informazioni sul limite URL -->
        <div class="alert alert-info mb-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <i class="bi bi-link-45deg me-2"></i>
                    <strong>{{ __('clients.url_limit') }}</strong> {{ $uniqueUrlsCount }} / {{ $urlLimit }} {{ __('clients.url_used') }}
                </div>
                @if(!$canAddNewUrl)
                    <div class="text-warning">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        <strong>{{ __('clients.limit_reached') }}</strong> {{ __('clients.cannot_add_urls') }}
                    </div>
                @endif
            </div>
        </div>
        
        <!-- Notifica scansioni pending (gestita dinamicamente via AJAX) -->
        <div id="pendingScansAlert" class="alert alert-warning mb-3" style="display: none;">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <i class="bi bi-clock-history me-2"></i>
                    {!! __('clients.pending_scans_alert') !!}
                </div>
                <form method="POST" action="{{ route('clients.startPendingScans', $client) }}" style="display:inline;">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-primary ms-2">{{ __('clients.start_scans') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Barra di avanzamento per gli scan in corso (gestita dinamicamente via AJAX) -->
<div id="scanProgressContainer" class="mb-4" style="display: none;">
    <div class="alert alert-primary position-relative mb-0" style="overflow: hidden;">
        <!-- Progress bar sottile in alto -->
        <div class="position-absolute w-100" style="top: 0; left: 0; height: 5px;">
            <div data-dynamic-field="scan_progress_bar" 
                 class="progress-bar progress-bar-striped progress-bar-animated" 
                 role="progressbar" 
                 style="width: 0%; height: 100%;" 
                 aria-valuenow="0" 
                 aria-valuemin="0" 
                 aria-valuemax="100"></div>
        </div>
        
        <!-- Contenuto alert -->
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <i class="bi bi-arrow-repeat text-warning-emphasis me-1"></i>&nbsp;
            <strong class="text-warning-emphasis">{{ __('clients.scan_in_progress') }}</strong>&nbsp;
            <span data-dynamic-field="scan_progress_percentage" class="fw-bold text-warning-emphasis">0%</span>
            <span class="badge bg-primary text-light" style="margin-left: auto;">
                <span data-dynamic-field="completed_scans">0</span> {{ __('clients.of') }} <span data-dynamic-field="total_scans">0</span> {{ __('clients.scans_completed') }}
            </span>
            &nbsp;
            <span class="badge bg-primary text-light">
                <i class="bi bi-layers me-1"></i>&nbsp;<span data-dynamic-field="active_batches_text">0 {{ __('clients.batch_plural') }}</span>
            </span>
        </div>
    </div>
</div>

<div class="row mb-4" id="chartBlock">
    <div class="col">
        <div class="card shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center bg-light">
                <h3 class="h5 mb-0">{{ __('reports.title') }}</h3>
                <div class="btn-group ml-auto" style="display: none;">
                    <a href="{{ route('clients.export', ['client' => $client->id, 'date' => $selectedDate]) }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-file-excel me-1"></i> {{ __('clients.export_to_excel') }}
                    </a>
                    <a href="{{ route('generate.pdf', ['client' => $client->id, 'date' => $selectedDate]) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-file-pdf me-1"></i> {{ __('clients.download_pdf') }}
                    </a>
                    <a href="{{ route('generate.pdf.view', ['client' => $client->id, 'date' => $selectedDate]) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-eye me-1"></i> {{ __('clients.view_report') }}
                    </a>
                </div>
                <form action="{{ route('reports.regenerate', $client->id) }}" method="POST" class="ml-3" style="display: none;">
                    @csrf
                    <input type="hidden" name="date" value="{{ $selectedDate }}">
                    <input type="hidden" name="force" value="1">
                    <button type="submit" class="btn btn-sm btn-outline-warning">
                        <i class="bi bi-arrow-clockwise me-1"></i> {{ __('clients.regenerate_report') }}
                    </button>
                </form>
            </div>
            <div class="card-body">
                <!-- Loading Message -->
                <div class="alert alert-secondary" id="reportLoadingMessage">
                    <div class="d-flex align-items-center">
                        <div class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></div>
                        {{ __('clients.loading_report') }}
                    </div>
                </div>
                
                <!-- No Reports Message (initially hidden) -->
                <div class="alert alert-info" id="noReportsMessage" style="display: none;">
                    <i class="bi bi-info-circle me-2"></i>
                    {{ __('clients.no_report_available') }}
                </div>

                <!-- Chart Section -->
                <div class="chart-section" style="display: none;">
                    <div id="customChartContainer">
                        <!-- Custom HTML Chart -->
                        <div id="customChart" style="height: 350px;">
                            <div class="alert alert-info" id="noChartData" style="display: none;">{{ __('clients.no_chart_data') }}</div>
                            <div class="alert alert-secondary" id="chartLoading" style="display: none;">
                                <div class="d-flex align-items-center">
                                    <div class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></div>
                                    {{ __('clients.loading_chart_data') }}
                                </div>
                            </div>
                            
                            <!-- Legend -->
                            <div id="chartLegend" class="chart-legend mb-3" style="display: none;">
                                <div class="d-flex flex-wrap justify-content-center gap-3">
                                    <div class="legend-item">
                                        <span class="legend-color" style="background-color: rgba(54, 162, 235, 1);"></span>
                                        <span class="legend-label">Score</span>
                                    </div>
                                    <div class="legend-item">
                                        <span class="legend-color" style="background-color: rgba(255, 99, 132, 0.8);"></span>
                                        <span class="legend-label">{{ __('clients.chart.severe_errors') }}</span>
                                    </div>
                                    <div class="legend-item">
                                        <span class="legend-color" style="background-color: rgba(255, 159, 64, 0.8);"></span>
                                        <span class="legend-label">{{ __('clients.chart.medium_errors') }}</span>
                                    </div>
                                    <div class="legend-item">
                                        <span class="legend-color" style="background-color: rgba(255, 205, 86, 0.8);"></span>
                                        <span class="legend-label">{{ __('clients.chart.minor_errors') }}</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Chart Area -->
                            <div id="chartArea" style="display: none; position: relative; height: 300px;">
                                <!-- Y-Axes Labels (Fixed) -->
                                <div class="y-axes-container">
                                    <!-- Left Y-Axis (Score) -->
                                    <div class="y-axis left-axis">
                                        <div class="y-axis-title">Score</div>
                                        <div class="y-axis-ticks">
                                            <div class="y-tick" data-value="100"><span class="y-tick-label">100</span></div>
                                            <div class="y-tick" data-value="80"><span class="y-tick-label">80</span></div>
                                            <div class="y-tick" data-value="60"><span class="y-tick-label">60</span></div>
                                            <div class="y-tick" data-value="40"><span class="y-tick-label">40</span></div>
                                            <div class="y-tick" data-value="20"><span class="y-tick-label">20</span></div>
                                            <div class="y-tick" data-value="0"><span class="y-tick-label">0</span></div>
                                        </div>
                                    </div>
                                    
                                    <!-- Right Y-Axis (Errors) -->
                                    <div class="y-axis right-axis">
                                        <div class="y-axis-title">{{ __('clients.chart.relevant_errors_count') }}</div>
                                        <div class="y-axis-ticks" id="rightAxisTicks">
                                            <!-- Will be populated dynamically -->
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Scrollable Chart Content -->
                                <div class="chart-scroll-container">
                                    <div class="chart-content" id="chartContent">
                                        <!-- SVG for score line -->
                                        <svg class="score-line-svg" id="scoreLineSvg">
                                            <polyline class="score-line-path" id="scoreLinePath" 
                                                    fill="none" 
                                                    stroke="rgba(54, 162, 235, 1)" 
                                                    stroke-width="2"
                                                    stroke-linejoin="round"
                                                    stroke-linecap="round"/>
                                            <g class="score-points" id="scorePoints"></g>
                                        </svg>
                                        <!-- Chart bars will be added here -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Statistics Section -->
                        <div class="mt-1" id="statisticsSection" style="display: none;">
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="score-badge-container">
                                        <div class="score-circle" id="currentScoreCircle">
                                            <div class="score-value" id="currentScoreValue">-</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="summary-grid">
                                        <div class="summary-box">
                                            <div class="summary-title">
                                                <i class="bi bi-file-earmark-text me-1"></i>
                                                {{ __('clients.pages_analyzed') }}
                                            </div>
                                            <div class="summary-value" id="statsPages">-</div>
                                            <div class="summary-subtitle">{{ __('clients.table.verified_urls') }}</div>
                                        </div>
                                        <div class="summary-box">
                                            <div class="summary-title">
                                                <i class="bi bi-exclamation-triangle me-1"></i>
                                                {{ __('clients.relevant_issues') }}
                                            </div>
                                            <div class="summary-value" id="statsProblems">-</div>
                                            <div class="summary-subtitle" id="statsProblemsBreakdown">
                                                <span class="error-badge error-badge-high">{{ __('clients.severity.high') }}</span><span id="statsHigh">-</span>
                                                <span class="error-badge error-badge-medium">{{ __('clients.severity.medium') }}</span><span id="statsMedium">-</span>
                                                <span class="error-badge error-badge-low">{{ __('clients.severity.low') }}</span><span id="statsLow">-</span>
                                            </div>
                                        </div>
                                        <div class="summary-box">
                                            <div class="summary-title">
                                                <i class="bi bi-calendar3 me-1"></i>
                                                {{ __('clients.report_date') }}
                                            </div>
                                            <div class="summary-value" id="statsDate">-</div>
                                            <div class="summary-subtitle" id="statsDateDetail">-</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Container per azioni URL tra chartBlock e la card degli URL -->
<div class="row mb-4">
    <div class="col">
                 <div class="d-flex justify-content-end" style="gap: 0.5rem;">
            @if($canAddNewUrl)
                <button class="btn btn-success" type="button" onclick="toggleSection('addUrlSection')">
                    <i class="bi bi-plus-circle me-1"></i> {{ __('clients.add_url') }}
                </button>
            @else
                <button class="btn btn-secondary" disabled title="{{ __('clients.url_limit_reached') }}">
                    <i class="bi bi-plus-circle me-1"></i> {{ __('clients.add_url') }}
                </button>
            @endif
            
            <!-- Pulsante Avvia Scansione con Progress -->
            <div class="position-relative">
                <button type="button" class="btn btn-warning" id="scheduleAllScansBtn" onclick="startScanCreation()">
                    <i class="bi bi-arrow-repeat me-1"></i> {{ __('clients.scan_all') }}
                </button>
                
                <!-- Progress Bar per creazione scansioni (posizionata in absolute sopra il pulsante) -->
                <div id="scanCreationProgress" class="d-none position-absolute w-100 h-100" style="top: 0; left: 0; background-color: #e6b980; border-radius: 0.375rem; z-index: 10; opacity: 1;">
                    <div class="position-relative w-100 h-100 d-flex flex-column">
                        <!-- Progress bar in alto -->
                        <div class="progress w-100" style="height: 8px; border-radius: 0.375rem 0.375rem 0 0;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                                    role="progressbar" 
                                    style="width: 0%" 
                                    id="scanCreationProgressBar"
                                    aria-valuenow="0" 
                                    aria-valuemin="0" 
                                    aria-valuemax="100"></div>
                        </div>
                        <!-- Testo subito sotto la progress bar -->
                        <div class="flex-grow-1 d-flex align-items-center justify-content-center px-2">
                            <small class="text-dark fw-medium text-center" id="scanCreationProgressMessage" style="font-size: 0.775rem; line-height: 1.2;">{{ __('clients.waiting') }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Sezione gestione cliente -->
<div class="row">
    <div class="col">
        <!-- Sezione Aggiungi URL (inizialmente nascosta) -->
        <div id="addUrlSection" class="section-collapsible collapse mb-4">
            <div class="card bg-light">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ __('clients.add_new_url') }}</h5>
                    <button type="button" class="btn-close" onclick="toggleSection('addUrlSection')"></button>
                </div>
                <div class="card-body">
                <form id="addUrlForm" onsubmit="return handleAddUrlSubmit(event)">
                        @csrf
                        <input type="hidden" id="start_immediately" name="start_immediately" value="1">
                        <div class="mb-3">
                            <label for="newUrl" class="form-label">URL</label>
                            <input type="url" class="form-control" id="newUrl" name="url" placeholder="https://example.com/" required>
                        </div>

                        @php
                            // === ESTRAZIONE AZIONI CON NUOVA FUNZIONE UNIFICATA ===
                            $allDomainActions = \App\Helpers\ActionHelper::extractActionsFromDomain($client->action_domain);
                            
                            // === FILTRAGGIO AZIONI ===
                            // Rimuove azioni predefinite che creano scan automatici e categorie vuote
                            $filteredBeforeScanActions = [];
                            foreach ($allDomainActions['before_scan_action'] as $category => $actions) {
                                $filteredActions = [];
                                foreach ($actions as $actionName => $actionData) {
                                    // Includiamo l'azione solo se NON è (predefinita E crea auto scan)
                                    if (!($actionData['is_predefined'] && $actionData['creates_auto_scan'])) {
                                        $filteredActions[$actionName] = $actionData;
                                    }
                                }
                                // Aggiungiamo la categoria solo se ha azioni
                                if (!empty($filteredActions)) {
                                    $filteredBeforeScanActions[$category] = $filteredActions;
                                }
                            }
                            
                            $filteredActions = [];
                            foreach ($allDomainActions['action'] as $category => $actions) {
                                $filteredCategoryActions = [];
                                foreach ($actions as $actionName => $actionData) {
                                    // Includiamo l'azione solo se NON è (predefinita E crea auto scan)
                                    if (!($actionData['is_predefined'] && $actionData['creates_auto_scan'])) {
                                        $filteredCategoryActions[$actionName] = $actionData;
                                    }
                                }
                                // Aggiungiamo la categoria solo se ha azioni
                                if (!empty($filteredCategoryActions)) {
                                    $filteredActions[$category] = $filteredCategoryActions;
                                }
                            }
                            
                            $hasBeforeScanActions = !empty($filteredBeforeScanActions);
                        @endphp
                        
                        @if($hasBeforeScanActions)
                        <div class="mb-3">
                            <label for="before_scan_action" class="form-label">{{ __('clients.preventive_action_optional') }}</label>
                            <select id="before_scan_action" name="before_scan_action" class="form-control">
                                <option value="">{{ __('clients.none') }}</option>
                                

                                <!-- Azioni da file custom e auto -->
                                @foreach($filteredBeforeScanActions as $category => $actions)
                                    <optgroup label="{{ $category }}">
                                        @foreach($actions as $actionName => $actionData)
                                            <option value="{{ $actionName }}">{{ $actionData['display_option_name'] }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                        @endif
    
                        @php
                            // === RACCOLTA DATI PER AZIONI NORMALI ===
                            $hasActions = !empty($filteredActions);
                        @endphp
                        
                        @if($hasActions)
                        <div class="mb-3">
                            <label for="action" class="form-label">{{ __('clients.action_optional') }}</label>
                            <select id="action" name="action" class="form-control">
                                <option value="">{{ __('clients.select_action') }}</option>
                

                                <!-- Azioni da file custom e auto -->
                                @foreach($filteredActions as $category => $actions)
                                    <optgroup label="{{ $category }}">
                                        @foreach($actions as $actionName => $actionData)
                                            <option value="{{ $actionName }}">{{ $actionData['display_option_name'] }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                        @endif
        
                                    <div class="text-end">
                            <button type="button" class="btn btn-secondary me-2" onclick="toggleSection('addUrlSection')">{{ __('app.buttons.cancel') }}</button>
                            <button type="submit" class="btn btn-success" id="addUrlSubmitBtn">{{ __('clients.add_and_scan') }}</button>
                            <button type="button" class="btn btn-warning ms-2" id="addUrlPendingBtn" onclick="handleAddUrlPending(event)">{{ __('clients.add_pending') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Blocco informativo IP Whitelist -->
<div class="row mb-3">
    <div class="col">
        <div class="alert alert-info d-flex align-items-center" role="alert">
            <i class="fas fa-info-circle me-2"></i>
            <div>
                {!! __('clients.whitelist_info') !!}
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col">
        <div class="card shadow-sm">
            <div class="card-body">
                @include('partials.scan-cards')
            </div>
        </div>
    </div>
</div>

<style>
/* Custom Chart Styles */
.chart-legend {
    background: white;
    z-index: 10;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 11px;
    padding: 0 5px;
}

.legend-color {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin-right: 0.5em;
    display: inline-block;
}

.y-axes-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.y-axis {
    position: absolute;
    height: 100%;
    width: 80px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.left-axis {
    left: 0;
    border-right: 1px solid #dee2e6;
}

.right-axis {
    right: 0;
    border-left: 1px solid #dee2e6;
}

.y-axis-title {
    position: absolute;
    top: calc(50% - 28px);
    font-size: 12px;
    color: #666;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}

.left-axis .y-axis-title {
    left: 0;
    transform: translate(calc(-50% + 0.5em), -50%) rotate(-90deg);
}

.right-axis .y-axis-title {
    right: 0;
    transform: translate(calc(50% - 0.5em), -50%) rotate(90deg);
}

.y-axis-ticks {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
}

.y-tick {
    font-size: 11px;
    color: #666;
    text-align: center;
    position: relative;
    height: 20%;
}

.y-tick:last-child {
    height: 0;
}

.y-tick::after {
    content: '';
    position: absolute;
    top: 0;
    width: 5px;
    height: 1px;
    background: #dee2e6;
}

.y-tick .y-tick-label {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

.left-axis .y-tick::after {
    right: -1px;
}

.right-axis .y-tick::after {
    left: -1px;
}

.chart-scroll-container {
    margin-left: 80px;
    margin-right: 80px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.chart-scroll-container,
.y-axis {
    padding-bottom: 70px;
    padding-top: 10px;
}

.chart-content {
    display: flex;
    align-items: end;
    height: 100%;
    min-width: fit-content;
    position: relative;
}

.chart-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    height: 100%;
    position: relative;
    padding: 0 5px;
}

.chart-column:not(.selected-date) .column-content .stacked-bars {
    opacity: 0.65;
}
.chart-column:not(.selected-date):hover .column-content .stacked-bars {
    opacity: 1;
}

.chart-column.selected {
    box-shadow: 0 0 0 2px rgba(46, 184, 92, 0.8);
    border-radius: 4px;
}

.column-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
}

.score-line-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    /* Assicura allineamento a sinistra per clienti con pochi report */
    object-fit: none;
    object-position: left top;
}

.score-line-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 3px;
    pointer-events: none;
    z-index: 10;
}

/* Score line styles removed - now handled by SVG */

.stacked-bars {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    height: 100%;
    width: 40px;
    position: relative;
    transition: opacity 0.3s ease;
}

.error-bar {
    width: 100%;
    transition: height 0.3s ease;
    border-bottom: none;
}

.error-bar:first-child {
    border-bottom: 1px solid rgba(255,255,255,0.8);
    border-radius: 0 0 3px 3px;
}

.error-bar:last-child {
    border-radius: 3px 3px 0 0;
}

.error-bar.high-error {
    background-color: rgba(255, 99, 132, 0.8);
}

.error-bar.medium-error {
    background-color: rgba(255, 159, 64, 0.8);
}

.error-bar.low-error {
    background-color: rgba(255, 205, 86, 0.8);
}

.column-label-container {
    position: relative;
    width: 100%;
    height: 0;
}

.column-label {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: rotate(-30deg);
    transform-origin: top right;
    font-size: 10px;
    color: #666;
    white-space: nowrap;
}

.chart-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    z-index: 1000;
    max-width: 280px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
    display: none;
}

.tooltip-title {
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 8px;
}

.tooltip-title-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tooltip-score-circle {
    flex-shrink: 0;
}

.score-circle-mini {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.score-value-mini {
    font-size: 9px;
    font-weight: bold;
    color: #333;
    background: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-date {
    font-weight: bold;
    color: #fff;
}

.tooltip-content {
    line-height: 1.4;
}

.tooltip-section {
    margin-bottom: 6px;
}

.tooltip-section:last-child {
    margin-bottom: 0;
}

.tooltip-detail {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin-left: 8px;
}

.tooltip-total {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 6px;
    margin-top: 8px;
}

.tooltip-error-breakdown {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tooltip-error-item {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
}

.tooltip-error-item .error-badge {
    margin-right: 4px;
}

/* Grid lines */
.chart-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 100% 20%;
    pointer-events: none;
}

/* Stili per grafico con pochi report */
.chart-content.few-reports {
    justify-content: flex-start;
    align-items: flex-start;
}

.chart-content.few-reports .chart-column {
    margin-right: 20px;
}

.chart-content.few-reports .score-line-svg {
    /* Per pochi report, l'SVG deve seguire la dimensione reale del contenuto */
    width: auto;
    min-width: 100%;
}

/* Selected date highlight */
.chart-column.selected-date {
    background: linear-gradient(to bottom, rgba(46, 184, 92, 0.1), rgba(46, 184, 92, 0.05));
    border-radius: 4px;
}

.chart-column.selected-date::before {
    content: '{{ __('clients.selected_date') }}';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(46, 184, 92, 1);
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 10;
}

/* === STATISTICS SECTION STYLES === */

.score-badge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.7rem;
}

.score-circle {
    width: 4em;
    height: 4em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #5D5FEF; /* var(--primary-color) fallback */
}

.score-circle::before {
    content: "";
    position: absolute;
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    background-color: white;
}

.score-value {
    font-weight: bold;
    color: #5D5FEF; /* var(--primary-color) fallback */
    position: relative;
    z-index: 1;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.summary-box {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.summary-title {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #495057;
    margin-bottom: 0.25rem;
}

.summary-subtitle {
    font-size: 0.75rem;
    color: #868e96;
}

.error-badge {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 18px;
    margin-right: 4px;
}

.error-badge-high {
    background-color: #dc3545;
}

.error-badge-medium {
    background-color: #fd7e14;
}

.error-badge-low {
    background-color: #ffc107;
    color: #000;
}

.error-badge-negligible {
    background-color: #6c757d;
    color: #fff;
}

.error-badge + span {
    margin-right: 12px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .score-circle {
        width: 100px;
        height: 100px;
    }
    
    .score-circle::before {
        width: 80px;
        height: 80px;
    }
    
    .score-value {
        font-size: 1.5rem;
    }
}
</style>

<script>
    // === VARIABILI GLOBALI ===
    let clientId = {{ $client->id }};
    let selectedDate = '{{ $selectedDate }}';
    let scanChart = null;
    
    // === NUOVO SISTEMA AJAX UNIFICATO ===
    let dataPollingTimer = null;
    let isDataPolling = false;
    
    // === GESTIONE TIMEOUT DINAMICO ===
    window.dataPollingTimeout = null;
    window.currentPollingInterval = 20000; // Default 20 secondi
    
    // === GESTIONE POLLING ACCELERATO DOPO REFRESH ===
    let acceleratedPollingActive = false;
    let acceleratedPollingCount = 0;
    const ACCELERATED_POLLING_CALLS = 4; // Numero di chiamate accelerate
    const ACCELERATED_POLLING_INTERVAL = 5000; // 5 secondi per le chiamate accelerate
    
    // === GESTIONE GRAFICO ===
    let chartReportsData = []; // Array di {id, updated_at} dei report dal server
    let isChartLoading = false;
    let chartVisible = false;
    
    // === TRACKING RUNNING SCANS PER AUTO-REFRESH ===
    let previousRunningCount = 0;
    let previousQueuedCount = 0;
    let previousActiveJobsCount = 0;
    
    // === TRACKING PROGRESSO CUMULATIVO SESSIONE ===
    let sessionTotalJobs = 0;        // Totale jobs della sessione
    let sessionCompletedJobs = 0;    // Jobs completati nella sessione (deprecato, uso calcolo dinamico)
    let activeBatchIds = new Set();  // Set dei batch ID attivi nella sessione
    
    /**
     * Avvia il polling dinamico per recuperare i dati del cliente
     */
    function startDataPolling() {
        if (isDataPolling) {
            console.log('⚠️ Polling già attivo, salto avvio');
            return;
        }
        
        console.log('🚀 Avvio polling dinamico dati cliente...');
        isDataPolling = true;
        
        // Prima chiamata immediata con refresh=true
        fetchClientData(true);
    }
    
    /**
     * Ferma il polling dei dati
     */
    function stopDataPolling() {
        if (!isDataPolling) {
            return;
        }
        
        console.log('⏹️ Fermato polling dati cliente');
        isDataPolling = false;
        
        // Cancella timeout attivo
        if (window.dataPollingTimeout) {
            clearTimeout(window.dataPollingTimeout);
            window.dataPollingTimeout = null;
        }
        
        // Cancella eventuale timer legacy (per compatibilità)
        if (dataPollingTimer) {
            clearInterval(dataPollingTimer);
            dataPollingTimer = null;
        }
    }
    
    /**
     * Forza un refresh immediato dei dati (da chiamare da altre parti dell'app)
     */
    function forceDataRefresh() {
        console.log('🔄 Refresh forzato richiesto - reset sessione');
        resetSessionProgress();
        fetchClientData(true);
    }
    
    /**
     * Attiva il polling accelerato per le prossime chiamate
     */
    function activateAcceleratedPolling() {
        console.log('🚀 Attivazione polling accelerato...');
        acceleratedPollingActive = true;
        acceleratedPollingCount = 0;
    }
    
    /**
     * Forza un refresh e attiva il polling accelerato
     */
    function forceDataRefreshWithAcceleration() {
        console.log('🔄 Refresh forzato con polling accelerato - reset sessione');
        resetSessionProgress();
        activateAcceleratedPolling();
        fetchClientData(true);
    }
    
    /**
     * Aggiorna la progress bar delle scansioni con tracking cumulativo della sessione
     */
    function updateScanProgressBar(data) {
        const progressContainer = document.getElementById('scanProgressContainer');
        
        if (!progressContainer) {
            console.warn('⚠️ Progress container non trovato');
            return;
        }
        
        const jobBatches = data.job_batches || [];
        
        // === GESTIONE NUOVI BATCH (aggiungi al totale sessione) ===
        jobBatches.forEach(batch => {
            if (!activeBatchIds.has(batch.id)) {
                // Nuovo batch rilevato
                activeBatchIds.add(batch.id);
                sessionTotalJobs += batch.total_jobs || 0;
                console.log(`📈 Nuovo batch rilevato: +${batch.total_jobs} jobs (totale sessione: ${sessionTotalJobs})`);
            }
        });
        
        // === CALCOLA PROGRESSO ATTUALE DEI BATCH ATTIVI ===
        let currentTotalJobs = 0;
        let currentPendingJobs = 0;
        let currentFailedJobs = 0;
        
        jobBatches.forEach(batch => {
            currentTotalJobs += batch.total_jobs || 0;
            currentPendingJobs += batch.pending_jobs || 0;
            currentFailedJobs += batch.failed_jobs || 0;
        });
        
        const currentCompletedJobs = currentTotalJobs - currentPendingJobs - currentFailedJobs;
        
        // === CALCOLA JOBS COMPLETATI DA BATCH FINITI ===
        const completedFromFinishedBatches = sessionTotalJobs - currentTotalJobs;
        
        // === TOTALE SESSIONE ===
        const totalSessionCompleted = completedFromFinishedBatches + currentCompletedJobs;
        const sessionPercentage = sessionTotalJobs > 0 ? 
            Math.round((totalSessionCompleted / sessionTotalJobs) * 100) : 0;
        
        if (jobBatches.length > 0) {
            // === MOSTRA PROGRESSO CUMULATIVO ===
            updateDynamicField('scan_progress_percentage', sessionPercentage + '%');
            updateDynamicField('completed_scans', totalSessionCompleted);
            updateDynamicField('total_scans', sessionTotalJobs);
            const batchText = jobBatches.length === 1 ? '1 {{ __('clients.batch_singular') }}' : `${jobBatches.length} {{ __('clients.batch_plural') }}`;
            updateDynamicField('active_batches_text', batchText);
            
            // Aggiorna progress bar
            const progressBar = document.querySelector('[data-dynamic-field="scan_progress_bar"]');
            if (progressBar) {
                progressBar.style.width = sessionPercentage + '%';
                progressBar.setAttribute('aria-valuenow', sessionPercentage);
                
                // Colore: rosso se failed, blu se in corso, verde se tutto finito
                if (currentFailedJobs > 0) {
                    progressBar.className = 'progress-bar progress-bar-striped bg-danger';
                } else if (jobBatches.length > 0) {
                    progressBar.className = 'progress-bar progress-bar-striped progress-bar-animated bg-primary';
                } else {
                    progressBar.className = 'progress-bar bg-success';
                }
            }
            
            progressContainer.style.display = 'block';
            console.log(`📊 Progresso cumulativo: ${totalSessionCompleted}/${sessionTotalJobs} (${sessionPercentage}%) - ${jobBatches.length} batches attivi`);
            console.log(`    ├─ Completati da batch finiti: ${completedFromFinishedBatches}`);
            console.log(`    └─ Completati da batch attivi: ${currentCompletedJobs}`);
            
        } else {
            // === TUTTI I BATCH FINITI ===
            if (sessionTotalJobs > 0) {
                // Mostra completamento al 100%
                updateDynamicField('scan_progress_percentage', '100%');
                updateDynamicField('completed_scans', sessionTotalJobs);
                updateDynamicField('total_scans', sessionTotalJobs);
                updateDynamicField('active_batches_text', '0 {{ __('clients.batch_plural') }}');
                
                const progressBar = document.querySelector('[data-dynamic-field="scan_progress_bar"]');
                if (progressBar) {
                    progressBar.style.width = '100%';
                    progressBar.setAttribute('aria-valuenow', 100);
                    progressBar.className = 'progress-bar bg-success';
                }
                
                progressContainer.style.display = 'block';
                console.log(`✅ Sessione completata: ${sessionTotalJobs}/${sessionTotalJobs} (100%)`);
                
                // Nascondi dopo 3 secondi e reset stato
                setTimeout(() => {
                    progressContainer.style.display = 'none';
                    resetSessionProgress();
                    console.log('📊 Progress nascosto dopo completamento sessione');
                }, 3000);
            } else {
                // Nessuna sessione in corso
                progressContainer.style.display = 'none';
                console.log('📊 Progress nascosto (nessuna sessione attiva)');
            }
        }
    }
    
    /**
     * Reset dello stato della sessione di progresso
     */
    function resetSessionProgress() {
        sessionTotalJobs = 0;
        sessionCompletedJobs = 0;
        activeBatchIds.clear();
        console.log('🔄 Reset stato progresso sessione');
    }
    
    /**
     * Utility per aggiornare elementi con data-dynamic-field
     */
    function updateDynamicField(fieldName, value) {
        const element = document.querySelector(`[data-dynamic-field="${fieldName}"]`);
        if (element) {
            element.textContent = value;
        }
    }
    
    /**
     * Aggiorna la notifica delle scansioni pending in base ai dati AJAX
     */
    function updatePendingScansAlert(data) {
        const alertElement = document.getElementById('pendingScansAlert');
        const pendingCountElement = document.querySelector('[data-dynamic-field="pending_count"]');
        
        if (!alertElement || !pendingCountElement) {
            console.warn('⚠️ Elementi alert pending non trovati');
            return;
        }
        
        const pendingCount = data.status_counts.pending || 0;
        const showAlert = pendingCount > 0 && data.selected_date === 'current';
        
        if (showAlert) {
            // Aggiorna il numero e mostra l'alert
            pendingCountElement.textContent = pendingCount;
            alertElement.style.display = 'block';
            console.log(`📌 Mostrato alert pending: ${pendingCount} scansioni`);
        } else {
            // Nascondi l'alert
            alertElement.style.display = 'none';
            console.log('📌 Nascosto alert pending (nessuna scansione pending o data non current)');
        }
    }
    
    /**
     * Gestisce le card di scansioni raggruppate
     * @param {Array} groupedScans - Array delle scansioni raggruppate dal server
     */
    function handleGroupedScansCards(groupedScans) {
        if (!groupedScans || !Array.isArray(groupedScans)) {
            console.log('📋 Nessuna scansione raggruppata ricevuta');
            return;
        }
        
        console.log('📋 Gestione card scansioni raggruppate:', groupedScans.length, 'elementi');
        
        const scansContainer = document.getElementById('scansContainer');
        if (!scansContainer) {
            console.warn('⚠️ Container scansioni non trovato');
            return;
        }
        
        // Trova il dummy template
        const dummyCard = scansContainer.querySelector('.grouped-card[id="model"]');
        if (!dummyCard) {
            console.warn('⚠️ Card dummy non trovata');
            return;
        }
        
        // Raccogli tutte le card esistenti con le loro posizioni
        const existingCards = new Map();
        const cardElements = Array.from(scansContainer.querySelectorAll('.grouped-card:not([id="model"])'));
        cardElements.forEach((card, index) => {
            if (card.id) {
                existingCards.set(card.id, { element: card, position: index });
            }
        });
        
        // Set degli ID ricevuti dal server
        const receivedIds = new Set();
        
        // Processa ogni scansione raggruppata nell'ordine del payload
        groupedScans.forEach((groupedScan, payloadIndex) => {
            const cardId = groupedScan.formatted_id;
            const cardUpdatedAt = groupedScan.updated_at;
            
            if (!cardId) {
                console.warn('⚠️ ID formattato mancante per scansione raggruppata:', groupedScan);
                return;
            }
            
            receivedIds.add(cardId);
            
            const existingCardInfo = existingCards.get(cardId);
            
            if (!existingCardInfo) {
                // Creazione: nuova card dal dummy
                console.log('📋 Creazione nuova card:', cardId, 'posizione payload:', payloadIndex);
                const newCard = createCardFromDummy(dummyCard, cardId, groupedScan);
                
                // Posiziona la card nella posizione corretta basandosi sull'ordine del payload
                positionCardInContainer(scansContainer, newCard, payloadIndex, dummyCard);
                
            } else {
                // Verifica se serve aggiornamento
                const existingUpdatedAt = parseInt(existingCardInfo.element.getAttribute('data-overall-updated-at')) || 0;
                
                if (cardUpdatedAt > existingUpdatedAt) {
                    console.log('📋 Aggiornamento card:', cardId, 'posizione payload:', payloadIndex, 'via sostituzione completa');
                    
                    // Sostituzione: crea nuovo duplicato
                    const newCard = createCardFromDummy(dummyCard, cardId, groupedScan);
                    const oldCard = existingCardInfo.element;
                    
                    // Sostituisci nella stessa posizione
                    oldCard.parentNode.insertBefore(newCard, oldCard);
                    oldCard.remove();
                    
                    // Verifica se la nuova card è nella posizione corretta, altrimenti riposiziona
                    repositionCardIfNeeded(scansContainer, newCard, payloadIndex, dummyCard);
                } else {
                    console.log('📋 Card già aggiornata:', cardId, 'posizione payload:', payloadIndex);
                    
                    // Verifica se la card esistente è nella posizione corretta
                    repositionCardIfNeeded(scansContainer, existingCardInfo.element, payloadIndex, dummyCard);
                }
            }
        });
        
        // Rimuovi card orfane
        existingCards.forEach((cardInfo, cardId) => {
            if (!receivedIds.has(cardId)) {
                console.log('📋 Rimozione card orfana:', cardId);
                cardInfo.element.remove();
            }
        });
        
        console.log('📋 Gestione card completata - ordine mantenuto dal payload');
    }
    
    /**
     * Posiziona una card nella posizione corretta nel container basandosi sull'indice del payload
     * @param {HTMLElement} container - Container delle card
     * @param {HTMLElement} cardToPosition - Card da posizionare
     * @param {number} targetIndex - Indice target nel payload
     * @param {HTMLElement} dummyCard - Card dummy da escludere
     */
    function positionCardInContainer(container, cardToPosition, targetIndex, dummyCard) {
        const currentCards = Array.from(container.querySelectorAll('.grouped-card:not([id="model"])'));
        
        // Se è la prima card o non ci sono altre card, appendi semplicemente
        if (targetIndex === 0 || currentCards.length === 0) {
            container.appendChild(cardToPosition);
            console.log('📋 Card posizionata all\'inizio o come prima card:', cardToPosition.id);
            return;
        }
        
        // Se l'indice target è maggiore o uguale al numero di card esistenti, appendi alla fine
        if (targetIndex >= currentCards.length) {
            container.appendChild(cardToPosition);
            console.log('📋 Card posizionata alla fine:', cardToPosition.id, 'posizione:', targetIndex);
            return;
        }
        
        // Altrimenti, inserisci prima della card alla posizione target
        const referenceCard = currentCards[targetIndex];
        if (referenceCard) {
            container.insertBefore(cardToPosition, referenceCard);
            console.log('📋 Card posizionata prima di:', referenceCard.id, 'alla posizione:', targetIndex);
        } else {
            // Fallback: appendi alla fine
            container.appendChild(cardToPosition);
            console.log('📋 Card posizionata alla fine (fallback):', cardToPosition.id);
        }
    }
    
    /**
     * Verifica se una card è nella posizione corretta e la riposiziona se necessario
     * @param {HTMLElement} container - Container delle card
     * @param {HTMLElement} card - Card da verificare
     * @param {number} targetIndex - Indice target nel payload
     * @param {HTMLElement} dummyCard - Card dummy da escludere
     */
    function repositionCardIfNeeded(container, card, targetIndex, dummyCard) {
        const currentCards = Array.from(container.querySelectorAll('.grouped-card:not([id="model"])'));
        const currentIndex = currentCards.indexOf(card);
        
        // Se la card è già nella posizione corretta, non fare nulla
        if (currentIndex === targetIndex) {
            console.log('📋 Card già nella posizione corretta:', card.id, 'posizione:', currentIndex);
            return;
        }
        
        console.log('📋 Riposizionamento necessario per card:', card.id, 'da posizione', currentIndex, 'a posizione', targetIndex);
        
        // Rimuovi temporaneamente la card dal DOM
        card.remove();
        
        // Ottieni la lista aggiornata senza questa card
        const updatedCards = Array.from(container.querySelectorAll('.grouped-card:not([id="model"])'));
        
        // Posiziona nella posizione corretta
        if (targetIndex === 0 || updatedCards.length === 0) {
            container.appendChild(card);
            console.log('📋 Card riposizionata all\'inizio:', card.id);
        } else if (targetIndex >= updatedCards.length) {
            container.appendChild(card);
            console.log('📋 Card riposizionata alla fine:', card.id);
        } else {
            const referenceCard = updatedCards[targetIndex];
            if (referenceCard) {
                container.insertBefore(card, referenceCard);
                console.log('📋 Card riposizionata prima di:', referenceCard.id);
            } else {
                container.appendChild(card);
                console.log('📋 Card riposizionata alla fine (fallback):', card.id);
            }
        }
    }
    
    /**
     * Crea una nuova card dal dummy e la popola con i dati
     * @param {HTMLElement} dummyCard - Il template dummy
     * @param {string} cardId - ID della nuova card
     * @param {Object} groupedScan - Dati della scansione raggruppata
     * @returns {HTMLElement} La nuova card popolata
     */
    function createCardFromDummy(dummyCard, cardId, groupedScan) {
        // Clona il dummy per ottenere HTML pulito
        const newCard = dummyCard.cloneNode(true);
        newCard.id = cardId;
        newCard.setAttribute('data-overall-status', groupedScan.overall_status || 'pending');
        newCard.setAttribute('data-overall-updated-at', groupedScan.updated_at);
        
        // Aggiungi classi CSS per gestire azioni auto_scan
        if (groupedScan.action_creates_auto_scan || groupedScan.before_scan_action_creates_auto_scan) {
            newCard.classList.add('has-auto-scan-action');
        }
        
        // Popola i campi base
        updateCardBasicFields(newCard, groupedScan);
        
        // Popola devices e systems
        populateDevicesAndSystems(newCard, groupedScan);
        
        // Popola il totale degli errori se lo stato è completed
        updateTotalErrorCount(newCard, groupedScan);
        
        // Popola scan date info e action buttons
        updateCardDateInfo(newCard, groupedScan);
        updateCardActionButtons(newCard, groupedScan);
        
        return newCard;
    }
    
    /**
     * Aggiorna i campi base della card (titolo, URL e elementi condizionali)
     * @param {HTMLElement} card - La card da aggiornare
     * @param {Object} groupedScan - Dati della scansione raggruppata
     */
    function updateCardBasicFields(card, groupedScan) {
        // Aggiorna titolo
        const titleElement = card.querySelector('[data-dynamic-field="page-title"]');
        if (titleElement && groupedScan.page_title) {
            titleElement.textContent = groupedScan.page_title;
        }
        
        // Aggiorna URL
        const urlElement = card.querySelector('[data-dynamic-field="url"]');
        if (urlElement && groupedScan.url) {
            urlElement.textContent = groupedScan.url;
        }
        
        // Gestisci exclude-common-alert (mostra solo se exclude_common_state è true)
        const excludeCommonAlert = card.querySelector('[data-dynamic-field="exclude-common-alert"]');
        if (excludeCommonAlert && !groupedScan.exclude_common_state) {
            excludeCommonAlert.remove();
        }
        
        // Gestisci base-scan-alert (mostra solo se requires_base_scan è true E has_base_scan è false)
        const baseScanAlert = card.querySelector('.base-scan-alert');
        if (baseScanAlert && !(groupedScan.requires_base_scan && !groupedScan.has_base_scan)) {
            baseScanAlert.remove();
        }
        
        // Gestisci before-scan-action (mostra e valorizza solo se presente)
        const beforeScanActionElement = card.querySelector('[data-dynamic-field="before-scan-action"]');
        if (beforeScanActionElement) {
            if (groupedScan.before_scan_action && groupedScan.before_scan_action_metadata) {
                // Valorizza con il display_name dei metadati
                const smallElement = beforeScanActionElement.querySelector('small');
                if (smallElement) {
                    smallElement.innerHTML = `&nbsp;{{ __('clients.preventive_action_label') }} ${groupedScan.before_scan_action_metadata.display_name}`;
                }
            } else {
                // Rimuovi se non presente
                beforeScanActionElement.remove();
            }
        }
        
        // Gestisci action (mostra e valorizza solo se presente)
        const actionElement = card.querySelector('[data-dynamic-field="action"]');
        if (actionElement) {
            if (groupedScan.action && groupedScan.action_metadata) {
                // Valorizza con il display_name dei metadati
                const smallElement = actionElement.querySelector('small');
                if (smallElement) {
                    smallElement.innerHTML = `&nbsp;${groupedScan.action_metadata.display_name}`;
                }
            } else {
                // Rimuovi se non presente
                actionElement.remove();
            }
        }
    }
    
    /**
     * Popola devices e systems nella card
     * @param {HTMLElement} card - La card da popolare
     * @param {Object} groupedScan - Dati della scansione raggruppata
     */
    function populateDevicesAndSystems(card, groupedScan) {
        const devicesContainer = card.querySelector('[data-template="devices-container"]');
        const deviceTemplate = card.querySelector('[data-template="device"]');
        
        if (!devicesContainer || !deviceTemplate || !groupedScan.devices) {
            console.warn('⚠️ Template device o dati devices mancanti');
            return;
        }
        
        // Rimuovi tutti i device esistenti tranne il template
        const existingDevices = devicesContainer.querySelectorAll('[data-template="device"]');
        existingDevices.forEach((device, index) => {
            if (index > 0) device.remove(); // Mantieni solo il primo (template)
        });
        
        // Popola ogni device
        const deviceNames = Object.keys(groupedScan.devices);
        deviceNames.forEach((deviceName, index) => {
            const deviceData = groupedScan.devices[deviceName];
            let deviceElement;
            
            if (index === 0) {
                // Usa il template esistente per il primo device
                deviceElement = deviceTemplate;
            } else {
                // Clona il template per i device aggiuntivi
                deviceElement = deviceTemplate.cloneNode(true);
                devicesContainer.appendChild(deviceElement);
            }
            
            // Popola il device
            populateDeviceElement(deviceElement, deviceName, deviceData);
        });
        
        console.log('📋 Popolati', deviceNames.length, 'devices per card', card.id);
    }
    
    /**
     * Popola un singolo device element
     * @param {HTMLElement} deviceElement - L'elemento device da popolare
     * @param {string} deviceName - Nome del device (desktop, mobile, etc.)
     * @param {Object} deviceData - Dati del device
     */
    function populateDeviceElement(deviceElement, deviceName, deviceData) {
        // Aggiorna attributi del device
        deviceElement.setAttribute('data-device', deviceName);
        deviceElement.setAttribute('data-device-status', deviceData.device_status || 'pending');
        deviceElement.setAttribute('data-has-errors', deviceData.error_message ? 'true' : 'false');
        
        // Aggiorna nome del device
        const deviceNameElement = deviceElement.querySelector('[data-template="device-name"]');
        if (deviceNameElement) {
            deviceNameElement.textContent = deviceName.charAt(0).toUpperCase() + deviceName.slice(1);
        }
        
        // Popola systems
        populateSystemsForDevice(deviceElement, deviceData.systems || {});
        
        // Gestisci errori del device
        populateDeviceErrors(deviceElement, deviceData.error_message);
    }
    
    /**
     * Popola i systems per un device
     * @param {HTMLElement} deviceElement - L'elemento device
     * @param {Object} systemsData - Dati dei systems
     */
    function populateSystemsForDevice(deviceElement, systemsData) {
        const systemsContainer = deviceElement.querySelector('[data-template="systems-container"]');
        const systemTemplate = deviceElement.querySelector('[data-template="system"]');
        
        if (!systemsContainer || !systemTemplate) {
            console.warn('⚠️ Template system mancante');
            return;
        }
        
        // Rimuovi tutti i systems esistenti tranne il template
        const existingSystems = systemsContainer.querySelectorAll('[data-template="system"]');
        existingSystems.forEach((system, index) => {
            if (index > 0) system.remove(); // Mantieni solo il primo (template)
        });
        
        // Popola ogni system
        const systemNames = Object.keys(systemsData);
        systemNames.forEach((systemName, index) => {
            const systemData = systemsData[systemName];
            let systemElement;
            
            if (index === 0) {
                // Usa il template esistente per il primo system
                systemElement = systemTemplate;
            } else {
                // Clona il template per i system aggiuntivi
                systemElement = systemTemplate.cloneNode(true);
                systemsContainer.appendChild(systemElement);
            }
            
            // Popola il system
            populateSystemElement(systemElement, systemName, systemData);
        });
    }
    
    /**
     * Popola un singolo system element
     * @param {HTMLElement} systemElement - L'elemento system da popolare
     * @param {string} systemName - Nome del system (axe, tabbable, etc.)
     * @param {Object} systemData - Dati del system
     */
    function populateSystemElement(systemElement, systemName, systemData) {
        // Aggiorna nome del system
        const systemNameElement = systemElement.querySelector('[data-template="system-name"]');
        if (systemNameElement) {
            systemNameElement.textContent = systemName.charAt(0).toUpperCase() + systemName.slice(1);
        }
        
        // Aggiorna conteggio errori se completed
        const errorCountElement = systemElement.querySelector('[data-template="error-count"]');
        if (errorCountElement && systemData.status === 'completed') {
            const errorCount = systemData.errors || 0;
            errorCountElement.textContent = errorCount;
            
            // Gestisci colore background in base al numero di errori
            errorCountElement.classList.remove('bg-success', 'bg-danger');
            if (errorCount > 0) {
                errorCountElement.classList.add('bg-danger');
            } else {
                errorCountElement.classList.add('bg-success');
            }
        }
        
        // Mostra lo stato appropriato per il system
        const systemStatusElements = systemElement.querySelectorAll('.system-status');
        systemStatusElements.forEach(el => el.style.display = 'none');
        
        const activeSystemStatusElement = systemElement.querySelector(`.system-status.${systemData.status}`);
        if (activeSystemStatusElement) {
            activeSystemStatusElement.style.display = 'flex';
        }
    }
    
    /**
     * Gestisce gli errori del device
     * @param {HTMLElement} deviceElement - L'elemento device
     * @param {string|null} errorMessage - Messaggio di errore
     */
    function populateDeviceErrors(deviceElement, errorMessage) {
        const errorContainer = deviceElement.querySelector('[data-template="device-errors"]');
        const errorMessageElement = deviceElement.querySelector('[data-template="error-message"]');
        
        if (!errorContainer || !errorMessageElement) return;
        
        if (errorMessage) {
            errorMessageElement.textContent = errorMessage;
            errorContainer.classList.remove('d-none');
        } else {
            errorContainer.classList.add('d-none');
        }
    }
    
    /**
     * Calcola e aggiorna il totale degli errori di tutti i systems per tutti i devices
     * @param {HTMLElement} card - La card da aggiornare
     * @param {Object} groupedScan - Dati della scansione raggruppata
     */
    function updateTotalErrorCount(card, groupedScan) {
        const totalErrorCountElement = card.querySelector('.total-error-count');
        
        if (!totalErrorCountElement || groupedScan.overall_status !== 'completed') {
            return;
        }
        
        let totalErrors = 0;
        
        // Itera attraverso tutti i devices
        if (groupedScan.devices) {
            Object.keys(groupedScan.devices).forEach(deviceName => {
                const deviceData = groupedScan.devices[deviceName];
                
                // Itera attraverso tutti i systems del device
                if (deviceData.systems) {
                    Object.keys(deviceData.systems).forEach(systemName => {
                        const systemData = deviceData.systems[systemName];
                        
                        // Aggiungi gli errori del system se è completed
                        if (systemData.status === 'completed' && systemData.errors) {
                            totalErrors += parseInt(systemData.errors) || 0;
                        }
                    });
                }
            });
        }
        
        // Aggiorna il testo del badge
        if (totalErrors > 0) {
            totalErrorCountElement.textContent = '{{ __('clients.js.errors_count') }}'.replace('{count}', totalErrors);
            totalErrorCountElement.classList.remove('bg-success');
            totalErrorCountElement.classList.add('bg-danger');
        } else {
            totalErrorCountElement.textContent = '{{ __('clients.js.errors_count') }}'.replace('{count}', '0');
            totalErrorCountElement.classList.remove('bg-danger');
            totalErrorCountElement.classList.add('bg-success');
        }
        
        console.log('📊 Totale errori calcolato per card', card.id + ':', totalErrors);
    }
    
    /**
     * Aggiorna le informazioni di data della scansione
     * @param {HTMLElement} card - La card da aggiornare
     * @param {Object} groupedScan - Dati della scansione raggruppata
     */
    function updateCardDateInfo(card, groupedScan) {
        const dateInfoContainer = card.querySelector('.scan-date-info');
        if (!dateInfoContainer) return;
        
        // Verifica se dobbiamo mostrare le info di data
        const shouldShow = groupedScan.date_display || (groupedScan.show_day_difference && groupedScan.day_difference !== 0);
        
        if (!shouldShow) {
            dateInfoContainer.remove();
            return;
        }
        
        // Trova gli elementi esistenti nel template
        const badge = dateInfoContainer.querySelector('span.badge');
        const dayDiffSpan = badge?.querySelector('span.rounded-circle');
        const dateSpan = badge?.querySelector('span[style*="padding"]');
        
        if (!badge) return;
        
        // Gestisci la modalità current vs data specifica
        if (groupedScan.selected_date_mode === 'current') {
            // Modalità "current": mostra differenza giorni + data display
            
            // Gestisci day difference
            if (dayDiffSpan && groupedScan.show_day_difference && groupedScan.day_difference !== 0) {
                const diff = groupedScan.day_difference;
                dayDiffSpan.textContent = (diff > 0 ? '+' : '') + diff;
                dayDiffSpan.classList.add('d-inline-flex');
                dayDiffSpan.style.display = '';
            } else if (dayDiffSpan) {
                dayDiffSpan.classList.remove('d-inline-flex');
                dayDiffSpan.style.display = 'none';
            }
            
            // Gestisci date display
            if (dateSpan && groupedScan.date_display) {
                dateSpan.textContent = groupedScan.date_display;
                dateSpan.style.display = 'block';
            } else if (dateSpan) {
                dateSpan.style.display = 'none';
            }
            
        } else {
            // Modalità data specifica: mostra solo la data
            if (dayDiffSpan) {
                dayDiffSpan.classList.remove('d-inline-flex');
                dayDiffSpan.style.display = 'none';
            }
            
            if (dateSpan && groupedScan.date_display) {
                dateSpan.textContent = groupedScan.date_display;
                dateSpan.style.display = 'block';
            } else if (dateSpan) {
                dateSpan.style.display = 'none';
            }
        }
    }
    
    /**
     * Aggiorna i pulsanti di azione della card
     * @param {HTMLElement} card - La card da aggiornare
     * @param {Object} groupedScan - Dati della scansione raggruppata
     */
    function updateCardActionButtons(card, groupedScan) {
        const actionButtonsContainer = card.querySelector('.action-buttons');
        if (!actionButtonsContainer) return;
        
        // Aggiorna pulsante "Ripeti scansione"
        const singleScanBtn = actionButtonsContainer.querySelector('.single-scan-btn');
        if (singleScanBtn) {
            const url = groupedScan.url || '';
            const action = groupedScan.action || null;
            const beforeScanAction = groupedScan.before_scan_action || null;
            
            // Aggiorna l'onclick con i parametri corretti incluso il riferimento al pulsante
            singleScanBtn.setAttribute('onclick', 
                `startSingleScan('${url}', ${action ? `'${action}'` : 'null'}, ${beforeScanAction ? `'${beforeScanAction}'` : 'null'}, this)`
            );
        }
        
        // Aggiorna pulsante configurazione
        const configBtn = actionButtonsContainer.querySelector('.config-scan-btn');
        if (configBtn) {
            configBtn.setAttribute('data-url', groupedScan.url || '');
            configBtn.setAttribute('data-exclude-common', groupedScan.exclude_common_state ? 'true' : 'false');
        }
        
        // Aggiorna menu configurazione
        const excludeToggle = actionButtonsContainer.querySelector('.exclude-common-toggle');
        if (excludeToggle) {
            excludeToggle.setAttribute('data-url', groupedScan.url || '');
            excludeToggle.setAttribute('data-client-id', clientId.toString());
            excludeToggle.setAttribute('data-exclude-common', groupedScan.exclude_common_state ? 'false' : 'true');
            
            // Aggiorna il testo del menu in base allo stato
            if (groupedScan.exclude_common_state) {
                excludeToggle.innerHTML = '<i class="bi bi-check-circle-fill"></i>{{ __('clients.js.include_url_common_errors') }}';
            } else {
                excludeToggle.innerHTML = '<i class="bi bi-x-circle"></i>{{ __('clients.js.exclude_url_common_errors') }}';
            }
        }
        
        // Aggiorna form di eliminazione
        const deleteForm = actionButtonsContainer.querySelector('.delete-scan-form');
        if (deleteForm) {
            // Aggiorna action URL
            deleteForm.setAttribute('action', `/clients/${clientId}/delete-scans`);
            
            // Aggiorna campi hidden
            const urlInput = deleteForm.querySelector('input[name="url"]');
            const actionInput = deleteForm.querySelector('input[name="action"]');
            const beforeScanActionInput = deleteForm.querySelector('input[name="before_scan_action"]');
            const tokenInput = deleteForm.querySelector('input[name="_token"]');
            
            if (urlInput) urlInput.value = groupedScan.url || '';
            if (actionInput) actionInput.value = groupedScan.action || '';
            if (beforeScanActionInput) beforeScanActionInput.value = groupedScan.before_scan_action || '';
            if (tokenInput) tokenInput.value = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        }
        
        console.log('📋 Action buttons aggiornati per card', card.id);
    }

    /**
     * Effettua la chiamata AJAX unificata per recuperare tutti i dati del cliente
     * @param {boolean} refresh - Se true, indica una richiesta di refresh forzato (default: false)
     */
    function fetchClientData(refresh = false) {
        // Cancella eventuali timeout precedenti per evitare sovrapposizioni
        if (window.dataPollingTimeout) {
            clearTimeout(window.dataPollingTimeout);
            window.dataPollingTimeout = null;
        }
        
        const params = new URLSearchParams({ 
            date: selectedDate,
            refresh: refresh ? '1' : '0',
            _t: Date.now() // Cache busting
        });
        
        console.log(`📊 Fetching client data... (date: ${selectedDate}, refresh: ${refresh})`);
        
        fetch(`/clients/${clientId}/data?${params}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('✅ Client data received:', data);
            
            // Per ora solo log della risposta come richiesto
            console.log('📋 Status Counts:', data.status_counts);
            console.log('⚙️ Job Batches:', data.job_batches);
            console.log('📄 Report IDs:', data.report_ids);
            console.log('🔍 Grouped Scans:', data.grouped_scans);
            console.log('📊 Single Scans Total:', data.single_scans_total);
            
            // Log dinamico per tutti gli stati presenti
            console.log('📈 Status breakdown:');
            Object.entries(data.status_counts).forEach(([status, count]) => {
                if (status !== 'total') {
                    console.log(`   ${status}: ${count}`);
                }
            });
            
            // === TRACKING PER AUTO-REFRESH ===
            const currentRunningCount = data.status_counts.running || 0;
            const currentQueuedCount = data.status_counts.queued || 0;
            const currentActiveJobsCount = data.job_batches ? data.job_batches.length : 0;
            
            // Controlla se è cambiato il numero di scansioni attive
            const activityChanged = (
                currentRunningCount !== previousRunningCount ||
                currentQueuedCount !== previousQueuedCount ||
                currentActiveJobsCount !== previousActiveJobsCount
            );
            
            if (activityChanged && !refresh) {
                console.log('🔄 Activity change detected:', {
                    running: `${previousRunningCount} → ${currentRunningCount}`,
                    queued: `${previousQueuedCount} → ${currentQueuedCount}`,
                    activeJobs: `${previousActiveJobsCount} → ${currentActiveJobsCount}`
                });
                
                // Se l'attività è diminuita (es. scan terminati), forza refresh per aggiornare le card
                const activityDecreased = (
                    currentRunningCount < previousRunningCount ||
                    currentQueuedCount < previousQueuedCount ||
                    currentActiveJobsCount < previousActiveJobsCount
                );
                
                if (activityDecreased) {
                    console.log('📉 Activity decreased - scheduling refresh to update cards...');
                    // Programma un refresh dopo un breve delay per permettere al DB di aggiornarsi
                    setTimeout(() => {
                        console.log('🔄 Executing scheduled refresh due to activity decrease');
                        fetchClientData(true);
                    }, 2000);
                }
            }
            
            // Aggiorna i valori precedenti
            previousRunningCount = currentRunningCount;
            previousQueuedCount = currentQueuedCount;
            previousActiveJobsCount = currentActiveJobsCount;
            
            // Gestisci notifica scansioni pending dinamicamente
            updatePendingScansAlert(data);
            
            // Gestisci progress bar scansioni dinamicamente
            updateScanProgressBar(data);
            
            // Gestisci il grafico dei report
            handleChartUpdates(data);
            
            // Gestisci le card di scansioni raggruppate se presenti
            if (data.grouped_scans) {
                handleGroupedScansCards(data.grouped_scans);
            } else if (refresh && (currentRunningCount === 0 && currentQueuedCount === 0 && currentActiveJobsCount === 0)) {
                // Caso speciale: refresh forzato ma nessuna attività in corso
                // Questo può accadere quando l'ultimo scan è appena finito
                console.log('🔄 Refresh with no activity - ensuring cards are updated to final state');
                
                // Cerca tutte le card con stato "running" o "queued" e aggiornale
                const runningCards = document.querySelectorAll('.grouped-card[data-overall-status="running"], .grouped-card[data-overall-status="queued"]');
                if (runningCards.length > 0) {
                    console.log(`🔄 Found ${runningCards.length} cards still showing as running/queued - forcing full page refresh`);
                    // Se ci sono ancora card running/queued ma non c'è attività, forza refresh della pagina
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }
            }
            
            // === GESTIONE TIMEOUT DINAMICO ===
            const statusCounts = data.status_counts || {};
            const jobBatches = data.job_batches || [];
            
            // Controlla se ci sono scansioni running o queued oppure job batches attivi
            const runningCount = statusCounts.running || 0;
            const queuedCount = statusCounts.queued || 0;
            const hasActiveJobs = jobBatches.length > 0;
            const hasActivity = runningCount > 0 || queuedCount > 0 || hasActiveJobs;
            
            // === GESTIONE POLLING ACCELERATO ===
            let nextInterval;
            let isAcceleratedCall = false;
            
            if (acceleratedPollingActive && acceleratedPollingCount < ACCELERATED_POLLING_CALLS) {
                // Siamo nel periodo di polling accelerato
                nextInterval = ACCELERATED_POLLING_INTERVAL;
                acceleratedPollingCount++;
                isAcceleratedCall = true;
                
                console.log(`🚀 Polling accelerato ${acceleratedPollingCount}/${ACCELERATED_POLLING_CALLS} - prossima chiamata in ${nextInterval/1000}s`);
                
                // Se abbiamo raggiunto il numero massimo di chiamate accelerate
                if (acceleratedPollingCount >= ACCELERATED_POLLING_CALLS) {
                    console.log('✅ Polling accelerato completato, tornando alla modalità normale');
                    acceleratedPollingActive = false;
                }
            } else {
                // Modalità normale: imposta l'intervallo in base all'attività
                nextInterval = hasActivity ? 5000 : 20000;
                
                // Se c'è attività, mantieni il polling a 5 secondi (continua con 5s se attivo)
                if (hasActivity && nextInterval === 5000) {
                    console.log(`⏱️ Attività rilevata - mantenendo polling a ${nextInterval/1000}s`);
                } else {
                    console.log(`⏱️ Prossimo polling in ${nextInterval/1000}s (activity: ${hasActivity})`);
                }
            }
            
            window.currentPollingInterval = nextInterval;
            
            // Programma la prossima chiamata
            window.dataPollingTimeout = setTimeout(() => {
                fetchClientData(false); // Chiamate successive non sono refresh
            }, window.currentPollingInterval);
        })
        .catch(error => {
            console.error('❌ Errore durante fetch client data:', error);
            
            // In caso di errore, riprova dopo l'intervallo corrente
            window.dataPollingTimeout = setTimeout(() => {
                fetchClientData(false);
            }, window.currentPollingInterval);
        });
    }

    // === GESTIONE GRAFICO DEI REPORT ===
    
    /**
     * Gestisce gli aggiornamenti del grafico basandosi sui dati ricevuti
     */
    function handleChartUpdates(data) {
        const reportsData = data.reports_data || [];
        
        console.log('📈 Gestione aggiornamenti grafico...', {
            hasReports: reportsData.length > 0,
            chartVisible: chartVisible,
            isLoading: isChartLoading
        });
        
        // Se non ci sono report, nascondi il grafico
        if (reportsData.length === 0) {
            hideChartBlock();
            return;
        }
        
        // Se il grafico non è ancora visibile, mostralo
        if (!chartVisible) {
            showChartBlock();
        }
        
        // Se il grafico è in loading, non fare nulla (la seconda chiamata gestirà)
        if (isChartLoading) {
            console.log('📈 Grafico in loading, skip aggiornamento');
            return;
        }
        
        // Controlla se i dati sono cambiati
        if (hasReportsDataChanged(reportsData)) {
            console.log('📈 Dati report cambiati, caricamento nuovi dati grafico...');
            chartReportsData = reportsData;
            loadChartData();
        }
    }
    
    /**
     * Verifica se i dati dei report sono cambiati
     */
    function hasReportsDataChanged(newReportsData) {
        // Se il numero di report è diverso
        if (chartReportsData.length !== newReportsData.length) {
            return true;
        }
        
        // Se non ci sono report, non sono cambiati
        if (newReportsData.length === 0) {
            return false;
        }
        
        // Controlla se gli ID o le date di aggiornamento sono diverse
        for (let i = 0; i < newReportsData.length; i++) {
            const newReport = newReportsData[i];
            const oldReport = chartReportsData[i];
            
            if (!oldReport || 
                newReport.id !== oldReport.id || 
                newReport.updated_at !== oldReport.updated_at) {
                return true;
            }
        }
        
        return false;
    }
    
    /**
     * Mostra il blocco del grafico e gli elementi quando ci sono reports
     */
    function showChartBlock() {
        // Nasconde il loading e il messaggio vuoto, mostra gli elementi del report
        hideLoadingMessage();
        hideNoReportsMessage();
        showReportElements();
        chartVisible = true;
        console.log('📈 Elementi report mostrati');
    }
    
    /**
     * Mostra gli elementi del report quando ci sono dati
     */
    function showReportElements() {
        // Mostra btn-group nel card-header
        const btnGroup = document.querySelector('.card-header .btn-group');
        if (btnGroup) {
            btnGroup.style.display = '';
        }
        
        // Mostra form di rigenerazione
        const regenerateForm = document.querySelector('.card-header form');
        if (regenerateForm) {
            regenerateForm.style.display = 'inline';
        }
        
        // Mostra statisticsSection
        const statsSection = document.getElementById('statisticsSection');
        if (statsSection) {
            statsSection.style.display = 'block';
        }
        
        // Mostra chart-section
        const chartSection = document.querySelector('.chart-section');
        if (chartSection) {
            chartSection.style.display = 'block';
        }
    }
    
    /**
     * Nasconde il messaggio "nessun report disponibile"
     */
    function hideNoReportsMessage() {
        const noReportsMsg = document.getElementById('noReportsMessage');
        if (noReportsMsg) {
            noReportsMsg.style.display = 'none';
        }
    }
    
    /**
     * Nasconde gli elementi del report quando non ci sono dati
     */
    function hideChartBlock() {
        // Nasconde loading e elementi del report, mostra messaggio "nessun report"
        hideLoadingMessage();
        hideReportElements();
        showNoReportsMessage();
        chartVisible = false;
        console.log('📈 Elementi report nascosti, messaggio vuoto mostrato');
    }
    
    /**
     * Nasconde gli elementi del report quando non ci sono dati
     */
    function hideReportElements() {
        // Nasconde btn-group nel card-header
        const btnGroup = document.querySelector('.card-header .btn-group');
        if (btnGroup) {
            btnGroup.style.display = 'none';
        }
        
        // Nasconde form di rigenerazione
        const regenerateForm = document.querySelector('.card-header form');
        if (regenerateForm) {
            regenerateForm.style.display = 'none';
        }
        
        // Nasconde statisticsSection
        const statsSection = document.getElementById('statisticsSection');
        if (statsSection) {
            statsSection.style.display = 'none';
        }
        
        // Nasconde chart-section
        const chartSection = document.querySelector('.chart-section');
        if (chartSection) {
            chartSection.style.display = 'none';
        }
    }
    
    /**
     * Mostra il messaggio "nessun report disponibile"
     */
    function showNoReportsMessage() {
        const noReportsMsg = document.getElementById('noReportsMessage');
        if (noReportsMsg) {
            noReportsMsg.style.display = 'block';
        }
    }
    
    /**
     * Nasconde il messaggio di loading
     */
    function hideLoadingMessage() {
        const loadingMsg = document.getElementById('reportLoadingMessage');
        if (loadingMsg) {
            loadingMsg.style.display = 'none';
        }
    }
    
    /**
     * Mostra il messaggio di loading
     */
    function showLoadingMessage() {
        const loadingMsg = document.getElementById('reportLoadingMessage');
        if (loadingMsg) {
            loadingMsg.style.display = 'block';
        }
    }
    
    /**
     * Imposta il grafico in stato di loading
     */
    function setChartLoading(loading) {
        isChartLoading = loading;
        
        const chartLoading = document.getElementById('chartLoading');
        const noChartData = document.getElementById('noChartData');
        const chartLegend = document.getElementById('chartLegend');
        const chartArea = document.getElementById('chartArea');
        
        if (loading) {
            // Mostra loading, nascondi tutto il resto
            chartLoading.style.display = 'block';
            noChartData.style.display = 'none';
            chartLegend.style.display = 'none';
            chartArea.style.display = 'none';
            
            // Aggiungi classe CSS per identificare lo stato
            document.getElementById('chartBlock').classList.add('chart-loading');
            
            console.log('📈 Grafico in loading...');
        } else {
            // Nascondi loading
            chartLoading.style.display = 'none';
            
            // Rimuovi classe CSS
            document.getElementById('chartBlock').classList.remove('chart-loading');
            
            console.log('📈 Loading grafico completato');
        }
    }
    
    /**
     * Carica i dati del grafico tramite AJAX
     */
    function loadChartData() {
        if (isChartLoading) {
            console.log('📈 Caricamento già in corso, skip');
            return;
        }
        
        setChartLoading(true);
        
        console.log('📈 Caricamento dati grafico...');
        
        fetch(`/clients/${clientId}/chart-data`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('✅ Dati grafico ricevuti:', data);
            
            if (data.success && data.chart_data) {
                // Popola il grafico con i nuovi dati
                populateChart(data.chart_data);
            } else {
                console.error('❌ Errore nei dati del grafico:', data.error);
                showNoChartData();
            }
        })
        .catch(error => {
            console.error('❌ Errore durante caricamento dati grafico:', error);
            showNoChartData();
        })
        .finally(() => {
            setChartLoading(false);
        });
    }
    
    /**
     * Popola il grafico con i dati ricevuti
     */
    function populateChart(chartData) {
        if (chartData.length === 0) {
            showNoChartData();
            hideStatistics();
            return;
        }
        
        console.log('📊 Popolamento grafico con', chartData.length, 'elementi');
        
        // Popola le statistiche del report corrente
        populateStatistics(chartData);
        
        // Utilizza la funzione esistente per inizializzare il grafico
        initializeChart(chartData);
    }

    /**
     * Popola la sezione delle statistiche con i dati del report corrente
     */
    function populateStatistics(chartData) {
        if (!chartData || chartData.length === 0) {
            hideStatistics();
            return;
        }

        console.log('📈 Popolamento statistiche...');
        console.log('📊 Data selezionata:', selectedDate);
        console.log('📊 Dati disponibili:', chartData);

        let currentReport = null;
        
        if (selectedDate === 'current') {
            // Se sto visualizzando "current", prendo l'ultimo report disponibile
            const sortedData = [...chartData].sort((a, b) => new Date(b.date) - new Date(a.date));
            currentReport = sortedData[0];
            console.log('📊 Modalità current - preso il più recente:', currentReport);
        } else {
            // Se sto visualizzando una data specifica, cerco il report di quella data
            currentReport = chartData.find(report => {
                const reportDate = report.date; // Formato: YYYY-MM-DD
                return reportDate === selectedDate;
            });
            
            // Se non trovo il report per la data specifica, prendi il primo disponibile
            if (!currentReport && chartData.length > 0) {
                currentReport = chartData[0];
                console.log('📊 Report per data specifica non trovato, usando il primo disponibile:', currentReport);
            } else {
                console.log('📊 Trovato report per data specifica:', currentReport);
            }
        }

        if (!currentReport) {
            console.log('📊 Nessun report trovato per le statistiche');
            hideStatistics();
            return;
        }

        console.log('📊 Report selezionato per statistiche:', currentReport);

        // Popola il punteggio
        const scoreCircle = document.getElementById('currentScoreCircle');
        const scoreValue = document.getElementById('currentScoreValue');
        const score = Math.round(currentReport.score || 0);
        
        scoreValue.textContent = score + '%';
        
        // Applica lo stile conic-gradient dinamico come nel PDF
        const primaryColor = '#5D5FEF'; // var(--primary-color)
        const conicGradientStyle = `background: conic-gradient(${primaryColor} ${score}%, #ddd 0%)`;
        scoreCircle.style.cssText = conicGradientStyle;

        // Popola le statistiche
        const totalPages = currentReport.totalPages || 0;
        const highErrors = currentReport.highErrors || 0;
        const mediumErrors = currentReport.mediumErrors || 0;
        const lowErrors = currentReport.lowErrors || 0;
        const totalProblems = highErrors + mediumErrors + lowErrors;

        document.getElementById('statsPages').textContent = formatNumber(totalPages);
        document.getElementById('statsProblems').textContent = formatNumber(totalProblems);
        document.getElementById('statsHigh').textContent = formatNumber(highErrors);
        document.getElementById('statsMedium').textContent = formatNumber(mediumErrors);
        document.getElementById('statsLow').textContent = formatNumber(lowErrors);

        // Formatta la data (usa date per la data e updatedAt per l'orario)
        const reportDate = new Date(currentReport.date);
        const reportDateTime = new Date(currentReport.updatedAt);
        
        // Determina la lingua corrente
        const currentLocale = '{{ app()->getLocale() }}';
        const isEnglish = currentLocale === 'en';
        
        const dateFormatted = reportDate.toLocaleDateString(isEnglish ? 'en-US' : 'it-IT', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric'
        });
        
        // Formato orario basato sulla lingua
        const timeOptions = {
            hour: '2-digit',
            minute: '2-digit'
        };
        
        if (isEnglish) {
            timeOptions.hour12 = true; // Formato AM/PM per inglese
        } else {
            timeOptions.hour12 = false; // Formato 24h per italiano
        }
        
        const timeFormatted = reportDateTime.toLocaleTimeString(isEnglish ? 'en-US' : 'it-IT', timeOptions);

        document.getElementById('statsDate').textContent = dateFormatted;
        document.getElementById('statsDateDetail').textContent = `{{ __('clients.time.at') }} ${timeFormatted}`;

        // Mostra la sezione statistiche
        showStatistics();
    }

    /**
     * Mostra la sezione delle statistiche
     */
    function showStatistics() {
        document.getElementById('statisticsSection').style.display = 'block';
    }

    /**
     * Nasconde la sezione delle statistiche
     */
    function hideStatistics() {
        document.getElementById('statisticsSection').style.display = 'none';
    }
    
    /**
     * Mostra il messaggio di nessun dato disponibile
     */
    function showNoChartData() {
        document.getElementById('noChartData').style.display = 'block';
        document.getElementById('chartLegend').style.display = 'none';
        document.getElementById('chartArea').style.display = 'none';
        currentChartData = [];
    }

    // === FUNZIONI PER IL GRAFICO ===

    function initializeChart(chartData) {
        if (chartData.length === 0) {
            document.getElementById('noChartData').style.display = 'block';
            document.getElementById('chartLegend').style.display = 'none';
            document.getElementById('chartArea').style.display = 'none';
            currentChartData = [];
            return;
        }
        
        console.log('📊 Inizializzazione grafico custom...');
        
        // Salva i dati per il tooltip
        currentChartData = chartData;
        lastReportCheckTime = Math.floor(Date.now() / 1000);
        
        // Mostra i componenti del grafico
        document.getElementById('noChartData').style.display = 'none';
        document.getElementById('chartLegend').style.display = 'block';
        document.getElementById('chartArea').style.display = 'block';
        
        // Calcola il valore massimo degli errori per scala Y destra
        const maxErrors = Math.max(...chartData.map(item => 
            (item.highErrors || 0) + (item.mediumErrors || 0) + (item.lowErrors || 0)
        ));
        
        // Imposta l'asse Y destro dinamicamente
        setupRightAxis(maxErrors);
        
        // Crea le colonne del grafico
        const chartContent = document.getElementById('chartContent');
        
        // Rimuovi solo le colonne esistenti, preserva l'SVG
        const existingColumns = chartContent.querySelectorAll('.chart-column');
        existingColumns.forEach(col => col.remove());
        
        chartData.forEach((item, index) => {
            const column = createChartColumn(item, index, maxErrors);
            chartContent.appendChild(column);
        });
        
        // Per clienti con pochi report, aggiungi classe CSS per gestire il layout
        if (chartData.length <= 5) {
            chartContent.classList.add('few-reports');
        } else {
            chartContent.classList.remove('few-reports');
        }
        
        // Crea la linea SVG del score (con piccolo delay per assicurarsi che le colonne siano renderizzate)
        setTimeout(() => createScoreLine(chartData), 10);
        
        // Aggiungi listener per aggiornare SVG al resize/scroll
        const resizeObserver = new ResizeObserver(() => {
            setTimeout(() => createScoreLine(chartData), 100);
        });
        resizeObserver.observe(chartContent);
        
        // Crea il tooltip
        createTooltip();
        
        // Evidenzia la data selezionata
        highlightSelectedDate(chartData);
        
        console.log('✅ Grafico custom inizializzato');
    }
    
    function setupRightAxis(maxErrors) {
        const rightAxisTicks = document.getElementById('rightAxisTicks');
        rightAxisTicks.innerHTML = '';
        
        // Calcola una scala appropriata
        const step = Math.max(1, Math.ceil(maxErrors / 5));
        const maxAxisValue = Math.ceil(maxErrors / step) * step;
        
        // Crea i tick dell'asse Y destro
        for (let i = maxAxisValue; i >= 0; i -= step) {
            const tick = document.createElement('div');
            tick.className = 'y-tick';
            tick.setAttribute('data-value', i);
            tick.innerHTML = `<span class="y-tick-label">${formatNumber(i)}</span>`;
            rightAxisTicks.appendChild(tick);
        }
    }
    
    function createScoreLine(chartData) {
        const svg = document.getElementById('scoreLineSvg');
        const scorePath = document.getElementById('scoreLinePath');
        const scorePointsGroup = document.getElementById('scorePoints');
        
        if (!svg || !scorePath || !scorePointsGroup) return;
        
        // Calcola le dimensioni del contenitore
        const chartContent = document.getElementById('chartContent');
        const chartRect = chartContent.getBoundingClientRect();
        
        // Calcola la larghezza totale basandosi sul numero di colonne
        const totalColumns = chartData.length;
        const columns = chartContent.querySelectorAll('.chart-column');
        let totalWidth = chartContent.scrollWidth;
        
        if (columns.length > 0) {
            const lastColumn = columns[columns.length - 1];
            totalWidth = lastColumn.offsetLeft + lastColumn.offsetWidth;
        }
        
        // Per clienti con pochi report, assicurati che l'SVG non sia centrato ma allineato a sinistra
        const chartContentWidth = chartContent.offsetWidth;
        const minWidth = Math.max(totalWidth, chartContentWidth);
        
        // Imposta le dimensioni dell'SVG
        svg.setAttribute('width', minWidth);
        svg.setAttribute('height', chartContent.offsetHeight);
        svg.setAttribute('viewBox', `0 0 ${minWidth} ${chartContent.offsetHeight}`);
        
        console.log(`SVG dimensions: width=${totalWidth}, height=${chartContent.offsetHeight}, scrollWidth=${chartContent.scrollWidth}`);
        
        // Pulisci i punti esistenti
        scorePointsGroup.innerHTML = '';
        
        // Calcola i punti della linea
        const points = [];
        
        chartData.forEach((data, index) => {
            // Calcolo preciso basato sul layout delle colonne
            const columns = chartContent.querySelectorAll('.chart-column');
            const column = columns[index];
            
            if (column) {
                // Ottieni la posizione della colonna relativa al contenitore scrollabile
                const columnOffsetLeft = column.offsetLeft;
                const columnWidth = column.offsetWidth;
                
                // Calcola X al centro della colonna
                const x = columnOffsetLeft + (columnWidth / 2);
                const scorePercentage = data.score / 100; // Score come percentuale (0-1)
                const y = chartContent.offsetHeight * (1 - scorePercentage); // Inverti Y (0 in alto)
                
                points.push(`${x},${y}`);
                
                // Crea un punto per ogni data point
                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                circle.setAttribute('cx', x);
                circle.setAttribute('cy', y);
                circle.setAttribute('r', '4');
                circle.setAttribute('fill', 'rgba(54, 162, 235, 1)');
                circle.setAttribute('stroke', 'white');
                circle.setAttribute('stroke-width', '2');
                circle.style.filter = 'drop-shadow(0 2px 4px rgba(0,0,0,0.2))';
                
                scorePointsGroup.appendChild(circle);
            }
        });
        
        // Imposta i punti della polyline
        scorePath.setAttribute('points', points.join(' '));
        
        console.log('✅ Linea SVG del score creata con', points.length, 'punti');
        console.log('📍 Punti SVG:', points.join(' '));
    }
    
    function createChartColumn(data, index, maxErrors) {
        const column = document.createElement('div');
        column.className = 'chart-column';
        
        // Aggiungi data-id e data-updated-at come richiesto
        column.setAttribute('data-id', data.reportId || `report_${index + 1}`);
        column.setAttribute('data-updated-at', data.updatedAt || data.date);
        
        // Aggiungi anche la data per l'evidenziazione
        column.setAttribute('data-date', data.date);
        
        const columnContent = document.createElement('div');
        columnContent.className = 'column-content';
        
        // Barre stacked per gli errori
        const stackedBars = document.createElement('div');
        stackedBars.className = 'stacked-bars';
        
        const totalErrors = (data.highErrors || 0) + (data.mediumErrors || 0) + (data.lowErrors || 0);
        const maxHeight = 100; // Percentuale massima dell'altezza disponibile
        
        // Calcola le altezze delle barre in proporzione
        let errorHeight = 0;
        if (maxErrors > 0) {
            errorHeight = (totalErrors / maxErrors) * maxHeight;
        }
        
        // Calcola le altezze individuali mantenendo le proporzioni
        const highHeight = totalErrors > 0 ? (data.highErrors || 0) / totalErrors * errorHeight : 0;
        const mediumHeight = totalErrors > 0 ? (data.mediumErrors || 0) / totalErrors * errorHeight : 0;
        const lowHeight = totalErrors > 0 ? (data.lowErrors || 0) / totalErrors * errorHeight : 0;
        
        // Crea le barre (dal basso verso l'alto)
        if (data.lowErrors > 0) {
            const lowBar = document.createElement('div');
            lowBar.className = 'error-bar low-error';
            lowBar.style.height = `${lowHeight}%`;
            lowBar.setAttribute('data-value', data.lowErrors);
            stackedBars.appendChild(lowBar);
        }
        
        if (data.mediumErrors > 0) {
            const mediumBar = document.createElement('div');
            mediumBar.className = 'error-bar medium-error';
            mediumBar.style.height = `${mediumHeight}%`;
            mediumBar.setAttribute('data-value', data.mediumErrors);
            stackedBars.appendChild(mediumBar);
        }
        
        if (data.highErrors > 0) {
            const highBar = document.createElement('div');
            highBar.className = 'error-bar high-error';
            highBar.style.height = `${highHeight}%`;
            highBar.setAttribute('data-value', data.highErrors);
            stackedBars.appendChild(highBar);
        }
        
        // Container e label della data
        const columnLabelContainer = document.createElement('div');
        columnLabelContainer.className = 'column-label-container';
        
        const columnLabel = document.createElement('div');
        columnLabel.className = 'column-label';
        columnLabel.textContent = data.formattedDate;
        
        columnLabelContainer.appendChild(columnLabel);
        
        // Assembla la colonna
        columnContent.appendChild(stackedBars);
        column.appendChild(columnContent);
        column.appendChild(columnLabelContainer);
        
        // Event listeners per tooltip e interazione
        addColumnEventListeners(column, data, index);
        
        return column;
    }
    
    function addColumnEventListeners(column, data, index) {
        let tooltip = null;
        
        column.addEventListener('mouseenter', function(e) {
            tooltip = showTooltip(e, data);
        });
        
        column.addEventListener('mousemove', function(e) {
            if (tooltip) {
                updateTooltipPosition(tooltip, e);
            }
        });
        
        column.addEventListener('mouseleave', function() {
            if (tooltip) {
                hideTooltip(tooltip);
                tooltip = null;
            }
        });
        
        column.addEventListener('click', function() {
            // Aggiungi logica per click se necessario
            console.log('Column clicked:', data);
        });
    }
    
    function createTooltip() {
        // Rimuovi tooltip esistente se presente
        const existingTooltip = document.getElementById('chartTooltip');
        if (existingTooltip) {
            existingTooltip.remove();
        }
        
        const tooltip = document.createElement('div');
        tooltip.id = 'chartTooltip';
        tooltip.className = 'chart-tooltip';
        document.body.appendChild(tooltip);
    }
    
    // Funzione per formattare numeri con separatore delle migliaia
    function formatNumber(num) {
        return num.toLocaleString('it-IT');
    }

    function showTooltip(event, data) {
        const tooltip = document.getElementById('chartTooltip');
        if (!tooltip) return null;
        
        // Calcolo dei subtotali
        const highErrors = data.highErrors || 0;
        const mediumErrors = data.mediumErrors || 0;
        const lowErrors = data.lowErrors || 0;
        const negligibleErrors = data.negligibleErrors || 0;
        
        const relevantErrorsSubtotal = highErrors + mediumErrors + lowErrors;
        const totalErrors = relevantErrorsSubtotal + negligibleErrors;
        
        // Score arrotondato per il circle
        const score = Math.round(data.score || 0);
        
        tooltip.innerHTML = `
            <div class="tooltip-title">
                <div class="tooltip-title-content">
                    <div class="tooltip-score-circle">
                        <div class="score-circle-mini" style="background: conic-gradient(#5D5FEF ${score}%, #ddd 0%);">
                            <span class="score-value-mini">${score}%</span>
                        </div>
                    </div>
                    <div class="tooltip-date">${data.formattedDate}</div>
                </div>
            </div>
            <div class="tooltip-content">
                <div class="tooltip-section">
                    <strong>{{ __('clients.tooltip.relevant_errors') }}</strong> ${formatNumber(relevantErrorsSubtotal)}
                    <div class="tooltip-error-breakdown">
                        <span class="tooltip-error-item">
                            <span class="error-badge error-badge-high">{{ __('clients.severity.high') }}</span>${formatNumber(highErrors)}
                        </span>
                        <span class="tooltip-error-item">
                            <span class="error-badge error-badge-medium">{{ __('clients.severity.medium') }}</span>${formatNumber(mediumErrors)}
                        </span>
                        <span class="tooltip-error-item">
                            <span class="error-badge error-badge-low">{{ __('clients.severity.low') }}</span>${formatNumber(lowErrors)}
                        </span>
                    </div>
                </div>
                ${negligibleErrors > 0 ? `
                <div class="tooltip-section">
                    <strong>{{ __('clients.tooltip.negligible_errors') }}</strong> ${formatNumber(negligibleErrors)}
                </div>
                ` : ''}
                <div class="tooltip-section tooltip-total">
                    <strong>{{ __('clients.tooltip.total_errors') }}</strong> ${formatNumber(totalErrors)}
                </div>
                <div class="tooltip-section">
                    <strong>{{ __('clients.tooltip.pages_analyzed') }}</strong> ${formatNumber(data.totalPages || 0)}
                </div>
            </div>
        `;
        
        updateTooltipPosition(tooltip, event);
        tooltip.style.display = 'block';
        
        return tooltip;
    }
    
    function updateTooltipPosition(tooltip, event) {
        const rect = tooltip.getBoundingClientRect();
        const x = event.pageX + 10;
        const y = event.pageY - rect.height - 10;
        
        tooltip.style.left = `${x}px`;
        tooltip.style.top = `${Math.max(10, y)}px`;
    }
    
    function hideTooltip(tooltip) {
        if (tooltip) {
            tooltip.style.display = 'none';
        }
    }



    function highlightSelectedDate(chartData) {
        // Rimuovi evidenziazione precedente
        const columns = document.querySelectorAll('.chart-column');
        columns.forEach(col => {
            col.classList.remove('selected-date');
        });
        
        let targetColumn = null;
        
        if (selectedDate === 'current') {
            // Modalità current: trova la colonna più recente (ultima)
            const sortedData = [...chartData].sort((a, b) => new Date(b.date) - new Date(a.date));
            if (sortedData.length > 0) {
                const mostRecentDate = sortedData[0].date;
                targetColumn = document.querySelector(`[data-date="${mostRecentDate}"]`);
                if (targetColumn) {
                    targetColumn.classList.add('selected-date');
                }
            }
        } else {
            // Modalità data specifica: trova la colonna corrispondente alla data selezionata
            targetColumn = document.querySelector(`[data-date="${selectedDate}"]`);
            if (targetColumn) {
                targetColumn.classList.add('selected-date');
            }
        }
        
        // Scroll per mostrare la colonna selezionata/più recente
        if (targetColumn) {
            setTimeout(() => {
                targetColumn.scrollIntoView({
                    behavior: 'smooth',
                    block: 'nearest',
                    inline: 'center'
                });
            }, 100);
        }
    }







    // === UTILITY FUNCTIONS ===

    function toggleSection(sectionId) {        
        document.querySelectorAll('.section-collapsible').forEach(section => {
            if (section.id !== sectionId) {
                section.classList.remove('show');
            }
        });
        
        const section = document.getElementById(sectionId);
        if (section) {
            section.classList.toggle('show');
        }
    }

    function refreshPage() {
        window.location.reload();
    }

    // === EVENT LISTENERS ===

    document.addEventListener('DOMContentLoaded', function() {
        console.log('🎯 Inizializzazione pagina...');
        
        // Inizializza tooltip per le icone azioni automatiche
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // L'inizializzazione del grafico ora avviene dinamicamente tramite AJAX
        // quando ci sono report disponibili
        
        // Avvia il nuovo sistema di polling unificato
        startDataPolling();
        
        // Previeni invio form delete scan se lo scan specifico è pending/running
        document.querySelectorAll('.delete-scan-form').forEach(form => {
            form.addEventListener('submit', function(e) {
                const card = form.closest('[data-overall-status]');
                const cardStatus = card ? card.getAttribute('data-overall-status') : null;
                
                                        if (['pending', 'queued', 'running'].includes(cardStatus)) {
                    e.preventDefault();
                    console.log('⚠️ Invio form delete scan bloccato: scan in pending/running');
                    return false;
                }
            });
        });

        // === GESTIONE MENU CONFIGURAZIONE EXCLUDE_COMMON ===
        
        // Chiudi tutti i menu quando si clicca fuori
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.position-relative')) {
                document.querySelectorAll('.config-menu').forEach(menu => {
                    menu.style.display = 'none';
                });
            }
        });
        
        // === GESTIONE VISIBILITÀ TAB ===
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                console.log('👁️ Tab nascosto, pauso polling');
                stopDataPolling();
            } else {
                console.log('👁️ Tab visibile, riprendo polling');
                startDataPolling();
            }
        });
        
        // Cleanup quando si lascia la pagina
        window.addEventListener('beforeunload', function() {
            stopDataPolling();
        });
    });

    // Funzione per mostrare/nascondere il menu configurazione
    function toggleConfigMenu(button) {
        const menu = button.nextElementSibling;
        const isVisible = menu.style.display === 'block';
        
        // Chiudi tutti gli altri menu
        document.querySelectorAll('.config-menu').forEach(m => {
            if (m !== menu) m.style.display = 'none';
        });
        
        // Toggle del menu corrente
        menu.style.display = isVisible ? 'none' : 'block';
    }

    // Funzione per gestire il toggle exclude_common
    function toggleExcludeCommon(element) {
        const url = element.getAttribute('data-url');
        const clientId = element.getAttribute('data-client-id');
        const excludeCommon = element.getAttribute('data-exclude-common') === 'true';
        
        // Disabilita l'elemento durante la richiesta
        element.style.pointerEvents = 'none';
        element.style.opacity = '0.6';
        const originalContent = element.innerHTML;
        element.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>{{ __('clients.updating') }}';
        
        // Prepara i dati per la richiesta
        const formData = new FormData();
        formData.append('url', url);
        formData.append('exclude_common', excludeCommon);
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
        
        // Effettua la richiesta AJAX
        fetch(`/clients/${clientId}/toggle-exclude-common`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Mostra messaggio di successo
                showNotification(data.message, 'success');
                
                // Forza refresh completo dei dati per aggiornare tutte le card
                console.log('🔄 Forzando refresh dati dopo toggle exclude common...');
                forceDataRefresh();
                
                // Chiudi il menu
                document.querySelectorAll('.config-menu').forEach(menu => {
                    menu.style.display = 'none';
                });
            } else {
                showNotification('{{ __('clients.js.update_error') }} ' + (data.message || '{{ __('clients.js.unknown_error') }}'), 'error');
            }
        })
        .catch(error => {
            console.error('Errore:', error);
            showNotification('{{ __('clients.js.connection_error_update') }}', 'error');
        })
        .finally(() => {
            // Riabilita l'elemento
            element.style.pointerEvents = '';
            element.style.opacity = '';
            element.innerHTML = originalContent;
        });
    }

    // Funzione per mostrare notifiche
    function showNotification(message, type = 'info') {
        // Crea o trova il container delle notifiche
        let container = document.querySelector('#notification-container');
        if (!container) {
            container = document.createElement('div');
            container.id = 'notification-container';
            container.style.position = 'fixed';
            container.style.top = '20px';
            container.style.right = '20px';
            container.style.zIndex = '9999';
            document.body.appendChild(container);
        }
        
        // Crea la notifica
        const notification = document.createElement('div');
        notification.className = `alert alert-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} alert-dismissible fade show`;
        notification.style.minWidth = '300px';
        notification.innerHTML = `${message}`;
        
        container.appendChild(notification);
        
        // Rimuovi automaticamente dopo 5 secondi
        setTimeout(() => {
            if (notification.parentNode) {
                notification.remove();
            }
        }, 5000);
    }

    // === FUNZIONI PER CREAZIONE SCANSIONI ASINCRONE ===

    let scanCreationJobId = null;
    let scanCreationMonitoringTimer = null;

    function startScanCreation() {
        const button = document.getElementById('scheduleAllScansBtn');
        const progressContainer = document.getElementById('scanCreationProgress');
        
        // Disabilita il pulsante e mostra progress (senza nascondere il pulsante)
        button.disabled = true;
        progressContainer.classList.remove('d-none');
        
        console.log('🚀 Avvio creazione scansioni...');
        
        // Chiama l'endpoint per avviare il job
        fetch(`/clients/${clientId}/schedule-all-scans`, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                scanCreationJobId = data.job_id;
                console.log('✅ Job di creazione scansioni avviato', data);
                showNotification(data.message, 'success');
                
                // Avvia il monitoraggio del progresso con un piccolo delay
                // per dare tempo al job di essere processato
                setTimeout(() => {
                    startScanCreationMonitoring();
                }, 100);
            } else {
                console.error('❌ Errore nell\'avvio del job:', data.error);
                showNotification(data.error || '{{ __('clients.js.scan_creation_error') }}', 'error');
                resetScanCreationUI();
            }
        })
        .catch(error => {
            console.error('❌ Errore di rete:', error);
            showNotification('{{ __('clients.js.connection_error') }}', 'error');
            resetScanCreationUI();
        });
    }

    function startScanCreationMonitoring() {
        if (scanCreationMonitoringTimer) {
            clearInterval(scanCreationMonitoringTimer);
        }
        
        console.log('🔄 Avvio monitoraggio creazione scansioni...');
        
        // Polling più frequente all'inizio, poi rallenta
        let pollInterval = 300; // Inizia con 300ms dopo il delay iniziale
        let maxInterval = 2000; // Massimo 2 secondi
        let attemptCount = 0;
        let maxAttempts = 120; // Massimo 2 minuti di tentativi
        let initialPhase = true; // Flag per gestire la fase iniziale
        
        function poll() {
            attemptCount++;
            console.log(`📊 Polling attempt ${attemptCount}/${maxAttempts} (interval: ${pollInterval}ms)`);
            
            checkScanCreationProgress().then((result) => {
                if (result.shouldContinue && attemptCount < maxAttempts) {
                    // Se abbiamo ricevuto progress, non siamo più in fase iniziale
                    if (result.hasProgress) {
                        initialPhase = false;
                    }
                    
                    // Aumenta gradualmente l'intervallo solo dopo i primi 10 tentativi
                    if (attemptCount > 10 && !initialPhase) {
                        pollInterval = Math.min(pollInterval * 1.1, maxInterval);
                    }
                    scanCreationMonitoringTimer = setTimeout(poll, pollInterval);
                } else if (attemptCount >= maxAttempts) {
                    console.warn('⏰ Polling timeout reached, stopping monitoring');
                    completeScanCreation();
                }
            }).catch(error => {
                // Durante la fase iniziale, i 404 sono normali
                if (initialPhase && attemptCount <= 10) {
                    console.log(`⏳ Waiting for job to start (attempt ${attemptCount}/10)...`);
                } else {
                    console.error('❌ Polling error:', error);
                }
                
                if (attemptCount < maxAttempts) {
                    scanCreationMonitoringTimer = setTimeout(poll, pollInterval);
                }
            });
        }
        
        // Primo check immediato
        poll();
    }

    function checkScanCreationProgress() {
        if (!scanCreationJobId) return Promise.resolve({shouldContinue: false, hasProgress: false});
        
        return fetch(`/clients/${clientId}/check-scan-creation-progress?job_id=${encodeURIComponent(scanCreationJobId)}`, {
            method: 'GET',
            credentials: 'same-origin',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
            .then(response => {
                // Controlla se c'è un redirect di autenticazione
                if (response.redirected && response.url.includes('/login')) {
                    console.error('❌ Sessione scaduta - redirect a login');
                    throw new Error('Authentication required');
                }
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    updateScanCreationProgress(data.percentage, data.message);
                    
                    if (data.completed) {
                        console.log('✅ Creazione scansioni completata');
                        completeScanCreation();
                        return {shouldContinue: false, hasProgress: true}; // Stop polling
                    }
                    return {shouldContinue: true, hasProgress: true}; // Continue polling
                } else {
                    console.warn('⚠️ Progresso non disponibile:', data.error);
                    if (data.error === 'Job progress not found') {
                        // Il job potrebbe essere completato o fallito
                        console.log('🔄 Job progress not found - potrebbero esserci scansioni recenti');
                        completeScanCreation();
                        return {shouldContinue: false, hasProgress: false}; // Stop polling
                    }
                    return {shouldContinue: true, hasProgress: false}; // Continue polling for other errors
                }
            })
            .catch(error => {
                // Re-throw per permettere al chiamante di gestire l'errore
                throw error;
            });
    }

    function updateScanCreationProgress(percentage, message) {
        const progressBar = document.getElementById('scanCreationProgressBar');
        const progressMessage = document.getElementById('scanCreationProgressMessage');
        
        progressBar.style.width = percentage + '%';
        progressBar.setAttribute('aria-valuenow', percentage);
        // Rimuovo il testo dalla progress bar dato che ora è alta solo 8px
        progressBar.textContent = '';
        progressMessage.textContent = message;
        
        // Aggiungi timestamp al messaggio per mostrare che sta aggiornando
        const timestamp = new Date().toLocaleTimeString();
        console.log(`📊 Progresso creazione: ${percentage}% - ${message} [${timestamp}]`);
        
        // Se il progresso è > 0, significa che sta funzionando
        if (percentage > 0 && percentage < 100) {
            progressMessage.className = 'text-success';
        } else if (percentage >= 100) {
            progressMessage.className = 'text-success fw-bold';
        }
    }

    function completeScanCreation() {
        stopScanCreationMonitoring();
        
        // Riabilita il pulsante e nasconde progress
        resetScanCreationUI();
        
        showNotification('{{ __('clients.scan_creation_completed') }}', 'success');
        
        // Forza refresh immediato dei dati con polling accelerato per mostrare le nuove scansioni
        console.log('🔄 Forzando refresh dati con polling accelerato dopo completamento creazione scansioni...');
        forceDataRefreshWithAcceleration();
        
        // Rimuovo il suggerimento di ricarica manuale dato che ora si aggiorna automaticamente
        setTimeout(() => {
            console.log('✅ Creazione scansioni completata');
        }, 1000);
    }

    function stopScanCreationMonitoring() {
        if (scanCreationMonitoringTimer) {
            clearInterval(scanCreationMonitoringTimer);
            scanCreationMonitoringTimer = null;
        }
        scanCreationJobId = null;
        console.log('⏹️ Fermato monitoraggio creazione scansioni');
    }

    function resetScanCreationUI() {
        const button = document.getElementById('scheduleAllScansBtn');
        const progressContainer = document.getElementById('scanCreationProgress');
        
        button.disabled = false;
        progressContainer.classList.add('d-none');
        
        // Reset progress
        updateScanCreationProgress(0, '{{ __('clients.waiting') }}');
    }

    // === FUNZIONI PER SCANSIONI SINGOLE ===

    function startSingleScan(url, action, beforeScanAction, buttonElement = null, startImmediately = '1') {
        console.log('🚀 Avvio scansione singola...', { url, action, beforeScanAction, startImmediately });
        
        // Se non è stato passato l'elemento del pulsante, cercalo
        if (!buttonElement) {
            console.log('⚠️ Elemento pulsante non passato, cercando...');
            // Trova il pulsante basandosi sull'URL nella card corrispondente
            const cards = document.querySelectorAll('.grouped-card');
            for (const card of cards) {
                const cardUrl = card.querySelector('[data-dynamic-field="url"]')?.textContent?.trim();
                if (cardUrl && cardUrl.includes(url)) {
                    buttonElement = card.querySelector('.single-scan-btn');
                    console.log('✅ Pulsante trovato:', buttonElement);
                    break;
                }
            }
        } else {
            console.log('✅ Elemento pulsante passato correttamente:', buttonElement);
        }
        

        
        // Prepara i dati per la richiesta
        const data = {
            url: url,
            action: action || null,
            before_scan_action: beforeScanAction || null,
            start_immediately: startImmediately
        };
        
        // Chiama l'endpoint per avviare il job
        fetch(`/clients/${clientId}/schedule-single-scan`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('✅ Scansione singola avviata', data);
                
                // Il messaggio corretto viene già fornito dal controller
                showNotification(data.message, 'success');
                
                // Forza refresh immediato dei dati con polling accelerato per mostrare la nuova scansione
                console.log('🔄 Forzando refresh dati con polling accelerato dopo avvio scansione singola...');
                forceDataRefreshWithAcceleration();
            } else {
                console.error('❌ Errore nell\'avvio della scansione singola:', data.error);
                showNotification(data.error || '{{ __('clients.js.scan_start_error') }}', 'error');
                

            }
        })
        .catch(error => {
            console.error('❌ Errore di rete nella scansione singola:', error);
            showNotification('{{ __('clients.js.connection_error') }}', 'error');
            


        });
    }

    function handleAddUrlSubmit(event) {
        event.preventDefault();
        
        const form = document.getElementById('addUrlForm');
        const formData = new FormData(form);
        
        const url = formData.get('url');
        const action = formData.get('action');
        const beforeScanAction = formData.get('before_scan_action');
        const startImmediately = formData.get('start_immediately');
        
        if (!url) {
            showNotification('{{ __('clients.url_not_specified') }}', 'error');
            return false;
        }
        
        console.log('🚀 Avvio scansione per nuova URL...', { url, action, beforeScanAction, startImmediately });
        
        // Avvia la scansione singola
        startSingleScan(url, action, beforeScanAction, null, startImmediately);
        
        // Chiudi il form e resetta i campi solo se start_immediately è 1 (avvio immediato)
        if (startImmediately === '1') {
            toggleSection('addUrlSection');
        }
        
        form.reset();
        // Ripristina il valore di default per start_immediately
        document.getElementById('start_immediately').value = '1';
        
        return false;
    }

    function handleAddUrlPending(event) {
        event.preventDefault();
        
        // Imposta start_immediately a 0 per aggiungere in attesa
        document.getElementById('start_immediately').value = '0';
        
        // Chiama la funzione normale di submit
        handleAddUrlSubmit(event);
        
        return false;
    }
</script>
@endsection