@extends('layouts.app')

@php
    // HH:MM everywhere — see App\Support\Duration. The consolidated sheet
    // carried seconds, but the agent checkpoints every five minutes, so that
    // precision was never real.
    $hms = fn ($sec) => \App\Support\Duration::hhmmOrDash((int) $sec);
    // Tiles and the bar chart read on their own, so they take the compact
    // form; the table below stays HH:MM so its columns line up.
    $hm  = fn ($sec) => \App\Support\Duration::compact((int) $sec);
    $pct = fn ($v) => $v === null ? '—' : rtrim(rtrim(number_format($v, 1), '0'), '.') . '%';
    // The same figure without the sign, for CSV. A spreadsheet reads "62.5%" as
    // text and will not average a column of it; on screen the sign is a label,
    // in a file it is in the way.
    $pctRaw = fn ($v) => $v === null ? '—' : rtrim(rtrim(number_format($v, 1), '0'), '.');
@endphp

@section('header')
    <div class="row g-2 align-items-center">
        <div class="col">
            <div class="page-pretitle">Reports</div>
            <h2 class="page-title">People Summary</h2>
            <div class="text-secondary mt-1">
                {{ $from->toDateString() === $to->toDateString()
                    ? $from->format('D, d M Y')
                    : $from->format('d M Y') . ' → ' . $to->format('d M Y') }}
                · {{ $totals['people'] }} {{ Str::plural('person', $totals['people']) }}
            </div>
        </div>
    </div>
@endsection

@section('content')
{{-- Filters — same contract as the Timesheet (?from=&to=&q=&status=). --}}
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ route('reports.people-summary') }}" class="row g-2 align-items-end" id="ps-form">
            <div class="col-sm-6 col-md-4 col-lg-3">
                <label class="form-label">Date range</label>
                <div class="input-icon">
                    <span class="input-icon-addon"><i class="ti ti-calendar"></i></span>
                    {{-- Display only; the hidden inputs carry the real values so
                         the page still submits its range without JS. --}}
                    <input type="text" class="form-control" id="ps-range" autocomplete="off"
                           placeholder="Pick a date or range"
                           value="{{ $from->toDateString() === $to->toDateString()
                                     ? $from->format('d M Y')
                                     : $from->format('d M Y') . ' → ' . $to->format('d M Y') }}">
                </div>
                <input type="hidden" name="from" id="ps-from" value="{{ $from->toDateString() }}">
                <input type="hidden" name="to"   id="ps-to"   value="{{ $to->toDateString() }}">
            </div>
            <div class="col-auto">
                <x-employee-status-filter :selected="$status" label-class="form-label" />
            </div>
            <div class="col-sm-6 col-md">
                <label class="form-label">Employee</label>
                <div class="input-icon">
                    <span class="input-icon-addon"><i class="ti ti-search"></i></span>
                    <input type="text" class="form-control" name="q" value="{{ $q }}" placeholder="Name or employee id…">
                </div>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary"><i class="ti ti-filter me-1"></i>Apply</button>
            </div>
            <div class="col-auto">
                <button type="button" class="btn" id="ps-export" @disabled($rows->isEmpty())>
                    <i class="ti ti-file-spreadsheet me-1"></i>Export CSV
                </button>
            </div>
            @if ($q !== '' || $status !== \App\Support\EmployeeStatus::ACTIVE || request()->hasAny(['from', 'to']))
                <div class="col-auto">
                    <a href="{{ route('reports.people-summary') }}" class="btn btn-link">Reset</a>
                </div>
            @endif
        </form>
    </div>
</div>

@if ($rows->isEmpty())
    <div class="card">
        <div class="empty">
            <div class="empty-icon"><i class="ti ti-report-off" style="font-size:2rem;"></i></div>
            <p class="empty-title">Nothing tracked in this range</p>
            <p class="empty-subtitle text-secondary">No employee recorded time between those dates.</p>
        </div>
    </div>
@else
    @php
        $timerTotal = max(1, $totals['timer_sec']);          // guard the divisions
        $idleShare  = $totals['idle_sec'] / $timerTotal * 100;
        $workShare  = 100 - $idleShare;
        // Donut geometry: one circle, one dash offset. Cheaper and sharper than
        // a charting library, and it inherits the theme's colours for free.
        $r = 52; $circ = 2 * M_PI * $r;
    @endphp

    <div class="row row-cards mb-3">
        {{-- Headline tiles --}}
        <div class="col-12 col-lg-3">
            <div class="card h-100">
                <div class="card-body d-flex flex-column justify-content-center gap-3">
                    <div class="d-flex align-items-center gap-2">
                        <span class="avatar bg-primary-lt"><i class="ti ti-clock"></i></span>
                        <div>
                            <div class="h2 m-0">{{ $hm($totals['timer_sec']) }}</div>
                            <div class="text-secondary small">Total Time</div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="avatar bg-azure-lt"><i class="ti ti-activity"></i></span>
                        <div>
                            <div class="h2 m-0">{{ $pct($totals['activity_pct']) }}</div>
                            <div class="text-secondary small">Average Activity</div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="avatar bg-yellow-lt"><i class="ti ti-player-pause"></i></span>
                        <div>
                            <div class="h2 m-0">{{ $hm($totals['idle_sec']) }}</div>
                            <div class="text-secondary small">Idle</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Time split: tracked vs the gaps inside it --}}
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100">
                <div class="card-header py-2"><h3 class="card-title">Tracked vs Idle</h3></div>
                <div class="card-body d-flex align-items-center gap-3">
                    <svg viewBox="0 0 120 120" width="120" height="120" role="img"
                         aria-label="{{ round($workShare) }}% tracked, {{ round($idleShare) }}% idle">
                        <circle cx="60" cy="60" r="{{ $r }}" fill="none"
                                stroke="var(--tblr-border-color)" stroke-width="14"></circle>
                        <circle cx="60" cy="60" r="{{ $r }}" fill="none"
                                stroke="var(--tblr-primary)" stroke-width="14" stroke-linecap="round"
                                stroke-dasharray="{{ round($circ * $workShare / 100, 2) }} {{ round($circ, 2) }}"
                                transform="rotate(-90 60 60)"></circle>
                        <text x="60" y="58" text-anchor="middle" class="ps-donut-value">{{ round($workShare) }}%</text>
                        <text x="60" y="74" text-anchor="middle" class="ps-donut-label">tracked</text>
                    </svg>
                    <div class="flex-fill">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span><span class="ps-key" style="background:var(--tblr-primary)"></span>Time Ex. Idle</span>
                            <strong>{{ $hm($totals['ex_idle_sec']) }}</strong>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span><span class="ps-key" style="background:var(--tblr-border-color)"></span>Idle</span>
                            <strong>{{ $hm($totals['idle_sec']) }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Who tracked the most. Ten bars, because more is unreadable and the
             table below already carries everyone. --}}
        <div class="col-12 col-md-6 col-lg-5">
            <div class="card h-100">
                <div class="card-header py-2">
                    <h3 class="card-title">Top tracked</h3>
                    <span class="card-subtitle ms-2 text-secondary">by total time</span>
                </div>
                <div class="card-body">
                    @php $peak = max(1, (int) $chartRows->max('timer_sec')); @endphp
                    @foreach ($chartRows as $c)
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <div class="text-truncate small" style="width:8.5rem" title="{{ $c['name'] }}">{{ $c['name'] }}</div>
                            <div class="flex-fill">
                                <div class="progress progress-sm">
                                    <div class="progress-bar" role="progressbar"
                                         style="width: {{ round($c['timer_sec'] / $peak * 100, 1) }}%"
                                         aria-valuenow="{{ round($c['timer_sec'] / $peak * 100) }}"
                                         aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="small text-secondary text-nowrap" style="width:4.5rem">{{ $hm($c['timer_sec']) }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="table-responsive">
            <table class="table table-vcenter card-table table-striped" id="ps-table">
                <thead>
                    <tr>
                        <th class="ps-sort" data-type="text">User</th>
                        <th class="ps-sort" data-type="num">Activity Level</th>
                        <th class="ps-sort" data-type="num">Idle (%)</th>
                        <th class="text-end ps-sort" data-type="num">Timer</th>
                        <th class="text-end ps-sort" data-type="num">Idle</th>
                        <th class="text-end ps-sort" data-type="num">Total Ex. Idle</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rows as $r2)
                        <tr>
                            <td data-csv="{{ $r2['name'] }}" data-sort="{{ mb_strtolower($r2['name']) }}">
                                <div>{{ $r2['name'] }}</div>
                                <div class="text-secondary small">
                                    {{ $r2['employee_id'] ?: $r2['designation'] ?: '—' }}
                                    · {{ $r2['shifts'] }} {{ Str::plural('shift', $r2['shifts']) }}
                                </div>
                            </td>
                            {{-- Activity and Idle(%) are complements of one another,
                                 so the pair always totals 100 — the same reading the
                                 hand-built sheet gives. A dash means the range
                                 predates measurement, which is not 0%. --}}
                            <td data-sort="{{ $r2['activity_pct'] ?? -1 }}" data-csv="{{ $pctRaw($r2['activity_pct']) }}">
                                @include('reports._ps-meter', ['value' => $r2['activity_pct'], 'colour' => 'green'])
                            </td>
                            <td data-sort="{{ $r2['idle_pct'] ?? -1 }}" data-csv="{{ $pctRaw($r2['idle_pct']) }}">
                                @include('reports._ps-meter', ['value' => $r2['idle_pct'], 'colour' => 'yellow'])
                            </td>
                            <td class="text-end text-nowrap" data-sort="{{ $r2['timer_sec'] }}" data-csv="{{ $hms($r2['timer_sec']) }}">{{ $hms($r2['timer_sec']) }}</td>
                            <td class="text-end text-nowrap" data-sort="{{ $r2['idle_sec'] }}" data-csv="{{ $hms($r2['idle_sec']) }}">{{ $hms($r2['idle_sec']) }}</td>
                            <td class="text-end text-nowrap" data-sort="{{ $r2['ex_idle_sec'] }}" data-csv="{{ $hms($r2['ex_idle_sec']) }}">{{ $hms($r2['ex_idle_sec']) }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="fw-bold">
                        <td>{{ $totals['people'] }} {{ Str::plural('person', $totals['people']) }}</td>
                        <td data-csv="{{ $pctRaw($totals['activity_pct']) }}">{{ $pct($totals['activity_pct']) }}</td>
                        <td data-csv="{{ $totals['activity_pct'] === null ? '—' : $pctRaw(round(100 - $totals['activity_pct'], 1)) }}">{{ $totals['activity_pct'] === null ? '—' : $pct(round(100 - $totals['activity_pct'], 1)) }}</td>
                        <td class="text-end text-nowrap">{{ $hms($totals['timer_sec']) }}</td>
                        <td class="text-end text-nowrap">{{ $hms($totals['idle_sec']) }}</td>
                        <td class="text-end text-nowrap">{{ $hms($totals['ex_idle_sec']) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="card-footer text-secondary small">
            <strong>Timer</strong> is time the tracker recorded · <strong>Idle</strong> is the gaps inside it ·
            <strong>Total Ex. Idle</strong> is Timer minus those gaps ·
            <strong>Activity Level</strong> is the share of tracked time that saw keyboard or mouse input,
            and <strong>Idle (%)</strong> is its complement. A dash means the agent never sampled input
            for that range — not that the employee was idle. Ranges are capped at {{ $maxDays }} days.
        </div>
    </div>
@endif
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('tabler/core/dist/css/tabler-vendors.min.css') }}">
    @include('partials.litepicker-theme')
    <style>
        #ps-range { cursor: pointer; }

        .ps-donut-value { font-size: 1.35rem; font-weight: 700; fill: var(--tblr-body-color); }
        .ps-donut-label { font-size: .7rem; fill: var(--tblr-secondary); }
        .ps-key { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; margin-right: .4rem; }

        th.ps-sort { cursor: pointer; user-select: none; white-space: nowrap; }
        th.ps-sort::after { content: "↕"; opacity: .25; margin-inline-start: .35rem; font-size: .85em; }
        th.ps-sort[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; }
        th.ps-sort[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
    </style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
<script>
// Range picker — identical contract to the Timesheet's, so a URL from one
// report opens correctly in the other.
(function () {
    const el = document.getElementById('ps-range');
    if (!el || typeof Litepicker === 'undefined') return;   // CDN blocked ⇒ hidden inputs still valid

    const form = document.getElementById('ps-form');
    const from = document.getElementById('ps-from');
    const to   = document.getElementById('ps-to');
    const iso  = (d) => d.format('YYYY-MM-DD');
    const narrow = window.matchMedia('(max-width: 767.98px)');
    const columns = () => (narrow.matches ? 1 : 2);

    const picker = new Litepicker({
        element: el, singleMode: false, allowRepick: true, autoApply: true,
        format: 'DD MMM YYYY', delimiter: ' → ',
        startDate: from.value, endDate: to.value,
        maxDate: @json(now()->toDateString()),
        numberOfMonths: columns(), numberOfColumns: columns(),
        setup: (p) => p.on('selected', (d1, d2) => {
            from.value = iso(d1);
            to.value = iso(d2 ?? d1);   // a single tap is a one-day range
            form.submit();
        }),
    });
    narrow.addEventListener('change', () => picker.setOptions({
        numberOfMonths: columns(), numberOfColumns: columns(),
    }));
})();
</script>

<script>
// Client-side sort. The range is capped at 92 days, so the whole result set is
// already on the page — sorting the DOM is a true sort, not a page-local one,
// and it keeps the CSV honest because the export reads the same rows in the
// same order.
(function () {
    const table = document.getElementById('ps-table');
    const tbody = table?.querySelector('tbody');
    if (!table || !tbody) return;

    const headers = [...table.querySelectorAll('th.ps-sort')];
    const key = (row, i, type) => {
        const cell = row.cells[i];
        const raw = cell?.dataset.sort ?? cell?.textContent.trim() ?? '';
        return type === 'num' ? (parseFloat(raw) || 0) : raw.toLowerCase();
    };

    headers.forEach((th) => th.addEventListener('click', () => {
        const i = [...th.parentNode.children].indexOf(th);
        const type = th.dataset.type === 'num' ? 'num' : 'text';
        const dir = th.getAttribute('aria-sort') === 'ascending' ? -1 : 1;
        const rows = [...tbody.rows];

        rows.sort((a, b) => {
            const x = key(a, i, type), y = key(b, i, type);
            return x < y ? -dir : x > y ? dir : 0;
        });

        headers.forEach((h) => h.removeAttribute('aria-sort'));
        th.setAttribute('aria-sort', dir === 1 ? 'ascending' : 'descending');
        rows.forEach((r) => tbody.appendChild(r));
    }));
})();
</script>

<script>
// CSV of exactly what is on screen — same range, same filter, same order.
// Built from the DOM rather than a second request, so the file can never
// disagree with the table it came from.
(function () {
    const btn = document.getElementById('ps-export');
    const table = document.getElementById('ps-table');
    if (!btn || !table) return;

    // RFC 4180: quote everything, double any embedded quote. Names carry commas.
    const cell = (v) => '"' + String(v ?? '').trim().replace(/"/g, '""') + '"';
    const values = (tr) => [...tr.children].map((td) =>
        td.dataset.csv !== undefined ? td.dataset.csv : td.textContent.replace(/\s+/g, ' ').trim());

    btn.addEventListener('click', () => {
        const head = [...table.querySelectorAll('thead th')].map((th) => th.textContent.trim());
        const body = [...table.querySelectorAll('tbody tr')].map(values);
        const foot = [...table.querySelectorAll('tfoot tr')].map(values);
        if (!body.length) return;

        const csv = [head, ...body, ...foot].map((r) => r.map(cell).join(',')).join('\r\n');
        // BOM first, or Excel reads UTF-8 names as mojibake.
        const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `people_summary_${@json($from->toDateString())}_to_${@json($to->toDateString())}.csv`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(url);
    });
})();
</script>
@endpush