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;

  // ===== 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);
    }, 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");

      // Initial fetch already handled by useEffect below (on fetchFromApi change)
      // So no need to fetch here to avoid duplication keeping consistent with new fetch logic.

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

  // ===== UPDATE: fetchData now just toggles fetchFromApi and triggers data fetch on that state change =====
  const fetchData = async () => {
    // Toggle mode and data fetch will happen automatically in useEffect above
    setFetchFromApi((prev) => !prev);

    // Show toast for user info
    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 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 {      
      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} */}
            No Duplicate 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) => {
    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: 30, marginRight: "auto" }}>
          <div
            style={{
              display: "flex",
              justifyContent: "flex-end",
              marginTop: 5,
              marginBottom: 15,
            }}
          >
            <FwButton color="secondary" onFwClick={fetchData} disabled={!isRulesDBReady}>
              {fetchFromApi ? "Get Entity Data" : "Get Recent Data"}
            </FwButton>
          </div>
          

          <div style={{ height: 20 }} />

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


in this code, give me like this : 


on page initialization, you will show Getting Rules DB Read.y ok. but you should also show the fw tabs and Recent Button with Disabled. when setDBready is true, then remove the disabled, 

other functionality remains as it is