/* Add custom Js styles below */ 
(function () {
    const CONSULTATION_LINK = 'https://hakeemcare.com/patient/view-urgent-consultation-categories';
    const BTN_ID = 'independent-doctor-link';
    const STYLE_ID = 'doctor-btn-styles';
    let injectedDesktop = false;
    let injectedMobile = false;

    if (!document.querySelector('link[href*="font-awesome"]')) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css';
        document.head.appendChild(link);
    }

    if (!document.getElementById(STYLE_ID)) {
        const style = document.createElement('style');
        style.id = STYLE_ID;
        style.innerHTML = `
            #${BTN_ID}-desktop {
                list-style: none !important;
                cursor: pointer;
                display: flex !important;
                align-items: center;
                padding: 0 15px;
            }
            #${BTN_ID}-desktop a {
                display: flex !important;
                align-items: center;
                gap: 8px;
                color: #333 !important;
                font-size: 14px !important;
                font-weight: 500 !important;
                text-decoration: none !important;
                white-space: nowrap;
            }
            #${BTN_ID}-desktop a i { color: #1a304d; font-size: 16px; }
            #${BTN_ID}-desktop a:hover { opacity: 0.75; }

            #${BTN_ID}-mobile {
                display: flex !important;
                align-items: center;
                gap: 6px;
                padding: 0 8px;
                cursor: pointer;
                text-decoration: none !important;
                color: #333 !important;
                font-size: 13px !important;
                font-weight: 500 !important;
                font-family: inherit !important;
            }
            #${BTN_ID}-mobile i { font-size: 20px; color: #1a304d; }
            #${BTN_ID}-mobile:hover { opacity: 0.75; }

            @media (min-width: 1024px) {
                #${BTN_ID}-mobile { display: none !important; }
            }
            @media (max-width: 1023px) {
                #${BTN_ID}-desktop { display: none !important; }
            }
        `;
        document.head.appendChild(style);
    }

    function injectDesktop() {
        if (injectedDesktop || document.getElementById(BTN_ID + '-desktop')) return;
        const menu = document.querySelector('ul.main-menu');
        if (!menu) return;

        const li = document.createElement('li');
        li.id = BTN_ID + '-desktop';
        li.className = 'root-level change-menu-dir';
        li.innerHTML = `
            <a href="${CONSULTATION_LINK}" target="_blank" rel="noopener noreferrer">
                <i class="fa-solid fa-user-doctor"></i>
                <span>استشر طبيبك</span>
            </a>
        `;
        const items = menu.querySelectorAll(':scope > li');
        const target = items[2] ?? items[items.length - 1];
        target.insertAdjacentElement('afterend', li);
        injectedDesktop = true;
    }

    function injectMobile() {
        if (injectedMobile || document.getElementById(BTN_ID + '-mobile')) return;
        const leftSide = document.querySelector('.left-side');
        if (!leftSide) return;

        const a = document.createElement('a');
        a.id = BTN_ID + '-mobile';
        a.href = CONSULTATION_LINK;
        a.target = '_blank';
        a.rel = 'noopener noreferrer';
        a.innerHTML = `
            <i class="fa-solid fa-user-doctor"></i>
            <span>استشر طبيبك</span>
        `;
        leftSide.prepend(a);
        injectedMobile = true;
    }

    function injectAll() {
        injectDesktop();
        injectMobile();
        if (injectedDesktop && injectedMobile) observer.disconnect();
    }

    const observer = new MutationObserver(injectAll);
    observer.observe(document.body, { childList: true, subtree: true });
    injectAll();
})();