<div
    class="mb-1"
    x-data="{
        can_rename_chat: false,
        chat_name: '{{ recent_chat.name|escapejs }}',
        is_active: false,
        new_chat_name: '{{ recent_chat.name|escapejs }}',
        show_recent_chat: true,

        cancel_rename_chat() {
            this.new_chat_name = this.chat_name
            this.can_rename_chat = false
        },

        confirm_rename_chat() {
            this.rename_chat()
        },

        disable_rename_chat() {
            this.can_rename_chat = false
        },

        enable_rename_chat() {
            this.can_rename_chat = true

            $nextTick(() => {
                let input = this.$el.querySelector('input')
                if (input) input.focus()
            })
        },

        async rename_chat() {
            if (this.new_chat_name.trim() === '') {
                this.new_chat_name = this.chat_name
                this.can_rename_chat = false
                return
            }

            let response = await django_glue_fetch(
                '{% url "django_spire:ai:chat:json:rename" pk=recent_chat.pk %}',
                {payload: {new_name: this.new_chat_name}}
            )

            let type = response.type

            if (type === 'success') {
                this.chat_name = this.new_chat_name
            } else {
                $dispatch('notify', {'type': type, 'message': response.message})
                this.new_chat_name = this.chat_name
            }

            this.can_rename_chat = false
        }
    }"
    x-show="show_recent_chat"
    @chat-activated.window="is_active = ($event.detail.chat_id === {{ recent_chat.id }})"
    @click.outside="if (can_rename_chat) cancel_rename_chat()"
    @deleted_chat.window="if (show_recent_chat) show_recent_chat = $event.detail !== {{ recent_chat.id }}"
>
    <div
        :class="is_active ? 'bg-app-primary-soft' : ''"
        class="d-flex align-items-center justify-content-between px-2 py-1 rounded"
        data-chat-id="{{ recent_chat.id }}"
        style="transition: background-color 0.15s ease;"
    >
        <div class="d-flex align-items-center flex-grow-1" style="min-width: 0; width: 0;">
            <i
                :class="{
                    'bi-chat-dots-fill': !can_rename_chat,
                    'bi-chat-dots': can_rename_chat,
                    'text-app-primary': is_active || can_rename_chat,
                    'text-muted': !is_active && !can_rename_chat
                }"
                class="bi me-2"
                style="flex-shrink: 0;"
            ></i>

            <template x-if="!can_rename_chat">
                <div @click="$dispatch('load-chat', {chat_id: {{ recent_chat.id }}})" class="cursor-pointer flex-grow-1 text-truncate">
                    <span class="px-2 fs-7" x-text="chat_name"></span>
                </div>
            </template>

            <template x-if="can_rename_chat">
                <div class="d-flex align-items-center position-relative w-100 py-0 px-1" style="flex: 1 1 0; min-width: 0;">
                    <input
                        @focus="$el.select()"
                        @keydown.enter="confirm_rename_chat()"
                        @keydown.esc="cancel_rename_chat()"
                        class="form-control ps-1 pe-5 py-0 fs-7"
                        type="text"
                        x-init="$el.focus()"
                        x-model="new_chat_name"
                    />
                    <div class="d-flex align-items-center position-absolute g-2" style="pointer-events: none; right: 8px;">
                        <i
                            @click="confirm_rename_chat()"
                            @mouseenter="$el.style.opacity = '0.75'"
                            @mouseleave="$el.style.opacity = '1'"
                            class="bi bi-check cursor-pointer text-success"
                            style="pointer-events: auto; transition: opacity 0.15s ease;"
                            title="Confirm"
                        ></i>
                        <i
                            @click="cancel_rename_chat()"
                            @mouseenter="$el.style.opacity = '0.75'"
                            @mouseleave="$el.style.opacity = '1'"
                            class="bi bi-x cursor-pointer text-danger pe-1"
                            style="pointer-events: auto; transition: opacity 0.15s ease;"
                            title="Cancel"
                        ></i>
                    </div>
                </div>
            </template>
        </div>

        <div class="ms-2" style="flex-shrink: 0; visibility: hidden;" :style="can_rename_chat ? '' : 'visibility: visible;'">
            {% include 'django_spire/ai/chat/dropdown/ellipsis_dropdown.html' %}
        </div>
    </div>
</div>
