"use client";

import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import { Button } from "@/components/ui/button";
import { DollarSign, InfoIcon, TreePine, Zap } from "lucide-react";
import { useMemo, useState } from "react";
import Swal from "sweetalert2";

const showFormula = ({ title, lines }: { title?: string; lines: string[] }) => {
  Swal.fire({
    icon: "info",
    title,
    showConfirmButton: false,
    width: 800,
    html: `
      <div style="padding: 20px; text-align: left;">
        <div style="display: grid; gap: 10px; font-size: 1rem; color: #374151;">
          ${lines
            .map(
              (line) => `
                <div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; line-height: 1.5;">
                  ${line}
                </div>
              `
            )
            .join("")}
        </div>
      </div>
    `,
  });
};

const DEFAULT_ANOS = 25;
const DEFAULT_CUSTO_POR_ARVORE = 35;
const DEFAULT_ARVORES_POR_TONELADA = 3.33;
const EMISSAO_CO2_POR_KWH = 0.0509;
const CO2_REFERENCE_URL = "https://idesam.org/calculadora-de-co2/";

// Emission factors per region (override these values if you have official factors)
// Alternate factor used for Amazonas/Amapá/Roraima (when region != 'outros')
const ALTERNATE_EMISSION_FACTOR = 0.7598;

const REGION_EMISSION_FACTORS: Record<string, number> = {
  amazonas: ALTERNATE_EMISSION_FACTOR,
  amapa: ALTERNATE_EMISSION_FACTOR,
  roraima: ALTERNATE_EMISSION_FACTOR,
  outros: EMISSAO_CO2_POR_KWH,
};

const REGION_LABELS: Record<string, string> = {
  amazonas: "Amazonas (AM)",
  amapa: "Amapá (AP)",
  roraima: "Roraima (RR)",
  outros: "Outros Estados",
};

const parseDecimalValue = (value: any, fallback = 0) => {
  if (value === null || value === undefined || value === "") {
    return fallback;
  }

  if (typeof value === "number") {
    return Number.isFinite(value) ? value : fallback;
  }

  const normalized = String(value).trim().replace(/\./g, "").replace(",", ".");
  const parsed = Number(normalized);

  return Number.isFinite(parsed) ? parsed : fallback;
};

const CalculoCo2Tab = ({ defaultValues, form }: any) => {
  const [activeTab, setActiveTab] = useState<"resultado" | "configuracao">(
    "resultado"
  );

  const [regiao, setRegiao] = useState<string>(
    defaultValues?.regiao_co2_parametro ?? "outros"
  );

  const consumoMensal =
    form?.watch("consumo_mensal_co2_parametro") ??
    defaultValues?.consumo_mensal_co2_parametro ??
    "";
  const anos = parseDecimalValue(
    form?.watch("periodo_analise_co2_parametro") ??
      defaultValues?.periodo_analise_co2_parametro,
    DEFAULT_ANOS
  );
  const custoPorArvore = parseDecimalValue(
    form?.watch("valor_por_arvore_co2_parametro") ??
      defaultValues?.valor_por_arvore_co2_parametro,
    DEFAULT_CUSTO_POR_ARVORE
  );
  const arvoresPorTonelada = parseDecimalValue(
    form?.watch("arvores_por_tonelada_co2_parametro") ??
      defaultValues?.arvores_por_tonelada_co2_parametro,
    DEFAULT_ARVORES_POR_TONELADA
  );

  const calculos = useMemo(() => {
    if (!consumoMensal) {
      return {
        co2MensalToneladas: 0,
        co2AnualToneladas: 0,
        co2TotalToneladas: 0,
        totalArvores: 0,
        custoTotal: 0,
      };
    }

    const consumo = parseFloat(
      String(consumoMensal).replace(/\./g, "").replace(",", ".")
    );

    if (isNaN(consumo) || consumo <= 0) {
      return {
        co2MensalToneladas: 0,
        co2AnualToneladas: 0,
        co2TotalToneladas: 0,
        totalArvores: 0,
        custoTotal: 0,
      };
    }

    const emissionFactor =
      REGION_EMISSION_FACTORS[regiao] ?? EMISSAO_CO2_POR_KWH;
    const co2MensalToneladas = (consumo * emissionFactor) / 1000;
    const co2AnualToneladas = co2MensalToneladas * 12;
    const co2TotalToneladas = co2AnualToneladas * anos;
    const totalArvores = Math.ceil(co2TotalToneladas * arvoresPorTonelada);
    const custoTotal = totalArvores * custoPorArvore;

    return {
      co2MensalToneladas,
      co2AnualToneladas,
      co2TotalToneladas,
      totalArvores,
      custoTotal,
    };
  }, [consumoMensal, anos, custoPorArvore, arvoresPorTonelada, regiao]);

  const tabBaseClass =
    "rounded-full px-4 py-2 text-sm font-semibold transition-all duration-200";
  const tabActiveClass = "bg-green-600 text-white shadow-md";
  const tabInactiveClass =
    "bg-white text-gray-600 border border-gray-200 hover:bg-gray-50";

  const emissionFactorDisplay =
    REGION_EMISSION_FACTORS[regiao] ?? EMISSAO_CO2_POR_KWH;

  const consumoNumeric =
    parseFloat(String(consumoMensal).replace(/\./g, "").replace(",", ".")) || 0;

  const formatBRL = (value: number) =>
    new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(value);

  return (
    <div className="w-full p-6 space-y-8">
      <div className="text-center space-y-2 mb-4">
        <h2 className="text-3xl font-bold text-gray-800">
          Calculadora de Emissão CO₂
        </h2>
        <p className="text-gray-600">
          Descubra o impacto ambiental do seu consumo de energia e quantas
          árvores seriam necessárias para compensar.
        </p>
      </div>

      <div className="flex justify-center">
        <div className="inline-flex items-center gap-2 rounded-full bg-gray-100 p-1 shadow-sm">
          <button
            type="button"
            onClick={() => setActiveTab("resultado")}
            className={`${tabBaseClass} ${
              activeTab === "resultado" ? tabActiveClass : tabInactiveClass
            }`}
          >
            Calculadora
          </button>
          <button
            type="button"
            onClick={() => setActiveTab("configuracao")}
            className={`${tabBaseClass} ${
              activeTab === "configuracao" ? tabActiveClass : tabInactiveClass
            }`}
          >
            Referencias
          </button>
        </div>
      </div>

      {activeTab === "configuracao" && (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          <div className="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
            <div className="bg-gradient-to-r from-indigo-600 to-indigo-500 px-3 py-2 flex items-center gap-2">
              <Zap className="w-4 h-4 text-white" />
              <span className="text-sm font-semibold text-white">
                Fonte de Referência
              </span>
            </div>
            <div className="p-3 text-xs text-gray-700">
              <ul className="list-disc pl-5 space-y-1 text-blue-700 break-all">
                <li>{CO2_REFERENCE_URL}</li>
              </ul>
            </div>
          </div>

          <div className="bg-blue-50 rounded-lg shadow-sm border border-blue-100 p-3">
            <div className="flex items-start gap-2">
              <TreePine className="w-4 h-4 text-blue-600 mt-1" />
              <div>
                <h4 className="text-sm font-semibold text-blue-900">
                  Como funciona
                </h4>
                <p className="text-xs text-blue-800 mt-1">
                  Região: {REGION_LABELS[regiao] ?? "--"}
                </p>
                <p className="text-xs text-blue-800 mt-1">
                  • Consumo mensal × fator de emissão (
                  {REGION_EMISSION_FACTORS[regiao] ?? EMISSAO_CO2_POR_KWH}{" "}
                  ton/kWh)
                </p>
                <p className="text-xs text-blue-800">
                  • ton mensal × 12 meses × {anos} anos
                </p>
                <p className="text-xs text-blue-800">
                  • 1 tonelada de CO₂ = {arvoresPorTonelada.toFixed(2)} árvores
                </p>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-3">
            <div className="flex items-center gap-2">
              <DollarSign className="w-4 h-4 text-cyan-600" />
              <h4 className="text-sm font-semibold">Variáveis</h4>
            </div>
            <ul className="mt-2 text-xs text-gray-700 space-y-1">
              <li>Emissão por kWh (Outros): {EMISSAO_CO2_POR_KWH}</li>
              <li>Emissão por kWh (AM/AP/RR): {ALTERNATE_EMISSION_FACTOR}</li>
              <li>Período padrão (anos): {DEFAULT_ANOS}</li>
              <li>Árvores por tonelada: {DEFAULT_ARVORES_POR_TONELADA}</li>
              <li>Custo por árvore (R$): {DEFAULT_CUSTO_POR_ARVORE}</li>
            </ul>
          </div>
        </div>
      )}

      {activeTab === "resultado" && (
        <div className="space-y-8">
          <div className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <h3 className="text-xl font-semibold text-gray-800 mb-6">
              Informações de Consumo
            </h3>

            <InputGroup
              align="start"
              className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-5"
            >
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Região / Estado
                </label>
                <select
                  name="regiao_co2_parametro"
                  value={regiao}
                  onChange={(e) => setRegiao(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 outline-none"
                >
                  <option value="amazonas">Amazonas (AM)</option>
                  <option value="amapa">Amapá (AP)</option>
                  <option value="roraima">Roraima (RR)</option>
                  <option value="outros">Outros Estados</option>
                </select>
                <p className="mt-1 text-xs text-gray-500">
                  Escolha a região para aplicar o fator correto.
                </p>
              </div>
              <div>
                <Input
                  name="consumo_mensal_co2_parametro"
                  label="Consumo Mensal (kWh)"
                  formulario={form}
                  type="text"
                  mascara="numero"
                  defaultValue={
                    defaultValues?.consumo_mensal_co2_parametro ?? ""
                  }
                  textSize="text-md"
                  labelSize="text-sm font-medium text-gray-700"
                  inputClassName="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent outline-none transition"
                />
                <p className="mt-1 text-xs text-gray-500">
                  Valor padrão carregado, mas pode ser alterado pelo usuário.
                </p>
              </div>

              <div>
                <Input
                  name="periodo_analise_co2_parametro"
                  label="Período de Análise (anos)"
                  formulario={form}
                  type="text"
                  mascara="numerico"
                  defaultValue={
                    defaultValues?.periodo_analise_co2_parametro ?? DEFAULT_ANOS
                  }
                  textSize="text-md"
                  labelSize="text-sm font-medium text-gray-700"
                  inputClassName="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent outline-none transition"
                />
                <p className="mt-1 text-xs text-gray-500">
                  Padrão sugerido: {DEFAULT_ANOS} anos.
                </p>
              </div>

              <div>
                <Input
                  name="valor_por_arvore_co2_parametro"
                  label="Valor por Árvore (R$)"
                  formulario={form}
                  type="text"
                  mascara="numero"
                  defaultValue={
                    defaultValues?.valor_por_arvore_co2_parametro ??
                    DEFAULT_CUSTO_POR_ARVORE
                  }
                  textSize="text-md"
                  labelSize="text-sm font-medium text-gray-700"
                  inputClassName="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent outline-none transition"
                />
                <p className="mt-1 text-xs text-gray-500">
                  Padrão sugerido:{" "}
                  {new Intl.NumberFormat("pt-BR", {
                    style: "currency",
                    currency: "BRL",
                  }).format(DEFAULT_CUSTO_POR_ARVORE)}
                  .
                </p>
              </div>

              <div>
                <Input
                  name="arvores_por_tonelada_co2_parametro"
                  label="Árvores por Tonelada de CO₂"
                  formulario={form}
                  type="text"
                  mascara="numero"
                  defaultValue={
                    defaultValues?.arvores_por_tonelada_co2_parametro ??
                    DEFAULT_ARVORES_POR_TONELADA
                  }
                  textSize="text-md"
                  labelSize="text-sm font-medium text-gray-700"
                  inputClassName="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent outline-none transition"
                />
                <p className="mt-1 text-xs text-gray-500">
                  Padrão sugerido: {DEFAULT_ARVORES_POR_TONELADA.toFixed(2)}{" "}
                  árvores.
                </p>
              </div>
            </InputGroup>
          </div>
          <div className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
            <div className="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
              <div className="flex items-center gap-5">
                <h3 className="text-lg font-semibold text-white">
                  Emissões Mensal e Anual de CO₂
                </h3>
                <Button
                  type="button"
                  variant="ghost"
                  className="p-0 h-auto text-white hover:bg-transparent"
                  onClick={(e) => {
                    e.stopPropagation();

                    showFormula({
                      title: "Cálculo das Emissões",
                      lines: [
                        `Consumo mensal: <strong>${consumoNumeric.toLocaleString(
                          "pt-BR"
                        )} kWh</strong>`,
                        `Fator de emissão aplicado: <strong>${emissionFactorDisplay}</strong> ton/kWh`,
                        `CO₂ mensal = consumo × fator = <strong>${calculos.co2MensalToneladas.toFixed(
                          3
                        )} ton</strong>`,
                        `CO₂ anual = CO₂ mensal × 12 = <strong>${calculos.co2AnualToneladas.toFixed(
                          3
                        )} ton</strong>`,
                      ],
                    });
                  }}
                >
                  <InfoIcon size={22} />
                </Button>
              </div>
            </div>

            <div className="p-6">
              <div className="grid grid-cols-2 gap-4">
                <div className="p-4 bg-green-50 rounded-lg border border-green-200">
                  <p className="text-sm text-gray-600 mb-1">CO₂ Mensal</p>
                  <p className="text-2xl font-bold text-green-700">
                    {calculos.co2MensalToneladas.toFixed(3)}
                    <span className="text-sm ml-2">ton</span>
                  </p>
                </div>

                <div className="p-4 bg-green-50 rounded-lg border border-green-200">
                  <p className="text-sm text-gray-600 mb-1">CO₂ Anual</p>
                  <p className="text-2xl font-bold text-green-700">
                    {calculos.co2AnualToneladas.toFixed(3)}
                    <span className="text-sm ml-2">ton</span>
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-gradient-to-br from-red-50 to-orange-50 rounded-xl shadow-lg border border-red-200 overflow-hidden">
              <div className="bg-gradient-to-r from-red-500 to-orange-500 px-6 py-4">
                <div className="flex items-center gap-3">
                  <Zap className="w-6 h-6 text-white" />
                  <h4 className="text-lg font-semibold text-white">
                    CO₂ Emitido
                  </h4>
                  <Button
                    type="button"
                    variant="ghost"
                    className="p-0 h-auto text-white hover:bg-transparent"
                    onClick={(e) => {
                      e.stopPropagation();

                      showFormula({
                        title: "Cálculo do CO₂ Emitido",
                        lines: [
                          `Consumo mensal: <strong>${consumoNumeric.toLocaleString(
                            "pt-BR"
                          )} kWh</strong>`,
                          `Fator de emissão aplicado: <strong>${emissionFactorDisplay}</strong> ton/kWh`,
                          `CO₂ mensal = consumo × fator = <strong>${calculos.co2MensalToneladas.toFixed(
                            3
                          )} ton</strong>`,
                          `CO₂ anual = CO₂ mensal × 12 = <strong>${calculos.co2AnualToneladas.toFixed(
                            3
                          )} ton</strong>`,
                          `CO₂ total = CO₂ anual × ${anos} = <strong>${calculos.co2TotalToneladas.toFixed(
                            2
                          )} ton</strong>`,
                        ],
                      });
                    }}
                  >
                    <InfoIcon size={22} />
                  </Button>
                </div>
              </div>

              <div className="p-6">
                <p className="text-sm text-gray-600 mb-2">
                  Em {anos} ano{anos > 1 ? "s" : ""}
                </p>
                <p className="text-4xl font-bold text-red-600">
                  {calculos.co2TotalToneladas.toFixed(2)}
                </p>
                <p className="text-lg text-gray-700 font-semibold">toneladas</p>
              </div>
            </div>

            <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl shadow-lg border border-green-200 overflow-hidden">
              <div className="bg-gradient-to-r from-green-500 to-emerald-500 px-6 py-4">
                <div className="flex items-center gap-3">
                  <TreePine className="w-6 h-6 text-white" />
                  <h4 className="text-lg font-semibold text-white">
                    Árvores Necessárias
                  </h4>
                  <Button
                    type="button"
                    variant="ghost"
                    className="p-0 h-auto text-white hover:bg-transparent"
                    onClick={(e) => {
                      e.stopPropagation();

                      showFormula({
                        title: "Cálculo das Árvores",
                        lines: [
                          `CO₂ total no período: <strong>${calculos.co2TotalToneladas.toFixed(
                            2
                          )} ton</strong>`,
                          `Árvores por tonelada: <strong>${arvoresPorTonelada}</strong>`,
                          `Árvores necessárias = CO₂ total × fator = <strong>${calculos.totalArvores.toLocaleString(
                            "pt-BR"
                          )} árvores</strong>`,
                        ],
                      });
                    }}
                  >
                    <InfoIcon size={22} />
                  </Button>
                </div>
              </div>

              <div className="p-6">
                <p className="text-sm text-gray-600 mb-2">
                  Para neutralizar o CO₂
                </p>
                <p className="text-4xl font-bold text-green-600">
                  {calculos.totalArvores.toLocaleString("pt-BR")}
                </p>
                <p className="text-lg text-gray-700 font-semibold">árvores</p>
              </div>
            </div>

            <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl shadow-lg border border-blue-200 overflow-hidden">
              <div className="bg-gradient-to-r from-blue-500 to-cyan-500 px-6 py-4">
                <div className="flex items-center gap-3">
                  <DollarSign className="w-6 h-6 text-white" />
                  <h4 className="text-lg font-semibold text-white">
                    Custo Total
                  </h4>
                  <Button
                    type="button"
                    variant="ghost"
                    className="p-0 h-auto text-white hover:bg-transparent"
                    onClick={(e) => {
                      e.stopPropagation();

                      showFormula({
                        title: "Cálculo do Custo",
                        lines: [
                          `Quantidade de árvores: <strong>${calculos.totalArvores.toLocaleString(
                            "pt-BR"
                          )}</strong>`,
                          `Valor por árvore: <strong>${formatBRL(
                            custoPorArvore
                          )}</strong>`,
                          `Custo total = árvores × valor por árvore = <strong>${formatBRL(
                            calculos.custoTotal
                          )}</strong>`,
                        ],
                      });
                    }}
                  >
                    <InfoIcon size={22} />
                  </Button>
                </div>
              </div>

              <div className="p-6">
                <p className="text-sm text-gray-600 mb-2">
                  Para plantar todas as árvores
                </p>
                <p className="text-4xl font-bold text-blue-600">
                  {new Intl.NumberFormat("pt-BR", {
                    style: "currency",
                    currency: "BRL",
                  }).format(calculos.custoTotal)}
                </p>
                <p className="text-lg text-gray-700 font-semibold">
                  (
                  {new Intl.NumberFormat("pt-BR", {
                    style: "currency",
                    currency: "BRL",
                  }).format(custoPorArvore)}{" "}
                  por árvore)
                </p>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default CalculoCo2Tab;