@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
<style>
    [id$="CustomDateInputs"],
    #customDateInputs,
    #convVolumeCustomDateInputs {
        display: none !important;
    }
    [id$="CustomDateInputs"].show,
    #customDateInputs.show,
    #convVolumeCustomDateInputs.show {
        display: flex !important;
    }

    #applyCustomRange, #applyCategoriesCustomRange, #applyConvVolumeCustomRange {
        min-width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
    }

    #dateRangeSelector, #categoriesDateRangeSelector, #convVolumeDateRangeSelector {
        font-size: 13px;
    }
</style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard - Conversa'])
    <div class="container-fluid py-4">
        <x-dashboard-kpis />

        @php
            $widgetService = app(\App\Services\WidgetService::class);
            $enabledWidgets = $widgetService->getEnabledWidgets();
        @endphp

        <div class="row mt-4">
            @foreach($enabledWidgets as $key => $widget)
                <div class="{{ \App\Services\WidgetService::SIZE_MAP[$widget['size']] ?? 'col-lg-6' }} mb-4">
                    @include('components.widgets.' . str_replace('_', '-', $key), ['widget' => $widget])
                </div>
            @endforeach
        </div>

        @include('layouts.footers.auth.footer')
    </div>
@endsection

@push('js')
    @if(collect($enabledWidgets)->contains('type', 'chart'))
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    @endif
    <script>
        // Shared helper function for authenticated API requests (used by all widgets)
        window.dashboardFetchWithAuth = async function(url, options = {}) {
            const defaultOptions = {
                credentials: 'same-origin',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            };

            const mergedOptions = {
                ...defaultOptions,
                ...options,
                headers: {
                    ...defaultOptions.headers,
                    ...options.headers
                }
            };

            return await fetch(url, mergedOptions);
        };

        // Dashboard KPI data loading
        document.addEventListener('DOMContentLoaded', function() {
            updateClientIndicator();
            loadDashboardData();
        });

        // Load main dashboard KPI statistics
        async function loadDashboardData() {
            try {
                @if(module_enabled('appointments'))
                const appointmentResponse = await window.dashboardFetchWithAuth('/api/v1/appointments/stats');
                const appointmentData = await appointmentResponse.json();

                if (appointmentData.success) {
                    updateAppointmentStats(appointmentData.stats);
                }
                @endif

                const conversationResponse = await window.dashboardFetchWithAuth('/api/v1/dashboard/overview');
                const conversationData = await conversationResponse.json();

                if (conversationData.success) {
                    updateCallsStats(conversationData.data.system_stats);
                }
            } catch (error) {
                console.error('Error loading dashboard data:', error);
            }
        }

        function updateAppointmentStats(stats) {
            if (!stats) return;
            const mappings = {
                'appointments-today': stats.today,
                'appointments-today-confirmed': stats.confirmed,
                'appointments-confirmed': stats.confirmed,
                'appointments-upcoming': stats.confirmed,
                'appointments-pending': stats.pending
            };
            Object.entries(mappings).forEach(([id, value]) => {
                const el = document.getElementById(id);
                if (el) el.textContent = value || 0;
            });
        }

        function updateCallsStats(systemStats) {
            if (!systemStats) return;
            const missedCallsEl = document.getElementById('missed-calls');
            if (missedCallsEl) {
                const total = systemStats.total_conversations || 0;
                const successful = systemStats.successful_conversations || 0;
                const missed = total - successful;
                missedCallsEl.textContent = missed >= 0 ? missed : 0;
            }
            const totalCallsTodayEl = document.getElementById('total-calls-today');
            if (totalCallsTodayEl) {
                totalCallsTodayEl.textContent = systemStats.total_conversations || 0;
            }
        }

        function updateClientIndicator() {
            const selectedClientId = typeof getSelectedClientId === 'function' ? getSelectedClientId() : '';
            const indicator = document.getElementById('client-indicator');
            const clientNameSpan = document.getElementById('selected-client-name');

            if (selectedClientId) {
                const clientSelector = document.getElementById('client-selector');
                if (clientSelector) {
                    const selectedOption = clientSelector.querySelector(`option[value="${selectedClientId}"]`);
                    if (selectedOption) {
                        clientNameSpan.textContent = selectedOption.textContent;
                        indicator.style.display = 'block';
                    }
                }
            }
        }

        document.addEventListener('clientChanged', function(event) {
            updateClientIndicator();
        });
    </script>
@endpush