import Container from "@/components/Forms/Container";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import { editarTarifaEnergia } from "@/requests/CRUD/TarifaEnergia/editarTarifaEnergia";
import { listarTarifasEnergia } from "@/requests/CRUD/TarifaEnergia/listarTarifasEnergia";
import { FormatFields, GetForm } from "@/utils";
import { RotateCcwIcon } from "lucide-react";
import FormTarifaEnergia from "../CXESCAD022/FormTarifaEnergia";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import Input from "@/components/Forms/Input";
import { useEffect, useState } from "react";
import * as yup from "yup"
import { alterarConcessionaria, listarConcessionarias } from "@/requests/CRUD/Concessionaria/listarConcessionarias";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { getPercentualFioB } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import Swal from "sweetalert2";
import katex from "katex";
import "katex/dist/katex.min.css";

const ConsultaTarifaEnergia = ({
  concessionaria,
  updateTarifas,
}: {
  concessionaria?: any;
  updateTarifas(data?: any): any;
}) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const ultimaAtualizacao = ""
  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const [percentualFioB, setPercentualFioB] = useState<any[]>([]);
  const [primeiraTarifa, setPrimeiraTarifa] = useState<any>(null);

  useEffect(() => {
    getPercentualFioB().then((res) => setPercentualFioB(res));
  }, []);

  const renderKatex = (latex: string) => {
    try {
      return katex.renderToString(latex, {
        throwOnError: false,
        displayMode: true,
      });
    } catch {
      return latex;
    }
  };

  const formatBRL = (valor: number) => {
    if (valor == null || isNaN(valor)) return "-";
    return valor.toLocaleString("pt-BR", {
      minimumFractionDigits: 7,
      maximumFractionDigits: 7,
    });
  };

  /**
   * IMPORTANTE:
   * O backend (atualizarTarifasAneel) já calcula e grava no banco:
   *   - fiob_tarifa          -> Fio B JÁ COM o %FioB aplicado (não é valor cru)
   *   - preco_fixo_tarifa    -> Tarifa Base pronta: TE + TUSD - FioB_Aplicado
   *   - preco_aplicacao_tarifa -> Tarifa de Aplicação pronta: TarifaBase / [(1-ICMS)*(1-PISCOFINS)]
   *
   * O front NÃO deve recalcular esses valores (fazia isso antes e aplicava
   * o %FioB DUAS vezes, gerando Tarifa Base e Tarifa de Aplicação erradas).
   * Este helper só extrai os componentes de uma linha específica para
   * exibir no popup "i" — sem alterar nada, sem reaplicar %FioB.
   */
  const getValoresLinha = (linha: any) => {
    const teTarifa = Number(FormatFields.desformatarNumeros(linha?.te_tarifa));
    const tusdTarifa = Number(FormatFields.desformatarNumeros(linha?.tusd_tarifa));
    // fiob_tarifa já vem do banco com o %FioB aplicado
    const fiobAplicado = Number(FormatFields.desformatarNumeros(linha?.fiob_tarifa));
    // valor gravado no banco, exibido "as is" (fonte da verdade)
    const precoFixo = Number(FormatFields.desformatarNumeros(linha?.preco_fixo_tarifa));
    const precoAplicacao = Number(FormatFields.desformatarNumeros(linha?.preco_aplicacao_tarifa));

    const icms = Number(dadosConcessionaria?.icms_concessionaria) / 100;
    const pisCofins = Number(dadosConcessionaria?.piscofins_concessionaria) / 100;
    const divisor = (1 - icms) * (1 - pisCofins);

    // % de referência (ano vigente) apenas para fins explicativos no popup.
    // Não é usado para recalcular nada, só para contextualizar o valor de
    // fiob_tarifa que já veio pronto do banco.
    const percentualFioBReferencia = Number(
      percentualFioB[0]?.valor_percentual_fiob
    ) / 100;

    return {
      teTarifa,
      tusdTarifa,
      fiobAplicado,
      precoFixo,
      precoAplicacao,
      icms,
      pisCofins,
      divisor,
      percentualFioBReferencia,
    };
  };

  const handleInfoTarifaBase = (rowData: any) => (e: any) => {
    e.stopPropagation();
    const { teTarifa, tusdTarifa, fiobAplicado, precoFixo, percentualFioBReferencia } =
      getValoresLinha(rowData);

    const formulaGeral = renderKatex(
      "TarifaBase = TE + TUSD - FioB_{Aplicado}"
    );
    const formulaSubstituida = renderKatex(
      `TarifaBase = ${formatBRL(teTarifa)} + ${formatBRL(tusdTarifa)} - ${formatBRL(
        fiobAplicado
      )} = R\\$\\ ${formatBRL(precoFixo)}`
    );

    Swal.fire({
      title: "Cálculo da Tarifa Base",
      html: `
        <div style="text-align:left; font-size:14px;">
          <p><b>Fórmula:</b></p>
          <div style="margin-bottom:12px;">${formulaGeral}</div>
          <p><b>Valores utilizados (desta tarifa):</b></p>
          <ul style="padding-left:18px; margin-bottom:12px;">
            <li>TE: R$ ${formatBRL(teTarifa)}</li>
            <li>TUSD: R$ ${formatBRL(tusdTarifa)}</li>
            <li>Fio B já aplicado: R$ ${formatBRL(fiobAplicado)}</li>
          </ul>
          <p><b>Substituindo os valores:</b></p>
          <div style="margin-bottom:12px; overflow-x:auto;">${formulaSubstituida}</div>
          <p style="font-size:12px; color:#666;">
            O valor de Fio B já vem gravado com o percentual de faseamento
            (Lei 14.300) aplicado${!isNaN(percentualFioBReferencia)
          ? ` — percentual de referência para o ano vigente: ${(percentualFioBReferencia * 100).toFixed(2)}%`
          : ""
        }. TE, TUSD e Fio B são os valores tarifários vigentes gravados para este registro.
          </p>
        </div>
      `,
      icon: "info",
      confirmButtonText: "Fechar",
      width: 600,
    });
  };

  const handleInfoTarifaAplicacao = (rowData: any) => (e: any) => {
    e.stopPropagation();
    const { precoFixo, precoAplicacao, icms, pisCofins, divisor } =
      getValoresLinha(rowData);

    const formulaGeral = renderKatex(
      "TarifaAplicacao = \\dfrac{TarifaBase}{(1 - ICMS) \\times (1 - PISCOFINS)}"
    );
    const formulaSubstituida = renderKatex(
      `TarifaAplicacao = \\dfrac{${formatBRL(precoFixo)}}{(1 - ${isNaN(icms) ? "-" : icms.toFixed(4)
      }) \\times (1 - ${isNaN(pisCofins) ? "-" : pisCofins.toFixed(4)})} = R\\$\\ ${formatBRL(
        precoAplicacao
      )}`
    );

    Swal.fire({
      title: "Cálculo da Tarifa de Aplicação",
      html: `
        <div style="text-align:left; font-size:14px;">
          <p><b>Fórmula:</b></p>
          <div style="margin-bottom:12px;">${formulaGeral}</div>
          <p><b>Valores utilizados:</b></p>
          <ul style="padding-left:18px; margin-bottom:12px;">
            <li>Tarifa Base (TE + TUSD − Fio B Aplicado): R$ ${formatBRL(precoFixo)}</li>
            <li>ICMS: ${isNaN(icms) ? "-" : (icms * 100).toFixed(2)}%</li>
            <li>PIS/COFINS: ${isNaN(pisCofins) ? "-" : (pisCofins * 100).toFixed(2)}%</li>
            <li>Divisor [(1 − ICMS) × (1 − PIS/COFINS)]: ${isNaN(divisor) ? "-" : divisor.toFixed(7)
        }</li>
          </ul>
          <p><b>Substituindo os valores:</b></p>
          <div style="margin-bottom:12px; overflow-x:auto;">${formulaSubstituida}</div>
          <p style="font-size:12px; color:#666;">ICMS e PIS/COFINS são os percentuais configurados na concessionária.</p>
        </div>
      `,
      icon: "info",
      confirmButtonText: "Fechar",
      width: 600,
    });
  };

  const columns = [
    {
      header: "Código",
      accessorKey: "id_tarifa",
    },
    {
      header: "Concessionária de Energia",
      accessorKey: "nome_concessionaria",
    },
    {
      header: "Grupo",
      accessorKey: "grupo_tarifa",
    },
    {
      header: "Subgrupo",
      accessorKey: "subgrupo_tarifa",
    },
    {
      header: "Classificação",
      accessorKey: "nome_classificacao",
    },
    {
      header: "Fio B R$/kWh",
      accessorKey: "fiob_tarifa",
    },
    {
      header: "Tarifa TE R$/kWh",
      accessorKey: "te_tarifa",
    },
    {
      header: "TUSD R$/kWh",
      accessorKey: "tusd_tarifa",
    },

    {
      // header: "Tarifa Base",
      accessorKey: "preco_fixo_tarifa",
      // célula por linha: cada registro mostra e explica o SEU próprio valor
      header: (
        <span className="flex items-center gap-1">
          Tarifa Base
          <Tooltip title="Ver detalhamento do cálculo">
            <button
              type="button"
              className="hover:text-primary cursor-pointer p-1 rounded"
              onClick={handleInfoTarifaBase(primeiraTarifa)}
            >
              <Info size={16} />
            </button>
          </Tooltip>
        </span>
      ),
    },
    {
      accessorKey: "preco_aplicacao_tarifa",
      header: (
        <span className="flex items-center gap-1">
          Tarifa de Aplicação
          <Tooltip title="Ver detalhamento do cálculo">
            <button
              type="button"
              className="hover:text-primary cursor-pointer p-1 rounded"
              onClick={handleInfoTarifaAplicacao(primeiraTarifa)}
              disabled={!primeiraTarifa}
            >
              <Info size={16} />
            </button>
          </Tooltip>
        </span>
      ),
    },
    {
      header: "Status Tarifa",
      accessorKey: "status_tarifa",
    },
  ];

  const [dadosConcessionaria, setDadosConcessionaria] = useState<any>({});
  const [usuarios, setUsuarios] = useState<any>([]);
  useEffect(() => {
    listarConcessionarias().then((res) => {
      setDadosConcessionaria(
        res.find(
          (r: any) => r.id_concessionaria === concessionaria.id_concessionaria
        )
      );
    });
    listarUsuarios().then(setUsuarios);
  }, []);

  useEffect(() => {
    if (!dadosConcessionaria) return;
    form.setValue(
      "qtd_aviso_concessionaria",
      dadosConcessionaria.qtd_aviso_concessionaria
    );
  }, [dadosConcessionaria]);

  const atualizarConcessionaria = async (dados: any) => {
    alterarConcessionaria({
      ...dados,
      id_concessionaria: concessionaria.id_concessionaria,
    });
  };

  /**
   * Apenas formata os números para exibição (padrão BR com casas decimais).
   * NÃO recalcula preco_fixo_tarifa/preco_aplicacao_tarifa — esses valores
   * já vêm prontos do banco (gravados pelo backend em atualizarTarifasAneel).
   * Recalcular aqui reaplicava o %FioB uma segunda vez e distorcia os valores.
   */
  async function formatarListaTarifasEnergia(arr: any) {
    return arr.map((e: any) => {
      for (let chave in e) {
        if (
          +e[chave] == +e[chave] &&
          !["id_tarifa", "concessionaria_tarifa"].includes(chave) &&
          e[chave] != null &&
          e[chave] !== ""
        )
          e[chave] = FormatFields.formatarNumeroPreciso(e[chave]);
      }
      return e;
    });
  }

  const [dadosTarifa, setDadosTarifa] = useState<any>();

  const listaTarifasEnergia = async () => {
    try {
      const tarifas = await listarTarifasEnergia();

      const tarifasFiltradas = tarifas.filter(
        (tarifa: any) =>
          tarifa.concessionaria_tarifa == concessionaria.id_concessionaria
      );

      setPrimeiraTarifa(tarifasFiltradas[0] ?? null);
      setDadosTarifa(tarifasFiltradas[0]);

      return tarifasFiltradas;
    } catch (error) {
      console.error(error);
      return [];
    }
  };

  const sendEditTarifasEnergia = async (data: any) => {
    delete data.nome_concessionaria;
    delete data.nome_classificacao;
    if (data["grupo_tarifa"] == "A") {
      data["fiob_tarifa"] = "";
      data["preco_fixo_tarifa"] = "";
    }

    return editarTarifaEnergia(data);
  };

  function getUsuarioById(id: string) {
    if (usuarios.length === 0) return;
    return usuarios.find((u: any) => u.id_usuario == id)?.nome_usuario;
  }

  const dataFormatada = dadosTarifa?.datetime_tarifa
    ? new Intl.DateTimeFormat("pt-BR", {
      dateStyle: "short",
      timeStyle: "medium",
    }).format(new Date(dadosTarifa.datetime_tarifa))
    : "-";

  function formatarDataBR(data: any) {
    if (!data) return "??/??/????";
    const d = new Date(data);
    if (isNaN(d.getTime())) return "??/??/????";
    return d.toLocaleDateString("pt-BR");
  }

  return (
    <Container>
      <InputGroup>
        <InputSelectComponent
          label="Avisar sobre a última Atualização da Concessionária?"
          formulario={form}
          name="aviso_atualizacao_concessionaria"
          options={[
            { label: "Sim", value: "1" },
            { label: "Não", value: "0" },
          ]}
          defaultValue={dadosConcessionaria?.aviso_atualizacao_concessionaria}
          onChange={(e: any) =>
            atualizarConcessionaria({
              aviso_atualizacao_concessionaria: e.value,
            })
          }
        />

        <div className="flex text-black flex-col w-full">
          <span>Período de Vigência</span>
          <span>
            {formatarDataBR(
              dadosConcessionaria?.dataInicioVigencia_concessionaria
            )}{" "}
            até{" "}
            {formatarDataBR(
              dadosConcessionaria?.dataFimVigencia_concessionaria
            )}
          </span>
        </div>
        <div className="flex text-black flex-col w-full">
          <span>Data e Hora Ultima Atualização</span>
          <span>{dataFormatada}</span>
        </div>
        <div className="flex text-black flex-col w-full">
          <span>Usuário que Atualizou</span>
          <span>
            {getUsuarioById(dadosTarifa?.usuario_atualizacao_tarifa) ?? "-"}
          </span>
        </div>
      </InputGroup>
      <ReactTable
        columns={columns as any}
        listFunction={listaTarifasEnergia}
        formatFunction={formatarListaTarifasEnergia}
        idCol="id_tarifa"
        isActiveCol="status_tarifa"
        canEdit
        canDesactive
        editFunction={sendEditTarifasEnergia}
        Form={FormTarifaEnergia}
        pageName="Tarifa Energia"
      />
    </Container>
  );
};

export default ConsultaTarifaEnergia;