@extends('layouts.app')

@section('title', _lang('App Usage'))

@php
    // Seconds → Bangla "২ ঘ ১৫ মি" / "৮ মি" / "< ১ মি".
    function aa_dur($secs) {
        $secs = (int) $secs;
        if ($secs < 60) return $secs <= 0 ? '—' : '< ১ মি';
        $m = intdiv($secs, 60);
        $h = intdiv($m, 60);
        $m = $m % 60;
        return $h > 0 ? "{$h} ঘ {$m} মি" : "{$m} মি";
    }
    function aa_ago($dt) {
        if (! $dt) return '—';
        $mins = (int) $dt->diffInMinutes(now());
        if ($mins < 1) return 'এইমাত্র';
        if ($mins < 60) return "{$mins} মিনিট আগে";
        $h = intdiv($mins, 60);
        if ($h < 24) return "{$h} ঘণ্টা আগে";
        return $dt->format('d/m/Y');
    }
@endphp

@section('content')
<style>
    .uz { --ink:#0f172a; --muted:#64748b; --line:#eef1f6; --indigo:#6366f1; --green:#10b981; }
    .uz-head { margin:18px 0 22px; }
    .uz-head h4 { font-size:22px; font-weight:700; color:var(--ink); margin:0; }
    .uz-head p { color:var(--muted); margin:4px 0 0; font-size:13.5px; }
    .uz-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; height:100%; }
    .uz-card-t { font-size:13px; font-weight:700; color:var(--ink); margin:0 0 14px; display:flex; justify-content:space-between; align-items:center; }
    .uz-card-t small { color:var(--muted); font-weight:500; }
    .uz-kpi { background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; align-items:center; gap:14px; }
    .uz-kpi .ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; }
    .uz-kpi .lbl { font-size:12.5px; color:var(--muted); }
    .uz-kpi .num { font-size:26px; font-weight:800; color:var(--ink); line-height:1.1; }
    .uz-kpi .num small { font-size:12px; font-weight:500; color:var(--muted); }
    .uz-live { width:9px; height:9px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:uzpulse 1.6s infinite; }
    @keyframes uzpulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }
    .uz-tbl { width:100%; border-collapse:collapse; }
    .uz-tbl th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); padding:0 10px 10px; font-weight:600; }
    .uz-tbl td { padding:10px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink); }
    .uz-tbl td .mut { color:var(--muted); font-size:12.5px; }
    .uz-empty { text-align:center; color:var(--muted); padding:26px 0; font-size:13.5px; }
    .uz-pill { background:#eef2ff; color:var(--indigo); font-weight:700; font-size:12px; border-radius:999px; padding:2px 10px; }
</style>

<div class="uz">
    @include('partials.alerts')

    <div class="uz-head">
        <h4>{{ _lang('App Usage') }}</h4>
        <p>কে এখন অ্যাপ ব্যবহার করছে এবং কে কত সময় ব্যবহার করছে।</p>
    </div>

    {{-- KPI tiles --}}
    <div class="row g-3 mb-3">
        <div class="col-xl-4 col-sm-6">
            <div class="uz-kpi">
                <div class="ic" style="background:#ecfdf5;color:#10b981;"><span class="uz-live"></span></div>
                <div>
                    <div class="lbl">এখন ব্যবহার করছে</div>
                    <div class="num">{{ number_format($kpi['now']) }} <small>জন · শেষ ৩০ মিনিট</small></div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-sm-6">
            <div class="uz-kpi">
                <div class="ic" style="background:#eef2ff;color:#6366f1;"><i class="bi bi-people-fill"></i></div>
                <div>
                    <div class="lbl">আজ সক্রিয়</div>
                    <div class="num">{{ number_format($kpi['today_users']) }} <small>জন</small></div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-sm-6">
            <div class="uz-kpi">
                <div class="ic" style="background:#fff7ed;color:#f59e0b;"><i class="bi bi-clock-fill"></i></div>
                <div>
                    <div class="lbl">আজ মোট ব্যবহার</div>
                    <div class="num">{{ $kpi['today_hours'] }} <small>ঘণ্টা</small></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Charts --}}
    @php
        $uLabels = collect($daily)->map(fn ($d) => \Illuminate\Support\Carbon::parse($d->date)->format('d M'))->values();
        $uUsers  = collect($daily)->map(fn ($d) => (int) $d->users)->values();
        $uHours  = collect($daily)->map(fn ($d) => (float) $d->hours)->values();
        $tuNames = $topUsers->map(fn ($r) => $r->name ?: '—')->values();
        $tuHours = $topUsers->map(fn ($r) => round($r->week_secs / 3600, 1))->values();
    @endphp
    <div class="row g-3 mb-3">
        <div class="col-xl-8">
            <div class="uz-card">
                <div class="uz-card-t">দৈনিক সক্রিয়তা <small>গত ১৪ দিন</small></div>
                <div id="uzDaily" style="min-height:300px;"></div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="uz-card">
                <div class="uz-card-t">শীর্ষ ব্যবহারকারী <small>৭ দিন</small></div>
                @if ($topUsers->isEmpty())
                    <div class="uz-empty">এখনো তথ্য নেই।</div>
                @else
                    <div id="uzTop" style="min-height:300px;"></div>
                @endif
            </div>
        </div>
    </div>

    {{-- Now using --}}
    <div class="row g-3 mb-3">
        <div class="col-12">
            <div class="uz-card">
                <div class="uz-card-t"><span><span class="uz-live me-2"></span>এখন ব্যবহার করছে</span> <small>{{ $nowUsing->count() }} জন</small></div>
                @if ($nowUsing->isEmpty())
                    <div class="uz-empty"><i class="bi bi-moon-stars d-block fs-4 mb-2"></i>এই মুহূর্তে কেউ সক্রিয় নেই।</div>
                @else
                    <div class="table-responsive">
                        <table class="uz-tbl">
                            <thead><tr><th>ব্যবহারকারী</th><th>সমিতি</th><th>আজকের সময়</th><th>সর্বশেষ সক্রিয়</th></tr></thead>
                            <tbody>
                                @foreach ($nowUsing as $u)
                                    <tr>
                                        <td>{{ $u->name }}</td>
                                        <td><span class="mut">{{ $u->organization }}</span></td>
                                        <td>{{ aa_dur($u->today_secs) }}</td>
                                        <td style="color:#10b981;">{{ aa_ago($u->last_seen) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Usage history --}}
    <div class="row g-3">
        <div class="col-12">
            <div class="uz-card">
                <div class="uz-card-t">ব্যবহারের ইতিহাস <small>গত ৭ দিন</small></div>
                <div class="table-responsive">
                    <table class="uz-tbl">
                        <thead>
                            <tr>
                                <th>ব্যবহারকারী</th><th>সমিতি</th>
                                <th>আজ</th><th>৭ দিন</th><th>সেশন (আজ)</th><th>সর্বশেষ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $r)
                                <tr>
                                    <td style="font-weight:600;">{{ $r->name }}</td>
                                    <td><span class="mut">{{ $r->organization }}</span></td>
                                    <td>{{ aa_dur($r->today_secs) }}</td>
                                    <td style="font-weight:700;">{{ aa_dur($r->week_secs) }}</td>
                                    <td><span class="uz-pill">{{ $r->sessions ?: 0 }}</span></td>
                                    <td><span class="mut">{{ aa_ago($r->last_seen) }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="uz-empty">এখনো কোনো ব্যবহারের তথ্য নেই।</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    (function () {
        if (!window.ApexCharts) return;
        var daily = document.querySelector('#uzDaily');
        if (daily) {
            new ApexCharts(daily, {
                chart: { height: 300, type: 'line', toolbar: { show: false }, fontFamily: 'inherit', stacked: false },
                series: [
                    { name: 'সক্রিয় ব্যবহারকারী', type: 'column', data: @json($uUsers) },
                    { name: 'ঘণ্টা', type: 'line', data: @json($uHours) }
                ],
                colors: ['#6366f1', '#f59e0b'],
                stroke: { width: [0, 3], curve: 'smooth' },
                plotOptions: { bar: { columnWidth: '50%', borderRadius: 4 } },
                fill: { opacity: [0.85, 1] },
                dataLabels: { enabled: false },
                xaxis: { categories: @json($uLabels), tickAmount: 7, axisBorder: { show: false }, axisTicks: { show: false }, labels: { style: { colors: '#94a3b8', fontSize: '11px' } } },
                yaxis: [
                    { title: { text: 'ব্যবহারকারী', style: { color: '#94a3b8', fontWeight: 500 } }, min: 0, forceNiceScale: true, labels: { style: { colors: '#94a3b8' } } },
                    { opposite: true, title: { text: 'ঘণ্টা', style: { color: '#94a3b8', fontWeight: 500 } }, min: 0, labels: { style: { colors: '#94a3b8' } } }
                ],
                grid: { borderColor: '#eef1f6', strokeDashArray: 4 },
                legend: { position: 'top', horizontalAlign: 'right', fontFamily: 'inherit', markers: { radius: 12 } },
                tooltip: { theme: 'light', shared: true }
            }).render();
        }
        var top = document.querySelector('#uzTop');
        if (top) {
            new ApexCharts(top, {
                chart: { height: 300, type: 'bar', toolbar: { show: false }, fontFamily: 'inherit' },
                series: [{ name: 'ঘণ্টা', data: @json($tuHours) }],
                colors: ['#6366f1'],
                plotOptions: { bar: { horizontal: true, borderRadius: 5, barHeight: '62%', distributed: true } },
                dataLabels: { enabled: true, formatter: function (v) { return v + 'ঘ'; }, style: { fontSize: '11px', colors: ['#fff'] } },
                xaxis: { categories: @json($tuNames), labels: { style: { colors: '#94a3b8', fontSize: '11px' } }, axisBorder: { show: false }, axisTicks: { show: false } },
                yaxis: { labels: { style: { colors: '#475569', fontSize: '12px' } } },
                grid: { borderColor: '#eef1f6', strokeDashArray: 4 },
                legend: { show: false },
                tooltip: { theme: 'light' }
            }).render();
        }
    })();
</script>
@endpush
@endsection