@props([
    'timeline',
    'leadId',
    'perPage' => 10,
])

@php
    use App\Models\Lead;
    $attributeNames = (new \ReflectionClass(Lead::class))
        ->getStaticProperties()['attributeNames'] ?? [];

    $hasMoreInitial = count($timeline) == $perPage;

    $lastActivityId = $timeline->last() ? $timeline->last()['id'] : null;
@endphp

<div class="flex flex-col" x-data="timelineData({
    initialTimeline: {{ json_encode($timeline) }},
    hasMoreInitial: {{ json_encode($hasMoreInitial) }},
    lastActivityId: {{ json_encode($lastActivityId) }},
    leadId: {{ $leadId }},
    perPage: {{ $perPage }},
    attributeNames: {{ json_encode($attributeNames) }},
})">
    <div class="flex justify-between items-center mb-4 gap-4">
        <h3 class="text-black text-parrafo">Actividad</h3>
        <button 
            class="inline-flex items-center text-primary text-parrafo" 
            type="button" 
            @click="toggleOrder()"
            :disabled="loading"
        >
            <span>
                <x-icons.order />
            </span>
            <span x-text="order === 'desc' ? 'Más recientes' : 'Menos recientes'"></span>
        </button>
    </div>
    
    <div class="space-y-2" x-ref="timelineContainer">
        <template x-for="item in activities" :key="item.id">
            <div class="flex items-start">
                <template x-if="item.photo_url">
                    <img :src="item.photo_url" :alt="item.actor_name" class="h-8 w-8 rounded-full object-cover">
                </template>
                <div class="flex-1 ml-2">
                    <div class="flex flex-wrap items-center space-x-2 text-size-small-heading">
                        <span class="text-black font-medium" x-text="item.actor_name"></span>
                        <template x-if="item.event === 'created'">
                            <span class="text-accent">Creó el evento</span>
                        </template>
                        <template x-else-if="item.event === 'updated' && Object.keys(item.properties.old || {}).length > 0">
                            <span class="text-accent">Actualizó campos:</span>
                        </template>
                        <template x-else-if="item.log_name === 'Comentario'">
                            <span class="text-accent">Añadió un comentario:</span>
                        </template>
                        <template x-else>
                            <span class="text-accent">Realizó una acción.</span>
                        </template>
                        
                        <span class="text-accent">•</span>
                        <span class="text-accent" x-text="item.created_since"></span>
                    </div>
                    <template x-if="item.event === 'updated' && Object.keys(item.properties.old || {}).length > 0">
                        <ul class="list-none space-y-0.5 mt-1 text-xs text-accent">
                            <template x-for="(oldValue, attribute) in item.properties.old" :key="attribute">
                                <li>
                                    <span x-text="getChangeText(attribute, oldValue, item.properties.attributes[attribute])"></span>
                                </li>
                            </template>
                        </ul>
                    </template>
                </div>
            </div>
        </template>
        <template x-if="activities.length === 0 && !loading">
            <p class="text-parrafo text-accent">Aún no hay actividad registrada para este Lead.</p>
        </template>
        <template x-if="loading">
            <p class="text-parrafo text-accent text-center">Cargando...</p>
        </template>
    </div>
    <template x-if="hasMore && !loading">
        <div class="flex justify-center">
            <button 
                class="btn btn-text-blue" 
                @click="loadMore"
                type="button"
            >
                Cargar más actividades
            </button>
        </div>
    </template>
</div>

<script>
    function timelineData(data) {
        return {
            activities: data.initialTimeline,
            hasMore: data.hasMoreInitial,
            lastId: data.lastActivityId,
            leadId: data.leadId,
            perPage: data.perPage,
            attributeNames: data.attributeNames,
            order: 'desc',
            loading: false,
            getChangeText(attribute, oldValue, newValue) {
                const translatedName = this.attributeNames[attribute] || attribute.replace(/_/g, ' ');
                if (attribute === 'status_pipeline_id') {
                    return `Cambió el estado del Lead de ${oldValue || 'valor anterior'} a ${newValue || 'valor actual'}.`; 
                } 
                // else if (attribute === 'assigned_user_id') {
                //     return `Asignó el Lead (cambió de ${oldValue || 'usuario anterior'} a ${newValue || 'usuario actual'}).`; 
                // }
                return `${translatedName} cambió de: ${oldValue || 'ninguno'} a ${newValue || 'ninguno'}.`;
            },
            
            async loadActivities(reset = false) {
                if (this.loading) return;

                this.loading = true;
        
                const url = `{{ route('leads.timeline.ajax', ['lead_id' => '__LEAD_ID__']) }}`.replace('__LEAD_ID__', this.leadId);
                const cursor = reset ? '' : this.lastId;
                try {
                    const response = await fetch(`${url}?last_id=${cursor}&order=${this.order}&per_page=${this.perPage}`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    });                    
                    if (!response.ok) {
                        throw new Error(`Error HTTP: ${response.status}`);
                    }
                    const data = await response.json();
                    if (reset) {
                        this.activities = data.timeline;
                    } else {
                        this.activities = this.activities.concat(data.timeline);
                    }
                    if (data.timeline.length > 0) {
                        this.lastId = data.timeline[data.timeline.length - 1].id;
                    } else if (data.timeline.length === 0 && reset) {
                        this.lastId = null;
                    }
                    this.hasMore = data.has_more;
                } catch (error) {
                    console.error('Error cargando actividades:', error);
                } finally {
                    this.loading = false;
                }
            },
            toggleOrder() {
                this.order = this.order === 'desc' ? 'asc' : 'desc';
                this.lastId = null;
                this.hasMore = true;
                this.activities = [];
                this.loadActivities(true);
            },
            loadMore() {
                this.loadActivities(false);
            }
        }
    }
</script>