@php
    $assistantSettings = $settings ?? [];
    $assistantEnabled = ($assistantSettings['ai_assistant_enabled'] ?? '1') !== '0';
    $assistantName = $assistantSettings['ai_assistant_name'] ?? 'Nova AI';
    $assistantWelcome = app()->isLocale('en')
        ? __('front.assistant.welcome')
        : ($assistantSettings['ai_assistant_welcome'] ?? __('front.assistant.welcome'));
    $assistantPlaceholder = app()->isLocale('en')
        ? __('front.assistant.placeholder')
        : ($assistantSettings['ai_assistant_placeholder'] ?? __('front.assistant.placeholder'));
    $assistantSuggestions = [
        __('front.assistant.suggestion_services'),
        __('front.assistant.suggestion_contact'),
        __('front.assistant.suggestion_portfolio'),
        __('front.assistant.suggestion_team'),
    ];
@endphp

@if($assistantEnabled)
<div class="site-assistant" id="siteAssistant" data-endpoint="{{ route('assistant.ask') }}" data-name="{{ $assistantName }}" data-welcome="{{ $assistantWelcome }}" data-placeholder="{{ $assistantPlaceholder }}" data-processing-error="{{ __('front.assistant.processing_error') }}" data-network-error="{{ __('front.assistant.network_error') }}" data-source-assistant="{{ __('front.assistant.fallback_label') }}" data-source-website="{{ __('front.assistant.website_label') }}" data-source-ai="{{ __('front.assistant.ai_label') }}">
    <button type="button" class="assistant-launcher" id="assistantLauncher" aria-label="{{ __('front.assistant.open') }}">
        <span class="assistant-launcher-ring"></span>
        <span class="assistant-launcher-icon">
            <i class="fa-solid fa-sparkles"></i>
        </span>
        <span class="assistant-launcher-text">
            <strong>{{ $assistantName }}</strong>
            <small>{{ __('front.assistant.launcher_subtitle') }}</small>
        </span>
    </button>

    <div class="assistant-panel" id="assistantPanel" hidden>
        <div class="assistant-header">
            <div>
                <span class="assistant-eyebrow">Website Assistant</span>
                <h3>{{ $assistantName }}</h3>
                <p>{{ __('front.assistant.panel_subtitle') }}</p>
            </div>
            <button type="button" class="assistant-close" id="assistantClose" aria-label="{{ __('front.assistant.close') }}">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <div class="assistant-messages" id="assistantMessages"></div>

        <div class="assistant-suggestions" id="assistantSuggestions">
            @foreach($assistantSuggestions as $suggestion)
            <button type="button" class="assistant-suggestion" data-question="{{ $suggestion }}">{{ $suggestion }}</button>
            @endforeach
        </div>

        <form class="assistant-form" id="assistantForm">
            <input type="text" class="assistant-input" id="assistantInput" placeholder="{{ $assistantPlaceholder }}" maxlength="1000" autocomplete="off">
            <button type="submit" class="assistant-submit" id="assistantSubmit">
                <i class="fa-solid fa-paper-plane"></i>
            </button>
        </form>
    </div>
</div>

<style>
.site-assistant { position: fixed; right: 24px; bottom: 24px; z-index: 1055; }
.assistant-launcher { border: 0; display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem 0.85rem 0.9rem; border-radius: 999px; background: linear-gradient(135deg, #0f172a, #1d4ed8); color: #fff; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.28); position: relative; overflow: hidden; }
.assistant-launcher-ring { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 45%); pointer-events: none; }
.assistant-launcher-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.assistant-launcher-text { display: flex; flex-direction: column; text-align: left; }
.assistant-launcher-text strong { font-size: 0.95rem; }
.assistant-launcher-text small { color: rgba(255, 255, 255, 0.78); }
.assistant-panel { width: min(420px, calc(100vw - 32px)); height: min(680px, calc(100vh - 110px)); margin-top: 1rem; border-radius: 28px; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24); overflow: hidden; display: flex; flex-direction: column; backdrop-filter: blur(20px); }
.assistant-header { padding: 1.25rem 1.25rem 1rem; background: linear-gradient(135deg, #eff6ff, #f8fafc); border-bottom: 1px solid rgba(226, 232, 240, 0.85); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.assistant-eyebrow { display: inline-flex; margin-bottom: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(30, 64, 175, 0.08); color: #1d4ed8; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.assistant-header h3 { margin: 0; font-size: 1.2rem; color: #0f172a; }
.assistant-header p { margin: 0.35rem 0 0; color: #64748b; font-size: 0.9rem; }
.assistant-close { width: 40px; height: 40px; border: 0; border-radius: 14px; background: #fff; color: #334155; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); }
.assistant-messages { flex: 1; overflow-y: auto; padding: 1.1rem 1rem 0.8rem; background: radial-gradient(circle at top right, rgba(219, 234, 254, 0.9), transparent 32%), linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
.assistant-message { display: flex; margin-bottom: 0.9rem; }
.assistant-message.user { justify-content: flex-end; }
.assistant-bubble { max-width: 86%; border-radius: 22px; padding: 0.9rem 1rem; white-space: pre-wrap; word-break: break-word; line-height: 1.6; font-size: 0.95rem; }
.assistant-message.bot .assistant-bubble { background: #fff; color: #0f172a; border: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); }
.assistant-message.user .assistant-bubble { background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24); }
.assistant-meta { margin-top: 0.65rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.assistant-source { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #2563eb; background: rgba(37, 99, 235, 0.08); padding: 0.3rem 0.55rem; border-radius: 999px; }
.assistant-links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.assistant-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: #1d4ed8; background: #eff6ff; border-radius: 999px; padding: 0.4rem 0.7rem; }
.assistant-suggestions { padding: 0 1rem 0.85rem; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.assistant-suggestion { border: 1px solid rgba(191, 219, 254, 0.95); background: #fff; color: #1e40af; font-size: 0.82rem; font-weight: 600; border-radius: 999px; padding: 0.55rem 0.8rem; }
.assistant-form { padding: 1rem; border-top: 1px solid rgba(226, 232, 240, 0.85); display: flex; gap: 0.75rem; background: #fff; }
.assistant-input { flex: 1; border: 1px solid rgba(203, 213, 225, 0.95); border-radius: 18px; padding: 0.9rem 1rem; outline: none; font-size: 0.95rem; }
.assistant-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14); }
.assistant-submit { width: 50px; height: 50px; border: 0; border-radius: 18px; background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; box-shadow: 0 14px 28px rgba(37, 99, 235, 0.25); }
.assistant-loading .assistant-bubble { position: relative; min-width: 90px; }
.assistant-loading .assistant-bubble::after { content: '...'; letter-spacing: 0.2em; animation: assistant-blink 1s infinite; }
@keyframes assistant-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (max-width: 767px) { .site-assistant { right: 16px; bottom: 16px; } .assistant-launcher-text { display: none; } .assistant-launcher { padding-right: 0.9rem; } .assistant-panel { height: min(74vh, 620px); } }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var root = document.getElementById('siteAssistant');
    if (!root) { return; }

    var launcher = document.getElementById('assistantLauncher');
    var panel = document.getElementById('assistantPanel');
    var closeButton = document.getElementById('assistantClose');
    var messages = document.getElementById('assistantMessages');
    var form = document.getElementById('assistantForm');
    var input = document.getElementById('assistantInput');
    var submit = document.getElementById('assistantSubmit');
    var suggestions = document.getElementById('assistantSuggestions');
    var endpoint = root.dataset.endpoint;
    var welcomeMessage = root.dataset.welcome;
    var processingError = root.dataset.processingError;
    var networkError = root.dataset.networkError;
    var assistantLabel = root.dataset.sourceAssistant;
    var websiteLabel = root.dataset.sourceWebsite;
    var aiLabel = root.dataset.sourceAi;
    var csrfToken = document.querySelector('meta[name=\"csrf-token\"]');
    var booted = false;

    function labelForSource(source) {
        if (source === 'ai') { return aiLabel; }
        if (source === 'website') { return websiteLabel; }
        return assistantLabel;
    }

    function appendMessage(role, text, source, links, loading) {
        var wrapper = document.createElement('div');
        wrapper.className = 'assistant-message ' + role + (loading ? ' assistant-loading' : '');
        var bubble = document.createElement('div');
        bubble.className = 'assistant-bubble';
        bubble.textContent = text || '';
        wrapper.appendChild(bubble);

        if (role === 'bot' && !loading) {
            var meta = document.createElement('div');
            meta.className = 'assistant-meta';

            var sourceBadge = document.createElement('span');
            sourceBadge.className = 'assistant-source';
            sourceBadge.textContent = labelForSource(source);
            meta.appendChild(sourceBadge);

            if (Array.isArray(links) && links.length > 0) {
                var linkWrap = document.createElement('div');
                linkWrap.className = 'assistant-links';

                links.forEach(function (link) {
                    if (!link || !link.url || !link.label) { return; }
                    var anchor = document.createElement('a');
                    anchor.className = 'assistant-link';
                    anchor.href = link.url;
                    anchor.textContent = link.label;
                    linkWrap.appendChild(anchor);
                });

                if (linkWrap.children.length > 0) {
                    meta.appendChild(linkWrap);
                }
            }

            bubble.appendChild(meta);
        }

        messages.appendChild(wrapper);
        messages.scrollTop = messages.scrollHeight;
        return wrapper;
    }

    function openPanel() {
        panel.hidden = false;
        if (!booted) {
            booted = true;
            appendMessage('bot', welcomeMessage, 'website', [], false);
        }
        window.setTimeout(function () { input.focus(); }, 60);
    }

    function closePanel() {
        panel.hidden = true;
    }

    async function askAssistant(message) {
        appendMessage('user', message, null, [], false);
        input.value = '';
        submit.disabled = true;
        var loadingMessage = appendMessage('bot', '', 'website', [], true);

        try {
            var response = await fetch(endpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken ? csrfToken.getAttribute('content') : ''
                },
                credentials: 'same-origin',
                body: JSON.stringify({ message: message })
            });

            var payload = await response.json();
            loadingMessage.remove();

            if (!response.ok || !payload.answer) {
                appendMessage('bot', processingError, 'fallback', [], false);
                return;
            }

            appendMessage('bot', payload.answer, payload.source, payload.links || [], false);
        } catch (error) {
            loadingMessage.remove();
            appendMessage('bot', networkError, 'fallback', [], false);
        } finally {
            submit.disabled = false;
        }
    }

    launcher.addEventListener('click', function () {
        if (panel.hidden) { openPanel(); } else { closePanel(); }
    });

    closeButton.addEventListener('click', closePanel);

    form.addEventListener('submit', function (event) {
        event.preventDefault();
        var message = input.value.trim();
        if (!message) { return; }
        openPanel();
        askAssistant(message);
    });

    suggestions.addEventListener('click', function (event) {
        var button = event.target.closest('[data-question]');
        if (!button) { return; }
        openPanel();
        askAssistant(button.getAttribute('data-question'));
    });
});
</script>
@endif