import Dashboard from "@/components/Dashboard/E-commerce";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import {
  atualizarGraficos,
  buscarTodosGraficos,
  listarGraficosPorUsuario,
} from "@/requests/CRM/Dashboard/listarDashboard";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { useAuth } from "@/src/contexts/authContext";

import Container from "@/components/Forms/Container";
import { debounce } from "@/utils/debounce";
import { useEffect, useMemo, useRef, useState } from "react";
import { FaCog, FaExclamationCircle } from "react-icons/fa";

import { graphRegistry } from "@/components/Dashboard/graph-registry";
import InputGroup from "@/components/Forms/InputGroup";
import { DateRangePicker } from "@/components/dateRangePicker";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { GetForm } from "@/utils";
import { DateRange } from "react-day-picker";

const Card = ({ children }: any) => (
  <div className="card">
    <FaExclamationCircle className="exclamation-icon" />
    <p className="card-text">{children}</p>
  </div>
);

const Home = () => {
  const { valuesSession, obterDadosSecao, perfil, usuario } = useAuth();
  const { session } = valuesSession();
  const perfil_usuario = session.perfil_usuario;
  const id_usuario = session.id_usuario;
  const [isLoading, setIsLoading] = useState(true);
  const [allGraphs, setAllGraphs] = useState<any[]>([]); // [{id_grafico, nome_grafico, ...}]
  const [activeIds, setActiveIds] = useState<Set<string>>(new Set());
  const [canShowGraphs, setCanShowGraphs] = useState(true);
  const [lojasOptions, setLojasOptions] = useState<any[]>([]);
  const [lojas, setLojas] = useState<any[]>([]);
  const [lojaSelected, setLojaSelected] = useState("");
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [usuarioSelecionado, setUsuarioSelecionado] = useState<any>("*");
  const [tipoNegocioSelecionado, setTipoNegocioSelecionado] =
    useState<any>("*");
  const [isInitialized, setIsInitialized] = useState(false);
  const [range, setRange] = useState<DateRange | string | undefined>("*");
  const [tiposNegocios, setTiposNegocios] = useState([]);
  const [classificacoes, setClassificacoes] = useState<any[]>([]);
  const [classificacaoSelecionada, setClassificacaoSelecionada] =
    useState<any>("*");

  const form = GetForm();

  // Carregar histórico do menu, permissões do perfil e dados usuário
  useEffect(() => {
    if (session && perfil && usuario && lojas) {
      // obterDadosSecao(session).then(([usu, perf]) => {
      //   if (!usu?.graficos_usuario || usu.graficos_usuario.length === 0) {
      //     setCanShowGraphs(false);
      //   }
      // });
      const permissoes_graficos_perfil = perfil?.permissoes_graficos_perfil;
      setCanShowGraphs(
        permissoes_graficos_perfil
          ? permissoes_graficos_perfil?.split("^")?.filter((e) => !!e)?.length >
          0
          : false,
      );
      setUsuarioSelecionado(
        perfil?.visualiza_todos_contatos_perfil != "1"
          ? usuario?.id_usuario
          : "*",
      );
      setLojaSelected(
        lojasOptions.length == lojas.length ? "*" : usuario?.loja_usuario,
      );
    }
  }, [session, perfil, usuario, lojas]);

  // Carrega lista de gráficos do perfil
  useEffect(() => {
    let mounted = true;
    (async () => {
      try {
        const response = await buscarTodosGraficos(perfil_usuario);
        const ativos = (response || []).filter(
          (g: any) => g.status_grafico == "1",
        );
        if (mounted) {
          setAllGraphs(ativos);

          setIsInitialized(true);
        }
      } catch {
        setCanShowGraphs(false);
      }
    })();

    // Carrega configuração do usuário (ids ativos)
    (async () => {
      try {
        const res = await listarGraficosPorUsuario(id_usuario);

        const data = res?.[0];
        const ids = data?.ids_graficos ? data.ids_graficos.split("^") : [];
        if (ids.includes("all")) {
          // "all" => todos ativos

          setActiveIds(
            new Set(
              (res || [])
                .filter((g: any) => g.status_grafico == "1")
                .map((g: any) => String(g.id_grafico)),
            ),
          );
        } else {
          setActiveIds(new Set(ids));
        }
      } catch {
      } finally {
        setIsLoading(false);
      }
    })();

    return () => {
      mounted = false;
    };
  }, []);

  useEffect(() => {
    listarLojas().then((res) => {
      const idsLojaUsuario = session.id_loja_usuario
        .split(",")
        .map((id: any) => id.trim());
      const filtered = res.filter((loja: any) =>
        idsLojaUsuario.includes(String(loja.id_loja)),
      );
      setLojas(res);
      setLojasOptions(filtered);
    });
    listarTiposNegocios().then(setTiposNegocios);
    listarUsuarios(session.id_loja_usuario).then(setUsuarios);
    listarClassificacoes().then((res) =>
      setClassificacoes(
        (res || []).filter((c: any) => c.status_classificacao == 1),
      ),
    );
  }, []);

  const inactiveGraphs = useMemo(() => {
    const act = activeIds;
    return allGraphs.filter((g: any) => !act.has(String(g.id_grafico)));
  }, [allGraphs, activeIds]);

  const activeGraphs = useMemo(() => {
    const act = activeIds;
    const ordenedGraphs = Object.values(graphRegistry)
      .sort((a, b) => a.defaultOrder - b.defaultOrder)
      .map((g) => g.id);

    return allGraphs
      .filter((g: any) => act.has(String(g.id_grafico)))
      .sort(
        (a, b) =>
          ordenedGraphs.indexOf(a.id_grafico) -
          ordenedGraphs.indexOf(b.id_grafico),
      );
  }, [allGraphs, activeIds]);

  const toggleGraph = (id: string, checked: boolean) => {
    setActiveIds((prev) => {
      const next = new Set(prev);
      if (checked) next.add(id);
      else next.delete(id);
      return next;
    });
  };

  const persist = useMemo(
    () =>
      debounce((ids: string[]) => {
        atualizarGraficos(id_usuario, perfil_usuario, ids);
      }, 700),
    [id_usuario, perfil_usuario],
  );
  const lastIdsRef = useRef<string>("");

  useEffect(() => {
    const idsArr = Array.from(activeIds) as any;
    const current = idsArr.join("^");
    if (current !== lastIdsRef.current) {
      lastIdsRef.current = current;
      if (idsArr.length > 0) {
        persist(idsArr.map((s: any) => Number(s)));
      }
    }
  }, [activeIds, persist]);

  const graficosPermitidosString = useMemo(() => {
    const allIds = allGraphs.map((g) => String(g.id_grafico));
    if (activeIds.size === allIds.length) return "all";
    return Array.from(activeIds).join("^");
  }, [allGraphs, activeIds]);

  return (
    <Container>
      {canShowGraphs && (
        <Sheet>
          {!isLoading && (
            <div className="flex flex-wrap items-start justify-between gap-2 max-sm:flex-col">
              <div className="ml-3 max-sm:ml-0 max-sm:w-full">
                <InputGroup>
                  {usuario && (
                    <InputSelectComponent
                      name="lojas"
                      label="Lojas"
                      formulario={form}
                      isMulti
                      textSize="text-[14px]"
                      width="w-60"
                      options={[
                        ...(lojas.length == lojasOptions.length
                          ? [{ value: "*", label: "Todas" }]
                          : []),
                        ...lojasOptions.map((loja: any) => ({
                          value: loja.id_loja,
                          label: loja.nome_loja,
                        })),
                      ]}
                      defaultValue={
                        usuario?.loja_usuario
                        // !usuario?.loja_usuario?.includes(",")
                        //   ? usuario?.loja_usuario
                        //   : "*"
                      }
                      onChange={(e: any) => {
                        const idLojas = e
                          .map((loja: any) => loja.value)
                          .join(",");
                        setLojaSelected(idLojas);
                      }}
                      disabled={!usuario?.loja_usuario?.includes(",")}
                    />
                  )}
                  <InputSelectComponent
                    options={[
                      { value: "*", label: "Todos" },
                      ...(tiposNegocios || []).map((tipo: any) => ({
                        value: tipo.id_tipo_negocio,
                        label: tipo.nome_tipo_negocio,
                      })),
                    ]}
                    label="Tipos de Negócio"
                    onChange={(e: any) => setTipoNegocioSelecionado(e.value)}
                    width="w-[200px]"
                    placeholder="Todos Tipos de Negócio"
                  />
                  <InputSelectComponent
                    options={[
                      { value: "*", label: "Todos" },
                      ...classificacoes.map((c: any) => ({
                        value: `${c.id_classificacao}`,
                        label: `${c.nome_classificacao}`,
                      })),
                      { value: "0", label: "Não Informado" },
                    ]}
                    name="classificacaoNegocio"
                    label="Classificação do Negócio"
                    onChange={(e: any) => setClassificacaoSelecionada(e.value)}
                    width="w-[200px]"
                    placeholder="Todas Classificações"
                    defaultValue="*"
                  />
                  {usuario && perfil && (
                    <InputSelectComponent
                      options={[
                        ...(perfil?.visualiza_todos_contatos_perfil == "1"
                          ? [{ value: "*", label: "Todos" }]
                          : []),
                        ...(usuarios || [])
                          ?.filter((u) =>
                            perfil?.visualiza_todos_contatos_perfil != "1"
                              ? u?.id_usuario == usuario?.id_usuario
                              : true,
                          )
                          .map((vendedor) => ({
                            value: vendedor.id_usuario,
                            label: vendedor.nome_usuario,
                          })),
                      ]}
                      name="vendedor"
                      label="Vendedor"
                      formulario={form}
                      onChange={(e: any) => setUsuarioSelecionado(e.value)}
                      width="w-[200px]"
                      placeholder="Todos Vendedores"
                      defaultValue={
                        perfil?.visualiza_todos_contatos_perfil != "1"
                          ? usuario?.id_usuario
                          : "*"
                      }
                      disabled={perfil?.visualiza_todos_contatos_perfil != "1"}
                    />
                  )}
                  <div>
                    <h1 className="mb-2 text-black">Filtro por período</h1>
                    <DateRangePicker value={range} onChange={setRange} />
                  </div>
                </InputGroup>
              </div>
              <SheetTrigger
                type="button"
                className="max-sm:w-full max-sm:px-1"
              >
                <div className="bg-primary flex items-center justify-center gap-2 rounded-md px-3 mt-0 text-white p-1 max-sm:w-full max-sm:text-sm">
                  <FaCog size={17} />
                  Gráficos Disponíveis
                </div>
              </SheetTrigger>
            </div>
          )}

          <SheetContent className="dark:bg-form-input overflow-auto">
            <SheetHeader>
              <SheetTitle>Configurações dos Gráficos</SheetTitle>
              <SheetDescription>
                Ative ou desative os gráficos do seu dashboard.
              </SheetDescription>
            </SheetHeader>

            <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div>
                <h3 className="font-semibold mb-2">Ativos</h3>
                <table className="styled-table">
                  <tbody>
                    {activeGraphs.map((grafico: any) => (
                      <tr key={grafico.id_grafico}>
                        <td>{grafico.nome_grafico}</td>
                        <td className="text-right">
                          <Input
                            type="checkbox"
                            name={`ativo_${grafico.id_grafico}`}
                            checked={true}
                            onChange={(e: any) =>
                              toggleGraph(
                                String(grafico.id_grafico),
                                e.target.checked,
                              )
                            }
                          />
                        </td>
                      </tr>
                    ))}
                    {activeGraphs.length === 0 && (
                      <tr>
                        <td colSpan={2}>Nenhum gráfico ativo.</td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>

              <div>
                <h3 className="font-semibold mb-2">Disponíveis</h3>
                <table className="styled-table">
                  <tbody>
                    {inactiveGraphs.map((grafico: any) => (
                      <tr key={grafico.id_grafico}>
                        <td>{grafico.nome_grafico}</td>
                        <td className="text-right">
                          <Input
                            type="checkbox"
                            name={`disp_${grafico.id_grafico}`}
                            checked={false}
                            onChange={(e: any) =>
                              toggleGraph(
                                String(grafico.id_grafico),
                                e.target.checked,
                              )
                            }
                          />
                        </td>
                      </tr>
                    ))}
                    {inactiveGraphs.length === 0 && (
                      <tr>
                        <td colSpan={2}>Todos já estão ativos.</td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </SheetContent>
        </Sheet>
      )}

      {isLoading ? (
        <div className="flex h-screen items-center justify-center">
          <LoaderSun />
        </div>
      ) : (
        <div style={{ position: "relative" }}>
          {canShowGraphs ? (
            <Dashboard
              graficosPermitidos={graficosPermitidosString}
              lojas={lojaSelected}
              usuario={usuarioSelecionado}
              tipoNegocio={tipoNegocioSelecionado}
              classificacaoNegocio={classificacaoSelecionada}
              periodo={range}
            />
          ) : (
            <Card>
              Lamentamos, mas no momento seu perfil não tem acesso aos gráficos.
            </Card>
          )}
        </div>
      )}
    </Container>
  );
};

export default Home;