@extends('layouts.app')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
@endpush

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4>Conversation with {{ $conversation->customer_username ?? $conversation->customer_name ?? 'User' }}</h4>
                            <small class="text-muted">
                                {{ $conversation->customer_name }}
                                | Messenger: {{ $conversation->messenger->name }}
                            </small>
                        </div>
                        <a href="{{ route('admin.conversations.index') }}" class="btn btn-secondary">
                            Back to Conversations
                        </a>
                    </div>
                </div>
                
                <div class="card-body" style="height: 500px; overflow-y: scroll;" id="messages-container">
                    @foreach($conversation->messages as $message)
                        @if($message->sender_type == 'system')
                            <div class="mb-3 text-center">
                                <div class="d-inline-block px-3 py-2 rounded bg-secondary text-white"
                                    style="font-size: 0.875rem;">
                                    <i class="fas fa-info-circle"></i>
                                    {{ $message->content }}
                                    <small class="text-white-50 ml-2">
                                        {{ $message->created_at->format('H:i') }}
                                    </small>
                                </div>
                            </div>
                        @else
                            <div class="mb-3 {{ $message->sender_type == 'operator' ? 'text-right' : '' }}">
                                <div class="d-inline-block p-3 rounded 
                                    {{ $message->sender_type == 'operator' ? 'bg-primary text-white' : 'bg-light' }}"
                                    style="max-width: 70%;">
                                    <div class="mb-1">
                                        <strong>
                                            {{ $message->sender_type == 'customer' ? ($conversation->customer_username ?? $conversation->customer_name) : ($message->user ? $message->user->name : 'System') }}
                                        </strong>
                                        <small class="{{ $message->sender_type == 'operator' ? 'text-white-50' : 'text-muted' }}">
                                            {{ $message->created_at->format('H:i') }}
                                        </small>
                                    </div>
                                    <div>{{ $message->content }}</div>
                                    @if($message->sender_type == 'operator' && !$message->is_sent)
                                        <small class="text-warning">⚠️ Not sent</small>
                                    @endif
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
                
                <div class="card-footer">
                    <form action="{{ route('admin.conversations.send', $conversation) }}" method="POST">
                        @csrf
                        <div class="input-group">
                            <textarea name="content" 
                                      class="form-control @error('content') is-invalid @enderror" 
                                      placeholder="Type your message..." 
                                      rows="2"
                                      required></textarea>
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-primary">
                                    Send
                                </button>
                            </div>
                        </div>
                        @error('content')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Right Sidebar for Conversation Details -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Conversation Details</h5>
                </div>
                <div class="card-body">
                    <!-- Status Section -->
                    <div class="mb-4" style="background-color: #f8f9fa; padding: 15px; border-radius: 8px;">
                        <h6 class="text-muted mb-3" style="font-size: 14px; font-weight: 600;">DIALOG STATUS</h6>
                        
                        <!-- Current Status Display -->
                        <div class="mb-3">
                            <label style="font-size: 12px; color: #6c757d; display: block; margin-bottom: 5px;">Current Status:</label>
                            <div id="current-status" data-current-id="{{ $conversation->status_id }}">
                                @if($conversation->dialogStatus)
                                    <span style="display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; color: white; background-color: {{ $conversation->dialogStatus->color }};">
                                        <span style="width: 6px; height: 6px; background-color: white; border-radius: 50%; margin-right: 6px; opacity: 0.8;"></span>
                                        {{ $conversation->dialogStatus->name }}
                                    </span>
                                @else
                                    <span style="display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; color: white; background-color: #6c757d;">
                                        <span style="width: 6px; height: 6px; background-color: white; border-radius: 50%; margin-right: 6px; opacity: 0.8;"></span>
                                        No status
                                    </span>
                                @endif
                            </div>
                        </div>
                        
                        <!-- Status Change Dropdown -->
                        <div>
                            <label for="dialog-status-dropdown" style="font-size: 12px; color: #6c757d; display: block; margin-bottom: 5px;">Change Status:</label>
                            <select 
                                id="dialog-status-dropdown" 
                                name="dialog_status"
                                style="width: 100%; padding: 8px 12px; font-size: 14px; border: 1px solid #ced4da; border-radius: 4px; background-color: white; cursor: pointer;"
                                onchange="updateConversationStatus(this.value)"
                            >
                                <option value="">-- Select Status --</option>
                                @php
                                    try {
                                        $allStatuses = \App\Models\DialogStatus::orderBy('sort_order')->get();
                                    } catch (\Exception $e) {
                                        $allStatuses = collect();
                                    }
                                @endphp
                                @if($allStatuses->count() > 0)
                                    @foreach($allStatuses as $dialogStatus)
                                        <option 
                                            value="{{ $dialogStatus->id }}" 
                                            data-color="{{ $dialogStatus->color }}"
                                            data-name="{{ $dialogStatus->name }}"
                                            @if($conversation->status_id == $dialogStatus->id) disabled @endif
                                        >
                                            {{ $dialogStatus->name }}
                                            @if($conversation->status_id == $dialogStatus->id) (current) @endif
                                        </option>
                                    @endforeach
                                @else
                                    <option disabled>No statuses available</option>
                                @endif
                            </select>
                        </div>
                    </div>
                    
                    <!-- Customer Info -->
                    <div class="mb-4">
                        <h6 class="text-muted mb-2">Customer</h6>
                        <p class="mb-1"><strong>Name:</strong> {{ $conversation->customer_name ?? 'N/A' }}</p>
                        <p class="mb-1"><strong>Username:</strong> {{ $conversation->customer_username ?? 'N/A' }}</p>
                        <p class="mb-1"><strong>ID:</strong> {{ $conversation->external_id }}</p>
                    </div>
                    
                    <!-- Messenger Info -->
                    <div class="mb-4">
                        <h6 class="text-muted mb-2">Channel</h6>
                        <p class="mb-1"><strong>{{ $conversation->messenger->name }}</strong></p>
                        <p class="mb-1 text-muted">{{ ucfirst($conversation->messenger->type) }}</p>
                    </div>
                    
                    <!-- Assignment Info -->
                    @if($conversation->assignedUser)
                    <div class="mb-4">
                        <h6 class="text-muted mb-2">Assigned To</h6>
                        <p class="mb-0">{{ $conversation->assignedUser->name }}</p>
                    </div>
                    @endif
                    
                    <!-- Group Info -->
                    @if($conversation->group)
                    <div class="mb-4">
                        <h6 class="text-muted mb-2">Group</h6>
                        <p class="mb-0">{{ $conversation->group->name }}</p>
                    </div>
                    @endif
                    
                    <!-- Timestamps -->
                    <div class="mb-4">
                        <h6 class="text-muted mb-2">Timeline</h6>
                        <p class="mb-1"><small><strong>Created:</strong> {{ $conversation->created_at->format('M d, Y H:i') }}</small></p>
                        <p class="mb-0"><small><strong>Last message:</strong> {{ $conversation->last_message_at ? $conversation->last_message_at->format('M d, Y H:i') : 'N/A' }}</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card-body h6 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Status dropdown styling is inline to avoid conflicts */

/* Loading state */
.status-updating {
    opacity: 0.6;
    pointer-events: none;
}

/* Success notification */
.status-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    padding: 12px 20px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-left: 4px solid #28a745;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideIn 0.3s ease-out;
}

.status-notification--error {
    border-left-color: #dc3545;
}

.status-notification__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.status-notification--success .status-notification__icon {
    color: #28a745;
}

.status-notification--error .status-notification__icon {
    color: #dc3545;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* System message styling */
.system-message-new {
    animation: messageSlideIn 0.5s ease-out;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>

<script>
    // Auto-scroll to bottom of messages
    document.addEventListener('DOMContentLoaded', function() {
        const messagesContainer = document.getElementById('messages-container');
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    });
    
    // Auto-refresh every 5 seconds
    setTimeout(function() {
        location.reload();
    }, 5000);
    
    // Update conversation status
    function updateConversationStatus(statusId) {
        if (!statusId) {
            return;
        }
        
        const statusSelect = document.getElementById('dialog-status-dropdown');
        const statusDisplay = document.getElementById('current-status');
        const messagesContainer = document.getElementById('messages-container');
        
        // Show loading state
        statusSelect.classList.add('status-updating');
        
        fetch(`{{ route('admin.conversations.updateStatus', $conversation) }}`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                status_id: statusId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update the current status display
                const selectedOption = document.querySelector(`#dialog-status-dropdown option[value="${statusId}"]`);
                const color = selectedOption.getAttribute('data-color');
                const name = selectedOption.getAttribute('data-name');
                
                statusDisplay.dataset.currentId = statusId;
                statusDisplay.innerHTML = `
                    <span style="display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; color: white; background-color: ${color};">
                        <span style="width: 6px; height: 6px; background-color: white; border-radius: 50%; margin-right: 6px; opacity: 0.8;"></span>
                        ${name}
                    </span>
                `;
                
                // Add system message to the chat
                const systemMessage = document.createElement('div');
                systemMessage.className = 'mb-3 text-center system-message-new';
                systemMessage.innerHTML = `
                    <div class="d-inline-block px-3 py-2 rounded bg-secondary text-white" style="font-size: 0.875rem;">
                        <i class="fas fa-info-circle"></i>
                        Status changed to ${name}
                        <small class="text-white-50 ml-2">
                            just now
                        </small>
                    </div>
                `;
                messagesContainer.appendChild(systemMessage);
                
                // Scroll to bottom to show new system message
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
                
                // Show success notification
                showStatusNotification('Status updated successfully', 'success');
                
                // Remove loading state
                statusSelect.classList.remove('status-updating');
                
                // Reset select to show placeholder
                statusSelect.value = '';
            } else {
                showStatusNotification(data.message || 'Error updating status', 'error');
                statusSelect.classList.remove('status-updating');
                statusSelect.value = '';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showStatusNotification('Error updating status', 'error');
            statusSelect.classList.remove('status-updating');
            statusSelect.value = '';
        });
    }
    
    function showStatusNotification(message, type) {
        const notification = document.createElement('div');
        notification.className = `status-notification status-notification--${type}`;
        
        const iconSvg = type === 'success' 
            ? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>'
            : '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>';
        
        notification.innerHTML = `
            <svg class="status-notification__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                ${iconSvg}
            </svg>
            <span>${message}</span>
        `;
        
        document.body.appendChild(notification);
        
        // Auto-remove after 3 seconds
        setTimeout(() => {
            notification.style.opacity = '0';
            notification.style.transform = 'translateX(100%)';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
</script>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js?v={{ time() }}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js?v={{ time() }}"></script>
@endpush