{{--
    Audit Timeline Component (Odoo-style Chatter)
    
    Usage in any edit form:
    @include('admin.audit.components.timeline', [
        'model' => $customer,  // Any Eloquent model
        'title' => 'Activity Log',  // Optional title
    ])
--}}

@php
    $subjectType = get_class($model);
    $subjectId = $model->getKey();
    $title = $title ?? 'Activity & Notes';
    $uniqueId = 'timeline_' . md5($subjectType . $subjectId);
@endphp

<style>
    .audit-timeline-card {
        background: var(--card-bg, #fff);
        border: 1px solid var(--card-border, #e5e7eb);
        border-radius: 12px;
        overflow: hidden;
    }
    
    .audit-timeline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--card-border, #e5e7eb);
        background: var(--card-bg, #fff);
    }
    
    .audit-timeline-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary, #111827);
        margin: 0;
    }
    
    .audit-timeline-title svg {
        width: 20px;
        height: 20px;
        color: #6366f1;
    }
    
    .audit-timeline-count {
        background: #eef2ff;
        color: #6366f1;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    
    /* Comment Input */
    .audit-comment-box {
        padding: 16px 20px;
        border-bottom: 1px solid var(--card-border, #e5e7eb);
        background: #f9fafb;
    }
    
    [data-theme="dark"] .audit-comment-box {
        background: rgba(255, 255, 255, 0.03);
    }
    
    .audit-comment-input-wrapper {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    
    .audit-comment-avatar {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        color: white;
        flex-shrink: 0;
    }
    
    .audit-comment-form {
        flex: 1;
    }
    
    .audit-comment-input {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--card-border, #e5e7eb);
        border-radius: 8px;
        font-size: 14px;
        background: var(--card-bg, #fff);
        color: var(--text-primary, #111827);
        resize: none;
        min-height: 80px;
        transition: border-color 0.2s;
    }
    
    .audit-comment-input:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }
    
    .audit-comment-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }
    
    .audit-comment-options {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .audit-comment-options label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--text-secondary, #6b7280);
        cursor: pointer;
    }
    
    .audit-comment-options input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #6366f1;
    }
    
    .audit-comment-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .audit-comment-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }
    
    .audit-comment-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }
    
    .audit-comment-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Timeline List */
    .audit-timeline-body {
        max-height: 500px;
        overflow-y: auto;
    }
    
    .audit-timeline-list {
        padding: 0;
    }
    
    .audit-timeline-item {
        display: flex;
        gap: 12px;
        padding: 16px 20px;
        border-bottom: 1px solid var(--card-border, #e5e7eb);
        transition: background 0.15s;
    }
    
    .audit-timeline-item:hover {
        background: rgba(99, 102, 241, 0.02);
    }
    
    .audit-timeline-item:last-child {
        border-bottom: none;
    }
    
    .audit-item-avatar {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        color: white;
        flex-shrink: 0;
    }
    
    .audit-item-avatar.activity { background: linear-gradient(135deg, #3b82f6, #6366f1); }
    .audit-item-avatar.comment { background: linear-gradient(135deg, #10b981, #14b8a6); }
    .audit-item-avatar.created { background: linear-gradient(135deg, #10b981, #059669); }
    .audit-item-avatar.updated { background: linear-gradient(135deg, #3b82f6, #6366f1); }
    .audit-item-avatar.deleted { background: linear-gradient(135deg, #ef4444, #dc2626); }
    .audit-item-avatar.state_change { background: linear-gradient(135deg, #f59e0b, #d97706); }
    
    .audit-item-content {
        flex: 1;
        min-width: 0;
    }
    
    .audit-item-header {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }
    
    .audit-item-user {
        font-weight: 600;
        font-size: 14px;
        color: var(--text-primary, #111827);
    }
    
    .audit-item-event {
        display: inline-flex;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
    }
    
    .audit-item-event.created { background: #d1fae5; color: #065f46; }
    .audit-item-event.updated { background: #dbeafe; color: #1e40af; }
    .audit-item-event.deleted { background: #fee2e2; color: #991b1b; }
    .audit-item-event.comment { background: #f3f4f6; color: #374151; }
    .audit-item-event.state_change { background: #ffedd5; color: #9a3412; }
    
    [data-theme="dark"] .audit-item-event.created { background: rgba(16, 185, 129, 0.2); color: #34d399; }
    [data-theme="dark"] .audit-item-event.updated { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
    [data-theme="dark"] .audit-item-event.deleted { background: rgba(239, 68, 68, 0.2); color: #f87171; }
    [data-theme="dark"] .audit-item-event.comment { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
    [data-theme="dark"] .audit-item-event.state_change { background: rgba(234, 88, 12, 0.2); color: #fb923c; }
    
    .audit-item-time {
        font-size: 12px;
        color: var(--text-muted, #9ca3af);
    }
    
    .audit-item-description {
        font-size: 14px;
        color: var(--text-secondary, #6b7280);
        margin-bottom: 6px;
    }
    
    .audit-item-message {
        background: #f3f4f6;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 14px;
        color: var(--text-primary, #111827);
        margin-top: 8px;
        border-left: 3px solid #6366f1;
    }
    
    [data-theme="dark"] .audit-item-message {
        background: rgba(255, 255, 255, 0.05);
    }
    
    /* Changes display */
    .audit-item-changes {
        margin-top: 8px;
    }
    
    .audit-change-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        background: #f9fafb;
        border-radius: 6px;
        margin-bottom: 4px;
        font-size: 13px;
        flex-wrap: wrap;
    }
    
    [data-theme="dark"] .audit-change-row {
        background: rgba(255, 255, 255, 0.03);
    }
    
    .audit-change-field {
        font-weight: 500;
        color: var(--text-primary, #111827);
        min-width: 80px;
    }
    
    .audit-change-from {
        color: #dc2626;
        text-decoration: line-through;
        word-break: break-word;
    }
    
    .audit-change-arrow {
        color: var(--text-muted, #9ca3af);
    }
    
    .audit-change-to {
        color: #16a34a;
        font-weight: 500;
        word-break: break-word;
    }
    
    /* Empty state */
    .audit-timeline-empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted, #9ca3af);
    }
    
    .audit-timeline-empty svg {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
        opacity: 0.5;
    }
    
    /* Delete button */
    .audit-item-delete {
        background: none;
        border: none;
        padding: 4px;
        cursor: pointer;
        color: var(--text-muted, #9ca3af);
        opacity: 0;
        transition: all 0.2s;
    }
    
    .audit-timeline-item:hover .audit-item-delete {
        opacity: 1;
    }
    
    .audit-item-delete:hover {
        color: #ef4444;
    }
    
    .audit-item-delete svg {
        width: 14px;
        height: 14px;
    }
    
    /* Loading */
    .audit-timeline-loading {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted, #9ca3af);
    }
    
    .audit-spinner {
        width: 24px;
        height: 24px;
        border: 2px solid #e5e7eb;
        border-top-color: #6366f1;
        border-radius: 50%;
        animation: audit-spin 0.8s linear infinite;
        margin: 0 auto 12px;
    }
    
    @keyframes audit-spin {
        to { transform: rotate(360deg); }
    }
</style>

<div class="audit-timeline-card" id="{{ $uniqueId }}">
    <div class="audit-timeline-header">
        <h3 class="audit-timeline-title">
            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ $title }}
        </h3>
        <span class="audit-timeline-count" id="{{ $uniqueId }}_count">0 activities</span>
    </div>
    
    {{-- Comment Input --}}
    <div class="audit-comment-box">
        <div class="audit-comment-input-wrapper">
            <div class="audit-comment-avatar">
                {{ strtoupper(substr(auth('admin')->user()->name ?? auth()->user()->name ?? 'U', 0, 1)) }}{{ strtoupper(substr(explode(' ', auth('admin')->user()->name ?? auth()->user()->name ?? 'User')[1] ?? '', 0, 1)) }}
            </div>
            <div class="audit-comment-form">
                <textarea 
                    class="audit-comment-input" 
                    id="{{ $uniqueId }}_input"
                    placeholder="Add a note or comment..."
                ></textarea>
                <div class="audit-comment-actions">
                    <div class="audit-comment-options">
                        <label>
                            <input type="checkbox" id="{{ $uniqueId }}_internal">
                            Internal Note
                        </label>
                    </div>
                    <button type="button" class="audit-comment-btn" onclick="auditTimeline_{{ $uniqueId }}.addComment()">
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                        </svg>
                        Post Note
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    {{-- Timeline List --}}
    <div class="audit-timeline-body" id="{{ $uniqueId }}_body">
        <div class="audit-timeline-loading">
            <div class="audit-spinner"></div>
            Loading activity...
        </div>
    </div>
</div>

<script>
(function() {
    const config = {
        uniqueId: '{{ $uniqueId }}',
        subjectType: '{{ addslashes($subjectType) }}',
        subjectId: {{ $subjectId }},
        timelineUrl: '{{ route("admin.audit.timeline") }}',
        commentUrl: '{{ route("admin.audit.comments.store") }}',
        deleteUrl: '{{ url("admin/audit/comment") }}',
        csrfToken: '{{ csrf_token() }}'
    };

    window['auditTimeline_{{ $uniqueId }}'] = {
        activities: [],
        
        init: function() {
            this.loadTimeline();
        },
        
        loadTimeline: function() {
            const body = document.getElementById(config.uniqueId + '_body');
            
            // Build URL with query parameters (GET request)
            const url = new URL(config.timelineUrl, window.location.origin);
            url.searchParams.append('subject_type', config.subjectType);
            url.searchParams.append('subject_id', config.subjectId);
            
            fetch(url.toString(), {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': config.csrfToken,
                    'Accept': 'application/json'
                }
            })
            .then(r => {
                if (!r.ok) {
                    throw new Error('HTTP ' + r.status);
                }
                return r.json();
            })
            .then(data => {
                if (data.success) {
                    this.activities = data.data;
                    this.renderTimeline();
                } else {
                    body.innerHTML = '<div class="audit-timeline-empty"><p>Error loading activity: ' + (data.message || 'Unknown error') + '</p></div>';
                }
            })
            .catch(err => {
                console.error('Timeline error:', err);
                body.innerHTML = '<div class="audit-timeline-empty"><p>Error loading activity: ' + err.message + '</p></div>';
            });
        },
        
        renderTimeline: function() {
            const body = document.getElementById(config.uniqueId + '_body');
            const countEl = document.getElementById(config.uniqueId + '_count');
            
            countEl.textContent = this.activities.length + ' activities';
            
            if (this.activities.length === 0) {
                body.innerHTML = `
                    <div class="audit-timeline-empty">
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <p>No activity yet</p>
                    </div>
                `;
                return;
            }
            
            let html = '<div class="audit-timeline-list">';
            
            this.activities.forEach(item => {
                const avatarClass = item.is_comment ? 'comment' : (item.event || 'activity');
                const eventLabel = item.event ? item.event.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : 'Activity';
                
                html += `
                    <div class="audit-timeline-item" data-id="${item.id}">
                        <div class="audit-item-avatar ${avatarClass}">
                            ${item.causer_initials || 'SY'}
                        </div>
                        <div class="audit-item-content">
                            <div class="audit-item-header">
                                <span class="audit-item-user">${item.causer_name || 'System'}</span>
                                <span class="audit-item-event ${item.event || 'activity'}">${eventLabel}</span>
                                <span class="audit-item-time">${item.time_ago}</span>
                                ${item.is_comment ? `
                                    <button type="button" class="audit-item-delete" onclick="auditTimeline_${config.uniqueId}.deleteComment(${item.id})" title="Delete">
                                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                        </svg>
                                    </button>
                                ` : ''}
                            </div>
                            ${!item.is_comment ? `<div class="audit-item-description">${item.description || ''}</div>` : ''}
                            ${item.message ? `<div class="audit-item-message">${this.escapeHtml(item.message)}</div>` : ''}
                            ${item.changes && item.changes.length > 0 ? this.renderChanges(item.changes) : ''}
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            body.innerHTML = html;
        },
        
        renderChanges: function(changes) {
            let html = '<div class="audit-item-changes">';
            changes.forEach(change => {
                html += `
                    <div class="audit-change-row">
                        <span class="audit-change-field">${change.field}:</span>
                        <span class="audit-change-from">${this.escapeHtml(change.from)}</span>
                        <span class="audit-change-arrow">→</span>
                        <span class="audit-change-to">${this.escapeHtml(change.to)}</span>
                    </div>
                `;
            });
            html += '</div>';
            return html;
        },
        
        addComment: function() {
            const input = document.getElementById(config.uniqueId + '_input');
            const internalCheck = document.getElementById(config.uniqueId + '_internal');
            const message = input.value.trim();
            
            if (!message) {
                if (typeof Toast !== 'undefined') {
                    Toast.warning('Please enter a comment');
                } else {
                    alert('Please enter a comment');
                }
                return;
            }
            
            const btn = document.querySelector('#' + config.uniqueId + ' .audit-comment-btn');
            btn.disabled = true;
            btn.innerHTML = '<div class="audit-spinner" style="width:14px;height:14px;margin:0;border-width:2px;"></div> Posting...';
            
            fetch(config.commentUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': config.csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    subject_type: config.subjectType,
                    subject_id: config.subjectId,
                    message: message,
                    is_internal: internalCheck.checked
                })
            })
            .then(r => r.json())
            .then(data => {
                btn.disabled = false;
                btn.innerHTML = '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg> Post Note';
                
                if (data.success) {
                    input.value = '';
                    internalCheck.checked = false;
                    this.activities.unshift(data.data);
                    this.renderTimeline();
                    
                    if (typeof Toast !== 'undefined') {
                        Toast.success('Comment added successfully');
                    }
                } else {
                    if (typeof Toast !== 'undefined') {
                        Toast.error(data.message || 'Failed to add comment');
                    } else {
                        alert(data.message || 'Failed to add comment');
                    }
                }
            })
            .catch(err => {
                console.error('Comment error:', err);
                btn.disabled = false;
                btn.innerHTML = '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg> Post Note';
                
                if (typeof Toast !== 'undefined') {
                    Toast.error('Error adding comment');
                }
            });
        },
        
        deleteComment: function(id) {
            if (!confirm('Delete this comment?')) return;
            
            fetch(config.deleteUrl + '/' + id, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': config.csrfToken,
                    'Accept': 'application/json'
                }
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    this.activities = this.activities.filter(a => a.id !== id);
                    this.renderTimeline();
                    
                    if (typeof Toast !== 'undefined') {
                        Toast.success('Comment deleted');
                    }
                } else {
                    if (typeof Toast !== 'undefined') {
                        Toast.error(data.message || 'Failed to delete');
                    }
                }
            });
        },
        
        escapeHtml: function(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    };
    
    // Initialize on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            window['auditTimeline_{{ $uniqueId }}'].init();
        });
    } else {
        window['auditTimeline_{{ $uniqueId }}'].init();
    }
})();
</script>