in this, code 

understand this scenario : 

if im in ticket update and clicked Duplicate Rules, and when i change the tab to hourly triggers/ ticket create. it should reset to all rules not in duplicate rules.

fix in this code, give me that modified 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) => {
    const val = e.target.value;
    // If user cleared or removed characters, reset searchQuery to show all rules:
    if (val.length < searchTerm.length) {
      setSearchQuery("");  // Clear filter to show all rules
    }
    setSearchTerm(val);
    if (showSearchHint) setShowSearchHint(false);
  }}
  onKeyDown={(e) => {
    if (e.key === "Enter") {
      const trimmed = e.target.value.trim();
      if (!trimmed) {
        setSearchQuery("");
        setShowSearchHint(false);
      } else {
        setSearchQuery(trimmed); // Apply search on Enter
        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 deleteRule = async (rule, allRulesList) => {
    console.log("deleteRule called with rule:", rule);
  
    const { id } = rule;
    const matchedRecord = allRulesList.find((rec) => rec.id === id);
  
    let automationTypeId;
    let currentRules, setRulesFunc, groupSetterFunc, currentTabPage, tabKey;
  
    switch (activeTab) {
      case "ticketcreate":
        automationTypeId = ticketCreate;
        currentRules = ticketCreationRules;
        setRulesFunc = setTicketCreationRules;
        groupSetterFunc = setTicketCreationRuleGroups;
        currentTabPage = currentPage.ticketcreate;
        tabKey = "ticketcreate";
        break;
      case "ticketupdate":
        automationTypeId = ticketUpdate;
        currentRules = ticketUpdateRules;
        setRulesFunc = setTicketUpdateRules;
        groupSetterFunc = setTicketUpdateRuleGroups;
        currentTabPage = currentPage.ticketupdate;
        tabKey = "ticketupdate";
        break;
      case "hourly":
        automationTypeId = hourlyTriggers;
        currentRules = hourlyTriggerRules;
        setRulesFunc = setHourlyTriggerRules;
        groupSetterFunc = setHourlyRuleGroups;
        currentTabPage = currentPage.hourly;
        tabKey = "hourly";
        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) {
        // Update rules state after deletion
        const updatedRules = currentRules.filter((r) => r.id !== id);
        setRulesFunc(updatedRules);
  
        // Clear duplicates group cache if any
        groupSetterFunc([]);
  
        // Pagination check: get filtered rules based on current searchQuery & ruleViewFilter
        // Here using your getFilteredRules function to apply search filtering
        let filteredRules = getFilteredRules(updatedRules);
  
        // Calculate items on current page after deletion
        const paginatedItems = pagination(
          filteredRules,
          currentTabPage
        );
  
        // If current page is now empty and not already on first page, go back one page
        if (paginatedItems.length === 0 && currentTabPage > 1) {
          setCurrentPage((prev) => ({
            ...prev,
            [tabKey]: prev[tabKey] - 1,
          }));
        }
  
        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;