@extends('layouts.app')

@section('title', 'Analytics')

@section('content')
<div x-data="analyticsPage()" x-init="init()">
    <x-page-header title="Analytics" subtitle="Advanced SMS monitoring insights and trends" icon="chart" icon-color="violet">
        <x-slot:actions>
            <a :href="exportUrl()" class="btn-secondary btn-sm">
                <x-icon name="download" class="w-4 h-4" />
                Export CSV
            </a>
        </x-slot:actions>
    </x-page-header>

    <form @submit.prevent="applyFilters()" class="glass-card-subtle p-4 sm:p-5 mb-6 flex flex-col lg:flex-row gap-3 lg:items-end animate-slide-up">
        <div class="flex flex-wrap gap-2">
            @foreach (['7d' => '7 days', '30d' => '30 days', '90d' => '90 days', '365d' => '1 year'] as $key => $label)
                <button type="button"
                        @click="setRange('{{ $key }}')"
                        class="rounded-full px-3 py-1.5 text-xs font-medium border transition-colors"
                        :class="range === '{{ $key }}' ? 'border-teal-600/40 bg-teal-600/15 text-teal-700' : 'border-white/10 text-slate-400 hover:bg-white/5'">
                    {{ $label }}
                </button>
            @endforeach
            <button type="button"
                    @click="setRange('custom')"
                    class="rounded-full px-3 py-1.5 text-xs font-medium border transition-colors"
                    :class="range === 'custom' ? 'border-teal-600/40 bg-teal-600/15 text-teal-700' : 'border-white/10 text-slate-400 hover:bg-white/5'">
                Custom
            </button>
        </div>
        <div class="flex flex-col sm:flex-row gap-3 flex-1" x-show="range === 'custom'" x-cloak>
            <div class="flex-1">
                <label class="field-label text-xs">From</label>
                <input type="date" x-model="from" class="field-input">
            </div>
            <div class="flex-1">
                <label class="field-label text-xs">To</label>
                <input type="date" x-model="to" class="field-input">
            </div>
        </div>
        <button type="submit" class="btn-primary shrink-0" :disabled="loading">
            <x-icon name="search" class="w-4 h-4" />
            <span x-text="loading ? 'Loading…' : 'Apply'"></span>
        </button>
    </form>

    <p class="text-xs text-slate-500 mb-4" x-show="report.meta.scoped_to_department">
        Showing analytics for your department only.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4 mb-6">
        <div class="stat-card xl:col-span-1">
            <p class="text-xs sm:text-sm text-slate-400 font-medium">Total Messages</p>
            <p class="text-2xl sm:text-3xl font-bold mt-1.5 text-white tabular-nums" x-text="report.summary.messages.value.toLocaleString()"></p>
            <p class="text-xs mt-1.5 font-medium tabular-nums"
               :class="report.summary.messages.change >= 0 ? 'text-emerald-400' : 'text-rose-400'"
               x-text="(report.summary.messages.change >= 0 ? '+' : '') + report.summary.messages.change + '% vs previous period'"></p>
        </div>
        <div class="stat-card xl:col-span-1 sm:col-span-1">
            <p class="text-xs sm:text-sm text-slate-400 font-medium">Period</p>
            <p class="text-lg font-bold mt-1.5 text-white" x-text="report.meta.from + ' → ' + report.meta.to"></p>
            <p class="text-xs mt-1.5 text-slate-500" x-text="report.meta.days + ' days analyzed'"></p>
        </div>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3 sm:gap-4 mb-6" id="metric-grid">
        <template x-for="metric in metricCards()" :key="metric.key">
            <div class="stat-card">
                <p class="text-xs text-slate-400 font-medium" x-text="metric.label"></p>
                <p class="text-xl sm:text-2xl font-bold mt-1 text-white tabular-nums" x-text="metric.value.toLocaleString()"></p>
                <p class="text-[11px] mt-1 text-slate-500" x-show="metric.suffix" x-text="metric.suffix"></p>
            </div>
        </template>
    </div>

    <div class="glass-card p-4 sm:p-5 mb-6" x-show="report.platform_usage">
        <h3 class="font-semibold mb-1">How your team signs in</h3>
        <p class="text-xs text-slate-500 mb-4">Web portal vs Notiz Viewer app (successful company-user sign-ins in this range).</p>
        <div class="grid sm:grid-cols-3 gap-4">
            <div>
                <p class="text-xs text-slate-400">Used more</p>
                <p class="text-lg font-semibold mt-1" x-text="report.platform_usage.preferred_label"></p>
            </div>
            <div>
                <p class="text-xs text-slate-400">Web portal</p>
                <p class="text-lg font-semibold mt-1 tabular-nums" x-text="(report.platform_usage.web.unique_users || 0).toLocaleString() + ' users'"></p>
                <p class="text-xs text-slate-500" x-text="(report.platform_usage.web.logins || 0).toLocaleString() + ' sign-ins'"></p>
            </div>
            <div>
                <p class="text-xs text-slate-400">Notiz Viewer app</p>
                <p class="text-lg font-semibold mt-1 tabular-nums" x-text="(report.platform_usage.viewer.unique_users || 0).toLocaleString() + ' users'"></p>
                <p class="text-xs text-slate-500" x-text="(report.platform_usage.viewer.logins || 0).toLocaleString() + ' sign-ins'"></p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-6">
        <div class="glass-card p-4 sm:p-5 xl:col-span-2">
            <h3 class="font-semibold mb-4 flex items-center gap-2">
                <x-icon name="signal" class="w-4 h-4 text-teal-600" />
                Message Volume
            </h3>
            <div class="h-64 sm:h-72">
                <canvas id="chartVolume"></canvas>
            </div>
        </div>
        <div class="glass-card p-4 sm:p-5">
            <h3 class="font-semibold mb-4 flex items-center gap-2">
                <x-icon name="keywords" class="w-4 h-4 text-emerald-400" />
                Message Types
            </h3>
            <div class="h-64 sm:h-72 flex items-center justify-center">
                <canvas id="chartTypes"></canvas>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
        <div class="glass-card p-4 sm:p-5">
            <h3 class="font-semibold mb-4">Hourly Activity</h3>
            <div class="h-56">
                <canvas id="chartHours"></canvas>
            </div>
        </div>
        <div class="glass-card p-4 sm:p-5">
            <h3 class="font-semibold mb-4">Weekday Distribution</h3>
            <div class="h-56">
                <canvas id="chartWeekdays"></canvas>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6" x-show="report.by_department.labels.length || report.by_device.labels.length">
        <div class="glass-card p-4 sm:p-5" x-show="report.by_department.labels.length">
            <h3 class="font-semibold mb-4">By Department</h3>
            <div class="h-56">
                <canvas id="chartDepartments"></canvas>
            </div>
        </div>
        <div class="glass-card p-4 sm:p-5" x-show="report.by_device.labels.length">
            <h3 class="font-semibold mb-4">Top Devices</h3>
            <div class="h-56">
                <canvas id="chartDevices"></canvas>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
        <div class="glass-card p-4 sm:p-5">
            <h3 class="font-semibold mb-4">Alert Breakdown</h3>
            <div class="h-52 flex items-center justify-center">
                <canvas id="chartAlerts"></canvas>
            </div>
            <p class="text-xs text-slate-500 mt-2 text-center" x-show="!report.alerts.labels.length">No alerts in this period.</p>
        </div>
        <div class="glass-card p-4 sm:p-5 lg:col-span-2">
            <h3 class="font-semibold mb-4">Sync Health</h3>
            <div class="grid sm:grid-cols-3 gap-3 mb-4">
                <div class="rounded-xl border border-white/10 bg-white/5 p-4 text-center">
                    <p class="text-xs text-slate-400">Success rate</p>
                    <p class="text-2xl font-bold text-emerald-400 tabular-nums" x-text="report.sync_health.success_rate + '%'"></p>
                </div>
                <div class="rounded-xl border border-white/10 bg-white/5 p-4 text-center">
                    <p class="text-xs text-slate-400">Synced</p>
                    <p class="text-2xl font-bold text-white tabular-nums" x-text="report.sync_health.synced.toLocaleString()"></p>
                </div>
                <div class="rounded-xl border border-white/10 bg-white/5 p-4 text-center">
                    <p class="text-xs text-slate-400">Failed</p>
                    <p class="text-2xl font-bold text-rose-400 tabular-nums" x-text="report.sync_health.failed.toLocaleString()"></p>
                </div>
            </div>
            <h4 class="text-sm font-medium text-slate-300 mb-3">Activity heatmap (hour × weekday)</h4>
            <div class="overflow-x-auto">
                <div class="min-w-[640px]">
                    <div class="grid grid-cols-[auto_repeat(24,minmax(0,1fr))] gap-0.5 text-[10px]">
                        <div></div>
                        <template x-for="h in 24" :key="'h'+h">
                            <div class="text-center text-slate-500 pb-1" x-text="(h-1)"></div>
                        </template>
                        <template x-for="(day, di) in ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']" :key="day">
                            <div class="text-slate-400 pr-2 flex items-center" x-text="day"></div>
                            <template x-for="h in 24" :key="day+h">
                                <div class="aspect-square rounded-sm border border-white/5"
                                     :title="heatmapTitle(di + 1, h - 1)"
                                     :style="'background: rgba(99, 102, 241, ' + (heatmapIntensity(di + 1, h - 1) / 100) + ')'"></div>
                            </template>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
        <div class="table-wrap">
            <div class="border-b border-white/5 px-4 py-3 font-semibold">Top Senders</div>
            <div class="overflow-x-auto">
                <table class="data-table responsive-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Sender</th>
                            <th>Messages</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(row, index) in report.top_senders" :key="row.sender">
                            <tr>
                                <td data-label="#" class="text-slate-500" x-text="index + 1"></td>
                                <td data-label="Sender" class="font-mono text-sm" x-text="row.sender"></td>
                                <td data-label="Messages" class="tabular-nums" x-text="row.total.toLocaleString()"></td>
                            </tr>
                        </template>
                        <tr x-show="!report.top_senders.length">
                            <td colspan="3" class="!block text-center py-8 text-slate-500">No sender data for this period.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="table-wrap">
            <div class="border-b border-white/5 px-4 py-3 font-semibold">Device Performance</div>
            <div class="overflow-x-auto">
                <table class="data-table responsive-table">
                    <thead>
                        <tr>
                            <th>Device</th>
                            <th>Status</th>
                            <th>Messages</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="device in report.devices" :key="device.name">
                            <tr>
                                <td data-label="Device" x-text="device.name"></td>
                                <td data-label="Status">
                                    <span class="badge capitalize" :class="device.online ? 'badge-success' : 'badge-neutral'" x-text="device.online ? 'Online' : 'Offline'"></span>
                                </td>
                                <td data-label="Messages" class="tabular-nums" x-text="device.messages.toLocaleString()"></td>
                            </tr>
                        </template>
                        <tr x-show="!report.devices.length">
                            <td colspan="3" class="!block text-center py-8 text-slate-500">No devices found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
window.__ANALYTICS__ = @json($report);

function analyticsPage() {
    return {
        report: window.__ANALYTICS__,
        range: @json($range),
        from: @json($from ?? $report['meta']['from']),
        to: @json($to ?? $report['meta']['to']),
        loading: false,
        init() {
            this.$nextTick(() => {
                if (window.initNotifyHubAnalytics) {
                    window.__ANALYTICS_CHARTS__ = window.initNotifyHubAnalytics(this.report);
                }
            });
        },
        metricCards() {
            const s = this.report.summary;
            return [
                { key: 'payments', label: 'Payments', value: s.payments.value, suffix: null },
                { key: 'otps', label: 'OTP messages', value: s.otps.value, suffix: null },
                { key: 'alerts', label: 'Alerts', value: s.alerts.value, suffix: null },
                { key: 'failed', label: 'Failed syncs', value: s.failed_syncs.value, suffix: null },
                { key: 'avg', label: 'Avg / day', value: s.avg_per_day.value, suffix: null },
                { key: 'devices', label: 'Active devices', value: s.active_devices.value, suffix: 'online now' },
            ];
        },
        setRange(value) {
            this.range = value;
            if (value !== 'custom') {
                this.applyFilters();
            }
        },
        exportUrl() {
            const params = new URLSearchParams({ range: this.range });
            if (this.range === 'custom') {
                if (this.from) params.set('from', this.from);
                if (this.to) params.set('to', this.to);
            }
            return @json(route('analytics.export')) + '?' + params.toString();
        },
        heatmapIntensity(dow, hour) {
            const point = this.report.heatmap.points.find(p => p.dow === dow && p.hour === hour);
            return point ? point.intensity : 0;
        },
        heatmapTitle(dow, hour) {
            const point = this.report.heatmap.points.find(p => p.dow === dow && p.hour === hour);
            const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
            return point ? `${days[dow-1]} ${hour}:00 — ${point.value} messages` : `${days[dow-1]} ${hour}:00 — 0`;
        },
        async applyFilters() {
            this.loading = true;
            try {
                const params = new URLSearchParams({ range: this.range });
                if (this.range === 'custom') {
                    if (this.from) params.set('from', this.from);
                    if (this.to) params.set('to', this.to);
                }
                const response = await fetch(@json(route('analytics.data')) + '?' + params.toString(), {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                });
                if (!response.ok) throw new Error('Failed to load analytics');
                this.report = await response.json();
                window.__ANALYTICS__ = this.report;
                if (window.__ANALYTICS_CHARTS__?.destroy) {
                    window.__ANALYTICS_CHARTS__.destroy();
                }
                this.$nextTick(() => {
                    window.__ANALYTICS_CHARTS__ = window.initNotifyHubAnalytics(this.report);
                });
                const url = new URL(window.location.href);
                url.searchParams.set('range', this.range);
                if (this.range === 'custom') {
                    if (this.from) url.searchParams.set('from', this.from);
                    if (this.to) url.searchParams.set('to', this.to);
                } else {
                    url.searchParams.delete('from');
                    url.searchParams.delete('to');
                }
                window.history.replaceState({}, '', url);
            } catch (e) {
                console.error(e);
            } finally {
                this.loading = false;
            }
        },
    };
}
</script>

@php
    $analyticsJs = public_path('js/analytics.js');
    $analyticsVer = is_file($analyticsJs) ? filemtime($analyticsJs) : time();
@endphp
@if (file_exists(public_path('hot')))
    @vite(['resources/js/analytics.js'])
@else
    <script type="module" src="{{ asset('js/analytics.js') }}?v={{ $analyticsVer }}"></script>
@endif
@endsection