"use client";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import { listarTabelasPrecos } from "@/requests/CRUD/TabelaPreco/tabelaPreco";
import { FormatFields } from "@/utils";
import {
  formatarValorTabela,
  formatarIdentificadorItemComponente,
  obterDescricaoTabelaPrecoComponente,
  obterLabelCategoriaTelhado,
  obterLinhaTabelaPrecoComponente,
  resolverCustoLinhaPorTelhado,
} from "@/utils/tabelaPrecos";
import { Typography } from "@material-tailwind/react";
import { useEffect, useMemo, useState } from "react";

const CampoVisualizacao = ({
  label,
  value,
}: {
  label: string;
  value?: string | number | null;
}) => (
  <div className="flex flex-col gap-1">
    <span className="text-xs font-medium text-bodydark2">{label}</span>
    <span className="text-sm text-black dark:text-white">{value ?? "-"}</span>
  </div>
);

const VisualizacaoTabelaPrecoLinha = ({
  componente,
  tabelasPrecos = [],
  itensKitTabelaPreco = [],
  exibirCusto = false,
}: {
  componente: any;
  tabelasPrecos?: any[];
  itensKitTabelaPreco?: any[];
  exibirCusto?: boolean;
}) => {
  const [tabelas, setTabelas] = useState<any[]>(tabelasPrecos);
  const [carregando, setCarregando] = useState(false);

  useEffect(() => {
    setTabelas(tabelasPrecos);
  }, [tabelasPrecos]);

  const dadosLinha = useMemo(
    () => obterLinhaTabelaPrecoComponente(componente, tabelas),
    [componente, tabelas]
  );

  useEffect(() => {
    if (dadosLinha.linha || !dadosLinha.idTabela) return;

    setCarregando(true);
    listarTabelasPrecos()
      .then((res) => setTabelas(res || []))
      .finally(() => setCarregando(false));
  }, [dadosLinha.idTabela, dadosLinha.linha]);

  if (carregando && !dadosLinha.linha) {
    return (
      <div className="flex justify-center py-8">
        <LoaderSun />
      </div>
    );
  }

  const { tabela, linha } = dadosLinha;

  if (!linha) {
    return (
      <Typography className="text-sm text-bodydark2">
        Não foi possível carregar os dados da linha da tabela de preço.
      </Typography>
    );
  }

  const descricaoTabela =
    tabela?.descricao_tabela_preco ||
    obterDescricaoTabelaPrecoComponente(componente, tabelas);
  const idItemKit = formatarIdentificadorItemComponente(
    componente,
    itensKitTabelaPreco
  );

  // Inversor(es) travados no componente (mesmos usados no cálculo do preço).
  // Componentes salvos antes dessa trava caem no fallback pelos da linha.
  const inversoresTexto = (componente.inversores ?? linha.inversores ?? [])
    .map((inv: any) =>
      `${inv.qtd ?? inv.quantidade ?? 1} ${inv.descricao ?? inv.label ?? ""}`.trim()
    )
    .filter(Boolean)
    .join(" | ");

  const siglaTelhado = componente.tipoTelhado_item;
  const custoReal =
    componente.custo_kit ??
    componente.precoUnitario_item ??
    resolverCustoLinhaPorTelhado(linha, siglaTelhado);
  const qtdEstruturas =
    (siglaTelhado && linha.custosPorEstrutura_linha?.[String(siglaTelhado)]?.qtd) ??
    Object.values(linha.custosPorEstrutura_linha || {})[0]?.qtd ??
    0;

  return (
    <div className="space-y-5 max-h-[70vh] overflow-y-auto pr-1">
      <div>
        <Typography variant="h6" className="text-black dark:text-white">
          Tabela de Preço
        </Typography>
        <Typography className="text-sm text-bodydark2 mt-1">
          {descricaoTabela}
        </Typography>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 rounded border p-4 bg-gray-50 dark:bg-boxdark-2">
        <CampoVisualizacao
          label="Código"
          value={tabela?.cod_tabela_preco ?? componente.id_tabela_preco}
        />
        <CampoVisualizacao
          label="Descrição da tabela"
          value={descricaoTabela}
        />
        <CampoVisualizacao
          label="ID Item Kit"
          value={idItemKit}
        />
        <CampoVisualizacao label="SKU" value={componente.sku_item || componente.codItem_item} />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 rounded border p-4">
        <CampoVisualizacao
          label="Qtde Mod"
          value={linha.qtd_modulos_linha ?? linha.qtd_modulos}
        />
        <CampoVisualizacao
          label="Potência do Módulo (W)"
          value={FormatFields.formatarNumero(
            Number(linha.potencia_modulo_linha ?? linha.potencia_modulo ?? 0)
          )}
        />
        <CampoVisualizacao
          label="Potência do Sistema (kWp)"
          value={FormatFields.formatarNumero(
            Number(linha.potencia_sistema_linha ?? linha.potencia_sistema ?? 0)
          )}
        />
        <CampoVisualizacao
          label="Overload Inversores (kW/un)"
          value={FormatFields.formatarNumero(
            Number(linha.overload_inversores_linha ?? linha.overload_inversores ?? 0)
          )}
        />
        <CampoVisualizacao
          label="Potência Total Inversores (kW)"
          value={FormatFields.formatarNumero(
            Number(
              linha.potencia_total_inversores_linha ??
                linha.potencia_total_inversores ??
                0
            )
          )}
        />
        <CampoVisualizacao label="Inversores" value={inversoresTexto || "-"} />
        <CampoVisualizacao label="Qtde de Estruturas" value={qtdEstruturas} />
        <CampoVisualizacao
          label="Qtde de Cabos CC (m)"
          value={FormatFields.formatarNumero(
            Number(linha.metrosCaboCC_linha ?? 0)
          )}
        />
        {exibirCusto && (
          <CampoVisualizacao
            label="Custo do Kit"
            value={formatarValorTabela(custoReal)}
          />
        )}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 rounded border p-4">
        <CampoVisualizacao
          label="Descrição da Tabela para Componentes"
          value={
            linha.descricao_componente_linha ??
            linha.descricao_componente ??
            componente.descricao_item
          }
        />
        <CampoVisualizacao
          label="Estrutura / Tipo de Telhado"
          value={
            siglaTelhado && siglaTelhado !== "*"
              ? obterLabelCategoriaTelhado(siglaTelhado)
              : "Todos"
          }
        />
      </div>
    </div>
  );
};

export default VisualizacaoTabelaPrecoLinha;