@extends('admin.layouts.app')

@section('title', 'Detalhe da Conversa')
@section('page-kicker', 'Servicos de IA')
@section('page-heading', 'Detalhe da Conversa')

@push('styles')
    <style>
        .message-card {
            border-left: 4px solid transparent;
        }

        .message-card.user {
            border-left-color: #2563eb;
            background: rgba(37, 99, 235, 0.06);
        }

        .message-card.assistant {
            border-left-color: #059669;
            background: rgba(5, 150, 105, 0.06);
        }

        .message-card.default {
            border-left-color: #64748b;
            background: rgba(100, 116, 139, 0.06);
        }
    </style>
@endpush

@section('content')
    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
        <div>
            <h3 class="h5 mb-1">Conversa #{{ $conversa->id }}</h3>
            <p class="text-muted mb-0">Visualizacao tecnica completa da conversa e de seus eventos relacionados.</p>
        </div>

        <div class="d-flex gap-2">
            <a href="{{ route('admin.servicos-ia.requisicoes.index', ['conversa_id' => $conversa->id]) }}" class="btn btn-outline-primary">
                Ver requisicoes
            </a>
            <a href="{{ route('admin.servicos-ia.conversas.index') }}" class="btn btn-outline-secondary">
                Voltar para listagem
            </a>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-xl-8">
            <div class="card content-card h-100">
                <div class="card-body p-4">
                    <h4 class="h6 mb-3">Dados principais</h4>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="small text-muted">Sistema</div>
                            <div class="fw-semibold">{{ optional($conversa->sistema)->nome ?: '-' }}</div>
                            <div class="small text-muted"><code>{{ optional($conversa->sistema)->codigo ?: '-' }}</code></div>
                        </div>
                        <div class="col-md-6">
                            <div class="small text-muted">Rota</div>
                            <div class="fw-semibold">{{ optional($conversa->rota)->nome ?: '-' }}</div>
                            <div class="small text-muted"><code>{{ optional($conversa->rota)->codigo ?: '-' }}</code></div>
                        </div>
                        <div class="col-md-6">
                            <div class="small text-muted">Modelo</div>
                            <div class="fw-semibold">{{ optional($conversa->modelo)->nome ?: '-' }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="small text-muted">Persona</div>
                            <div class="fw-semibold">{{ optional($conversa->persona)->nome ?: '-' }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="small text-muted">Titulo</div>
                            <div class="fw-semibold">{{ $conversa->titulo ?: '-' }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="small text-muted">Status</div>
                            <div>
                                <span class="badge {{ $conversa->status === 'aberta' ? 'bg-primary-subtle text-primary' : 'bg-secondary-subtle text-secondary' }}">
                                    {{ $conversa->status }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="small text-muted">Chave externa</div>
                            <div class="fw-semibold">{{ $conversa->chave_externa ?: '-' }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="small text-muted">ID conversa provedor</div>
                            <div class="fw-semibold">{{ $conversa->id_conversa_provedor ?: '-' }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="small text-muted">Ultima resposta do provedor</div>
                            <div class="fw-semibold">{{ $conversa->id_ultima_resposta_provedor ?: '-' }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="small text-muted">Iniciada em</div>
                            <div class="fw-semibold">{{ optional($conversa->iniciada_em)->format('d/m/Y H:i:s') ?: '-' }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="small text-muted">Finalizada em</div>
                            <div class="fw-semibold">{{ optional($conversa->finalizada_em)->format('d/m/Y H:i:s') ?: '-' }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="small text-muted">Tokens entrada</div>
                            <div class="fw-semibold">{{ number_format((int) $conversa->tokens_entrada_total, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="small text-muted">Tokens saida</div>
                            <div class="fw-semibold">{{ number_format((int) $conversa->tokens_saida_total, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="small text-muted">Custo total estimado</div>
                            <div class="fw-semibold">{{ number_format((float) $conversa->custo_total_estimado, 6, '.', ',') }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="small text-muted">Mensagens</div>
                            <div class="fw-semibold">{{ $conversa->mensagens->count() }}</div>
                        </div>
                        <div class="col-md-3">
                            <div class="small text-muted">Requisicoes</div>
                            <div class="fw-semibold">{{ $conversa->requisicoes->count() }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card content-card h-100">
                <div class="card-body p-4">
                    <h4 class="h6 mb-3">Resumo rapido</h4>
                    <div class="border rounded-3 p-3 mb-3">
                        <div class="small text-muted">Primeira mensagem</div>
                        <div class="fw-semibold">
                            {{ optional($conversa->mensagens->first())->conteudo_texto ? \Illuminate\Support\Str::limit($conversa->mensagens->first()->conteudo_texto, 120) : '-' }}
                        </div>
                    </div>
                    <div class="border rounded-3 p-3">
                        <div class="small text-muted">Ultima mensagem</div>
                        <div class="fw-semibold">
                            {{ optional($conversa->mensagens->last())->conteudo_texto ? \Illuminate\Support\Str::limit($conversa->mensagens->last()->conteudo_texto, 120) : '-' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-xl-7">
            <div class="card content-card">
                <div class="card-body p-4">
                    <h4 class="h6 mb-3">Timeline de mensagens</h4>

                    @forelse ($conversa->mensagens as $mensagem)
                        @php
                            $messageClass = in_array($mensagem->papel, ['user', 'assistant']) ? $mensagem->papel : 'default';
                        @endphp
                        <div class="message-card {{ $messageClass }} rounded-3 p-3 mb-3">
                            <div class="d-flex flex-column flex-md-row justify-content-between gap-2 mb-2">
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    <span class="badge {{ $mensagem->papel === 'assistant' ? 'bg-success-subtle text-success' : ($mensagem->papel === 'user' ? 'bg-primary-subtle text-primary' : 'bg-secondary-subtle text-secondary') }}">
                                        {{ $mensagem->papel }}
                                    </span>
                                    <span class="small text-muted">Ordem {{ $mensagem->ordem }}</span>
                                    <span class="small text-muted">Origem: {{ $mensagem->origem_criacao ?: '-' }}</span>
                                    @if ($mensagem->requisicao_id)
                                        <a href="{{ route('admin.servicos-ia.requisicoes.show', $mensagem->requisicao_id) }}" class="small text-decoration-none">
                                            Requisicao #{{ $mensagem->requisicao_id }}
                                        </a>
                                    @endif
                                </div>
                                <div class="small text-muted">{{ optional($mensagem->created_at)->format('d/m/Y H:i:s') ?: '-' }}</div>
                            </div>
                            <div style="white-space: pre-wrap;">{{ $mensagem->conteudo_texto ?: '-' }}</div>
                        </div>
                    @empty
                        <div class="text-muted">Nenhuma mensagem registrada para esta conversa.</div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="col-xl-5">
            <div class="card content-card">
                <div class="card-body p-4">
                    <h4 class="h6 mb-3">Requisicoes relacionadas</h4>

                    @forelse ($conversa->requisicoes as $requisicao)
                        <div class="border rounded-3 p-3 mb-3">
                            <div class="d-flex justify-content-between align-items-start gap-3 mb-2">
                                <div>
                                    <div class="fw-semibold">Requisicao #{{ $requisicao->id }}</div>
                                    <div class="small text-muted">
                                        {{ $requisicao->tipo_requisicao }} / HTTP {{ $requisicao->codigo_http ?: '-' }}
                                    </div>
                                </div>
                                <span class="badge {{ $requisicao->status === 'sucesso' ? 'bg-success-subtle text-success' : ($requisicao->status === 'erro' ? 'bg-danger-subtle text-danger' : 'bg-secondary-subtle text-secondary') }}">
                                    {{ $requisicao->status }}
                                </span>
                            </div>
                            <div class="small text-muted mb-2">
                                Inicio: {{ optional($requisicao->iniciada_em)->format('d/m/Y H:i:s') ?: '-' }}
                            </div>
                            <div class="small text-muted mb-3">
                                Tokens {{ number_format((int) $requisicao->tokens_total, 0, ',', '.') }} / Custo {{ number_format((float) $requisicao->custo_estimado, 6, '.', ',') }}
                            </div>
                            <a href="{{ route('admin.servicos-ia.requisicoes.show', $requisicao) }}" class="btn btn-sm btn-outline-primary">
                                Ver detalhe da requisicao
                            </a>
                        </div>
                    @empty
                        <div class="text-muted">Nenhuma requisicao relacionada encontrada.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection