@extends('layouts.app')

@section('title', 'Conversa')

@section('page-title', 'Conversa: ' . ($contato->nome ?? $contato->wa_id))

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('contatos.index') }}">Contatos</a></li>
    <li class="breadcrumb-item active">Conversa</li>
@endsection

@php
    // Redirecionar para a tela de chat que usa API externa
    header('Location: ' . route('chat.index', ['contato_id' => $contato->id]));
    exit;
@endphp

@section('head')
<style>
    .chat-container {
        height: 600px;
        overflow-y: auto;
        padding: 15px;
        background-color: #f4f6f9;
    }
    .message {
        margin-bottom: 15px;
        display: flex;
    }
    .message.sent {
        justify-content: flex-end;
    }
    .message.received {
        justify-content: flex-start;
    }
    .message-bubble {
        max-width: 70%;
        padding: 10px 15px;
        border-radius: 18px;
        word-wrap: break-word;
    }
    .message.sent .message-bubble {
        background-color: #dcf8c6;
        color: #000;
    }
    .message.received .message-bubble {
        background-color: #ffffff;
        color: #000;
        border: 1px solid #e5e5e5;
    }
    .message-time {
        font-size: 11px;
        color: #999;
        margin-top: 5px;
    }
    .message-header {
        font-weight: bold;
        font-size: 12px;
        margin-bottom: 5px;
    }
    #messageInput {
        resize: none;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-user"></i> {{ $contato->nome ?? 'Sem nome' }}
                    <small class="text-muted">{{ $contato->wa_id }}</small>
                </h3>
                <div class="card-tools">
                    <a href="{{ route('contatos.index') }}" class="btn btn-default btn-sm">
                        <i class="fas fa-arrow-left"></i> Voltar
                    </a>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="chat-container" id="chatContainer">
                    @forelse($mensagens->items() as $mensagem)
                        <div class="message {{ $mensagem->is_outgoing ? 'sent' : 'received' }}">
                            <div class="message-bubble">
                                <div class="message-header">
                                    {{ $mensagem->is_outgoing ? 'Você' : ($contato->nome ?? 'Contato') }}
                                </div>
                                @if($mensagem->type == 'text')
                                    <div>{{ $mensagem->body }}</div>
                                @elseif($mensagem->type == 'image')
                                    <div>
                                        @if($mensagem->file_url)
                                            <img src="{{ $mensagem->file_url }}" alt="Imagem" class="img-fluid" style="max-width: 300px;">
                                        @endif
                                        @if($mensagem->caption)
                                            <div class="mt-2">{{ $mensagem->caption }}</div>
                                        @endif
                                    </div>
                                @elseif($mensagem->type == 'video')
                                    <div>
                                        @if($mensagem->file_url)
                                            <video controls style="max-width: 300px;">
                                                <source src="{{ $mensagem->file_url }}" type="video/mp4">
                                            </video>
                                        @endif
                                        @if($mensagem->caption)
                                            <div class="mt-2">{{ $mensagem->caption }}</div>
                                        @endif
                                    </div>
                                @elseif($mensagem->type == 'voice')
                                    <div>
                                        @if($mensagem->file_url)
                                            <audio controls>
                                                <source src="{{ $mensagem->file_url }}">
                                            </audio>
                                        @endif
                                        <i class="fas fa-microphone"></i> Áudio
                                    </div>
                                @else
                                    <div>{{ $mensagem->type ?? 'Mensagem' }}</div>
                                @endif
                                <div class="message-time">
                                    {{ $mensagem->created_at->format('d/m/Y H:i') }}
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted mt-5">
                            <p>Nenhuma mensagem ainda. Inicie a conversa!</p>
                        </div>
                    @endforelse
                </div>
                <div class="card-footer">
                    <form id="messageForm">
                        @csrf
                        <input type="hidden" name="dispositivo_id" value="{{ $dispositivo->id }}">
                        <input type="hidden" name="chat_id" value="{{ $contato->wa_id }}">
                        <div class="input-group">
                            <textarea class="form-control" id="messageInput" name="text" rows="2" placeholder="Digite sua mensagem..." required></textarea>
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-paper-plane"></i> Enviar
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="mt-2">
                        <button class="btn btn-sm btn-secondary" onclick="alert('Funcionalidade de upload em desenvolvimento')">
                            <i class="fas fa-image"></i> Imagem
                        </button>
                        <button class="btn btn-sm btn-secondary" onclick="alert('Funcionalidade de upload em desenvolvimento')">
                            <i class="fas fa-video"></i> Vídeo
                        </button>
                        <button class="btn btn-sm btn-secondary" onclick="alert('Funcionalidade de upload em desenvolvimento')">
                            <i class="fas fa-microphone"></i> Áudio
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    const chatContainer = document.getElementById('chatContainer');
    const messageForm = document.getElementById('messageForm');
    const messageInput = document.getElementById('messageInput');
    const contatoId = {{ $contato->id }};

    // Scroll para o final
    function scrollToBottom() {
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    // Enviar mensagem
    messageForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const texto = messageInput.value.trim();
        if (!texto) return;

        const formData = {
            dispositivo_id: messageForm.querySelector('[name="dispositivo_id"]').value,
            chat_id: messageForm.querySelector('[name="chat_id"]').value,
            text: texto
        };

        try {
            const response = await axios.post('{{ route("mensagens.send-text") }}', formData);
            
            if (response.data.success) {
                messageInput.value = '';
                // Recarregar mensagens após 1 segundo
                setTimeout(loadMessages, 1000);
            } else {
                alert('Erro ao enviar mensagem: ' + (response.data.error || 'Erro desconhecido'));
            }
        } catch (error) {
            console.error('Erro:', error);
            alert('Erro ao enviar mensagem: ' + (error.response?.data?.error || error.message));
        }
    });

    // Carregar mensagens
    async function loadMessages() {
        try {
            const response = await axios.get('/contatos/' + contatoId);
            // Aqui você pode atualizar a interface com as novas mensagens
            // Por enquanto, vamos apenas recarregar a página após alguns segundos
        } catch (error) {
            console.error('Erro ao carregar mensagens:', error);
        }
    }

    // Scroll inicial
    scrollToBottom();

    // Atualizar mensagens a cada 5 segundos
    setInterval(function() {
        location.reload(); // Por enquanto, recarrega a página. Pode ser melhorado com AJAX
    }, 5000);
</script>
@endsection