import React, { useState } from "react";
import { FwTabs, FwTab, FwTabPanel, FwInput, FwPagination } from "@freshworks/crayons/react";
import AutomationCard from "./AutomationCard";


const ticketCreateRules = [
  {
    "name": "Send payments to Billing - Sample Dispatcher rule",
    "position": 1,
    "active": true,
    "outdated": false,
    "last_updated_by": null,
    "id": 156002148981,
    "summary": {
        "conditions": {
            "condition_set_1": [
                "If <div class = SummaryKey>Subject</div> <div class = SummaryOperator>contains</div> <div class = SummaryValue>payment</div>"
            ]
        },
        "actions": [
            " <div class = SummaryKey>Assign to Group</div> <div class = SummaryValue>Billing</div>"
        ]
    },
    "created_at": "2025-03-04T04:12:28Z",
    "updated_at": "2025-03-04T04:12:28Z",
    "affected_tickets_count": 0,
    "conditions": [
        {
            "name": "condition_set_1",
            "match_type": "any",
            "properties": [
                {
                    "field_name": "subject",
                    "resource_type": "ticket",
                    "operator": "contains",
                    "value": [
                        "payment"
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "field_name": "group_id",
            "value": 156000905740
        }
    ],
    "description": "This is a sample rule to help you understand how Dispatch'r works. Feel free to edit or delete this rule.In this example we will create a rule that will look at all incoming emails that have the text -'payment' and assigns them to 'Billing' group."
},  {
  "name": "Send payments to Billing - Sample Dispatcher rule",
  "position": 1,
  "active": true,
  "outdated": false,
  "last_updated_by": null,
  "id": 156002148981,
  "summary": {
      "conditions": {
          "condition_set_1": [
              "If <div class = SummaryKey>Subject</div> <div class = SummaryOperator>contains</div> <div class = SummaryValue>payment</div>"
          ]
      },
      "actions": [
          " <div class = SummaryKey>Assign to Group</div> <div class = SummaryValue>Billing</div>"
      ]
  },
  "created_at": "2025-03-04T04:12:28Z",
  "updated_at": "2025-03-04T04:12:28Z",
  "affected_tickets_count": 0,
  "conditions": [
      {
          "name": "condition_set_1",
          "match_type": "any",
          "properties": [
              {
                  "field_name": "subject",
                  "resource_type": "ticket",
                  "operator": "contains",
                  "value": [
                      "payment"
                  ]
              }
          ]
      }
  ],
  "actions": [
      {
          "field_name": "group_id",
          "value": 156000905740
      }
  ],
  "description": "This is a sample rule to help you understand how Dispatch'r works. Feel free to edit or delete this rule.In this example we will create a rule that will look at all incoming emails that have the text -'payment' and assigns them to 'Billing' group."
},  {
  "name": "Send payments to Billing - Sample Dispatcher rule",
  "position": 1,
  "active": true,
  "outdated": false,
  "last_updated_by": null,
  "id": 156002148981,
  "summary": {
      "conditions": {
          "condition_set_1": [
              "If <div class = SummaryKey>Subject</div> <div class = SummaryOperator>contains</div> <div class = SummaryValue>payment</div>"
          ]
      },
      "actions": [
          " <div class = SummaryKey>Assign to Group</div> <div class = SummaryValue>Billing</div>"
      ]
  },
  "created_at": "2025-03-04T04:12:28Z",
  "updated_at": "2025-03-04T04:12:28Z",
  "affected_tickets_count": 0,
  "conditions": [
      {
          "name": "condition_set_1",
          "match_type": "any",
          "properties": [
              {
                  "field_name": "subject",
                  "resource_type": "ticket",
                  "operator": "contains",
                  "value": [
                      "payment"
                  ]
              }
          ]
      }
  ],
  "actions": [
      {
          "field_name": "group_id",
          "value": 156000905740
      }
  ],
  "description": "This is a sample rule to help you understand how Dispatch'r works. Feel free to edit or delete this rule.In this example we will create a rule that will look at all incoming emails that have the text -'payment' and assigns them to 'Billing' group."
}
];

const ticketUpdateRules = [
  {
    "name": "Automatically close resolved tickets after 48 hours",
    "position": 1,
    "active": true,
    "outdated": false,
    "last_updated_by": null,
    "id": 156002144027,
    "summary": {
        "conditions": {
            "condition_set_1": [
                "If <div class = SummaryKey>Status</div> <div class = SummaryOperator>is</div> <div class = SummaryValue>Resolved</div>",
                "AND",
                "If <div class = SummaryKey>Hour Since Resolved</div> <div class = SummaryOperator>greater than</div> <div class = SummaryValue>48</div>"
            ]
        },
        "actions": [
            " <div class = SummaryKey>Set Status as</div> <div class = SummaryValue>Closed</div>"
        ]
    },
    "created_at": "2025-03-03T21:40:55Z",
    "updated_at": "2025-03-03T21:40:55Z",
    "affected_tickets_count": 0,
    "conditions": [
        {
            "name": "condition_set_1",
            "match_type": "all",
            "properties": [
                {
                    "field_name": "status",
                    "operator": "in",
                    "value": [
                        4
                    ]
                },
                {
                    "field_name": "resolved_at",
                    "operator": "greater_than",
                    "value": 48
                }
            ]
        }
    ],
    "actions": [
        {
            "field_name": "status",
            "value": 5
        }
    ],
    "description": "This rule will close all the resolved tickets after 48 hours."
},
{
    "name": "When a ticket has been overdue for a long time, assign it to the Escalations team",
    "position": 2,
    "active": true,
    "outdated": false,
    "last_updated_by": null,
    "id": 156002148989,
    "summary": {
        "conditions": {
            "condition_set_1": [
                "If <div class = SummaryKey>Status</div> <div class = SummaryOperator>is</div> <div class = SummaryValue>Open</div>",
                "AND",
                "If <div class = SummaryKey>Hours since ticket overdue</div> <div class = SummaryOperator>greater than</div> <div class = SummaryValue>2</div>"
            ]
        },
        "actions": [
            " <div class = SummaryKey>Assign to Group</div> <div class = SummaryValue>Escalations</div>"
        ]
    },
    "created_at": "2025-03-04T04:12:29Z",
    "updated_at": "2025-03-04T04:12:29Z",
    "affected_tickets_count": 0,
    "conditions": [
        {
            "name": "condition_set_1",
            "match_type": "all",
            "properties": [
                {
                    "field_name": "status",
                    "operator": "in",
                    "value": [
                        2
                    ]
                },
                {
                    "field_name": "due_by",
                    "operator": "greater_than",
                    "value": 2
                }
            ]
        }
    ],
    "actions": [
        {
            "field_name": "group_id",
            "value": 156000905741
        }
    ],
    "description": "This rule will close all the resolved tickets after 48 hours."
},
{
    "name": "Copy of Automatically close resolved tickets after 48 hours",
    "position": 3,
    "active": true,
    "outdated": false,
    "last_updated_by": 156006681943,
    "id": 156002206498,
    "summary": {
        "conditions": {
            "condition_set_1": [
                "If <div class = SummaryKey>Status</div> <div class = SummaryOperator>is</div> <div class = SummaryValue>Resolved</div>",
                "AND",
                "If <div class = SummaryKey>Hour Since Resolved</div> <div class = SummaryOperator>greater than</div> <div class = SummaryValue>48</div>"
            ]
        },
        "actions": [
            " <div class = SummaryKey>Set Status as</div> <div class = SummaryValue>Closed</div>"
        ]
    },
    "created_at": "2025-03-08T04:44:33Z",
    "updated_at": "2025-03-08T04:44:33Z",
    "affected_tickets_count": 0,
    "conditions": [
        {
            "name": "condition_set_1",
            "match_type": "all",
            "properties": [
                {
                    "field_name": "status",
                    "operator": "in",
                    "value": [
                        4
                    ]
                },
                {
                    "field_name": "resolved_at",
                    "operator": "greater_than",
                    "value": 48
                }
            ]
        }
    ],
    "actions": [
        {
            "field_name": "status",
            "value": 5
        }
    ],
    "description": "This rule will close all the resolved tickets after 48 hours."
},
{
  "name": "Copy of Automatically close resolved tickets after 48 hours",
  "position": 3,
  "active": true,
  "outdated": false,
  "last_updated_by": 156006681943,
  "id": 156002206498,
  "summary": {
      "conditions": {
          "condition_set_1": [
              "If <div class = SummaryKey>Status</div> <div class = SummaryOperator>is</div> <div class = SummaryValue>Resolved</div>",
              "AND",
              "If <div class = SummaryKey>Hour Since Resolved</div> <div class = SummaryOperator>greater than</div> <div class = SummaryValue>48</div>"
          ]
      },
      "actions": [
          " <div class = SummaryKey>Set Status as</div> <div class = SummaryValue>Closed</div>"
      ]
  },
  "created_at": "2025-03-08T04:44:33Z",
  "updated_at": "2025-03-08T04:44:33Z",
  "affected_tickets_count": 0,
  "conditions": [
      {
          "name": "condition_set_1",
          "match_type": "all",
          "properties": [
              {
                  "field_name": "status",
                  "operator": "in",
                  "value": [
                      4
                  ]
              },
              {
                  "field_name": "resolved_at",
                  "operator": "greater_than",
                  "value": 48
              }
          ]
      }
  ],
  "actions": [
      {
          "field_name": "status",
          "value": 5
      }
  ],
  "description": "This rule will close all the resolved tickets after 48 hours."
}

];

const hourlyTriggerRules = [
  {
    name: "Close Overdue Tickets",
    id: 301,
    summary: {
      conditions: {
        condition_set_1: [
          "If <div class=SummaryKey>Due Date</div> <div class=SummaryOperator>is</div> <div class=SummaryValue>Past Due</div>"
        ]
      },
      actions: [
        "<div class=SummaryKey>Close Ticket</div>"
      ]
    },
    description: "Automatically closes overdue tickets."
  },
  {
    name: "Close Overdue Tickets",
    id: 302,
    summary: {
      conditions: {
        condition_set_1: [
          "If <div class=SummaryKey>Due Date</div> <div class=SummaryOperator>is</div> <div class=SummaryValue>Past Due</div>"
        ]
      },
      actions: [
        "<div class=SummaryKey>Close Ticket</div>"
      ]
    },
    description: "Automatically closes overdue tickets."
  }
];


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

const findDuplicates = (rules) => {
  return rules.filter((rule, index, self) =>
    self.findIndex((r) => getRuleSignature(r) === getRuleSignature(rule)) !== index
  );
};

const AutomationTabs = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [activeTab, setActiveTab] = useState("ticketcreate");

  const getFilteredRules = (rules) => {
    return findDuplicates(rules).filter((rule) =>
      rule.description.toLowerCase().includes(searchTerm.toLowerCase())
    );
  };

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

      <FwTabs onFwChange={(e) => setActiveTab(e.target.panel)}>
        <FwTab slot="tab" panel="ticketcreate">Ticket Create</FwTab>
        <FwTab slot="tab" panel="ticketupdate">Ticket Update</FwTab>
        <FwTab slot="tab" panel="hourly">Hourly Triggers</FwTab>
    
        <FwTabPanel name="ticketcreate">
          {getFilteredRules(ticketCreateRules).length > 0 ? (
            getFilteredRules(ticketCreateRules).map((rule, index) => (
              <AutomationCard key={index} rule={rule} />
            ))
          ) : (
            <p>No duplicate rules found.</p>
          )}
        </FwTabPanel>

        <FwTabPanel name="ticketupdate">
          {getFilteredRules(ticketUpdateRules).length > 0 ? (
            getFilteredRules(ticketUpdateRules).map((rule, index) => (
              <AutomationCard key={index} rule={rule} />
            ))
          ) : (
            <p>No duplicate rules found.</p>
          )}
        </FwTabPanel>

        <FwTabPanel name="hourly">
          {getFilteredRules(hourlyTriggerRules).length > 0 ? (
            getFilteredRules(hourlyTriggerRules).map((rule, index) => (
              <AutomationCard key={index} rule={rule} />
            ))
          ) : (
            <p>No duplicate rules found.</p>
          )}
        </FwTabPanel>
      </FwTabs>


    </>
  );
};

export default AutomationTabs;



review this