<div class="flex gap-3 text-base text-gray-900 items-top" data-greeting="{{ $greeting }}"
    data-mode="{{ $mode }}" data-insight="{{ $insight }}"
    data-insight-action='@json($action, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE)'
    data-insight-actions='@json($actions, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE)'
    data-insight-details='@json($details, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE)'
    x-data="{
        typedText: '',
        typing: false,
        typeTimer: null,
        talking: false,
        insightAction: null,
        insightActions: [],
        details: [],
        showDetails: false,
        showAction: false,
        pendingReveal: false,

        init() {
            // Pencere köprüleri: sayfanın her yerinden bileşene mesaj iletilir
            window.eFilizSay = (message, options) => {
                // Yeni bir mesaj yazılırsa içgörüye ait açılım geçersizdir
                this.pendingReveal = false;
                this.showDetails = false;
                this.showAction = false;
                this.typeMessage(String(message || ''));
                this.$wire.persistAssistant(String(message || ''), options || {});
            };
            window.eFilizUser = (message, metadata, conversationStatus) => {
                this.$wire.persistUser(String(message || ''), metadata || null, conversationStatus || null);
            };
            window.eFilizStart = (metadata, type) => {
                this.$wire.startConversation(metadata || {}, type || null);
            };
            window.eFilizFinish = (status) => {
                this.$wire.finishConversation(status);
            };

            // Çalışma arkadaşı gibi: günün ilk girişinde selamla, 1-2 dakika sonra
            // içgörüyle devam et; gün içindeki dönüşlerde doğrudan içgörü ver.
            try {
                this.insightAction = JSON.parse(this.$el.dataset.insightAction || 'null');
                this.insightActions = JSON.parse(this.$el.dataset.insightActions || '[]') || [];
                this.details = JSON.parse(this.$el.dataset.insightDetails || '[]');
            } catch (e) {
                this.insightAction = null;
                this.insightActions = [];
                this.details = [];
            }

            const mode = this.$el.dataset.mode || 'greet';
            const insight = this.$el.dataset.insight || '';
            if (mode === 'insight' && insight) {
                this.presentInsight(insight);
            } else {
                this.typeMessage(this.$el.dataset.greeting || '');
                if (insight) {
                    const delay = 60000 + Math.random() * 60000;
                    setTimeout(() => this.presentInsight(insight), delay);
                }
            }
        },

        // İçgörüyü yaz; yazma bitince detay listesini ve butonları aç
        presentInsight(insight) {
            this.showDetails = false;
            this.showAction = false;
            this.pendingReveal = this.details.length > 0 || this.insightAction !== null || this.insightActions.length > 0;
            this.typeMessage(insight);
        },

        revealInsightExtras() {
            if (!this.pendingReveal) return;
            this.pendingReveal = false;
            this.showDetails = this.details.length > 0;
            this.showAction = this.insightAction !== null || this.insightActions.length > 0;
        },

        // Mesajı karakter karakter yazar; önceki yazma devam ediyorsa iptal eder
        typeMessage(message) {
            clearTimeout(this.typeTimer);
            if (!this.pendingReveal) {
                this.showDetails = false;
                this.showAction = false;
            }
            this.typedText = '';
            this.typing = true;
            if (!message) {
                this.typing = false;
                this.revealInsightExtras();
                return;
            }
            this.startTalking();
            let index = 0;
            const typeNext = () => {
                index++;
                this.typedText = message.slice(0, index);
                if (index < message.length) {
                    // Doğal his için hafif değişken hız; noktalama sonrası kısa es
                    let delay = 25 + Math.random() * 35;
                    if (/[,.;:!?…]/.test(message[index - 1])) {
                        delay += 120;
                    }
                    this.typeTimer = setTimeout(typeNext, delay);
                } else {
                    this.revealInsightExtras();
                    this.typeTimer = setTimeout(() => {
                        this.typing = false;
                        this.stopTalking();
                    }, 2000);
                }
            };
            typeNext();
        },

        // Avatar yazarken konuşuyormuş gibi hareket eder
        randomTalk() {
            const avatar = document.getElementById('efiliz-avatar');
            if (!this.talking || !avatar) return;
            const y = -(Math.random() * 3);
            const r = (Math.random() * 6 - 3).toFixed(1);
            const s = (1 + Math.random() * 0.06).toFixed(3);
            avatar.style.transform = 'translateY(' + y + 'px) rotate(' + r + 'deg) scale(' + s + ')';
            const holdTime = 60 + Math.random() * 120;
            setTimeout(() => {
                if (!this.talking) return;
                avatar.style.transform = '';
                setTimeout(() => this.randomTalk(), 40 + Math.random() * 100);
            }, holdTime);
        },

        startTalking() {
            if (this.talking) return;
            this.talking = true;
            this.randomTalk();
        },

        stopTalking() {
            this.talking = false;
            const avatar = document.getElementById('efiliz-avatar');
            if (avatar) avatar.style.transform = '';
        }
    }">
    <img id="efiliz-avatar" class="w-12 h-12" src="{{ $avatarSrc }}" alt="">
    <div class="grid max-w-xl gap-1 px-4 py-3 bg-stone-50 rounded-xl ring-1 ring-stone-200">
        <p class="text-sm font-bold text-teal-700">{{ $assistantName }}</p>
        <p class="text-sm text-stone-700">
            <span wire:ignore x-text="typedText"></span><span class="typing-caret" x-show="typing"
                style="display: none;"></span>
        </p>

        {{-- İçgörü detayları: yazma bittikten sonra balon içinde listelenir --}}
        <ul x-show="showDetails" class="grid gap-1 mt-1.5" style="display: none;">
            <template x-for="item in details" :key="item.label + item.value + item.note">
                <li class="flex items-baseline gap-1.5 text-sm text-stone-700">
                    <span class="text-stone-400">•</span>
                    <span class="min-w-0" x-text="item.label"></span>
                    <span class="text-stone-400">→</span>
                    <span class="font-semibold whitespace-nowrap" x-text="item.value"></span>
                    <span class="text-xs text-stone-500 whitespace-nowrap" x-text="item.note ? '(' + item.note + ')' : ''"></span>
                </li>
            </template>
        </ul>

        {{-- İçgörünün tamamını gösteren bağlantı --}}
        <div x-show="showAction" class="mt-2" style="display: none;">
            <a x-show="insightAction"
                :href="insightAction ? insightAction.url : '#'"
                class="inline-block px-3 py-1.5 text-xs font-semibold text-stone-700 rounded-md bg-stone-200 border border-stone-300 hover:bg-stone-300 active:bg-stone-300">
                <span x-text="insightAction ? insightAction.label : ''"></span>
            </a>

            {{-- Yönlendirme rehberleri: yazma bittikten sonra butonlar listelenir --}}
            <div x-show="insightActions.length > 0" class="flex flex-wrap gap-2"
                :class="insightAction ? 'mt-2' : ''">
                <template x-for="extraAction in insightActions" :key="extraAction.label">
                    <a :href="extraAction.url"
                        class="inline-block px-3 py-1.5 text-xs font-semibold text-white rounded-md bg-teal-700 hover:bg-teal-800 active:bg-teal-800"
                        x-text="extraAction.label"></a>
                </template>
            </div>
        </div>

        {{ $slot ?? '' }}
    </div>

    <style>
        .typing-caret {
            display: inline-block;
            width: 1px;
            height: 1em;
            margin-left: 1px;
            vertical-align: text-bottom;
            background-color: #57534e;
            animation: typing-blink 0.8s step-end infinite;
        }

        @keyframes typing-blink {
            50% {
                opacity: 0;
            }
        }

        /* Konuşma hareketleri JS ile rastgele üretilir, geçişler yumuşak olsun */
        #efiliz-avatar {
            transition: transform 0.09s ease-out;
        }
    </style>
</div>