@extends('layouts.app')

@section('title', 'Manifestacao - ERP-PLUS')
@section('page_title', 'Manifestacao')
@section('page_subtitle', 'Registre ciencia, confirmacao, desconhecimento ou operacao nao realizada para NF-e do destinatario.')

@push('styles')
<style>
    .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); align-items: flex-end; }
    .filter-field { display: grid; gap: 4px; }
    .filter-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
    .filter-field input, .filter-field select { min-height: 34px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: #fff; color: var(--text); font-family: inherit; }
    .filter-field input { min-width: 200px; }
    .filter-field select { min-width: 140px; }
    .filter-field input[type="date"] { min-width: 140px; }
    .filter-actions { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; }
    .key-cell { font-family: monospace; font-size: 12px; letter-spacing: .3px; white-space: nowrap; }
    .pagination-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); }
    .pagination-bar .pages { font-size: 13px; color: var(--muted); margin: 0 auto; }
    .batch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; background: #f0f7f7; border-bottom: 1px solid var(--border); }
    .batch-bar label { font-size: 13px; font-weight: 700; }
    .batch-bar select { min-height: 34px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: #fff; color: var(--text); font-family: inherit; min-width: 180px; }
    .batch-bar input[type="text"] { min-height: 34px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: #fff; color: var(--text); font-family: inherit; min-width: 200px; }
    .manifest-actions { display: flex; gap: 4px; flex-wrap: wrap; }
    .manifest-actions form { display: inline; }
    .btn-manifest { min-height: 28px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; background: #fff; color: var(--text); white-space: nowrap; }
    .btn-manifest:hover { background: var(--surface-2); }
    .btn-manifest.ciencia { border-color: #93c5fd; color: #1d4ed8; }
    .btn-manifest.confirmacao { border-color: #86efac; color: #15803d; }
    .btn-manifest.desconhecimento { border-color: #fde68a; color: #92400e; }
    .btn-manifest.nao-realizada { border-color: #fecaca; color: #b91c1c; }
    .manifest-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
    .manifest-badge.ok { background: #dcfce7; color: #15803d; }
    .manifest-badge.warn { background: #fef3c7; color: #92400e; }
    .manifest-badge.info { background: #dbeafe; color: #1d4ed8; }
    .manifest-badge.danger { background: #fee2e2; color: #b91c1c; }
    td.manifest-cell { min-width: 200px; }
    @media (max-width: 840px) {
        .filter-bar { gap: 8px; }
        .filter-field input { min-width: 140px; }
        .filter-actions { margin-left: 0; width: 100%; }
        .batch-bar { flex-direction: column; align-items: stretch; }
    }
</style>
@endpush

@section('content')
<div class="panel">
    <div class="panel-header">
        <div>
            <h2>Documentos</h2>
            <span>Selecione os documentos e o tipo de manifestacao desejado.</span>
        </div>
    </div>

    {{-- Filter bar --}}
    <form class="filter-bar" method="GET" action="{{ route('manifestation.index') }}">
        <div class="filter-field">
            <label>Empresa</label>
            <select name="company_id">
                <option value="">Todas</option>
                @foreach ($companies as $company)
                    <option value="{{ $company->id }}" @selected($companyFilter == $company->id)>{{ $company->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="filter-field">
            <label>Busca</label>
            <input type="search" name="q" value="{{ $search }}" placeholder="Chave, CNPJ ou fornecedor">
        </div>

        <div class="filter-field">
            <label>Emissao de</label>
            <input type="date" name="date_from" value="{{ $dateFrom }}">
        </div>

        <div class="filter-field">
            <label>ate</label>
            <input type="date" name="date_to" value="{{ $dateTo }}">
        </div>

        <div class="filter-field">
            <label>XML</label>
            <select name="xml">
                <option value="all"     @selected($xmlFilter === 'all')>Todos</option>
                <option value="full"    @selected($xmlFilter === 'full')>Completo</option>
                <option value="summary" @selected($xmlFilter === 'summary')>Resumo</option>
            </select>
        </div>

        <div class="filter-field">
            <label>Manifestacao</label>
            <select name="event">
                <option value="all"              @selected($eventFilter === 'all')>Todas</option>
                <option value="pending_ciencia"  @selected($eventFilter === 'pending_ciencia')>Pendentes ciencia</option>
                <option value="ciencia"          @selected($eventFilter === 'ciencia')>Com ciencia</option>
                <option value="ciencia_sem_xml"  @selected($eventFilter === 'ciencia_sem_xml')>Ciencia sem XML completo</option>
                <option value="confirmacao"      @selected($eventFilter === 'confirmacao')>Confirmacao</option>
                <option value="desconhecimento"  @selected($eventFilter === 'desconhecimento')>Desconhecimento</option>
                <option value="nao_realizada"    @selected($eventFilter === 'nao_realizada')>Nao realizada</option>
            </select>
        </div>

        <div class="filter-actions">
            <button class="button primary" type="submit">Filtrar</button>
            @if ($hasFilters)
                <a class="button" href="{{ route('manifestation.index') }}">Limpar</a>
            @endif
        </div>
    </form>

    {{-- Batch bar --}}
    @can('manifest-documents')
    <div class="batch-bar" style="border-bottom:0;padding-bottom:4px">
        <label><input type="checkbox" id="select-all" onchange="toggleAll(this)"> Selecionar todos</label>
        <span style="font-size:13px;color:var(--muted)">Selecione os documentos e escolha a acao:</span>
    </div>
    <div class="batch-bar" id="batch-controls">
        <select id="batch-action" style="min-height:34px;font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;background:#fff;min-width:220px">
            <option value="">Selecione a acao...</option>
            <option value="manifest-210210">Ciencia da Operacao</option>
            <option value="manifest-210200">Confirmacao da Operacao</option>
            <option value="manifest-210220">Desconhecimento da Operacao</option>
            <option value="manifest-210240">Operacao nao Realizada</option>
            <option value="buscar-xml">Buscar XML completo</option>
        </select>
        <input type="text" id="batch-justification" placeholder="Justificativa (obrigatorio para Nao Realizada)" style="min-height:34px;font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;background:#fff;min-width:200px">
        <button class="button primary" id="btn-processar" onclick="iniciarProcessamento()">Iniciar processamento</button>
        <button class="button danger" id="btn-cancelar" onclick="cancelarProcessamento()" style="display:none">Cancelar</button>
    </div>

    {{-- Processing panel --}}
    <div id="processing-panel" style="display:none">
        <div style="padding:14px 16px;background:#f0f7f7;border-bottom:1px solid var(--border)">
            <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
                <div style="font-size:22px;font-weight:700;color:var(--primary);min-width:52px;text-align:center" id="proc-countdown">—</div>
                <div style="flex:1;min-width:200px">
                    <div style="font-size:14px;font-weight:700" id="proc-status">Preparando...</div>
                    <div style="height:8px;background:#e5edf2;border-radius:4px;overflow:hidden;margin:8px 0">
                        <div style="height:8px;background:var(--primary);border-radius:4px;transition:width .3s;width:0%" id="proc-bar"></div>
                    </div>
                    <div style="font-size:12px;color:var(--muted)" id="proc-sub"></div>
                </div>
            </div>
        </div>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Chave</th>
                        <th>Fornecedor</th>
                        <th>Status</th>
                        <th>Detalhe</th>
                    </tr>
                </thead>
                <tbody id="proc-tbody"></tbody>
            </table>
        </div>
    </div>

        <div class="table-wrap" id="doc-table">
            <table>
                <thead>
                    <tr>
                        <th style="width:36px"></th>
                        <th>Chave de acesso</th>
                        <th>Empresa</th>
                        <th>Fornecedor</th>
                        <th>Valor</th>
                        <th>Emissao</th>
                        <th>XML</th>
                        <th class="manifest-cell">Manifestacoes</th>
                        <th>Acoes</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($documents as $document)
                        @php
                            $key = $document->access_key;
                            $keyShort = strlen($key) === 44
                                ? substr($key, 0, 10).'...'.substr($key, -10)
                                : $key;

                            $hasCiencia = $document->manifestations
                                ->where('event_code', \App\Models\NfeManifestation::EVENT_CIENCIA_OPERACAO)
                                ->whereIn('response_status_code', ['135', '136', '573'])
                                ->isNotEmpty();
                            $hasConfirmacao = $document->manifestations
                                ->where('event_code', \App\Models\NfeManifestation::EVENT_CONFIRMACAO_OPERACAO)
                                ->whereIn('response_status_code', ['135', '136', '573'])
                                ->isNotEmpty();
                            $hasDesconhecimento = $document->manifestations
                                ->where('event_code', \App\Models\NfeManifestation::EVENT_DESCONHECIMENTO_OPERACAO)
                                ->whereIn('response_status_code', ['135', '136', '573'])
                                ->isNotEmpty();
                            $hasNaoRealizada = $document->manifestations
                                ->where('event_code', \App\Models\NfeManifestation::EVENT_OPERACAO_NAO_REALIZADA)
                                ->whereIn('response_status_code', ['135', '136', '573'])
                                ->isNotEmpty();

                            $hasConclusiva = $hasConfirmacao || $hasDesconhecimento || $hasNaoRealizada;
                        @endphp
                        <tr>
                            <td>
                                <input type="checkbox" name="document_ids[]" value="{{ $document->id }}" class="doc-checkbox">
                            </td>
                            <td>
                                <span class="key-cell" title="{{ $key }}">{{ $keyShort }}</span>
                                <div class="row-text">NSU {{ $document->nsu ?? '-' }}</div>
                            </td>
                            <td style="font-size:12px">{{ $document->company->name ?? '-' }}</td>
                            <td>
                                <div>{{ Str::limit($document->issuer_name ?? '-', 28) }}</div>
                                @if ($document->issuer_cnpj)
                                    <div class="row-text">{{ $document->issuer_cnpj }}</div>
                                @endif
                            </td>
                            <td style="white-space:nowrap;font-size:12px">
                                {{ $document->total_amount ? 'R$ '.number_format((float) $document->total_amount, 2, ',', '.') : '-' }}
                            </td>
                            <td style="white-space:nowrap;font-size:12px">{{ $document->issued_at?->format('d/m/Y') ?? '-' }}</td>
                            <td>
                                @if ($document->xml_content)
                                    <span class="pill ok">Completo</span>
                                @elseif ($document->raw_summary_xml)
                                    <span class="pill warn">Resumo</span>
                                @else
                                    <span class="pill neutral">Sem XML</span>
                                @endif
                            </td>
                            <td class="manifest-cell">
                                <div style="display:flex;flex-wrap:wrap;gap:3px">
                                    @if ($hasCiencia)
                                        <span class="manifest-badge info">Ciencia</span>
                                    @endif
                                    @if ($hasConfirmacao)
                                        <span class="manifest-badge ok">Confirmacao</span>
                                    @endif
                                    @if ($hasDesconhecimento)
                                        <span class="manifest-badge warn">Desconhecimento</span>
                                    @endif
                                    @if ($hasNaoRealizada)
                                        <span class="manifest-badge danger">Nao realizada</span>
                                    @endif
                                    @if (! $hasCiencia && ! $hasConclusiva)
                                        <span class="manifest-badge" style="background:#e5edf2;color:#475569">Pendente</span>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div class="manifest-actions">
                                    @can('manifest-documents')
                                        @if (! $hasCiencia)
                                            <form method="POST" action="{{ route('manifestation.manifest', $document) }}">
                                                @csrf
                                                <input type="hidden" name="event_code" value="210210">
                                                <button class="btn-manifest ciencia" type="submit">Ciencia</button>
                                            </form>
                                        @endif

                                        @if ($hasCiencia && ! $hasConclusiva)
                                            <form method="POST" action="{{ route('manifestation.manifest', $document) }}">
                                                @csrf
                                                <input type="hidden" name="event_code" value="210200">
                                                <button class="btn-manifest confirmacao" type="submit">Confirmar</button>
                                            </form>

                                            <form method="POST" action="{{ route('manifestation.manifest', $document) }}">
                                                @csrf
                                                <input type="hidden" name="event_code" value="210220">
                                                <button class="btn-manifest desconhecimento" type="submit">Desconhecer</button>
                                            </form>

                                            <form method="POST" action="{{ route('manifestation.manifest', $document) }}">
                                                @csrf
                                                <input type="hidden" name="event_code" value="210240">
                                                <input type="text" name="justification" placeholder="Justificativa" style="width:100px;min-height:26px;font-size:11px;border:1px solid var(--border);border-radius:4px;padding:2px 6px" required>
                                                <button class="btn-manifest nao-realizada" type="submit">Nao realizada</button>
                                            </form>
                                        @endif
                                    @else
                                        <span class="pill neutral">Sem permissao</span>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9">
                                <div class="empty">
                                    @if ($hasFilters)
                                        Nenhum documento encontrado com os filtros aplicados.
                                        <a href="{{ route('manifestation.index') }}">Limpar filtros</a>
                                    @else
                                        Nenhum documento sincronizado ainda.
                                        <a href="{{ route('sync.index') }}">Sincronizar documentos</a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @endcan

    @if ($documents->hasPages())
        <div class="pagination-bar">
            @if ($documents->onFirstPage())
                <span class="button" style="opacity:.4;cursor:default;min-height:32px;font-size:13px;padding:6px 12px">Anterior</span>
            @else
                <a class="button" style="min-height:32px;font-size:13px;padding:6px 12px" href="{{ $documents->previousPageUrl() }}">Anterior</a>
            @endif

            <span class="pages">
                Pagina {{ $documents->currentPage() }} de {{ $documents->lastPage() }}
                &mdash; {{ $documents->total() }} registro(s)
            </span>

            @if ($documents->hasMorePages())
                <a class="button" style="min-height:32px;font-size:13px;padding:6px 12px" href="{{ $documents->nextPageUrl() }}">Proxima</a>
            @else
                <span class="button" style="opacity:.4;cursor:default;min-height:32px;font-size:13px;padding:6px 12px">Proxima</span>
            @endif
        </div>
    @endif
</div>
@endsection

@push('styles')
<style>
    table { min-width: 960px; }
</style>
@endpush

<script>
const CSRF = '{{ csrf_token() }}';

function toggleAll(source) {
    document.querySelectorAll('.doc-checkbox').forEach(cb => cb.checked = source.checked);
}

// ─── Processamento em lote ─────────────────────────────────────────────────

let procState = null;

function iniciarProcessamento() {
    const checked = document.querySelectorAll('.doc-checkbox:checked');
    if (checked.length === 0) { alert('Selecione pelo menos um documento.'); return; }

    const acao = document.getElementById('batch-action').value;
    if (!acao) { alert('Selecione a acao desejada.'); return; }

    const isManifest = acao.startsWith('manifest-');
    const eventCode = isManifest ? acao.replace('manifest-', '') : null;

    if (isManifest && eventCode === '210240') {
        const just = document.getElementById('batch-justification').value.trim();
        if (!just) { alert('Justificativa obrigatoria para Operacao nao Realizada.'); return; }
    }

    const ids = Array.from(checked).map(cb => cb.value);
    const total = ids.length;

    procState = { ids, index: 0, cancelled: false, paused: false, secondsLeft: 0, timer: null, acao, eventCode };

    // Monta tabela de progresso
    const tbody = document.getElementById('proc-tbody');
    tbody.innerHTML = ids.map((id, i) => {
        const key = document.querySelector(`.doc-checkbox[value="${id}"]`).closest('tr').querySelector('.key-cell')?.textContent || id;
        return `<tr id="proc-${i}">
            <td>${i + 1}</td>
            <td class="key-cell">${key}</td>
            <td id="proc-f-${i}">—</td>
            <td id="proc-st-${i}"><span class="badge muted">Aguardando</span></td>
            <td id="proc-det-${i}" style="font-size:11px;color:var(--muted)">—</td>
        </tr>`;
    }).join('');

    document.getElementById('processing-panel').style.display = '';
    document.getElementById('btn-processar').style.display = 'none';
    document.getElementById('btn-cancelar').style.display = '';
    document.getElementById('batch-action').disabled = true;
    document.getElementById('batch-justification').disabled = true;
    document.querySelectorAll('.doc-checkbox').forEach(cb => cb.disabled = true);
    document.getElementById('select-all').disabled = true;

    processarProximo();
}

function processarProximo() {
    if (!procState || procState.cancelled) { finalizarProcessamento('Cancelado'); return; }
    if (procState.index >= procState.ids.length) { finalizarProcessamento('Concluido!'); return; }

    const i = procState.index;
    const id = procState.ids[i];
    const total = procState.ids.length;

    document.getElementById(`proc-st-${i}`).innerHTML = `<span class="badge warn"><span class="spin">⟳</span> Processando</span>`;
    document.getElementById(`proc-${i}`).className = 'processing-row';

    atualizarProgresso(i, total);

    const url = procState.acao === 'buscar-xml'
        ? `/manifestacao/documents/${id}/buscar-xml-json`
        : `/manifestacao/documents/${id}/manifest-json`;

    const body = procState.acao === 'buscar-xml'
        ? JSON.stringify({})
        : JSON.stringify({ event_code: procState.eventCode, justification: document.getElementById('batch-justification').value });

    fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
        body,
    })
    .then(r => r.json().then(d => ({ ok: r.ok, ...d })))
    .then(data => {
        document.getElementById(`proc-st-${i}`).innerHTML = data.success
            ? '<span class="badge ok">OK</span>'
            : '<span class="badge danger">Erro</span>';
        document.getElementById(`proc-det-${i}`).textContent = data.message || '';
        document.getElementById(`proc-${i}`).className = '';
    })
    .catch(err => {
        document.getElementById(`proc-st-${i}`).innerHTML = '<span class="badge danger">Erro</span>';
        document.getElementById(`proc-det-${i}`).textContent = err.message;
        document.getElementById(`proc-${i}`).className = '';
    })
    .finally(() => {
        procState.index++;
        if (procState.index >= procState.ids.length || procState.cancelled) {
            finalizarProcessamento(procState.cancelled ? 'Cancelado' : 'Concluido!');
            return;
        }
        procState.secondsLeft = 10;
        iniciarContagem();
    });
}

function iniciarContagem() {
    clearInterval(procState.timer);
    atualizarCountdown(procState.secondsLeft);
    procState.timer = setInterval(() => {
        procState.secondsLeft--;
        atualizarCountdown(procState.secondsLeft);
        if (procState.secondsLeft <= 0) {
            clearInterval(procState.timer);
            processarProximo();
        }
    }, 1000);
}

function atualizarCountdown(s) {
    document.getElementById('proc-countdown').textContent = s > 0 ? `${s}s` : '—';
    const next = procState.index < procState.ids.length ? procState.ids[procState.index] : null;
    const nextEl = next ? document.querySelector(`.doc-checkbox[value="${next}"]`)?.closest('tr')?.querySelector('.key-cell')?.textContent : null;
    document.getElementById('proc-sub').textContent = next ? `Proximo: ${nextEl || next}` : '';
}

function atualizarProgresso(i, total) {
    const pct = Math.round((i / total) * 100);
    document.getElementById('proc-bar').style.width = pct + '%';
    document.getElementById('proc-status').textContent = `Processando ${i + 1} de ${total}`;
    document.getElementById('proc-countdown').textContent = '…';
    const current = document.querySelector(`.doc-checkbox[value="${procState.ids[i]}"]`)?.closest('tr')?.querySelector('.key-cell')?.textContent;
    document.getElementById('proc-sub').textContent = `Atual: ${current || procState.ids[i]}`;

    // Preenche fornecedor
    const fone = document.querySelector(`.doc-checkbox[value="${procState.ids[i]}"]`)?.closest('tr')?.querySelector('td:nth-child(4)')?.textContent?.trim();
    if (fone) document.getElementById(`proc-f-${i}`).textContent = fone;
}

function cancelarProcessamento() {
    if (!procState || !confirm('Cancelar o processamento?')) return;
    procState.cancelled = true;
    clearInterval(procState.timer);
    for (let j = procState.index; j < procState.ids.length; j++) {
        document.getElementById(`proc-st-${j}`).innerHTML = '<span class="badge muted">Cancelado</span>';
    }
    finalizarProcessamento('Cancelado pelo usuario.');
}

function finalizarProcessamento(msg) {
    clearInterval(procState?.timer);
    document.getElementById('proc-bar').style.width = '100%';
    document.getElementById('proc-status').textContent = msg;
    document.getElementById('proc-countdown').textContent = '✓';
    document.getElementById('proc-sub').textContent = '';
    document.getElementById('btn-cancelar').style.display = 'none';
    document.getElementById('btn-processar').style.display = '';
    document.getElementById('batch-action').disabled = false;
    document.getElementById('batch-justification').disabled = false;
    document.querySelectorAll('.doc-checkbox').forEach(cb => cb.disabled = false);
    document.getElementById('select-all').disabled = false;
    procState = null;
}
</script>