@extends('layout')

@section('title', __('store.network_status_title'))

@section('content')
<div class="container py-5">
    <div class="row">
        <div class="col-md-12">
            <x-clientarea.page-header
                icon="fas fa-network-wired"
                :title="__('store.network_status_title')"
                :subtitle="__('store.network_status_subtitle')"
            />

            {{-- Overall System Status Banner --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body text-center py-4">
                    @if($overallStatus === 'operational')
                        <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                        <h3 class="text-success">{{ __('store.network_status_all_operational') }}</h3>
                        <p class="text-muted mb-0">{{ __('store.network_status_all_operational_desc') }}</p>
                    @elseif($overallStatus === 'minor')
                        <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                        <h3 class="text-warning">{{ __('store.network_status_partial_outage') }}</h3>
                        <p class="text-muted mb-0">{{ __('store.network_status_partial_outage_desc') }}</p>
                    @elseif($overallStatus === 'major')
                        <i class="fas fa-exclamation-circle fa-3x text-danger mb-3"></i>
                        <h3 class="text-danger">{{ __('store.network_status_major_outage') }}</h3>
                        <p class="text-muted mb-0">{{ __('store.network_status_major_outage_desc') }}</p>
                    @elseif($overallStatus === 'critical')
                        <i class="fas fa-times-circle fa-3x text-danger mb-3"></i>
                        <h3 class="text-danger">{{ __('store.network_status_critical_issues') }}</h3>
                        <p class="text-muted mb-0">{{ __('store.network_status_critical_issues_desc') }}</p>
                    @endif
                </div>
            </div>

            {{-- Incident Stats --}}
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center py-3">
                            <h4 class="mb-1 {{ $incidentStats['active'] > 0 ? 'text-warning' : 'text-success' }}">{{ $incidentStats['active'] }}</h4>
                            <small class="text-muted">{{ __('store.network_status_active_incidents') }}</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center py-3">
                            <h4 class="mb-1 text-info">{{ $incidentStats['scheduled'] }}</h4>
                            <small class="text-muted">{{ __('store.network_status_scheduled_maintenance') }}</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center py-3">
                            <h4 class="mb-1">{{ $incidentStats['resolved_30d'] }}</h4>
                            <small class="text-muted">{{ __('store.network_status_resolved_history') }}</small>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Active Incidents with Timeline --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2 text-warning"></i>{{ __('store.network_status_active_incidents') }}
                        @if($activeIncidents->count() > 0)
                            <span class="badge bg-warning text-dark ms-2">{{ $activeIncidents->count() }}</span>
                        @endif
                    </h5>
                </div>
                <div class="card-body">
                    @if($activeIncidents->count() > 0)
                        @foreach($activeIncidents as $incident)
                            <div class="border-start border-3 ps-3 mb-4 @if(!$loop->last) pb-3 border-bottom @endif"
                                 style="border-left-color: {{ $incident->impact === 'critical' ? '#dc3545' : ($incident->impact === 'major' ? '#dc3545' : ($incident->impact === 'minor' ? '#ffc107' : '#6c757d')) }} !important;">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h6 class="mb-0">{{ $incident->title }}</h6>
                                    <div>
                                        @php
                                            $statusBadge = match($incident->status) {
                                                'reported' => 'warning',
                                                'investigating' => 'info',
                                                'in_progress' => 'primary',
                                                'resolved' => 'success',
                                                'scheduled' => 'secondary',
                                                default => 'secondary'
                                            };
                                            $statusLabel = match($incident->status) {
                                                'reported' => __('store.network_status_reported'),
                                                'investigating' => __('store.network_status_investigating'),
                                                'in_progress' => __('store.network_status_in_progress'),
                                                'resolved' => __('store.network_status_resolved'),
                                                'scheduled' => __('store.network_status_scheduled'),
                                                default => $incident->status
                                            };
                                            $impactBadge = match($incident->impact) {
                                                'none' => 'secondary',
                                                'minor' => 'warning',
                                                'major' => 'danger',
                                                'critical' => 'dark',
                                                default => 'secondary'
                                            };
                                            $impactLabel = match($incident->impact) {
                                                'none' => __('store.network_status_impact_none'),
                                                'minor' => __('store.network_status_impact_minor'),
                                                'major' => __('store.network_status_impact_major'),
                                                'critical' => __('store.network_status_impact_critical'),
                                                default => $incident->impact
                                            };
                                            $typeLabel = match($incident->type) {
                                                'incident' => __('store.network_status_type_incident'),
                                                'maintenance' => __('store.network_status_type_maintenance'),
                                                'degraded_performance' => __('store.network_status_type_degraded'),
                                                'partial_outage' => __('store.network_status_type_partial'),
                                                'major_outage' => __('store.network_status_type_major'),
                                                default => $incident->type
                                            };
                                        @endphp
                                        <span class="badge bg-{{ $statusBadge }} me-1">{{ $statusLabel }}</span>
                                        <span class="badge bg-{{ $impactBadge }}">{{ $impactLabel }}</span>
                                    </div>
                                </div>

                                @if($incident->description)
                                    <p class="text-muted mb-2">{{ $incident->description }}</p>
                                @endif

                                {{-- Timeline Progress --}}
                                <div class="mb-3">
                                    <div class="d-flex align-items-center small">
                                        @php
                                            $timelineSteps = ['reported', 'investigating', 'in_progress', 'resolved'];
                                            $currentIndex = array_search($incident->status, $timelineSteps);
                                            if ($currentIndex === false) $currentIndex = -1;
                                        @endphp
                                        @foreach($timelineSteps as $stepIndex => $step)
                                            @php
                                                $isCompleted = $stepIndex <= $currentIndex;
                                                $isCurrent = $stepIndex === $currentIndex;
                                                $stepLabel = match($step) {
                                                    'reported' => __('store.network_status_reported'),
                                                    'investigating' => __('store.network_status_investigating'),
                                                    'in_progress' => __('store.network_status_in_progress'),
                                                    'resolved' => __('store.network_status_resolved'),
                                                    default => $step
                                                };
                                            @endphp
                                            <div class="d-flex align-items-center">
                                                <span class="rounded-circle d-inline-flex align-items-center justify-content-center {{ $isCompleted ? ($isCurrent ? 'bg-primary' : 'bg-success') : 'bg-secondary bg-opacity-25' }}"
                                                      style="width: 24px; height: 24px;">
                                                    @if($isCompleted && !$isCurrent)
                                                        <i class="fas fa-check text-white" style="font-size: 10px;"></i>
                                                    @elseif($isCurrent)
                                                        <i class="fas fa-circle text-white" style="font-size: 6px;"></i>
                                                    @endif
                                                </span>
                                                <span class="ms-1 {{ $isCurrent ? 'fw-bold' : 'text-muted' }}">{{ $stepLabel }}</span>
                                            </div>
                                            @if(!$loop->last)
                                                <div class="mx-2 {{ $stepIndex < $currentIndex ? 'border-success' : 'border-secondary border-opacity-25' }}" style="width: 30px; border-top: 2px solid;"></div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>

                                <div class="d-flex flex-wrap gap-3 small text-muted">
                                    <span><i class="fas fa-tag me-1"></i>{{ $typeLabel }}</span>
                                    @if($incident->started_at)
                                        <span><i class="fas fa-clock me-1"></i>{{ __('store.network_status_started_at') }}: {{ $incident->started_at->format($dateTimeFormat) }}</span>
                                    @endif
                                    @if(is_array($incident->affected_services) && count($incident->affected_services) > 0)
                                        <span>
                                            <i class="fas fa-server me-1"></i>{{ __('store.network_status_affected_services') }}:
                                            {{ implode(', ', $incident->affected_services) }}
                                        </span>
                                    @endif
                                    <span>
                                        <i class="fas fa-sync-alt me-1"></i>{{ __('store.network_status_last_updated') }}: {{ $incident->updated_at->diffForHumans() }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-4 text-muted">
                            <i class="fas fa-check-circle fa-2x mb-2"></i>
                            <p class="mb-0">{{ __('store.network_status_no_incidents') }}</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Scheduled Maintenance --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-calendar-alt me-2 text-info"></i>{{ __('store.network_status_scheduled_maintenance') }}
                        @if($scheduledMaintenance->count() > 0)
                            <span class="badge bg-info ms-2">{{ $scheduledMaintenance->count() }}</span>
                        @endif
                    </h5>
                </div>
                <div class="card-body">
                    @if($scheduledMaintenance->count() > 0)
                        @foreach($scheduledMaintenance as $maintenance)
                            <div class="border-start border-3 border-info ps-3 mb-3 @if(!$loop->last) pb-3 border-bottom @endif">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h6 class="mb-0">
                                        <i class="fas fa-calendar me-1 text-info"></i>
                                        {{ $maintenance->title }}
                                    </h6>
                                    <span class="badge bg-secondary">{{ __('store.network_status_scheduled') }}</span>
                                </div>

                                @if($maintenance->description)
                                    <p class="text-muted mb-2">{{ $maintenance->description }}</p>
                                @endif

                                <div class="d-flex flex-wrap gap-3 small text-muted">
                                    @if($maintenance->scheduled_at)
                                        <span>
                                            <i class="fas fa-play-circle me-1 text-info"></i>
                                            {{ __('store.network_status_scheduled_start') }}: {{ $maintenance->scheduled_at->format($dateTimeFormat) }}
                                        </span>
                                    @endif
                                    @if($maintenance->scheduled_end_at)
                                        <span>
                                            <i class="fas fa-stop-circle me-1 text-info"></i>
                                            {{ __('store.network_status_scheduled_end') }}: {{ $maintenance->scheduled_end_at->format($dateTimeFormat) }}
                                        </span>
                                    @endif
                                    @if($maintenance->scheduled_at && $maintenance->scheduled_end_at)
                                        <span>
                                            <i class="fas fa-hourglass-half me-1"></i>
                                            {{ __('store.network_status_duration') }}: {{ $maintenance->scheduled_at->diffForHumans($maintenance->scheduled_end_at, true) }}
                                        </span>
                                    @endif
                                    @if(is_array($maintenance->affected_services) && count($maintenance->affected_services) > 0)
                                        <span>
                                            <i class="fas fa-server me-1"></i>{{ __('store.network_status_affected_services') }}:
                                            {{ implode(', ', $maintenance->affected_services) }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-4 text-muted">
                            <i class="fas fa-calendar-check fa-2x mb-2"></i>
                            <p class="mb-0">{{ __('store.network_status_no_maintenance') }}</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Resolved Incidents History (Paginated) --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header" data-bs-toggle="collapse" data-bs-target="#recentResolvedCollapse" role="button" aria-expanded="false">
                    <h5 class="mb-0 d-flex justify-content-between align-items-center">
                        <span>
                            <i class="fas fa-history me-2 text-success"></i>{{ __('store.network_status_resolved_history') }}
                            <small class="text-muted ms-2">({{ __('store.network_status_last_30_days') }})</small>
                        </span>
                        <i class="fas fa-chevron-down"></i>
                    </h5>
                </div>
                <div class="collapse" id="recentResolvedCollapse">
                    <div class="card-body">
                        @if($recentResolved->count() > 0)
                            @foreach($recentResolved as $resolved)
                                <div class="border-start border-3 border-success ps-3 mb-3 @if(!$loop->last) pb-3 border-bottom @endif">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h6 class="mb-0">{{ $resolved->title }}</h6>
                                        <span class="badge bg-success">{{ __('store.network_status_resolved') }}</span>
                                    </div>

                                    @if($resolved->description)
                                        <p class="text-muted mb-2">{{ $resolved->description }}</p>
                                    @endif

                                    <div class="d-flex flex-wrap gap-3 small text-muted">
                                        @php
                                            $resolvedTypeLabel = match($resolved->type) {
                                                'incident' => __('store.network_status_type_incident'),
                                                'maintenance' => __('store.network_status_type_maintenance'),
                                                'degraded_performance' => __('store.network_status_type_degraded'),
                                                'partial_outage' => __('store.network_status_type_partial'),
                                                'major_outage' => __('store.network_status_type_major'),
                                                default => $resolved->type
                                            };
                                        @endphp
                                        <span><i class="fas fa-tag me-1"></i>{{ $resolvedTypeLabel }}</span>
                                        @if($resolved->started_at)
                                            <span><i class="fas fa-clock me-1"></i>{{ __('store.network_status_started_at') }}: {{ $resolved->started_at->format($dateTimeFormat) }}</span>
                                        @endif
                                        @if($resolved->resolved_at)
                                            <span><i class="fas fa-check-circle me-1"></i>{{ __('store.network_status_resolved_at') }}: {{ $resolved->resolved_at->format($dateTimeFormat) }}</span>
                                        @endif
                                        @if($resolved->started_at && $resolved->resolved_at)
                                            <span>
                                                <i class="fas fa-hourglass-end me-1"></i>{{ __('store.network_status_duration') }}: {{ $resolved->started_at->diffForHumans($resolved->resolved_at, true) }}
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach

                            {{-- Pagination --}}
                            @if($recentResolved->hasPages())
                                <div class="d-flex justify-content-center mt-4">
                                    {{ $recentResolved->links() }}
                                </div>
                            @endif
                        @else
                            <div class="text-center py-4 text-muted">
                                <i class="fas fa-check-double fa-2x mb-2"></i>
                                <p class="mb-0">{{ __('store.network_status_no_resolved') }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
