@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-900'])
@php
    use Illuminate\Support\Facades\Storage;
@endphp

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Novo Chat'])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6>Selecione um Agente</h6>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('chats.store') }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="idagente" class="form-label">Agente</label>
                                <select name="idagente" id="idagente" class="form-control" required onchange="mostrarResumoAgente()">
                                    <option value="">Selecione um agente</option>
                                    @foreach($agentes as $agente)
                                        <option value="{{ $agente->idagente }}" 
                                                data-nome="{{ $agente->nome }}"
                                                data-especialidade="{{ $agente->especialidade ?? '' }}"
                                                data-foto="{{ $agente->foto ? Storage::url($agente->foto) : '' }}"
                                                data-quem-e="{{ $agente->quem_e ?? '' }}"
                                                {{ (isset($idagente) && $idagente == $agente->idagente) ? 'selected' : '' }}>
                                            {{ $agente->nome }}{{ $agente->especialidade ? ' - ' . $agente->especialidade : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div id="resumo-agente" class="mb-3" style="display: none;">
                                <div class="card bg-gradient-dark" style="border: 1px solid #565869;">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div id="agente-foto-container" style="margin-right: 15px;">
                                                <img id="agente-foto" src="" alt="" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid #10a37f; display: none;">
                                                <div id="agente-inicial" style="width: 80px; height: 80px; border-radius: 50%; background: #10a37f; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold; border: 2px solid #10a37f;"></div>
                                            </div>
                                            <div>
                                                <h5 class="text-white mb-1" id="agente-nome"></h5>
                                                <p class="text-white-50 mb-1 small" id="agente-especialidade" style="font-size: 13px;"></p>
                                                <p class="text-white-50 mb-0" id="agente-quem-e" style="font-size: 14px;"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="idcliente" class="form-label">Cliente (opcional)</label>
                                <select name="idcliente" id="idcliente" class="form-control">
                                    <option value="">Nenhum — uso geral ou @ na mensagem</option>
                                    @foreach($clientes as $c)
                                        <option value="{{ $c->id }}" {{ (isset($idcliente) && $idcliente == $c->id) ? 'selected' : '' }}>
                                            {{ $c->nome }}@if($c->slug) ({{ $c->slug }})@endif
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Se escolher um cliente, o agente terá o contexto dele em todas as mensagens. Você ainda pode citar outro com @Nome na mensagem.</small>
                            </div>
                            <div class="mb-3">
                                <label for="titulo" class="form-label">Título (opcional)</label>
                                <input type="text" name="titulo" id="titulo" class="form-control" placeholder="Ex: Dúvidas sobre processos">
                            </div>
                            <div class="text-end">
                                <a href="{{ route('chats.index') }}" class="btn btn-secondary">Cancelar</a>
                                <button type="submit" class="btn btn-primary">Iniciar Chat</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function mostrarResumoAgente() {
            const select = document.getElementById('idagente');
            const resumoDiv = document.getElementById('resumo-agente');
            const agenteNome = document.getElementById('agente-nome');
            const agenteEspecialidade = document.getElementById('agente-especialidade');
            const agenteQuemE = document.getElementById('agente-quem-e');
            const agenteFoto = document.getElementById('agente-foto');
            const agenteInicial = document.getElementById('agente-inicial');

            if (select.value) {
                const selectedOption = select.options[select.selectedIndex];
                const nome = selectedOption.getAttribute('data-nome');
                const especialidade = selectedOption.getAttribute('data-especialidade') || '';
                const foto = selectedOption.getAttribute('data-foto');
                const quemE = selectedOption.getAttribute('data-quem-e');

                agenteNome.textContent = nome;
                agenteEspecialidade.textContent = especialidade;
                agenteEspecialidade.style.display = especialidade ? 'block' : 'none';
                agenteQuemE.textContent = quemE || 'Sem descrição disponível.';

                if (foto) {
                    agenteFoto.src = foto;
                    agenteFoto.alt = nome;
                    agenteFoto.style.display = 'block';
                    agenteInicial.style.display = 'none';
                } else {
                    agenteFoto.style.display = 'none';
                    agenteInicial.textContent = nome.charAt(0).toUpperCase();
                    agenteInicial.style.display = 'flex';
                }

                resumoDiv.style.display = 'block';
            } else {
                resumoDiv.style.display = 'none';
            }
        }

        // Mostrar resumo se já houver agente selecionado ao carregar
        document.addEventListener('DOMContentLoaded', function() {
            const select = document.getElementById('idagente');
            if (select.value) {
                mostrarResumoAgente();
            }
        });
    </script>
@endsection