import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import {
  getPercentualFioB,
  listarClassificacoes,
} from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarConcessionarias } from "@/requests/CRUD/Concessionaria/listarConcessionarias";
import { listarEstados } from "@/requests/common/EstadosCidades/estadosCidades";
import { IValueLabel } from "@/types/formInterfaces";
import { FormatFields, GetForm, valueLabel } from "@/utils";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";
import * as yup from "yup";
import Swal from "sweetalert2";
import katex from "katex";
import "katex/dist/katex.min.css";

const FormTarifaEnergia = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  ...rest
}: any) => {
  const [teTarifa, setTeTarifa] = useState(defaultValues["te_tarifa"] || 0);
  const [tusdTarifa, setTusdTarifa] = useState(
    defaultValues["tusd_tarifa"] || 0
  );
  // fiob_tarifa é o valor JÁ COM o %FioB aplicado (é assim que o backend
  // grava e é assim que este campo é editado aqui). NÃO multiplicar de novo
  // por percentualFioB — isso era o bug que zerava/distorcia a Tarifa Base.
  const [fioBTarifa, setFioBTarifa] = useState(
    defaultValues["fiob_tarifa"] || 0
  );
  const [showTarifas, setShowTarifas] = useState(
    defaultValues["grupo_tarifa"] != "A"
  );
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [dadosFaturas, setDadosFaturas] = useState<IValueLabel[]>([]);
  const [dadosEstado, setDadosEstado] = useState<any[]>([]);
  const [concessionaria, setConcessionaria] = useState<any[]>([]);
  const [percentualFioB, setPercentualFioB] = useState<any[]>([]);

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);

  useEffect(() => {
    listarEstados().then((arr) => setDadosEstado(arr));
    // percentualFioB é usado só como referência informativa no popup "i"
    // (ano vigente). Não é mais usado em nenhum cálculo, pois fiob_tarifa
    // já vem/é editado com o percentual aplicado.
    getPercentualFioB().then((res) => setPercentualFioB(res));
    const buscarcarClassificacao = async () => {
      listarClassificacoes().then((res) => {
        setDadosFaturas(
          valueLabel(res, "nome_classificacao", "id_classificacao")
        );
      });
    };
    buscarcarClassificacao();
  }, []);

  useEffect(() => {
    listarConcessionarias().then((data) => {
      setConcessionaria(data);
    });
  }, []);

  const arrayGrupo: IValueLabel[] = [
    // { value: "A", label: "A" },
    { value: "B", label: "B" },
  ];

  const getConcessionariaSelecionada = () =>
    concessionaria.find(
      (res) => res.id_concessionaria == defaultValues["concessionaria_tarifa"]
    );

  /**
   * Única fonte de cálculo do formulário: TarifaBase = TE + TUSD - FioB
   * (FioB já vem com o %FioB aplicado, não multiplicar de novo)
   * TarifaAplicacao = TarifaBase / [(1-ICMS)*(1-PISCOFINS)]
   *
   * Usado tanto para preencher ao vivo os campos desabilitados
   * (preco_fixo_tarifa / preco_aplicacao_tarifa) quanto para os popups "i".
   */
  const getValoresCalculados = () => {
    const teDesformatado = Number(FormatFields.desformatarNumeros(teTarifa));
    const tusdDesformatado = Number(
      FormatFields.desformatarNumeros(tusdTarifa)
    );
    const fioBAplicado = Number(
      FormatFields.desformatarNumeros(fioBTarifa)
    );

    const precoFixo = teDesformatado + tusdDesformatado - fioBAplicado;

    const concessionariaSelecionada = getConcessionariaSelecionada();
    const icms =
      Number(concessionariaSelecionada?.icms_concessionaria) / 100;
    const pisCofins =
      Number(concessionariaSelecionada?.piscofins_concessionaria) / 100;
    const divisor = (1 - icms) * (1 - pisCofins);
    const precoAplicacao = divisor != 0 ? precoFixo / divisor : NaN;

    const percentualFioBReferencia = Number(
      percentualFioB[0]?.valor_percentual_fiob
    ) / 100;

    return {
      teDesformatado,
      tusdDesformatado,
      fioBAplicado,
      precoFixo,
      icms,
      pisCofins,
      divisor,
      precoAplicacao,
      percentualFioBReferencia,
    };
  };

  // Atualiza ao vivo os campos desabilitados de Tarifa Base / Tarifa de
  // Aplicação conforme o usuário edita TE, TUSD ou Fio B — para que o valor
  // exibido (e enviado ao salvar) já reflita a fórmula correta, já que o
  // backend (editarTarifaEnergia) NÃO recalcula nada no servidor: ele grava
  // exatamente o que vier do front.


  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,
    });
  };

  const handleInfoTarifaBase = () => {
    const {
      teDesformatado,
      tusdDesformatado,
      fioBAplicado,
      precoFixo,
      percentualFioBReferencia,
    } = getValoresCalculados();

    const formulaGeral = renderKatex(
      "TarifaBase = TE + TUSD - FioB_{Aplicado}"
    );
    const formulaSubstituida = renderKatex(
      `TarifaBase = ${formatBRL(teDesformatado)} + ${formatBRL(
        tusdDesformatado
      )} - ${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:</b></p>
          <ul style="padding-left:18px; margin-bottom:12px;">
            <li>TE: R$ ${formatBRL(teDesformatado)}</li>
            <li>TUSD: R$ ${formatBRL(tusdDesformatado)}</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 campo Fio B (R$) já deve ser preenchido com o percentual de
            faseamento (Lei 14.300) aplicado${!isNaN(percentualFioBReferencia)
          ? ` — percentual de referência para o ano vigente: ${(percentualFioBReferencia * 100).toFixed(2)}%`
          : ""
        }.
          </p>
        </div>
      `,
      icon: "info",
      confirmButtonText: "Fechar",
      width: 600,
    });
  };

  const handleInfoTarifaAplicacao = () => {
    const { precoFixo, icms, pisCofins, divisor, precoAplicacao } =
      getValoresCalculados();

    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,
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
      <InputGroup align="center">
        <Input
          type="hidden"
          width="w-0"
          name="id_tarifa"
          formulario={form}
          defaultValue={defaultValues && defaultValues["id_tarifa"]}
        />
        <InputSelectComponent
          label="Concessionária"
          name="concessionaria_tarifa"
          formulario={form}
          options={concessionaria.map((res: any) => ({
            label: `${res.nome_concessionaria}`,
            value: `${res.id_concessionaria}`,
          }))}
          error="Preencha a UF"
          required
          defaultValue={defaultValues && defaultValues["concessionaria_tarifa"]}
          disabled
          skipEffect
        />
        <InputSelectComponent
          label="Classificação"
          name="classificacao_tarifa"
          formulario={form}
          options={dadosFaturas}
          error="Selecione uma Classificação"
          required
          defaultValue={defaultValues && defaultValues["classificacao_tarifa"]}
          disabled
        />
        <InputSelectComponent
          label="Grupo"
          name="grupo_tarifa"
          formulario={form}
          options={arrayGrupo}
          error="Selecione um Grupo"
          required
          onChange={(selectedGrupo: any) =>
            setShowTarifas(selectedGrupo.value != "A")
          }
          defaultValue={defaultValues && defaultValues["grupo_tarifa"]}
          disabled
        />
        <InputSelectComponent
          label="Subgrupo"
          name="subgrupo_tarifa"
          formulario={form}
          error="Preencha o SubGrupo"
          required
          options={[
            { label: "B1", value: "B1" },
            { label: "B2", value: "B2" },
            { label: "B3", value: "B3" },
            { label: "B4", value: "B4" },
          ]}
          defaultValue={defaultValues && defaultValues["subgrupo_tarifa"]}
          disabled
          skipEffect
        />
      </InputGroup>
      <InputGroup>
        <Input
          onChange={(e) => setFioBTarifa(e.target.value)}
          label="Fio B (R$)"
          prefix="R$"
          name="fiob_tarifa"
          formulario={form}
          mascara="numeroPreciso"
          error="Preencha o Fio B"
          defaultValue={defaultValues && defaultValues["fiob_tarifa"]}
          disabled={disabledFields?.some(
            (field: string) => field == "fiob_tarifa"
          )}
        />
        <Input
          onChange={(e) => setTeTarifa(e.target.value)}
          label="TE (R$)"
          prefix="R$"
          name="te_tarifa"
          formulario={form}
          mascara="numeroPreciso"
          error="Preencha o TE"
          defaultValue={defaultValues && defaultValues["te_tarifa"]}
          disabled={disabledFields?.some(
            (field: string) => field == "te_tarifa"
          )}
        />
        <Input
          onChange={(e) => setTusdTarifa(e.target.value)}
          label="TUSD (R$)"
          prefix="R$"
          name="tusd_tarifa"
          formulario={form}
          mascara="numeroPreciso"
          error="Preencha o TUSD"
          defaultValue={defaultValues && defaultValues["tusd_tarifa"]}
          disabled={disabledFields?.some(
            (field: string) => field == "tusd_tarifa"
          )}
        />
        <Input
          label={
            <span className="flex items-center gap-1">
              Tarifa Base (R$)
              <Tooltip title="Ver detalhamento do cálculo">
                <button
                  type="button"
                  className="hover:text-primary cursor-pointer p-1 rounded"
                  onClick={handleInfoTarifaBase}
                >
                  <Info size={16} />
                </button>
              </Tooltip>
            </span>
          }
          prefix="R$"
          name="preco_fixo_tarifa"
          formulario={form}
          mascara="numeroPreciso"
          error="Preencha o Preço da Tarifa"
          defaultValue={defaultValues && defaultValues["preco_fixo_tarifa"]}
          disabled
        />
        <Input
          label={
            <span className="flex items-center gap-1">
              Tarifa de Aplicação (R$)
              <Tooltip title="Ver detalhamento do cálculo">
                <button
                  type="button"
                  className="hover:text-primary cursor-pointer p-1 rounded"
                  onClick={handleInfoTarifaAplicacao}
                >
                  <Info size={16} />
                </button>
              </Tooltip>
            </span>
          }
          prefix="R$"
          name="preco_aplicacao_tarifa"
          formulario={form}
          mascara="numeroPreciso"
          error="Preencha a Tarifa de Aplicação"
          defaultValue={
            defaultValues && defaultValues["preco_aplicacao_tarifa"]
          }
          disabled
        />
      </InputGroup>
      {children}
    </form>
  );
};

export default FormTarifaEnergia;