{{--
|--------------------------------------------------------------------------
| Timeline Component (Odoo-style Chatter)
|--------------------------------------------------------------------------
| Usage: @include('admin.audit.components.timeline', ['model' => $customer, 'title' => 'Activity'])
|
| Requirements:
| - Model must exist and have an ID
| - Routes: admin.audit.timeline (GET), admin.audit.comments.store (POST), admin.audit.comments.destroy (DELETE)
--}}

@php
    $modelClass = get_class($model);
    $modelId = $model->getKey();
    $uniqueId = 'timeline_' . md5($modelClass . $modelId);
    $title = $title ?? 'Activity Log';
@endphp

<style>
    .audit-timeline-wrapper {
        --tl-bg: var(--card-bg, #ffffff);
        --tl-border: var(--card-border, #e5e7eb);
        --tl-text: var(--text-primary, #1f2937);
        --tl-text-muted: var(--text-muted, #6b7280);
        --tl-primary: var(--primary, #3b82f6);
        --tl-primary-light: var(--primary-light, #dbeafe);
        --tl-success: #10b981;
        --tl-warning: #f59e0b;
        --tl-danger: #ef4444;
        --tl-radius: 8px;
        font-family: inherit;
    }

    [data-theme="dark"] .audit-timeline-wrapper {
        --tl-bg: #1f2937;
        --tl-border: #374151;
        --tl-text: #f9fafb;
        --tl-text-muted: #9ca3af;
        --tl-primary-light: #1e3a5f;
    }

    .audit-timeline-card {
        background: var(--tl-bg);
        border: 1px solid var(--tl-border);
        border-radius: var(--tl-radius);
        overflow: hidden;
    }

    .audit-timeline-header {
        padding: 16px 20px;
        border-bottom: 1px solid var(--tl-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--tl-bg);
    }

    .audit-timeline-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--tl-text);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .audit-timeline-count {
        background: var(--tl-primary-light);
        color: var(--tl-primary);
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
    }

    /* Comment Input Section */
    .audit-comment-input-section {
        padding: 16px 20px;
        border-bottom: 1px solid var(--tl-border);
        background: var(--tl-bg);
    }

    .audit-comment-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .audit-comment-textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--tl-border);
        border-radius: var(--tl-radius);
        font-size: 14px;
        font-family: inherit;
        resize: vertical;
        min-height: 80px;
        background: var(--tl-bg);
        color: var(--tl-text);
        transition: border-color 0.2s;
    }

    .audit-comment-textarea:focus {
        outline: none;
        border-color: var(--tl-primary);
        box-shadow: 0 0 0 3px var(--tl-primary-light);
    }

    .audit-comment-textarea::placeholder {
        color: var(--tl-text-muted);
    }

    .audit-comment-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .audit-internal-check {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--tl-text-muted);
        cursor: pointer;
    }

    .audit-internal-check input {
        cursor: pointer;
    }

    .audit-submit-btn {
        padding: 8px 16px;
        background: var(--tl-primary);
        color: white;
        border: none;
        border-radius: var(--tl-radius);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .audit-submit-btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .audit-submit-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    /* Timeline List */
    .audit-timeline-list {
        max-height: 500px;
        overflow-y: auto;
    }

    .audit-timeline-empty {
        padding: 40px 20px;
        text-align: center;
        color: var(--tl-text-muted);
    }

    .audit-timeline-empty svg {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

    /* Timeline Item */
    .audit-timeline-item {
        padding: 16px 20px;
        border-bottom: 1px solid var(--tl-border);
        display: flex;
        gap: 12px;
        transition: background 0.2s;
    }

    .audit-timeline-item:last-child {
        border-bottom: none;
    }

    .audit-timeline-item:hover {
        background: var(--tl-primary-light);
    }

    .audit-timeline-item.is-comment {
        background: rgba(59, 130, 246, 0.03);
    }

    /* Avatar */
    .audit-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        color: white;
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--tl-primary), #6366f1);
    }

    .audit-avatar.system {
        background: linear-gradient(135deg, #6b7280, #4b5563);
    }

    .audit-avatar.comment {
        background: linear-gradient(135deg, #10b981, #059669);
    }

    /* Content */
    .audit-timeline-content {
        flex: 1;
        min-width: 0;
    }

    .audit-timeline-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
        flex-wrap: wrap;
    }

    .audit-user-name {
        font-weight: 600;
        color: var(--tl-text);
        font-size: 14px;
    }

    .audit-event-badge {
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .audit-event-badge.created { background: #d1fae5; color: #065f46; }
    .audit-event-badge.updated { background: #dbeafe; color: #1e40af; }
    .audit-event-badge.deleted { background: #fee2e2; color: #991b1b; }
    .audit-event-badge.comment { background: #f3f4f6; color: #374151; }

    .audit-time {
        font-size: 12px;
        color: var(--tl-text-muted);
    }

    .audit-description {
        font-size: 14px;
        color: var(--tl-text);
        margin: 4px 0;
        line-height: 1.5;
    }

    /* Comment Message */
    .audit-comment-message {
        background: var(--tl-primary-light);
        padding: 10px 14px;
        border-radius: var(--tl-radius);
        font-size: 14px;
        color: var(--tl-text);
        margin-top: 8px;
        line-height: 1.5;
        border-left: 3px solid var(--tl-primary);
    }

    /* Changes List */
    .audit-changes {
        margin-top: 8px;
        font-size: 13px;
    }

    .audit-change-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 4px 0;
        color: var(--tl-text);
    }

    .audit-change-field {
        font-weight: 500;
        min-width: 100px;
        color: var(--tl-text-muted);
    }

    .audit-change-from {
        text-decoration: line-through;
        color: var(--tl-danger);
        opacity: 0.7;
    }

    .audit-change-arrow {
        color: var(--tl-text-muted);
    }

    .audit-change-to {
        color: var(--tl-success);
        font-weight: 500;
    }

    /* Delete Button */
    .audit-delete-btn {
        background: none;
        border: none;
        color: var(--tl-text-muted);
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        opacity: 0;
        transition: all 0.2s;
    }

    .audit-timeline-item:hover .audit-delete-btn {
        opacity: 1;
    }

    .audit-delete-btn:hover {
        color: var(--tl-danger);
        background: #fee2e2;
    }

    /* Loading */
    .audit-loading {
        padding: 40px 20px;
        text-align: center;
        color: var(--tl-text-muted);
    }

    .audit-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--tl-border);
        border-top-color: var(--tl-primary);
        border-radius: 50%;
        animation: audit-spin 0.8s linear infinite;
        margin: 0 auto 12px;
    }

    @keyframes audit-spin {
        to { transform: rotate(360deg); }
    }

    /* Error */
    .audit-error {
        padding: 20px;
        text-align: center;
        color: var(--tl-danger);
        background: #fee2e2;
        border-radius: var(--tl-radius);
        margin: 16px 20px;
    }

    .audit-retry-btn {
        margin-top: 12px;
        padding: 8px 16px;
        background: var(--tl-danger);
        color: white;
        border: none;
        border-radius: var(--tl-radius);
        cursor: pointer;
        font-size: 13px;
    }
</style>

<div class="audit-timeline-wrapper" id="{{ $uniqueId }}">
    <div class="audit-timeline-card">
        <!-- Header -->
        <div class="audit-timeline-header">
            <h3 class="audit-timeline-title">
                <svg width="20" height="20" 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 }}
                <span class="audit-timeline-count" id="{{ $uniqueId }}_count">0</span>
            </h3>
        </div>

        <!-- Comment Input -->
        <div class="audit-comment-input-section">
            <div class="audit-comment-form">
                <textarea 
                    class="audit-comment-textarea" 
                    id="{{ $uniqueId }}_input"
                    placeholder="Add a note or comment..."
                    rows="2"
                ></textarea>
                <div class="audit-comment-actions">
                    <label class="audit-internal-check">
                        <input type="checkbox" id="{{ $uniqueId }}_internal">
                        Internal Note (not visible to customer)
                    </label>
                    <button type="button" class="audit-submit-btn" id="{{ $uniqueId }}_submit">
                        <svg width="16" height="16" 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>
                        Add Comment
                    </button>
                </div>
            </div>
        </div>

        <!-- Timeline List -->
        <div class="audit-timeline-list" id="{{ $uniqueId }}_list">
            <div class="audit-loading">
                <div class="audit-spinner"></div>
                Loading activity...
            </div>
        </div>
    </div>
</div>

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

    // DOM Elements
    const listEl = document.getElementById(config.uniqueId + '_list');
    const countEl = document.getElementById(config.uniqueId + '_count');
    const inputEl = document.getElementById(config.uniqueId + '_input');
    const internalEl = document.getElementById(config.uniqueId + '_internal');
    const submitBtn = document.getElementById(config.uniqueId + '_submit');

    // Load Timeline - Using GET with query parameters
    async function loadTimeline() {
        try {
            listEl.innerHTML = `
                <div class="audit-loading">
                    <div class="audit-spinner"></div>
                    Loading activity...
                </div>
            `;

            // 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);

            console.log('Loading timeline from:', url.toString());

            const response = await fetch(url.toString(), {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': config.csrfToken,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            const result = await response.json();
            console.log('Timeline response:', result);

            if (!response.ok) {
                throw new Error(result.message || 'Failed to load timeline');
            }

            if (result.success && result.data) {
                renderTimeline(result.data);
                countEl.textContent = result.data.length || 0;
            } else {
                throw new Error(result.message || 'No data returned');
            }

        } catch (error) {
            console.error('Timeline load error:', error);
            listEl.innerHTML = `
                <div class="audit-error">
                    <strong>Error loading activity</strong>
                    <p style="margin:8px 0 0;font-size:13px;">${error.message}</p>
                    <button class="audit-retry-btn" onclick="window['${config.uniqueId}_reload']()">
                        Try Again
                    </button>
                </div>
            `;
        }
    }

    // Expose reload function globally
    window[config.uniqueId + '_reload'] = loadTimeline;

    // Render Timeline
    function renderTimeline(activities) {
        if (!activities || activities.length === 0) {
            listEl.innerHTML = `
                <div class="audit-timeline-empty">
                    <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div>No activity recorded yet</div>
                    <div style="font-size:12px;margin-top:4px;">Updates and comments will appear here</div>
                </div>
            `;
            return;
        }

        listEl.innerHTML = activities.map(item => renderItem(item)).join('');
    }

    // Render Single Item
    function renderItem(item) {
        const isComment = item.is_comment || item.event === 'comment';
        const avatarClass = isComment ? 'comment' : (item.causer_name === 'System' ? 'system' : '');
        
        let changesHtml = '';
        if (item.changes && item.changes.length > 0) {
            changesHtml = `
                <div class="audit-changes">
                    ${item.changes.map(change => `
                        <div class="audit-change-item">
                            <span class="audit-change-field">${change.field}:</span>
                            <span class="audit-change-from">${change.from}</span>
                            <span class="audit-change-arrow">→</span>
                            <span class="audit-change-to">${change.to}</span>
                        </div>
                    `).join('')}
                </div>
            `;
        }

        let messageHtml = '';
        if (item.message) {
            messageHtml = `<div class="audit-comment-message">${escapeHtml(item.message)}</div>`;
        }

        let deleteBtn = '';
        if (isComment) {
            deleteBtn = `
                <button class="audit-delete-btn" onclick="window['${config.uniqueId}_delete'](${item.id})" title="Delete comment">
                    <svg width="16" height="16" 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>
            `;
        }

        return `
            <div class="audit-timeline-item ${isComment ? 'is-comment' : ''}">
                <div class="audit-avatar ${avatarClass}">${item.causer_initials || 'SY'}</div>
                <div class="audit-timeline-content">
                    <div class="audit-timeline-meta">
                        <span class="audit-user-name">${escapeHtml(item.causer_name || 'System')}</span>
                        <span class="audit-event-badge ${item.event || 'updated'}">${item.event || 'updated'}</span>
                        <span class="audit-time">${item.time_ago || ''}</span>
                        ${deleteBtn}
                    </div>
                    <div class="audit-description">${escapeHtml(item.description || '')}</div>
                    ${messageHtml}
                    ${changesHtml}
                </div>
            </div>
        `;
    }

    // Escape HTML
    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Add Comment
    async function addComment() {
        const message = inputEl.value.trim();
        if (!message) {
            alert('Please enter a comment');
            return;
        }

        submitBtn.disabled = true;
        submitBtn.innerHTML = `
            <div class="audit-spinner" style="width:16px;height:16px;margin:0;border-width:2px;"></div>
            Saving...
        `;

        try {
            const response = await fetch(config.commentUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': config.csrfToken,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    subject_type: config.subjectType,
                    subject_id: config.subjectId,
                    message: message,
                    is_internal: internalEl.checked
                })
            });

            const result = await response.json();

            if (result.success) {
                inputEl.value = '';
                internalEl.checked = false;
                loadTimeline();
            } else {
                throw new Error(result.message || 'Failed to add comment');
            }

        } catch (error) {
            console.error('Add comment error:', error);
            alert('Error: ' + error.message);
        } finally {
            submitBtn.disabled = false;
            submitBtn.innerHTML = `
                <svg width="16" height="16" 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>
                Add Comment
            `;
        }
    }

    // Delete Comment
    window[config.uniqueId + '_delete'] = async function(id) {
        if (!confirm('Are you sure you want to delete this comment?')) {
            return;
        }

        try {
            const response = await fetch(`${config.deleteUrl}/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': config.csrfToken,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            const result = await response.json();

            if (result.success) {
                loadTimeline();
            } else {
                throw new Error(result.message || 'Failed to delete comment');
            }

        } catch (error) {
            console.error('Delete error:', error);
            alert('Error: ' + error.message);
        }
    };

    // Event Listeners
    submitBtn.addEventListener('click', addComment);
    
    inputEl.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
            addComment();
        }
    });

    // Initialize on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadTimeline);
    } else {
        loadTimeline();
    }
})();
</script>