import Input from "@/components/Forms/Input";
import AvatarInput from "@/components/Forms/InputAvatar";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { listarCfgHistoricoFunil, listarLogCard } from "@/requests/CRM/kanban";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { FormatFields } from "@/utils";
import React, { useEffect, useMemo, useState } from "react";

const Historico = ({
  dadosLogs,
  setLogs,
  dataCard,
  dadosHistorico,
  changeTab,
  selectedUsers,
  setSelectedUsers,
  selectedCategoria,
  setSelectedCategoria,
  dateInicio,
  setDateInicio,
  dateFim,
  setDateFim,
}: any) => {
  const [usuarios, setUsuarios] = useState([]);
  const [cfgHistoricoFunil, setCfgHistoricoFunil] = useState([]);

  const { valuesSession, usuario } = useAuth();
  const { session } = valuesSession();
  useEffect(() => {
    if (!dataCard) return;

    listarLogCard({
      id_coleta: dataCard.id_coleta_cliente,
      id_usuario: usuario?.id_usuario,
    }).then((res) => {
      setLogs(res);
    });
  }, [dataCard?.id]);

  const logsFiltrados = useMemo(() => {
    let result = [...dadosLogs];
    if (selectedUsers.length > 0) {
      result = result.filter((log: any) =>
        selectedUsers.includes(log.id_usuario as never),
      );
    }
    if (selectedCategoria.length > 0) {
      result = result.filter((log: any) =>
        selectedCategoria.includes(log.tipo_log_kanban as never),
      );
    }

    if (dateInicio) {
      result = result.filter(
        (log: any) => new Date(log.datahora_log_kanban) >= new Date(dateInicio),
      );
    }
    if (dateFim) {
      result = result.filter(
        (log: any) => new Date(log.datahora_log_kanban) <= new Date(dateFim),
      );
    }
    return result;
  }, [dadosLogs, selectedUsers, selectedCategoria, dateInicio, dateFim]);

  useEffect(() => {
    listarUsuarios(session.id_loja_usuario).then((res) => setUsuarios(res));
    listarCfgHistoricoFunil().then((res) => setCfgHistoricoFunil(res));
  }, []);

  const combinedData = [
    ...dadosLogs.map((log: any) => ({ ...log })),
    ...dadosHistorico.map((historico: any) => ({
      ...historico,
    })),
  ];

  combinedData.sort((a, b) => {
    const dateA = new Date(
      a.datahora_log_kanban || a.dataHora_nota_kanban,
    ) as any;
    const dateB = new Date(
      b.datahora_log_kanban || b.dataHora_nota_kanban,
    ) as any;
    return dateA - dateB;
  });
  // useEffect(() => {

  // }, [selectedUsers]);
  return (
    <div className="flex justify-center relative z-1 h-fit max-sm:text-xs  overflow-hidden rounded w-full ">
      <div className="flex justify-center w-full">
        <div className="grid w-full">
          <div className="bg-white dark:bg-form-strokedark shadow rounded text-lg max-sm:text-sm text-black dark:text-white font-semibold p-3">
            <Accordion type="multiple">
              <AccordionItem value="item-1">
                <AccordionTrigger className="dark:bg-form-strokedark text-sm max-sm:text-xs text-black dark:text-white font-semibold">
                  <p>Filtros do Histórico</p>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="my-3">
                    <InputGroup>
                      <InputSelectComponent
                        label="Usuário"
                        isMulti
                        labelSize="text-sm"
                        textSize="text-sm"
                        options={usuarios.map((user: any) => ({
                          value: user.id_usuario,
                          label: user.nome_usuario,
                        }))}
                        name="usuario"
                        onChange={(e: any) =>
                          setSelectedUsers(e.map((user: any) => user.value))
                        }
                        defaultValue={selectedUsers.join(",")}
                      />
                      <InputSelectComponent
                        label="Categoria de Alteração"
                        labelSize="text-sm"
                        textSize="text-sm"
                        isMulti
                        options={cfgHistoricoFunil.map((user: any) => ({
                          value: user.id_cfg_historico_funil,
                          label: user.nome_cfg_historico_funil,
                        }))}
                        name="categoria"
                        onChange={(e: any) =>
                          setSelectedCategoria(e.map((user: any) => user.value))
                        }
                        defaultValue={selectedCategoria.join(",")}
                      />
                    </InputGroup>
                    <InputGroup>
                      <Input
                        label="De"
                        labelSize="text-sm"
                        textSize="text-sm"
                        name="de"
                        type="date"
                        inputClassName="text-sm"
                        onChange={(e: any) => setDateInicio(e.target.value)}
                        defaultValue={dateInicio}
                      />
                      <Input
                        inputClassName="text-sm"
                        label="Até"
                        labelSize="text-sm"
                        name="ate"
                        type="date"
                        onChange={(e: any) => setDateFim(e.target.value)}
                        defaultValue={dateFim}
                      />
                    </InputGroup>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
          <div className="w-full text-sm  text-center  mt-2 bg-white dark:bg-form-strokedark shadow rounded  text-black dark:text-white font-semibold p-3">
            Histórico
          </div>
          <div>
            {logsFiltrados.map((nota: any, index: number) => (
              <React.Fragment key={index}>
                <div className="flex shadow p-3 text-sm m-2 mx-0 justify-between text-black dark:text-white rounded-sm bg-white dark:bg-form-strokedark">
                  <div className="grid gap-2 max-w-[77%]">
                    <div className="flex items-start gap-2 flex-wrap">
                      <span className="font-semibold">
                        {nota.nome_cfg_historico_funil || "Ação"}
                      </span>
                    </div>
                    <span className="pl-2   whitespace-break-spaces flex-wrap flex">
                      {nota.descricao_log_kanban}
                    </span>
                  </div>
                  <div className=" gap-1  flex-col  flex items-end">
                    <span className="font-medium">
                      <div>
                        {FormatFields.formatarDataHora(
                          nota.datahora_log_kanban,
                        )}
                      </div>
                    </span>
                    <span className="font-medium ">
                      <div>{nota.nome_usuario}</div>
                    </span>
                    <AvatarInput
                      nome_responsavel={nota.nome_usuario}
                      height="11"
                      width="11"
                      imageValue={nota.avatar_usuario}
                    />
                  </div>
                </div>
                <hr className="w-9 -z-1 ml-5 bg-body h-[3px] rotate-90" />
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Historico;