consider this scenario : 

when user type and press enter key. you have to search and when users remove the letter the search should return to normal (show all rules)

need this logic in my code. modify that part alone.

import React, { useState, useEffect, useRef } from "react";
import {
  FwTabs,
  FwTab,
  FwTabPanel,
  FwSpinner,
  ToastController,
  FwToast,
  FwPagination,
  FwButton,
  FwIcon,
  FwListOptions,
  FwPopover,
  FwModal,
} 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
    .filter(rule => rule.active) 
    .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 [loading, setLoading] = useState(false);
  const [agent, setAgent] = useState([]);
  // const [ruleViewFilter, setRuleViewFilter] = useState(ruleViewOptions[0]); 

  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;

  // ===== CHANGE: initial fetchFromApi to false to fetch entity data initially =====
  const [fetchFromApi, setFetchFromApi] = useState(false);

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

  // ======= Grouped state arrays to hold duplicate groups =======
  const [ticketCreationRuleGroups, setTicketCreationRuleGroups] = useState([]);
  const [ticketUpdateRuleGroups, setTicketUpdateRuleGroups] = useState([]);
  const [hourlyRuleGroups, setHourlyRuleGroups] = useState([]);
  // =============================================================

  // ----- NEW: rule view filter for 'All Rules' or 'Duplicate Rules' -----
  const ruleViewOptions = [
    {
      value: "all_rules",
      text: "All Rules",
      graphicsProps: { name: "list" },
    },
    {
      value: "duplicate_rules",
      text: "Duplicate Rules",
      graphicsProps: { name: "warning" },
    },
  ];
  const [ruleViewFilter, setRuleViewFilter] = useState(ruleViewOptions[0]);
  // ---------------------------------------------------------------------

  useEffect(() => {
    setShowPagination(false);

    let timer = setTimeout(() => {
      setShowPagination(true);
    }, 1000);

    return () => clearTimeout(timer);
  }, [activeTab, currentPage]);

  useEffect(() => {
    const initializeDatabase = async () => {
      console.log("🟡 Initializing database and fetching tabs...");
      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]);

  // Whenever activeTab changes, reset its page to 1
  useEffect(() => {
    setCurrentPage((prev) => ({
      ...prev,
      [activeTab]: 1,
    }));
  }, [activeTab]);

  // ===== NEW EFFECT =====
  // On activeTab or fetchFromApi change, fetch data accordingly
  useEffect(() => {
    const fetchOnTabOrModeChange = async () => {
      setLoading(true);
      if (fetchFromApi) {
        try {
          if (activeTab === "ticketcreate") {
            await getTicketCreationRules(client, setTicketCreationRules);
          } else if (activeTab === "ticketupdate") {
            await getTicketUpdationRules(client, setTicketUpdateRules);
          } else if (activeTab === "hourly") {
            await getHourlyRules(client, setHourlyTriggerRules);
          }
          await getAgents(client, setAgent);
        } catch (err) {
          console.error("Error fetching API data:", err);
        }
      } else {
        if (!newRulePloadDB5.current) {
          console.error("❌ Entity DB reference not initialized.");
          setLoading(false);
          return;
        }
        try {
          if (activeTab === "ticketcreate") {
            const data = await Filterrecords(ticketCreate, newRulePloadDB5.current);
            setTicketCreationRules(data);
          } else if (activeTab === "ticketupdate") {
            const data = await Filterrecords(ticketUpdate, newRulePloadDB5.current);
            setTicketUpdateRules(data);
          } else if (activeTab === "hourly") {
            const data = await Filterrecords(hourlyTriggers, newRulePloadDB5.current);
            setHourlyTriggerRules(data);
          }
        } catch (err) {
          console.error("Error fetching entity data:", err);
        }
      }
      setLoading(false);
    };
  
    if (tabsInitialized && isRulesDBReady) {
      fetchOnTabOrModeChange();
    }
  }, [activeTab, fetchFromApi, client, tabsInitialized, isRulesDBReady]);


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

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


  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 fetchData = async () => {

    setFetchFromApi((prev) => !prev);    
    toast.current.trigger({
      type: "info",
      content: `Fetching ${
        fetchFromApi ? "Entity Data" : "Recent API Data"
      }...`,
    });
  };

  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(false);
        setLoadingBannerVisible(true);
        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 inputRef = useRef(null);

// useEffect(() => {
//   if (inputRef.current) {
//     inputRef.current.value = searchTerm;
//   }
// }, [searchTerm]);

  const searchInputs = (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        marginBottom: 10,
        marginLeft: 20,
        marginTop: 15,
        maxWidth: "100%",
        gap: "20px",
      }}
    >
      {/* "All Rules" button on the left */}
      <div style={{ flexShrink: 0 }}>
        <FwPopover sameWidth="false" placement="bottom-start">
          <FwButton slot="popover-trigger" color="secondary" showCaretIcon>
            <FwIcon slot="before-label" name={ruleViewFilter.graphicsProps.name} />
            <span>{ruleViewFilter.text}</span>
          </FwButton>
          <div slot="popover-content" style={{ width: 220 }}>
            {/* list options code here... */}
            <span
              style={{ fontStyle: "italic" }}
              className="row fw-flex fw-type-xs fw-p-4 fw-type-semibold"
            >
              Select Rule View
            </span>
            <hr style={{ margin: 0 }} />
            <FwListOptions
              onFwChange={(event) => {
                const selected = event.detail?.meta?.selectedOptions[0];
                if (selected) {
                  setRuleViewFilter(selected);
                  setCurrentPage((prev) => ({ ...prev, [activeTab]: 1 }));

                  if (selected.value === "all_rules") {
                    setTicketCreationRuleGroups([]);
                    setTicketUpdateRuleGroups([]);
                    setHourlyRuleGroups([]);
                  } else if (selected.value === "duplicate_rules") {
                    handleFilterApiClick();
                  }
                }
              }}
              selectedOptions={[ruleViewFilter]}
              options={ruleViewOptions}
              variant="icon"
            />
          </div>
        </FwPopover>
      </div>

      <div style={{ flex: 1, display: "flex", justifyContent: "center", marginTop: 20 }}>
      <fw-input
  ref={inputRef}
  icon-left="search"
  hint-text="Type Keyword to Search"
  warning-text="Please use numbers for user ID"
  placeholder="Enter a Keyword to Search..."
  error-text="Invalid user ID"
  clear-input
  style={{
    width: "400px",
    height: "60px",
    fontSize: "18px",
  }}
  value={searchTerm}  // controlled value bound here
  onInput={(e) => {
    setSearchTerm(e.target.value);
    if (showSearchHint) setShowSearchHint(false);
  }}
  onKeyDown={(e) => {
    if (e.key === "Enter") {
      const trimmed = e.target.value.trim();
      if (!trimmed) {
        setSearchQuery("");
        setShowSearchHint(false);
      } else {
        setSearchQuery(trimmed);
        setShowSearchHint(false);
      }
    }
  }}
/>
</div>

      {/* "Add New Rule" button aligned right */}
      <div style={{ flexShrink: 0 }}>
        <FwButton color="primary" onFwClick={() => {/* Add your handler here */}}>
          Add New Rule
        </FwButton>
      </div>
    </div>
  );

  const getTotalPages = () => {
    if (ruleViewFilter.value === "duplicate_rules") {
      const groups =
        activeTab === "ticketcreate"
          ? ticketCreationRuleGroups
          : activeTab === "ticketupdate"
          ? ticketUpdateRuleGroups
          : hourlyRuleGroups;
  
      if (!groups || groups.length === 0) return 0;
  
      const paginatedGroups = [];
      let currentPageGroups = [];
      let currentGroupCount = 0;
  
      for (const group of groups) {
        const groupSize = group.length;
        if (groupSize > rulesPerPage) {
          if (currentGroupCount > 0) {
            paginatedGroups.push(currentPageGroups);
            currentPageGroups = [];
            currentGroupCount = 0;
          }
          paginatedGroups.push([group]);
        } else {
          if (currentGroupCount + groupSize <= rulesPerPage) {
            currentPageGroups.push(group);
            currentGroupCount += groupSize;
          } else {
            if (currentGroupCount > 0) {
              paginatedGroups.push(currentPageGroups);
            }
            currentPageGroups = [group];
            currentGroupCount = groupSize;
          }
        }
      }
      if (currentGroupCount > 0) paginatedGroups.push(currentPageGroups);
  
      return paginatedGroups.length;
    } else {
      const count = getCurrentTotalCount();
      return Math.ceil(count / rulesPerPage);
    }
  };

  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 (loading) {
      return (
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "200px" }}>
          <FwSpinner size="medium" color="green" />
        </div>
      );
    }
  
    if (ruleViewFilter.value === "duplicate_rules" && groups.length > 0) {
      // Create paginated group chunks according to rulesPerPage and group sizes
      const paginatedGroups = [];
      let currentPageGroups = [];
      let currentGroupCount = 0;
  
      for (const group of groups) {
        const groupSize = group.length;
        if (groupSize > rulesPerPage) {
          // Large group alone on page
          if (currentGroupCount > 0) {
            paginatedGroups.push(currentPageGroups);
            currentPageGroups = [];
            currentGroupCount = 0;
          }
          paginatedGroups.push([group]);
        } else {
          // Fit group in current page or start new page
          if (currentGroupCount + groupSize <= rulesPerPage) {
            currentPageGroups.push(group);
            currentGroupCount += groupSize;
          } else {
            if (currentGroupCount > 0) {
              paginatedGroups.push(currentPageGroups);
            }
            currentPageGroups = [group];
            currentGroupCount = groupSize;
          }
        }
      }
      if (currentGroupCount > 0) {
        paginatedGroups.push(currentPageGroups);
      }
  
      const pageIndex = currentPage[activeTab] - 1;
      const groupsToShow = paginatedGroups[pageIndex] || [];
  
      // Flatten rules shown on this page for filtering and delete operations
      const flattenedRulesOnPage = flattenGroups(groupsToShow);
      const filteredRulesOnPage = getFilteredRules(flattenedRulesOnPage);
  
      return (
        <div style={{ marginLeft: 10, marginRight: "auto" }}>
          {groupsToShow.map((group, idx) => {
            const rulesToShow = group.filter(rule =>
              filteredRulesOnPage.some(filteredRule => filteredRule.id === rule.id)
            );
  
            if (rulesToShow.length === 0) return null;
  
            return (
              <div key={`group-${pageIndex}-${idx}`} style={{ marginBottom: "12px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", }}>
                {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, flattenedRulesOnPage)}
                      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.
          </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) => {

    console.log("deleteRule called with rule:", rule);

    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) => { };

  const closeRuleDetails = () => { };

  // const handleFilterApiClick = () => {
  //   if (activeTab === "ticketcreate") {
  //     const grouped = groupDuplicates(ticketCreationRules);

  //     const duplicateGroups = grouped
  //       .filter((group) => group.length > 1)
  //       .sort((a, b) => b.length - a.length);
  //     console.log("Grouped Ticket Creation Rules (duplicates only):", duplicateGroups);
  //     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);
  //     console.log("Grouped Ticket Update Rules (duplicates only):", duplicateGroups);
  //     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);
  //     console.log("Grouped Hourly Rules (duplicates only):", duplicateGroups);
  //     setHourlyRuleGroups(duplicateGroups);
  //     setCurrentPage((prev) => ({ ...prev, hourly: 1 }));
  //     toast.current.trigger({
  //       type: "success",
  //       content: `Grouped Hourly Rules into ${duplicateGroups.length} duplicate groups.`,
  //     });
  //   }
  // };


  const handleFilterApiClick = () => {

    if (activeTab === "ticketcreate") {
      const grouped = groupDuplicates(ticketCreationRules);
  
      const duplicateGroups = grouped
        .filter((group) => group.length > 1)
        .sort((a, b) => b.length - a.length);
  
      console.log("Grouping duplicates for tab: ticketcreate");
      console.log("All Ticket Creation Rules:", ticketCreationRules);
      console.log("Grouped Rules:", grouped);
      console.log("Duplicate Groups (length > 1):", duplicateGroups);
  
      setTicketCreationRuleGroups(duplicateGroups);
      setCurrentPage((prev) => ({ ...prev, ticketcreate: 1 }));
  
      // toast.current.trigger({
      //   type: "success",
      //   content: `Grouped Ticket Creation Rules into ${duplicateGroups.length} duplicate group${duplicateGroups.length !== 1 ? 's' : ''}.`,
      // });
    } else if (activeTab === "ticketupdate") {
      const grouped = groupDuplicates(ticketUpdateRules);
  
      const duplicateGroups = grouped
        .filter((group) => group.length > 1)
        .sort((a, b) => b.length - a.length);
  
      console.log("Grouping duplicates for tab: ticketupdate");
      console.log("All Ticket Update Rules:", ticketUpdateRules);
      console.log("Grouped Rules:", grouped);
      console.log("Duplicate Groups (length > 1):", duplicateGroups);
  
      setTicketUpdateRuleGroups(duplicateGroups);
      setCurrentPage((prev) => ({ ...prev, ticketupdate: 1 }));
  
      // toast.current.trigger({
      //   type: "success",
      //   content: `Grouped Ticket Update Rules into ${duplicateGroups.length} duplicate group${duplicateGroups.length !== 1 ? 's' : ''}.`,
      // });
    } else if (activeTab === "hourly") {
      const grouped = groupDuplicates(hourlyTriggerRules);
  
      const duplicateGroups = grouped
        .filter((group) => group.length > 1)
        .sort((a, b) => b.length - a.length);
  
      console.log("Grouping duplicates for tab: hourly");
      console.log("All Hourly Trigger Rules:", hourlyTriggerRules);
      console.log("Grouped Rules:", grouped);
      console.log("Duplicate Groups (length > 1):", duplicateGroups);
  
      setHourlyRuleGroups(duplicateGroups);
      setCurrentPage((prev) => ({ ...prev, hourly: 1 }));
  
      // toast.current.trigger({
      //   type: "success",
      //   content: `Grouped Hourly Trigger Rules into ${duplicateGroups.length} duplicate group${duplicateGroups.length !== 1 ? 's' : ''}.`,
      // });
    }
  };


  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;

    // Show counts based on current ruleViewFilter
    if (ruleViewFilter.value === "duplicate_rules" && groups.length > 0) {
      const flatList = flattenGroups(groups);
      const filtered = getFilteredRules(flatList);
      const paginated = pagination(filtered, currentPage[activeTab]);
      return paginated.length;
    } else {
      const flatList = rules;
      const filtered = getFilteredRules(flatList);
      const paginated = pagination(filtered, currentPage[activeTab]);
      return paginated.length;
    }
  };

  const getCurrentTotalCount = () => {
    // Show counts based on current ruleViewFilter
    if (activeTab === "ticketcreate") {
      if (ruleViewFilter.value === "duplicate_rules" && 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 (ruleViewFilter.value === "duplicate_rules" && 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 (ruleViewFilter.value === "duplicate_rules" && 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 style={{ marginBottom: 10 }}>
        <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>
      )}



      






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


{tabsInitialized && (
  <div style={{ width: "60%", marginLeft: 40, marginRight: "auto" }}>

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

<div
  style={{
    display: "flex",
    justifyContent: fetchFromApi ? "flex-start" : "flex-end",
    marginBottom: 15,
  }}
>
  <FwButton color="secondary" onFwClick={fetchData} disabled={!isRulesDBReady}>
    {fetchFromApi ? (
      <>
        <FwIcon
          slot="before-label"
          name="arrow-left"
          size={16}
          style={{ marginRight: "8px" }}
        />
        Back
      </>
    ) : (
      <>
        Get Recent Data
        <FwIcon
          slot="after-label"
          name="refresh"
          size={16}
          style={{ marginLeft: "8px" }}
        />
      </>
    )}
  </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;