import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  ConcessionariaResponse,
  RelatorioResponse,
} from "../../../types/interface";
import { useEffect } from "react";
import { RiAlertFill } from "react-icons/ri";
import Swal from "sweetalert2";
import { InfoIcon } from "lucide-react";
import Button from "@/components/Forms/Button";
import katex from "katex";
import "katex/dist/katex.min.css";
interface IRelatorioProps {
  dadosSincronizacao: RelatorioResponse;
}

const RelatorioSincronizacao = ({ dadosSincronizacao }: IRelatorioProps) => {
  const sucesso = dadosSincronizacao.arrayRelatorio.filter(
    (dado) => dado.status === "sucesso"
  );
  const erro = dadosSincronizacao.arrayRelatorio.filter(
    (dado) => dado.status !== "sucesso"
  );

  return (
    <div>
      <span className="text-center justify-center flex mb-7 text-black font-semibold">
        Relatório de Sincronização:
      </span>
      <span className="text-center justify-center flex mb-7 text-sky-600 font-semibold">
        Usuário: {dadosSincronizacao?.usuarioResponsavel}
      </span>
      <span className="text-center justify-center flex mb-7 text-black font-semibold">
        {new Date(dadosSincronizacao.dataConcluida).toLocaleString()}
      </span>
      {erro.length > 0 && (
        <div className=" mb-5 w-full flex border items-center  bg-[#ee706b] bg-opacity-25  gap-2 px-4 p-2 rounded-md border-[#ec3922] shadow-sm">
          <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
            <RiAlertFill size={20} color="#ec3922" />
          </div>
          <div className="grid gap-2">
            <span className=" text-black text-md">
              ATENÇÃO! Existem Concessionárias que não foram atualizadas, devido
              erro na API da ANNEL, estas deverão ser verificadas e atualizadas
              manualmente.
            </span>
          </div>
        </div>
      )}
      <Tabs defaultValue="sucesso" className="">
        <TabsList className="flex w-full gap-5">
          <TabsTrigger
            className="!rounded-none w-45  !shadow-none"
            value="sucesso"
          >
            Sincronização com Sucesso{" "}
            <span className=" text-green-600 pl-1">({sucesso.length})</span>
          </TabsTrigger>
          <TabsTrigger value="erro" className="!rounded-none w-45 !shadow-none">
            Sincronização com Erro{" "}
            <span className=" text-red-600 pl-1">({erro.length})</span>
          </TabsTrigger>
        </TabsList>

        {/* TABELAS DE SUCESSO */}
        <TabsContent value="sucesso" className="mt-6 space-y-8">
          {sucesso.length === 0 ? (
            <p className="text-gray-500">Nenhuma sincronização com sucesso.</p>
          ) : (
            sucesso.map((concessionaria, indexPai: number) => (
              <div
                key={concessionaria.id_concessionaria}
                className="border rounded-xl text-black p-4 shadow-sm"
              >
                <h3 className="text-lg font-semibold mb-3">
                  {concessionaria.nome}
                </h3>

                <table className="w-full  border-collapse text-sm">
                  <thead>
                    <tr className="bg-gray-100 text-left">
                      <th className="p-2 border">Subgrupo</th>
                      <th className="p-2 border">Classe</th>
                      <th className="p-2 border">TE</th>
                      <th className="p-2 border">TUSD</th>
                      <th className="p-2 border">FIOB Aplicado</th>
                      <th className="p-2 border">Preço Fixo</th>
                      <th className="p-2 border">Tarifa de Aplicação</th>
                      {/* <th className="p-2 border">Vigência Início</th> */}
                      {/* <th className="p-2 border">Vigência Fim</th> */}
                      <th className="p-2 border">Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {concessionaria.detalhes.subgrupos.map((sub, i) => (
                      <tr key={i} className="border-t hover:bg-gray-50">
                        <td className="p-2 border">{sub.subgrupo}</td>
                        <td className="p-2 border">{sub.classe}</td>
                        <td className="p-2 border">{sub.te.toFixed(3)}</td>
                        <td className="p-2 border">{sub.tusd.toFixed(3)}</td>
                        <td className="p-2 border">
                          {sub.fiob_aplicado.toFixed(4)}
                        </td>
                        <td className="p-2 border">
                          {sub.preco_fixo.toFixed(4)}
                        </td>
                        <td className="p-2 border flex items-center gap-2">
                          {sub.preco_aplicacao.toFixed(4)}

                          <Button
                            className="bg-transparent text-blue-600 p-0 hover:text-blue-800"
                            type="button"
                            onClick={(e: any) => {
                              e.stopPropagation();

                              const valorFioBBase = sub?.fiob_base ?? 0;
                              // const percentualFiob =
                              //   concessionaria.detalhes.percentual_fiob ?? 0;
                              // const VlrTE = sub.te;
                              // const VlrTUSD = sub.tusd;
                              // const icms = concessionaria.detalhes.icms ?? 0;
                              // const pisCofins =
                              //   concessionaria.detalhes.piscofins ?? 0;
                              const fiobAplicado = sub.fiob_aplicado; // usa o valor real, não recalcula
                              const percentualFiob = concessionaria.detalhes.percentual_fiob ?? 0;
                              const VlrTE = sub.te;
                              const VlrTUSD = sub.tusd;
                              const icms = concessionaria.detalhes.icms ?? 0;
                              const pisCofins = concessionaria.detalhes.piscofins ?? 0;

                              const calc = VlrTE + VlrTUSD - fiobAplicado;
                              const divisor = (1 - icms / 100) * (1 - pisCofins / 100);
                              const precoAplicacaoTarifas = divisor !== 0 ? calc / divisor : null;
                              // const fiobAplicado = sub.fiob_aplicado;
                              // const calc = VlrTE + VlrTUSD - fiobAplicado;
                              // const divisor =
                              //   (1 - icms / 100) * (1 - pisCofins / 100);
                              // const precoAplicacaoTarifas =
                              //   divisor !== 0 ? calc / divisor : null;

                              const formulasHtml = `
      <div style="display: flex; flex-direction: column; align-items: center; gap: 16px;">

        <div style="text-align:center;">
          ${katex.renderToString(
                                `${valorFioBBase.toFixed(3)} \\times ${percentualFiob.toFixed(2)} = ${fiobAplicado.toFixed(4)}`,
                                { throwOnError: false }
                              )}
          <div style="font-size:0.75rem; color:gray;">Tarifa Fio B Base × Percentual Fio B</div>
        </div>

        <div style="text-align:center;">
          ${katex.renderToString(
                                `(${VlrTE.toFixed(4)} + ${VlrTUSD.toFixed(4)} - ${fiobAplicado.toFixed(4)}) = ${calc.toFixed(4)}`,
                                { throwOnError: false }
                              )
                                }
          <div style="font-size:0.75rem; color:gray;">VlrTE + VlrTUSD − Fio B Aplicado</div>
        </div>

        <div style="text-align:center;">
          ${katex.renderToString(
                                  `(1 - \\frac{${icms}}{100}) \\times (1 - \\frac{${pisCofins}}{100}) = ${divisor.toFixed(6)}`,
                                  { throwOnError: false }
                                )}
          <div style="font-size:0.75rem; color:gray;">Remoção dos tributos ICMS e PIS/COFINS</div>
        </div>

        <div style="text-align:center;">
          ${katex.renderToString(
                                  `\\frac{${calc.toFixed(4)}}{${divisor.toFixed(6)}} = ${precoAplicacaoTarifas?.toFixed(4) ?? "Indefinido"}`,
                                  { throwOnError: false }
                                )}
          <div style="font-size:0.75rem; color:gray;">Cálculo Base ÷ Divisor = Tarifa de Aplicação</div>
        </div>

      </div>
    `;

                              Swal.fire({
                                icon: "info",
                                title: "Cálculo da Tarifa de Aplicação",
                                showConfirmButton: false,
                                html: `
        <div style="font-size: 1.1rem; padding: 10px;">
          ${formulasHtml}
        </div>
      `,
                                width: 600,
                              });
                            }}
                          >
                            <InfoIcon size={18} />
                          </Button>
                        </td>

                        {/* <td className="p-2 border">{sub.vigencia_inicio}</td> */}
                        {/* <td className="p-2 border">{sub.vigencia_fim}</td> */}
                        <td className="p-2 border font-semibold uppercase text-green-600 ">
                          {sub.status}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ))
          )}
        </TabsContent>

        {/* TABELAS DE ERRO */}
        <TabsContent value="erro" className="mt-6 space-y-8">
          {erro.length === 0 ? (
            <p className="text-gray-500">Nenhuma sincronização com erro.</p>
          ) : (
            erro.map((concessionaria) => (
              <div
                key={concessionaria.id_concessionaria}
                className="border rounded-xl text-black p-4 shadow-sm"
              >
                <h3 className="text-lg font-semibold mb-3 text-red-600">
                  {concessionaria.nome}
                </h3>
                {concessionaria.mensagens.length > 0 ? (
                  <ul className="list-disc list-inside text-sm text-gray-700">
                    {concessionaria.mensagens.map((msg, i) => (
                      <li key={i}>{msg}</li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-gray-500 text-sm">
                    Nenhuma mensagem de erro disponível.
                  </p>
                )}
              </div>
            ))
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default RelatorioSincronizacao;