@extends('admin.layouts.app')

@section('title', 'Editar Sistema')
@section('page-kicker', 'Servicos de IA')
@section('page-heading', 'Editar Sistema')

@section('content')
    @if (session('credencial_gerada'))
        <div class="alert alert-warning">
            <div class="fw-semibold mb-1">Nova credencial gerada</div>
            <div class="small mb-0">
                A credencial abaixo foi regenerada agora. Esta visualizacao armazenada e uma conveniencia administrativa inicial e pode ser endurecida depois.
            </div>
        </div>
    @endif

    <div class="card content-card mb-4">
        <div class="card-body p-4">
            <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">Credencial da API</h3>
                    <p class="text-muted mb-0">
                        Use esta chave nos headers da API. O banco continua validando oficialmente por prefixo e hash.
                    </p>
                </div>

                <form method="POST" action="{{ route('admin.servicos-ia.sistemas.credencial.store', $sistema) }}">
                    @csrf
                    <button type="submit" class="btn btn-outline-primary">
                        {{ $sistema->prefixo_chave ? 'Regenerar chave' : 'Gerar chave' }}
                    </button>
                </form>
            </div>

            <div class="alert alert-info">
                <div class="fw-semibold mb-1">Uso nos headers</div>
                <div><code>Authorization: Bearer SUA_CHAVE</code></div>
                <div><code>X-API-KEY: SUA_CHAVE</code></div>
            </div>

            <div class="row g-3">
                <div class="col-md-4">
                    <div class="border rounded-3 p-3 h-100">
                        <div class="small text-muted mb-1">Prefixo salvo</div>
                        <div class="fw-semibold">{{ $sistema->prefixo_chave ?: 'Nenhuma credencial gerada' }}</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="border rounded-3 p-3 h-100">
                        <div class="small text-muted mb-1">Ultimo uso autenticado</div>
                        <div class="fw-semibold">{{ optional($sistema->ultimo_uso_em)->format('d/m/Y H:i:s') ?: '-' }}</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="border rounded-3 p-3 h-100">
                        <div class="small text-muted mb-1">Base atual da API</div>
                        <div class="fw-semibold">{{ $baseApiUrl }}</div>
                    </div>
                </div>

                <div class="col-12">
                    <label for="credencial_api_completa" class="form-label">Chave completa para desenvolvimento</label>
                    <div class="input-group">
                        <input
                            type="text"
                            id="credencial_api_completa"
                            class="form-control"
                            value="{{ $credencialVisualizacao ?: '' }}"
                            readonly
                        >
                        <button
                            type="button"
                            class="btn btn-outline-secondary"
                            data-copy-target="credencial_api_completa"
                            {{ $credencialVisualizacao ? '' : 'disabled' }}
                        >
                            Copiar
                        </button>
                    </div>
                    <div class="form-text">
                        Exibicao administrativa inicial para facilitar testes locais. Em producao, essa conveniencia pode ser endurecida ou removida.
                    </div>
                </div>
            </div>

            <hr class="my-4">

            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="border rounded-3 p-3 h-100">
                        <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                            <div>
                                <h4 class="h6 mb-1">Teste local rapido</h4>
                                <p class="small text-muted mb-0">Use os endpoints abaixo com a credencial deste sistema.</p>
                            </div>
                        </div>

                        <div class="small text-muted mb-1">Endpoint de autenticacao</div>
                        <div class="mb-3"><code>{{ $testeAuthUrl }}</code></div>

                        <div class="small text-muted mb-1">Endpoint do agro chat</div>
                        <div><code>{{ $agroChatUrl }}</code></div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="border rounded-3 p-3 h-100">
                        <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                            <div>
                                <h4 class="h6 mb-1">Exemplo de curl</h4>
                                <p class="small text-muted mb-0">Ajuste a mensagem e rode localmente.</p>
                            </div>
                        </div>

                        <div class="small text-muted mb-1">Teste de autenticacao</div>
                        <pre id="curl_teste_auth" class="bg-light border rounded p-3 small mb-3"><code>curl.exe -X GET "{{ $testeAuthUrl }}" ^
  -H "Authorization: Bearer {{ $credencialVisualizacao ?: 'SUA_CHAVE_AQUI' }}"</code></pre>
                        <button type="button" class="btn btn-sm btn-outline-secondary mb-3" data-copy-target="curl_teste_auth">
                            Copiar curl teste-auth
                        </button>

                        <div class="small text-muted mb-1">Agro chat</div>
                        <pre id="curl_agro_chat" class="bg-light border rounded p-3 small mb-0"><code>curl.exe -X POST "{{ $agroChatUrl }}" ^
  -H "Content-Type: application/json" ^
  -H "Authorization: Bearer {{ $credencialVisualizacao ?: 'SUA_CHAVE_AQUI' }}" ^
  -d "{\"mensagem\":\"Preciso simular uma conversa sobre plantio de soja.\",\"titulo\":\"Teste local agro chat\"}"</code></pre>
                        <button type="button" class="btn btn-sm btn-outline-secondary mt-3" data-copy-target="curl_agro_chat">
                            Copiar curl agro chat
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card content-card">
        <div class="card-body p-4">
            <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">{{ $sistema->nome }}</h3>
                    <p class="text-muted mb-0">Atualize os dados principais do sistema cliente.</p>
                </div>

                <a href="{{ route('admin.servicos-ia.sistemas.index') }}" class="btn btn-outline-secondary">
                    Voltar para listagem
                </a>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger">
                    Revise os campos destacados antes de continuar.
                </div>
            @endif

            <form method="POST" action="{{ route('admin.servicos-ia.sistemas.update', $sistema) }}">
                @csrf
                @method('PUT')

                @include('admin.servicos-ia.sistemas._form', ['sistema' => $sistema])

                <div class="d-flex gap-2 mt-4">
                    <button type="submit" class="btn btn-primary">Salvar alteracoes</button>
                    <a href="{{ route('admin.servicos-ia.sistemas.index') }}" class="btn btn-outline-secondary">Cancelar</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('click', function (event) {
            var button = event.target.closest('[data-copy-target]');

            if (!button) {
                return;
            }

            var target = document.getElementById(button.getAttribute('data-copy-target'));

            if (!target) {
                return;
            }

            var text = '';

            if (target.value !== undefined) {
                text = target.value;
            } else {
                text = target.textContent;
            }

            if (!text) {
                return;
            }

            navigator.clipboard.writeText(text).then(function () {
                var originalText = button.textContent;

                button.textContent = 'Copiado';

                window.setTimeout(function () {
                    button.textContent = originalText;
                }, 1500);
            });
        });
    </script>
@endpush