import { useEffect, useMemo, useState } from "react";
import { useCraftTable } from "../listing/libs/hooks/useCraftTable";
import { useCraftTableFilterSettings } from "../listing/libs/hooks/useCraftTableFilterSettings";
import { useDefaultColumns } from "../listing/libs/hooks/useDefaultColumns";
import {
  useDetailsQueryAPI,
  useFetchData,
} from "../listing/libs/hooks/useEntityTableHooks";
import {
  ENTITY_TYPE,
  formatTableHeaders,
  MAPPED_ENTITY_TYPE,
  MODULE_CODE,
} from "../listing/libs/utils/common";
import {
  useCommonFilterDropdownAPI,
  useDropdownAPI,
  useEntityTableAPI,
  useGetAttributes,
  useGetOperationList,
  useGetTableTabs,
  useSaveSettingsDataAPI,
  useSettingsDropDownAPI,
} from "../listing/libs/hooks/useEntityTableAPI";
import { entityTableMetaMaster } from "../listing/libs/utils/apiColumn";
import { ColumnDef } from "@tanstack/react-table";
import {
  ColumnTabConfigProps,
  SettingsDataProps,
} from "../listing/types/filter-settings";
import TableWrapper from "../listing/components/index-table";
import { TableTabs } from "../listing/components/tabs";
import { QuickFilterSettings } from "../listing/components/table-settings";
import CraftTableFilterWrapper from "./FIlterWrapper";
import { saveLayoutAPI } from "../listing/libs/services/saveLayoutAPI";
import { hydrateSavedFilters } from "../listing/libs/utils/hydrate-saved-filters";
import { useGetNavigationLayoutAPI } from "../listing/libs/hooks/useGetNavigationLayoutAPI";
import { useQueryClient } from "@tanstack/react-query";
import { Box, CircularProgress, Typography } from "@mui/material";
import { ColumnItem } from "../listing/components/table-settings/components/column";
import { LEAD_STATUS } from "../kanban/constants/kanban-constants";

function ListingView() {
  // const [mockLoading, setMockLoading] = useState<boolean>(true);
  // const [jsonData] = useState<any[]>([]);
  const [columns, setColumns] = useState<any[]>([]);
  const [searchTerm, setSearchTerm] = useState("");
  //   const [data, setData] = useState<Person[]>(() => makeData(200, 3, 2));

  const [selectedTab, setSelectedTab] = useState({
    tab_name: "All",
    tab_value: "",
  });

  const tableStates = useCraftTable();
  const filterSettingStates = useCraftTableFilterSettings();

  const { filters, setFilters, filterMaster } = tableStates;

  const { showListViewSettings, setShowListViewSettings, setSettingsData } =
    filterSettingStates;

  const { defaultColumns } = useDefaultColumns();
  const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(
    ENTITY_TYPE,
    "layout"
  );
  const tabsPaylod = {
    entity_type: ENTITY_TYPE,
    defaultTabsConfig: {
      attribute: LEAD_STATUS,
    },
  };

  const { tableTabs } = useGetTableTabs(tabsPaylod);
  const tabsData = tableTabs;

  const { metaQuery } = useFetchData(ENTITY_TYPE, {
    tabs: {
      columnName:
        getSettingsAPIData?.mapped_json?.quick_tab?.attribute || "status",
      sortBy: getSettingsAPIData?.mapped_json?.quick_tab?.sorting || "ASC",
      value:
        selectedTab?.tab_name?.toLowerCase() === "all"
          ? tabsData?.find((tab: any) => tab?.tab_name?.toLowerCase() === "all")
              ?.tab_value
          : selectedTab?.tab_value,
      name: selectedTab?.tab_name,
    },
  });

  const { detailsQuery } = useDetailsQueryAPI(
    filterMaster?.saved_filters?.selectedId
      ? filterMaster?.saved_filters?.selectedId
      : metaQuery?.data?.default_filter?.value
  );
  const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
  const { operationList } = useGetOperationList();

  const { attributes } = useGetAttributes(ENTITY_TYPE);
  const { attributes: quickTabAttributes } = useGetAttributes(
    ENTITY_TYPE,
    "select"
  );

  const isColumnDefault =
    filterSettingStates?.columnTabState?.isDefault || false;
  const activeTabIndex = filterSettingStates?.columnTabState?.tabs?.findIndex(
    (tab) => tab?.tab_name?.value == selectedTab?.tab_name
  );
  const settingsColumnState = (filterSettingStates?.settingsData?.column ||
    {}) as ColumnTabConfigProps;

  // const { dropdownData } = useCommonDropdownAPI(
  //   dropdownColumnList || metaQuery.data.column_list
  // );
  // const { dropdownData } = useCommonDropdownAPI(filters);
  const { dropdownFilterData } = useCommonFilterDropdownAPI(filters);

  const {
    data: settingsTabDropdownData,
    isLoading: settingsTabDropdownPending,
  } = useDropdownAPI({
    entity_type: ENTITY_TYPE,
    attribute_key: filterSettingStates?.quickTabStates?.attribute,
  });

  const queryClient = useQueryClient();

  const fetchMeta = async () => {
    const res = formatTableHeaders(metaQuery?.data?.column_list || []);
    console.log("res", res);

    setColumns(res);
  };

  useEffect(() => {
    // setTimeout(() => {
    //   setMockLoading(false);
    // }, 1000);

    fetchMeta();
  }, [selectedTab, metaQuery?.data]);

  // useEffect(() => {
  //   setFilters(detailsQuery.data ?? []);
  // }, [detailsQuery.data]);

  useEffect(() => {
    const setFilterDropdown = async () => {
      if (Array.isArray(detailsQuery.data)) {
        const hydrated = await hydrateSavedFilters(
          detailsQuery.data,
          operationList.data
        );
        setFilters(hydrated);
      } else {
        setFilters([]);
      }
    };
    setFilterDropdown();
  }, [detailsQuery.data]);

  useEffect(() => {
    setSettingsData(getSettingsAPIData);
  }, [getSettingsAPIData]);

  //For server side sorting
  const enableServerSideSorting = true;

  const { tableData, isTableDataPending } = useEntityTableAPI({
    page: 0,
    size: 20,
    entity_type: ENTITY_TYPE,
    tabs: {
      columnName: getSettingsAPIData?.quick_tab?.attribute || "status",
      sortBy: getSettingsAPIData?.quick_tab?.sorting || "ASC",
      value:
        selectedTab?.tab_name?.toLowerCase() === "all"
          ? tabsData?.find((tab) => tab?.tab_name?.toLowerCase() === "all")
              ?.tab_value
          : selectedTab?.tab_value,

      name: selectedTab?.tab_name,
    },
    quickFilter: tableStates.filters,
    sortby: [
      {
        sortColum: "name",
        sortType: "ASC",
      },
    ],
    attributeFilter: [],
    flatJson: metaQuery.data?.is_flat_json || false,
    // module_code: MODULE_CODE,
  });

  const newData = useMemo(
    () => tableData?.entity_list || [],
    [tableData?.entity_list]
  );

  // Auto-switch tab if the selected tab is removed
  useEffect(() => {
    if (
      tabsData &&
      tabsData.length > 0 &&
      !tabsData.some(
        (tab) =>
          tab.tab_name?.toLowerCase() === selectedTab?.tab_name?.toLowerCase()
      )
    ) {
      // Try to select 'ALL' if it exists
      const allTab = tabsData.find(
        (tab) => tab.tab_name?.toLowerCase() === "all"
      );
      if (allTab) {
        setSelectedTab(allTab || "All");
      } else {
        setSelectedTab(tabsData[0] || "All");
      }
    }
  }, [tabsData, selectedTab]);

  const totalCount = useMemo(() => {
    return Number(
      tabsData?.find((tab) => {
        const activeTab = selectedTab?.tab_name || "All";
        return (
          tab.tab_name?.toLocaleLowerCase() === activeTab.toLocaleLowerCase()
        );
      })?.count || "0"
    );
  }, [tableData, selectedTab]);

  const moveColumn = (
    columnId: string,
    showList: ColumnItem[],
    hideList: ColumnItem[]
  ) => {
    const itemToMove = showList.find((c) => c.value === columnId);

    return {
      newShow: showList.filter((c) => c.value !== columnId),
      newHide: itemToMove
        ? [...hideList.filter((c) => c.value !== columnId), itemToMove]
        : hideList,
    };
  };

  const handleSaveSettings = (columnId: string) => {
    let settingsData = filterSettingStates.settingsData;

    const columnData = settingsData.column;
    const defaultMode = isColumnDefault;

    if (defaultMode) {
      // Move for default mode
      const { newShow, newHide } = moveColumn(
        columnId,
        columnData.show_list as ColumnItem[],
        columnData.hide_list as ColumnItem[]
      );

      settingsData = {
        ...settingsData,
        column: {
          ...columnData,
          show_list: newShow,
          hide_list: newHide,
        },
      };
    } else {
      // Move inside specific TAB
      const updatedTabs = [...settingsColumnState?.tabs];
      const tab = updatedTabs[activeTabIndex];

      const { newShow, newHide } = moveColumn(
        columnId,
        tab.show_list,
        tab.hide_list
      );

      updatedTabs[activeTabIndex] = {
        ...tab,
        show_list: newShow,
        hide_list: newHide,
      };

      settingsData = {
        ...settingsData,
        column: {
          ...columnData,
          tabs: updatedTabs,
        },
      };
    }

    setSettingsData(settingsData);

    saveSettingsDataMutation.mutate(
      {
        payload: {
          entity_type: MAPPED_ENTITY_TYPE,
          mapped_entity_type: ENTITY_TYPE,
          mapped_json: settingsData,
          type: "layout",
        },
      },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({
            queryKey: ["GET_NAVIGATION_LAYOUT", ENTITY_TYPE],
          });
          fetchMeta();
        },
      }
    );
  };

  const handleRenderStatus = ({ value }: any) => {
    const statusValue = value?.toUpperCase();
    return (
      <div
        style={{
          backgroundColor: "#F0F0F0",
          color: "#757575",
          textTransform: "capitalize",
          fontSize: "0.75rem",
          fontWeight: 500,
          borderRadius: "4px",
          padding: "4px",
          width: "fit-content",
        }}
      >
        {statusValue}
      </div>
    );
  };

  const handleRenderAction = ({ row }: any) => {
    return <button onClick={() => alert(JSON.stringify(row))}>Edit</button>;
  };

  const filteredData = useMemo(() => {
    if (!searchTerm) return newData;

    return newData.filter((row: any) =>
      Object.values(row)
        .join(" ")
        .toLowerCase()
        .includes(searchTerm.toLowerCase())
    );
  }, [newData, searchTerm]);

  const handleChangeFunction = async (data: any) => {
    const payload = {
      entity_type: MAPPED_ENTITY_TYPE,
      mapped_entity_type: ENTITY_TYPE,
      mapped_json: data,
      type: "filter",
    };
    await saveLayoutAPI(payload);
    queryClient.invalidateQueries({ queryKey: ["tableTabs"] });
  };

  const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
    const payload = {
      entity_type: MAPPED_ENTITY_TYPE,
      mapped_entity_type: ENTITY_TYPE,
      mapped_json: settingsData,
      type: "layout",
    };

    saveSettingsDataMutation.mutate(
      { payload },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({
            queryKey: ["GET_NAVIGATION_LAYOUT", ENTITY_TYPE],
          });
          queryClient.invalidateQueries({
            queryKey: ["meta", ENTITY_TYPE],
          });
        },
      }
    );
  };

  return (
    <TableWrapper
      data={filteredData}
      activeTab={selectedTab}
      columns={columns && columns.length > 0 ? columns : defaultColumns}
      tableStates={tableStates}
      filterSettingStates={filterSettingStates}
      onSaveSettings={handleSaveSettings}
      featureOptions={{
        striped: true,
        compactTable: false,
        enableSorting: !enableServerSideSorting,
        enableColumnReordering: true,
        enableColumnResizing: true,
        enableRowSelection: false,
        enableServerSideSorting: enableServerSideSorting,
      }}
      // loadingOptions={{
      //   isLoading: isTableDataPending || detailsQuery.isPending,
      //   // loaderText: "Loading, Please wait...",
      // }}
      paginationOptions={{
        showPagination: true,
        paginationPosition: "top",
        paginationView: "compact",
        totalRows: totalCount,
      }}
      customRenderFn={{
        renderStatus: handleRenderStatus,
        renderAction: handleRenderAction,
      }}
      // emptyListComponent={<div>No data found</div>}
      filterOptions={{
        show: tableStates?.showTableFilter,
        component: (
          <CraftTableFilterWrapper
            tableStates={tableStates}
            columnsData={metaQuery.data || {}}
            dropdownData={dropdownFilterData || []}
            isFlatJson={metaQuery.data?.is_flat_json || false} // Added prop for sending the label instead of value in the dropdown case
            // onUpdateFilter={handleUpdateFilter}
            // onDeleteFilter={handleRemoveFilter}
            // onSaveFilter={handleSaveFilter}
            onChangeFunction={handleChangeFunction}
            filterComponentOptions={{
              showMainHeader: true,
              showTabs: true,
              isRuleEngine: true,
              tabOptions: {
                disableShareFilter: false,
                // isSingleEntity: true,
                mainFilter: {
                  showSaveButton: true,
                  showClearAllButton: true,
                },
              },
              recordFilterComponentProps: {
                save: {
                  title: "Save",
                  description: "Are you sure you want to save your changes?",
                  button: {
                    primary: "Cancel",
                    secondary: "Save",
                  },
                },
                edit: {
                  title: "Edit",
                  description: "Are you sure you want to save your changes?",
                  button: {
                    primary: "Cancel",
                    secondary: "Replace",
                  },
                },
                delete: {
                  title: "Delete",
                  description: "Are you sure you want to save your changes?",
                  button: {
                    primary: "Cancel",
                    secondary: "Delete",
                  },
                },
              },
            }}
          />
        ),
      }}
      topbarOptions={{
        tableStates,
        leftSideComponent: (
          <>
            <TableTabs
              settingsOptions={{
                showIcon: true,
                onClick: () => setShowListViewSettings(!showListViewSettings),
              }}
              activeTab={selectedTab}
              tableStates={tableStates}
              tabsData={tabsData}
              onClick={(state) => {
                setSelectedTab(state);
              }}
            />

            <QuickFilterSettings
              view="listing"
              isFlatJson={metaQuery.data?.is_flat_json || false}
              filterSettingStates={filterSettingStates}
              onClose={() => setShowListViewSettings(false)}
              columnsData={metaQuery.data || {}}
              columnsDataLoading={metaQuery.isPending}
              quickTabAttributes={quickTabAttributes?.data?.map((item) => ({
                label: item.name,
                value: item.attribute_key,
              }))}
              quickTabAttributesLoading={attributes?.data?.isLoading}
              columnTabAttributes={attributes?.data?.filter(
                (item) => item.attribute_key
              )}
              columnAttributesLoading={attributes?.data?.isLoading}
              sortingTabAttributes={attributes?.data}
              sortingTabAttributesLoading={attributes?.data?.isLoading}
              tabsApiData={settingsTabDropdownData || []}
              tabsApiDataLoading={settingsTabDropdownPending}
              onSaveSettingsData={handleSaveSettingsData}
              activeTab={selectedTab}
            />
          </>
        ),
        searchValue: searchTerm,
        onSearchChange: (val) => setSearchTerm(val),
        showFilterToggle: true,
        onFilterButtonClick: () =>
          tableStates.setShowTableFilter(!tableStates.showTableFilter),
        showColumnToggle: false,
        showSearch: false,
        showChangeLayoutToggle: false,
        showSortingToggle: false,
        // viewMoreToggle: true,
        // showCompactTableToggle: false,
      }}
    />
  );
}

export default ListingView;