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.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;

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

  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);
    }, 2000);

    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 entticketcreate = await Filterrecords(ticketCreate, newRulePloadDB5.current);
      const enthourly = await Filterrecords(hourlyTriggers, newRulePloadDB5.current);
      const entticketupdate = await Filterrecords(ticketUpdate, newRulePloadDB5.current);

      setTicketCreationRules(entticketcreate);
      setTicketUpdateRules(entticketupdate);
      setHourlyTriggerRules(enthourly);

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

    if (fetchFromApi) {
      await Promise.all([
        getTicketCreationRules(client, (data) => {
          setTicketCreationRules(data);
        }),
        getTicketUpdationRules(client, (data) => {
          setTicketUpdateRules(data);
        }),
        getHourlyRules(client, (data) => {
          setHourlyTriggerRules(data);
        }),
        getAgents(client, (data) => {
          setAgent(data);
        }),
      ]);
    } else {
      if (!newRulePloadDB5.current) {
        console.error("❌ Entity DB reference not initialized.");
        setLoading(false);
        return;
      }

      const entticketcreate = await Filterrecords(ticketCreate, newRulePloadDB5.current);
      const enthourly = await Filterrecords(hourlyTriggers, newRulePloadDB5.current);
      const entticketupdate = await Filterrecords(ticketUpdate, newRulePloadDB5.current);

      setTicketCreationRules(entticketcreate);
      setTicketUpdateRules(entticketupdate);
      setHourlyTriggerRules(enthourly);
    }

    setLoading(false);
    setFetchFromApi(!fetchFromApi);
  };

  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",
        alignItems: "center",
      }}
    >
      <AnimatedSearchInput />
  
      <FwPopover sameWidth="false" placement="bottom-start">
        <FwButton slot="popover-trigger" color="secondary" showCaretIcon>
          <FwIcon slot="before-label" name={ruleViewFilter.graphicsProps.name}></FwIcon>
          <span>{ruleViewFilter.text}</span>
        </FwButton>
  
        <div slot="popover-content" style={{ width: 220 }}>
          <span
            style={{ fontStyle: "italic" }}
            className="row fw-flex fw-type-xs fw-p-4 fw-type-semibold"
          >
            Select Rule View
          </span>
          <hr style={{ margin: "0px" }} />
          <FwListOptions
            onFwChange={(event) => {
              const selected = event.detail?.meta?.selectedOptions[0];
              if (selected) {
                setRuleViewFilter(selected);
                // Reset pagination to first page when filter changes
                setCurrentPage((prev) => ({ ...prev, [activeTab]: 1 }));
  
                if (selected.value === "all_rules") {
                  // Clear duplicate groups so all are visible
                  setTicketCreationRuleGroups([]);
                  setTicketUpdateRuleGroups([]);
                  setHourlyRuleGroups([]);
                } else if (selected.value === "duplicate_rules") {
                  // Call handleFilterApiClick to group duplicates and update groups
                  handleFilterApiClick();
                }
              }
            }}
            selectedOptions={[ruleViewFilter]}
            options={ruleViewOptions}
            variant="icon"
          />
        </div>
      </FwPopover>
    </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 (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) {
      // Flatten, filter, paginate on flat filtered groups
      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 {
      // 'All Rules' or no duplicates found: show flat rule list filtered and paginated
      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) => { };

  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 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", 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;




On initial load, fetches entity data for the active tab (default "ticketcreate").
On tab change, fetches entity data if in entity mode or fetches API data if in API mode.
When user clicks the toggle button:
If currently in entity mode, fetches API data and switches to API mode.
If currently in API mode, fetches entity data and switches to entity mode.
The button text toggles between "Recent API Data" and "Get Entity Data".
Pagination, search, grouping, deleting and other existing functionalities remain intact.


add this functionality, dont remove anything from my code 

give me complete component