import React, { useState } from "react";
import {
  FwToggle,
  FwButton,
  FwModal,
  FwModalTitle,
  FwModalContent,
  FwModalFooter,
} from "@freshworks/crayons/react";
import { getAgents } from '../common';

// Function to calculate the time since the rule was last modified
const calculateLastModified = (updated_at) => {
  const updatedDate = new Date(updated_at);
  const currentDate = new Date();
  const diffInMilliseconds = currentDate - updatedDate;
  const seconds = Math.floor(diffInMilliseconds / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);
  const months = Math.floor(days / 30);
  const years = Math.floor(days / 365);

  if (years > 0) return years === 1 ? "a year ago" : `${years} years ago`;
  if (months > 0) return months === 1 ? "a month ago" : `${months} months ago`;
  if (days > 0) return `${days} day${days > 1 ? "s" : ""} ago`;
  if (hours > 0) return `${hours} hour${hours > 1 ? "s" : ""} ago`;
  if (minutes > 0) return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
  return "Just now";
};

const AutomationCard = ({ rule = {}, index, isFirstInGroup = false, onDelete, agent, activeTab  }) => {
  const {
    id,
    name = "Default Rule Name",
    description = "Default Rule Description",
    updated_at = "N/A",
    last_updated_by = "Unknown",
    affected_tickets_count = "--",
    active = false,
    position = index + 1,    
    automation_type_id 
  } = rule;

  const [menuOpen, setMenuOpen] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);

//   // Function called to show the delete confirmation modal
//   const handleDeleteClick = () => {
//     console.log("Choosed Automation Rule ID:", id);
//     console.log("Automation Type ID:", automation_type_id);
    
//  };
 
const handleConfirmDelete = () => {
  setModalOpen(false);
  onDelete(rule);  // Pass full rule object, not just ID
};


  return (
    <div
      className="fw-card-1 fw-flex fw-flex-column"
      style={{
        overflow: "hidden",
        border: "0.5px solid #ddd",
        backgroundColor: isFirstInGroup ? "#fff" : "#e5f2fd",
      }}
    >
      <section
        className="fw-flex-grow fw-px-16 fw-flex fw-flex-row"
        style={{ justifyContent: "space-between", alignItems: "center" }}
      >
        <div style={{ paddingLeft: "16px" }}>
          <h5 className="fw-type-h2 fw-mt-0 fw-mb-8">
            {position}. {name}
          </h5>
          <p className="fw-type-xs fw-mt-0 fw-mb-20">{description}</p>
        </div>

        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "8px",
            padding: "8px 16px",
            position: "relative",
          }}
        >
          <FwToggle size="medium" checked={active} />
          <div style={{ position: "relative" }}>
            {menuOpen && (
              <div
                className="dropdown-menu"
                style={{
                  position: "absolute",
                  marginTop: "30px",
                  top: "50%",
                  right: "40px",
                  transform: "translateY(-50%)",
                  background: "white",
                  boxShadow: "0px 4px 6px rgba(0,0,0,0.1)",
                  borderRadius: "5px",
                  padding: "8px 0",
                  width: "120px",
                  zIndex: 10,
                }}
              >
                <div
                  style={{
                    padding: "8px 16px",
                    cursor: "pointer",
                    textAlign: "left",
                  }}
                  onClick={() => alert("Edit clicked")}
                >
                  Edit
                </div>
                <div
                  style={{
                    padding: "8px 16px",
                    cursor: "pointer",
                    color: "red",
                    textAlign: "left",
                  }}
                  onClick={() => {                  
                    handleConfirmDelete(); 
                  }}
                >
                  Delete
                </div>
              </div>
            )}
            <div
              className="ember-basic-dropdown-trigger"
              role="button"
              tabIndex="0"
              onClick={() => setMenuOpen(!menuOpen)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                className="app-icon dropdown-toggle"
              >
                <path
                  fillRule="evenodd"
                  d="M12 5c-1.38 0-2.5-1.12-2.5-2.5S10.62 0 12 0s2.5 1.12 2.5 2.5S13.38 5 12 5zM12 14c-1.38 0-2.5-1.12-2.5-2.5S10.62 9 12 9s2.5 1.12 2.5 2.5S13.38 14 12 14zM12 24c-1.38 0-2.5-1.12-2.5-2.5S10.62 19 12 19s2.5 1.12 2.5 2.5S13.38 24 12 24z"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </section>

      <section
        className="fw-type-xs fw-flex fw-flex-row fw-items-center options"
        style={{
          width: "100%",
          background: "#f5f5f5",
          padding: "10px 16px",
          borderRadius: "5px",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-evenly",
            width: "100%",
            fontSize: "14px",
            color: "#666",
            textAlign: "center",
          }}
        >
          <span>
            Last Modified: <strong>{calculateLastModified(updated_at)}</strong>
          </span>
          <span>|</span>
          <span>By: {agent.map(e => {
                if (e.value === last_updated_by)
                    return e.text
            })}</span>
          <span>|</span>
          <span>
            Impacted tickets (Last 7 days): {affected_tickets_count}
          </span>
        </div>
      </section>
    
    </div>
  );
};

export default AutomationCard;

in this automation card on clicking above wherever in this card it should show this ui


import React from "react";
import { FwInput, FwLabel } from "@freshworks/crayons/react";

export default function SummaryContent({ ruleObj}) {
    console.log("ruleObj in summary", ruleObj.summary);

    const summaryContent =  {
        "name": "Copy of test rule",
        "position": 2,
        "active": true,
        "outdated": false,
        "last_updated_by": 82175529665,
        "id": 82000718988,
        "summary": {
            "conditions": {
                "condition_set_1": [
                    "If <div class = SummaryKey>Group</div> <div class = SummaryOperator>is</div> <div class = SummaryValue>NONE</div>"
                ]
            },
            "actions": [
                " <div class = SummaryKey>Assign to Group</div> <div class = SummaryValue>Billing</div>"
            ]
        },
        "created_at": "2025-02-05T10:29:26Z",
        "updated_at": "2025-04-15T03:21:18Z",
        "affected_tickets_count": 63,
        "conditions": [
            {
                "name": "condition_set_1",
                "match_type": "any",
                "properties": [
                    {
                        "field_name": "group_id",
                        "resource_type": "ticket",
                        "operator": "in",
                        "value": [
                            ""
                        ]
                    }
                ]
            }
        ],
        "actions": [
            {
                "field_name": "group_id",
                "value": 82000523993
            }
        ],
        "description": null
    };

    const mappingKeyValues = {
        "group_id": ["Group", "Assign to Group"]
    }

    const keysOfChoices = Object.keys(mappingKeyValues);
    const valuesOfChoices = Object.values(mappingKeyValues);
    const summaryKey = keysOfChoices.filter(e=> e === ruleObj.conditions.properties.field_name)
    // const summaryValue = 
    //keys/values of text
    const contentFormation = {
        "conditions": {
            "condition_set_1": [
                "If <div class = SummaryKey>{valuesOfChoices[0]}</div> <div class = SummaryOperator>is</div> <div class = SummaryValue>NONE</div>"
            ]
        },
        "actions": [
            " <div class = SummaryKey>Assign to Group</div> <div class = SummaryValue>Billing</div>"
        ]
    }
    
    const [summary, setSummary] = React.useState(null);
    console.log("summary", summary);


    const SetText = ({ ele }) => {
        const ref = React.useRef(null);
        React.useEffect(() => {
            if (ref.current) {
                const element = ref.current;
                element.innerHTML = ele;
            }
        }, [ref, ele])
        return <div style={{ display: 'flex', gap: '5px', marginLeft: "10px" }} ref={ref}></div>
    }

    React.useEffect(() => {
        if (ruleObj.summary)
            setSummary(ruleObj.summary)
    }, [JSON.stringify(ruleObj.summary)])

    if (!summary) {
        return null;
    }

    return (<>
        <div className='summary_text'>
            <h3>Summary</h3>
            <div className="fw-flex fw-flex-column" style={{ fontWeight: '600', gap: '15px' }}>
                <div className="flex-item-border fw-flex-grow">
                    <FwLabel value="Conditions" style={{ backgroundColor: '#475867' }}></FwLabel>
                    <div style={{ display: "flex", alignItems: 'baseline' }}>
                        <span className='list-icon' ></span>
                        <div style={{ marginLeft: '10px' }}>When <span style={{ fontWeight: '600' }}>Ticket</span> is <span style={{ color: '#007958' }}>created</span></div>
                    </div>
                </div>
                <div className="flex-item-border fw-flex-grow">
                    <div style={{ display: "flex", alignItems: 'baseline' }}>
                        <span className='list-icon'></span>
                        <SetText ele={summary.conditions.condition_set_1}></SetText>
                    </div>
                </div>
                <div className="flex-item-border fw-flex-grow">
                    <FwLabel value="Actions" style={{ backgroundColor: '#475867' }}></FwLabel>
                    <div style={{ display: "flex", alignItems: 'baseline' }}>
                        <span className='list-icon'></span> <SetText ele={summary.actions}></SetText>
                    </div>
                </div>
            </div>
        </div>
    </>)
}


summary of the rule