@extends('layouts.admin.master')

@section('content')
    @php
        $peakMessages = collect($messageTrend)->max() ?: 0;
        $peakConversations = collect($conversationTrend)->max() ?: 0;
        $contributorLabels = $topContributors
            ->map(fn($user) => $user->name ?: $user->username ?: $user->email)
            ->values()
            ->all();
        $contributorSeries = $topContributors
            ->pluck('chat_messages_count')
            ->values()
            ->all();
        $dashboardPayload = json_encode([
            'trendLabels' => $trendLabels,
            'messageTrend' => $messageTrend,
            'conversationTrend' => $conversationTrend,
            'shareSeries' => [$direct_conversations, $group_conversations, $blocked_members],
            'shareLabels' => ['Direct chat', 'Group chat', 'Akun diblokir'],
            'contributors' => [
                'labels' => $contributorLabels,
                'series' => $contributorSeries,
            ],
        ], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
    @endphp

    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-5 g-3">
        <div class="col">
            <a href="{{ route('admin.obrolan') }}" class="text-decoration-none">
                <div class="card radius-10 border-start border-4 border-primary dashboard-chat-stat-card">
                    <div class="card-body">
                        <p class="mb-1 text-secondary">Daftar Obrolan</p>
                        <h4 class="my-1 text-primary">{{ number_format($total_conversations) }}</h4>
                        <small class="text-secondary">{{ number_format($direct_conversations) }} direct, {{ number_format($group_conversations) }} grup</small>
                    </div>
                </div>
            </a>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-success dashboard-chat-stat-card">
                <div class="card-body">
                    <p class="mb-1 text-secondary">Total Pesan</p>
                    <h4 class="my-1 text-success">{{ number_format($total_messages) }}</h4>
                    <small class="text-secondary">Rata-rata {{ number_format($avg_messages_per_conversation, 1) }} pesan per thread</small>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-warning dashboard-chat-stat-card">
                <div class="card-body">
                    <p class="mb-1 text-secondary">Pesan Hari Ini</p>
                    <h4 class="my-1 text-warning">{{ number_format($messages_today) }}</h4>
                    <small class="text-secondary">{{ number_format($messages_today_ratio, 1) }}% dari total histori pesan</small>
                </div>
            </div>
        </div>
        <div class="col">
            <a href="{{ route('admin.anggota') }}" class="text-decoration-none">
                <div class="card radius-10 border-start border-4 border-info dashboard-chat-stat-card">
                    <div class="card-body">
                        <p class="mb-1 text-secondary">Peserta Aktif</p>
                        <h4 class="my-1 text-info">{{ number_format($active_chat_members) }}</h4>
                        <small class="text-secondary">Dari {{ number_format($total_anggota) }} anggota terdaftar</small>
                    </div>
                </div>
            </a>
        </div>
        <div class="col">
            <a href="{{ route('admin.obrolan.blocked') }}" class="text-decoration-none">
                <div class="card radius-10 border-start border-4 border-danger dashboard-chat-stat-card">
                    <div class="card-body">
                        <p class="mb-1 text-secondary">Daftar Blokir</p>
                        <h4 class="my-1 text-danger">{{ number_format($blocked_members) }}</h4>
                        <small class="text-secondary">{{ number_format($blocked_ratio, 1) }}% dari basis anggota</small>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-12 col-xl-8">
            <div class="card dashboard-chat-hero h-100">
                <div class="card-body">
                    <div class="d-flex flex-column flex-lg-row justify-content-between gap-3">
                        <div>
                            <span class="dashboard-chat-hero-badge">Operator tomCHAT</span>
                            <h4 class="dashboard-chat-hero-title">Dasbor kendali obrolan admin</h4>
                            <p class="dashboard-chat-hero-copy">
                                Dasbor ini memusatkan pemantauan thread, tren aktivitas pesan, pengelolaan anggota aktif,
                                dan jalur moderasi obrolan agar operasional tomCHAT terasa seperti aplikasi percakapan profesional.
                            </p>
                        </div>
                        <div class="dashboard-chat-hero-actions">
                            <a href="{{ route('admin.obrolan') }}" class="btn btn-primary">
                                <i class='bx bx-message-dots me-1'></i> Daftar Obrolan
                            </a>
                            <a href="{{ route('admin.obrolan.blocked') }}" class="btn btn-outline-danger">
                                <i class='bx bx-block me-1'></i> Daftar Blokir
                            </a>
                            <a href="{{ route('admin.anggota') }}" class="btn btn-outline-secondary">
                                <i class='bx bx-user-pin me-1'></i> Kelola Anggota
                            </a>
                        </div>
                    </div>

                    <div class="dashboard-chat-hero-highlights">
                        <div class="dashboard-chat-highlight">
                            <span class="dashboard-chat-highlight-label">Puncak pesan harian</span>
                            <strong>{{ number_format($peakMessages) }} pesan</strong>
                        </div>
                        <div class="dashboard-chat-highlight">
                            <span class="dashboard-chat-highlight-label">Puncak thread harian</span>
                            <strong>{{ number_format($peakConversations) }} thread</strong>
                        </div>
                        <div class="dashboard-chat-highlight">
                            <span class="dashboard-chat-highlight-label">Obrolan dominan</span>
                            <strong>{{ $direct_conversations >= $group_conversations ? 'Direct chat' : 'Group chat' }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="card h-100 dashboard-chat-insight-card">
                <div class="card-body">
                    <div class="dashboard-section-heading">
                        <span>Snapshot Operasional</span>
                        <h5>Kesehatan komunitas obrolan</h5>
                    </div>
                    <div class="dashboard-insight-list">
                        <div class="dashboard-insight-row">
                            <span>Anggota aktif dalam percakapan</span>
                            <strong>{{ number_format($active_chat_members) }}</strong>
                        </div>
                        <div class="dashboard-insight-row">
                            <span>Thread direct</span>
                            <strong>{{ number_format($direct_conversations) }}</strong>
                        </div>
                        <div class="dashboard-insight-row">
                            <span>Thread grup</span>
                            <strong>{{ number_format($group_conversations) }}</strong>
                        </div>
                        <div class="dashboard-insight-row">
                            <span>Rasio blokir anggota</span>
                            <strong>{{ number_format($blocked_ratio, 1) }}%</strong>
                        </div>
                        <div class="dashboard-insight-row">
                            <span>Kontribusi pesan hari ini</span>
                            <strong>{{ number_format($messages_today_ratio, 1) }}%</strong>
                        </div>
                    </div>
                    <div class="dashboard-insight-note">
                        Fokuskan operator ke `Daftar Obrolan` untuk balas thread, lalu gunakan `Daftar Blokir`
                        dan `Daftar Anggota` untuk moderasi akun bila diperlukan.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-12 col-xl-8">
            <div class="card h-100 dashboard-chart-card">
                <div class="card-body">
                    <div class="dashboard-section-heading">
                        <span>Tren 14 Hari</span>
                        <h5>Performa obrolan harian</h5>
                    </div>
                    <div id="admin-dashboard-trend-chart" class="dashboard-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="card h-100 dashboard-chart-card">
                <div class="card-body">
                    <div class="dashboard-section-heading">
                        <span>Komposisi</span>
                        <h5>Sebaran operasional obrolan</h5>
                    </div>
                    <div id="admin-dashboard-share-chart" class="dashboard-chart dashboard-chart--compact"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-12 col-xl-5">
            <div class="card h-100 dashboard-chart-card">
                <div class="card-body">
                    <div class="dashboard-section-heading">
                        <span>Kontributor</span>
                        <h5>Pengirim pesan paling aktif</h5>
                    </div>
                    <div id="admin-dashboard-contributor-chart" class="dashboard-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-7">
            <div class="card h-100 dashboard-list-card">
                <div class="card-body">
                    <div class="dashboard-section-heading">
                        <span>Thread Terkini</span>
                        <h5>Obrolan yang paling baru bergerak</h5>
                    </div>
                    <div class="dashboard-conversation-list">
                        @forelse ($latestConversations as $conversation)
                            <a href="{{ route('admin.obrolan.show', $conversation->id) }}"
                                class="dashboard-conversation-item">
                                <div class="dashboard-conversation-copy">
                                    <strong>{{ $conversation->title }}</strong>
                                    <p>{{ $conversation->latest_body }}</p>
                                </div>
                                <div class="dashboard-conversation-meta">
                                    <span>{{ number_format($conversation->messages_count) }} pesan</span>
                                    <small>{{ $conversation->latest_at }}</small>
                                </div>
                            </a>
                        @empty
                            <div class="dashboard-empty-state">
                                Belum ada thread obrolan yang bisa ditampilkan.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-12 col-xl-6">
            <div class="card h-100 dashboard-list-card">
                <div class="card-body">
                    <div class="dashboard-section-heading">
                        <span>Moderasi</span>
                        <h5>Akun yang terakhir diblokir</h5>
                    </div>
                    <div class="dashboard-block-list">
                        @forelse ($recentBlockedMembers as $user)
                            <div class="dashboard-block-item">
                                <div>
                                    <strong>{{ $user->anggota?->nama ?: $user->name }}</strong>
                                    <p>{{ $user->username ?: $user->email }}</p>
                                </div>
                                <div class="dashboard-block-meta">
                                    <span>Diblokir</span>
                                    <small>{{ $user->updated_at?->diffForHumans() }}</small>
                                </div>
                            </div>
                        @empty
                            <div class="dashboard-empty-state">
                                Belum ada anggota yang sedang diblokir.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-6">
            <div class="card h-100 dashboard-list-card">
                <div class="card-body">
                    <div class="dashboard-section-heading">
                        <span>Catatan Operator</span>
                        <h5>Prioritas pengelolaan obrolan</h5>
                    </div>
                    <div class="dashboard-priority-grid">
                        <div class="dashboard-priority-item">
                            <strong>Balas thread dari daftar obrolan</strong>
                            <p>Gunakan halaman daftar untuk memilah thread, lalu buka detail hanya saat perlu membalas atau membaca konteks penuh.</p>
                        </div>
                        <div class="dashboard-priority-item">
                            <strong>Moderasi dari dua titik</strong>
                            <p>Aksi blokir dan aktifkan tersedia di `Daftar Blokir` serta `Daftar Anggota` agar operator tidak perlu menumpuk semua kontrol dalam satu layar.</p>
                        </div>
                        <div class="dashboard-priority-item">
                            <strong>Amati tren harian</strong>
                            <p>Grafik 14 hari membantu melihat lonjakan percakapan, ritme komunitas, dan kebutuhan operator untuk intervensi lebih cepat.</p>
                        </div>
                        <div class="dashboard-priority-item">
                            <strong>Jaga halaman depan tetap terpisah</strong>
                            <p>Menu pengaturan landing page tetap hidup, tetapi operasional chat dikonsolidasikan di dashboard dan menu obrolan supaya alur admin tetap bersih.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        .dashboard-chat-stat-card,
        .dashboard-chat-hero,
        .dashboard-chat-insight-card,
        .dashboard-chart-card,
        .dashboard-list-card {
            border: 1px solid rgba(148, 163, 184, 0.16);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
        }

        .dashboard-chat-hero {
            background: linear-gradient(135deg, #0f172a 0%, #172554 52%, #1d4ed8 100%);
            color: #fff;
        }

        .dashboard-chat-hero-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.4rem 0.7rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            font-size: 0.72rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-weight: 700;
        }

        .dashboard-chat-hero-title {
            margin-top: 0.9rem;
            margin-bottom: 0.75rem;
            font-weight: 700;
            color: #fff;
        }

        .dashboard-chat-hero-copy {
            max-width: 56rem;
            margin: 0;
            color: rgba(226, 232, 240, 0.92);
            line-height: 1.75;
        }

        .dashboard-chat-hero-actions {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .dashboard-chat-hero-actions .btn-outline-danger,
        .dashboard-chat-hero-actions .btn-outline-secondary {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.24);
        }

        .dashboard-chat-hero-actions .btn-outline-danger:hover,
        .dashboard-chat-hero-actions .btn-outline-secondary:hover {
            color: #0f172a;
            background: #fff;
            border-color: #fff;
        }

        .dashboard-chat-hero-highlights {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.9rem;
            margin-top: 1.35rem;
        }

        .dashboard-chat-highlight {
            padding: 0.95rem 1rem;
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.14);
        }

        .dashboard-chat-highlight-label {
            display: block;
            color: rgba(226, 232, 240, 0.86);
            font-size: 0.78rem;
            margin-bottom: 0.35rem;
        }

        .dashboard-chat-highlight strong {
            display: block;
            color: #fff;
            font-size: 1rem;
        }

        .dashboard-section-heading span {
            display: inline-block;
            color: #2563eb;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 0.45rem;
        }

        .dashboard-section-heading h5 {
            margin-bottom: 0;
            color: #0f172a;
            font-weight: 700;
        }

        .dashboard-insight-list {
            margin-top: 1.2rem;
            display: grid;
            gap: 0.82rem;
        }

        .dashboard-insight-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 0.82rem 0.95rem;
            border-radius: 0.9rem;
            background: #f8fafc;
            border: 1px solid rgba(148, 163, 184, 0.16);
        }

        .dashboard-insight-row span {
            color: #475569;
            font-size: 0.86rem;
        }

        .dashboard-insight-row strong {
            color: #0f172a;
            font-size: 0.95rem;
        }

        .dashboard-insight-note {
            margin-top: 1rem;
            padding: 0.95rem 1rem;
            border-radius: 0.95rem;
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            color: #1e3a8a;
            font-size: 0.82rem;
            line-height: 1.6;
        }

        .dashboard-chart {
            min-height: 320px;
            margin-top: 1.2rem;
        }

        .dashboard-chart--compact {
            min-height: 280px;
        }

        .dashboard-conversation-list,
        .dashboard-block-list {
            display: grid;
            gap: 0.85rem;
            margin-top: 1.2rem;
        }

        .dashboard-conversation-item,
        .dashboard-block-item {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.95rem 1rem;
            border-radius: 1rem;
            border: 1px solid rgba(148, 163, 184, 0.16);
            background: #fff;
            text-decoration: none;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

        .dashboard-conversation-item:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
            border-color: rgba(59, 130, 246, 0.25);
        }

        .dashboard-conversation-copy,
        .dashboard-block-item > div:first-child {
            min-width: 0;
        }

        .dashboard-conversation-copy strong,
        .dashboard-block-item strong {
            display: block;
            color: #0f172a;
            font-size: 0.92rem;
            margin-bottom: 0.3rem;
        }

        .dashboard-conversation-copy p,
        .dashboard-block-item p {
            margin: 0;
            color: #64748b;
            font-size: 0.82rem;
            line-height: 1.6;
        }

        .dashboard-conversation-meta,
        .dashboard-block-meta {
            flex-shrink: 0;
            text-align: right;
        }

        .dashboard-conversation-meta span,
        .dashboard-block-meta span {
            display: block;
            color: #0f172a;
            font-size: 0.82rem;
            font-weight: 600;
        }

        .dashboard-conversation-meta small,
        .dashboard-block-meta small {
            display: block;
            margin-top: 0.18rem;
            color: #64748b;
            font-size: 0.74rem;
        }

        .dashboard-priority-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.9rem;
            margin-top: 1.2rem;
        }

        .dashboard-priority-item {
            padding: 1rem;
            border-radius: 1rem;
            background: #f8fafc;
            border: 1px solid rgba(148, 163, 184, 0.14);
        }

        .dashboard-priority-item strong {
            display: block;
            color: #0f172a;
            font-size: 0.9rem;
            margin-bottom: 0.35rem;
        }

        .dashboard-priority-item p {
            margin: 0;
            color: #64748b;
            font-size: 0.8rem;
            line-height: 1.62;
        }

        .dashboard-empty-state {
            padding: 1rem;
            border-radius: 1rem;
            background: #f8fafc;
            border: 1px dashed rgba(148, 163, 184, 0.28);
            color: #64748b;
            font-size: 0.84rem;
        }

        @media (max-width: 1199.98px) {
            .dashboard-chat-hero-highlights,
            .dashboard-priority-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .dashboard-chat-hero-highlights,
            .dashboard-priority-grid {
                grid-template-columns: 1fr;
            }

            .dashboard-conversation-item,
            .dashboard-block-item,
            .dashboard-insight-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .dashboard-conversation-meta,
            .dashboard-block-meta {
                text-align: left;
            }
        }
    </style>
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/apexcharts-bundle/js/apexcharts.min.js') }}"></script>
    <script>
        window.tomchatAdminDashboard = {!! $dashboardPayload !!};
    </script>
    @php
        $resource = resource_loader(
            blade_path: $view,
            params: [
                'page_title' => $page_attr['title'],
            ],
        );
    @endphp
    <script src="{{ $resource }}"></script>
@endsection