@extends('layouts.app')
@section('title', 'Support performance')

@section('content')
    <div class="page-head">
        <div><h1>Support performance</h1><p>{{ $from->format('d M Y') }} – {{ $to->format('d M Y') }}</p></div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Tickets opened', 'value' => number_format($summary['opened']), 'variant' => 'info', 'href' => '#'])
        @include('components.kpi', ['label' => 'Resolved', 'value' => number_format($summary['resolved']), 'variant' => 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'SLA met', 'value' => percent($summary['sla_met']),
            'variant' => $summary['sla_met'] >= 90 ? 'good' : 'warn', 'href' => '#'])
        @include('components.kpi', ['label' => 'Avg first response', 'value' => $summary['avg_first_response'], 'href' => '#'])
        @include('components.kpi', ['label' => 'Avg resolution', 'value' => $summary['avg_resolution'], 'href' => '#'])
        @include('components.kpi', ['label' => 'CSAT', 'value' => $summary['csat'] ? number_format($summary['csat'], 1).' / 5' : '—',
            'variant' => $summary['csat'] >= 4 ? 'good' : 'warn', 'href' => '#'])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Tickets by month</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($monthly)->map(fn ($m) => [
                        'label' => \Carbon\Carbon::parse($m['month'])->format('M y'),
                        'value' => $m['opened'],
                    ])->all(),
                    'type' => 'bar', 'format' => 'number', 'height' => 200,
                ])
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Resolution time trend</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($monthly)->map(fn ($m) => [
                        'label' => \Carbon\Carbon::parse($m['month'])->format('M y'),
                        'value' => $m['avg_resolution_hours'],
                    ])->all(),
                    'type' => 'line', 'format' => 'number', 'height' => 200,
                ])
            </div>
        </div>
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>By category</h3></div>
            <div class="card-body">
                @php $maxCat = collect($byCategory)->max('total') ?: 1; @endphp
                @forelse ($byCategory as $category)
                    <div class="bar-row">
                        <span class="bar-label">{{ $category['category'] }}</span>
                        <span class="bar-track">
                            <span class="bar-fill" style="width: {{ ($category['total'] / $maxCat) * 100 }}%"></span>
                        </span>
                        <span class="bar-value">{{ $category['total'] }}</span>
                    </div>
                @empty
                    <p class="small muted">No tickets in this period.</p>
                @endforelse
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>By priority</h3></div>
            <div class="card-body">
                @php $maxPri = collect($byPriority)->max('total') ?: 1; @endphp
                @forelse ($byPriority as $priority)
                    <div class="bar-row">
                        <span class="bar-label">{{ title_case_words($priority['priority']) }}</span>
                        <span class="bar-track">
                            <span class="bar-fill {{ $priority['priority'] === 'urgent' ? 'danger' : ($priority['priority'] === 'high' ? 'warn' : '') }}"
                                  style="width: {{ ($priority['total'] / $maxPri) * 100 }}%"></span>
                        </span>
                        <span class="bar-value">{{ $priority['total'] }}</span>
                    </div>
                @empty
                    <p class="small muted">No tickets in this period.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-head"><h3>Agent performance</h3></div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead><tr><th>Agent</th><th class="num">Assigned</th><th class="num">Resolved</th>
                        <th class="num">Avg first response</th><th class="num">Avg resolution</th><th class="num">CSAT</th></tr></thead>
                    <tbody>
                    @forelse ($agents as $agent)
                        <tr>
                            <td class="strong">{{ $agent['name'] }}</td>
                            <td class="num">{{ $agent['assigned'] }}</td>
                            <td class="num">{{ $agent['resolved'] }}</td>
                            <td class="num">{{ $agent['avg_first_response'] }}</td>
                            <td class="num">{{ $agent['avg_resolution'] }}</td>
                            <td class="num">{{ $agent['csat'] ? number_format($agent['csat'], 1) : '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6">@include('components.empty-state', ['icon' => '&#128100;', 'title' => 'No agent activity'])</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection