@php
    $isEdit = isset($regra);
    $v = fn ($key, $default = '') => old($key, $isEdit ? ($regra->{$key} ?? $default) : $default);
@endphp

<div class="row g-4">
    {{-- Formulário --}}
    <div class="col-lg-7">
        <form method="POST"
              action="{{ $isEdit ? route('admin.depara.update', $regra->idmapa) : route('admin.depara.store') }}"
              id="depara-form"
              class="app-card p-4">
            @csrf
            @if($isEdit) @method('PUT') @endif

            {{-- Seção 1: Condição --}}
            <div class="mb-4">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <span class="badge bg-dark rounded-pill">1</span>
                    <h6 class="mb-0">Quando o SPED tiver…</h6>
                </div>
                <p class="text-sm text-muted mb-3">
                    Campos em branco funcionam como coringa (qualquer valor). Quanto mais específico, menor o alcance da regra.
                </p>

                <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 — notas fiscais, mercadorias (bloco C)
                        </option>
                        <option value="EFD_CONTRIB" @selected($v('origem_sped') === 'EFD_CONTRIB')>
                            EFD Contribuições — PIS/COFINS (blocos A, D, F)
                        </option>
                    </select>
                </div>

                <div class="row g-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="ex.: 5101" maxlength="10"
                               value="{{ $v('cfop') }}" data-depara-field inputmode="numeric">
                        <div class="d-flex flex-wrap gap-1 mt-1">
                            @foreach(['5101' => 'Venda interna', '6101' => 'Venda interest.', '5102' => 'Venda consumidor', '5922' => 'Bonificação'] as $code => $hint)
                                <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-1 text-xxs depara-chip" data-target="cfop" data-value="{{ $code }}" title="{{ $hint }}">{{ $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="ex.: 00" maxlength="5"
                               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="ex.: 12011000" maxlength="10"
                               value="{{ $v('ncm') }}" data-depara-field inputmode="numeric">
                        <div class="d-flex flex-wrap gap-1 mt-1">
                            @foreach(['12011000' => 'Soja semente', '12019000' => 'Soja outras', '10011100' => 'Trigo'] as $code => $hint)
                                <button type="button" class="btn btn-xs btn-outline-secondary py-0 px-1 text-xxs depara-chip" data-target="ncm" data-value="{{ $code }}" title="{{ $hint }}">{{ $code }}</button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            {{-- Seção 2: Destino --}}
            <div class="mb-4 pt-3 border-top">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <span class="badge bg-dark rounded-pill">2</span>
                    <h6 class="mb-0">Classificar como…</h6>
                </div>

                <div class="row g-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 (tipo)</label>
                        <input type="text" name="destino_tipo" id="destino_tipo" class="form-control form-control-sm" required
                               list="depara-tipos-sugeridos"
                               placeholder="ex.: sementes, defensivos, frete…"
                               value="{{ $v('destino_tipo') }}" data-depara-field>
                        <datalist id="depara-tipos-sugeridos">
                            <option value="sementes"><option value="soja"><option value="milho">
                            <option value="defensivos"><option value="fertilizantes"><option value="pecas">
                            <option value="frete"><option value="servicos"><option value="outros">
                        </datalist>
                    </div>
                </div>
            </div>

            {{-- Seção 3: Governança --}}
            <div class="mb-4 pt-3 border-top">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <span class="badge bg-dark rounded-pill">3</span>
                    <h6 class="mb-0">Prioridade e auditoria</h6>
                </div>

                <div class="row g-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>
                        <span class="text-xxs text-muted">1 = maior prioridade</span>
                    </div>
                    <div class="col-md-3">
                        <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">Regra ativa</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="form-label text-xs fw-semibold">Justificativa (auditoria)</label>
                        <textarea name="justificativa" class="form-control form-control-sm" rows="2"
                                  placeholder="Por que esta regra existe? Ex.: agrupar sementes de soja para relatório executivo.">{{ old('justificativa') }}</textarea>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2 pt-2">
                <button type="submit" class="btn btn-app-primary">Salvar regra</button>
                <a href="{{ route('admin.depara.index') }}" class="btn btn-outline-secondary">Voltar</a>
            </div>
        </form>
    </div>

    {{-- Pré-visualização --}}
    <div class="col-lg-5">
        <div class="app-card p-4 position-sticky" style="top:1rem" id="depara-preview-panel">
            <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 do impacto</h6>
                    <p class="text-xxs text-muted mb-0">Baseado nos SPEDs já importados no sistema</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">
                Preencha CFOP, CST ou NCM para ver quantos itens seriam afetados.
            </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 total 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 afetados</h6>
                <div class="table-responsive" style="max-height:220px">
                    <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>CFOP</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>

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

    const previewUrl = @json(route('admin.depara.preview'));
    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>Regras que podem conflitar:</strong><ul class="mb-0 ps-3 mt-1">'
                + data.conflitos.map(c => `<li class="text-xxs">${c.resumo} <span class="text-muted">(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, 28)}</td>
                    <td><span class="badge bg-light text-dark">${p.cfop}</span></td>
                    <td class="text-end">${fmtBrl(p.valor)}</td>
                </tr>
            `).join('');
            els.meta.textContent = `Analisados ${data.imports_analisados} arquivo(s) SPED importado(s).`;
        } else {
            els.meta.textContent = data.imports_analisados
                ? `Analisados ${data.imports_analisados} SPED(s), 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 na pré-visualização');
            renderPreview(await res.json());
        } catch (e) {
            els.status.textContent = 'Erro';
            els.aviso.classList.remove('d-none');
            els.aviso.textContent = 'Não foi possível calcular a pré-visualização.';
        }
    }

    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
@endonce