@php
    $lead = json_decode(html_entity_decode($lead));
@endphp

<style>
    .ig-chat-toggle {
        position: fixed;
        bottom: 100px;
        right: 24px;
        background: linear-gradient(135deg, #0d6efd, #4f46e5);
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 56px;
        height: 56px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ig-chat-toggle:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .ig-chat-container {
        display: none;
        position: fixed;
        bottom: 100px;
        right: 85px;
        width: 360px;
        height: 500px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        flex-direction: column;
        overflow: hidden;
        z-index: 999;
        animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
        from {
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .ig-chat-header {
        background: linear-gradient(135deg, #E1306C, #C13584);
        color: #fff;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ig-header-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ig-avatar {
        width: 35px;
        height: 35px;
        object-fit: cover;
    }

    .ig-header-text {
        display: flex;
        flex-direction: column;
    }

    .ig-chat-title {
        font-size: 16px;
        font-weight: 600;
    }

    .ig-close-btn {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 4px;
    }

    .ig-close-btn svg {
        width: 20px;
        height: 20px;
    }

    .ig-chat-messages {
        flex: 1;
        padding: 16px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ig-chat-message {
        display: flex;
        flex-direction: column;
        max-width: 75%;
        padding: 10px 14px;
        border-radius: 16px;
        font-size: 14px;
        line-height: 1.4;
    }

    .ig-chat-message.bot {
        background: #f1f1f1;
        color: #333;
        align-self: flex-start;
    }

    .ig-chat-message.user {
        background: #C13584;
        color: #fff;
        align-self: flex-end;
    }

    .ig-chat-input-area {
        display: flex;
        align-items: center;
        padding: 12px;
        background: #fff;
        border-top: 1px solid #e5e7eb;
    }

    .ig-chat-input-area input {
        flex: 1;
        padding: 10px 16px;
        border: 1px solid #e5e7eb;
        border-radius: 24px;
        outline: none;
        font-size: 14px;
        transition: border-color 0.2s ease;
    }

    .ig-chat-input-area input:focus {
        border-color: #C13584;
    }

    .ig-chat-input-area button {
        background: none;
        border: none;
        color: #C13584;
        cursor: pointer;
        padding: 8px;
        margin-left: 8px;
        display: flex;
        align-items: center;
    }

    .ig-chat-input-area button svg {
        width: 20px;
        height: 20px;
    }

    @media (max-width: 480px) {
        .ig-chat-container {
            width: 90%;
            height: 80vh;
            bottom: 80px;
            right: 5%;
        }
    }
</style>

<!-- Instagram Chat Toggle Button -->
@if ($lead->instagram_psid)
<button class="ig-chat-toggle" id="igChatToggle" onclick="toggleIgChat()">
    <img src="{{ asset('assets/images/lead/instagram_color.png') }}" alt="Instagram Icon" class="ig-avatar" />
</button>
@endif

<!-- Instagram Chat Box -->
<div class="ig-chat-container" id="igChatContainer">
    <div class="ig-chat-header">
        <div class="ig-header-content">
            <img src="{{ asset('assets/images/lead/instagram.png') }}" alt="Instagram Avatar" class="ig-avatar" />
            <div class="ig-header-text">
                <span class="ig-chat-title">{{ $lead->first_name . ' ' . $lead->last_name }}</span>
            </div>
        </div>
        <button class="ig-close-btn" onclick="toggleIgChat()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>
    <div class="ig-chat-messages" id="ig-chat-box"></div>
    <form action="">
        <div class="ig-chat-input-area">
            <input type="text" id="ig-message" placeholder="Type a message..." />
            <button id="ig-send-message">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
                </svg>
            </button>
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function toggleIgChat() {
        const chat = document.getElementById("igChatContainer");
        chat.style.display = chat.style.display === "flex" ? "none" : "flex";

        const messanger = document.getElementById("chatContainer");
        messanger.style.display ="none";

        const chatBox = document.getElementById('ig-chat-box');
         setTimeout(() => {
            const lastMessage = chatBox.lastElementChild;
            if (lastMessage) lastMessage.scrollIntoView({ behavior: "smooth" });
        }, 300);
    }

    const igLeadId = "{{ $lead->id }}";

    function loadIgMessages() {
        const chatBox = document.getElementById('ig-chat-box');
        if (!chatBox) return;

        $('#ig-chat-box').html(
            '<div class="ig-chat-message" style="align-self: center; color: #666; padding: 10px; font-style: italic;">Loading Instagram messages...</div>'
        );

        $.ajax({
            url: `/api/lead/${igLeadId}/chat/messages`,
            method: 'GET',
            success: function (data) {
                $('#ig-chat-box').html('');
                data.forEach(msg => {
                     if (msg.sender === 'admin') {
                         $('#ig-chat-box').append(
                             `<div class="chat-message bot" style="align-self: flex-end; background: #f5f5f5;">${msg.sender}: ${msg.message}</div>`
                         );
                     } else {
                         $('#ig-chat-box').append(
                             `<div class="chat-message bot" style="align-self: flex-start; background: #6b46c1; color: #fff;">${msg.sender}: ${msg.message}</div>`
                         );
                     }
                });

            
            },
            error: function (err) {
                console.error('Failed to load Instagram messages:', err);
                $('#ig-chat-box').html(
                    '<div class="ig-chat-message" style="align-self: center; color: #e53e3e; padding: 10px; font-style: italic;">Failed to load messages.</div>'
                );
            }
        });

    }

    

    $('#ig-send-message').on('click', function (e) {
        e.preventDefault();
        const message = $('#ig-message').val();
        const $button = $(this);

        $button.prop('disabled', true).css({ opacity: 0.5, cursor: 'not-allowed' });

        $.ajax({
            url: `/api/lead/${igLeadId}/chat/send`,
            method: 'POST',
            data: {
                 message: message
             },
            success: function () {
                $('#ig-message').val('');
                $button.prop('disabled', false).css({ opacity: 1, cursor: 'pointer' });
                loadIgMessages();
            },
            error: function (err) {
                console.error('Failed to send Instagram message:', err);
            }
        });
    });

    loadIgMessages();
</script>