@extends('layouts.app')

@php
    // Tiles and chart tooltips, not a table — see Duration::compact.
    $hm = fn ($sec) => \App\Support\Duration::compact((int) $sec);
@endphp

@section('header')
    <div class="row g-2 align-items-center">
        <div class="col">
            <div class="page-pretitle">Overview</div>
            <h2 class="page-title">Dashboard</h2>
            <div class="text-secondary mt-1">{{ now()->format('l, d M Y') }} · {{ $headcount }} active {{ Str::plural('employee', $headcount) }}</div>
        </div>
        <div class="col-auto">
            <a href="{{ route('live-people.index') }}" class="btn btn-primary">
                <i class="ti ti-users me-1"></i>Live People
            </a>
        </div>
    </div>
@endsection

@section('content')

{{-- ── 1. Right now ────────────────────────────────────────────────────── --}}
@php
    $presenceCards = [
        ['label' => 'Working',        'value' => $presence['online'], 'colour' => 'green',     'icon' => 'ti-player-play'],
        ['label' => 'On break',       'value' => $presence['break'],  'colour' => 'yellow',    'icon' => 'ti-player-pause'],
        ['label' => 'Not started',    'value' => $presence['absent'], 'colour' => 'secondary', 'icon' => 'ti-zzz'],
    ];
@endphp
<div class="row row-cards mb-3">
    @foreach ($presenceCards as $c)
        <div class="col-6 col-lg-3">
            <div class="card card-sm">
                <div class="card-body d-flex align-items-center gap-3">
                    <span class="avatar bg-{{ $c['colour'] }}-lt"><i class="ti {{ $c['icon'] }}"></i></span>
                    <div>
                        <div class="h1 m-0">{{ $c['value'] }}</div>
                        <div class="text-secondary small">{{ $c['label'] }}</div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    {{-- Tracked against what the roster asked for. The denominator is every
         active employee, not only those who turned up — otherwise a day where
         half the team never started reads as a flattering 100%. --}}
    <div class="col-6 col-lg-3">
        <div class="card card-sm">
            <div class="card-body">
                <div class="d-flex align-items-center gap-3">
                    <span class="avatar bg-primary-lt"><i class="ti ti-clock"></i></span>
                    <div>
                        <div class="h1 m-0">{{ $hm($today['active_sec']) }}</div>
                        <div class="text-secondary small">Tracked today</div>
                    </div>
                </div>
                @if ($today['pct_of_target'] !== null)
                    <div class="progress progress-sm mt-2">
                        <div class="progress-bar" role="progressbar"
                             style="width: {{ min(100, $today['pct_of_target']) }}%"
                             aria-valuenow="{{ $today['pct_of_target'] }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="text-secondary small mt-1">
                        {{ $today['pct_of_target'] }}% of {{ $hm($today['expected_sec']) }} rostered
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="row row-cards mb-3">
    {{-- ── 3. Needs a look ─────────────────────────────────────────────────
         The part of this page worth opening. Each bucket answers a question
         someone would otherwise go hunting for, and each is capped — forty
         names is a report, not a signal. --}}
    <div class="col-12 col-lg-7">
        <div class="card h-100">
            <div class="card-header py-2">
                <h3 class="card-title"><i class="ti ti-alert-triangle me-2"></i>Needs a look</h3>
            </div>
            @if ($attention['clear'])
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3 text-secondary">
                        <span class="avatar bg-green-lt"><i class="ti ti-check"></i></span>
                        <div>
                            <div class="text-body">Nothing to flag</div>
                            <div class="small">No late starts, overtime, low activity or silent agents today.</div>
                        </div>
                    </div>
                </div>
            @else
                <div class="list-group list-group-flush">
                    @php
                        $buckets = [
                            ['key' => 'late', 'total' => 'late_total', 'icon' => 'ti-clock-exclamation', 'colour' => 'orange',
                             'title' => 'Not started', 'hint' => 'their shift has begun with nothing tracked'],
                            ['key' => 'silent', 'total' => 'silent_total', 'icon' => 'ti-plug-connected-x', 'colour' => 'red',
                             'title' => 'Agent silent', 'hint' => 'was tracking, then the data stopped'],
                            ['key' => 'low', 'total' => 'low_total', 'icon' => 'ti-activity-heartbeat', 'colour' => 'yellow',
                             'title' => 'Low input activity', 'hint' => 'a long session with little keyboard or mouse'],
                            ['key' => 'overtime', 'total' => 'overtime_total', 'icon' => 'ti-flame', 'colour' => 'green',
                             'title' => 'Over the rostered day', 'hint' => 'active beyond what the shift asked for'],
                        ];
                    @endphp
                    @foreach ($buckets as $b)
                        @continue (empty($attention[$b['key']]))
                        <div class="list-group-item">
                            <div class="d-flex align-items-start gap-3">
                                <span class="avatar avatar-sm bg-{{ $b['colour'] }}-lt mt-1">
                                    <i class="ti {{ $b['icon'] }}"></i>
                                </span>
                                <div class="flex-fill">
                                    <div class="d-flex align-items-center gap-2">
                                        <strong>{{ $b['title'] }}</strong>
                                        <span class="badge bg-{{ $b['colour'] }}-lt">{{ $attention[$b['total']] }}</span>
                                    </div>
                                    <div class="text-secondary small mb-1">{{ $b['hint'] }}</div>
                                    <div class="d-flex flex-wrap gap-1">
                                        @foreach ($attention[$b['key']] as $item)
                                            <span class="badge bg-secondary-lt fw-normal">
                                                {{ $item['name'] }}
                                                @if ($b['key'] === 'overtime')
                                                    <span class="text-secondary ms-1">+{{ $hm($item['sec']) }}</span>
                                                @elseif ($b['key'] === 'low')
                                                    <span class="text-secondary ms-1">{{ $item['pct'] }}% · {{ $hm($item['sec']) }}</span>
                                                @elseif ($b['key'] === 'silent')
                                                    <span class="text-secondary ms-1">{{ $item['since'] }}</span>
                                                @elseif (! empty($item['ended']))
                                                    <span class="text-secondary ms-1">shift ended</span>
                                                @endif
                                            </span>
                                        @endforeach
                                        @if ($attention[$b['total']] > count($attention[$b['key']]))
                                            <span class="badge bg-transparent text-secondary fw-normal">
                                                +{{ $attention[$b['total']] - count($attention[$b['key']]) }} more
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    {{-- ── 2. Today, in shape ──────────────────────────────────────────── --}}
    <div class="col-12 col-lg-5">
        <div class="card h-100">
            <div class="card-header py-2"><h3 class="card-title">Today</h3></div>
            <div class="card-body">
                @php
                    $r = 52; $circ = 2 * M_PI * $r;
                    $act = $today['activity_pct'];
                @endphp
                <div class="d-flex align-items-center gap-3 mb-3">
                    <svg viewBox="0 0 120 120" width="112" height="112" role="img"
                         aria-label="{{ $act === null ? 'Input activity not measured' : $act . '% input activity' }}">
                        <circle cx="60" cy="60" r="{{ $r }}" fill="none" stroke="var(--tblr-border-color)" stroke-width="14"></circle>
                        @if ($act !== null)
                            <circle cx="60" cy="60" r="{{ $r }}" fill="none"
                                    stroke="var(--tblr-primary)" stroke-width="14" stroke-linecap="round"
                                    stroke-dasharray="{{ round($circ * $act / 100, 2) }} {{ round($circ, 2) }}"
                                    transform="rotate(-90 60 60)"></circle>
                        @endif
                        <text x="60" y="58" text-anchor="middle" class="db-donut-value">{{ $act === null ? '—' : $act . '%' }}</text>
                        <text x="60" y="74" text-anchor="middle" class="db-donut-label">input activity</text>
                    </svg>
                    <div class="flex-fill">
                        {{-- A dash rather than 0%: before 1.15.0 the agent didn't
                             sample input, and "not measured" is not "idle". --}}
                        @if ($act === null)
                            <div class="text-secondary small">
                                No input measurement yet today — desktops on 1.15.0 or newer report it.
                            </div>
                        @endif
                        <div class="d-flex justify-content-between"><span class="text-secondary">Idle</span><strong>{{ $hm($today['idle_sec']) }}</strong></div>
                        <div class="d-flex justify-content-between"><span class="text-secondary">Rostered</span><strong>{{ $hm($today['expected_sec']) }}</strong></div>
                        <div class="d-flex justify-content-between"><span class="text-secondary">Screenshots</span><strong>{{ number_format($today['shots']) }}</strong></div>
                    </div>
                </div>

                {{-- Is the monitoring itself healthy? A fleet quietly running an
                     old build is the sort of thing nobody notices until a fix
                     appears not to have shipped. --}}
                <div class="hr-text hr-text-left my-2"><span>Desktop fleet</span></div>
                <div class="row g-2">
                    <div class="col-4">
                        <div class="text-secondary small">Installs</div>
                        <div class="fw-bold">{{ $fleet['devices'] }}</div>
                    </div>
                    <div class="col-4">
                        <div class="text-secondary small">People</div>
                        <div class="fw-bold">{{ $fleet['people'] }}</div>
                    </div>
                    <div class="col-4">
                        <div class="text-secondary small">Outdated</div>
                        <div class="fw-bold {{ $fleet['outdated'] ? 'text-orange' : '' }}">{{ $fleet['outdated'] }}</div>
                    </div>
                </div>
                <a href="{{ route('admin.versions.index') }}" class="btn btn-sm w-100 mt-2">
                    <i class="ti ti-versions me-1"></i>Version Control
                </a>
            </div>
        </div>
    </div>
</div>

{{-- ── 4. The fortnight the day sits inside ────────────────────────────── --}}
<div class="card">
    <div class="card-header py-2">
        <h3 class="card-title">Last {{ $trend['days']->count() }} days</h3>
        <span class="card-subtitle ms-2 text-secondary">tracked hours · input activity</span>
    </div>
    <div class="card-body">
        <div class="db-trend">
            @foreach ($trend['days'] as $d)
                @php $h = $trend['peak'] > 0 ? round($d['active'] / $trend['peak'] * 100) : 0; @endphp
                <div class="db-trend-col" title="{{ $d['label'] }} — {{ $d['hours'] }}h tracked{{ $d['activity_pct'] !== null ? ', ' . $d['activity_pct'] . '% input activity' : '' }}">
                    <div class="db-trend-bar-wrap">
                        {{-- The activity share is drawn INSIDE the day's bar rather
                             than beside it: it is a proportion of that day's time,
                             and a second bar would invite reading it as a total. --}}
                        <div class="db-trend-bar" style="height: {{ max($h, $d['active'] > 0 ? 2 : 0) }}%">
                            @if ($d['activity_pct'] !== null)
                                <div class="db-trend-input" style="height: {{ $d['activity_pct'] }}%"></div>
                            @endif
                        </div>
                    </div>
                    <div class="db-trend-label">{{ $d['label'] }}</div>
                </div>
            @endforeach
        </div>
        <div class="d-flex gap-3 mt-2 small text-secondary">
            <span><span class="db-key" style="background:var(--tblr-primary);opacity:.35"></span>Tracked</span>
            <span><span class="db-key" style="background:var(--tblr-primary)"></span>Of which saw input</span>
        </div>
    </div>
    <div class="card-footer text-secondary small">
        Days are dated in each employee's own timezone, so an evening in one region doesn't land on
        the previous day. Figures reconcile with
        <a href="{{ route('reports.timesheet') }}">Timesheet</a>, which shares the same service.
    </div>
</div>
@endsection

@push('styles')
<style>
    .db-donut-value { font-size: 1.35rem; font-weight: 700; fill: var(--tblr-body-color); }
    .db-donut-label { font-size: .62rem; fill: var(--tblr-secondary); }
    .db-key { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; margin-right: .35rem; }

    /* Bars in flexbox rather than SVG: the day count is small and fixed, and
       this reflows on a phone without any viewBox arithmetic. */
    .db-trend { display: flex; align-items: flex-end; gap: .4rem; height: 140px; }
    .db-trend-col { flex: 1 1 0; display: flex; flex-direction: column; height: 100%; min-width: 0; }
    .db-trend-bar-wrap { flex: 1; display: flex; align-items: flex-end; }
    .db-trend-bar {
        width: 100%;
        background: var(--tblr-primary);
        opacity: .35;
        border-radius: 3px 3px 0 0;
        position: relative;
        display: flex;
        align-items: flex-end;
        min-height: 0;
    }
    .db-trend-input {
        width: 100%;
        background: var(--tblr-primary);
        opacity: 1;
        border-radius: 3px 3px 0 0;
    }
    .db-trend-label {
        font-size: .65rem;
        color: var(--tblr-secondary);
        text-align: center;
        padding-top: .35rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
@endpush