import React, { useEffect, useState } from "react";
import { Box, IconButton, Typography } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import {
  FilterDrawerProps,
  FilterMasterStateProps,
  UpdatedFilterStateProps,
} from "../../types/filter";

import ConfirmModal, { InputField } from "../common/confirm-modal";
import CustomTabPanel from "./components/tabs/custom-tab-panel";
import CustomTabs, { TabItem } from "./components/tabs/index";
import MainFilter from "./components/main-filter";
import SavedFilter from "./components/saved-filter";
import AttributesFilter from "./components/attributes-filter";
import { filterStyles } from "./style";

export function TableFilter({
  onClose,
  columnsData,
  tableStates,
  onDeleteFilter,
  onSaveFilter,
  onUpdateFilter,
  dropdownData,
}: FilterDrawerProps) {
  const [tabValue, setTabValue] = useState(0);
  const [editMode, setEditMode] = useState(false);
  const [selectedFilters, setSelectedFilters] = useState<
    UpdatedFilterStateProps[]
  >([]);

  // remove this
  const [saveFilterModalOpen, setSaveFilterModalOpen] = useState(false);
  const [deleteFilterModalOpen, setDeleteFilterModalOpen] = useState(false);

  const [searchTerm, setSearchTerm] = useState<string>("");

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

  const filterNameInput: InputField = {
    label: "Filter Name",
    placeholder: 'e.g., "Website Leads - This Week"',
    required: true,
    type: "text",
  };

  useEffect(() => {
    if (!columnsData || !columnsData.column_list) {
      setSelectedFilters([]);
      return;
    }

    const updated = filters?.map((filter) => {
      const matchingColumn = columnsData.column_list.find(
        (column) => column.attribute_key === filter.filter_attribute
      );
      const matchingDropdownList =
        columnsData.operation_list[matchingColumn?.data_type || "text"];

      return {
        ...filter,
        id: matchingColumn?.id ?? "",
        name: matchingColumn?.name,
        data_type: matchingColumn?.data_type,
        dropdown_list: matchingDropdownList,
      };
    });

    setSelectedFilters(updated || []);
  }, [filters, columnsData, tabValue]);

  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
    setTabValue(newValue);
    if (newValue === 0) {
      setEditMode(false);
      setSelectedFilters([]);
    }
  };

  //FOR TABS
  const tabItems: TabItem[] = [
    { label: "Filter" },
    { label: "Saved Filter" },
    { label: "Attributes" },
  ];

  const handleTabCrossClick = (index: number) => {
    const commonStateReset = () => {
      setFilters([]);
      setSelectedFilters([]);
      setFilterMaster(
        (prev) =>
          ({ ...prev, activeFilterTabIndex: -1 } as FilterMasterStateProps)
      );
    };

    const indexMapper: { [key: number]: () => void } = {
      0: () => commonStateReset(),
      1: () => {
        commonStateReset();
        setEditMode(false);
        setFilterMaster(
          (prev) =>
            ({
              ...prev,
              saved_filters: { selectedId: "", selectedName: "" },
            } as FilterMasterStateProps)
        );
      },
      2: () => {
        commonStateReset();
        setFilterMaster(
          (prev) =>
            ({
              ...prev,
              attributes: {
                radio: [],
                selected: "",
              },
            } as FilterMasterStateProps)
        );
      },
    };

    indexMapper[index] && indexMapper[index]();
  };

  return (
    <Box sx={filterStyles.filterContainer}>
      <Box sx={filterStyles.filterMainHeader}>
        <Typography variant="h6" fontWeight="bold" fontSize="18px">
          Filter
        </Typography>
        <IconButton
          onClick={(e) => {
            e.stopPropagation();
            onClose && onClose();
            setShowFilterOption(false);
          }}
          aria-label="close"
        >
          <CloseIcon fontSize="small" />
        </IconButton>
      </Box>

      <CustomTabs
        value={tabValue}
        onChange={handleTabChange}
        tabItems={tabItems}
        activeFilterIndex={filterMaster?.activeFilterTabIndex ?? 0}
        handleCrossClick={handleTabCrossClick}
      />

      <CustomTabPanel value={tabValue} index={0} sx={{ p: "1.5rem 0.75rem" }}>
        <MainFilter
          columnsData={columnsData}
          tableStates={tableStates}
          selectedFilters={selectedFilters}
          setSelectedFilters={setSelectedFilters}
          setSavedFilterModalOpen={setSaveFilterModalOpen}
          dropdownData={dropdownData}
        />
      </CustomTabPanel>

      <CustomTabPanel value={tabValue} index={1} sx={{ p: "1.5rem 0.75rem" }}>
        <SavedFilter
          columnsData={columnsData}
          tableStates={tableStates}
          selectedFilters={selectedFilters}
          setSelectedFilters={setSelectedFilters}
          editMode={editMode}
          setEditMode={setEditMode}
          setDeleteFilterModalOpen={setDeleteFilterModalOpen}
          setSavedFilterModalOpen={setSaveFilterModalOpen}
          dropdownData={dropdownData}
          tabValue={tabValue}
        />
      </CustomTabPanel>

      <CustomTabPanel value={tabValue} index={2} sx={{ p: "1.5rem 0.75rem" }}>
        <AttributesFilter
          columnsData={columnsData}
          tableStates={tableStates}
          dropdownData={dropdownData}
          searchTerm={searchTerm}
          setSearchTerm={setSearchTerm}
          tabValue={tabValue}
        />
      </CustomTabPanel>

      <ConfirmModal
        open={saveFilterModalOpen}
        onClose={() => setSaveFilterModalOpen(false)}
        title={editMode ? "Replace Existing Filter ?" : "Save Filter"}
        description={
          editMode
            ? "You already have a filter applied. Applying a new filter will replace the current one. Do you want to continue?"
            : "Give a name to this filter so you can easily reuse it later."
        }
        buttons={[
          {
            label: "Cancel",
            onClick: () => {
              setSaveFilterModalOpen(false);
            },
            variant: "outlined",
            color: "primary",
            sx: {
              color: "#7A5AF8",
              border: `1px solid #7A5AF8`,
            },
          },
          {
            label: editMode ? "Replace Filter" : "Save",
            onClick: (inputValue) => {
              if (editMode) {
                onUpdateFilter && onUpdateFilter(inputValue || "");
                setSaveFilterModalOpen(false);
                setEditMode(false);
                return;
              }

              onSaveFilter && onSaveFilter(inputValue || "");
              setSaveFilterModalOpen(false);

              setTabValue(1);
            },
            variant: "contained",
            color: "primary",
            sx: {
              color: "white",
              backgroundColor: editMode ? "#7A5AF8" : "#7A5AF8",
            },
          },
        ]}
        input={editMode ? undefined : filterNameInput}
      />

      <ConfirmModal
        open={deleteFilterModalOpen}
        onClose={() => setDeleteFilterModalOpen(false)}
        title="Delete Saved Filter?"
        description={`You're about to delete the saved filter: "${
          filterToDelete?.label || "[Filter Name]"
        }". This action cannot be undone. Are you sure you want to continue?`}
        buttons={[
          {
            label: "Cancel",
            onClick: () => {
              setDeleteFilterModalOpen(false);
            },
            variant: "outlined",
            color: "primary",
            sx: { color: "#7A5AF8", border: `1px solid #7A5AF8` },
          },
          {
            label: "Delete",
            onClick: () => {
              onDeleteFilter && onDeleteFilter();
              setDeleteFilterModalOpen(false);
              setEditMode && setEditMode(false);
              setSelectedFilters([]);
              setFilters([]);
              setFilterMaster(
                (prev) =>
                  ({
                    ...prev,
                    activeFilterTabIndex: -1,
                  } as FilterMasterStateProps)
              );
            },
            variant: "contained",
            sx: {
              color: "white",
              backgroundColor: "#f63d68",
              "&:hover": { backgroundColor: "#f63d68" },
            },
          },
        ]}
        maxWidth="xs"
      />
    </Box>
  );
}