@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="dash-shell" x-data="liveFeed()" x-init="init()">
    <div class="fixed bottom-4 right-4 z-[60] flex w-full max-w-sm flex-col gap-2 pointer-events-none sm:bottom-6 sm:right-6"
         aria-live="polite"
         aria-label="New message alerts">
        <template x-for="toast in toasts" :key="toast.key">
            <div x-show="toast.visible"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-3 sm:translate-x-4"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:translate-x-0"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:translate-x-0"
                 x-transition:leave-end="opacity-0 translate-y-3 sm:translate-x-4"
                 class="dash-toast">
                <div class="flex items-start gap-3">
                    <span class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-600 ring-1 ring-amber-100">
                        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
                        </svg>
                    </span>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-semibold text-themed" x-text="toast.title"></p>
                        <p class="mt-1 text-xs text-themed-muted line-clamp-2" x-text="toast.body"></p>
                        <div class="mt-2.5 flex items-center gap-3">
                            <button type="button"
                                    x-show="toast.canOpen"
                                    @click="openToast(toast)"
                                    class="text-xs font-semibold text-indigo-700 hover:text-indigo-600">
                                View message
                            </button>
                            <button type="button"
                                    @click="dismissToast(toast.key)"
                                    class="text-xs text-themed-muted hover:text-themed">
                                Dismiss
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>

    <x-page-header title="Dashboard" subtitle="Live SMS monitoring overview" icon="dashboard" icon-color="cyan" animate="pulse">
        <x-slot:actions>
            @if (auth()->user()->canReceiveDashboardSoundAlerts())
            <div class="relative" @click.outside="bellOpen = false">
                <button type="button"
                        @click="toggleBell()"
                        class="dash-bell"
                        :class="{ 'ring-2 ring-amber-400/40 text-amber-600 border-amber-200': bellRinging }"
                        :title="canViewAll ? 'Notifications for all departments' : 'Notifications for your department only'"
                        aria-label="Message notifications">
                    <span :class="{ 'animate-icon-pulse': bellRinging }">
                        <x-icon name="alerts" class="w-5 h-5" />
                    </span>
                    <span x-show="unreadCount > 0"
                          x-text="unreadCount > 9 ? '9+' : unreadCount"
                          class="absolute -top-1.5 -right-1.5 inline-flex min-w-[1.125rem] items-center justify-center rounded-full bg-gradient-to-r from-amber-500 to-rose-500 px-1 py-0.5 text-[10px] font-bold text-white shadow-sm"
                          x-cloak></span>
                </button>

                <div x-show="bellOpen"
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 scale-95 -translate-y-1"
                     x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                     x-cloak
                     class="dash-bell-panel">
                    <div class="flex items-center justify-between border-b border-slate-100 px-4 py-3">
                        <div>
                            <p class="font-semibold text-sm text-themed">New messages</p>
                            <p class="text-[11px] text-themed-muted mt-0.5" x-text="canViewAll ? 'All departments' : 'Your department only'"></p>
                        </div>
                        <button type="button"
                                @click="markAllRead()"
                                x-show="unreadCount > 0"
                                class="text-xs font-semibold text-teal-700 hover:text-teal-600">
                            Mark all read
                        </button>
                    </div>

                    <div class="max-h-80 overflow-y-auto">
                        <template x-if="notifications.length === 0">
                            <p class="px-4 py-10 text-center text-sm text-themed-muted">No notifications yet</p>
                        </template>
                        <template x-for="note in notifications" :key="note.key">
                            <button type="button"
                                    @click="openNotification(note)"
                                    class="w-full text-left px-4 py-3 border-b border-slate-50 hover:bg-teal-50/60 transition-colors"
                                    :class="note.read ? 'opacity-70' : 'bg-amber-50/50'">
                                <div class="flex items-start gap-3">
                                    <span class="mt-1.5 h-2 w-2 shrink-0 rounded-full"
                                          :class="note.read ? 'bg-slate-300' : 'bg-amber-400 animate-icon-pulse'"></span>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-medium truncate text-themed" x-text="note.sender"></p>
                                        <p class="text-xs text-themed-muted mt-0.5 line-clamp-2" x-text="preview(note.message)"></p>
                                        <p class="text-[11px] text-themed-muted mt-1">
                                            <span x-text="note.department_name"></span>
                                            ·
                                            <span x-text="formatTime(note.received_at)"></span>
                                        </p>
                                    </div>
                                </div>
                            </button>
                        </template>
                    </div>
                </div>
            </div>
            @endif

            <span class="dash-live-pill"
                  :class="connected
                    ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
                    : 'border-amber-200 bg-amber-50 text-amber-700'">
                <span class="h-2 w-2 rounded-full animate-icon-pulse"
                      :class="connected ? 'bg-emerald-500' : 'bg-amber-500'"></span>
                <span x-text="connected ? 'Live feed' : 'Reconnecting…'"></span>
            </span>
        </x-slot:actions>
    </x-page-header>

    @include('partials.ephemeral-logs-banner')

    @if (auth()->user()?->company?->subscriptionPlan)
        @php $__dashPlan = auth()->user()->company->subscriptionPlan; @endphp
        <div class="glass-card-subtle p-3 px-4 mb-4 flex flex-wrap items-center gap-3 text-sm animate-slide-up">
            <span class="inline-flex items-center gap-1.5 font-semibold text-themed">
                <x-icon name="bolt" class="w-4 h-4 text-violet-400" />
                {{ $__dashPlan->name }} Plan
            </span>
            @if ($__dashPlan->is_perpetual)
                <span class="badge-info text-xs">Unlimited</span>
                <span class="text-themed-muted text-xs">Data retained indefinitely</span>
            @else
                @if (auth()->user()->company->subscription_ends_at)
                    <span class="text-themed-muted text-xs">Expires {{ auth()->user()->company->subscription_ends_at->format('M j, Y') }}</span>
                @endif
                <span class="text-themed-muted text-xs">
                    {{ $__dashPlan->max_devices ?? '∞' }} devices · {{ $__dashPlan->max_users ?? '∞' }} users · {{ $__dashPlan->max_keywords ?? '∞' }} keywords
                </span>
                @php $__retention = auth()->user()->company->dataRetentionDays(); @endphp
                <span class="text-themed-muted text-xs">
                    · Data retained {{ $__retention ? $__retention.' days' : 'indefinitely' }}
                </span>
            @endif
        </div>
    @elseif (auth()->user()?->company?->plan === 'trial')
        <div class="glass-card-subtle p-3 px-4 mb-4 flex flex-wrap items-center gap-3 text-sm animate-slide-up">
            <span class="inline-flex items-center gap-1.5 font-semibold text-themed">
                <x-icon name="bolt" class="w-4 h-4 text-amber-400" />
                Trial
            </span>
            @if (auth()->user()->company->trial_ends_at)
                <span class="text-themed-muted text-xs">Ends {{ auth()->user()->company->trial_ends_at->format('M j, Y') }}</span>
            @endif
        </div>
    @endif

    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-3 sm:gap-4 mb-6 lg:mb-8">
        <x-stat-card label="Total Messages" :value="number_format($stats['total_messages'])" icon="inbox" color="indigo" delay="0" />
        <x-stat-card label="Active Devices" :value="number_format($stats['active_devices'])" icon="devices" color="emerald" delay="60" />
        <x-stat-card label="Today's Messages" :value="number_format($stats['today_messages'])" icon="messages" color="cyan" delay="120" />
        <x-stat-card label="Failed Syncs" :value="number_format($stats['failed_syncs'])" icon="x" color="red" delay="180" />
        <x-stat-card label="Unread Alerts" :value="number_format($stats['unread_alerts'])" icon="alerts" color="amber" delay="240" />
    </div>

    <div class="dash-feed animate-slide-up" style="animation-delay: 120ms">
        <div class="dash-feed-header">
            <div>
                <h3 class="font-semibold flex items-center gap-2 text-themed">
                    <span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-cyan-50 text-cyan-700 ring-1 ring-cyan-100">
                        <x-icon name="signal" class="w-4 h-4 animate-icon-pulse" />
                    </span>
                    Live Message Feed
                </h3>
                <p class="mt-1 text-xs text-themed-muted">Newest inbound SMS across your workspace</p>
            </div>
            @if (auth()->user()->isViewer())
                <p class="text-xs text-themed-muted hidden sm:block">Click messages from your department to view full details</p>
            @endif
        </div>

        <div class="overflow-x-auto md:overflow-visible">
            <table class="data-table responsive-table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>User</th>
                        <th>Department</th>
                        <th>Sender</th>
                        <th>Message</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="item in messages" :key="item.id">
                        <tr class="transition-all duration-300"
                            :class="{
                                'dash-row-enter bg-teal-50/80 ring-1 ring-inset ring-teal-200/60': item.highlight,
                                'cursor-pointer hover:bg-slate-50/90': canViewDetails(item),
                                'bg-cyan-50/40': !canViewAll && canViewDetails(item) && !item.highlight,
                            }"
                            @click="viewMessage(item)"
                            :title="canViewDetails(item) ? 'View full message' : 'Full details available for your department only'">
                            <td data-label="Time" class="whitespace-nowrap tabular-nums text-themed-muted" x-text="formatTime(item.received_at)"></td>
                            <td data-label="User" class="font-medium text-themed" x-text="item.user_name"></td>
                            <td data-label="Department" x-text="item.department_name"></td>
                            <td data-label="Sender" class="font-medium" x-text="item.sender"></td>
                            <td data-label="Message" class="max-w-xl text-left sm:text-right break-words text-themed-muted" x-text="preview(item.message)"></td>
                            <td data-label="Type">
                                <span class="badge capitalize"
                                      :class="typeBadge(item.message_type)"
                                      x-text="item.message_type"></span>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="messages.length === 0">
                        <td colspan="6" class="!block text-center py-14 text-themed-muted">
                            <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-50 ring-1 ring-slate-100">
                                <x-icon name="inbox" class="w-6 h-6 opacity-50 animate-icon-float" />
                            </div>
                            Waiting for messages…
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        @if ($recentMessages->hasPages())
            <div class="border-t border-slate-100 px-4 py-4">
                {{ $recentMessages->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>

<script>
function liveFeed() {
    return {
        messages: @json($feedMessages),
        notifications: [],
        toasts: [],
        unreadCount: 0,
        bellOpen: false,
        bellRinging: false,
        connected: false,
        userDepartmentId: @json(auth()->user()->department_id),
        canViewAll: @json(auth()->user()->receivesDashboardAlertsForAllDepartments()),
        canSoundAlerts: @json(auth()->user()->canReceiveDashboardSoundAlerts()),
        messagesShowBase: @json(url('/messages')),
        pollUrl: @json(route('dashboard.poll-messages')),
        soundConfig: @json($notificationSoundConfig ?? ['enabled' => false]),
        lastMessageId: 0,
        pollTimer: null,
        init() {
            this.lastMessageId = this.messages.reduce((max, item) => Math.max(max, item.id), 0);

            if (window.Echo) {
                window.Echo.private('company.{{ auth()->user()->company_id ?? session('acting_company_id') }}.messages')
                    .listen('.message.received', (e) => {
                        this.handleIncomingMessage(e);
                    });
                this.connected = true;
            }

            this.startPolling();
        },
        startPolling() {
            if (this.pollTimer) {
                clearInterval(this.pollTimer);
                this.pollTimer = null;
            }

            const config = this.soundConfig || window.__NOTIFYHUB_SOUND__ || {};
            if (!config.pollEnabled || this.connected) {
                return;
            }

            const minutes = Math.max(1, Number(config.pollIntervalMinutes) || 5);
            this.pollTimer = setInterval(() => {
                if (!this.connected) {
                    this.pollForMessages();
                }
            }, minutes * 60 * 1000);
        },
        async pollForMessages() {
            try {
                const response = await fetch(`${this.pollUrl}?since_id=${this.lastMessageId}`, {
                    headers: {
                        Accept: 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    credentials: 'same-origin',
                });

                if (!response.ok) {
                    return;
                }

                const data = await response.json();
                (data.messages || []).forEach((message) => this.handleIncomingMessage(message));
            } catch (_) {
                // Ignore transient network errors during polling.
            }
        },
        handleIncomingMessage(e) {
            if (this.messages.some((item) => item.id === e.id)) {
                this.lastMessageId = Math.max(this.lastMessageId, e.id);
                return;
            }

            e.highlight = true;
            e.can_view_details = this.canViewDetails(e);
            this.messages.unshift(e);
            if (this.messages.length > 50) {
                this.messages.pop();
            }
            this.lastMessageId = Math.max(this.lastMessageId, e.id);
            setTimeout(() => e.highlight = false, 3000);

            if (this.shouldNotify(e)) {
                this.pushNotification(e);
                this.showToast(e);
                window.notifyhubPlaySound?.(e.device_name);
            }
        },
        showToast(item) {
            const deviceName = item.device_name || 'Unknown device';
            const key = `toast-${item.id}-${Date.now()}`;
            const toast = {
                key,
                id: item.id,
                title: `Message from ${deviceName}`,
                body: `${item.sender}: ${this.preview(item.message)}`,
                canOpen: this.canViewDetails(item),
                visible: true,
            };

            this.toasts.unshift(toast);
            if (this.toasts.length > 4) {
                this.toasts.pop();
            }

            setTimeout(() => this.dismissToast(key), 6000);
        },
        dismissToast(key) {
            const toast = this.toasts.find((item) => item.key === key);
            if (toast) {
                toast.visible = false;
            }
            setTimeout(() => {
                this.toasts = this.toasts.filter((item) => item.key !== key);
            }, 220);
        },
        openToast(toast) {
            if (!toast.canOpen) {
                return;
            }
            this.dismissToast(toast.key);
            window.location.href = `${this.messagesShowBase}/${toast.id}`;
        },
        shouldNotify(item) {
            if (!this.canSoundAlerts) {
                return false;
            }

            if (window.notifyhubShouldNotify) {
                return window.notifyhubShouldNotify(item, this.canViewAll, this.userDepartmentId);
            }

            return this.canViewDetails(item);
        },
        pushNotification(item) {
            this.notifications.unshift({
                key: `${item.id}-${Date.now()}`,
                id: item.id,
                sender: item.sender,
                message: item.message,
                device_name: item.device_name ?? null,
                department_name: item.department_name ?? '—',
                received_at: item.received_at,
                read: false,
            });

            if (this.notifications.length > 30) {
                this.notifications.pop();
            }

            this.unreadCount++;
            this.bellRinging = true;
            setTimeout(() => this.bellRinging = false, 2500);
        },
        toggleBell() {
            this.bellOpen = !this.bellOpen;
            if (this.bellOpen) {
                this.bellRinging = false;
            }
        },
        markAllRead() {
            this.notifications.forEach((note) => note.read = true);
            this.unreadCount = 0;
            this.bellRinging = false;
        },
        openNotification(note) {
            note.read = true;
            if (this.unreadCount > 0) {
                this.unreadCount--;
            }
            this.bellOpen = false;
            window.location.href = `${this.messagesShowBase}/${note.id}`;
        },
        canViewDetails(item) {
            if (this.canViewAll) {
                return true;
            }
            if (item.can_view_details !== undefined) {
                return item.can_view_details;
            }
            if (!this.userDepartmentId || !item.department_id) {
                return false;
            }
            return Number(item.department_id) === Number(this.userDepartmentId);
        },
        viewMessage(item) {
            if (!this.canViewDetails(item)) {
                return;
            }
            window.location.href = `${this.messagesShowBase}/${item.id}`;
        },
        preview(text) {
            if (!text) return '';
            return text.length > 80 ? text.slice(0, 80) + '…' : text;
        },
        formatTime(iso) {
            return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        },
        typeBadge(type) {
            return {
                payment: 'badge-success',
                otp: 'badge-warning',
                general: 'badge-neutral',
            }[type] || 'badge-neutral';
        },
    };
}
</script>
@endsection

@push('scripts')
    @php
        $dashboardJs = public_path('js/dashboard.js');
        $dashboardVer = is_file($dashboardJs) ? filemtime($dashboardJs) : time();
    @endphp
    @if (file_exists(public_path('hot')))
        @vite(['resources/js/dashboard.js'])
    @else
        <script type="module" src="{{ asset('js/dashboard.js') }}?v={{ $dashboardVer }}"></script>
    @endif
@endpush