import React, { useState, useEffect, useRef } from "react";
import {
  FwTabs,
  FwTab,
  FwTabPanel,
  FwSpinner,
  ToastController,
  FwToast, FwButton, FwPagination
} 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;

      allRecords = allRecords.concat(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,
      })));

      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);
  
  // Your original arrays holding rules:
  const [ticketCreationRules, setTicketCreationRules] = useState([]);
  const [ticketUpdateRules, setTicketUpdateRules] = useState([]);
  const [hourlyTriggerRules, setHourlyTriggerRules] = useState([]);

  const [loading, setLoading] = useState(false);
  const [agent, setAgent] = useState([]);

  const rulesPerPage = 30;

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

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

  const newRulePloadDB5 = useRef(null);

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

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

  // =============== ADDED grouped states ===================
  // These hold grouped rules (array of groups = array of arrays of rules)
  const [ticketCreationRuleGroups, setTicketCreationRuleGroups] = useState([]);
  const [ticketUpdateRuleGroups, setTicketUpdateRuleGroups] = useState([]);
  const [hourlyRuleGroups, setHourlyRuleGroups] = useState([]);

  // ========================================

  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())
    );
  };

  // Flatten groups helper:
  const flattenGroups = (groups) => groups.flat();

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

  // Render either grouped or flat rules depending on grouped state for current tab
  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 (groups.length > 0) {
      // Paginate filtered on flattened groups
      const flattenedFiltered = getFilteredRules(flattenGroups(groups));
      const paginatedRules = pagination(flattenedFiltered, currentPage[activeTab]);
      const paginatedRuleIds = new Set(paginatedRules.map((r) => r.id));

      return 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",
              width: "80%",
              marginLeft: "auto",
              marginRight: "auto",
            }}
          >
            {rulesToShow.map((rule, i) => (
              <div
                key={rule.id || i}
                className="fw-card-1"
                style={{
                  marginBottom: "5px",
                  marginTop: i === 0 ? "10px" : "2px",
                  padding: "5px 8px",
                  backgroundColor: i === 0 ? "transparent" : "#cce5ff", 
                  borderRadius: "4px",
                }}
              >
                <AutomationCard
                  rule={rule}
                  index={i + 1}
                  isFirstInGroup={i === 0}
                  onDelete={() => deleteRule(rule, flattenGroups(groups))}
                  activeTab={activeTab}
                  onSelect={openRuleDetails}
                  agent={agent}
                />
              </div>
            ))}
          </div>
        );
      });
    } else {
      const filteredFlatRules = getFilteredRules(flatRules);
      const paginatedFlatRules = pagination(filteredFlatRules, currentPage[activeTab]);

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

      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",
            width: "80%",
            marginLeft: "auto",
            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) => {
    // Your existing open details logic here - preserved
  };

  const closeRuleDetails = () => {
    // Your existing close details logic here - preserved
  };

  // Filter API Button click handler to group duplicate rules for the active tab
  const handleFilterApiClick = () => {
    if (activeTab === "ticketcreate") {
      const grouped = groupDuplicates(ticketCreationRules);
      console.log("Grouped Ticket Creation Rules:", grouped);
      setTicketCreationRuleGroups(grouped);
      setCurrentPage((prev) => ({ ...prev, ticketcreate: 1 }));
      toast.current.trigger({ type: "success", content: `Grouped Ticket Creation Rules into ${grouped.length} groups.` });
    } else if (activeTab === "ticketupdate") {
      const grouped = groupDuplicates(ticketUpdateRules);
      console.log("Grouped Ticket Update Rules:", grouped);
      setTicketUpdateRuleGroups(grouped);
      setCurrentPage((prev) => ({ ...prev, ticketupdate: 1 }));
      toast.current.trigger({ type: "success", content: `Grouped Ticket Update Rules into ${grouped.length} groups.` });
    } else if (activeTab === "hourly") {
      const grouped = groupDuplicates(hourlyTriggerRules);
      console.log("Grouped Hourly Rules:", grouped);
      setHourlyRuleGroups(grouped);
      setCurrentPage((prev) => ({ ...prev, hourly: 1 }));
      toast.current.trigger({ type: "success", content: `Grouped Hourly Rules into ${grouped.length} groups.` });
    }
  };

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

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

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

      <input
        type="text"
        placeholder="Search by name or description"
        value={searchTerm}
        onChange={(e) => {
          setSearchTerm(e.target.value);
          if (showSearchHint) setShowSearchHint(false);
        }}
      />
      
      <button
        onClick={() => {
          if (!searchTerm.trim()) {
            setShowSearchHint(true);
            return;
          }
          setShowSearchHint(false);
          setSearchQuery(searchTerm);
        }}
      >
        Search
      </button>

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

      <FwButton
        color="secondary"
        onFwClick={fetchData}
        disabled={!isRulesDBReady}
      >
        {fetchFromApi ? "Recent API Data" : "Get Entity Data"}
      </FwButton>

      {isRulesDBReady && tabsInitialized && (
        <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">
            {renderRulesOrGroups()}
            <div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
              <FwPagination
                per-page={rulesPerPage}
                total={getCurrentTotalCount()}
                page={currentPage.ticketcreate}
                onFwChange={handlePageChange("ticketcreate")}
              />
            </div>
          </FwTabPanel>

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

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

      <FwToast />
    </>
  );
};

export default AutomationTabs;


on clicking filter api, group duplicates and render new ui not existing with colored. also on grouping of each rule's first rule should be not in color as it is. for other it should show color. also it should be grouped into one div..

NOte : dont show rules that are not duplicate.