import { useEffect, useMemo, useState } from "react";
import { useCraftTable } from "./libs/hooks/useCraftTable";
import { TableTabs } from "./components/tabs";
import { useDefaultColumns } from "./libs/hooks/useDefaultColumns";
import TableWrapper from "./components/index-table";
import { entityTableMetaMaster } from "./libs/utils/apiColumn";
import {
  useCommonDropdownAPI,
  useDeleteFilterAPI,
  useEntityTableAPI,
  useSavedFilterAPI,
  useGetSettingsDataAPI,
  useSettingsDropDownAPI,
  useUpdateFilterAPI,
  useSaveSettingsDataAPI,
} from "./libs/hooks/useEntityTableAPI";
import {
  useDetailsQueryAPI,
  useFetchData,
} from "./libs/hooks/useEntityTableHooks";
import LoginButton from "./components/login";
import { CraftTableFilter } from ".";
import { useCraftTableFilterSettings } from "./libs/hooks/useCraftTableFilterSettings";
import { QuickFilterSettings } from "./components/table-settings";
import { SettingsDataProps } from "./types/filter-settings";
import { FilterMasterStateProps } from "./types/filter";
import { ColumnDef } from "@tanstack/react-table";
import { ENTITY_TYPE } from "./libs/utils/common";

function App() {
  // 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(50, 3, 2));

  const [selectedTab, setSelectedTab] = useState("ALL");

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

  const { filters, setFilters, filterMaster, setFilterMaster, filterToDelete } =
    tableStates;

  const { showListViewSettings, setShowListViewSettings, setSettingsData } =
    filterSettingStates;

  const { defaultColumns } = useDefaultColumns();

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

  const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
  const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
  const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
  const { saveSettingsDataMutation } = useSaveSettingsDataAPI(ENTITY_TYPE);
  const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
  const { settingsTabDropdownData, settingsTabDropdownPending } =
    useSettingsDropDownAPI({
      entity_type: ENTITY_TYPE,
      column: filterSettingStates?.quickTabStates?.attribute,
      sort_by: filterSettingStates?.quickTabStates?.sorting,
    });

  const { getSettingsAPIData } = useGetSettingsDataAPI(ENTITY_TYPE);

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

    const fetchMeta = async () => {
      try {
        const { res: allColumns } = await entityTableMetaMaster(ENTITY_TYPE);

        const savedColumnSettings = filterSettingStates.settingsData?.column;

        const getOrderedColumns = (
          showList: { value: string }[],
          filteredColumns: any[]
        ) => {
          // Build ordered columns using showList and filteredColumns
          return showList
            ?.map((showItem) => {
              return filteredColumns.find(
                (col) => col?.accessorKey === showItem?.value
              );
            })
            ?.filter((col): col is ColumnDef<any> => col !== undefined); // Ensure non-undefined columns are returned
        };

        if (
          savedColumnSettings &&
          !savedColumnSettings.isDefault &&
          savedColumnSettings.tabs
        ) {
          // Tab-wise view: find the active tab and use its show_list
          const activeTabSettings = savedColumnSettings.tabs.find(
            (tab) => tab.tab_name.toLowerCase() === selectedTab.toLowerCase()
          );

          if (activeTabSettings?.show_list) {
            const visibleColumns = new Set(
              activeTabSettings.show_list.map((c) => c.value)
            );

            // First, filter columns based on visibleColumns
            const filteredColumns = allColumns.filter((col: any) =>
              visibleColumns.has(col?.accessorKey)
            );
            setColumns(
              getOrderedColumns(activeTabSettings.show_list, filteredColumns)
            );
          } else {
            // Fallback if no specific settings for the active tab are found
            setColumns(allColumns);
          }
        } else if (savedColumnSettings && savedColumnSettings.show_list) {
          // Default view: use the main show_list
          const visibleColumns = new Set(
            savedColumnSettings.show_list.map((c) => c.value)
          );
          const filtered = allColumns.filter((col: any) =>
            visibleColumns.has(col?.accessorKey)
          );

          setColumns(
            getOrderedColumns(savedColumnSettings.show_list, filtered)
          );
        } else {
          // No settings found, use all columns
          setColumns(allColumns);
        }
      } catch (error) {
        console.error("Failed to fetch metadata:", error);
      }
    };

    fetchMeta();
  }, [selectedTab]);

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

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

  //For server side sorting
  const enableServerSideSorting = true;

  const { tableData } = useEntityTableAPI({
    page: 0,
    size: 50,
    entity_type: ENTITY_TYPE,
    tabs: {
      columnName:
        getSettingsAPIData?.layout_json?.quick_tab?.attribute || "status",
      sortBy: getSettingsAPIData?.layout_json?.quick_tab?.sorting || "ASC",
      value:
        selectedTab.toLowerCase() === "all" ? "" : selectedTab.toLowerCase(),
    },
    quickFilter: tableStates.filters,
    sortby: [
      {
        sortColum: "name",
        sortType: "ASC",
      },
    ],
    attributeFilter: [],
  });

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

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

  const totalCount = useMemo(() => {
    return Number(
      tableData?.entity_tabs?.find((tab) => {
        const activeTab = selectedTab || "ALL";
        return (
          tab.tab_value?.toLocaleLowerCase() === activeTab.toLocaleLowerCase()
        );
      })?.tab_value_count || "0"
    );
  }, [tableData, selectedTab]);

  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",
        }}
      >
        {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]);

  // API to handle saving a filter
  const handleSaveFilter = (name: string) => {
    const quickFilter = filters.map((f) => ({
      filter_attribute: f.filter_attribute,
      filter_operator: f.filter_operator,
      filter_value: f.filter_value,
    }));

    const payload = {
      name,
      is_default: false,
      mapped_entity_type: ENTITY_TYPE, // For that entity type
      status: "ACTIVE",
      entity_type: "SFM", // FIXED entity type
      filterDetails: quickFilter,
    };
    const entity_type = "SFM";
    savedMutation.mutate(
      { entity_type, payload },
      {
        onSuccess: (response) => {
          const newFilterId = response?.id;
          if (newFilterId) {
            setFilterMaster(
              (prev) =>
                ({
                  ...prev,
                  saved_filters: {
                    ...prev?.saved_filters,
                    selectedId: newFilterId.toString(),
                    selectedName: name,
                  },
                  activeFilterTabIndex: 1,
                } as FilterMasterStateProps)
            );
          }
        },
      }
    );
  };

  // API to handle removing or deleting a filter
  const handleRemoveFilter = () => {
    const payload = {
      name: filterToDelete?.label,
      id: filterToDelete?.value,
      is_default: false,
      mapped_entity_type: ENTITY_TYPE,
      status: "INACTIVE",
      entity_type: "SFM",
    };
    const entity_type = "SFM";
    deleteMutation.mutate({ entity_type, payload });
  };

  //API to update the filter
  const handleUpdateFilter = () => {
    const quickFilter = filters.map((f) => ({
      filter_attribute: f.filter_attribute,
      filter_operator: f.filter_operator,
      filter_value: f.filter_value,
    }));

    const payload = {
      name: filterMaster?.saved_filters?.selectedName, // Name of the filter
      is_default: false,
      id: filterMaster?.saved_filters?.selectedId,
      mapped_entity_type: ENTITY_TYPE,
      status: "ACTIVE",
      entity_type: "SFM",
      filterDetails: quickFilter,
    };
    const entity_type = "SFM";
    updateMutation.mutate({ entity_type, payload });
  };

  const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
    const payload = {
      entity_type: "LAP",
      mapped_entity_type: ENTITY_TYPE,
      layout_json: settingsData,
    };

    saveSettingsDataMutation.mutate({ payload });
  };

  return (
    <div className="app_wrapper">
      <LoginButton />

      <TableWrapper
        data={filteredData}
        columns={columns && columns.length > 0 ? columns : defaultColumns}
        tableStates={tableStates}
        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: (
            <CraftTableFilter
              tableStates={tableStates}
              onClose={() => tableStates.setShowTableFilter(false)}
              onUpdateFilter={handleUpdateFilter}
              columnsData={metaQuery.data || {}}
              dropdownData={dropdownData || []}
              onDeleteFilter={handleRemoveFilter}
              onSaveFilter={handleSaveFilter}
            />
          ),
        }}
        topbarOptions={{
          tableStates,
          leftSideComponent: (
            <>
              <TableTabs
                columns={columns}
                settingsOptions={{
                  showIcon: true,
                  onClick: () => setShowListViewSettings(!showListViewSettings),
                }}
                activeTab={selectedTab?.toUpperCase()}
                tableStates={tableStates}
                tabsData={tabsData}
                onClick={(state) => {
                  setSelectedTab(state);
                }}
              />

              <QuickFilterSettings
                filterSettingStates={filterSettingStates}
                onClose={() => setShowListViewSettings(false)}
                columnsData={metaQuery.data || {}}
                columnsDataLoading={metaQuery.isPending}
                tabsApiData={settingsTabDropdownData || []}
                tabsApiDataLoading={settingsTabDropdownPending}
                onSaveSettingsData={handleSaveSettingsData}
              />
            </>
          ),
          searchValue: searchTerm,
          onSearchChange: (val) => setSearchTerm(val),
          showFilterToggle: true,
          onFilterButtonClick: () =>
            tableStates.setShowTableFilter(!tableStates.showTableFilter),
        }}
      />
    </div>
  );
}

export default App;