@extends('layouts.teamlead')

@section('title', 'Панель тімліда')
@section('page_title', 'Панель тімліда')

@push('head')
    {{-- Окремий CSS для дашборду тімліда --}}
    <link rel="stylesheet" href="{{ mix('css/teamlead/dashboard.css') }}">
@endpush

@section('content')
    @php
        $cabinetsCount = $cabinets->count();

        // середній рейтинг по балансах
        $avgBalanceScore = null;
        if (!empty($cabinetRatings)) {
            $vals = collect($cabinetRatings)
                ->pluck('score')
                ->filter(fn($v) => $v !== null);
            if ($vals->count()) {
                $avgBalanceScore = round($vals->avg(), 1);
            }
        }

        // середній рейтинг по статистиці
        $avgStatsScore = null;
        if (!empty($cabinetStatsRatings)) {
            $vals2 = collect($cabinetStatsRatings)
                ->filter()
                ->pluck('score')
                ->filter(fn($v) => $v !== null);
            if ($vals2->count()) {
                $avgStatsScore = round($vals2->avg(), 1);
            }
        }

        $selectedMonth = $selectedMonth ?? now()->format('Y-m');

        // опціонально: попередній місяць (якщо колись додаси в контролер)
        $avgBalancePrev = $avgBalancePrev ?? null;
        $avgStatsPrev   = $avgStatsPrev   ?? null;

        $avgBalanceDeltaPct = null;
        if ($avgBalanceScore !== null && $avgBalancePrev) {
            $avgBalanceDeltaPct = round((($avgBalanceScore - $avgBalancePrev) / $avgBalancePrev) * 100, 1);
        }

        $avgStatsDeltaPct = null;
        if ($avgStatsScore !== null && $avgStatsPrev) {
            $avgStatsDeltaPct = round((($avgStatsScore - $avgStatsPrev) / $avgStatsPrev) * 100, 1);
        }

        // коротке імʼя без "T1" і т.п.
        if ($user && $user->name) {
            $parts = explode(' ', $user->name);
            $shortName = $parts[0] ?? $user->name;
        } else {
            $shortName = 'Тімлід';
        }
    @endphp

    {{-- Заголовок + красивий фільтр по місяцю --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-2">
        <div>
            <h2 class="mb-1">Привіт, {{ $shortName }}!</h2>
            <p class="text-muted mb-0">
                Тут ти бачиш усі свої кабінети, операторів по змінах та їх рейтинг від <strong>0</strong> до <strong>100</strong>,
                а також окремо загальний рейтинг кабінетів по <strong>балансах</strong> та по
                <strong>статистиці (New / Young / Old / Spend)</strong>.
            </p>
        </div>

        <div class="month-filter-wrapper mt-3 mt-md-0">
            <form method="GET"
                  action="{{ route('teamlead.dashboard') }}"
                  class="mb-0">
                <div class="month-filter-pill">
                    <span class="month-label">Місяць</span>
                    <i class="fa-regular fa-calendar-days"></i>
                    <input type="month"
                           name="month"
                           value="{{ $selectedMonth }}"
                           onchange="this.form.submit()">
                </div>
            </form>
        </div>
    </div>

    {{-- Верхні картки --}}
    <div class="row mb-4 mt-2">
        {{-- 1. Кількість кабінетів --}}
        <div class="col-md-4 mb-2">
            <div class="tl-kpi-card p-3">
                <div class="tl-kpi-title mb-1">Кабінетів у тебе</div>
                <div class="tl-kpi-value mb-1">
                    <span class="tl-counter" data-value="{{ $cabinetsCount }}">{{ $cabinetsCount }}</span>
                </div>
                <div class="tl-kpi-sub">
                    Кількість кабінетів, за які ти відповідаєш.
                </div>
            </div>
        </div>

        {{-- 2. Середній рейтинг по балансах --}}
        <div class="col-md-4 mb-2">
            <div class="tl-kpi-card p-3">
                <div class="tl-kpi-title mb-1">Середній рейтинг кабінетів (баланси)</div>
                <div class="tl-kpi-value mb-1">
                    @if($avgBalanceScore !== null)
                        <span class="tl-counter" data-value="{{ $avgBalanceScore }}">{{ $avgBalanceScore }}</span>
                        <span class="tl-kpi-suffix"> / 100</span>

                        @if($avgBalanceDeltaPct !== null)
                            <span class="tl-kpi-trend {{ $avgBalanceDeltaPct >= 0 ? 'tl-kpi-trend-up' : 'tl-kpi-trend-down' }}">
                                @if($avgBalanceDeltaPct >= 0)
                                    <i class="fa-solid fa-arrow-up"></i>
                                    +{{ number_format($avgBalanceDeltaPct, 1) }}%
                                @else
                                    <i class="fa-solid fa-arrow-down"></i>
                                    {{ number_format($avgBalanceDeltaPct, 1) }}%
                                @endif
                            </span>
                        @endif
                    @else
                        <span class="text-muted">немає даних</span>
                    @endif
                </div>
                <div class="tl-kpi-sub">
                    По <strong>балансах змін</strong> за місяць {{ $currentMonth }}.<br>
                    100 = норма виконана або перевиконана.
                </div>
            </div>
        </div>

        {{-- 3. Середній рейтинг по статистиці --}}
        <div class="col-md-4 mb-2">
            <div class="tl-kpi-card p-3">
                <div class="tl-kpi-title mb-1">Середній рейтинг кабінетів (статистика)</div>
                <div class="tl-kpi-value mb-1">
                    @if($avgStatsScore !== null)
                        <span class="tl-counter" data-value="{{ $avgStatsScore }}">{{ $avgStatsScore }}</span>
                        <span class="tl-kpi-suffix"> / 100</span>

                        @if($avgStatsDeltaPct !== null)
                            <span class="tl-kpi-trend {{ $avgStatsDeltaPct >= 0 ? 'tl-kpi-trend-up' : 'tl-kpi-trend-down' }}">
                                @if($avgStatsDeltaPct >= 0)
                                    <i class="fa-solid fa-arrow-up"></i>
                                    +{{ number_format($avgStatsDeltaPct, 1) }}%
                                @else
                                    <i class="fa-solid fa-arrow-down"></i>
                                    {{ number_format($avgStatsDeltaPct, 1) }}%
                                @endif
                            </span>
                        @endif
                    @else
                        <span class="text-muted">немає даних</span>
                    @endif
                </div>
                <div class="tl-kpi-sub">
                    По <strong>статистиці</strong> (New / Young / Old / Spend) за місяць {{ $currentMonth }}.<br>
                    Рахується за тією ж формулою, що й на графіку статистики кабінету.
                </div>
            </div>
        </div>
    </div>

    {{-- Таблиця кабінетів --}}
    <div class="tl-table-card p-0">
        <div class="table-responsive">
            <table class="table table-sm table-bordered mb-0 tl-table">
                <thead class="thead-light">
                <tr>
                    <th style="width:180px;">Назва</th>
                    <th>Денна</th>
                    <th>Вечірня</th>
                    <th>Нічна</th>
                    <th style="width:260px;">Рейтинг кабінету</th>
                    <th style="width:120px;">Дії</th>
                </tr>
                </thead>
                <tbody>
                @forelse($cabinets as $cab)
                    @php
                        $balanceRating = $cabinetRatings[$cab->id]['score'] ?? null;
                        $statBlock     = $cabinetStatsRatings[$cab->id] ?? null;

                        $balanceClass = 'tl-badge-mid';
                        if ($balanceRating !== null) {
                            if ($balanceRating >= 90) {
                                $balanceClass = 'tl-badge-good';
                            } elseif ($balanceRating < 60) {
                                $balanceClass = 'tl-badge-bad';
                            }
                        }

                        $statsScore  = $statBlock['score'] ?? null;
                        $statsClass  = 'tl-badge-mid';
                        if ($statsScore !== null) {
                            if ($statsScore >= 90) {
                                $statsClass = 'tl-badge-good';
                            } elseif ($statsScore < 60) {
                                $statsClass = 'tl-badge-bad';
                            }
                        }

                        $dayRating   = $shiftRatings[$cab->id]['day']['score']      ?? null;
                        $dayAvg      = $shiftRatings[$cab->id]['day']['avg']        ?? null;
                        $dayTarget   = $shiftRatings[$cab->id]['day']['target']     ?? null;

                        $evenRating  = $shiftRatings[$cab->id]['evening']['score']  ?? null;
                        $evenAvg     = $shiftRatings[$cab->id]['evening']['avg']    ?? null;
                        $evenTarget  = $shiftRatings[$cab->id]['evening']['target'] ?? null;

                        $nightRating = $shiftRatings[$cab->id]['night']['score']    ?? null;
                        $nightAvg    = $shiftRatings[$cab->id]['night']['avg']      ?? null;
                        $nightTarget = $shiftRatings[$cab->id]['night']['target']   ?? null;

                        $statsMetrics  = $statBlock['metrics'] ?? [];
                    @endphp

                    <tr>
                        {{-- Назва --}}
                        <td class="align-middle">
                            {{ $cab->name }}
                        </td>

                        {{-- Денна --}}
                        <td class="align-middle" style="min-width:190px;">
                            @if($cab->day_operator)
                                <div class="tl-ops-name">{{ $cab->day_operator }}</div>
                                @if($cab->day_tg_username)
                                    <div class="tl-ops-username">{{ $cab->day_tg_username }}</div>
                                @endif
                                @if($dayRating !== null && $dayTarget)
                                    <div class="mt-1">
                                        <span class="tl-badge-score {{ $dayRating >= 90 ? 'tl-badge-good' : ($dayRating < 60 ? 'tl-badge-bad' : 'tl-badge-mid') }}">
                                            Day • {{ $dayRating }} / 100
                                        </span>
                                    </div>
                                    <div class="tl-ops-sub mt-1">
                                        Середнє: {{ number_format($dayAvg, 2) }} $ / норма: {{ number_format($dayTarget, 2) }} $
                                    </div>
                                @else
                                    <div class="tl-ops-sub mt-1">Немає даних по рейтингу.</div>
                                @endif
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>

                        {{-- Вечірня --}}
                        <td class="align-middle" style="min-width:190px;">
                            @if($cab->evening_operator)
                                <div class="tl-ops-name">{{ $cab->evening_operator }}</div>
                                @if($cab->evening_tg_username)
                                    <div class="tl-ops-username">{{ $cab->evening_tg_username }}</div>
                                @endif
                                @if($evenRating !== null && $evenTarget)
                                    <div class="mt-1">
                                        <span class="tl-badge-score {{ $evenRating >= 90 ? 'tl-badge-good' : ($evenRating < 60 ? 'tl-badge-bad' : 'tl-badge-mid') }}">
                                            Evening • {{ $evenRating }} / 100
                                        </span>
                                    </div>
                                    <div class="tl-ops-sub mt-1">
                                        Середнє: {{ number_format($evenAvg, 2) }} $ / норма: {{ number_format($evenTarget, 2) }} $
                                    </div>
                                @else
                                    <div class="tl-ops-sub mt-1">Немає даних по рейтингу.</div>
                                @endif
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>

                        {{-- Нічна --}}
                        <td class="align-middle" style="min-width:190px;">
                            @if($cab->night_operator)
                                <div class="tl-ops-name">{{ $cab->night_operator }}</div>
                                @if($cab->night_tg_username)
                                    <div class="tl-ops-username">{{ $cab->night_tg_username }}</div>
                                @endif
                                @if($nightRating !== null && $nightTarget)
                                    <div class="mt-1">
                                        <span class="tl-badge-score {{ $nightRating >= 90 ? 'tl-badge-good' : ($nightRating < 60 ? 'tl-badge-bad' : 'tl-badge-mid') }}">
                                            Night • {{ $nightRating }} / 100
                                        </span>
                                    </div>
                                    <div class="tl-ops-sub mt-1">
                                        Середнє: {{ number_format($nightAvg, 2) }} $ / норма: {{ number_format($nightTarget, 2) }} $
                                    </div>
                                @else
                                    <div class="tl-ops-sub mt-1">Немає даних по рейтингу.</div>
                                @endif
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>

                        {{-- Рейтинг кабінету (баланси + статистика) --}}
                        <td class="align-middle" style="min-width:260px;">
                            {{-- Баланси --}}
                            <div class="mb-2">
                                <div class="mb-1">
                                    <span class="tl-badge-score {{ $balanceClass }}">
                                        Баланси: {{ $balanceRating !== null ? $balanceRating.' / 100' : 'немає даних' }}
                                    </span>
                                </div>
                                <div class="tl-progress mb-1">
                                    @if($balanceRating !== null)
                                        <div class="tl-progress-bar {{ $balanceRating < 60 ? 'tl-progress-balance-bad' : 'tl-progress-balance' }}"
                                             style="width: {{ max(0, min(100, $balanceRating)) }}%;"></div>
                                    @endif
                                </div>
                            </div>

                            {{-- Статистика (конекшн / спенд) --}}
                            <div>
                                <div class="mb-1">
                                    <span class="tl-badge-score {{ $statsClass }}">
                                        Статистика: {{ $statsScore !== null ? $statsScore.' / 100' : 'немає даних' }}
                                    </span>
                                </div>
                                <div class="tl-progress mb-1">
                                    @if($statsScore !== null)
                                        <div class="tl-progress-bar tl-progress-stats"
                                             style="width: {{ max(0, min(100, $statsScore)) }}%;"></div>
                                    @endif
                                </div>

                                @if($statsMetrics)
                                    <div class="tl-ops-sub">
                                        @foreach($statsMetrics as $m)
                                            @if($m['target'] > 0)
                                                <div>
                                                    {{ $m['label'] }}:
                                                    {{ number_format($m['fact'], 2, '.', ' ') }}
                                                    / {{ number_format($m['target'], 2, '.', ' ') }}
                                                    ({{ $m['pct'] }}%)
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                @else
                                    <div class="tl-ops-sub">Немає агрегованої статистики по конекшн / спенд.</div>
                                @endif
                            </div>
                        </td>

                        {{-- Дії --}}
                        <td class="align-middle text-center">
                            <a href="{{ route('teamlead.cabinets.edit', $cab) }}"
                               class="btn btn-sm btn-outline-secondary">
                                Редагувати
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted p-4">
                            У тебе ще немає прив'язаних кабінетів.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('body')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Легка анімація росту цифр KPI
            const counters = document.querySelectorAll('.tl-counter');

            counters.forEach(function (counter) {
                const finalValue = parseFloat(counter.getAttribute('data-value') || '0');
                if (isNaN(finalValue)) return;

                const duration = 900; // ms
                const decimals = (finalValue % 1 !== 0) ? 1 : 0;
                const startTime = performance.now();

                function animate(now) {
                    const progress = Math.min((now - startTime) / duration, 1);
                    const eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic
                    const current = finalValue * eased;
                    counter.textContent = current.toFixed(decimals);

                    if (progress < 1) {
                        requestAnimationFrame(animate);
                    } else {
                        counter.textContent = finalValue.toFixed(decimals);
                    }
                }

                requestAnimationFrame(animate);
            });
        });
    </script>
@endpush