@extends('layouts.app')

@section('title', 'Auditoria Diária de Erros de Pagamento')
@section('topbar_title', '🚨 Auditoria de Falhas & Inconsistências de Pagamentos')

@section('styles')
<style>
    .errors-dashboard {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-bottom: 40px;
    }

    /* Hero Header */
    .errors-hero {
        background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.02) 100%);
        border: 1px solid rgba(220, 38, 38, 0.2);
        border-radius: var(--radius-lg, 14px);
        padding: 22px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }

    .errors-hero-title {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .errors-hero-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-top: 4px;
        max-width: 680px;
        line-height: 1.45;
    }

    .errors-hero-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* KPI Grid */
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }

    .kpi-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md, 12px);
        padding: 18px 20px;
        box-shadow: var(--shadow-card);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .kpi-card.danger {
        border-left: 4px solid var(--brand-primary);
    }

    .kpi-card.warning {
        border-left: 4px solid var(--accent-amber);
    }

    .kpi-card.success {
        border-left: 4px solid var(--accent-green);
    }

    .kpi-label {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 700;
        color: var(--text-muted);
    }

    .kpi-value {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--text-main);
        margin-top: 8px;
        letter-spacing: -0.02em;
    }

    .kpi-sub {
        font-size: 0.78rem;
        color: var(--text-muted);
        margin-top: 4px;
    }

    /* Filtros */
    .filter-panel {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md, 12px);
        padding: 18px 22px;
        box-shadow: var(--shadow-card);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .period-tabs {
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 12px;
        overflow-x: auto;
    }

    .period-btn {
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        transition: all 0.2s ease;
        background: transparent;
        border: 1px solid transparent;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .period-btn:hover {
        color: var(--text-main);
        background: var(--bg-card-hover);
    }

    .period-btn.active {
        background: rgba(220, 38, 38, 0.1);
        color: var(--brand-primary);
        border-color: rgba(220, 38, 38, 0.25);
        font-weight: 700;
    }

    .filter-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }

    .filter-controls {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        flex: 1;
    }

    .form-control-custom {
        background: var(--bg-base);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 0.85rem;
        color: var(--text-main);
        outline: none;
        transition: border-color 0.2s ease;
    }

    .form-control-custom:focus {
        border-color: var(--brand-primary);
    }

    /* Tabela de Erros */
    .table-container {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md, 12px);
        overflow: hidden;
        box-shadow: var(--shadow-card);
    }

    .table-errors {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .table-errors th {
        background: var(--bg-base);
        color: var(--text-muted);
        text-transform: uppercase;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .table-errors td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-color-subtle);
        color: var(--text-main);
        vertical-align: top;
    }

    .table-errors tr:hover td {
        background: var(--bg-card-hover);
    }

    /* Badges de Erro */
    .badge-error-type {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .badge-pix-error {
        background: rgba(220, 38, 38, 0.1);
        color: #dc2626;
        border: 1px solid rgba(220, 38, 38, 0.25);
    }

    .badge-dados-error {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.25);
    }

    .badge-dda-error {
        background: rgba(37, 99, 235, 0.1);
        color: #2563eb;
        border: 1px solid rgba(37, 99, 235, 0.25);
    }

    .badge-saldo-error {
        background: rgba(147, 51, 234, 0.1);
        color: #9333ea;
        border: 1px solid rgba(147, 51, 234, 0.25);
    }

    .badge-generic-error {
        background: rgba(100, 116, 139, 0.1);
        color: #64748b;
        border: 1px solid rgba(100, 116, 139, 0.25);
    }

    .callout-action {
        background: var(--bg-base);
        border-left: 3px solid #d97706;
        border-radius: 4px;
        padding: 6px 10px;
        margin-top: 6px;
        font-size: 0.75rem;
        color: var(--text-main);
    }

    /* Botões */
    .btn-action-primary {
        background: var(--brand-primary);
        color: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .btn-action-primary:hover {
        background: var(--brand-primary-hover);
        transform: translateY(-1px);
    }

    .btn-action-secondary {
        background: var(--bg-base);
        color: var(--text-main);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .btn-action-secondary:hover {
        background: var(--bg-card-hover);
        border-color: var(--text-muted);
    }
</style>
@endsection

@section('content')
<div class="errors-dashboard">

    {{-- 1. Alertas de Sessão --}}
    @if(session('success'))
        <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #059669; padding: 14px 18px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; gap: 10px;">
            <span>✅</span> <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session('warning'))
        <div style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: #d97706; padding: 14px 18px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; gap: 10px;">
            <span>⚠️</span> <span>{{ session('warning') }}</span>
        </div>
    @endif

    @if(session('danger'))
        <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #dc2626; padding: 14px 18px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; gap: 10px;">
            <span>🚨</span> <span>{{ session('danger') }}</span>
        </div>
    @endif

    {{-- 2. Hero Header --}}
    <div class="errors-hero">
        <div>
            <div class="errors-hero-title">
                <span>🚨</span> Painel Diário de Erros & Rejeições de Pagamento
            </div>
            <div class="errors-hero-desc">
                Como os títulos e dados bancários residem exclusivamente no <strong>ERP Viman</strong>, qualquer divergência de chave PIX, agência ou conta deve ser retificada pelo fornecedor diretamente na origem. Utilize esta tela para acompanhar rejeições bancárias do dia e reprocessar títulos corrigidos.
            </div>
        </div>
        <div class="errors-hero-actions">
            <a href="{{ route('financeiro.erros.exportar-csv', request()->query()) }}" class="btn-action-secondary" title="Exportar planilha Excel com todos os dados e orientações de correção">
                📥 Exportar Relatório CSV (Excel)
            </a>
            <form method="POST" action="{{ route('financeiro.erros.enviar-email') }}" style="display: inline;" data-confirm="Deseja disparar o relatório diário consolidado para a equipe financeira?">
                @csrf
                <button type="submit" class="btn-action-primary">
                    ✉️ Disparar Relatório por E-mail
                </button>
            </form>
            <a href="{{ route('financeiro.contas.index') }}" class="btn-action-secondary">
                ← Voltar para Contas a Pagar
            </a>
        </div>
    </div>

    {{-- 3. KPIs de Inconsistências --}}
    <div class="kpi-grid">
        <div class="kpi-card danger">
            <div class="kpi-label">Erros no Período Selecionado</div>
            <div class="kpi-value" style="color: var(--brand-primary);">{{ $totalErros }}</div>
            <div class="kpi-sub">{{ $periodo === 'hoje' ? 'Ocorrências registradas hoje' : 'Filtradas pelo período' }}</div>
        </div>

        <div class="kpi-card warning">
            <div class="kpi-label">Valor Bloqueado (Pendente)</div>
            <div class="kpi-value" style="color: #d97706;">R$ {{ number_format($valorTotalBloqueado, 2, ',', '.') }}</div>
            <div class="kpi-sub">{{ $totalNaoResolvidos }} duplicata(s) aguardando tratativa</div>
        </div>

        <div class="kpi-card">
            <div class="kpi-label">Chave PIX Incorreta / Inexistente</div>
            <div class="kpi-value">{{ $contagemPorTipo['CHAVE_PIX_REJEITADA'] }}</div>
            <div class="kpi-sub">Fornecedor sem chave ativa no DICT</div>
        </div>

        <div class="kpi-card">
            <div class="kpi-label">Dados Bancários Inválidos</div>
            <div class="kpi-value">{{ $contagemPorTipo['DADOS_BANCARIOS_INVALIDOS'] }}</div>
            <div class="kpi-sub">Agência / Conta incorreta no Viman</div>
        </div>

        <div class="kpi-card success">
            <div class="kpi-label">Inconsistências Resolvidas</div>
            <div class="kpi-value" style="color: #16a34a;">{{ $totalResolvidos }}</div>
            <div class="kpi-sub">Reprocessadas com sucesso</div>
        </div>
    </div>

    {{-- 4. Painel de Filtros Diários --}}
    <div class="filter-panel">
        <form method="GET" action="{{ route('financeiro.erros.index') }}" id="filterErrosForm">
            <input type="hidden" name="periodo" id="periodoInput" value="{{ $periodo }}">

            {{-- Abas de Período Rápido --}}
            <div class="period-tabs">
                <button type="button" class="period-btn {{ $periodo === 'hoje' ? 'active' : '' }}" onclick="setPeriodo('hoje')">
                    📅 Hoje ({{ date('d/m/Y') }})
                </button>
                <button type="button" class="period-btn {{ $periodo === 'ontem' ? 'active' : '' }}" onclick="setPeriodo('ontem')">
                    ⏮️ Ontem ({{ date('d/m/Y', strtotime('-1 day')) }})
                </button>
                <button type="button" class="period-btn {{ $periodo === '7dias' ? 'active' : '' }}" onclick="setPeriodo('7dias')">
                    🗓️ Últimos 7 dias
                </button>
                <button type="button" class="period-btn {{ $periodo === 'mes' ? 'active' : '' }}" onclick="setPeriodo('mes')">
                    📆 Este Mês
                </button>
                <button type="button" class="period-btn {{ $periodo === 'todos' ? 'active' : '' }}" onclick="setPeriodo('todos')">
                    📑 Histórico Completo
                </button>
            </div>

            {{-- Linha de Filtros Adicionais --}}
            <div class="filter-row" style="margin-top: 14px;">
                <div class="filter-controls">
                    <input type="text" name="busca" value="{{ $busca }}" placeholder="Buscar por fornecedor, CNPJ, documento ou mensagem..." class="form-control-custom" style="min-width: 280px;">

                    <select name="filial" class="form-control-custom" onchange="this.form.submit()">
                        <option value="todas" {{ $filial === 'todas' ? 'selected' : '' }}>🏢 Todas as Filiais</option>
                        <option value="01" {{ $filial === '01' ? 'selected' : '' }}>01 - Vitória Hospitalar Matriz (ES)</option>
                        <option value="02" {{ $filial === '02' ? 'selected' : '' }}>02 - Vitória Hospitalar Filial SP</option>
                        <option value="03" {{ $filial === '03' ? 'selected' : '' }}>03 - Vitória Hospitalar Filial MG</option>
                        <option value="04" {{ $filial === '04' ? 'selected' : '' }}>04 - Vitória Hospitalar Filial RJ</option>
                        <option value="05" {{ $filial === '05' ? 'selected' : '' }}>05 - Vitória Hospitalar Filial RP</option>
                        <option value="10" {{ $filial === '10' ? 'selected' : '' }}>10 - VH Conecta Matriz (RJ)</option>
                    </select>

                    <select name="tipo_falha" class="form-control-custom" onchange="this.form.submit()">
                        <option value="todos" {{ $tipoFalha === 'todos' ? 'selected' : '' }}>Tipo de Erro: Todos</option>
                        <option value="CHAVE_PIX_REJEITADA" {{ $tipoFalha === 'CHAVE_PIX_REJEITADA' ? 'selected' : '' }}>Chave PIX Incorreta / Inativa</option>
                        <option value="DADOS_BANCARIOS_INVALIDOS" {{ $tipoFalha === 'DADOS_BANCARIOS_INVALIDOS' ? 'selected' : '' }}>Agência / Conta Incorreta</option>
                        <option value="BOLETO_DDA_NAO_ENCONTRADO" {{ $tipoFalha === 'BOLETO_DDA_NAO_ENCONTRADO' ? 'selected' : '' }}>Boleto DDA Não Encontrado</option>
                        <option value="SALDO_INSUFICIENTE" {{ $tipoFalha === 'SALDO_INSUFICIENTE' ? 'selected' : '' }}>Saldo Insuficiente na Matriz</option>
                        <option value="TIMEOUT_COMUNICACAO" {{ $tipoFalha === 'TIMEOUT_COMUNICACAO' ? 'selected' : '' }}>Timeout / Instabilidade na API</option>
                    </select>

                    <select name="status_resolucao" class="form-control-custom" onchange="this.form.submit()">
                        <option value="pendentes" {{ $statusResolucao === 'pendentes' ? 'selected' : '' }}>Status: Apenas Pendentes</option>
                        <option value="resolvidos" {{ $statusResolucao === 'resolvidos' ? 'selected' : '' }}>Status: Apenas Resolvidos</option>
                        <option value="todos" {{ $statusResolucao === 'todos' ? 'selected' : '' }}>Status: Todos</option>
                    </select>

                    <button type="submit" class="btn-action-secondary">Filtrar</button>
                    @if(!empty($busca) || $filial !== 'todas' || $tipoFalha !== 'todos' || $statusResolucao !== 'pendentes' || $periodo !== 'hoje')
                        <a href="{{ route('financeiro.erros.index') }}" class="btn-action-secondary" style="color: var(--brand-primary);">Limpar Filtros</a>
                    @endif
                </div>

                <div>
                    <span style="font-size: 0.8rem; color: var(--text-muted);">
                        Total filtrado: <strong>{{ $totalErros }}</strong> registro(s)
                    </span>
                </div>
            </div>
        </form>
    </div>

    {{-- 5. Tabela de Inconsistências & Erros --}}
    <div class="table-container">
        <table class="table-errors">
            <thead>
                <tr>
                    <th style="width: 90px;">Data Falha</th>
                    <th style="width: 110px;">Doc / Filial</th>
                    <th>Fornecedor / Beneficiário</th>
                    <th style="width: 110px;">Valor</th>
                    <th style="width: 90px;">Modalidade</th>
                    <th>Motivo da Rejeição (API Bradesco)</th>
                    <th>Ação Requerida (Tratativa)</th>
                    <th style="width: 100px;">Status</th>
                    <th style="width: 120px; text-align: right;">Ações</th>
                </tr>
            </thead>
            <tbody>
                @forelse($erros as $e)
                    <tr>
                        <td>
                            <div style="font-weight: 700;">{{ $e->data_falha ? date('d/m/Y', strtotime((string) $e->data_falha)) : '' }}</div>
                            <div style="font-size: 0.72rem; color: var(--text-muted);">{{ $e->created_at ? $e->created_at->format('H:i') : '' }}</div>
                        </td>
                        <td>
                            <div style="font-weight: 800;">{{ $e->numero_documento_erp }}<span style="color: var(--text-muted); font-size: 0.75rem;">/{{ $e->desdobramento_erp }}</span></div>
                            <div style="font-size: 0.72rem; color: var(--text-muted); font-weight: 600;">Filial {{ $e->filial_codigo }}</div>
                        </td>
                        <td>
                            <div style="font-weight: 700;">{{ $e->fornecedor_nome }}</div>
                            <div style="font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace;">
                                CNPJ: {{ $e->fornecedor_cnpj_cpf ?: 'N/D' }} | Cód: {{ $e->fornecedor_codigo }}
                            </div>
                        </td>
                        <td>
                            <div style="font-weight: 800; font-family: 'JetBrains Mono', monospace; font-size: 0.95rem;">
                                R$ {{ number_format($e->valor, 2, ',', '.') }}
                            </div>
                        </td>
                        <td>
                            <span style="font-size: 11px; font-weight: 700; color: var(--text-muted);">{{ $e->modalidade }}</span>
                        </td>
                        <td>
                            <span class="badge-error-type {{ $e->badge_class }}">
                                {{ $e->label_tipo_falha }}
                            </span>
                            <div style="font-size: 0.78rem; color: var(--text-main); margin-top: 4px; line-height: 1.35;">
                                <strong>[{{ $e->codigo_erro_banco }}]</strong> {{ $e->mensagem_erro_banco }}
                            </div>
                        </td>
                        <td>
                            <div class="callout-action">
                                💡 {{ $e->orientacao_correcao }}
                            </div>
                        </td>
                        <td>
                            @if($e->resolvido)
                                <span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #f0fdf4; color: #16a34a;">
                                    ✅ Resolvido
                                </span>
                                @if($e->resolvido_em)
                                    <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">{{ $e->resolvido_em->format('d/m H:i') }}</div>
                                @endif
                            @else
                                <span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fef2f2; color: #dc2626;">
                                    ⚠️ Pendente
                                </span>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div style="display: flex; flex-direction: column; gap: 4px; align-items: flex-end;">
                                @if(!$e->resolvido)
                                    <form method="POST" action="{{ route('financeiro.erros.reprocessar', $e->id) }}">
                                        @csrf
                                        <button type="submit" class="btn-action-primary" style="padding: 4px 8px; font-size: 11px;" title="Consulta o Viman para ver se o fornecedor já corrigiu os dados e tenta liquidar via API novamente">
                                            🔄 Reprocessar
                                        </button>
                                    </form>
                                    <button type="button" class="btn-action-secondary" style="padding: 4px 8px; font-size: 11px;" onclick="abrirModalResolucao({{ $e->id }}, '{{ $e->numero_documento_erp }}', '{{ addslashes($e->fornecedor_nome) }}')">
                                        ✔️ Baixa Manual
                                    </button>
                                @else
                                    <span style="font-size: 11px; color: var(--text-muted);">Tratado</span>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" style="text-align: center; padding: 50px; color: var(--text-muted);">
                            <div style="font-size: 1.8rem;">🎉</div>
                            <div style="margin-top: 8px; font-weight: 700; font-size: 1rem; color: var(--text-main);">Nenhum erro ou inconsistência encontrado!</div>
                            <div style="font-size: 0.85rem; margin-top: 4px;">Todas as operações transmitidas para a API Bradesco foram processadas com sucesso para os filtros informados.</div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

</div>

{{-- Modal de Resolução Manual --}}
<div id="modalResolucao" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(4px);">
    <div style="background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; width: 90%; max-width: 540px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);">
        <form id="formResolucaoManual" method="POST">
            @csrf
            <div style="padding: 18px 24px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between;">
                <div style="font-weight: 800; font-size: 1.05rem;">
                    ✔️ Marcar Inconsistência como Resolvida
                </div>
                <button type="button" onclick="fecharModalResolucao()" style="background: transparent; border: none; font-size: 1.4rem; color: var(--text-muted); cursor: pointer;">&times;</button>
            </div>
            <div style="padding: 20px 24px;">
                <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px;">
                    Documento: <strong id="modalDocText" style="color: var(--text-main);"></strong><br>
                    Fornecedor: <span id="modalFornText" style="color: var(--text-main);"></span>
                </p>
                <label style="display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; color: var(--text-main);">
                    Justificativa / Observações da Resolução:
                </label>
                <textarea name="observacoes" rows="3" required class="form-control-custom" style="width: 100%; box-sizing: border-box;" placeholder="Ex: Fornecedor foi pago via TED avulsa ou dados foram corrigidos manualmente no caixa..."></textarea>
            </div>
            <div style="padding: 14px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-base);">
                <button type="button" class="btn-action-secondary" onclick="fecharModalResolucao()">Cancelar</button>
                <button type="submit" class="btn-action-primary">Confirmar Resolução</button>
            </div>
        </form>
    </div>
</div>

<script>
    function setPeriodo(periodo) {
        document.getElementById('periodoInput').value = periodo;
        document.getElementById('filterErrosForm').submit();
    }

    function abrirModalResolucao(id, doc, forn) {
        document.getElementById('modalDocText').textContent = doc;
        document.getElementById('modalFornText').textContent = forn;
        document.getElementById('formResolucaoManual').action = `/modulos/financeiro/erros-pagamentos/${id}/resolver`;
        document.getElementById('modalResolucao').style.display = 'flex';
    }

    function fecharModalResolucao() {
        document.getElementById('modalResolucao').style.display = 'none';
    }
</script>
@endsection