import React, { useState, useEffect, useRef } from "react";
import {
  FwTabs,
  FwTab,
  FwTabPanel,
  FwSpinner,
  ToastController,
  FwToast,
  FwPagination,
  FwButton,  
  FwListOptions,
  FwPopover,
  FwIcon
} from "@freshworks/crayons/react";
import AutomationCard from "./AutomationCard";
import SummaryContent from "./SummaryContent";
import {
  getTicketCreationRules,
  getTicketUpdationRules,
  getHourlyRules,
  getAgents,
  pagination,
} from "../common";

const groupDuplicates = (rules) => {
  const grouped = {};
  rules.forEach((rule) => {
    const signature = getRuleSignature(rule);
    if (!grouped[signature]) grouped[signature] = [];
    grouped[signature].push(rule);
  });
  return Object.values(grouped);
};

const getRuleSignature = (rule) => {
  const conditions = rule.summary?.conditions || rule.conditions;
  const actions = rule.summary?.actions || rule.actions;
  return JSON.stringify({
    conditions,
    actions,
  });
};

const Filterrecords = async (automationTypeId, newRulePloadDB3) => {
  let allRecords = [];
  let nextMarker = null;

  try {
    do {
      const queryObj = { query: { automation_type_id: automationTypeId } };
      if (nextMarker) queryObj.next = { marker: nextMarker };

      const response = await newRulePloadDB3.getAll(queryObj);
      if (!response.records || !Array.isArray(response.records)) break;

      const filtered = response.records
        .map((record) => ({
          ...record.data,
          display_id: record.display_id,
          rule_id: record.data.rule_id,
          automation_type_id: record.data.automation_type_id,
          id: record.data.rule_id || record.data.id,
        }))
        .filter((record) => record.active === "true");

      allRecords = allRecords.concat(filtered);

      nextMarker = response.links?.next?.marker || null;
    } while (nextMarker);

    console.log(`✅ Filtered Records for Type ${automationTypeId}:`, allRecords);
    return allRecords;
  } catch (error) {
    console.error("❌ Error fetching filtered records:", error);
    return [];
  }
};

const AutomationTabs = ({ client }) => {
  const [isRulesDBReady, setIsRulesDBReady] = useState(false);
  const [loadingBannerVisible, setLoadingBannerVisible] = useState(true);
  const intervalIdRef = useRef(null);
  const [showSearchHint, setShowSearchHint] = useState(false);

  const [searchTerm, setSearchTerm] = useState("");
  const [searchQuery, setSearchQuery] = useState("");
  const [searchTriggered, setSearchTriggered] = useState(false);

  const [activeTab, setActiveTab] = useState("ticketcreate");
  const [tabsInitialized, setTabsInitialized] = useState(false);
  const modalRef = useRef(null);

  const [ticketCreationRules, setTicketCreationRules] = useState([]);
  const [ticketUpdateRules, setTicketUpdateRules] = useState([]);
  const [hourlyTriggerRules, setHourlyTriggerRules] = useState([]);

  const [loadingTabs, setLoadingTabs] = useState({
    ticketcreate: false,
    ticketupdate: false,
    hourly: false,
  });

  const [agent, setAgent] = useState([]);

  const rulesPerPage = 30;

  const [currentPage, setCurrentPage] = useState({
    ticketcreate: 1,
    ticketupdate: 1,
    hourly: 1,
  });

  const toast = useRef(ToastController({ position: "top-center" }));

  const newRulePloadDB5 = useRef(null);

  const ticketCreate = 1;
  const ticketUpdate = 4;
  const hourlyTriggers = 3;

  const [fetchFromApi, setFetchFromApi] = useState(true);

  const [showPagination, setShowPagination] = useState(false);

  const [ticketCreationRuleGroups, setTicketCreationRuleGroups] = useState([]);
  const [ticketUpdateRuleGroups, setTicketUpdateRuleGroups] = useState([]);
  const [hourlyRuleGroups, setHourlyRuleGroups] = useState([]);

  useEffect(() => {
    setShowPagination(false);
    const timer = setTimeout(() => {
      setShowPagination(true);
    }, 2000);
    return () => clearTimeout(timer);
  }, [activeTab, currentPage]);

  useEffect(() => {
    const initializeDatabase = async () => {
      console.log("🟡 Initializing database...");
      const entity = await client.db.entity({ version: "v1" });
      newRulePloadDB5.current = entity.get("newRulePloadDB5");

      const agentdaa = await getAgents(client);
      console.log("Available agent :", agentdaa);
      setAgent(agentdaa);

      try {
        const tabData = await client.db.get("TabDB");
        if (!tabData || !tabData.LastVisitedTab) {
          await client.db.set("TabDB", { LastVisitedTab: "ticketcreate" });
          console.log("🟢 No tab stored before. Defaulting to 'ticketcreate'");
          setActiveTab("ticketcreate");
        } else {
          console.log("🟢 Loaded tab from DB:", tabData.LastVisitedTab);
          setActiveTab(tabData.LastVisitedTab);
        }
      } catch (error) {
        console.error("❌ Error retrieving TabDB:", error);
        await client.db.set("TabDB", { LastVisitedTab: "ticketcreate" });
        setActiveTab("ticketcreate");
      } finally {
        setTabsInitialized(true);
      }
    };
    initializeDatabase();
  }, [client]);

  useEffect(() => {
    setCurrentPage((prev) => ({
      ...prev,
      [activeTab]: 1,
    }));
  }, [activeTab]);

  const handlePageChange = (tab) => (event) => {
    setCurrentPage((prev) => ({
      ...prev,
      [tab]: event.detail.page,
    }));
  };

  useEffect(() => {
    const fwTabs = document.querySelector("fw-tabs");
    const saveActiveTab = async (e) => {
      const newActiveTab = e.target.panel;
      setActiveTab(newActiveTab);
      try {
        let tabData = (await client.db.get("TabDB")) || {};
        tabData.LastVisitedTab = newActiveTab;
        await client.db.set("TabDB", tabData);
      } catch (error) {
        console.error(`❌ Error setting active tab in DB:`, error);
      }
    };
    if (fwTabs) {
      fwTabs.addEventListener("fwChange", saveActiveTab);
    }
    return () => {
      if (fwTabs) {
        fwTabs.removeEventListener("fwChange", saveActiveTab);
      }
    };
  }, [client]);

  const fetchTabData = async (tab) => {
    if (
      (tab === "ticketcreate" && ticketCreationRules.length > 0) ||
      (tab === "ticketupdate" && ticketUpdateRules.length > 0) ||
      (tab === "hourly" && hourlyTriggerRules.length > 0)
    ) {
      return;
    }
    setLoadingTabs((prev) => ({ ...prev, [tab]: true }));
    if (!newRulePloadDB5.current && !fetchFromApi) {
      const entity = await client.db.entity({ version: "v1" });
      newRulePloadDB5.current = entity.get("newRulePloadDB5");
    }
    try {
      if (fetchFromApi) {
        if (tab === "ticketcreate") {
          await getTicketCreationRules(client, (data) => {
            setTicketCreationRules(data);
          });
        } else if (tab === "ticketupdate") {
          await getTicketUpdationRules(client, (data) => {
            setTicketUpdateRules(data);
          });
        } else if (tab === "hourly") {
          await getHourlyRules(client, (data) => {
            setHourlyTriggerRules(data);
          });
        }
      } else {
        if (!newRulePloadDB5.current) {
          console.error("❌ Entity DB reference not initialized.");
          return;
        }
        if (tab === "ticketcreate") {
          const entticketcreate = await Filterrecords(ticketCreate, newRulePloadDB5.current);
          setTicketCreationRules(entticketcreate);
        } else if (tab === "ticketupdate") {
          const entticketupdate = await Filterrecords(ticketUpdate, newRulePloadDB5.current);
          setTicketUpdateRules(entticketupdate);
        } else if (tab === "hourly") {
          const enthourly = await Filterrecords(hourlyTriggers, newRulePloadDB5.current);
          setHourlyTriggerRules(enthourly);
        }
      }
    } catch (err) {
      console.error("❌ Error fetching data for tab:", tab, err);
    } finally {
      setLoadingTabs((prev) => ({ ...prev, [tab]: false }));
    }
  };

  useEffect(() => {
    if (!tabsInitialized) return;
    fetchTabData(activeTab);
    setCurrentPage((prev) => ({
      ...prev,
      [activeTab]: 1,
    }));
  }, [activeTab, fetchFromApi, tabsInitialized]);

  const fetchData = async () => {
    setLoadingTabs((prev) => ({ ...prev, [activeTab]: true }));
    if (fetchFromApi) {
      if (activeTab === "ticketcreate") {
        await getTicketCreationRules(client, setTicketCreationRules);
      } else if (activeTab === "ticketupdate") {
        await getTicketUpdationRules(client, setTicketUpdateRules);
      } else if (activeTab === "hourly") {
        await getHourlyRules(client, setHourlyTriggerRules);
      }
    } else {
      if (!newRulePloadDB5.current) {
        const entity = await client.db.entity({ version: "v1" });
        newRulePloadDB5.current = entity.get("newRulePloadDB5");
      }
      if (activeTab === "ticketcreate") {
        const entticketcreate = await Filterrecords(ticketCreate, newRulePloadDB5.current);
        setTicketCreationRules(entticketcreate);
      } else if (activeTab === "ticketupdate") {
        const entticketupdate = await Filterrecords(ticketUpdate, newRulePloadDB5.current);
        setTicketUpdateRules(entticketupdate);
      } else if (activeTab === "hourly") {
        const enthourly = await Filterrecords(hourlyTriggers, newRulePloadDB5.current);
        setHourlyTriggerRules(enthourly);
      }
    }
    setLoadingTabs((prev) => ({ ...prev, [activeTab]: false }));
  };

  const checkAndSetButtonState = async () => {
    try {
      const storedvalue1 = await client.db.get("RulesDB");
      const isButtonEnabled = !!storedvalue1.stored;
      if (isButtonEnabled) {
        setIsRulesDBReady(true);
        setLoadingBannerVisible(false);

        if (intervalIdRef.current) {
          clearInterval(intervalIdRef.current);
          intervalIdRef.current = null;
        }
      } else {
        setIsRulesDBReady(true);
        setLoadingBannerVisible(false);
        if (!intervalIdRef.current) {
          intervalIdRef.current = setInterval(checkAndSetButtonState, 60000);
        }
      }
    } catch (error) {
      if (error.status === 404) {
        setIsRulesDBReady(true);
        setLoadingBannerVisible(false);
        if (intervalIdRef.current) {
          clearInterval(intervalIdRef.current);
          intervalIdRef.current = null;
        }
      } else {
        console.error("❌ Error retrieving stored value from RulesDB:", error);
      }
    }
  };

  useEffect(() => {
    checkAndSetButtonState();
    return () => {
      if (intervalIdRef.current) clearInterval(intervalIdRef.current);
    };
  }, []);

  const getFilteredRules = (rules) => {
    if (!searchQuery.trim()) return rules;

    return rules.filter(
      (rule) =>
        rule.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        rule.description?.toLowerCase().includes(searchQuery.toLowerCase())
    );
  };

  const flattenGroups = (groups) => groups.flat();

  const getPaginatedRules = (rules, tab) => {
    const filtered = getFilteredRules(rules);
    return pagination(filtered, currentPage[tab]);
  };

  const AnimatedSearchInput = () => {
    const [expanded, setExpanded] = useState(false);
    return (
      <div
        style={{
          width: expanded ? "100%" : "40%",
          transition: "width 0.3s ease-in-out",
          padding: "6px",
          maxWidth: "500px",
        }}
      >
        <fw-input
          icon-left="search"
          hint-text="Please Enter Keyword to Search"
          warning-text="Please Enter Keyword to Search"
          error-text="Enter a Rule"
          state="normal"
          placeholder="Search Rules"
          clear-input
          style={{ width: "100%" }}
          onFocus={() => setExpanded(true)}
          onBlur={() => setExpanded(false)}
          onInput={(e) => {
            setSearchTerm(e.target.value);
            if (showSearchHint) setShowSearchHint(false);
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              if (!searchTerm.trim()) {
                setShowSearchHint(true);
                return;
              }
              setShowSearchHint(false);
              setSearchQuery(searchTerm);
            }
          }}
          value={searchTerm}
        />
      </div>
    );
  };

  const searchInputs = (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        marginBottom: 10,
        marginLeft: 20,
        marginTop: 15,
        maxWidth: "100%",
        gap: "20px",
      }}
    >
      <AnimatedSearchInput />
    </div>
  );

  const renderRulesOrGroups = () => {
    let groups = [];
    let flatRules = [];

    if (activeTab === "ticketcreate") {
      groups = ticketCreationRuleGroups;
      flatRules = ticketCreationRules;
    } else if (activeTab === "ticketupdate") {
      groups = ticketUpdateRuleGroups;
      flatRules = ticketUpdateRules;
    } else if (activeTab === "hourly") {
      groups = hourlyRuleGroups;
      flatRules = hourlyTriggerRules;
    }

    if (loadingTabs[activeTab]) {
      return (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "200px",
          }}
        >
          <FwSpinner size="medium" color="green" />
        </div>
      );
    }

    if (groups.length > 0) {
      const flattenedFiltered = getFilteredRules(flattenGroups(groups));
      const paginatedRules = pagination(flattenedFiltered, currentPage[activeTab]);
      const paginatedRuleIds = new Set(paginatedRules.map((r) => r.id));

      return (
        <div style={{ marginLeft: "10", marginRight: "auto" }}>
          {groups.map((group, idx) => {
            const rulesToShow = group.filter((rule) => paginatedRuleIds.has(rule.id));
            if (rulesToShow.length === 0) return null;

            return (
              <div key={`group-${idx}`} style={{ marginBottom: "12px" }}>
                {rulesToShow.map((rule, i) => (
                  <div
                    key={rule.id}
                    className="fw-card-1"
                    style={{
                      marginBottom: "10px",
                      marginTop: i === 0 ? "10px" : "2px",
                      padding: "5px 8px",
                      marginLeft: "20px",
                      borderRadius: "4px",
                    }}
                  >
                    <AutomationCard
                      rule={rule}
                      index={i + 1}
                      isFirstInGroup={i === 0}
                      onDelete={() =>
                        deleteRule(rule, flattenGroups(groups))
                      }
                      activeTab={activeTab}
                      onSelect={openRuleDetails}
                      agent={agent}
                    />
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      );
    } else {
      const filteredFlatRules = getFilteredRules(flatRules);
      const paginatedFlatRules = pagination(filteredFlatRules, currentPage[activeTab]);

      if (paginatedFlatRules.length === 0) {
        return (
          <p style={{ textAlign: "center", marginTop: "20px" }}>
            No Rules Found Matched Your Search: {searchTerm}
          </p>
        );
      }

      return paginatedFlatRules.map((rule, idx) => (
        <div
          key={rule.id || idx}
          className="fw-card-1"
          style={{
            marginBottom: "5px",
            marginTop: "10px",
            padding: "5px 8px",
            marginLeft: 10,
            marginRight: "auto",
          }}
        >
          <AutomationCard
            rule={rule}
            index={idx + 1}
            isFirstInGroup={true}
            onDelete={() => deleteRule(rule, filteredFlatRules)}
            activeTab={activeTab}
            onSelect={openRuleDetails}
            agent={agent}
          />
        </div>
      ));
    }
  };

  const deleteRule = async (rule, allRulesList) => {
    const { id } = rule;
    const matchedRecord = allRulesList.find((rec) => rec.id === id);

    let automationTypeId;
    switch (activeTab) {
      case "ticketcreate":
        automationTypeId = ticketCreate;
        break;
      case "ticketupdate":
        automationTypeId = ticketUpdate;
        break;
      case "hourly":
        automationTypeId = hourlyTriggers;
        break;
      default:
        console.error("Unknown active tab: ", activeTab);
        return;
    }

    const targetDisplayId = matchedRecord ? matchedRecord.display_id : undefined;
    if (targetDisplayId && newRulePloadDB5.current) {
      try {
        await newRulePloadDB5.current.delete(targetDisplayId);
      } catch (err) {
        console.error("❌ Error deleting entity record:", err);
      }
    } else if (!newRulePloadDB5.current) {
      console.error("❌ Entity DB reference not initialized yet.");
    }

    try {
      const response = await client.request.invokeTemplate("deleterule", {
        context: {
          automationid: automationTypeId,
          ruleid: id,
        },
      });

      if (response.status === 204) {
        if (activeTab === "ticketcreate") {
          setTicketCreationRules(ticketCreationRules.filter((r) => r.id !== id));
          setTicketCreationRuleGroups([]);
        } else if (activeTab === "ticketupdate") {
          setTicketUpdateRules(ticketUpdateRules.filter((r) => r.id !== id));
          setTicketUpdateRuleGroups([]);
        } else if (activeTab === "hourly") {
          setHourlyTriggerRules(hourlyTriggerRules.filter((r) => r.id !== id));
          setHourlyRuleGroups([]);
        }
        toast.current.trigger({ type: "success", content: "Rule deleted successfully!" });
      } else {
        toast.current.trigger({ type: "error", content: "Failed to delete rule." });
      }
    } catch (error) {
      console.error("Error deleting rule:", error);
      toast.current.trigger({ type: "error", content: "Error deleting rule." });
    }
  };

  const openRuleDetails = (rule) => {
    // Implement as needed
  };

  const closeRuleDetails = () => {
    // Implement as needed
  };

  const handleFilterApiClick = () => {
    if (activeTab === "ticketcreate") {
      const grouped = groupDuplicates(ticketCreationRules);
      const duplicateGroups = grouped
        .filter((group) => group.length > 1)
        .sort((a, b) => b.length - a.length);
      setTicketCreationRuleGroups(duplicateGroups);
      setCurrentPage((prev) => ({ ...prev, ticketcreate: 1 }));
      toast.current.trigger({
        type: "success",
        content: `Grouped Ticket Creation Rules into ${duplicateGroups.length} duplicate groups.`,
      });
    } else if (activeTab === "ticketupdate") {
      const grouped = groupDuplicates(ticketUpdateRules);
      const duplicateGroups = grouped
        .filter((group) => group.length > 1)
        .sort((a, b) => b.length - a.length);
      setTicketUpdateRuleGroups(duplicateGroups);
      setCurrentPage((prev) => ({ ...prev, ticketupdate: 1 }));
      toast.current.trigger({
        type: "success",
        content: `Grouped Ticket Update Rules into ${duplicateGroups.length} duplicate groups.`,
      });
    } else if (activeTab === "hourly") {
      const grouped = groupDuplicates(hourlyTriggerRules);
      const duplicateGroups = grouped
        .filter((group) => group.length > 1)
        .sort((a, b) => b.length - a.length);
      setHourlyRuleGroups(duplicateGroups);
      setCurrentPage((prev) => ({ ...prev, hourly: 1 }));
      toast.current.trigger({
        type: "success",
        content: `Grouped Hourly Rules into ${duplicateGroups.length} duplicate groups.`,
      });
    }
  };

  const getPaginatedItemCount = () => {
    let rules = [];
    if (activeTab === "ticketcreate") rules = ticketCreationRules;
    else if (activeTab === "ticketupdate") rules = ticketUpdateRules;
    else if (activeTab === "hourly") rules = hourlyTriggerRules;

    let groups = [];
    if (activeTab === "ticketcreate") groups = ticketCreationRuleGroups;
    else if (activeTab === "ticketupdate") groups = ticketUpdateRuleGroups;
    else if (activeTab === "hourly") groups = hourlyRuleGroups;

    const flatList = groups.length > 0 ? flattenGroups(groups) : rules;
    const filtered = getFilteredRules(flatList);
    const paginated = pagination(filtered, currentPage[activeTab]);

    return paginated.length;
  };

  const getCurrentTotalCount = () => {
    if (activeTab === "ticketcreate") {
      if (ticketCreationRuleGroups.length > 0) {
        return flattenGroups(ticketCreationRuleGroups).filter(
          (r) =>
            !searchQuery.trim() ||
            r.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
            r.description?.toLowerCase().includes(searchQuery.toLowerCase())
        ).length;
      }
      return getFilteredRules(ticketCreationRules).length;
    } else if (activeTab === "ticketupdate") {
      if (ticketUpdateRuleGroups.length > 0) {
        return flattenGroups(ticketUpdateRuleGroups).filter(
          (r) =>
            !searchQuery.trim() ||
            r.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
            r.description?.toLowerCase().includes(searchQuery.toLowerCase())
        ).length;
      }
      return getFilteredRules(ticketUpdateRules).length;
    } else if (activeTab === "hourly") {
      if (hourlyRuleGroups.length > 0) {
        return flattenGroups(hourlyRuleGroups).filter(
          (r) =>
            !searchQuery.trim() ||
            r.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
            r.description?.toLowerCase().includes(searchQuery.toLowerCase())
        ).length;
      }
      return getFilteredRules(hourlyTriggerRules).length;
    }
    return 0;
  };

  return (
    <>
      <h2>Automations - Rules</h2>

      <div>
        <FwButton color="secondary" onFwClick={handleFilterApiClick}>
          Filter API (Based on Duplicates (High to Low))
        </FwButton>
      </div>

      {showSearchHint && (
        <p style={{ color: "red", marginTop: "4px", fontSize: "0.9em" }}>
          Please enter a search term before searching.
        </p>
      )}

<div>
      <FwPopover sameWidth='false' placement='bottom-start'>
        <FwButton slot='popover-trigger' color='secondary' showCaretIcon>
          <FwIcon slot='before-label' name={selectedRule.graphicsProps.name}></FwIcon>
          <span id='buttonContent'>{selectedRule.text}</span>
        </FwButton>

        <div slot='popover-content'>
          <span
            style={{ fontStyle: 'italic' }}
            className='row fw-flex fw-type-xs fw-p-4 fw-type-semibold'
          >
            Choose Rule
          </span>
          <hr style={{ margin: '0px' }} />
          <FwListOptions
            onFwChange={onRuleChange}
            selectedOptions={[selectedRule]}
            options={rulesData}
            variant='icon'
          />
        </div>
      </FwPopover>
    </div>

      {loadingBannerVisible && !isRulesDBReady && (
        <div style={{ display: "flex", alignItems: "center", margin: "20px 0" }}>
          <FwSpinner size="medium" color="green" />
          <span style={{ marginLeft: "8px" }}>Waiting for rules to be ready...</span>
        </div>
      )}

      {isRulesDBReady && tabsInitialized && (
        <div style={{ width: "60%", marginLeft: 10, marginRight: "auto" }}>
          <div
            style={{ display: "flex", justifyContent: "flex-end", marginTop: 5, marginBottom: 15 }}
          >
            <FwButton color="secondary" onFwClick={fetchData} disabled={!isRulesDBReady}>
              {fetchFromApi ? "Recent Data" : "Get Entity Data"}
            </FwButton>
          </div>

          <FwTabs activeTab={activeTab}>
            <FwTab slot="tab" panel="ticketcreate" onClick={() => setActiveTab("ticketcreate")}>
              Ticket Creation
            </FwTab>
            <FwTab slot="tab" panel="ticketupdate" onClick={() => setActiveTab("ticketupdate")}>
              Ticket Updates
            </FwTab>
            <FwTab slot="tab" panel="hourly" onClick={() => setActiveTab("hourly")}>
              Hourly Triggers
            </FwTab>

            <FwTabPanel name="ticketcreate">
              {searchInputs}
              {renderRulesOrGroups()}
              {showPagination && getPaginatedItemCount() > 0 && (
                <div style={{ marginTop: 10 }}>
                  <div style={{ display: "flex", justifyContent: "center" }}>
                    <FwPagination
                      per-page={rulesPerPage}
                      total={getCurrentTotalCount()}
                      page={currentPage.ticketcreate}
                      onFwChange={handlePageChange("ticketcreate")}
                    />
                  </div>
                </div>
              )}
            </FwTabPanel>

            <FwTabPanel name="ticketupdate">
              {searchInputs}
              {renderRulesOrGroups()}
              {showPagination && getPaginatedItemCount() > 0 && (
                <div style={{ marginTop: 10 }}>
                  <div style={{ display: "flex", justifyContent: "center" }}>
                    <FwPagination
                      per-page={rulesPerPage}
                      total={getCurrentTotalCount()}
                      page={currentPage.ticketupdate}
                      onFwChange={handlePageChange("ticketupdate")}
                    />
                  </div>
                </div>
              )}
            </FwTabPanel>

            <FwTabPanel name="hourly">
              {searchInputs}
              {renderRulesOrGroups()}
              {showPagination && getPaginatedItemCount() > 0 && (
                <div style={{ marginTop: 10 }}>
                  <div style={{ display: "flex", justifyContent: "center" }}>
                    <FwPagination
                      per-page={rulesPerPage}
                      total={getCurrentTotalCount()}
                      page={currentPage.hourly}
                      onFwChange={handlePageChange("hourly")}
                    />
                  </div>
                </div>
              )}
            </FwTabPanel>
          </FwTabs>
        </div>
      )}

      <FwToast />
    </>
  );
};

export default AutomationTabs;


heap.js:2 
 Uncaught (in promise) TypeError: Failed to fetch
    at heap.js:2:279937
    at h (heap.js:2:2930)
    at Generator.<anonymous> (heap.js:2:4267)
    at Generator.next (heap.js:2:3293)
    at e (heap.js:2:10301)
    at s (heap.js:2:10504)
    at heap.js:2:10563
    at new Promise (<anonymous>)
    at e.<anonymous> (heap.js:2:10444)
    at e.sendRequest (heap.js:2:280676)

index.js:55 This User has Access .... Now Opening the App.
AutomationTabs.js:697 Uncaught ReferenceError: selectedRule is not defined
    at AutomationTabs (AutomationTabs.js:697:45)
index.js:42 The above error occurred in the <AutomationTabs> component:

    at AutomationTabs (http://localhost:10001/iframe/agent/scripts/main.d8487535.js:936:22)
    at App (http://localhost:10001/iframe/agent/scripts/main.d8487535.js:51:21)
    at Root (http://localhost:10001/iframe/agent/scripts/main.d8487535.js:2188:21)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
index.js:44 Error in RoleAccess: ReferenceError: selectedRule is not defined
    at AutomationTabs (AutomationTabs.js:697:45)
index.js:45 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at Root (http://localhost:10001/iframe/agent/scripts/main.d8487535.js:2188:21)
heap.js:2 
 POST https://c.us.heap-api.com/api/capture/v2/track net::ERR_BLOCKED_BY_CLIENT


why this error occurs?