@extends('layouts.app')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
@endpush

@section('content')
<div class="chatwoot app-wrapper">
    <div class="main-content main-content--full">
        <!-- Header -->
        <div class="page-header">
            <div class="page-header__content">
                <div>
                    <h1 class="page-header__title">Dialog Statuses</h1>
                    <p class="page-header__subtitle">Manage custom statuses for conversations</p>
                </div>
                <div class="page-header__actions">
                    <button type="button" class="button button--primary" onclick="openAddStatusModal()">
                        <svg class="icon icon--small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                        Add Status
                    </button>
                </div>
            </div>
        </div>

        <!-- Status List Container -->
        <div class="status-container">
            <div class="status-list" id="statusList">
                <!-- Statuses will be loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Status Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Add Status</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="statusForm">
                @csrf
                <input type="hidden" id="statusId" name="id">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="statusName">Status Name</label>
                        <input type="text" class="form-control" id="statusName" name="name" placeholder="Enter status name" required>
                    </div>
                    <div class="form-group">
                        <label for="statusColor">Color</label>
                        <input type="color" class="form-control" id="statusColor" name="color" value="#1976d2">
                    </div>
                    <div class="form-group">
                        <label for="sortOrder">Sort Order</label>
                        <input type="number" class="form-control" id="sortOrder" name="sort_order" value="0" min="0">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button button--secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="button button--primary">Save Status</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
/* Page Layout */
.main-content--full {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.page-header {
    background: white;
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-normal) var(--space-medium);
    margin-bottom: 0;
}

.page-header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header__title {
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 var(--space-smaller) 0;
}

.page-header__subtitle {
    font-size: var(--font-size-small);
    color: var(--color-body);
    margin: 0;
}

.page-header__actions {
    display: flex;
    gap: var(--space-small);
}

/* Status Container */
.status-container {
    padding: var(--space-medium);
}

.status-list {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

/* Status Item */
.status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-slab) var(--space-normal);
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.2s;
}

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

.status-item:hover {
    background-color: var(--color-background);
}

.status-info {
    display: flex;
    align-items: center;
    gap: var(--space-one);
}

.status-color {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--border-radius-small);
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.status-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-micro);
}

.status-name {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-heading);
    display: flex;
    align-items: center;
    gap: var(--space-small);
}

.status-meta {
    font-size: var(--font-size-mini);
    color: var(--color-body);
}

.status-actions {
    display: flex;
    gap: var(--space-small);
}

/* Empty State */
.empty-state {
    padding: var(--space-jumbo);
    text-align: center;
}

.empty-state__icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-normal);
    background-color: var(--color-woot-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state__icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-woot);
}

.empty-state__title {
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 var(--space-small) 0;
}

.empty-state__text {
    font-size: var(--font-size-small);
    color: var(--color-body);
    margin: 0 0 var(--space-normal) 0;
}

/* Modal Overrides */
.modal-dialog {
    max-width: 500px;
}

.modal-content {
    border: none;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-normal);
}

.modal-title {
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--color-heading);
}

.modal-body {
    padding: var(--space-normal);
}

.modal-footer {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-slab) var(--space-normal);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-small);
}

/* Form Elements */
.form-group {
    margin-bottom: var(--space-normal);
}

.form-group label {
    display: block;
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: var(--space-small);
}

.form-control {
    width: 100%;
    padding: var(--space-small) var(--space-one);
    font-size: var(--font-size-small);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-normal);
    background-color: white;
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-woot);
    box-shadow: 0 0 0 3px rgba(31, 147, 255, 0.1);
}

/* Color Input */
input[type="color"] {
    height: 40px;
    cursor: pointer;
}

/* Close Button */
.close {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--color-body);
    opacity: .5;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.close:hover {
    opacity: .75;
}

/* Notification */
.notification {
    position: fixed;
    top: var(--space-normal);
    right: var(--space-normal);
    z-index: 9999;
    min-width: 320px;
    padding: var(--space-slab) var(--space-normal);
    background: white;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--space-one);
}

.notification--success {
    border-left: 4px solid var(--color-success);
}

.notification--error {
    border-left: 4px solid var(--color-error);
}

.notification__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.notification--success .notification__icon {
    color: var(--color-success);
}

.notification--error .notification__icon {
    color: var(--color-error);
}

.notification__content {
    flex: 1;
}

.notification__title {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-heading);
    margin: 0;
}

.notification__close {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-body);
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
}

.notification__close:hover {
    opacity: 1;
}
</style>

<script>
let currentStatuses = [];

document.addEventListener('DOMContentLoaded', function() {
    loadStatuses();
    
    document.getElementById('statusForm').addEventListener('submit', function(e) {
        e.preventDefault();
        saveStatus();
    });
});

function loadStatuses() {
    fetch('/admin/configuration/dialog-statuses/list')
        .then(response => response.json())
        .then(data => {
            currentStatuses = data;
            renderStatuses();
        })
        .catch(error => console.error('Error loading statuses:', error));
}

function renderStatuses() {
    const container = document.getElementById('statusList');
    
    if (currentStatuses.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <div class="empty-state__icon">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                    </svg>
                </div>
                <h3 class="empty-state__title">No statuses configured</h3>
                <p class="empty-state__text">Get started by creating your first dialog status.</p>
                <button class="button button--primary" onclick="openAddStatusModal()">
                    <svg class="icon icon--small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Create First Status
                </button>
            </div>
        `;
        return;
    }
    
    container.innerHTML = currentStatuses
        .sort((a, b) => a.sort_order - b.sort_order)
        .map(status => `
            <div class="status-item">
                <div class="status-info">
                    <div class="status-color" style="background-color: ${status.color}"></div>
                    <div class="status-details">
                        <div class="status-name">
                            ${status.name}
                            ${status.is_default ? '<span class="badge badge--small badge--primary">Default</span>' : ''}
                        </div>
                        <div class="status-meta">Sort order: ${status.sort_order}</div>
                    </div>
                </div>
                <div class="status-actions">
                    <button class="button button--secondary button--small" onclick="editStatus(${status.id})">
                        <svg class="icon icon--small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                        </svg>
                        Edit
                    </button>
                    ${!status.is_default ? `
                        <button class="button button--danger button--small" onclick="deleteStatus(${status.id})">
                            <svg class="icon icon--small" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                            </svg>
                            Delete
                        </button>
                    ` : ''}
                </div>
            </div>
        `).join('');
}

function openAddStatusModal() {
    document.getElementById('modalTitle').textContent = 'Add Status';
    document.getElementById('statusForm').reset();
    document.getElementById('statusId').value = '';
    $('#statusModal').modal('show');
}

function editStatus(id) {
    const status = currentStatuses.find(s => s.id === id);
    if (!status) return;
    
    document.getElementById('modalTitle').textContent = 'Edit Status';
    document.getElementById('statusId').value = status.id;
    document.getElementById('statusName').value = status.name;
    document.getElementById('statusColor').value = status.color;
    document.getElementById('sortOrder').value = status.sort_order;
    
    $('#statusModal').modal('show');
}

function saveStatus() {
    const formData = new FormData(document.getElementById('statusForm'));
    const id = formData.get('id');
    const url = id ? `/admin/configuration/dialog-statuses/${id}` : '/admin/configuration/dialog-statuses';
    const method = id ? 'PUT' : 'POST';
    
    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            name: formData.get('name'),
            color: formData.get('color'),
            sort_order: parseInt(formData.get('sort_order')) || 0
        })
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => Promise.reject(err));
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            $('#statusModal').modal('hide');
            loadStatuses();
            showNotification('Status saved successfully', 'success');
        } else {
            showNotification(data.message || 'Error saving status', 'error');
        }
    })
    .catch(error => {
        console.error('Error saving status:', error);
        if (error.errors) {
            const errorMessages = Object.values(error.errors).flat().join(', ');
            showNotification(errorMessages, 'error');
        } else if (error.message) {
            showNotification(error.message, 'error');
        } else {
            showNotification('Error saving status. Please check the console for details.', 'error');
        }
    });
}

function deleteStatus(id) {
    if (!confirm('Are you sure you want to delete this status? Conversations with this status will be unassigned.')) {
        return;
    }
    
    fetch(`/admin/configuration/dialog-statuses/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => Promise.reject(err));
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            loadStatuses();
            showNotification('Status deleted successfully', 'success');
        } else {
            showNotification(data.message || 'Error deleting status', 'error');
        }
    })
    .catch(error => {
        console.error('Error deleting status:', error);
        if (error.message) {
            showNotification(error.message, 'error');
        } else {
            showNotification('Error deleting status. Please check the console for details.', 'error');
        }
    });
}

function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `notification 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="notification__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            ${iconSvg}
        </svg>
        <div class="notification__content">
            <p class="notification__title">${message}</p>
        </div>
        <button class="notification__close" onclick="this.parentElement.remove()">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    `;
    
    document.body.appendChild(notification);
    
    // Add fade-in animation
    requestAnimationFrame(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateX(100%)';
        notification.style.transition = 'all 0.3s ease';
        
        requestAnimationFrame(() => {
            notification.style.opacity = '1';
            notification.style.transform = 'translateX(0)';
        });
    });
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => notification.remove(), 300);
    }, 5000);
}
</script>
@endsection

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