@php
use App\Models\GeneralSetting;

$me = auth()->user();

$photo = $me && !empty($me->profile_photo)
    ? asset(ltrim($me->profile_photo,'/'))
    : asset('images/logo.png');

$name = $me?->name ?? 'GUEST';
$mobile = $me?->mobile ?? '----';
$ref = $me?->referral_code ?? '------';
$isActiveVal = (int)($me->is_active ?? 0);

$acctLabel = $isActiveVal === 1 ? 'VERIFIED SELLER' : 'GENERAL CUSTOMER';

$appVersion = config('app.version','1.0');

$displayName = trim((string)$name);
$words = preg_split('/\s+/u', $displayName, -1, PREG_SPLIT_NO_EMPTY);

if ($words && count($words) > 3) {
    $displayName = $words[0].' '.$words[1];
}

$socialRow = GeneralSetting::where('key','social_links')->value('value');
$social = $socialRow ? json_decode($socialRow, true) : [];

$fb = $social['facebook'] ?? '#';
$wa = $social['whatsapp'] ?? '#';
$tg = $social['telegram'] ?? '#';
$yt = $social['youtube'] ?? '#';
@endphp

{{-- ব্রাউজার থিম কালার --}}
<meta name="theme-color" content="#0878f7">
<meta name="msapplication-navbutton-color" content="#0878f7">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<header id="userHeader" class="app-header-hero">
    <div class="hdr-wrap">

        {{-- Drawer Button --}}
        <button
            id="btnDrawerOpen"
            type="button"
            aria-label="মেনু খুলুন"
            class="hdr-icon"
        >
            <i class="fa-solid fa-bars"></i>
        </button>

        {{-- Logo --}}
        <a href="{{ url('/earning-projects') }}" class="hdr-brand" aria-label="PRO EARN SHOP">
            <img src="{{ asset('images/header.png') }}" alt="PRO EARN SHOP">
        </a>

        {{-- Right Side: Notification + Profile --}}
        <div class="hdr-right-group">

            {{-- Notification --}}
            <div
                id="headerNotificationWrapper"
                class="hdr-notification-wrapper"
                data-latest-url="{{ route('user.notifications.latest') }}"
                data-index-url="{{ route('user.notifications.index') }}"
            >
                <button
                    id="notificationBellButton"
                    type="button"
                    aria-label="নোটিফিকেশন দেখুন"
                    aria-expanded="false"
                    aria-controls="notificationDropdown"
                    class="hdr-icon hdr-bell"
                >
                    <i class="fa-solid fa-bell"></i>

                    <span
                        id="notificationBellCount"
                        class="hdr-bell-count"
                        style="display: none;"
                    >
                        0
                    </span>
                </button>

                {{-- Notification Dropdown --}}
                <div
                    id="notificationDropdown"
                    class="notification-dropdown"
                    aria-hidden="true"
                >
                    <div class="notification-dropdown-header">
                        <div>
                            <h6 class="mb-0">নোটিফিকেশন</h6>

                            <small id="notificationDropdownSubtitle">
                                নতুন নোটিফিকেশন দেখুন
                            </small>
                        </div>

                        <a href="{{ route('user.notifications.index') }}">
                            সব দেখুন
                        </a>
                    </div>

                    <div
                        id="notificationDropdownList"
                        class="notification-dropdown-list"
                    >
                        <div class="notification-dropdown-state">
                            <i class="fa-solid fa-spinner fa-spin"></i>
                            <span>লোড হচ্ছে...</span>
                        </div>
                    </div>

                    <a
                        href="{{ route('user.notifications.index') }}"
                        class="notification-dropdown-footer"
                    >
                        <span>সকল নোটিফিকেশন দেখুন</span>
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </div>
            </div>

            {{-- Profile --}}
            <div class="hdr-profile-wrapper">
                <button
                    id="profileMenuBtn"
                    type="button"
                    aria-label="প্রোফাইল"
                    class="hdr-icon hdr-profile"
                >
                    @if($me && !empty($me->profile_photo))
                        <img src="{{ $photo }}" alt="Profile" class="profile-avatar-img">
                    @else
                        <span class="profile-avatar-text">{{ strtoupper(substr($me->name ?? 'U', 0, 1)) }}</span>
                    @endif
                </button>

                {{-- Profile Dropdown --}}
                <div
                    id="profileDropdown"
                    class="profile-dropdown"
                    aria-hidden="true"
                >
                    <a href="{{ url('/profile') }}" class="profile-dropdown-item">
                        <i class="fa-solid fa-user"></i>
                        <span>প্রোফাইল</span>
                    </a>
                    <hr class="profile-dropdown-divider">
                    <form method="POST" action="{{ route('user.logout') }}" style="margin:0;">
                        @csrf
                        <button type="submit" class="profile-dropdown-item logout-item">
                            <i class="fa-solid fa-sign-out-alt"></i>
                            <span>লগআউট</span>
                        </button>
                    </form>
                </div>
            </div>

        </div>

    </div>
</header>

<style>
:root {
    --header-h: 76px;

    --brand-blue-dark: #0057d8;
    --brand-blue: #0878f7;
    --brand-blue-soft: #1e9bff;
    --brand-sky: #00c2ff;
    --brand-light: #eaf5ff;
    --brand-border: #dbeafe;

    --logo-box-width: 520px;
    --logo-box-height: 82px;

    --logo-img-width: 520px;
    --logo-img-height: 78px;

    --logo-move-x: 0px;
    --logo-move-y: 0px;

    --icon-size: 42px;
    --icon-font-size: 20px;
}

/* Browser URL bar / status bar helper */
html {
    background: #0878f7;
}

body {
    background: #f8fafc;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.app-header-hero {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    overflow: visible;
    border-radius: 0 0 18px 18px;
    background: #ffffff;
    box-shadow:
        0 8px 24px rgba(8, 120, 247, 0.14),
        0 1px 0 rgba(8, 120, 247, 0.12);
    transition: all 0.2s ease-in-out;
}

.app-header-hero::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    border-radius: 0 0 18px 18px;
    background:
        radial-gradient(
            circle at 50% -35%,
            rgba(8, 120, 247, 0.16),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 100%
        );
}

.app-header-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 2px;
    content: "";
    pointer-events: none;
    opacity: 0.75;
    background: linear-gradient(
        90deg,
        transparent,
        var(--brand-blue),
        var(--brand-sky),
        transparent
    );
}

.hdr-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    height: var(--header-h);
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: transparent;
    gap: 10px;
}

/*
|--------------------------------------------------------------------------
| Header Icons
|--------------------------------------------------------------------------
*/

.hdr-icon {
    position: relative;
    z-index: 5;
    display: flex;
    width: var(--icon-size);
    height: var(--icon-size);
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--brand-blue);
    border: 0;
    border-radius: 14px;
    outline: none;
    background: #ffffff;
    box-shadow:
        0 6px 18px rgba(8, 120, 247, 0.18),
        inset 0 0 0 1px rgba(8, 120, 247, 0.16);
    font-size: var(--icon-font-size);
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out,
        background-color 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.hdr-icon:hover {
    background-color: #f6fbff;
    box-shadow:
        0 8px 22px rgba(8, 120, 247, 0.23),
        inset 0 0 0 1px rgba(8, 120, 247, 0.2);
}

.hdr-icon:focus-visible {
    outline: 3px solid rgba(8, 120, 247, 0.25);
    outline-offset: 2px;
}

.hdr-icon:active {
    transform: scale(0.92);
}

.hdr-icon i {
    color: var(--brand-blue);
    background: linear-gradient(
        135deg,
        var(--brand-blue-dark),
        var(--brand-blue),
        var(--brand-sky)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*
|--------------------------------------------------------------------------
| Logo (Clickable - Bigger)
|--------------------------------------------------------------------------
*/

.hdr-brand {
    position: relative;
    z-index: 3;
    display: flex;
    width: 100%;
    max-width: var(--logo-box-width);
    height: var(--logo-box-height);
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    transform:
        translateX(var(--logo-move-x))
        translateY(var(--logo-move-y));
}

.hdr-brand img {
    display: block;
    width: 100%;
    max-width: var(--logo-img-width);
    height: auto;
    max-height: var(--logo-img-height);
    border: 0;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    filter:
        drop-shadow(0 2px 5px rgba(8, 120, 247, 0.18))
        contrast(1.12)
        saturate(1.18);
    -webkit-user-drag: none;
}

/*
|--------------------------------------------------------------------------
| Right Group (Notification + Profile)
|--------------------------------------------------------------------------
*/

.hdr-right-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/*
|--------------------------------------------------------------------------
| Notification Bell
|--------------------------------------------------------------------------
*/

.hdr-notification-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hdr-bell-count {
    position: absolute;
    top: -6px;
    right: -7px;
    z-index: 3;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 20px;
    background: #f04438;
    box-shadow: 0 3px 10px rgba(240, 68, 56, 0.45);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: 17px;
    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Profile
|--------------------------------------------------------------------------
*/

.hdr-profile-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hdr-profile {
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 6px 18px rgba(8, 120, 247, 0.18),
        inset 0 0 0 1px rgba(8, 120, 247, 0.16);
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

.profile-avatar-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-blue);
    text-transform: uppercase;
}

/*
|--------------------------------------------------------------------------
| Profile Dropdown
|--------------------------------------------------------------------------
*/

.profile-dropdown {
    position: absolute;
    top: calc(100% + 13px);
    right: 0;
    z-index: 9999;
    display: none;
    min-width: 180px;
    overflow: hidden;
    color: #172033;
    border: 1px solid rgba(8, 120, 247, 0.13);
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow:
        0 22px 55px rgba(15, 23, 42, 0.2),
        0 5px 18px rgba(8, 120, 247, 0.12);
    transform-origin: top right;
    padding: 8px;
}

.profile-dropdown.is-open {
    display: block;
    animation: profileDropdownOpen 0.18s ease-out;
}

@keyframes profileDropdownOpen {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.profile-dropdown::before {
    position: absolute;
    top: -8px;
    right: 14px;
    width: 16px;
    height: 16px;
    content: "";
    border-top: 1px solid rgba(8, 120, 247, 0.13);
    border-left: 1px solid rgba(8, 120, 247, 0.13);
    background: #ffffff;
    transform: rotate(45deg);
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    color: #172033;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.profile-dropdown-item:hover {
    background: #f4f8ff;
    color: var(--brand-blue);
}

.profile-dropdown-item i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: #64748b;
}

.profile-dropdown-divider {
    margin: 4px 8px;
    border: none;
    border-top: 1px solid #e2e8f0;
}

.logout-item {
    color: #ef4444;
}

.logout-item:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.logout-item i {
    color: #ef4444;
}

/*
|--------------------------------------------------------------------------
| Notification Dropdown
|--------------------------------------------------------------------------
*/

.notification-dropdown {
    position: absolute;
    top: calc(100% + 13px);
    right: 0;
    z-index: 9999;
    display: none;
    width: 380px;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    color: #172033;
    border: 1px solid rgba(8, 120, 247, 0.13);
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow:
        0 22px 55px rgba(15, 23, 42, 0.2),
        0 5px 18px rgba(8, 120, 247, 0.12);
    transform-origin: top right;
}

.notification-dropdown.is-open {
    display: block;
    animation: notificationDropdownOpen 0.18s ease-out;
}

@keyframes notificationDropdownOpen {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.notification-dropdown::before {
    position: absolute;
    top: -8px;
    right: 14px;
    width: 16px;
    height: 16px;
    content: "";
    border-top: 1px solid rgba(8, 120, 247, 0.13);
    border-left: 1px solid rgba(8, 120, 247, 0.13);
    background: #ffffff;
    transform: rotate(45deg);
}

.notification-dropdown-header {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf2f7;
    background:
        radial-gradient(
            circle at right top,
            rgba(0, 194, 255, 0.1),
            transparent 45%
        ),
        #ffffff;
}

.notification-dropdown-header h6 {
    color: #172033;
    font-size: 16px;
    font-weight: 900;
}

.notification-dropdown-header small {
    display: block;
    margin-top: 3px;
    color: #788399;
    font-size: 11px;
    font-weight: 600;
}

.notification-dropdown-header a {
    flex-shrink: 0;
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.notification-dropdown-header a:hover {
    text-decoration: underline;
}

.notification-dropdown-list {
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ffffff;
    overscroll-behavior: contain;
}

.notification-dropdown-list::-webkit-scrollbar {
    width: 5px;
}

.notification-dropdown-list::-webkit-scrollbar-track {
    background: #f3f6fa;
}

.notification-dropdown-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #bfd7f3;
}

.notification-dropdown-item {
    position: relative;
    display: flex;
    gap: 11px;
    padding: 14px 16px;
    color: #172033;
    border-bottom: 1px solid #edf2f7;
    background-color: #ffffff;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

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

.notification-dropdown-item:hover {
    color: #172033;
    background-color: #f7fbff;
}

.notification-dropdown-item.is-unread {
    background:
        linear-gradient(
            90deg,
            rgba(8, 120, 247, 0.08),
            rgba(0, 194, 255, 0.025)
        );
}

.notification-dropdown-item.is-unread::before {
    position: absolute;
    top: 20px;
    left: 7px;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: var(--brand-blue);
    box-shadow: 0 0 8px rgba(8, 120, 247, 0.6);
}

.notification-item-icon {
    display: flex;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue);
    border-radius: 12px;
    background: var(--brand-light);
    font-size: 16px;
}

.notification-item-content {
    min-width: 0;
    flex: 1;
}

.notification-item-title {
    margin-bottom: 4px;
    overflow: hidden;
    color: #172033;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item-preview {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 5px;
    color: #657086;
    font-size: 11px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notification-item-time {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #9aa3b2;
    font-size: 10px;
    font-weight: 700;
}

.notification-item-time i {
    font-size: 9px;
}

.notification-dropdown-state {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 30px 20px;
    color: #7b8799;
    text-align: center;
}

.notification-dropdown-state > i {
    color: var(--brand-blue);
    font-size: 27px;
}

.notification-dropdown-state span {
    font-size: 12px;
    font-weight: 700;
}

.notification-dropdown-state.is-error > i {
    color: #f04438;
}

.notification-dropdown-footer {
    display: flex;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--brand-blue);
    border-top: 1px solid #edf2f7;
    background: #f8fbff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.notification-dropdown-footer:hover {
    color: var(--brand-blue-dark);
    background-color: #eef7ff;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 575px) {
    .notification-dropdown {
        position: fixed;
        top: calc(var(--header-h) + 8px);
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        transform-origin: top center;
    }

    .notification-dropdown::before {
        display: none;
    }

    .notification-dropdown-list {
        max-height: min(430px, calc(100vh - 190px));
    }
}

@media (max-width: 420px) {
    :root {
        --header-h: 68px;

        --logo-box-width: 160px;
        --logo-box-height: 56px;

        --logo-img-width: 150px;
        --logo-img-height: 52px;

        --icon-size: 36px;
        --icon-font-size: 17px;

        --logo-move-x: 0px;
        --logo-move-y: 0px;
    }

    .hdr-wrap {
        padding: 0 8px;
        gap: 6px;
    }

    .hdr-icon {
        border-radius: 12px;
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .hdr-brand {
        width: 140px;
        padding: 0;
        border-radius: 10px;
        height: 50px;
    }

    .hdr-brand img {
        width: 100%;
        max-height: 46px;
    }

    .hdr-bell-count {
        top: -4px;
        right: -4px;
        min-width: 18px;
        height: 18px;
        font-size: 8px;
        line-height: 14px;
        border-width: 1.5px;
    }

    .hdr-right-group {
        gap: 4px;
    }

    .profile-dropdown {
        min-width: 150px;
        right: -4px;
        padding: 6px;
        border-radius: 14px;
    }

    .profile-dropdown-item {
        padding: 8px 10px;
        font-size: 12px;
    }

    .profile-avatar-text {
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    :root {
        --logo-box-width: 120px;
        --logo-box-height: 44px;
        --logo-img-width: 110px;
        --logo-img-height: 40px;
    }

    .hdr-brand {
        width: 110px;
        height: 42px;
    }

    .hdr-brand img {
        max-height: 38px;
    }
}
</style>

<script>
(function () {
    'use strict';

    /*
    |--------------------------------------------------------------------------
    | Browser Theme Color
    |--------------------------------------------------------------------------
    */

    const themeColor = '#0878f7';

    let metaTheme = document.querySelector(
        'meta[name="theme-color"]'
    );

    if (!metaTheme) {
        metaTheme = document.createElement('meta');
        metaTheme.setAttribute('name', 'theme-color');
        document.head.appendChild(metaTheme);
    }

    metaTheme.setAttribute('content', themeColor);

    let metaNav = document.querySelector(
        'meta[name="msapplication-navbutton-color"]'
    );

    if (!metaNav) {
        metaNav = document.createElement('meta');
        metaNav.setAttribute(
            'name',
            'msapplication-navbutton-color'
        );
        document.head.appendChild(metaNav);
    }

    metaNav.setAttribute('content', themeColor);
})();

(function () {
    'use strict';

    /*
    |--------------------------------------------------------------------------
    | Body Padding According to Fixed Header
    |--------------------------------------------------------------------------
    */

    const header = document.getElementById('userHeader');
    const appBody = document.querySelector('.app-body');

    if (!header || !appBody) {
        return;
    }

    const setBodyPadding = function () {
        appBody.style.paddingTop = header.offsetHeight + 'px';
    };

    setBodyPadding();

    window.addEventListener('resize', setBodyPadding);

    if ('ResizeObserver' in window) {
        const headerResizeObserver = new ResizeObserver(
            setBodyPadding
        );

        headerResizeObserver.observe(header);
    }
})();

(function () {
    'use strict';

    /*
    |--------------------------------------------------------------------------
    | Drawer Open
    |--------------------------------------------------------------------------
    */

    const openButton = document.getElementById('btnDrawerOpen');
    const drawer = document.getElementById('drawer');
    const backdrop = document.getElementById('drawerBackdrop');

    if (!openButton || !drawer || !backdrop) {
        return;
    }

    openButton.addEventListener('click', function () {
        drawer.classList.add('open');
        backdrop.classList.add('show');

        document.body.style.overflow = 'hidden';
    });
})();

(function () {
    'use strict';

    /*
    |--------------------------------------------------------------------------
    | Profile Dropdown
    |--------------------------------------------------------------------------
    */

    const profileBtn = document.getElementById('profileMenuBtn');
    const profileDropdown = document.getElementById('profileDropdown');

    if (profileBtn && profileDropdown) {
        profileBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            profileDropdown.classList.toggle('is-open');
        });

        document.addEventListener('click', function (e) {
            if (!profileDropdown.contains(e.target) && !profileBtn.contains(e.target)) {
                profileDropdown.classList.remove('is-open');
            }
        });
    }

    /*
    |--------------------------------------------------------------------------
    | Header Notification System
    |--------------------------------------------------------------------------
    */

    const wrapper = document.getElementById(
        'headerNotificationWrapper'
    );

    const bellButton = document.getElementById(
        'notificationBellButton'
    );

    const dropdown = document.getElementById(
        'notificationDropdown'
    );

    const countElement = document.getElementById(
        'notificationBellCount'
    );

    const subtitleElement = document.getElementById(
        'notificationDropdownSubtitle'
    );

    const listElement = document.getElementById(
        'notificationDropdownList'
    );

    if (
        !wrapper ||
        !bellButton ||
        !dropdown ||
        !countElement ||
        !subtitleElement ||
        !listElement
    ) {
        return;
    }

    const latestUrl = wrapper.dataset.latestUrl;
    const indexUrl = wrapper.dataset.indexUrl;

    let isLoading = false;
    let hasLoaded = false;

    function openDropdown() {
        dropdown.classList.add('is-open');
        dropdown.setAttribute('aria-hidden', 'false');
        bellButton.setAttribute('aria-expanded', 'true');
    }

    function closeDropdown() {
        dropdown.classList.remove('is-open');
        dropdown.setAttribute('aria-hidden', 'true');
        bellButton.setAttribute('aria-expanded', 'false');
    }

    function toggleDropdown() {
        const isOpen = dropdown.classList.contains('is-open');
        if (isOpen) {
            closeDropdown();
            return;
        }
        openDropdown();
        loadNotifications(true);
    }

    function updateUnreadCount(count) {
        const unreadCount = Math.max(
            0,
            Number.parseInt(count, 10) || 0
        );

        if (unreadCount > 0) {
            countElement.textContent =
                unreadCount > 99 ? '99+' : String(unreadCount);
            countElement.style.display = 'inline-block';
            subtitleElement.textContent =
                unreadCount + 'টি unread নোটিফিকেশন';
            bellButton.setAttribute(
                'aria-label',
                unreadCount + 'টি unread নোটিফিকেশন'
            );
        } else {
            countElement.textContent = '0';
            countElement.style.display = 'none';
            subtitleElement.textContent =
                'কোনো unread নোটিফিকেশন নেই';
            bellButton.setAttribute(
                'aria-label',
                'নোটিফিকেশন দেখুন'
            );
        }
    }

    function showLoadingState() {
        listElement.innerHTML = '';
        const state = document.createElement('div');
        state.className = 'notification-dropdown-state';
        const icon = document.createElement('i');
        icon.className = 'fa-solid fa-spinner fa-spin';
        const text = document.createElement('span');
        text.textContent = 'নোটিফিকেশন লোড হচ্ছে...';
        state.appendChild(icon);
        state.appendChild(text);
        listElement.appendChild(state);
    }

    function showEmptyState() {
        listElement.innerHTML = '';
        const state = document.createElement('div');
        state.className = 'notification-dropdown-state';
        const icon = document.createElement('i');
        icon.className = 'fa-regular fa-bell-slash';
        const text = document.createElement('span');
        text.textContent = 'কোনো নোটিফিকেশন পাওয়া যায়নি';
        state.appendChild(icon);
        state.appendChild(text);
        listElement.appendChild(state);
    }

    function showErrorState(message) {
        listElement.innerHTML = '';
        const state = document.createElement('div');
        state.className = 'notification-dropdown-state is-error';
        const icon = document.createElement('i');
        icon.className = 'fa-solid fa-triangle-exclamation';
        const text = document.createElement('span');
        text.textContent = message || 'নোটিফিকেশন লোড করা যায়নি';
        state.appendChild(icon);
        state.appendChild(text);
        listElement.appendChild(state);
    }

    function createNotificationItem(notification) {
        const link = document.createElement('a');
        link.href = notification.show_url || indexUrl;
        link.className = 'notification-dropdown-item';
        if (!notification.is_read) {
            link.classList.add('is-unread');
        }
        const iconBox = document.createElement('div');
        iconBox.className = 'notification-item-icon';
        const icon = document.createElement('i');
        icon.className = notification.is_read
            ? 'fa-regular fa-envelope-open'
            : 'fa-solid fa-envelope';
        iconBox.appendChild(icon);
        const contentBox = document.createElement('div');
        contentBox.className = 'notification-item-content';
        const title = document.createElement('div');
        title.className = 'notification-item-title';
        title.textContent = notification.title || 'নোটিফিকেশন';
        const preview = document.createElement('div');
        preview.className = 'notification-item-preview';
        preview.textContent = notification.content_preview || '';
        const time = document.createElement('div');
        time.className = 'notification-item-time';
        const timeIcon = document.createElement('i');
        timeIcon.className = 'fa-regular fa-clock';
        const timeText = document.createElement('span');
        timeText.textContent = notification.created_at_human || '';
        time.appendChild(timeIcon);
        time.appendChild(timeText);
        contentBox.appendChild(title);
        contentBox.appendChild(preview);
        contentBox.appendChild(time);
        link.appendChild(iconBox);
        link.appendChild(contentBox);
        return link;
    }

    async function loadNotifications(forceReload = false) {
        if (isLoading) return;
        if (hasLoaded && !forceReload) return;
        isLoading = true;
        if (!hasLoaded || dropdown.classList.contains('is-open')) {
            showLoadingState();
        }
        try {
            const response = await fetch(latestUrl, {
                method: 'GET',
                credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            if (response.status === 401) {
                window.location.reload();
                return;
            }
            if (!response.ok) {
                throw new Error('নোটিফিকেশন লোড করা যায়নি।');
            }
            const data = await response.json();
            updateUnreadCount(data.unread_count);
            listElement.innerHTML = '';
            const notifications = Array.isArray(data.notifications)
                ? data.notifications
                : [];
            if (notifications.length === 0) {
                showEmptyState();
                hasLoaded = true;
                return;
            }
            const fragment = document.createDocumentFragment();
            notifications.forEach(function (notification) {
                fragment.appendChild(createNotificationItem(notification));
            });
            listElement.appendChild(fragment);
            hasLoaded = true;
        } catch (error) {
            showErrorState(
                error instanceof Error
                    ? error.message
                    : 'নোটিফিকেশন লোড করা যায়নি।'
            );
        } finally {
            isLoading = false;
        }
    }

    bellButton.addEventListener('click', function (event) {
        event.preventDefault();
        event.stopPropagation();
        toggleDropdown();
    });

    dropdown.addEventListener('click', function (event) {
        event.stopPropagation();
    });

    document.addEventListener('click', function () {
        closeDropdown();
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') {
            closeDropdown();
            bellButton.focus();
        }
    });

    loadNotifications(true);

    window.setInterval(function () {
        loadNotifications(true);
    }, 60000);

    document.addEventListener(
        'visibilitychange',
        function () {
            if (!document.hidden) {
                loadNotifications(true);
            }
        }
    );
})();
</script>