@php
    $regra = $deparaRegraEdicao ?? null;
    $isEdit = (bool) $regra;
    $v = fn ($key, $default = '') => old($key, $isEdit ? ($regra->{$key} ?? $default) : $default);
    $simRef = $sim;
@endphp

<div class="app-page-header mb-4">
    <div>
        <h2 class="h5 mb-1">De-para desta simulação</h2>
        <p class="app-page-subtitle mb-0">
            Regras de mapeamento <strong>CFOP / CST / NCM → grupos internos</strong> aplicadas apenas a esta análise
            (#{{ $reformaSim->idreforma }}).
            @if($reformaSim->versao_depara)
                <span class="badge bg-light text-dark ms-1">versão de-para v{{ $reformaSim->versao_depara }}</span>
            @endif
        </p>
    </div>
    <a href="{{ route('admin.depara.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-book me-1"></i> Biblioteca de templates
    </a>
</div>

@if($deparaResumoGrupos->isNotEmpty())
<div class="app-card p-3 mb-4">
    <h6 class="text-xs fw-semibold text-muted mb-2">Impacto atual nos produtos da simulação</h6>
    <div class="d-flex flex-wrap gap-2">
        @foreach($deparaResumoGrupos as $grupo => $info)
            <span class="badge bg-light text-dark border">
                {{ $grupo }} · {{ $info['qtd'] }} prod. · R$ {{ number_format($info['valor'], 2, ',', '.') }}
            </span>
        @endforeach
    </div>
</div>
@endif

<div class="row g-4">
    <div class="col-lg-7">
        @if($deparaRegras->isNotEmpty())
        <div class="app-card p-3 mb-4">
            <h6 class="text-sm fw-semibold mb-3">Regras ativas ({{ $deparaRegras->count() }})</h6>
            <div class="table-responsive">
                <table class="table table-sm text-xs mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th>Condição</th><th>Destino</th><th>Prio.</th><th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($deparaRegras as $r)
                            <tr>
                                <td>
                                    <span class="text-muted">{{ $r->origem_sped === 'EFD_CONTRIB' ? 'Contrib.' : 'ICMS/IPI' }}</span>
                                    @if($r->cfop)<span class="badge bg-light text-dark ms-1">CFOP {{ $r->cfop }}</span>@endif
                                    @if($r->cst)<span class="badge bg-light text-dark ms-1">CST {{ $r->cst }}</span>@endif
                                    @if($r->ncm)<span class="badge bg-light text-dark ms-1">NCM {{ $r->ncm }}</span>@endif
                                </td>
                                <td>{{ ucfirst($r->destino_categoria) }} → <strong>{{ $r->destino_tipo }}</strong></td>
                                <td>{{ $r->prioridade }}</td>
                                <td class="text-end text-nowrap">
                                    <a href="{{ route('admin.simulacoes.edit', ['idsimulacao' => $sim->idsimulacao, 'tab' => 'depara', 'edit_depara' => $r->idmapa]) }}"
                                       class="btn btn-link btn-sm p-0">Editar</a>
                                    <form method="POST" action="{{ route('admin.simulacoes.depara.destroy', [$sim->idsimulacao, $r->idmapa]) }}"
                                          class="d-inline" onsubmit="return confirm('Remover esta regra?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-link btn-sm p-0 text-danger">Excluir</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        <form method="POST"
              action="{{ $isEdit
                  ? route('admin.simulacoes.depara.update', [$sim->idsimulacao, $regra->idmapa])
                  : route('admin.simulacoes.depara.store', $sim->idsimulacao) }}"
              id="depara-form"
              class="app-card p-4"
              data-tour="depara-regras">
            @csrf
            @if($isEdit) @method('PUT') @endif

            <h6 class="mb-3">{{ $isEdit ? 'Editar regra' : 'Nova regra para esta simulação' }}</h6>

            <div class="mb-3">
                <label class="form-label text-xs fw-semibold">Arquivo SPED</label>
                <select name="origem_sped" id="origem_sped" class="form-select form-select-sm" required data-depara-field>
                    <option value="EFD_ICMSIPI" @selected($v('origem_sped', 'EFD_ICMSIPI') === 'EFD_ICMSIPI')>EFD ICMS/IPI</option>
                    <option value="EFD_CONTRIB" @selected($v('origem_sped') === 'EFD_CONTRIB')>EFD Contribuições</option>
                </select>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label class="form-label text-xs fw-semibold" for="cfop">CFOP</label>
                    <input type="text" name="cfop" id="cfop" class="form-control form-control-sm" placeholder="5101"
                           value="{{ $v('cfop') }}" data-depara-field inputmode="numeric">
                    <div class="d-flex flex-wrap gap-1 mt-1">
                        @foreach(['5101','6101','5102'] as $code)
                            <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-1 text-xxs depara-chip" data-target="cfop" data-value="{{ $code }}">{{ $code }}</button>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label text-xs fw-semibold" for="cst">CST</label>
                    <input type="text" name="cst" id="cst" class="form-control form-control-sm" placeholder="00"
                           value="{{ $v('cst') }}" data-depara-field inputmode="numeric">
                </div>
                <div class="col-md-4">
                    <label class="form-label text-xs fw-semibold" for="ncm">NCM</label>
                    <input type="text" name="ncm" id="ncm" class="form-control form-control-sm" placeholder="12011000"
                           value="{{ $v('ncm') }}" data-depara-field inputmode="numeric">
                </div>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-md-5">
                    <label class="form-label text-xs fw-semibold">Categoria</label>
                    <select name="destino_categoria" id="destino_categoria" class="form-select form-select-sm" required data-depara-field>
                        <option value="produtos" @selected($v('destino_categoria', 'produtos') === 'produtos')>Produtos</option>
                        <option value="servicos" @selected($v('destino_categoria') === 'servicos')>Serviços</option>
                        <option value="outras" @selected($v('destino_categoria') === 'outras')>Outras</option>
                    </select>
                </div>
                <div class="col-md-7">
                    <label class="form-label text-xs fw-semibold">Grupo interno</label>
                    <input type="text" name="destino_tipo" id="destino_tipo" class="form-control form-control-sm" required
                           list="depara-tipos-sugeridos" placeholder="sementes, defensivos…"
                           value="{{ $v('destino_tipo') }}" data-depara-field>
                    <datalist id="depara-tipos-sugeridos">
                        <option value="sementes"><option value="defensivos"><option value="fertilizantes">
                        <option value="frete"><option value="servicos"><option value="outros">
                    </datalist>
                </div>
            </div>

            <div class="row g-3 mb-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label text-xs fw-semibold">Prioridade</label>
                    <input type="number" name="prioridade" class="form-control form-control-sm" min="1" max="99"
                           value="{{ $v('prioridade', 1) }}" data-depara-field>
                </div>
                <div class="col-md-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="ativo" value="1" id="ativo"
                               @checked(old('ativo', $isEdit ? $regra->ativo : true)) data-depara-field>
                        <label class="form-check-label text-sm" for="ativo">Ativa</label>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="recalcular" value="1" id="recalcular" checked>
                        <label class="form-check-label text-sm" for="recalcular">Recalcular CBS/IBS ao salvar</label>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label text-xs fw-semibold">Justificativa (auditoria)</label>
                <textarea name="justificativa" class="form-control form-control-sm" rows="2"
                          placeholder="Motivo desta regra nesta simulação…">{{ old('justificativa') }}</textarea>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-app-primary btn-sm">Salvar regra</button>
                @if($isEdit)
                    <a href="{{ route('admin.simulacoes.edit', ['idsimulacao' => $sim->idsimulacao, 'tab' => 'depara']) }}"
                       class="btn btn-outline-secondary btn-sm">Cancelar edição</a>
                @endif
            </div>
        </form>

        @if($deparaTemplates->isNotEmpty())
        <div class="app-card p-3 mt-4" data-tour="depara-biblioteca">
            <h6 class="text-sm fw-semibold mb-2">Copiar da biblioteca</h6>
            <p class="text-xxs text-muted mb-2">Templates globais — ao copiar, viram regra exclusiva desta simulação.</p>
            <div class="d-flex flex-wrap gap-2">
                @foreach($deparaTemplates->take(8) as $tpl)
                    <form method="POST" action="{{ route('admin.simulacoes.depara.copiar-biblioteca', $sim->idsimulacao) }}">
                        @csrf
                        <input type="hidden" name="idmapa" value="{{ $tpl->idmapa }}">
                        <button type="submit" class="btn btn-xs btn-outline-primary" title="{{ $tpl->cfop }} {{ $tpl->ncm }} → {{ $tpl->destino_tipo }}">
                            {{ $tpl->destino_tipo }}
                            @if($tpl->cfop)<small class="text-muted">· {{ $tpl->cfop }}</small>@endif
                        </button>
                    </form>
                @endforeach
            </div>
        </div>
        @endif
    </div>

    <div class="col-lg-5">
        <div class="app-card p-4 position-sticky" style="top:1rem" id="depara-preview-panel" data-tour="depara-preview">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <h6 class="mb-1"><i class="fas fa-eye text-primary me-1"></i> Pré-visualização</h6>
                    <p class="text-xxs text-muted mb-0">SPEDs vinculados a esta simulação</p>
                </div>
                <span class="badge bg-light text-dark" id="depara-preview-status">Aguardando critérios</span>
            </div>

            <div class="alert alert-light border text-sm mb-3" id="depara-regra-resumo">
                Informe CFOP, CST ou NCM para ver o impacto nesta simulação.
            </div>

            <div id="depara-preview-aviso" class="alert alert-warning text-sm py-2 d-none"></div>
            <div id="depara-preview-conflitos" class="alert alert-info text-sm py-2 d-none"></div>

            <div class="row g-2 mb-3" id="depara-preview-kpis" style="display:none">
                <div class="col-6">
                    <div class="border rounded p-2 text-center">
                        <div class="text-xxs text-muted">Itens SPED</div>
                        <div class="fw-bold" id="kpi-itens">0</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="border rounded p-2 text-center">
                        <div class="text-xxs text-muted">Produtos únicos</div>
                        <div class="fw-bold" id="kpi-produtos">0</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="border rounded p-2 text-center bg-light">
                        <div class="text-xxs text-muted">Valor afetado</div>
                        <div class="fw-bold text-primary" id="kpi-valor">R$ 0,00</div>
                    </div>
                </div>
            </div>

            <div id="depara-preview-amostra-wrap" style="display:none">
                <h6 class="text-xs fw-semibold text-muted mb-2">Amostra de produtos</h6>
                <div class="table-responsive" style="max-height:200px">
                    <table class="table table-sm text-xs mb-0">
                        <thead class="bg-light sticky-top">
                            <tr><th>Cód.</th><th>Descrição</th><th class="text-end">Valor</th></tr>
                        </thead>
                        <tbody id="depara-preview-amostra"></tbody>
                    </table>
                </div>
            </div>

            <p class="text-xxs text-muted mt-3 mb-0" id="depara-preview-meta"></p>
        </div>
    </div>
</div>

@push('js')
<script>
(function () {
    const form = document.getElementById('depara-form');
    if (!form) return;

    const previewUrl = @json(route('admin.simulacoes.depara.preview', $sim->idsimulacao));
    const idmapa = @json($isEdit ? $regra->idmapa : null);
    let debounceTimer = null;

    const els = {
        status: document.getElementById('depara-preview-status'),
        resumo: document.getElementById('depara-regra-resumo'),
        aviso: document.getElementById('depara-preview-aviso'),
        conflitos: document.getElementById('depara-preview-conflitos'),
        kpis: document.getElementById('depara-preview-kpis'),
        amostraWrap: document.getElementById('depara-preview-amostra-wrap'),
        amostra: document.getElementById('depara-preview-amostra'),
        meta: document.getElementById('depara-preview-meta'),
        kpiItens: document.getElementById('kpi-itens'),
        kpiProdutos: document.getElementById('kpi-produtos'),
        kpiValor: document.getElementById('kpi-valor'),
    };

    const fmtBrl = (v) => 'R$ ' + Number(v).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

    function payload() {
        const fd = new FormData(form);
        return {
            origem_sped: fd.get('origem_sped'),
            cfop: fd.get('cfop') || '',
            cst: fd.get('cst') || '',
            ncm: fd.get('ncm') || '',
            destino_categoria: fd.get('destino_categoria'),
            destino_tipo: fd.get('destino_tipo') || '',
            prioridade: fd.get('prioridade'),
            idmapa: idmapa,
            _token: fd.get('_token'),
        };
    }

    function renderPreview(data) {
        els.resumo.textContent = data.regra_resumo || '—';
        els.aviso.classList.toggle('d-none', !data.aviso);
        if (data.aviso) els.aviso.textContent = data.aviso;

        if (data.conflitos && data.conflitos.length) {
            els.conflitos.classList.remove('d-none');
            els.conflitos.innerHTML = '<strong>Possíveis conflitos:</strong><ul class="mb-0 ps-3 mt-1">'
                + data.conflitos.map(c => `<li class="text-xxs">${c.resumo} <span class="text-muted">(${c.escopo}, prio. ${c.prioridade})</span></li>`).join('')
                + '</ul>';
        } else {
            els.conflitos.classList.add('d-none');
        }

        const hasData = data.ok && data.total_itens > 0;
        els.kpis.style.display = hasData ? '' : 'none';
        els.amostraWrap.style.display = hasData ? '' : 'none';
        els.status.textContent = hasData ? `${data.total_itens} itens` : (data.aviso ? 'Sem dados' : 'Sem critérios');
        els.status.className = 'badge ' + (hasData ? 'bg-success' : 'bg-light text-dark');

        if (hasData) {
            els.kpiItens.textContent = data.total_itens.toLocaleString('pt-BR');
            els.kpiProdutos.textContent = data.produtos_unicos.toLocaleString('pt-BR');
            els.kpiValor.textContent = fmtBrl(data.total_valor);
            els.amostra.innerHTML = (data.amostra || []).map(p => `
                <tr>
                    <td class="fw-semibold">${p.cod}</td>
                    <td>${(p.descr || '—').substring(0, 24)}</td>
                    <td class="text-end">${fmtBrl(p.valor)}</td>
                </tr>
            `).join('');
            els.meta.textContent = `${data.imports_analisados} SPED(s) desta simulação analisado(s).`;
        } else {
            els.meta.textContent = data.imports_analisados
                ? `${data.imports_analisados} SPED(s) da simulação — sem itens para estes critérios.`
                : '';
        }
    }

    async function fetchPreview() {
        els.status.textContent = 'Calculando…';
        try {
            const res = await fetch(previewUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || payload()._token,
                    'Accept': 'application/json',
                },
                body: JSON.stringify(payload()),
            });
            if (!res.ok) throw new Error('Falha');
            renderPreview(await res.json());
        } catch (e) {
            els.status.textContent = 'Erro';
        }
    }

    function schedulePreview() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(fetchPreview, 450);
    }

    form.querySelectorAll('[data-depara-field]').forEach(el => {
        el.addEventListener('input', schedulePreview);
        el.addEventListener('change', schedulePreview);
    });

    document.querySelectorAll('.depara-chip').forEach(btn => {
        btn.addEventListener('click', () => {
            const target = document.getElementById(btn.dataset.target);
            if (target) {
                target.value = btn.dataset.value;
                target.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
    });

    schedulePreview();
})();
</script>
@endpush