import React, { useEffect, useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { listarComponentesKitByKitId } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";

import jsPDF from "jspdf";
import autoTable from "jspdf-autotable";
import { FileText } from "lucide-react";
// Tipos
interface ComponenteKit {
  id_item: string;
  nome: string;
  categoria: string;
  descricao: string;
  qtd: string;
  precoUnitario_item: string;
}

interface DadosKit {
  componentesKit: ComponenteKit[];
}

interface CustoExtra {
  id_custo_extra: string;
  qtd_custo_extra: string;
  nome_custo_extra: string;
  descricaoProposta_custo_extra: string;
  value: string;
}

interface Precificacao {
  custos_extras: CustoExtra[];
  [key: string]: any;
}

interface ListaComponentesKitProps {
  id_kit: string;
  custosExtras: { id_custo_extra: string }[];
  dadosKit: DadosKit | any;
  proposta: any; // Pode tipar se quiser
  perfil?: any;
  precificacao: any; // JSON string
}

const ListaComponentesKit: React.FC<ListaComponentesKitProps> = ({
  id_kit,
  custosExtras,
  proposta,
  perfil,
  dadosKit,
  precificacao,
}) => {
  const totalGeral = dadosKit.componentesKit.reduce(
    (acc: number, item: ComponenteKit) =>
      acc + +item.qtd * +item.precoUnitario_item,
    0
  );

  // Parse seguro da precificação
  const precificacaoFormat: Precificacao = React.useMemo(() => {
    try {
      return JSON.parse(precificacao);
    } catch (e) {
      console.error("Erro ao parsear precificação:", e);
      return { custos_extras: [] };
    }
  }, [precificacao]);

  const custosExtrasIds = custosExtras.map((c) => c.id_custo_extra);

  const custosExtrasFiltrados = precificacaoFormat.custos_extras.filter(
    (custo) => custosExtrasIds.includes(custo.id_custo_extra)
  );

  const agruparComponentesPorCategoria = (
    componentes: ComponenteKit[]
  ): Record<string, ComponenteKit[]> => {
    return componentes?.reduce(
      (acc, item) => {
        if (!acc[item.categoria]) acc[item.categoria] = [];
        acc[item.categoria].push(item);
        return acc;
      },
      {} as Record<string, ComponenteKit[]>
    );
  };

  if (!dadosKit || dadosKit?.componentesKit?.length === 0) {
    return <p>Nenhum componente disponível.</p>;
  }

  const componentesAgrupados = agruparComponentesPorCategoria(
    dadosKit.componentesKit
  );
  return (
    <div className="space-y-2">
      {/* <TabsList className="w-full max-sm:justify-normal max-sm:overflow-auto max-sm:text-xs"> */}

      <button
        onClick={() =>
          gerarPdfComponentes(
            dadosKit.componentesKit,
            custosExtrasFiltrados,
            perfil
          )
        }
        className="bg-meta-1 m-1 flex gap-2 text-white px-4 py-2 rounded"
      >
        <FileText size={17} /> Exportar PDF
      </button>
      <h3 className="text-center text-black font-semibold">
        Itens Previsto na Proposta
      </h3>
      {Object.entries(componentesAgrupados).map(([categoria, itens]) => (
        <div key={categoria} className="border rounded p-4 text-black">
          <TabelaComponentes perfil={perfil} itens={itens} />
        </div>
      ))}

      <h3 className="text-center text-black font-semibold">Custos Extras</h3>
      {custosExtrasFiltrados.length === 0 ? (
        <p className="text-center">Nenhum custo extra disponível.</p>
      ) : (
        custosExtrasFiltrados.map((custo) => (
          <div
            key={custo.id_custo_extra}
            className="border rounded p-4 text-black"
          >
            <TabelaCustos custo={custo} />
          </div>
        ))
      )}
      {perfil.visualiza_preco_kit_perfil === "1" && (
        <div className="border rounded p-4 text-black mt-4">
          <table className="w-full text-sm">
            <tfoot>
              <tr className="font-bold bg-gray-50">
                <td className="p-3 text-right" colSpan={4}>
                  Total Geral
                </td>
                <td className="p-3 text-right">
                  R${" "}
                  {totalGeral.toLocaleString("pt-BR", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })}
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      )}
    </div>
  );
};

const TabelaComponentes: React.FC<{ itens: ComponenteKit[]; perfil: any }> = ({
  itens,
  perfil,
}) => (
  <div className="overflow-x-auto">
    <table className="w-full text-left border-collapse text-sm">
      <thead>
        <tr className="border-b font-semibold bg-gray-100">
          <th className="p-3">Nome</th>
          <th className="p-3">Descrição</th>
          <th className="p-3 text-right">Qtd</th>
          {perfil.visualiza_preco_kit_perfil === "1" && (
            <>
              <th className="p-3 text-right">Valor Un.</th>
              <th className="p-3 text-right">Valor Total</th>
            </>
          )}
        </tr>
      </thead>
      <tbody>
        {itens.map((item) => (
          <tr key={item.id_item} className="border-b align-top">
            <td className="p-3 w-[10rem]">{item.nome}</td>
            <td
              className="p-3 w-[17rem] truncate whitespace-pre-wrap"
              title={item.descricao}
            >
              {item.descricao}
            </td>
            <td className="p-3 text-right">{item.qtd}</td>
            {perfil.visualiza_preco_kit_perfil === "1" && (
              <>
                <td className="p-3 text-right font-semibold">
                  R${" "}
                  {(+item.precoUnitario_item).toLocaleString("pt-BR", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })}
                </td>
                <td className="p-3 text-right font-semibold">
                  R${" "}
                  {(+item.qtd * +item.precoUnitario_item).toLocaleString(
                    "pt-BR",
                    {
                      minimumFractionDigits: 2,
                      maximumFractionDigits: 2,
                    }
                  )}
                </td>
              </>
            )}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const TabelaCustos: React.FC<{ custo: CustoExtra }> = ({ custo }) => (
  <table className="w-full text-left border-collapse text-sm">
    <thead>
      <tr className="border-b font-medium">
        <th className="p-1">Nome</th>
        <th className="p-1">Descrição</th>
        <th className="p-1">Qtd</th>
      </tr>
    </thead>
    <tbody>
      <tr className="border-b">
        <td className="p-1">{custo.descricaoProposta_custo_extra}</td>
        <td className="p-1">{custo?.qtd_custo_extra ?? 1}</td>
        <td className="p-1">{custo.value}</td>
      </tr>
    </tbody>
  </table>
);

export default ListaComponentesKit;

export const gerarPdfComponentes = (
  componentes: any[],
  custosExtras: any[],
  perfil: any
) => {
  const doc = new jsPDF();

  doc.setFontSize(14);
  doc.text("Relatório do Kit", 14, 20);

  // --- Itens Kit ---
  doc.setFontSize(12);
  doc.text("Itens Previsto na Proposta", 14, 30);

  const colunasBase = ["Nome", "Descrição", "Qtd"];
  const colunasValores = ["Valor Un.", "Valor Total"];

  const colunas =
    perfil.visualiza_preco_kit_perfil === "1"
      ? [...colunasBase, ...colunasValores]
      : colunasBase;

  const linhas = componentes.map((item) => {
    const base = [item.nome, item.descricao, item.qtd];
    if (perfil.visualiza_preco_kit_perfil === "1") {
      const precoUn = `R$ ${(+item.precoUnitario_item).toLocaleString("pt-BR", {
        minimumFractionDigits: 2,
      })}`;
      const precoTotal = `R$ ${(
        +item.qtd * +item.precoUnitario_item
      ).toLocaleString("pt-BR", {
        minimumFractionDigits: 2,
      })}`;
      return [...base, precoUn, precoTotal];
    }
    return base;
  });

  // Total geral
  const totalGeral = componentes.reduce(
    (acc, item) => acc + +item.qtd * +item.precoUnitario_item,
    0
  );

  autoTable(doc, {
    startY: 35,
    head: [colunas],
    body: linhas,
    foot:
      perfil.visualiza_preco_kit_perfil === "1"
        ? [
            [
              {
                content: "Total Geral",
                colSpan: colunas.length - 1,
                styles: { halign: "right", fontStyle: "bold" },
              },
              {
                content: `R$ ${totalGeral.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`,
                styles: { halign: "right", fontStyle: "bold" },
              },
            ],
          ]
        : [],
  });

  if (custosExtras.length > 0) {
    doc.addPage();
    doc.text("Custos Extras", 14, 20);

    autoTable(doc, {
      startY: 30,
      head: [["Nome", "Descrição", "Qtd"]],
      body: custosExtras.map((c) => [
        c.nome_custo_extra,
        c.descricaoProposta_custo_extra,
        c.value,
      ]),
    });
  }

  doc.save("relatorio-kit.pdf");
};