{{-- Modal điểm danh tài khoản Zalo cần đăng nhập lại, hiện MỘT lần ngay sau khi đăng nhập.

     Dữ liệu do `ShareZaloAccountHealth` chia sẻ; rỗng (hoặc người dùng đã xem trong phiên
     này) thì cả khối biến mất, không tốn một dòng HTML nào.

     CSS và JS nằm luôn trong tệp này chứ không nhét vào zalo-admin.css/zalo-chat.css: partial
     được nhúng ở CẢ hai loại trang (layout admin và màn chat đứng riêng), hai trang đó không
     dùng chung bảng style nào, tách ra là phải chép đôi. --}}
@php($zaloHealthAlerts = $zaloAccountHealthAlerts ?? [])
@php($unitExpiry = $unitExpiryAlert ?? null)

@if (! empty($zaloHealthAlerts) || $unitExpiry)
    {{-- Đã vẽ ra màn hình rồi mới hạ cờ: lần tải trang sau không hiện lại nữa, đúng nghĩa
         "một lần mỗi lần đăng nhập". --}}
    @php(session()->forget('zalo_health_alert_pending'))

    <style>
        .zh-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1080;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            background: rgba(24, 14, 32, .55);
        }

        .zh-modal {
            width: 100%;
            max-width: 640px;
            max-height: calc(100vh - 32px);
            display: flex;
            flex-direction: column;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 24px 60px rgba(24, 14, 32, .28);
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
            color: #201629;
        }

        .zh-head {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 18px 20px 12px;
            border-bottom: 1px solid #f2ecf5;
        }

        .zh-head-icon {
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #fff1f2;
            color: #e11d48;
            font-size: 20px;
        }

        .zh-title {
            margin: 0;
            font-size: 1rem;
            font-weight: 800;
        }

        .zh-sub {
            margin: 2px 0 0;
            font-size: .8125rem;
            color: #746a7d;
        }

        .zh-close {
            margin-left: auto;
            border: 0;
            background: transparent;
            font-size: 22px;
            line-height: 1;
            color: #746a7d;
            cursor: pointer;
        }

        .zh-body {
            overflow-y: auto;
            padding: 12px 20px;
        }

        .zh-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid #f7f3f9;
        }

        .zh-item:last-child {
            border-bottom: 0;
        }

        .zh-item-main {
            min-width: 0;
            flex: 1 1 auto;
        }

        .zh-name {
            font-weight: 700;
            font-size: .9375rem;
            overflow-wrap: anywhere;
        }

        .zh-meta {
            margin-top: 2px;
            font-size: .8125rem;
            color: #746a7d;
            overflow-wrap: anywhere;
        }

        .zh-chip {
            flex: 0 0 auto;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 700;
            white-space: nowrap;
            background: #fff1f2;
            color: #be123c;
        }

        .zh-chip-channel {
            background: #f4eefa;
            color: #5a2479;
        }

        .zh-foot {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
            padding: 14px 20px 18px;
            border-top: 1px solid #f2ecf5;
        }

        .zh-btn {
            min-height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 16px;
            border-radius: 12px;
            border: 1px solid #e5dce8;
            background: #fff;
            color: inherit;
            font-weight: 700;
            font-size: .875rem;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
        }

        .zh-btn-primary {
            border-color: transparent;
            background: linear-gradient(135deg, #d92870, #ff7a1a);
            color: #fff;
        }

        /* Khối "đơn vị sắp hết hạn" - chỉ admin đơn vị thấy (User::unitExpiryWarning). */
        .zh-expiry {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 4px 0 8px;
            padding: 12px 14px;
            border: 1px solid #fecaca;
            border-radius: 12px;
            background: #fef2f2;
        }

        .zh-expiry-icon {
            flex: 0 0 auto;
            color: #dc2626;
            font-size: 18px;
            line-height: 1.2;
        }

        .zh-expiry .zh-meta {
            color: #7f1d1d;
        }

        @media (max-width: 575.98px) {
            .zh-foot .zh-btn {
                flex: 1 1 100%;
            }
        }
    </style>

    <div class="zh-backdrop" id="zaloHealthModal" role="dialog" aria-modal="true" aria-labelledby="zaloHealthTitle">
        <div class="zh-modal">
            <div class="zh-head">
                <span class="zh-head-icon" aria-hidden="true">!</span>
                <div>
                    <h2 class="zh-title" id="zaloHealthTitle">
                        @if ($unitExpiry)
                            Đơn vị sắp hết hạn sử dụng
                        @else
                            {{ count($zaloHealthAlerts) }} tài khoản Zalo cần đăng nhập lại
                        @endif
                    </h2>
                    <p class="zh-sub">
                        @if ($unitExpiry && ! empty($zaloHealthAlerts))
                            Kèm theo {{ count($zaloHealthAlerts) }} tài khoản Zalo cần đăng nhập lại ở bên dưới.
                        @elseif ($unitExpiry)
                            Gia hạn trước ngày hết hạn để cả đơn vị không bị khoá đăng nhập.
                        @else
                            Những tài khoản dưới đây đang không nhận/gửi được tin. Vào trang
                            Tài khoản Zalo để đăng nhập lại.
                        @endif
                    </p>
                </div>
                <button type="button" class="zh-close" data-zalo-health-close aria-label="Đóng">&times;</button>
            </div>

            <div class="zh-body">
                @if ($unitExpiry)
                    <div class="zh-expiry" role="alert">
                        <span class="zh-expiry-icon" aria-hidden="true">&#9888;</span>
                        <div class="zh-item-main">
                            <div class="zh-name">
                                {{ $unitExpiry['unitName'] }}
                                @if ($unitExpiry['packageName'])
                                    · Gói {{ $unitExpiry['packageName'] }}
                                @endif
                            </div>
                            <div class="zh-meta">
                                Hết hạn ngày <strong>{{ $unitExpiry['expiresAt'] }}</strong> ({{ $unitExpiry['label'] }}).
                                Sau ngày này toàn bộ tài khoản của đơn vị sẽ bị khoá đăng nhập.
                                Vui lòng liên hệ Nhà cung cấp dịch vụ để được gia hạn.
                            </div>
                        </div>
                    </div>
                @endif

                @foreach ($zaloHealthAlerts as $alert)
                    <div class="zh-item">
                        <div class="zh-item-main">
                            <div class="zh-name">{{ $alert['name'] }}</div>
                            <div class="zh-meta">
                                <span class="zh-chip zh-chip-channel">{{ $alert['channelLabel'] }}</span>
                                {{ $alert['reason'] }}
                                @if ($alert['ownerName'])
                                    · Chủ tài khoản: {{ $alert['ownerName'] }}
                                @endif
                                @if ($alert['lastSeenLabel'])
                                    · Hoạt động lần cuối {{ $alert['lastSeenLabel'] }}
                                @endif
                            </div>
                        </div>
                        <span class="zh-chip">{{ $alert['statusLabel'] }}</span>
                    </div>
                @endforeach
            </div>

            <div class="zh-foot">
                @if (! empty($zaloHealthAlerts))
                    <button type="button" class="zh-btn" data-zalo-health-close>Để sau</button>
                    <a class="zh-btn zh-btn-primary" href="{{ route('zalo-accounts.page') }}">
                        Đi tới trang Tài khoản Zalo
                    </a>
                @else
                    <button type="button" class="zh-btn zh-btn-primary" data-zalo-health-close>Đã hiểu</button>
                @endif
            </div>
        </div>
    </div>

    <script>
        (function () {
            const modal = document.getElementById('zaloHealthModal');
            if (!modal) return;

            const close = () => modal.remove();

            modal.querySelectorAll('[data-zalo-health-close]').forEach(btn => btn.addEventListener('click', close));
            // Bấm ra nền ngoài hoặc Esc cũng đóng - modal này chỉ để báo tin, không được
            // phép giam người dùng lại.
            modal.addEventListener('click', event => {
                if (event.target === modal) close();
            });
            document.addEventListener('keydown', event => {
                if (event.key === 'Escape') close();
            });
        })();
    </script>
@endif