import React, { useState, useEffect, useRef } from "react";
import { FwTabs, FwTab, FwTabPanel, FwSpinner, ToastController, FwToast, FwModal, FwModalTitle, FwModalContent, FwModalFooter, FwButton } from "@freshworks/crayons/react";
import AutomationCard from "./AutomationCard";
import { getTicketCreationRules, getTicketUpdationRules, getHourlyRules, getAgents } from '../common';

// const getRuleSignature = (rule) => JSON.stringify({
//   conditions: rule.summary.conditions,
//   actions: rule.summary.actions,
// });

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,              // add this line
        rule_id: record.data.rule_id,                // ensure rule_id included
        automation_type_id: record.data.automation_type_id,
        id: record.data.rule_id || record.data.id,  // make sure id is always set
      })));

      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 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 AutomationTabs = ({ client }) => {

  const [isRulesDBReady, setIsRulesDBReady] = useState(false); // Tracks if RulesDB stored value is true
  const [loadingBannerVisible, setLoadingBannerVisible] = useState(true); // Controls spinner visibility

  const intervalIdRef = useRef(null); // To store interval ID so we can clear it later



  const [searchTerm, setSearchTerm] = useState("");
  const [searchQuery, setSearchQuery] = useState("");
  const [searchTriggered, setSearchTriggered] = useState(false);

  const [activeTab, setActiveTab] = useState("ticketcreate");
  const [tabsInitialized, setTabsInitialized] = useState(false);

  const [ticketCreationRules, setTicketCreationRules] = useState([]);
  const [ticketUpdateRules, setTicketUpdateRules] = useState([]);
  const [hourlyTriggerRules, setHourlyTriggerRules] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [agent, setAgent] = useState([]);

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

  const ticketCreateFilteredRecords = useRef([]);
  const ticketUpdateFilteredRecords = useRef([]);
  const hourlyFilteredRecords = useRef([]);

  const newRulePloadDB5 = useRef(null);

  const rulesPerPage = 5;

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

  useEffect(() => {
    const initializeDatabase = async () => {
      console.log("🟡 Initializing database and fetching tabs...");
      const entity = await client.db.entity({ version: "v1" });
      newRulePloadDB5.current = entity.get("newRulePloadDB5");

      // Use newRulePloadDB5.current for all further usage inside initializeDatabase
      const entticketcreate = await Filterrecords(ticketCreate, newRulePloadDB5.current);
      const enthourly = await Filterrecords(hourlyTriggers, newRulePloadDB5.current);
      const entticketupdate = await Filterrecords(ticketUpdate, newRulePloadDB5.current);

      ticketCreateFilteredRecords.current = entticketcreate;
      hourlyFilteredRecords.current = enthourly;
      ticketUpdateFilteredRecords.current = entticketupdate;

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

      const agentdaa = await getAgents(client);
      console.log("Available agent :", 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(() => {
    checkAndSetButtonState();

    return () => {
      if (intervalIdRef.current) clearInterval(intervalIdRef.current);
    };
  }, []);



  useEffect(() => {

    const fwTabs = document.querySelector("fw-tabs");

    const saveActiveTab = async (e) => {
      const newActiveTab = e.target.panel;
      console.log("🟡 Tab clicked:", newActiveTab);
      setActiveTab(newActiveTab);

      try {
        let tabData = await client.db.get("TabDB") || {};
        tabData.LastVisitedTab = newActiveTab;
        await client.db.set("TabDB", tabData);
        console.log(`💾 Saved active tab to DB:`, newActiveTab);
      } 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]);

  useEffect(() => {
    setCurrentPage(1);
  }, [activeTab]);


  const fetchRecentData = async () => {
    setLoading(true);
    await Promise.all([
      getTicketCreationRules(client, setTicketCreationRules),
      getTicketUpdationRules(client, setTicketUpdateRules),
      getHourlyRules(client, setHourlyTriggerRules),
      getAgents(client, setAgent)

    ]);
    // console.log("Agent in tab :", agent);
    setLoading(false);
  };

  const checkAndSetButtonState = async () => {
    try {
      const storedvalue1 = await client.db.get("RulesDB");
      const isButtonEnabled = !!storedvalue1.stored;
      console.log("Initial stored value from RulesDB:", storedvalue1.stored);

      if (isButtonEnabled) {
        setIsRulesDBReady(true);
        setLoadingBannerVisible(false);

        if (intervalIdRef.current) {
          clearInterval(intervalIdRef.current);
          intervalIdRef.current = null;
        }
      } else {
        setIsRulesDBReady(false);
        setLoadingBannerVisible(true);

        // Only create interval once
        if (!intervalIdRef.current) {
          intervalIdRef.current = setInterval(checkAndSetButtonState, 60000);
        }
      }
    } catch (error) {
      if (error.status === 404) {
        console.warn("⚠️ RulesDB not found, assuming first-time install.");
        setIsRulesDBReady(false);
        setLoadingBannerVisible(true);

        if (intervalIdRef.current) {
          clearInterval(intervalIdRef.current);
          intervalIdRef.current = null;
        }
      } else {
        console.error("❌ Error retrieving stored value from RulesDB:", error);
      }
    }
  };

  const getFilteredGroups = (rules) => {
    const groupedRules = groupDuplicates(rules);

    // If searchQuery empty/blank => show all
    if (!searchQuery.trim()) return groupedRules;

    // Otherwise filter by searchQuery
    return groupedRules.filter((group) =>
      group.some(
        (rule) =>
          rule.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          rule.description?.toLowerCase().includes(searchQuery.toLowerCase())
      )
    );
  };

  const renderGroupedRules = (groups) => {
    const startIndex = (currentPage - 1) * rulesPerPage;
    const paginatedGroups = groups.slice(startIndex, startIndex + rulesPerPage);

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

    return paginatedGroups.length > 0 ? (
      paginatedGroups.map((group, index) => (
        <div
          key={index}
          className="fw-card-1"
          style={{
            border: "1px solid #ddd",
            borderRadius: "8px",
            marginBottom: "20px",
            marginTop: "20px",
            padding: "10px 16px",
            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
            width: "80%",
            marginLeft: "auto",
            marginRight: "auto",
          }}
        >
          {group.map((rule, idx) => (
            <AutomationCard
              key={idx}
              rule={rule}
              index={idx + 1}
              isFirstInGroup={idx === 0}
              // Pass onDelete as a function that receives the rule argument from AutomationCard
              onDelete={(rule) => deleteRule(rule, getFilteredRecordsForActiveTab())}
              activeTab={activeTab}
              onSelect={openRuleDetails}  // Pass the handler here
              agent={agent}

            />
          ))}

        </div>
      ))
    ) : (
      <p style={{ textAlign: "center", marginTop: "20px" }}>
        No Rules Found Matched Your Search: {searchTerm}
      </p>
    );
  };

  const getFilteredRecordsForActiveTab = () => {
    switch (activeTab) {
      case "ticketcreate": return ticketCreateFilteredRecords.current;
      case "ticketupdate": return ticketUpdateFilteredRecords.current;
      case "hourly": return hourlyFilteredRecords.current;
      default: return [];
    }
  }

  const deleteRule = async (rule, filteredRecords) => {
    const { id, display_id, rule_id, automation_type_id } = rule;
    console.log("Deleting Rules Initialized....");

    // console.log("Entire filtered records from this tab at initialization:", filteredRecords);

    const matchedRecord = filteredRecords.find(rec => rec.id === id);

    if (matchedRecord) {
      console.log("✅ Matched filtered record:", matchedRecord);
      console.log("Matched record's display_id:", matchedRecord.display_id);
    } else {
      console.warn("⚠️ No matching filtered record found for rule 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;
    }

    console.log("---------------Entity Data-----------");
    console.log("Entity - display_id:", matchedRecord.display_id);
    console.log("Entity - rule_id:", matchedRecord.rule_id);
    console.log("Entity - automation_type_id:", matchedRecord.automation_type_id);

    console.log("---------------API Data-----------");
    console.log("API - ruleid:", id);
    console.log("API From Tab:", activeTab);
    console.log("API - Automation id:", automationTypeId);

    const targetDisplayId = matchedRecord.display_id;

    console.log("Record to be deleted :", targetDisplayId);

    if (targetDisplayId) {
      console.log('Deleting Entity Rule :', matchedRecord.display_id);
      try {
        const delete_ent_rule = await newRulePloadDB5.delete(targetDisplayId);
        console.log("✅ Successfully deleted entity record with display_id:", delete_ent_rule);

      } 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) {
        console.log("Rule deleted successfully!");
        if (activeTab === "ticketcreate") {
          setTicketCreationRules(ticketCreationRules.filter(r => r.id !== id));
        } else if (activeTab === "ticketupdate") {
          setTicketUpdateRules(ticketUpdateRules.filter(r => r.id !== id));
        } else if (activeTab === "hourly") {
          setHourlyTriggerRules(hourlyTriggerRules.filter(r => r.id !== id));
        }

        toast.current.trigger({ type: "success", content: "Rule deleted successfully!" });

      } else {
        console.error("Failed to delete rule.");
        toast.current.trigger({ type: "error", content: "Failed to delete rule." });
      }

    } catch (error) {
      console.error("Error deleting rule:", error);
    }


  };



  const [selectedRule, setSelectedRule] = useState(null);

  const openRuleDetails = (rule) => {
    setSelectedRule(rule);
  };

  const closeRuleDetails = () => {
    setSelectedRule(null);
  };





  const handlePageChange = (pageNumber) => setCurrentPage(pageNumber);

  const renderPagination = (groups) => {
    const totalPages = Math.ceil(groups.length / rulesPerPage);
    return (
      <div style={{ textAlign: "center", marginTop: "20px" }}>
        {Array.from({ length: totalPages }, (_, index) => (
          <button
            key={index + 1}
            onClick={() => handlePageChange(index + 1)}
            style={{
              margin: "0 5px",
              padding: "5px 10px",
              cursor: "pointer",
              background: currentPage === index + 1 ? "#4CAF50" : "#ddd",
            }}
          >
            {index + 1}
          </button>
        ))}
      </div>
    );
  };

  // console.log("🟢 Rendering AutomationTabs with activeTab:", activeTab);

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

      <input
        type="text"
        placeholder="Search by name or description"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />

      <button
        onClick={() => {
          setSearchQuery(searchTerm);
          setCurrentPage(1);
        }}
      >
        Search
      </button>

      {/* Show spinner + waiting message while RulesDB.stored !== true */}
      {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>
      )}

      {/* Recent API Data button enabled only if RulesDB condition is met */}
      <button
        onClick={fetchRecentData}
        style={{ marginLeft: "10px" }}
        disabled={!isRulesDBReady}
      >
        Recent API Data
      </button>

      {/* ONLY render the tabs if RulesDB value is true and tabsInitialized is true */}
      {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">
            {renderGroupedRules(getFilteredGroups(ticketCreationRules))}
            {renderPagination(getFilteredGroups(ticketCreationRules))}
          </FwTabPanel>

          <FwTabPanel name="ticketupdate">
            {renderGroupedRules(getFilteredGroups(ticketUpdateRules))}
            {renderPagination(getFilteredGroups(ticketUpdateRules))}
          </FwTabPanel>

          <FwTabPanel name="hourly">
            {renderGroupedRules(getFilteredGroups(hourlyTriggerRules))}
            {renderPagination(getFilteredGroups(hourlyTriggerRules))}
          </FwTabPanel>
        </FwTabs>
      )}

      <FwToast />
    </>
  );


};

export default AutomationTabs;


on this, add this feature : 

when Recent API Button is enabled. on clicking it will load data from api. now the button should be changed to Get Entity Data. on clicking the same button should get data from entity and others remain the same.

is it possible