@props(['callContacts' => []])

<style>
    .global-call-widget {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 75;
        font-family: inherit;
    }

    .global-call-fab {
        width: 58px;
        height: 58px;
        border: 0;
        border-radius: 50%;
        background: #0f766e;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 18px 36px rgba(15, 118, 110, 0.28);
        cursor: pointer;
        transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }

    .global-call-fab:hover {
        background: #115e59;
        transform: translateY(-2px);
        box-shadow: 0 22px 42px rgba(15, 118, 110, 0.34);
    }

    .global-call-fab i {
        font-size: 1.2rem;
    }

    .global-call-panel {
        position: absolute;
        right: 0;
        bottom: 72px;
        width: min(380px, calc(100vw - 28px));
        border: 1px solid #dbe4ef;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.2);
        overflow: hidden;
        opacity: 0;
        transform: translateY(10px) scale(0.98);
        pointer-events: none;
        transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .global-call-widget.is-open .global-call-panel {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .global-call-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.85rem 0.95rem;
        border-bottom: 1px solid #edf2f7;
        background: #fbfdff;
    }

    .global-call-title {
        color: #111827;
        font-size: 0.95rem;
        font-weight: 950;
        margin: 0;
    }

    .global-call-subtitle {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 750;
        margin: 0.18rem 0 0;
    }

    .global-call-close {
        width: 34px;
        height: 34px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
        color: #475569;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .global-call-body {
        padding: 0.9rem;
    }

    .global-call-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
        padding: 0.25rem;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #f8fafc;
        margin-bottom: 0.85rem;
    }

    .global-call-tab {
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #475569;
        min-height: 34px;
        font-size: 0.76rem;
        font-weight: 900;
        cursor: pointer;
    }

    .global-call-tab.is-active {
        background: #0f172a;
        color: #fff;
    }

    .global-call-screen {
        display: none;
    }

    .global-call-screen.is-active {
        display: block;
    }

    .global-call-number {
        width: 100%;
        min-height: 48px;
        border: 1.5px solid #b8c4d4;
        border-radius: 12px;
        background: #fbfdff;
        color: #0f172a;
        font-size: 1.1rem;
        font-weight: 850;
        text-align: center;
        padding: 0.55rem 0.75rem;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.045);
    }

    .global-call-number:focus {
        border-color: #0f766e;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    .global-keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.45rem;
        margin-top: 0.75rem;
    }

    .global-key {
        min-height: 46px;
        border: 1px solid #dbe4ef;
        border-radius: 12px;
        background: #fff;
        color: #111827;
        font-size: 1rem;
        font-weight: 950;
        cursor: pointer;
    }

    .global-key:hover {
        background: #f8fafc;
        border-color: #b8c4d4;
    }

    .global-call-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.45rem;
        margin-top: 0.75rem;
    }

    .global-call-start,
    .global-call-clear {
        min-height: 42px;
        border-radius: 12px;
        font-size: 0.82rem;
        font-weight: 950;
        cursor: pointer;
    }

    .global-call-start {
        border: 1px solid #0f766e;
        background: #0f766e;
        color: #fff;
    }

    .global-call-clear {
        width: 48px;
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

    .global-contact-search {
        width: 100%;
        min-height: 40px;
        border: 1.5px solid #b8c4d4;
        border-radius: 10px;
        background: #fbfdff;
        color: #0f172a;
        font-size: 0.82rem;
        font-weight: 750;
        padding: 0.5rem 0.7rem;
        margin-bottom: 0.65rem;
    }

    .global-contact-list {
        display: grid;
        gap: 0.45rem;
        max-height: 300px;
        overflow-y: auto;
        padding-right: 0.15rem;
    }

    .global-contact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.55rem;
        align-items: center;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        padding: 0.6rem;
    }

    .global-contact:hover {
        background: #fbfdff;
        border-color: #cbd5e1;
    }

    .global-contact-name {
        color: #111827;
        font-size: 0.82rem;
        font-weight: 950;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .global-contact-meta {
        color: #64748b;
        font-size: 0.7rem;
        font-weight: 750;
        margin-top: 0.14rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .global-contact-call {
        width: 38px;
        height: 38px;
        border: 1px solid #dcfce7;
        border-radius: 11px;
        background: #f0fdf4;
        color: #15803d;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .global-call-empty {
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        background: #f8fafc;
        color: #64748b;
        padding: 1rem;
        text-align: center;
        font-size: 0.8rem;
        font-weight: 800;
    }

    .global-live-strip {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        border-top: 1px solid #edf2f7;
        background: #f0f9ff;
        padding: 0.75rem 0.9rem;
    }

    .global-call-widget.has-live-call .global-live-strip {
        display: flex;
    }

    .global-live-label {
        color: #0369a1;
        font-size: 0.72rem;
        font-weight: 900;
    }

    .global-live-target {
        color: #0f172a;
        font-size: 0.84rem;
        font-weight: 950;
        margin-top: 0.08rem;
    }

    .global-live-end {
        border: 1px solid #fecaca;
        border-radius: 10px;
        background: #dc2626;
        color: #fff;
        min-height: 34px;
        padding: 0 0.7rem;
        font-weight: 900;
        cursor: pointer;
    }

    @media (max-width: 575.98px) {
        .global-call-widget {
            right: 14px;
            bottom: 14px;
        }

        .global-call-panel {
            right: -7px;
        }
    }
</style>

<div class="global-call-widget" id="globalCallWidget">
    <div class="global-call-panel" aria-hidden="true">
        <div class="global-call-head">
            <div>
                <p class="global-call-title">Quick Call</p>
                <p class="global-call-subtitle">Dial a number or call another employee.</p>
            </div>
            <button type="button" class="global-call-close" data-call-widget-close aria-label="Close call widget">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="global-call-body">
            <div class="global-call-tabs">
                <button type="button" class="px-3 global-call-tab is-active" data-call-widget-tab="dial">Dial
                    Number</button>
                <button type="button" class="px-3 global-call-tab" data-call-widget-tab="contacts">Contacts</button>
            </div>

            <div class="global-call-screen is-active" data-call-widget-screen="dial">
                <input type="text" class="global-call-number" data-call-number placeholder="Type phone number"
                    inputmode="tel">

                <div class="global-keypad">
                    @foreach ([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'] as $key)
                        <button type="button" class="global-key" data-call-key="{{ $key }}">{{ $key }}</button>
                    @endforeach
                </div>

                <div class="global-call-actions">
                    <button type="button" class="px-3 global-call-start" data-call-start-number>
                        <i class="fas fa-phone me-2"></i>
                        Call Number
                    </button>
                    <button type="button" class="px-3 global-call-clear" data-call-clear aria-label="Clear number">
                        <i class="fas fa-delete-left"></i>
                    </button>
                </div>
            </div>

            <div class="global-call-screen" data-call-widget-screen="contacts">
                <input type="text" class="global-contact-search" data-contact-search placeholder="Search contacts...">

                <div class="global-contact-list">
                    @forelse ($callContacts as $contact)
                        <div class="global-contact" data-contact-row data-contact-name="{{ $contact['search_name'] }}"
                            data-contact-phone="{{ $contact['search_phone'] }}">
                            <div>
                                <div class="global-contact-name">{{ $contact['name'] }}</div>
                                <div class="global-contact-meta">
                                    {{ $contact['phone'] }}
                                    @if ($contact['email'])
                                        &middot; {{ $contact['email'] }}
                                    @endif
                                </div>
                            </div>
                            <button type="button" class="global-contact-call" data-call-contact="{{ $contact['name'] }}"
                                data-call-contact-phone="{{ $contact['phone'] }}" aria-label="Call {{ $contact['name'] }}">
                                <i class="fas fa-phone"></i>
                            </button>
                        </div>
                    @empty
                        <div class="global-call-empty">No employee contacts found.</div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="global-live-strip">
            <div>
                <div class="global-live-label">Call in progress</div>
                <div class="global-live-target" data-global-live-target>Unknown</div>
            </div>
            <button type="button" class="global-live-end" data-call-end>End</button>
        </div>
    </div>

    <button type="button" class="global-call-fab" data-call-widget-toggle aria-label="Open quick call">
        <i class="fas fa-phone"></i>
    </button>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const widget = document.getElementById('globalCallWidget');
        if (!widget) {
            return;
        }

        const panel = widget.querySelector('.global-call-panel');
        const numberInput = widget.querySelector('[data-call-number]');
        const liveTarget = widget.querySelector('[data-global-live-target]');

        function openWidget() {
            widget.classList.add('is-open');
            panel.setAttribute('aria-hidden', 'false');
            setTimeout(() => numberInput && numberInput.focus(), 60);
        }

        function closeWidget() {
            widget.classList.remove('is-open');
            panel.setAttribute('aria-hidden', 'true');
        }

        function startDemoCall(label) {
            widget.classList.add('has-live-call');
            if (liveTarget) {
                liveTarget.textContent = label;
            }

            if (window.toastr) {
                toastr.info('Call preview. Integration endpoint is not connected yet.');
            }
        }

        widget.querySelector('[data-call-widget-toggle]')?.addEventListener('click', () => {
            widget.classList.contains('is-open') ? closeWidget() : openWidget();
        });

        widget.querySelector('[data-call-widget-close]')?.addEventListener('click', closeWidget);

        widget.querySelectorAll('[data-call-widget-tab]').forEach((tab) => {
            tab.addEventListener('click', () => {
                const target = tab.dataset.callWidgetTab;

                widget.querySelectorAll('[data-call-widget-tab]').forEach((item) => item.classList.remove('is-active'));
                widget.querySelectorAll('[data-call-widget-screen]').forEach((screen) => {
                    screen.classList.toggle('is-active', screen.dataset.callWidgetScreen === target);
                });

                tab.classList.add('is-active');
            });
        });

        widget.querySelectorAll('[data-call-key]').forEach((key) => {
            key.addEventListener('click', () => {
                if (numberInput) {
                    numberInput.value += key.dataset.callKey;
                    numberInput.focus();
                }
            });
        });

        widget.querySelector('[data-call-clear]')?.addEventListener('click', () => {
            if (numberInput) {
                numberInput.value = numberInput.value.slice(0, -1);
                numberInput.focus();
            }
        });

        widget.querySelector('[data-call-start-number]')?.addEventListener('click', () => {
            const value = numberInput ? numberInput.value.trim() : '';
            startDemoCall(value || 'Manual number');
        });

        widget.querySelectorAll('[data-call-contact]').forEach((button) => {
            button.addEventListener('click', () => {
                const name = button.dataset.callContact || 'Contact';
                const phone = button.dataset.callContactPhone || '';
                startDemoCall(`${name}${phone ? ' - ' + phone : ''}`);
            });
        });

        widget.querySelector('[data-call-end]')?.addEventListener('click', () => {
            widget.classList.remove('has-live-call');
            if (window.toastr) {
                toastr.success('Call ended.');
            }
        });

        widget.querySelector('[data-contact-search]')?.addEventListener('input', (event) => {
            const query = event.target.value.trim().toLowerCase();
            widget.querySelectorAll('[data-contact-row]').forEach((row) => {
                const name = row.dataset.contactName || '';
                const phone = row.dataset.contactPhone || '';
                row.style.display = !query || name.includes(query) || phone.includes(query) ? '' : 'none';
            });
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && widget.classList.contains('is-open')) {
                closeWidget();
            }
        });
    });
</script>