import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalComponente from "@/components/Modal/ModalComponente";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { Table, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { listarDistribuidoresCredenciais } from "@/requests/CRUD/Distribuidores/listarDistribuidoresCredenciais";
import {
  alterarStatusDistribuidorNativo,
  salvarDistribuidorCredencial,
} from "@/requests/CRUD/Distribuidores/salvarDistribuidorCredencial";
import {
  buscarJsonCsv,
  gravaJsonCsv,
  removerJsonCsvWeg,
  salvarTabelaBelenus,
  sincronizacaoBoldDistribuidor,
  sincronizacaoDistribuidor,
} from "@/requests/CRUD/Distribuidores/sincronizacaoDistribuidor";
import { importarArquivoItensRafid } from "@/requests/CRUD/IntegracaoRafid/importarArquivoItensRafid";
import { obterDataAtualizacaoArquivo } from "@/requests/CRUD/IntegracaoRafid/obterDataAtualizacaoArquivo";
import { useAuth } from "@/src/contexts/authContext";
import { useLoja } from "@/src/contexts/lojaContext";
// import { useSync } from "@/src/contexts/SyncProvider";
import { useSync } from "@/src/contexts/SyncProvider";
import { FormatFields, GetForm } from "@/utils";
import {
  ChevronDown,
  Eye,
  FilePlus,
  Info,
  LoaderCircle,
  Upload,
  X,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { BiToggleLeft, BiToggleRight } from "react-icons/bi";
import { BsFiletypeCsv } from "react-icons/bs";
import { FaFileImport } from "react-icons/fa";
import { toast } from "react-toastify";
import Swal from "sweetalert2";
import BoldSyncInfo from "./BoldSyncInfo";
import TabelaWeg from "./WEGTableKits";

// ─── Tipos ────────────────────────────────────────────────────────────────────

interface ItemCard {
  id_item_card: number;
  nome_item_card: string;
  valor: number;
}

interface WegArquivoProcessado {
  name: string;
  date: string;
  data: any;
}

function montarDataImportedWeg(arquivos: WegArquivoProcessado[]) {
  return arquivos.flatMap((arquivo) =>
    Array.isArray(arquivo.data) ? arquivo.data : []
  );
}

export interface BelenusTabelaRow {
  kwp: number;
  geracao_media_mes_kwh: number;
  estrutura: string;
  painel_w: number;
  qtd_painel: number;
  inversor: string;
  garantia: string;
  total_paineis_inv: number;
  preco_custo: number;
  preco_venda: number;
  marca_painel?: string;
  tipo_painel?: string;
  observacao?: string;
}

// ─── Modelo CSV embutido ──────────────────────────────────────────────────────
// Baseado na planilha TABELA BELENUS - LINKSUN.xlsx (aba "TABELA BELENUS - AUXSOL")
// Colunas obrigatórias: KWP, INVERSOR, PRECO_CUSTO, PRECO_VENDA
// Colunas opcionais extras: MARCA_PAINEL, TIPO_PAINEL, OBSERVACAO

const MODELO_CSV_CONTEUDO =
  "KWP;GERACAO_MEDIA_MES_KWH;ESTRUTURA;PAINEL_W;QTD_PAINEL;INVERSOR;GARANTIA;TOTAL_PAINEIS_INV;PRECO_CUSTO;PRECO_VENDA\n" +
  "2.3;200;CERAM/FIBROC;575;4;AUXSOL 3,3KW;10 ANOS;8.61;4190.27;8715.76\n" +
  "2.875;250;CERAM/FIBROC;575;5;AUXSOL 3,3KW;10 ANOS;8.61;4726.31;9688.94\n" +
  "3.45;300;CERAM/FIBROC;575;6;AUXSOL 3,3KW;10 ANOS;8.61;5320.73;10747.87\n" +
  "4.025;350;CERAM/FIBROC;575;7;AUXSOL 3,3KW;10 ANOS;8.61;5929.75;11859.50\n" +
  "4.6;400;CERAM/FIBROC;575;8;AUXSOL 3,3KW;10 ANOS;8.61;6437.27;12617.05\n" +
  "5.175;450;CERAM/FIBROC;575;9;AUXSOL 5KW;10 ANOS;14;7158.56;14030.78\n" +
  "5.75;500;CERAM/FIBROC;575;10;AUXSOL 5KW;10 ANOS;14;7691.36;14998.15\n" +
  "6.325;550;CERAM/FIBROC;575;11;AUXSOL 5KW;10 ANOS;14;8198.88;15905.83\n" +
  "6.9;600;CERAM/FIBROC;575;12;AUXSOL 5KW;10 ANOS;14;8713.87;16817.77\n" +
  "7.475;650;CERAM/FIBROC;575;13;AUXSOL 5KW;10 ANOS;14;9270.21;17798.80\n" +
  "8.05;700;CERAM/FIBROC;575;14;AUXSOL 5KW;10 ANOS;14;9818.70;18753.72\n" +
  "9.2;800;CERAM/FIBROC;575;16;AUXSOL 7,5KW;10 ANOS;19.57;11526.59;22361.58\n" +
  "10.35;900;CERAM/FIBROC;575;18;AUXSOL 7,5KW;10 ANOS;19.57;12633.14;24255.63\n" +
  "11.5;1000;CERAM/FIBROC;575;20;AUXSOL 5+3,3KW;10 ANOS;22;15451.23;28893.80";

// ─── CSV helpers ──────────────────────────────────────────────────────────────

const COLUMN_MAP: Record<string, keyof BelenusTabelaRow> = {
  kwp: "kwp",
  "kwp (kw pico)": "kwp",
  geracao_media_mes_kwh: "geracao_media_mes_kwh",
  "geracao media mes kwh": "geracao_media_mes_kwh",
  "geracao  media/mes (kwh)": "geracao_media_mes_kwh",
  geracao_media_mes: "geracao_media_mes_kwh",
  estrutura: "estrutura",
  painel_w: "painel_w",
  "painel (w)": "painel_w",
  "painel w": "painel_w",
  qtd_painel: "qtd_painel",
  "qtd. painel": "qtd_painel",
  "quantidade painel": "qtd_painel",
  inversor: "inversor",
  garantia: "garantia",
  total_paineis_inv: "total_paineis_inv",
  "total paineis inv.": "total_paineis_inv",
  "total paineis inv": "total_paineis_inv",
  preco_custo: "preco_custo",
  custo: "preco_custo",
  "tabela preco custo": "preco_custo",
  preco_venda: "preco_venda",
  venda: "preco_venda",
  "tabela preco venda": "preco_venda",
  marca_painel: "marca_painel",
  "marca painel": "marca_painel",
  tipo_painel: "tipo_painel",
  "tipo painel": "tipo_painel",
  observacao: "observacao",
};

function normHeader(h: string): string {
  return h
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^a-z0-9 _/().]/g, "")
    .trim();
}

function detectDelimiter(line: string): string {
  const counts: Record<string, number> = { ";": 0, ",": 0, "\t": 0 };
  for (const ch of line) if (ch in counts) counts[ch]++;
  return Object.entries(counts).sort((a, b) => b[1] - a[1])[0][0];
}

function parseLine(line: string, delim: string): string[] {
  const out: string[] = [];
  let cur = "";
  let inQ = false;
  for (const ch of line) {
    if (ch === '"') {
      inQ = !inQ;
    } else if (ch === delim && !inQ) {
      out.push(cur.trim());
      cur = "";
    } else {
      cur += ch;
    }
  }
  out.push(cur.trim());
  return out;
}

function toNum(val: string): number {
  return parseFloat(
    val
      .replace(/[^\d.,-]/g, "")
      .replace(/\./g, "")
      .replace(",", ".")
  );
}

function parseBelenusCsv(content: string): {
  rows: BelenusTabelaRow[];
  errors: string[];
  warnings: string[];
} {
  const lines = content.split(/\r?\n/).filter((l) => l.trim());
  const errors: string[] = [];
  const warnings: string[] = [];

  if (lines.length < 2) {
    errors.push("CSV deve ter ao menos um cabeçalho e uma linha de dados.");
    return { rows: [], errors, warnings };
  }

  const delim = detectDelimiter(lines[0]);
  const rawHeaders = parseLine(lines[0], delim).map(normHeader);
  const fieldMap: Record<number, keyof BelenusTabelaRow> = {};

  rawHeaders.forEach((h, i) => {
    const mapped = COLUMN_MAP[h];
    if (mapped) fieldMap[i] = mapped;
    else if (h)
      warnings.push(`Coluna desconhecida ignorada: "${rawHeaders[i]}"`);
  });

  const required: (keyof BelenusTabelaRow)[] = [
    "kwp",
    "inversor",
    "preco_custo",
    "preco_venda",
  ];
  const missing = required.filter((r) => !Object.values(fieldMap).includes(r));
  if (missing.length) {
    errors.push(`Colunas obrigatórias ausentes: ${missing.join(", ")}`);
    return { rows: [], errors, warnings };
  }

  const numFields: (keyof BelenusTabelaRow)[] = [
    "kwp",
    "geracao_media_mes_kwh",
    "painel_w",
    "qtd_painel",
    "total_paineis_inv",
    "preco_custo",
    "preco_venda",
  ];

  const rows: BelenusTabelaRow[] = [];
  lines.slice(1).forEach((line, idx) => {
    if (!line.trim()) return;
    const cells = parseLine(line, delim);
    const obj: Partial<BelenusTabelaRow> = {};
    Object.entries(fieldMap).forEach(([ci, field]) => {
      const val = cells[Number(ci)] ?? "";
      if (numFields.includes(field)) {
        const n = toNum(val);
        if (isNaN(n))
          warnings.push(
            `Linha ${idx + 2}: valor inválido em "${field}" → "${val}"`
          );
        (obj as any)[field] = isNaN(n) ? 0 : n;
      } else {
        (obj as any)[field] = val;
      }
    });
    rows.push(obj as BelenusTabelaRow);
  });

  return { rows, errors, warnings };
}

function normalizarArquivosWeg(res: any): WegArquivoProcessado[] {
  const mapArquivo = (
    arquivo: any,
    fallbackIndex: number
  ): WegArquivoProcessado => ({
    name:
      arquivo?.nome_arquivo ?? arquivo?.name ?? `Arquivo ${fallbackIndex + 1}`,
    date: arquivo?.data_arquivo ?? arquivo?.date ?? new Date().toISOString(),
    data: arquivo?.dados ?? arquivo?.data ?? arquivo?.conteudo ?? arquivo,
  });

  if (Array.isArray(res?.dados)) {
    const dados = res.dados;
    const pareceListaDeArquivos = dados.some(
      (item: any) =>
        item && (item.dados !== undefined || item.nome_arquivo !== undefined)
    );

    if (pareceListaDeArquivos) {
      return dados.map((arquivo: any, index: number) =>
        mapArquivo(arquivo, index)
      );
    }

    return [
      {
        name: res?.nome_arquivo ?? "Arquivo WEG",
        date: res?.data_arquivo ?? new Date().toISOString(),
        data: dados,
      },
    ];
  }

  if (Array.isArray(res?.arquivos)) {
    return res.arquivos.map((arquivo: any, index: number) =>
      mapArquivo(arquivo, index)
    );
  }

  if (res?.dados?.arquivos && Array.isArray(res.dados.arquivos)) {
    return res.dados.arquivos.map((arquivo: any, index: number) =>
      mapArquivo(arquivo, index)
    );
  }

  return [];
}

// ─── Componente ───────────────────────────────────────────────────────────────

const DistribuidoresNativosCfg = ({
  distribuidor,
  setRelistarDistribuidores,
  relistarDistribuidores,
}: any) => {
  const [isLoading, setIsLoading] = useState(false);
  const [syncProgress, setSyncProgress] = useState(0);
  const [syncProgressPercent, setSyncProgressPercent] = useState(0);
  const [showSyncModal, setShowSyncModal] = useState(false);

  const [syncStep, setSyncStep] = useState(0);
  const [expandedDistribuidorId, setExpandedDistribuidorId] = useState<
    number | null
  >(null);

  const syncSteps = [
    "Validando dados...",
    "Conectando ao servidor...",
    "Processando informações...",
    "Finalizando sincronização...",
  ];

  const [defaultValues, setDefaultValues] = useState<any>({});
  const [email, setEmail] = useState<any>("");
  const [senha, setSenha] = useState<any>("");
  const [token, setToken] = useState<any>("");

  const { handleSubmit, ...form } = GetForm();
  const { valuesSession, perfil } = useAuth();
  const [importingWeg, setImportingWeg] = useState(false);
  const [importConcluido, setImportConcluido] = useState(false);
  const [dataImported, setDataImported] = useState<any>();
  const { session } = valuesSession();
  const { lojaAtual } = useLoja();
  const [nameFile, setNameFile] = useState("");
  const [dateFile, setDateFile] = useState("");
  const [showModal, setShowModal] = useState(false);
  const [itensCard, setItensCard] = useState<ItemCard[]>([]);
  const [modalidadeFreteWEG, setModalidadeFreteWEG] = useState("");
  const [fatorPrecificacaoWEG, setFatorPrecificacaoWEG] = useState("");

  // Estado Belenus CSV
  const [showModalBelenus, setShowModalBelenus] = useState(false);
  const [belenusCsvRows, setBelenusCsvRows] = useState<BelenusTabelaRow[]>([]);
  const [belenusCsvErrors, setBelenusCsvErrors] = useState<string[]>([]);
  const [belenusCsvWarnings, setBelenusCsvWarnings] = useState<string[]>([]);
  const [belenusCsvFileName, setBelenusCsvFileName] = useState<string | null>(
    null
  );
  const [importingBelenus, setImportingBelenus] = useState(false);
  const [belenusSucesso, setBelenusSucesso] = useState<string | null>(null);
  const inputBelenusCsvRef = useRef<HTMLInputElement>(null);

  // const { startGlobalSync } = useSync();

  const toggleExpand = (distribuidorId: number) => {
    setExpandedDistribuidorId((prevId) =>
      prevId == distribuidorId ? null : distribuidorId
    );
  };

  const inputFileRef = useRef(null);
  const handleButtonClick = () => {
    (inputFileRef.current as any)?.click();
  };
  const [wegFileSelected, setWegFileSelected] = useState<any[]>([]);
  const [wegArquivosProcessados, setWegArquivosProcessados] = useState<
    WegArquivoProcessado[]
  >([]);
  const [arquivoVisualizacaoWeg, setArquivoVisualizacaoWeg] =
    useState<WegArquivoProcessado | null>(null);
  const [showSyncProgress, setShowSyncProgress] = useState(false);

  const removerArquivoSelecionadoWeg = (indexParaRemover: number) => {
    setWegFileSelected((arquivos) =>
      arquivos.filter((_, index) => index !== indexParaRemover)
    );
  };

  const removerArquivoImportadoWeg = async (indexParaRemover: number) => {
    const arquivoRemovido = wegArquivosProcessados[indexParaRemover];
    if (!arquivoRemovido) return;

    const resposta = await removerJsonCsvWeg({
      nome_loja: lojaAtual?.nome_loja,
      indice: indexParaRemover,
      nome_arquivo: arquivoRemovido.name,
      data_arquivo: arquivoRemovido.date,
    });

    if (resposta?.sucesso === false) {
      await Swal.fire({
        title: "Erro ao remover arquivo",
        text: resposta?.erro ?? "Não foi possível remover o arquivo salvo.",
        icon: "error",
      });
      return;
    }

    const restantes = wegArquivosProcessados.filter(
      (_, index) => index !== indexParaRemover
    );

    setWegArquivosProcessados(restantes);
    setDataImported(montarDataImportedWeg(restantes));

    if (!restantes.length) {
      setArquivoVisualizacaoWeg(null);
      setImportConcluido(false);
      return;
    }

    if (
      arquivoVisualizacaoWeg &&
      arquivoVisualizacaoWeg.name === arquivoRemovido.name &&
      arquivoVisualizacaoWeg.date === arquivoRemovido.date
    ) {
      setArquivoVisualizacaoWeg(restantes[0]);
    }
  };

  const handleFileChange = (event: any) => {
    const files = Array.from(event.target.files || []);
    setWegFileSelected(files);
    setImportConcluido(false);
    setWegArquivosProcessados([]);
    setArquivoVisualizacaoWeg(null);
  };

  // useEffect(()=>{

  //   const pu = new Pusher("2ef90e3c-b44e-4db5-8565-9704194fdd8d", {
  //     cluster: "E6602E5B2AAA0730E1FB0255C85CB87F8CE574000D36F8A9D684B597DE340675",
  //   });
  //   pu.subscribe("test");

  // },[])

  useEffect(() => {
    const nomeLoja = lojaAtual?.nome_loja;
    if (!nomeLoja || distribuidor.id_distribuidor != 2) return;
    let cancelled = false;
    (async () => {
      try {
        setImportingWeg(true);
        const res = await buscarJsonCsv(nomeLoja);
        if (cancelled) return;
        const arquivos = normalizarArquivosWeg(res);
        setWegArquivosProcessados(arquivos);
        setArquivoVisualizacaoWeg(arquivos[0] ?? null);
        setDataImported(montarDataImportedWeg(arquivos));
        setNameFile(arquivos[0]?.name ?? res?.nome_arquivo ?? "");
        setDateFile(arquivos[0]?.date ?? res?.data_arquivo ?? "");
        setImportConcluido(arquivos.length > 0);
      } catch (error) {
        console.error("Erro ao buscar arquivos WEG salvos:", error);
      } finally {
        if (!cancelled) setImportingWeg(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [lojaAtual?.nome_loja]);

  // Lógica de progresso progressivo
  useEffect(() => {
    if (!showSyncModal) {
      setSyncProgressPercent(0);
      return;
    }

    const interval = setInterval(() => {
      setSyncProgressPercent((prev) => {
        // Incremento variável: quanto mais perto de 90, mais lento fica
        const increment = Math.random() * (3 - 0.5) + 0.5; // 0.5 a 3
        return Math.min(prev + increment, 90);
      });
    }, 500);

    return () => clearInterval(interval);
  }, [showSyncModal]);

  async function formatCSV(csvText: any) {
    const lines = csvText
      .split(/\r?\n/)
      .map((l: any) => l.trim())
      .filter(Boolean);
    const geradores: any[] = [];
    let currentGerador: any = null;
    let collectingItems = false;

    const parseCsvLine = (line: any) => {
      const out: any[] = [];
      let cur = "";
      let inQuotes = false;
      for (let i = 0; i < line.length; i++) {
        const ch = line[i];
        if (inQuotes) {
          if (ch === '"') {
            if (line[i + 1] === '"') {
              cur += '"';
              i++;
            } else {
              inQuotes = false;
            }
          } else {
            cur += ch;
          }
        } else {
          if (ch === '"') {
            inQuotes = true;
          } else if (ch === ",") {
            out.push(cur.trim());
            cur = "";
          } else {
            cur += ch;
          }
        }
      }
      out.push(cur.trim());
      return out.map((t) => t.replace(/\uFEFF/g, ""));
    };

    const glueMoneyTokens = (arr: any) => {
      const a = [...arr];
      for (let i = 0; i < a.length - 1; i++) {
        const cur = a[i];
        const next = a[i + 1];
        if (
          (/[,"]$/.test(cur) && /^\d{2}"?$/.test(next)) ||
          (/R\$\s*\d+"?$/.test(cur) && /^\d{2}"?$/.test(next))
        ) {
          const cc = cur.replace(/"$/g, "");
          const nc = next.replace(/"$/g, "");
          a[i] = !/,/.test(cc) ? `${cc},${nc}` : `${cc}${nc}`;
          a.splice(i + 1, 1);
          i--;
          continue;
        }
      }
      for (let i = 0; i < a.length - 1; i++) {
        if (
          /^R\$\s*$/.test(a[i]) &&
          (/\d/.test(a[i + 1]) || /[.,]\d{2}\b/.test(a[i + 1]))
        ) {
          a[i] = `${a[i]} ${a[i + 1]}`.trim();
          a.splice(i + 1, 1);
          i--;
        }
      }
      return a;
    };

    const cleanMoney = (s: any) => {
      if (!s) return "";
      let t = s
        .replace(/R\$/gi, "")
        .replace(/\s+/g, "")
        .replace(/[^\d.,-]/g, "");
      if (!t.includes(",") && /\.\d{2}$/.test(t)) {
        const [ip, dec] = t.split(".");
        t = `${ip},${dec}`;
      }
      return t;
    };

    const isInteger = (s: any) => /^\d+$/.test(s);
    const isMoneyToken = (s: any) =>
      s && (/^R?\$?\s*\d[\d .]*[.,]\d{2}\b/.test(s) || /\d[.,]\d{2}$/.test(s));

    for (const rawLine of lines) {
      if (rawLine.includes("Gerador Fotovoltaico de")) {
        const match = rawLine.match(/Gerador Fotovoltaico de.*?kWp/);
        if (match) {
          if (currentGerador) geradores.push(currentGerador);
          currentGerador = { gerador: match[0], itens: [] };
          collectingItems = false;
        }
        continue;
      }
      if (rawLine.startsWith("Quantidade") && rawLine.includes("Material")) {
        collectingItems = true;
        continue;
      }
      if (!collectingItems || !currentGerador) continue;
      if (
        /TOTAL\s*R\$/.test(rawLine) ||
        /^,?\s*Código do Material/i.test(rawLine) ||
        /Sob consulta/i.test(rawLine)
      )
        continue;

      let cols = parseCsvLine(rawLine);
      cols = glueMoneyTokens(cols);
      let qIdx = cols.findIndex((c) => isInteger(c));
      if (qIdx === -1) continue;

      let moneyIdxs = cols
        .map((c, i) => ({ i, c }))
        .filter((o) => isMoneyToken(o.c))
        .map((o) => o.i);
      if (!moneyIdxs.length) {
        for (let i = qIdx + 1; i < cols.length; i++) {
          if (/\d+,\d{2}$/.test(cols[i])) moneyIdxs.push(i);
        }
      }
      if (!moneyIdxs.length) continue;

      const totalIdx = moneyIdxs[moneyIdxs.length - 1];
      let unitIdx =
        moneyIdxs.find((i) => i > qIdx && i < totalIdx) ??
        moneyIdxs.find((i) => i > qIdx) ??
        moneyIdxs[0];
      const material = cols
        .slice(qIdx + 1, Math.min(unitIdx, totalIdx))
        .join(", ")
        .replace(/\s{2,}/g, " ")
        .trim();
      if (!material) continue;

      currentGerador.itens.push({
        Quantidade: cols[qIdx].trim(),
        Material: material,
        Unitário: cleanMoney(cols[unitIdx]),
        Total: cleanMoney(cols[totalIdx]),
      });
    }
    if (currentGerador) geradores.push(currentGerador);
    return geradores;
  }

  const handleFileSend = async () => {
    if (!wegFileSelected.length) {
      alert("Selecione um arquivo PDF antes de enviar.");
      return;
    }
    setImportingWeg(true);
    try {
      const totalArquivos = wegFileSelected.length;
      const arquivosProcessados: WegArquivoProcessado[] = [];

      for (let index = 0; index < totalArquivos; index++) {
        const arquivo = wegFileSelected[index];
        const formData = new FormData();
        formData.append("file", arquivo);

        const res = await fetch(
          "https://api.customax.inf.br/convert/processar-pdf",
          { method: "POST", body: formData }
        );

        console.log("Resposta do servidor:", res);

        if (!res.ok) {
          const e = await res.text();
          throw new Error(
            `Erro no arquivo ${arquivo.name}: ${res.status} - ${e}`
          );
        }

        const result = await formatCSV(await res.text());
        arquivosProcessados.push({
          name: arquivo.name,
          date: new Date().toISOString(),
          data: result,
        });

        await gravaJsonCsv({
          nome_arquivo:
            totalArquivos > 1
              ? `${index + 1}/${totalArquivos} - ${arquivo.name}`
              : arquivo.name,
          nome_loja: lojaAtual?.nome_loja,
          gravaJsonDados: result,
        });

        if (index < totalArquivos - 1) {
          await Swal.fire({
            title: "Arquivo processado",
            text: `${arquivo.name} concluído. Indo para o próximo arquivo.`,
            icon: "success",
            timer: 1400,
            showConfirmButton: false,
          });
        }
      }

      setImportConcluido(true);
      setWegArquivosProcessados(arquivosProcessados);
      setArquivoVisualizacaoWeg(arquivosProcessados[0] ?? null);
      setDataImported(montarDataImportedWeg(arquivosProcessados));
      Swal.fire({
        title: "Importação concluída",
        text:
          totalArquivos > 1
            ? `${totalArquivos} PDFs processados com sucesso.`
            : `${wegFileSelected[0].name} processado com sucesso.`,
        icon: "success",
        confirmButtonText: "OK",
      });
    } catch (err) {
      setImportingWeg(false);
      console.error("Erro ao enviar arquivo:", err);
      alert("Falha ao processar PDF.");
      return;
    }
    setImportingWeg(false);
  };

  useEffect(() => {
    setDefaultValues({
      dimensionar_protetor_surtos_credencial: 1,
      incluir_cabos_no_kit_credencial: 1,
      incluir_conectores_no_kit_credencial: 0,
      incluir_disjuntores_no_kit_credencial: 1,
    });
  }, []);

  useEffect(() => {
    if (Object.keys(defaultValues).length > 0) {
      setItensCard([
        {
          id_item_card: 1,
          nome_item_card: "Dimensionar Protetor de Surto",
          valor: defaultValues["dimensionar_protetor_surtos_credencial"] || 0,
        },
        {
          id_item_card: 2,
          nome_item_card: "Incluir cabos no kit",
          valor: defaultValues["incluir_cabos_no_kit_credencial"] || 0,
        },
        {
          id_item_card: 3,
          nome_item_card: "Incluir conectores no kit",
          valor: defaultValues["incluir_conectores_no_kit_credencial"] || 0,
        },
        {
          id_item_card: 4,
          nome_item_card: "Incluir disjuntores no kit",
          valor: defaultValues["incluir_disjuntores_no_kit_credencial"] || 0,
        },
      ]);
    }
  }, [defaultValues]);

  const handleCheckboxChange = (id: number) => {
    setItensCard((prev) =>
      prev.map((item) =>
        item.id_item_card === id
          ? { ...item, valor: item.valor === 1 ? 0 : 1 }
          : item
      )
    );
  };

  function onSubmitFunction(data: any) {
    setIsLoading(true);
    data["codDistribuidor_credencial"] = distribuidor.id_distribuidor;
    data["sigla_distribuidor"] = distribuidor.sigla_distribuidor;
    data["dimensionar_protetor_surtos_credencial"] = itensCard[0]?.valor;
    data["incluir_cabos_no_kit_credencial"] = itensCard[1]?.valor;
    data["incluir_conectores_no_kit_credencial"] = itensCard[2]?.valor;
    data["incluir_disjuntores_no_kit_credencial"] = itensCard[3]?.valor;
    data["status_credencial"] = 1;
    data["fatorPrecificacaoWEG"] = fatorPrecificacaoWEG;
    data["modalidadeFreteWEG"] = modalidadeFreteWEG;
    data["sincronizacao_automatica_credencial"] =
      distribuidor.sincronizacao_automatica_credencial;

    salvarDistribuidorCredencial(data)
      .then(() => {
        setRelistarDistribuidores(relistarDistribuidores + 1);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }

  useEffect(() => {
    listarDistribuidoresCredenciais()
      .then((arr) => {
        const cred = (Array.isArray(arr) ? arr : []).find(
          (c: any) =>
            String(c.codDistribuidor_credencial) ===
            String(distribuidor.id_distribuidor)
        );
        if (cred) {
          setDefaultValues(cred);
          setModalidadeFreteWEG(cred.modalidadeFreteWEG_credencial ?? "");
          setFatorPrecificacaoWEG(cred.fatorPrecificacaoWEG_credencial ?? "");
        } else {
          setDefaultValues((prev: any) => ({ ...prev, status_credencial: 0 }));
          setModalidadeFreteWEG("");
          setFatorPrecificacaoWEG("");
        }
      })
      .catch((error) => {
        console.error("Erro ao listar credenciais dos distribuidores:", error);
      });
  }, [distribuidor.id_distribuidor, relistarDistribuidores]);

  async function realizarSincronizacaoArquivoRafid() {
    setSyncProgressPercent(0);
    setSyncStep(0);
    setShowSyncModal(true);

    try {
      setSyncStep(1);

      setSyncStep(2);

      await importarArquivoItensRafid();

      setSyncStep(3);
      setSyncProgressPercent(100);

      setTimeout(() => {
        setShowSyncModal(false);
        Swal.fire({
          title: "Sincronização Concluída!",
          text: "A sincronização foi realizada com sucesso.",
          icon: "success",
        });
      }, 500);
    } catch (error) {
      setShowSyncModal(false);
      Swal.fire({
        title: "Erro na Sincronização",
        text: "Ocorreu um erro durante a sincronização. Tente novamente mais tarde.",
        icon: "error",
      });
    } finally {
      setIsLoading(false);
    }
  }

  // Belenus CSV handlers
  const handleDownloadModeloBelenus = () => {
    const blob = new Blob(["\uFEFF" + MODELO_CSV_CONTEUDO], {
      type: "text/csv;charset=utf-8;",
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "TABELA_BELENUS_MODELO.csv";
    a.click();
    URL.revokeObjectURL(url);
  };

  const handleBelenusCsvChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setBelenusCsvFileName(file.name);
    setBelenusCsvErrors([]);
    setBelenusCsvWarnings([]);
    setBelenusCsvRows([]);
    setBelenusSucesso(null);
    const reader = new FileReader();
    reader.onload = (ev) => {
      const { rows, errors, warnings } = parseBelenusCsv(
        ev.target?.result as string
      );
      setBelenusCsvErrors(errors);
      setBelenusCsvWarnings(warnings);
      setBelenusCsvRows(rows);
    };
    reader.readAsText(file, "UTF-8");
  };

  const handleBelenusCsvImport = async () => {
    if (!belenusCsvRows.length) return;
    setImportingBelenus(true);
    setBelenusSucesso(null);
    try {
      await salvarTabelaBelenus(belenusCsvRows);
      // await new Promise((r) => setTimeout(r, 600));
      setBelenusSucesso(
        `✅ ${belenusCsvRows.length} kit(s) importado(s) com sucesso!`
      );
      setBelenusCsvRows([]);
      setBelenusCsvFileName(null);
      if (inputBelenusCsvRef.current) inputBelenusCsvRef.current.value = "";
      setRelistarDistribuidores(relistarDistribuidores + 1);
    } catch (err: any) {
      setBelenusCsvErrors([err?.message ?? "Erro ao importar tabela."]);
    } finally {
      setImportingBelenus(false);
    }
  };
  function formatTextType(type: string) {
    switch (type) {
      case "0":
        return "API";
      case "1":
        return "PDF";
      case "2":
        return "CSV";
      case "3":
        return "Token";
      default:
        return "";
    }
  }

  const fmtBRL = (v?: number) =>
    v != null
      ? v.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })
      : "-";

  const abrirVisualizacaoWeg = (arquivo: WegArquivoProcessado) => {
    setArquivoVisualizacaoWeg(arquivo);
    setShowModal(true);
  };

  const handleSincronizar = () => {
    const siglaDistribuidor = String(distribuidor?.sigla_distribuidor ?? "")
      .trim()
      .toUpperCase();

    if (distribuidor.sigla_distribuidor == "RA") {
      setIsLoading(true);
      return toast
        .promise(
          new Promise((resolve, reject) => {
            obterDataAtualizacaoArquivo()
              .then(resolve)
              .catch(() => reject("err"));
          }),
          {
            pending: {
              render() {
                return "Aguarde";
              },
            },
            success: {
              render() {
                return "Arquivo de importação encontrado";
              },
              theme: "light",
            },
            error: {
              render() {
                return "Erro ao obter o arquivo de importação";
              },
            },
          }
        )
        .then((res) => {
          const confirmOptions = {
            icon: "question" as const,
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Sincronizar",
            cancelButtonText: "Cancelar",
          };
          if (res && res == distribuidor.dataAtualizacao_arquivo_distribuidor) {
            Swal.fire({
              title: "Realizar Sincronização?",
              text: "Os preços já estão atualizados. Deseja prosseguir mesmo assim?",
              ...confirmOptions,
            }).then((r: any) => {
              if (r.isConfirmed) realizarSincronizacaoArquivoRafid();
            });
          } else {
            Swal.fire({
              title: "Realizar Sincronização?",
              text: "A sincronização ocorrerá imediatamente.",
              ...confirmOptions,
            }).then((r: any) => {
              if (r.isConfirmed) realizarSincronizacaoArquivoRafid();
            });
          }
        })
        .finally(() => setIsLoading(false));
    }

    Swal.fire({
      title: "Realizar Sincronização?",
      // text: "A sincronização ocorrerá imediatamente e poderá demorar alguns minutos.",
      text: `ATENÇÃO!! O processo pode demorar mais de uma hora,
      caso queira utilizar o sistema, o ideal é sincronizar em um navegador separado
      para evitar que seja interrompido o processo na metade.`,
      icon: "question",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Sincronizar",
      cancelButtonText: "Cancelar",
    }).then(async (result: any) => {
      if (!result.isConfirmed) return;
      // Swal.fire({
      //   title: "Sincronizando...",
      //   html: "Por favor, aguarde.",
      //   allowEscapeKey: false,
      //   allowOutsideClick: false,
      //   didOpen: () => {
      //     Swal.showLoading();
      //   },
      // });

      setIsLoading(true);

      // if (siglaDistribuidor === "BE") {
      //   startGlobalSync(siglaDistribuidor);
      // }

      try {
        let response: any;

        if (siglaDistribuidor === "BE") {
          response = await sincronizacaoBoldDistribuidor({
            sigla_distribuidor: "BE",
            nome_distribuidor: "Bold Energy",
          });
        } else {
          if (!Array.isArray(dataImported) || dataImported.length === 0) {
            return Swal.fire({
              title: "Dados não carregados",
              text: "Para sincronizar WEG, importe e carregue o arquivo antes de clicar em sincronizar.",
              icon: "warning",
            });
          }

          response = await sincronizacaoDistribuidor(dataImported as any);
        }

        if (siglaDistribuidor === "BE" && response?.success === 0) {
          return Swal.fire({
            title: "Sincronização não efetuada!",
            text: `${response?.erro} Entre em contato com o suporte!`,
            icon: "error",
          });
        }

        if (
          siglaDistribuidor !== "BE" &&
          ((typeof response === "string" &&
            !response.toLowerCase().includes("conclu")) ||
            (typeof response === "object" && response?.success === 0))
        ) {
          return Swal.fire({
            title: "Sincronização não efetuada!",
            text:
              (typeof response === "object" ? response?.erro : response) ||
              "Não foi possível gravar os dados da WEG.",
            icon: "error",
          });
        }

        const resumoResposta =
          siglaDistribuidor !== "BE" && typeof response === "object"
            ? response?.resumo
            : null;

        const textoSucesso = resumoResposta
          ? `A sincronização foi realizada com sucesso. Kits gravados: ${resumoResposta.kits_gravados ?? 0} | Erros: ${resumoResposta.kits_com_erro ?? 0} | Ignorados: ${resumoResposta.kits_ignorados ?? 0}`
          : "A sincronização foi realizada com sucesso.";

        Swal.fire({
          title: "Sincronização Concluída!",
          text: textoSucesso,
          icon: "success",
        });
      } catch (err) {
        Swal.close();
        console.error("Catch err sync:", err);
        if (siglaDistribuidor !== "BE") {
          Swal.fire({
            title: "Erro na Sincronização",
            text: "Ocorreu um erro durante a sincronização. Tente novamente.",
            icon: "error",
          });
        }
      } finally {
        setIsLoading(false);
      }
    });
  };

  const editStatusDistribuidor = (id: number, status: number) => {
    if (status == 0 && id == 1 && (!email || !senha)) {
      Swal.fire({
        title: "Aviso",
        text: "Preencha os campos de e-mail e senha para ativar o distribuidor e clique em salvar.",
        icon: "warning",
        confirmButtonColor: "#3085d6",
        confirmButtonText: "Ok",
      });
      return;
    }
    if (status == 0 && id == 3 && !token) {
      Swal.fire({
        title: "Aviso",
        text: "Preencha o campo de token para ativar o distribuidor e clique em salvar.",
        icon: "warning",
        confirmButtonColor: "#3085d6",
        confirmButtonText: "Ok",
      });
      return;
    }
    Swal.fire({
      title: status == 1 ? "Desativar Distribuidor?" : "Ativar Distribuidor?",
      text: " ",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: status == 1 ? "Desativar" : "Ativar",
      cancelButtonText: "Cancelar",
    }).then((result) => {
      if (result.isConfirmed) {
        const novoStatus = status == 1 ? 0 : 1;
        setDefaultValues((prev: any) => ({
          ...prev,
          status_credencial: novoStatus,
        }));
        setIsLoading(true);
        alterarStatusDistribuidorNativo({ id, status: novoStatus }).finally(
          () => setIsLoading(false)
        );
      }
    });
  };

  // ─── Render ───────────────────────────────────────────────────────────────

  return (
    <>
      <div className="border border-gray-300 shadow-lg p-4 rounded-lg transition-all duration-300 h-[100%]">
        <div className="flex items-start p-2">
          <div className="flex-1">
            {/* Título e status */}
            <div className="flex items-center justify-between mb-2 mr-4">
              <div className="grid">
                <h2 className="text-lg font-semibold">
                  {distribuidor.nome_distribuidor}
                </h2>
                <p className="font-semibold text-sm">
                  {distribuidor.isFornecedor_distribuidor == 1
                    ? "Fornecedor"
                    : "Distribuidor"}{" "}
                  {defaultValues.status_credencial == 1 ? "Ativo" : "Inativo"}
                </p>
              </div>
              <button
                onClick={() =>
                  editStatusDistribuidor(
                    distribuidor.id_distribuidor,
                    defaultValues.status_credencial
                  )
                }
                className="flex items-center focus:outline-none"
              >
                <p
                  className={`text-sm font-bold flex items-center ${defaultValues.status_credencial == 1 ? "text-success" : "text-error"}`}
                >
                  {defaultValues.status_credencial == 1 ? (
                    <i className="text-success">
                      <BiToggleRight size={40} />
                    </i>
                  ) : (
                    <i className="text-error">
                      <BiToggleLeft size={40} />
                    </i>
                  )}
                </p>
              </button>
            </div>

            {/* Grid informações */}
            <div className="grid grid-cols-2 gap-2">
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  CEP:
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.cep_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  Endereço:
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.endereco_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  Número:
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.numero_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  Bairro:
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.bairro_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  Cidade:
                </span>

                <p className="text-sm text-gray-600">
                  {distribuidor.cidade_distribuidor} -
                  {distribuidor.estado_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  Complemento:
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.complemento_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  CNPJ:
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.cnpj_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  Telefone:
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.telefone1_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  Email:
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.email_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  Pessoa de Contato:
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.pessoa_contato_distribuidor}
                </p>
              </div>
              <div>
                <span className="text-xs font-semibold text-gray-500">
                  Tipo dos kits
                </span>
                <p className="text-sm text-gray-600">
                  {distribuidor.somenteKitsFechado_distribuidor == "1"
                    ? "Kit Fechado"
                    : "Kit Manual"}
                </p>
              </div>
              {distribuidor.id_distribuidor != 3 && (
                <>
                  <div>
                    <span className="text-xs font-semibold text-gray-500">
                      Data da Última Sincronização:
                    </span>
                    {distribuidor.data_ultima_sincronizacao_distribuidor ? (
                      <p className="text-sm text-gray-600">
                        {FormatFields.formatarDataHora(
                          new Date(
                            distribuidor.data_ultima_sincronizacao_distribuidor
                          )
                        )}
                      </p>
                    ) : (
                      <p className="text-sm text-gray-600">
                        Sem registros de sincronização
                      </p>
                    )}
                  </div>
                  {distribuidor.id_distribuidor != 1 && (
                    <div>
                      <span className="text-xs font-semibold text-gray-500">
                        Versão do Layout:
                      </span>
                      <p className="text-sm text-gray-600">
                        {distribuidor.versao_documento_distribuidor}
                      </p>
                    </div>
                  )}
                  {distribuidor.id_distribuidor == "1" && (
                    <>
                      <BoldSyncInfo />
                      <div>
                        <span className="text-xs font-semibold text-gray-500">
                          Qtd Novos Kits:
                        </span>
                        {distribuidor.qtdNovosKits_log_distribuidor ? (
                          <p className="text-sm text-gray-600">
                            {distribuidor.qtdNovosKits_log_distribuidor}
                          </p>
                        ) : (
                          <p className="text-sm text-gray-600">
                            Sem registros de sincronização
                          </p>
                        )}
                      </div>
                      <div>
                        <span className="text-xs font-semibold text-gray-500">
                          Qtd Kits Atualizados:
                        </span>
                        {distribuidor.qtdUpdatesKits_log_distribuidor ? (
                          <p className="text-sm text-gray-600">
                            {distribuidor.qtdUpdatesKits_log_distribuidor}
                          </p>
                        ) : (
                          <p className="text-sm text-gray-600">
                            Sem registros de sincronização
                          </p>
                        )}
                      </div>
                    </>
                  )}
                </>
              )}
            </div>

            {distribuidor.id_distribuidor == 3 && (
              <div className="mt-2">
                <span className="text-xs font-semibold text-gray-500">
                  Distribuidor não possui sincronização.
                  <br />A comunicação é automática na digitação da proposta.
                </span>
              </div>
            )}
            <div className="mt-4 pt-3 border-t border-gray-200">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-xs font-semibold text-gray-500">
                  Tipo de Integração:
                </span>
                <span className="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">
                  {formatTextType(distribuidor.tipoIntegracao_distribuidor)}
                </span>
              </div>
            </div>
            {/* ── BELENUS: botões CSV direto no card ── */}
            {/* {distribuidor.id_distribuidor == 13 && (
              <div className="mt-4 pt-3">

                <div className="flex gap-2 flex-wrap">
                  <button
                    type="button"
                    onClick={handleDownloadModeloBelenus}
                    className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md border border-gray-300 text-gray-600 hover:bg-gray-50 transition-colors"
                  >
                    <FaDownload size={11} />
                    Baixar modelo CSV
                  </button>
                  <button
                    type="button"
                    onClick={() => { setShowModalBelenus(true); setBelenusSucesso(null); }}
                    className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md border border-blue-300 text-blue-600 hover:bg-blue-50 transition-colors font-semibold"
                  >
                    <FaFileImport size={11} />
                    Importar tabela CSV
                  </button>
                </div>
              </div>
            )} */}
          </div>

          {/* Botão expansão — não exibe para Belenus (id 4) */}
          <div className="flex flex-col items-end ml-auto">
            {distribuidor.status_distribuidor == 1 &&
              distribuidor.id_distribuidor != 13 && (
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => toggleExpand(distribuidor.id_distribuidor)}
                >
                  <ChevronDown
                    className={`h-4 w-4 transition-transform duration-300 ${expandedDistribuidorId == distribuidor.id_distribuidor ? "rotate-180" : ""}`}
                  />
                </Button>
              )}
          </div>
        </div>

        {/* Painel expandido — distribuidores 1, 2, 3 */}
        <div
          className={`overflow-hidden transition-all duration-300 ease-in-out ${expandedDistribuidorId == distribuidor.id_distribuidor ? "max-h-screen opacity-100 mt-4" : "max-h-0 opacity-0"}`}
        >
          <form onSubmit={handleSubmit(onSubmitFunction)}>
            <div className="border-t border-gray-200 pt-4">
              {distribuidor.id_distribuidor == 1 && (
                <>
                  <p className="text-sm bg-warning rounded-sm text-center text-white font-semibold">
                    A sincronização ocorrerá toda madrugada!
                  </p>
                  <div className="mt-4">
                    <label className="block text-sm font-medium text-gray-700">
                      E-mail
                    </label>
                    <Input
                      formulario={form}
                      type="email"
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
                      name="email_credencial"
                      error={"Preencha esse campo!"}
                      defaultValue={
                        distribuidor.status_credencial == "1"
                          ? distribuidor?.email_credencial
                          : ""
                      }
                      onChange={(e) => setEmail(e.target.value)}
                      required
                    />
                  </div>
                  <div className="mt-4">
                    <label className="block text-sm font-medium text-gray-700">
                      Senha
                    </label>
                    <Input
                      formulario={form}
                      type="password"
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
                      name="senha_credencial"
                      error={"Preencha esse campo!"}
                      defaultValue={
                        distribuidor.status_credencial == "1"
                          ? distribuidor?.senha_credencial
                          : ""
                      }
                      onChange={(e) => setSenha(e.target.value)}
                      required
                    />
                  </div>
                </>
              )}

              {distribuidor.id_distribuidor == 2 && (
                <>
                  {perfil &&
                    ["1", "4", "-1"].includes(perfil.cargo_perfil as any) && (
                      <>
                        <div className="flex flex-col">
                          <label className="font-semibold mb-1 text-sm">
                            Fator de Precificação WEG
                          </label>
                          <Input
                            mascara="numeroPreciso"
                            className="w-full border rounded-lg p-2 bg-white dark:bg-[#1d2a39] border-gray-300 dark:border-gray-600"
                            placeholder="Ex: 1.045"
                            value={fatorPrecificacaoWEG}
                            onChange={(e) =>
                              setFatorPrecificacaoWEG(e.target.value)
                            }
                          />
                        </div>
                        <div className="flex flex-col my-3">
                          <label className="font-semibold mb-1 text-sm">
                            Modalidade de frete WEG
                          </label>
                          {defaultValues && (
                            <InputSelectComponent
                              key={modalidadeFreteWEG}
                              className="w-full border rounded-lg p-2 bg-white dark:bg-[#1d2a39] border-gray-300 dark:border-gray-600"
                              defaultValue={
                                defaultValues?.modalidadeFreteWEG_credencial
                              }
                              onChange={(e: any) =>
                                setModalidadeFreteWEG(e.value)
                              }
                              options={[
                                { value: "", label: "Selecione uma opção" },
                                {
                                  value: "1.000",
                                  label:
                                    "FOB - Retirada em nossa fábrica WEG em Itajaí-SC (1.000)",
                                },
                                {
                                  value: "1.045",
                                  label:
                                    "CIF - Sem descarga - Região Sul (1.045)",
                                },
                                {
                                  value: "1.055",
                                  label:
                                    " CIF - Sem descarga - Região Sudeste (1.055)",
                                },
                                {
                                  value: "1.075",
                                  label:
                                    " CIF - Sem descarga - Região Centro Oeste (1.075)",
                                },
                                {
                                  value: "1.085",
                                  label:
                                    "CIF - Sem descarga - Região Nordeste (1.085)",
                                },
                                {
                                  value: "1.110",
                                  label:
                                    "CIF - Sem descarga - Região Norte (1.110)",
                                },
                              ]}
                            />
                          )}
                        </div>
                      </>
                    )}
                  <Table className="min-w-full bg-white dark:bg-[#1d2a39] border border-gray-300 shadow-sm">
                    <TableHeader>
                      <TableRow className="sticky top-[-1px] bg-[#eee] dark:bg-[#141d27] z-9 hover:bg-[#eee] dark:hover:bg-[#1d2a39]">
                        <TableHead className="font-bold py-2 px-4 border-b text-start">
                          Itens
                        </TableHead>
                        <TableHead className="font-bold py-2 px-4 border-b text-end">
                          Contém/Não Contém
                        </TableHead>
                      </TableRow>
                    </TableHeader>
                    <tbody>
                      {itensCard.map((item) => (
                        <tr
                          key={item.id_item_card}
                          className="bg-white dark:bg-black-2/20"
                        >
                          <td className="py-2 text-start">
                            {item.nome_item_card}
                          </td>
                          <td className="py-2 flex text-end ml-30">
                            <div className="flex justify-end">
                              <input
                                type="checkbox"
                                checked={item.valor == 1}
                                onChange={() =>
                                  handleCheckboxChange(item.id_item_card)
                                }
                              />
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </Table>
                </>
              )}

              {distribuidor.id_distribuidor == 3 && (
                <>
                  <p className="text-sm bg-warning rounded-sm text-center text-white font-semibold">
                    A sincronização será de forma automática sem a necessidade
                    de SINCRONIZAR!
                  </p>
                  <div className="mt-4">
                    <label className="block text-sm font-medium text-gray-700">
                      Token
                    </label>

                    <Input
                      formulario={form}
                      type="text"
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                      name="token_credencial"
                      error={"Preencha esse campo!"}
                      maxLength={1000}
                      defaultValue={
                        distribuidor.status_credencial == "1"
                          ? distribuidor?.token_credencial
                          : ""
                      }
                      onChange={(e) => setToken(e.target.value)}
                      required
                    />
                  </div>
                </>
              )}

              {distribuidor.id_distribuidor === "4" && (
                <div className="flex flex-row gap-2">
                  <div className="py-2 text-start w-fit flex flex-row gap-1 items-center">
                    <div>Sincronizar automaticamente</div>
                    <div
                      // type="button"
                      className={`text-primary flex flex-row items-center cursor-pointer gap-2 rounded-full p-0 w-5 h-5`}
                      onClick={(e: any) => {
                        e.stopPropagation();
                        handleSweetAlert({
                          icon: "info",
                          showDenyButton: false,
                          confirmButtonText: "Ok",
                          title: "Sincronizar automaticamente",
                          html: (
                            <div>
                              Quando ativado os itens do distribuidor serão
                              sincronizados todas as noites
                            </div>
                          ),
                        });
                      }}
                    >
                      <Info size={14} />
                    </div>
                  </div>
                  <div className="py-2 flex text-end">
                    <div className="flex justify-end">
                      <input
                        type="checkbox"
                        checked={
                          distribuidor?.sincronizacao_automatica_credencial ==
                          "1"
                        }
                        onChange={(e) => {
                          setIsLoading(true);

                          salvarDistribuidorCredencial({
                            codDistribuidor_credencial:
                              distribuidor.id_distribuidor,
                            sigla_distribuidor: distribuidor.sigla_distribuidor,
                            sincronizacao_automatica_credencial: e?.target
                              ?.checked
                              ? "1"
                              : "0",
                          })
                            .then(() => {
                              setRelistarDistribuidores(
                                relistarDistribuidores + 1
                              );
                            })
                            .finally(() => {
                              setIsLoading(false);
                            });
                        }}
                      />
                    </div>
                  </div>
                </div>
              )}

              {/* <div className="mt-4 w-full">
                <Button
                  type="button"
                  className="bg-success w-full text-xs"
                  onClick={() => {
                    async function getAllProductIdsParallel() {
                      const baseUrl =
                        "https://appback01.boldenergy.com.br/api/productKits/index";
                      const perPage = 1000;
                      const token =
                        "oat_NzQxNTUz.b2ZJazZydjRoeXA0V2QyeWFvZG1nVlktWGdTT0Rpd3BwdENCVnFQbTQyMTU3NjUzOTk";

                      const idsSet = new Set<number | string>();

                      const headers = {
                        Authorization: `Bearer ${token}`,
                        "Content-Type": "application/json",
                      };

                      try {
                        // 1. Primeira requisição para obter os primeiros IDs e o total de páginas
                        const firstResponse = await fetch(
                          `${baseUrl}?page=1&perPage=${perPage}`,
                          { headers },
                        );

                        if (!firstResponse.ok)
                          throw new Error("Falha na primeira requisição");

                        const firstData: any = await firstResponse.json();
                        const lastPage = firstData.meta.lastPage;

                        // firstData.data.forEach((item: any) =>
                        //   idsSet.add(item.id),
                        // );
                        // Processa a primeira página
                        firstData.data.forEach((item: any) => {
                          if (idsSet.has(item.id)) {
                            console.log(
                              `⚠️ ID ${item.id} repetido na página 1`, item
                            );
                          } else {
                            idsSet.add(item.id);
                          }
                        });

                        console.log(
                          `Página 1 processada. Total de páginas detectadas: ${lastPage}`,
                        );

                        // 2. Se houver mais de uma página, cria as promessas para as restantes
                        if (lastPage > 1) {
                          const pagePromises = [];

                          for (let page = 2; page <= lastPage; page++) {
                            const url = `${baseUrl}?page=${page}&perPage=${perPage}`;

                            // Criamos uma função que retorna a promessa de busca dos IDs
                            const fetchPage = fetch(url, { headers })
                              .then((res) => {
                                if (!res.ok)
                                  throw new Error(`Erro na página ${page}`);
                                return res.json() as Promise<any>;
                              })
                              .then((resData) =>
                                // resData.data.map((item: any) => item.id),
                                resData.data.forEach((item: any) =>
                                  // idsSet.add(item.id),
                                  {
                                    if (idsSet.has(item.id)) {
                                      console.log(
                                        `⚠️ ID ${item.id} repetido na página ${page}`, item
                                      );
                                    } else {
                                      idsSet.add(item.id);
                                    }
                                  },
                                ),
                              );

                            pagePromises.push(fetchPage);
                          }

                          // 3. Executa todas as requisições em paralelo
                          // const results = await Promise.all(pagePromises);
                          // 4. Concatena os resultados das páginas 2 em diante no array principal
                          await Promise.all(pagePromises);
                        }

                        const uniqueIds = Array.from(idsSet);

                        console.log(
                          `Finalizado! IDs únicos coletados: ${uniqueIds.length}`,
                        );
                        return uniqueIds;
                      } catch (error) {
                        console.error("Erro na busca paralela de IDs:", error);
                        throw error;
                      }
                    }
                    getAllProductIdsParallel().then((res) => {
                      console.log(res);
                    });
                  }}
                >
                  Verificar
                </Button>
              </div> */}

              <div className="mt-4 w-full">
                {distribuidor.id_distribuidor != 13 && (
                  <Button
                    disabled={importingWeg}
                    className="bg-success w-full text-xs"
                  >
                    Salvar
                  </Button>
                )}
              </div>

              <div className="mt-4 w-full">
                {distribuidor.id_distribuidor === "2" && (
                  <>
                    <input
                      type="file"
                      accept=".pdf"
                      multiple
                      ref={inputFileRef}
                      onChange={handleFileChange}
                      className="hidden"
                    />
                    {wegFileSelected.length > 0 && !importConcluido && (
                      <div className="flex flex-col gap-2">
                        <div className="flex items-center gap-2 text-xs font-semibold text-gray-500">
                          <span>Arquivos selecionados</span>
                        </div>
                        {wegFileSelected.map((arquivo: any, index: number) => (
                          <div
                            key={`${arquivo.name}-${index}`}
                            className="flex items-center justify-between gap-3 bg-slate-100 rounded-md py-2 px-2 text-black text-sm"
                          >
                            <div className="min-w-0 flex-1">
                              <span className="font-semibold text-xs block text-gray-500">
                                Selecionado:
                              </span>
                              <span className="block truncate">
                                {arquivo.name}
                              </span>
                            </div>
                            <span className="text-[10px] px-2 py-1 rounded-full bg-slate-200 text-slate-700 whitespace-nowrap">
                              Aguardando envio
                            </span>
                            <Button
                              type="button"
                              onClick={() =>
                                removerArquivoSelecionadoWeg(index)
                              }
                              className="h-7 w-7 p-0 bg-transparent text-red-600 hover:bg-red-50 flex-shrink-0"
                            >
                              <X size={14} />
                            </Button>
                          </div>
                        ))}
                      </div>
                    )}
                    {!wegFileSelected.length && (
                      <Button
                        type="button"
                        onClick={handleButtonClick}
                        className="bg-trueGray-950 text-white w-full text-xs items-center gap-2"
                      >
                        <Upload size={14} />
                        <span>Importar</span>
                      </Button>
                    )}
                    {wegFileSelected.length > 0 && !importConcluido && (
                      <div className="flex gap-3 text-sm">
                        <Button
                          type="button"
                          onClick={handleButtonClick}
                          disabled={importingWeg}
                          className="bg-cyan-900 text-white w-full items-center gap-2"
                        >
                          <FilePlus size={17} />
                          <span>Selecionar outros</span>
                        </Button>
                        <Button
                          type="button"
                          disabled={importingWeg}
                          onClick={handleFileSend}
                          className="bg-trueGray-950 text-white w-full items-center gap-2"
                        >
                          {importingWeg ? (
                            <>
                              <LoaderCircle
                                size={17}
                                className="animate-spin-1.5"
                              />
                              <span>Carregando</span>
                            </>
                          ) : (
                            <>
                              <Upload size={17} />
                              <span>Carregar</span>
                            </>
                          )}
                        </Button>
                      </div>
                    )}
                    {importConcluido && (
                      <div className="flex flex-col gap-2 w-full">
                        <div className="flex items-center justify-between gap-2 text-xs text-gray-500 font-semibold">
                          <span>Arquivos importados</span>
                          <span>
                            {wegArquivosProcessados.length} arquivo(s)
                          </span>
                        </div>

                        {wegArquivosProcessados.map((arquivo, index) => (
                          <div
                            key={`${arquivo.name}-${arquivo.date}-${index}`}
                            className="bg-slate-200 relative text-black text-xs p-2 flex rounded-md w-full items-center gap-3"
                          >
                            <span className="bg-green-300 text-green-900 p-3 rounded-lg flex-shrink-0">
                              <BsFiletypeCsv size={20} />
                            </span>
                            <div className="flex-col flex min-w-0 flex-1">
                              <span className="ml-1 truncate">
                                {arquivo.name}
                              </span>
                              <span className="ml-2 text-[10px] text-gray-600">
                                {arquivo.date &&
                                  FormatFields.formatarDataHora(
                                    new Date(arquivo.date)
                                  )}
                              </span>
                            </div>
                            <Button
                              type="button"
                              onClick={() => abrirVisualizacaoWeg(arquivo)}
                              className="gap-2 text-black bg-transparent flex-shrink-0"
                            >
                              <Eye size={17} />
                            </Button>
                            <Button
                              type="button"
                              onClick={() => removerArquivoImportadoWeg(index)}
                              className="gap-2 text-red-600 bg-transparent flex-shrink-0"
                            >
                              <X size={16} />
                            </Button>
                          </div>
                        ))}
                      </div>
                    )}
                  </>
                )}
              </div>
            </div>
          </form>

          <div className="flex w-full">
            {["1", "2", "4"].includes(distribuidor.id_distribuidor) &&
              defaultValues.status_credencial == 1 && (
                <Button
                  className="bg-primary text-xs w-full mt-4"
                  onClick={handleSincronizar}
                  loading={isLoading}
                >
                  Sincronizar
                </Button>
              )}
          </div>
        </div>
      </div>

      {/* Modal WEG */}
      <ModalComponente
        opened={showModal}
        onClose={() => setShowModal(false)}
        hasSaveButton={false}
        header={`Dados importados do PDF${arquivoVisualizacaoWeg ? ` — ${arquivoVisualizacaoWeg.name}` : ""}`}
      >
        {arquivoVisualizacaoWeg?.data?.length > 0 ? (
          <TabelaWeg data={arquivoVisualizacaoWeg?.data ?? []} />
        ) : (
          <p>Nenhum dado importado ainda.</p>
        )}
      </ModalComponente>

      {/* ── Modal Belenus CSV ── */}
      <ModalComponente
        opened={showModalBelenus}
        onClose={() => setShowModalBelenus(false)}
        hasSaveButton={false}
        header={`Importar Tabela de Preços — ${distribuidor.nome_distribuidor}`}
        defaultW="w-[900px]"
      >
        <div className="p-4 space-y-4">
          <p className="text-xs text-gray-500">
            Baixe o modelo, preencha com os dados do distribuidor e envie o
            arquivo <strong>.csv</strong>. Separador: ponto-e-vírgula (
            <code>;</code>) ou vírgula (<code>,</code>) — UTF-8. Colunas extras
            opcionais: <code>MARCA_PAINEL</code>, <code>TIPO_PAINEL</code>,{" "}
            <code>OBSERVACAO</code>.
          </p>

          {/* Área de upload */}
          <div
            className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-primary hover:bg-primary/5 transition-all"
            onClick={() => inputBelenusCsvRef.current?.click()}
          >
            <FaFileImport className="mx-auto mb-2 text-gray-400" size={28} />
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {belenusCsvFileName ? (
                <span className="text-primary font-medium">
                  {belenusCsvFileName}
                </span>
              ) : (
                <>
                  Clique para selecionar um arquivo <strong>.csv</strong>
                </>
              )}
            </p>
            <input
              ref={inputBelenusCsvRef}
              type="file"
              accept=".csv,text/csv"
              className="hidden"
              onChange={handleBelenusCsvChange}
            />
          </div>

          {/* Erros */}
          {belenusCsvErrors.length > 0 && (
            <div className="bg-red-50 border border-red-200 rounded-md p-3 space-y-1">
              {belenusCsvErrors.map((e, i) => (
                <p key={i} className="text-xs text-red-700">
                  ❌ {e}
                </p>
              ))}
            </div>
          )}

          {/* Avisos */}
          {belenusCsvWarnings.length > 0 && (
            <div className="bg-yellow-50 border border-yellow-200 rounded-md p-3 space-y-1">
              {belenusCsvWarnings.map((w, i) => (
                <p key={i} className="text-xs text-yellow-700">
                  ⚠️ {w}
                </p>
              ))}
            </div>
          )}

          {/* Sucesso */}
          {belenusSucesso && (
            <div className="bg-green-50 border border-green-200 rounded-md p-3">
              <p className="text-xs text-green-700">{belenusSucesso}</p>
            </div>
          )}

          {/* Pré-visualização */}
          {belenusCsvRows.length > 0 && belenusCsvErrors.length === 0 && (
            <div>
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-medium text-gray-700 dark:text-white">
                  Pré-visualização —{" "}
                  <span className="text-primary">
                    {belenusCsvRows.length} kits
                  </span>
                </span>
                <button
                  onClick={() => {
                    setBelenusCsvRows([]);
                    setBelenusCsvFileName(null);
                    if (inputBelenusCsvRef.current)
                      inputBelenusCsvRef.current.value = "";
                  }}
                  className="text-xs text-red-500 hover:underline"
                >
                  Limpar
                </button>
              </div>

              <div className="overflow-x-auto rounded-lg border border-gray-200 max-h-64">
                <table className="min-w-full text-xs text-left">
                  <thead className="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 uppercase sticky top-0">
                    <tr>
                      <th className="px-3 py-2 whitespace-nowrap">kWp</th>
                      <th className="px-3 py-2 whitespace-nowrap">
                        Geração (kWh/mês)
                      </th>
                      <th className="px-3 py-2 whitespace-nowrap">Estrutura</th>
                      <th className="px-3 py-2 whitespace-nowrap">
                        Painel (W)
                      </th>
                      <th className="px-3 py-2 whitespace-nowrap">Qtd.</th>
                      <th className="px-3 py-2 whitespace-nowrap">Inversor</th>
                      <th className="px-3 py-2 whitespace-nowrap">Garantia</th>
                      <th className="px-3 py-2 whitespace-nowrap">Total P/I</th>
                      <th className="px-3 py-2 whitespace-nowrap">Custo</th>
                      <th className="px-3 py-2 whitespace-nowrap">Venda</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
                    {belenusCsvRows.map((row, i) => (
                      <tr
                        key={i}
                        className="hover:bg-gray-50 dark:hover:bg-gray-800 dark:text-white"
                      >
                        <td className="px-3 py-1.5">{row.kwp}</td>
                        <td className="px-3 py-1.5">
                          {row.geracao_media_mes_kwh || "-"}
                        </td>
                        <td className="px-3 py-1.5">{row.estrutura || "-"}</td>
                        <td className="px-3 py-1.5">{row.painel_w || "-"}</td>
                        <td className="px-3 py-1.5">{row.qtd_painel || "-"}</td>
                        <td className="px-3 py-1.5">{row.inversor}</td>
                        <td className="px-3 py-1.5">{row.garantia || "-"}</td>
                        <td className="px-3 py-1.5">
                          {row.total_paineis_inv || "-"}
                        </td>
                        <td className="px-3 py-1.5 text-red-600 font-medium">
                          {fmtBRL(row.preco_custo)}
                        </td>
                        <td className="px-3 py-1.5 text-green-600 font-medium">
                          {fmtBRL(row.preco_venda)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div className="flex justify-end mt-4">
                <Button
                  onClick={handleBelenusCsvImport}
                  disabled={importingBelenus}
                  className="bg-primary text-sm px-6"
                >
                  {importingBelenus
                    ? "Importando..."
                    : `Confirmar importação (${belenusCsvRows.length} kits)`}
                </Button>
              </div>
            </div>
          )}
        </div>
      </ModalComponente>

      {/* Modal de Sincronização com Progresso */}
      {showSyncModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex flex-col justify-center items-center z-50 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 shadow-2xl w-96 max-w-full mx-4 border border-gray-100">
            {/* Header */}
            <div className="flex flex-col items-center mb-8">
              <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-50 to-blue-100 rounded-full mb-4">
                <svg
                  className="w-12 h-12 animate-spin text-blue-600"
                  fill="none"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                  />
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  />
                </svg>
              </div>

              <h2 className="text-2xl font-bold text-gray-800 text-center mb-2">
                Sincronizando...
              </h2>
              <p className="text-sm text-gray-500">
                Podendo demorar alguns minutos
              </p>
            </div>

            {/* Barra de Progresso */}
            <div className="mb-6">
              <div className="bg-gray-100 rounded-full h-3 overflow-hidden shadow-inner">
                <div
                  className="bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 h-full transition-all duration-500 ease-out rounded-full shadow-lg"
                  style={{ width: `${syncProgressPercent}%` }}
                />
              </div>

              {/* Percentual */}
              <div className="flex items-center justify-between mt-4">
                <span className="text-sm font-medium text-gray-600">
                  Progresso
                </span>
                <span className="text-lg font-bold text-blue-600">
                  {Math.round(syncProgressPercent)}%
                </span>
              </div>
            </div>

            {/* Steps do LoaderBar */}
            <div className="mb-6">
              <div className="flex flex-col items-center">
                <p className="text-center text-gray-700 font-medium min-h-[1.5rem]">
                  {syncSteps[syncStep] || "Finalizando..."}
                </p>
              </div>
            </div>

            {/* Dica */}
            <div className="mt-6 flex items-start gap-2 text-xs text-gray-500">
              <div className="mt-1">
                <svg
                  className="w-4 h-4 text-blue-500"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <p>Não feche esta janela até a sincronização ser concluída</p>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default DistribuidoresNativosCfg;