import { CardHistorico } from "@/components/Card/card";
import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { listarContratosPorColeta } from "@/requests/CRM/Contrato/listarContrato";
import { buscaHistorico } from "@/requests/CRM/Historico/historico";
import { listarClientesConsulta } from "@/requests/CRUD/Cliente/listarClientes";
import { listarDocumentosGeradosPorIdCliente } from "@/requests/CRUD/DocumentosGerados/listarDocumentosGeradosPorIdCliente";
import { listarPropostaColeta } from "@/requests/CRUD/Propostas/listarPropostas";

import { baixarAws } from "@/requests/common/Aws/baixarAws";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";
import { Fragment, useEffect, useState } from "react";
import { MdCloudDownload } from "react-icons/md";
import { toast } from "react-toastify";
import * as yup from "yup";

const HistoricoCliente = ({ idColuna }: any) => {
  const [dadosCliente, setDadosCliente] = useState<any>([]);
  const [historicoCliente, setHistoricoCliente] = useState<any>(null);
  const [coletaTabela, setColetaTabela] = useState<any>([]);
  const [clienteTabela, setClienteTabela] = useState<any>([]);
  const [clienteTabelaExtras, setClienteTabelaExtras] = useState<any>([]);
  const [coletaTabelaExtra, setTabelaColetaExtras] = useState<any>([]);
  const [documentosTabela, setDocumentosTabela] = useState<any>([]);
  const [contratosTabela, setContratosTabela] = useState<any>([]);
  const [idCliente, setIdCliente] = useState<any>(0);
  const [propostaTabela, setPropostaTabela] = useState<any>([]);
  const [coletaSelecionada, setColetaSelecionada] = useState<any>(0);
  const [idColetaSelecionada, setIdColetaSelecionada] = useState<any>(0);
  const [isLoading, setIsLoading] = useState<any>(false);
  const { isMobile } = useScreenContext();

  useEffect(() => {
    if (isMobile) {
      toast.info("Para melhor visualização gire o seu celular");
    }
  }, []);

  useEffect(() => {
    buscaHistorico(idColuna).then((res) => {
      setHistoricoCliente(res);
    });
  }, []);

  useEffect(() => {
    listarClientesConsulta().then((e) => {
      setDadosCliente(e);
    });
    const guardaStateTabelaColeta: any = [];
    const guardaStateTabelaCliente: any = [];
    const guardaStateTabelaClienteExtra: any = [];
    const guardaStateTabelaColetaExtras: any = [];
    historicoCliente?.map(
      (dados: any) => (
        guardaStateTabelaColeta.push([
          {
            nome: "Nome Negócio",
            valor: dados["nome_negocio_coleta"],
          },
          {
            nome: "Cidade/Estado",
            valor: dados["cidade_coleta"] || "Sem Local Especifico Na Coleta",
          },
          {
            nome: "Concessionaria",
            valor: dados["concessionaria_coleta"],
          },
          {
            nome: "Estimativa",
            valor: dados["estimativa_coleta"],
          },
          {
            nome: "Módulos Necessários",
            valor: dados["modulosNecessarios_coleta"],
          },
          {
            nome: "Classificação",
            valor: dados["classificacao_coleta"],
          },
        ]),
        guardaStateTabelaColetaExtras.push([
          // {
          //   nome: "Tipo Instalação",
          //   valor: dados["nome_tipo"],
          // },
          {
            nome: "Tipo Telhado",
            valor: dados["nome_telhado"],
          },
        ]),
        guardaStateTabelaClienteExtra.push([
          { nome: "Responsavel", valor: dados["nome_usuario"] },
          {
            nome: "Cidade/Estado",
            valor: dados["cidade_cliente"] + " - " + dados["estado_cliente"],
          },
          {
            nome: "Data Cadastro",
            valor: dados["data_cadastro_cliente"],
          },
          {
            nome: "Origem Cliente",
            valor: dados["nome_origem_cliente"],
          },
        ]),
        guardaStateTabelaCliente.push([
          {
            nome: "Nome",
            valor: dados["nome_cliente"],
          },
          {
            nome: "Email",
            valor: dados["email_cliente"],
          },
          {
            nome: "Telefone",
            valor: dados["telefone1_cliente"],
          },
          { nome: "CPF/CNPJ", valor: dados["cpfcnpj_cliente"] },
        ])
      )
    );

    setColetaTabela(guardaStateTabelaColeta);
    setClienteTabela(guardaStateTabelaCliente);
    setClienteTabelaExtras(guardaStateTabelaClienteExtra);
    setTabelaColetaExtras(guardaStateTabelaColetaExtras);
  }, [historicoCliente]);

  useEffect(() => {
    const fetchPropostas = async () => {
      const propostas = await listarPropostaColeta(idColetaSelecionada);
      setPropostaTabela(propostas);
    };

    fetchPropostas();

    const fetchDocumentos = async () => {
      const documentos = await listarDocumentosGeradosPorIdCliente(idCliente);
      setDocumentosTabela(documentos);
    };

    fetchDocumentos();

    const fetchContratos = async () => {
      const Contratos = await listarContratosPorColeta(idColetaSelecionada);

      setContratosTabela(Contratos);
    };

    fetchContratos();
  }, [idColetaSelecionada]);

  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);

  const labelsProposta = [
    { nome: "Potencia" },
    { nome: "Inversores" },
    { nome: "Módulos" },
    { nome: "Valor" },
    { nome: "Data" },
    { nome: "Status" },
    { nome: "Baixar" },
  ];

  return (
    <>
      <Container>
        <div className="w-full flex flex-col justify-center items-center text-title-sm dark:text-white  m-5">
          {historicoCliente &&
            (historicoCliente[0] ? <div></div> : <div>Carregando...</div>)}
        </div>

        <div className="flex flex-row align-center justify-center flex-wrap gap-10">
          {historicoCliente ? (
            historicoCliente[0] ? (
              historicoCliente.map((dados: any, index: number) => (
                <Fragment key={index}>
                  <Sheet>
                    <SheetTrigger asChild>
                      <button
                        onClick={() => (
                          setIdColetaSelecionada(0),
                          setColetaSelecionada(index),
                          setIdColetaSelecionada(dados["id_coleta"]),
                          setIdCliente(dados["id_cliente"])
                        )}
                      >
                        <CardHistorico dados={dados} />
                      </button>
                    </SheetTrigger>
                    <SheetContent
                      className="text-black dark:bg-form-input dark:text-white overflow-auto"
                      side="top"
                    >
                      <SheetHeader>
                        <SheetTitle>
                          Visualização do Negócio (ID: {dados.id_coleta})
                        </SheetTitle>
                        <SheetDescription className="">
                          Aqui sera apresentado as informações sobre a negócio,
                          caso não queira ver pressione o x ou pressione fora
                        </SheetDescription>
                      </SheetHeader>
                      <Tabs defaultValue="cliente" className="w-full pt-5">
                        <TabsList className="w-full max-sm:grid max-sm:grid-cols-2 max-sm:h-auto justify-center dark:bg-form-strokedark bg-stroke">
                          <TabsTrigger value="cliente">Cliente</TabsTrigger>
                          <TabsTrigger value="coleta">Negócio</TabsTrigger>
                          {propostaTabela.length != 0 && (
                            <TabsTrigger value="propostas">
                              Propostas
                            </TabsTrigger>
                          )}
                          {documentosTabela.length != 0 && (
                            <TabsTrigger value="documentos">
                              Documentos
                            </TabsTrigger>
                          )}
                          {contratosTabela.length != 0 && (
                            <TabsTrigger value="contratos">
                              Contratos
                            </TabsTrigger>
                          )}
                        </TabsList>
                        <TabsContent value="cliente">
                          <div className="flex flex-row gap-5 max-sm:overflow-auto">
                            <table className="styled-table">
                              <thead>
                                <tr>
                                  <th
                                    className="w-full text-center"
                                    colSpan={2}
                                  >
                                    Dados Cliente
                                  </th>
                                </tr>
                              </thead>
                              <tbody className=" text-md">
                                {clienteTabela[coletaSelecionada]?.map(
                                  (e: any, index: any) => (
                                    <tr key={index}>
                                      <td className="dark:bg-form-input">
                                        {e["nome"]}
                                      </td>
                                      <td className="dark:bg-form-input">
                                        {e["valor"]}
                                      </td>
                                    </tr>
                                  )
                                )}
                              </tbody>
                            </table>
                            <table className="styled-table">
                              <thead>
                                <tr>
                                  <th
                                    className="w-full text-center"
                                    colSpan={2}
                                  >
                                    Dados Extras
                                  </th>
                                </tr>
                              </thead>
                              <tbody className=" text-md">
                                {clienteTabelaExtras[coletaSelecionada]?.map(
                                  (e: any, index: any) => (
                                    <tr key={index}>
                                      <td className="dark:bg-form-input">
                                        {e["nome"]}
                                      </td>
                                      <td className="dark:bg-form-input">
                                        {e["valor"]}
                                      </td>
                                    </tr>
                                  )
                                )}
                              </tbody>
                            </table>
                          </div>
                        </TabsContent>
                        <TabsContent value="coleta">
                          <div className="max-h-[200px] overflow-x-auto overflow-y-auto">
                            <div className="flex flex-row gap-5">
                              <table className="styled-table">
                                <thead>
                                  <tr>
                                    <th
                                      className="w-full text-center"
                                      colSpan={2}
                                    >
                                      Negócio
                                    </th>
                                  </tr>
                                </thead>
                                <tbody className=" text-md">
                                  {coletaTabela[coletaSelecionada]?.map(
                                    (e: any, index: any) => (
                                      <tr key={index}>
                                        <td className="dark:bg-form-input">
                                          {e["nome"]}
                                        </td>
                                        <td className="dark:bg-form-input">
                                          {e["valor"]}
                                        </td>
                                      </tr>
                                    )
                                  )}
                                </tbody>
                              </table>
                              <table className="styled-table">
                                <thead>
                                  <tr>
                                    <th
                                      className="w-full text-center"
                                      colSpan={2}
                                    >
                                      Estruturas
                                    </th>
                                  </tr>
                                </thead>
                                <tbody className=" text-md">
                                  {coletaTabelaExtra[coletaSelecionada]?.map(
                                    (e: any, index: any) => (
                                      <tr key={index}>
                                        <td className="dark:bg-form-input">
                                          {e["nome"]}
                                        </td>
                                        <td className="dark:bg-form-input">
                                          {e["valor"]}
                                        </td>
                                      </tr>
                                    )
                                  )}
                                </tbody>
                              </table>
                            </div>
                          </div>
                        </TabsContent>
                        <TabsContent value="propostas">
                          <table className="styled-table">
                            <thead>
                              <tr>
                                <th className="w-full text-center" colSpan={8}>
                                  Propostas
                                </th>
                              </tr>
                            </thead>
                            <tbody className=" text-md">
                              <tr>
                                {labelsProposta &&
                                  labelsProposta.map((e, index) => (
                                    <td
                                      className="dark:bg-form-input"
                                      key={index}
                                    >
                                      {e["nome"]}
                                    </td>
                                  ))}
                              </tr>
                              {propostaTabela &&
                                propostaTabela.map((data: any, index: any) => (
                                  <Fragment key={index}>
                                    <tr>
                                      {" "}
                                      <td className="dark:bg-form-input">
                                        {data["potencia_kit"]} Kwp
                                      </td>
                                      <td className="dark:bg-form-input">
                                        {(data[
                                          "qtdInversor1_kit_distribuidor"
                                        ] || data["qtdInversor1_kit"]) +
                                          " " +
                                          (data["descricao_inversor1"] ||
                                            data["descricao_inversor1_manual"])}
                                        <br />
                                        {data[
                                          "qtdInversor2_kit_distribuidor"
                                        ] >= "1" &&
                                          (data[
                                            "qtdInversor2_kit_distribuidor"
                                          ] || data["qtdInversor2_kit"]) +
                                            " " +
                                            (data["descricao_inversor2"] ||
                                              data[
                                                "descricao_inversor2_manual"
                                              ])}
                                      </td>
                                      <td className="dark:bg-form-input">
                                        {(data["qtdModulos_kit_distribuidor"] ||
                                          data["qtdModulos_kit"]) +
                                          " " +
                                          (data[
                                            "descricao_modulo_distribuidor"
                                          ] || data["descricao_modulo"])}
                                      </td>
                                      <td className="dark:bg-form-input">
                                        {data["valorTotal_proposta"]}
                                      </td>
                                      <td className="dark:bg-form-input">
                                        {data["data_proposta"]}
                                      </td>
                                      <td
                                        className={`dark:bg-form-input text-${
                                          data["status_proposta"] == "1"
                                            ? "success"
                                            : "danger"
                                        }`}
                                      >
                                        {data["status_proposta"] == 1
                                          ? "Ativa"
                                          : "Inativa"}
                                      </td>
                                      <td className="dark:bg-form-input">
                                        <Button
                                          loading={isLoading}
                                          className="cursor-pointer text-2xl rounded-md bg-primary text-white"
                                          onClick={() => {
                                            setIsLoading(true);
                                            baixarAws(
                                              data["caminho_proposta"]
                                            ).then(
                                              (e) => (
                                                setIsLoading(false),
                                                window.open(e)
                                              )
                                            );
                                          }}
                                        >
                                          <MdCloudDownload />
                                        </Button>
                                      </td>
                                    </tr>
                                  </Fragment>
                                ))}
                            </tbody>
                          </table>
                        </TabsContent>
                        <TabsContent value="documentos">
                          <table className="styled-table">
                            <thead>
                              <tr>
                                <th className="w-full text-center" colSpan={4}>
                                  Documentos
                                </th>
                              </tr>
                            </thead>
                            <tbody className=" text-md">
                              <tr>
                                <td>Nome</td>
                                <td>Responsável</td>
                                <td>Data</td>
                                <td>Baixar</td>
                              </tr>
                              {documentosTabela &&
                                documentosTabela.map((data: any) => (
                                  <tr key={data["id_documento_gerado"]}>
                                    {" "}
                                    <td className="dark:bg-form-input">
                                      {data["nome_documento_personalizado"]}
                                    </td>
                                    <td className="dark:bg-form-input">
                                      {data["nome_usuario"]}
                                    </td>
                                    <td className="dark:bg-form-input">
                                      {data["data_documento_gerado"]}
                                    </td>
                                    <td className="dark:bg-form-input">
                                      <Button
                                        loading={isLoading}
                                        className="cursor-pointer text-2xl rounded-md bg-primary text-white"
                                        onClick={() => {
                                          setIsLoading(true);
                                          baixarAws(
                                            data["caminho_documento_gerado"]
                                          ).then(
                                            (e) => (
                                              setIsLoading(false),
                                              window.open(e)
                                            )
                                          );
                                        }}
                                      >
                                        <MdCloudDownload />
                                      </Button>
                                    </td>
                                  </tr>
                                ))}
                            </tbody>
                          </table>
                        </TabsContent>
                        <TabsContent value="contratos">
                          <table className="styled-table">
                            <thead>
                              <tr>
                                <th className="w-full text-center" colSpan={3}>
                                  Contratos
                                </th>
                              </tr>
                            </thead>
                            <tbody className=" text-md">
                              <tr>
                                <td>Responsável</td>
                                <td>Data</td>
                                <td>Baixar</td>
                              </tr>
                              {contratosTabela &&
                                contratosTabela.map((data: any, index: any) => (
                                  <tr key={index}>
                                    <td className="dark:bg-form-input">
                                      {data["nome_usuario"]}
                                    </td>
                                    <td className="dark:bg-form-input">
                                      {data["data_contrato"]}
                                    </td>
                                    <td className="dark:bg-form-input">
                                      <Button
                                        loading={isLoading}
                                        className="cursor-pointer text-2xl rounded-md bg-primary text-white"
                                        onClick={() => {
                                          setIsLoading(true);
                                          baixarAws(
                                            data["caminho_contrato"]
                                          ).then(
                                            (e) => (
                                              setIsLoading(false),
                                              window.open(e)
                                            )
                                          );
                                        }}
                                      >
                                        <MdCloudDownload />
                                      </Button>
                                    </td>
                                  </tr>
                                ))}
                            </tbody>
                          </table>
                        </TabsContent>
                      </Tabs>
                      <SheetFooter></SheetFooter>
                    </SheetContent>
                  </Sheet>
                </Fragment>
              ))
            ) : (
              Array.from({ length: 2 }).map((e: any, index: number) => (
                <Skeleton
                  key={index}
                  className="w-[300px] rounded-md h-[300px]"
                />
              ))
            )
          ) : (
            <>
              <div className="flex justify-center ">
                <LoaderSun />
              </div>
            </>
          )}
        </div>
      </Container>
    </>
  );
};

export default HistoricoCliente;