@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="page-header d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Enterprise DECT Monitoring</h1>
            <p class="text-muted mb-0">Advanced real-time analytics and performance monitoring</p>
        </div>
        <div class="d-flex gap-2">
            <button onclick="exportReport()" class="btn btn-outline-success btn-sm">
                <i class="fas fa-download"></i> Export Report
            </button>
            <button onclick="location.reload()" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-sync"></i> Refresh
            </button>
            <a href="{{ route('dect.dashboard.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Back to Dashboard
            </a>
        </div>
    </div>

    <!-- Automated Alerts -->
    @if(count($automatedAlerts) > 0)
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <div class="d-flex align-items-center">
                    <i class="fas fa-bell me-2"></i>
                    <div class="flex-grow-1">
                        <strong>Automated Alerts:</strong>
                        @foreach($automatedAlerts as $alert)
                        <div class="mt-1">
                            <i class="fas {{ $alert['icon'] }} me-1"></i>
                            {{ $alert['message'] }}
                        </div>
                        @endforeach
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
    </div>
    @endif

    <!-- Enhanced KPI Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 rounded p-3">
                                <i class="fas fa-network-wired text-primary fs-4"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">System Uptime</h6>
                            <h4 class="mb-1">{{ $uptimePercentage }}%</h4>
                            <small class="badge {{ $uptimePercentage >= 99 ? 'bg-success' : ($uptimePercentage >= 95 ? 'bg-warning' : 'bg-danger') }}">
                                {{ $uptimePercentage >= 99 ? 'Excellent' : ($uptimePercentage >= 95 ? 'Good' : 'Needs Attention') }}
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded p-3">
                                <i class="fas fa-wifi text-success fs-4"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Device Registration</h6>
                            <h4 class="mb-1">{{ $registrationRate }}%</h4>
                            <small class="badge bg-success">{{ $registeredHandsets }}/{{ $totalHandsets }} devices</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info bg-opacity-10 rounded p-3">
                                <i class="fas fa-phone-alt text-info fs-4"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Call Success Rate</h6>
                            <h4 class="mb-1">{{ $callSuccessRate }}%</h4>
                            <small class="badge bg-info">{{ $callsToday }} calls today</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-lg-6 col-md-6 mb-3">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 rounded p-3">
                                <i class="fas fa-exclamation-triangle text-warning fs-4"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Active Issues</h6>
                            <h4 class="mb-1">{{ $totalAlerts }}</h4>
                            <small class="badge bg-danger">{{ $criticalAlerts }} critical</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Real-time Call Monitoring -->
    <div class="row mb-4">
        <div class="col-lg-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-phone-volume me-2"></i>Active Calls
                        </h5>
                        <span class="badge bg-success">{{ $activeCalls }} active</span>
                    </div>
                </div>
                <div class="card-body">
                    @if($activeCallsList->count() > 0)
                        @foreach($activeCallsList as $call)
                        <div class="d-flex justify-content-between align-items-center p-2 border-bottom">
                            <div>
                                <strong>{{ $call->handset->name ?? 'Unknown' }}</strong>
                                <div class="small text-muted">{{ $call->call_direction }} to {{ $call->remote_number }}</div>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-success">{{ $call->call_status }}</span>
                                <div class="small text-muted">{{ $call->start_time->diffForHumans() }}</div>
                            </div>
                        </div>
                        @endforeach
                    @else
                        <div class="text-center py-3">
                            <i class="fas fa-phone-slash fa-2x text-muted mb-2"></i>
                            <p class="text-muted mb-0">No active calls</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-lg-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-line me-2"></i>Call Analytics
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-4">
                            <h4 class="text-primary mb-1">{{ $callsToday }}</h4>
                            <small class="text-muted">Today</small>
                        </div>
                        <div class="col-4">
                            <h4 class="text-info mb-1">{{ $callsThisWeek }}</h4>
                            <small class="text-muted">This Week</small>
                        </div>
                        <div class="col-4">
                            <h4 class="text-warning mb-1">{{ $missedCalls }}</h4>
                            <small class="text-muted">Missed</small>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-6">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="small">Avg Duration</span>
                                <strong class="small">{{ gmdate('i:s', $avgCallDuration ?? 0) }}</strong>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="small">Avg Quality</span>
                                <strong class="small">{{ round($avgCallQuality ?? 0, 1) }}/5.0</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row mb-4">
        <div class="col-lg-8 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">24-Hour Activity Trend</h5>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-primary active" onclick="showTrend('events')">Events</button>
                            <button type="button" class="btn btn-outline-primary" onclick="showTrend('calls')">Calls</button>
                            <button type="button" class="btn btn-outline-primary" onclick="showTrend('alerts')">Alerts</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <canvas id="trendChart" style="max-height: 300px;"></canvas>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">Device Health</h5>
                </div>
                <div class="card-body">
                    <canvas id="healthChart" style="max-height: 200px;"></canvas>
                    <div class="mt-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="badge bg-success">Excellent</span>
                            <span class="small">{{ $deviceHealth['excellent'] }} devices</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="badge bg-primary">Good</span>
                            <span class="small">{{ $deviceHealth['good'] }} devices</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="badge bg-warning">Fair</span>
                            <span class="small">{{ $deviceHealth['fair'] }} devices</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="badge bg-danger">Poor</span>
                            <span class="small">{{ $deviceHealth['poor'] }} devices</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Advanced Metrics -->
    <div class="row mb-4">
        <div class="col-lg-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Capacity Planning</h5>
                        <span class="badge bg-secondary">{{ $utilization }}% Utilized</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="small">Current Utilization</span>
                            <strong class="small">{{ $totalHandsets }}/{{ $totalCapacity }} handsets</strong>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar {{ $utilization > 80 ? 'bg-danger' : ($utilization > 60 ? 'bg-warning' : 'bg-success') }}" 
                                 style="width: {{ $utilization }}%"></div>
                        </div>
                        <small class="text-muted">{{ $utilization > 80 ? 'Capacity exceeded - consider expansion' : ($utilization > 60 ? 'Moderate utilization' : 'Healthy capacity') }}</small>
                    </div>
                    
                    <div class="row text-center">
                        <div class="col-6">
                            <h4 class="text-primary mb-1">{{ $totalBaseStations }}</h4>
                            <small class="text-muted">Base Stations</small>
                        </div>
                        <div class="col-6">
                            <h4 class="text-info mb-1">{{ $totalHandsets }}</h4>
                            <small class="text-muted">Total Handsets</small>
                        </div>
                    </div>
                    
                    @if($utilization > 60)
                    <div class="alert alert-warning alert-sm mt-3">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Capacity Planning:</strong> {{ $utilization > 80 ? 'Immediate expansion required' : 'Plan for expansion within 3 months' }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-lg-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Performance Metrics</h5>
                        <span class="badge bg-success">Live</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-6">
                            <div class="mb-2">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small">Battery Level</span>
                                    <strong class="small">{{ round($avgBatteryLevel ?? 0, 1) }}%</strong>
                                </div>
                                <div class="progress" style="height: 6px;">
                                    <div class="progress-bar {{ ($avgBatteryLevel ?? 0) > 50 ? 'bg-success' : 'bg-warning' }}" 
                                         style="width: {{ $avgBatteryLevel ?? 0 }}%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-2">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small">Signal Strength</span>
                                    <strong class="small">{{ round($avgSignalStrength ?? 0, 1) }}%</strong>
                                </div>
                                <div class="progress" style="height: 6px;">
                                    <div class="progress-bar {{ ($avgSignalStrength ?? 0) > 70 ? 'bg-success' : 'bg-warning' }}" 
                                         style="width: {{ $avgSignalStrength ?? 0 }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row text-center">
                        <div class="col-4">
                            <h4 class="text-success mb-1">{{ $events24h }}</h4>
                            <small class="text-muted">Events/24h</small>
                        </div>
                        <div class="col-4">
                            <h4 class="text-info mb-1">{{ $calls24h }}</h4>
                            <small class="text-muted">Calls/24h</small>
                        </div>
                        <div class="col-4">
                            <h4 class="text-warning mb-1">{{ $alerts24h }}</h4>
                            <small class="text-muted">Alerts/24h</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Events Table -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">System Events & Activities</h5>
                        <div class="d-flex gap-2">
                            <select class="form-select form-select-sm" style="width: 150px;" onchange="filterEvents(this.value)">
                                <option value="all">All Events</option>
                                <option value="critical">Critical Only</option>
                                <option value="calls">Call Events</option>
                                <option value="system">System Events</option>
                            </select>
                            <span class="badge bg-secondary">{{ $recentEvents->count() }} events</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if($recentEvents->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover" id="eventsTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>Time</th>
                                        <th>Severity</th>
                                        <th>Event Type</th>
                                        <th>System</th>
                                        <th>Base Station</th>
                                        <th>Handset</th>
                                        <th>Message</th>
                                        <th>Duration</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recentEvents->take(15) as $event)
                                    <tr class="event-row" data-type="{{ $event->event_type ?? 'system' }}">
                                        <td>
                                            <div class="small">{{ $event->created_at->format('H:i:s') }}</div>
                                            <div class="text-muted" style="font-size: 0.75rem;">{{ $event->created_at->diffForHumans() }}</div>
                                        </td>
                                        <td>
                                            @if(str_contains($event->message ?? '', 'critical') || str_contains($event->event_type ?? '', 'critical'))
                                                <span class="badge bg-danger">Critical</span>
                                            @elseif(str_contains($event->message ?? '', 'warning') || str_contains($event->event_type ?? '', 'warning'))
                                                <span class="badge bg-warning">Warning</span>
                                            @elseif(str_contains($event->event_type ?? '', 'call'))
                                                <span class="badge bg-info">Info</span>
                                            @else
                                                <span class="badge bg-secondary">System</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-primary">{{ $event->event_type ?? 'System' }}</span>
                                        </td>
                                        <td class="small">{{ $event->dectSystem->name ?? 'N/A' }}</td>
                                        <td class="small">{{ $event->dectBaseStation->name ?? 'N/A' }}</td>
                                        <td class="small">{{ $event->dectHandset->name ?? 'N/A' }}</td>
                                        <td class="small">{{ $event->message ?? 'No message' }}</td>
                                        <td>
                                            <small class="text-muted">{{ $event->created_at->diffInSeconds(now()) }}s ago</small>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-history fa-2x text-muted mb-3"></i>
                            <p class="text-muted mb-0">No events recorded yet</p>
                            <small class="text-muted">Events will appear here as DECT devices are used</small>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
let trendChart, healthChart;

document.addEventListener('DOMContentLoaded', function() {
    initializeCharts();
    startRealTimeUpdates();
});

function initializeCharts() {
    // Trend Chart
    const trendCtx = document.getElementById('trendChart').getContext('2d');
    trendChart = new Chart(trendCtx, {
        type: 'line',
        data: {
            labels: {!! $hourlyMetrics->pluck('hour') !!},
            datasets: [{
                label: 'Events',
                data: {!! $hourlyMetrics->pluck('events') !!},
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });

    // Health Distribution Chart
    const healthCtx = document.getElementById('healthChart').getContext('2d');
    healthChart = new Chart(healthCtx, {
        type: 'doughnut',
        data: {
            labels: ['Excellent', 'Good', 'Fair', 'Poor'],
            datasets: [{
                data: [{{ $deviceHealth['excellent'] }}, {{ $deviceHealth['good'] }}, {{ $deviceHealth['fair'] }}, {{ $deviceHealth['poor'] }}],
                backgroundColor: [
                    'rgb(34, 197, 94)',
                    'rgb(59, 130, 246)',
                    'rgb(251, 191, 36)',
                    'rgb(239, 68, 68)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
}

function showTrend(type) {
    const buttons = document.querySelectorAll('.btn-group .btn');
    buttons.forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');
    
    const data = type === 'events' ? {!! $hourlyMetrics->pluck('events') !!} :
                  type === 'calls' ? {!! $hourlyMetrics->pluck('calls') !!} :
                  {!! $hourlyMetrics->pluck('alerts') !!};
    
    const colors = type === 'events' ? 'rgb(59, 130, 246)' :
                   type === 'calls' ? 'rgb(34, 197, 94)' :
                   'rgb(251, 191, 36)';
    
    trendChart.data.datasets[0].data = data;
    trendChart.data.datasets[0].borderColor = colors;
    trendChart.data.datasets[0].backgroundColor = colors.replace('rgb', 'rgba').replace(')', ', 0.1)');
    trendChart.update();
}

function filterEvents(type) {
    const rows = document.querySelectorAll('.event-row');
    rows.forEach(row => {
        if (type === 'all') {
            row.style.display = '';
        } else if (type === 'critical') {
            row.style.display = row.textContent.toLowerCase().includes('critical') ? '' : 'none';
        } else if (type === 'calls') {
            row.style.display = row.dataset.type.includes('call') ? '' : 'none';
        } else if (type === 'system') {
            row.style.display = !row.dataset.type.includes('call') ? '' : 'none';
        }
    });
}

function exportReport() {
    const data = {
        timestamp: new Date().toISOString(),
        uptime: '{{ $uptimePercentage }}%',
        registrationRate: '{{ $registrationRate }}%',
        callSuccessRate: '{{ $callSuccessRate }}%',
        activeCalls: '{{ $activeCalls }}',
        totalAlerts: '{{ $totalAlerts }}',
        utilization: '{{ $utilization }}%',
        callsToday: '{{ $callsToday }}',
        callsThisWeek: '{{ $callsThisWeek }}',
        missedCalls: '{{ $missedCalls }}',
        avgCallDuration: '{{ gmdate('i:s', $avgCallDuration ?? 0) }}',
        avgCallQuality: '{{ round($avgCallQuality ?? 0, 1) }}',
        deviceHealth: {
            excellent: '{{ $deviceHealth['excellent'] }}',
            good: '{{ $deviceHealth['good'] }}',
            fair: '{{ $deviceHealth['fair'] }}',
            poor: '{{ $deviceHealth['poor'] }}'
        },
        capacity: {
            totalHandsets: '{{ $totalHandsets }}',
            totalCapacity: '{{ $totalCapacity }}',
            utilization: '{{ $utilization }}%'
        }
    };
    
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'dect-enterprise-report-' + new Date().toISOString().split('T')[0] + '.json';
    a.click();
    window.URL.revokeObjectURL(url);
}

function startRealTimeUpdates() {
    // Auto-refresh every 30 seconds
    setInterval(function() {
        location.reload();
    }, 30000);
}
</script>
@endsection