var FiltroDash = SuperWidget.extend({

    dadosBase: [],
    lojasDisponiveis: [],
    selecionados: {
        ciclo: {},
        regional: {}
    },

    init: function () {
        var self = this;

        this.carregarBase(function () {
            self.renderFiltros();
            self.aplicar();
        });

        $("#filtrar_" + this.instanceId).on("click", function () {
            self.aplicar();
        });

        $("#limpar_" + this.instanceId).on("click", function () {
            self.limpar();
        });
    },

    carregarBase: function (done) {
        var self = this;

        $.ajax({
            url: "/api/public/ecm/dataset/search",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                datasetId: "ds_dashboard_checklist"
            }),
            success: function (response) {
                self.dadosBase = (response.content || []).filter(function (item) {
                    var st = normalizaTexto(item.saidaAnalise || item.status || "");
                    return st === "CONFORME" || st === "NAO_CONFORME";
                });
                done();
            },
            error: function () {
                self.dadosBase = [];
                done();
            }
        });
    },

    renderFiltros: function () {
        var ciclos = this.valoresUnicos(function (x) { return x.ciclo; });
        var regionais = this.valoresUnicos(function (x) { return x.regional; });
        var lojas = this.valoresUnicos(function (x) { return x.loja; });

        this.renderChips("ciclo", ciclos, "#chips_ciclo_" + this.instanceId);
        this.renderChips("regional", regionais, "#chips_regional_" + this.instanceId);
        this.renderAutocomplete(lojas);
    },

    valoresUnicos: function (getter) {
        var mapa = {};
        this.dadosBase.forEach(function (item) {
            var v = String(getter(item) || "").trim();
            if (!v) {
                return;
            }
            mapa[v] = true;
        });
        return Object.keys(mapa).sort(function (a, b) {
            return a.localeCompare(b);
        });
    },

    renderChips: function (tipo, valores, alvoSelector) {
        var self = this;
        var alvo = $(alvoSelector);
        alvo.empty();

        if (!valores.length) {
            alvo.append('<span class="text-muted">Sem dados</span>');
            return;
        }

        valores.forEach(function (valor) {
            var chip = $("<button>")
                .attr("type", "button")
                .addClass("fdash-chip")
                .addClass("is-off")
                .attr("data-tipo", tipo)
                .attr("data-valor", valor)
                .text(valor);

            chip.on("click", function () {
                var bucket = self.selecionados[tipo];
                if (bucket[valor]) {
                    delete bucket[valor];
                    chip.addClass("is-off");
                } else {
                    bucket[valor] = true;
                    chip.removeClass("is-off");
                }
                self.aplicar();
            });

            alvo.append(chip);
        });
    },

    renderAutocomplete: function (valores) {
        var self = this;
        var inputId = "#loja_" + this.instanceId;
        var sugestoesId = "#lojaSugestoes_" + this.instanceId;

        this.lojasDisponiveis = valores.slice();
        $(sugestoesId).empty().hide();

        $(inputId).off(".fdashLoja");
        $(document).off(".fdashLojaDoc" + this.instanceId);

        $(inputId).on("input.fdashLoja focus.fdashLoja", function () {
            self.mostrarSugestoes($(this).val());
            self.aplicar();
        });

        $(inputId).on("change.fdashLoja blur.fdashLoja", function () {
            self.aplicar();
            setTimeout(function () {
                $(sugestoesId).hide();
            }, 150);
        });

        $(document).on("click.fdashLojaDoc" + this.instanceId, function (e) {
            if (!$(e.target).closest(".fdash-autocomplete-wrap").length) {
                $(sugestoesId).hide();
            }
        });
    },

    mostrarSugestoes: function (texto) {
        var self = this;
        var sugestoes = this.filtrarLojas(texto);
        var box = $("#lojaSugestoes_" + this.instanceId);
        box.empty();

        if (!texto || !sugestoes.length) {
            box.hide();
            return;
        }

        sugestoes.slice(0, 12).forEach(function (valor) {
            var item = $("<button>")
                .attr("type", "button")
                .addClass("fdash-sugestao-item")
                .text(valor);

            item.on("click", function () {
                $("#loja_" + self.instanceId).val(valor);
                box.hide();
                self.aplicar();
            });

            box.append(item);
        });

        box.show();
    },

    filtrarLojas: function (texto) {
        var query = normalizaTexto(texto);
        if (!query) return [];

        return this.lojasDisponiveis.filter(function (valor) {
            return normalizaTexto(valor).indexOf(query) > -1;
        });
    },

    limpar: function () {
        this.selecionados = {
            ciclo: {},
            regional: {}
        };

        $("#dtInicio_" + this.instanceId).val("");
        $("#dtFim_" + this.instanceId).val("");
        $("#loja_" + this.instanceId).val("");
        $("#filtroDash_" + this.instanceId + " .fdash-chip").addClass("is-off");
        this.aplicar();
    },

    aplicar: function () {
        var filtros = {
            dataInicio: $("#dtInicio_" + this.instanceId).val(),
            dataFim: $("#dtFim_" + this.instanceId).val(),
            ciclo: Object.keys(this.selecionados.ciclo),
            regional: Object.keys(this.selecionados.regional),
            loja: $("#loja_" + this.instanceId).val()
        };

        try {
            console.log("[filtrosDash] filtros aplicados:", filtros);
        } catch (e) {}

        window.dispatchEvent(new CustomEvent("dashboardFiltro", { detail: filtros }));
    }

});

function normalizaTexto(valor) {
    return String(valor || "").trim().toUpperCase();
}
