@extends('layouts.app')

@section('title', 'Soporte por IA')

@section('content')
<div style="margin-bottom: 15px;">
    <a href="{{ route('tickets.index') }}" style="display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s;" onmouseover="this.style.color='var(--primary)'" onmouseout="this.style.color='var(--text-muted)'">
        <i class="ph ph-arrow-left"></i> Volver a los tickets
    </a>
</div>

<div class="content-header">
    <div class="header-title" style="width: 100%;">
        <h1>Soporte Técnico</h1>
        <p>Conversa con nuestro equipo de nivel 1 para resolver problemas básicos.</p>
    </div>
</div>

<div class="card" x-data="chatBot()">
    <div class="card-body">
        
        <div class="chat-container" style="height: 50vh; overflow-y: auto; background: var(--bg-input, #fafafa); border: 1px solid var(--border-color, #eee); border-radius: 8px; padding: 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;">
            <template x-for="msg in messages" :key="msg.id">
                <div :style="msg.role === 'user' ? 'align-self: flex-end; background: var(--primary); color: white; padding: 10px 15px; border-radius: 15px 15px 0 15px; max-width: 80%;' : 'align-self: flex-start; background: var(--bg-hover, #e9ecef); color: var(--text-primary, #333); padding: 10px 15px; border-radius: 15px 15px 15px 0; max-width: 80%;'">
                    <span x-text="msg.content" style="white-space: pre-wrap;"></span>
                </div>
            </template>
            <div x-show="loading" style="align-self: flex-start; background: var(--bg-hover, #e9ecef); color: var(--text-primary, #333); padding: 10px 15px; border-radius: 15px; font-style: italic;">El técnico está escribiendo...</div>
        </div>

        <form @submit.prevent="sendMessage" style="display: flex; gap: 10px;">
            <input type="text" x-model="inputText" class="form-control" style="flex: 1; padding: 10px;" placeholder="Describe tu problema o requerimiento..." :disabled="loading">
            <button type="submit" class="btn btn-primary" :disabled="loading || !inputText.trim()" style="padding: 0 20px;">
                <i class="ph ph-paper-plane-right"></i> Enviar
            </button>
            <button type="button" @click="escalate" class="btn btn-danger" x-show="sessionId" :disabled="loading" style="padding: 0 20px;">
                <i class="ph ph-warning-circle"></i> Crear Ticket de Soporte
            </button>
        </form>

    </div>
</div>

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('chatBot', () => ({
        sessionId: null,
        inputText: '',
        messages: [
            { id: 1, role: 'model', content: '¡Hola! Soy parte del equipo de Soporte Técnico. ¿En qué te puedo ayudar hoy?' }
        ],
        loading: false,

        async sendMessage() {
            if (!this.inputText.trim()) return;

            const text = this.inputText;
            this.inputText = '';
            
            this.messages.push({
                id: Date.now(),
                role: 'user',
                content: text
            });

            this.loading = true;

            // Scroll down
            setTimeout(() => {
                const container = document.querySelector('.chat-container');
                container.scrollTop = container.scrollHeight;
            }, 100);

            try {
                const response = await fetch('{{ route('support.chat.send') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        message: text,
                        session_id: this.sessionId
                    })
                });

                const data = await response.json();
                this.sessionId = data.session_id;

                this.messages.push({
                    id: Date.now() + 1,
                    role: 'model',
                    content: data.reply
                });
            } catch (error) {
                this.messages.push({
                    id: Date.now() + 1,
                    role: 'model',
                    content: 'Error de conexión con el soporte.'
                });
            }

            this.loading = false;
            
            // Scroll down
            setTimeout(() => {
                const container = document.querySelector('.chat-container');
                container.scrollTop = container.scrollHeight;
            }, 100);
        },

        async escalate() {
            const result = await Swal.fire({
                title: '¿Crear ticket?',
                text: '¿Seguro que deseas crear un ticket de soporte con esta información?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3b82f6',
                confirmButtonText: 'Sí, crear',
                cancelButtonText: 'Cancelar'
            });
            if (!result.isConfirmed) return;
            
            this.loading = true;
            try {
                const response = await fetch('{{ route('support.chat.escalate') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        session_id: this.sessionId
                    })
                });

                const data = await response.json();
                if (data.success) {
                    window.location.href = '/tickets/' + data.ticket_id;
                } else {
                    Swal.fire({ title: 'Atención', text: 'Error al escalar el ticket.', icon: 'warning', confirmButtonText: 'Entendido' });
                    this.loading = false;
                }
            } catch (error) {
                Swal.fire({ title: 'Atención', text: 'Error de conexión al escalar.', icon: 'warning', confirmButtonText: 'Entendido' });
                this.loading = false;
            }
        }
    }));
});
</script>
@endpush
@endsection