import {
  useCallback,
  useEffect,
  useMemo,
  useState
} from "react";

import {
  useNavigate
} from "react-router-dom";

import {
  useAdminAuth
} from "../../context/AdminAuthContext";

import {
  getAdminAuditLogs
} from "../../services/adminAuditService";

/* =========================================================
   CONSTANTS
   ========================================================= */

const initialPagination = {
  current_page: 1,
  per_page: 20,
  total_records: 0,
  total_pages: 1,
  has_previous_page: false,
  has_next_page: false
};

const initialOverview = {
  total_events: 0,
  events_today: 0,
  events_last_7_days: 0,
  account_events: 0,
  active_administrators: 0
};

const initialOptions = {
  administrators: [],
  actions: [],
  entity_types: []
};

const roleLabels = {
  super_admin:
    "Super Administrator",

  hr_admin:
    "HR Administrator",

  hr_reviewer:
    "HR Reviewer"
};

const actionTypeClasses = {
  created:
    "admin-audit-action--created",

  updated:
    "admin-audit-action--updated",

  approved:
    "admin-audit-action--approved",

  rejected:
    "admin-audit-action--rejected",

  returned:
    "admin-audit-action--returned",

  deleted:
    "admin-audit-action--deleted",

  downloaded:
    "admin-audit-action--downloaded",

  viewed:
    "admin-audit-action--viewed",

  login:
    "admin-audit-action--login",

  logout:
    "admin-audit-action--logout",

  activated:
    "admin-audit-action--activated",

  deactivated:
    "admin-audit-action--deactivated",

  assigned:
    "admin-audit-action--assigned",

  password:
    "admin-audit-action--password"
};

/* =========================================================
   FORMATTERS
   ========================================================= */

const formatDate = (
  value
) => {
  if (!value) {
    return "Not available";
  }

  const date =
    new Date(value);

  if (
    Number.isNaN(
      date.getTime()
    )
  ) {
    return "Not available";
  }

  return new Intl.DateTimeFormat(
    "en-GH",
    {
      dateStyle: "medium",
      timeStyle: "short"
    }
  ).format(date);
};

const formatLabel = (
  value
) => {
  if (!value) {
    return "Not available";
  }

  return String(value)
    .replace(/_/g, " ")
    .replace(
      /\b\w/g,
      (character) =>
        character.toUpperCase()
    );
};

const formatEntityLabel = (
  value
) => {
  return formatLabel(
    value
  );
};

const getActionClass = (
  action
) => {
  const normalizedAction =
    String(action || "")
      .toLowerCase();

  const matchingKey =
    Object.keys(
      actionTypeClasses
    ).find(
      (key) =>
        normalizedAction.includes(
          key
        )
    );

  return matchingKey
    ? actionTypeClasses[
        matchingKey
      ]
    : "admin-audit-action--default";
};

const getInitials = (
  fullName
) => {
  const initials =
    String(fullName || "")
      .trim()
      .split(/\s+/)
      .filter(Boolean)
      .slice(0, 2)
      .map(
        (word) =>
          word
            .charAt(0)
            .toUpperCase()
      )
      .join("");

  return initials || "AD";
};

const formatMetadataValue = (
  value
) => {
  if (
    value === null ||
    value === undefined ||
    value === ""
  ) {
    return "Not provided";
  }

  if (
    typeof value ===
    "boolean"
  ) {
    return value
      ? "Yes"
      : "No";
  }

  if (
    typeof value ===
    "object"
  ) {
    return JSON.stringify(
      value,
      null,
      2
    );
  }

  return String(value);
};

const escapeCsvValue = (
  value
) => {
  const normalizedValue =
    value === null ||
    value === undefined
      ? ""
      : String(value);

  return `"${normalizedValue.replace(
    /"/g,
    '""'
  )}"`;
};

/* =========================================================
   COMPONENT
   ========================================================= */

const AdminAuditLog = () => {
  const navigate =
    useNavigate();

  const {
    admin
  } = useAdminAuth();

  const canAccessAuditLog = [
    "super_admin",
    "hr_admin"
  ].includes(
    admin?.role
  );

  const [
    logs,
    setLogs
  ] = useState([]);

  const [
    overview,
    setOverview
  ] = useState(
    initialOverview
  );

  const [
    options,
    setOptions
  ] = useState(
    initialOptions
  );

  const [
    pagination,
    setPagination
  ] = useState(
    initialPagination
  );

  const [
    searchInput,
    setSearchInput
  ] = useState("");

  const [
    appliedSearch,
    setAppliedSearch
  ] = useState("");

  const [
    actionFilter,
    setActionFilter
  ] = useState("");

  const [
    entityTypeFilter,
    setEntityTypeFilter
  ] = useState("");

  const [
    administratorFilter,
    setAdministratorFilter
  ] = useState("");

  const [
    dateFrom,
    setDateFrom
  ] = useState("");

  const [
    dateTo,
    setDateTo
  ] = useState("");

  const [
    loading,
    setLoading
  ] = useState(true);

  const [
    error,
    setError
  ] = useState("");

  const [
    selectedLog,
    setSelectedLog
  ] = useState(null);

  const hasFilters =
    useMemo(
      () =>
        Boolean(
          appliedSearch ||
          actionFilter ||
          entityTypeFilter ||
          administratorFilter ||
          dateFrom ||
          dateTo
        ),
      [
        appliedSearch,
        actionFilter,
        entityTypeFilter,
        administratorFilter,
        dateFrom,
        dateTo
      ]
    );

  /* =========================================================
     LOAD AUDIT LOGS
     ========================================================= */

  const loadAuditLogs =
    useCallback(
      async (
        requestedPage = 1
      ) => {
        if (
          !canAccessAuditLog
        ) {
          setLoading(false);
          return;
        }

        try {
          setLoading(true);
          setError("");

          const result =
            await getAdminAuditLogs({
              page:
                requestedPage,

              limit: 20,

              search:
                appliedSearch,

              action:
                actionFilter,

              entityType:
                entityTypeFilter,

              adminUserId:
                administratorFilter,

              dateFrom,

              dateTo
            });

          setLogs(
            result?.data
              ?.logs ||
              []
          );

          setOverview({
            ...initialOverview,
            ...result?.data
              ?.overview
          });

          const responseOptions =
  result?.data?.options || {};

setOptions({
  administrators:
    Array.isArray(
      responseOptions.administrators
    )
      ? responseOptions.administrators
      : [],

  actions:
    Array.isArray(
      responseOptions.actions
    )
      ? responseOptions.actions
      : [],

  entity_types:
    Array.isArray(
      responseOptions.entity_types
    )
      ? responseOptions.entity_types
      : []
});

          setPagination({
            ...initialPagination,
            ...result?.data
              ?.pagination
          });
        } catch (
          requestError
        ) {
          console.error(
            "Load audit logs error:",
            requestError
          );

          setError(
            requestError.response
              ?.data?.message ||
              requestError.message ||
              "Unable to load the administrator audit log."
          );

          setLogs([]);
        } finally {
          setLoading(false);
        }
      },
      [
        canAccessAuditLog,
        appliedSearch,
        actionFilter,
        entityTypeFilter,
        administratorFilter,
        dateFrom,
        dateTo
      ]
    );

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

  /* =========================================================
     SEARCH AND FILTERS
     ========================================================= */

  const handleSearchSubmit = (
    event
  ) => {
    event.preventDefault();

    const nextSearch =
      searchInput.trim();

    if (
      nextSearch ===
      appliedSearch
    ) {
      loadAuditLogs(1);
      return;
    }

    setAppliedSearch(
      nextSearch
    );
  };

  const handleClearFilters =
    () => {
      setSearchInput("");
      setAppliedSearch("");
      setActionFilter("");
      setEntityTypeFilter("");
      setAdministratorFilter("");
      setDateFrom("");
      setDateTo("");
      setError("");
    };

  const handleRefresh =
    () => {
      loadAuditLogs(
        pagination
          .current_page
      );
  };

  /* =========================================================
     EXPORT CURRENT PAGE
     ========================================================= */

  const exportCurrentPage =
    () => {
      if (
        logs.length === 0
      ) {
        return;
      }

      const headers = [
        "Date and Time",
        "Administrator",
        "Username",
        "Role",
        "Action",
        "Entity Type",
        "Entity ID",
        "Description",
        "IP Address",
        "User Agent",
        "Metadata"
      ];

      const rows =
        logs.map(
          (log) => [
            formatDate(
              log.created_at
            ),

            log.admin_user_name ||
              "System",

            log.admin_username ||
              "",

            roleLabels[
              log.admin_user_role
            ] ||
              formatLabel(
                log.admin_user_role
              ),

            log.action ||
              "",

            log.entity_type ||
              "",

            log.entity_id ||
              "",

            log.description ||
              "",

            log.ip_address ||
              "",

            log.user_agent ||
              "",

            log.metadata
              ? JSON.stringify(
                  log.metadata
                )
              : ""
          ]
        );

      const csvContent = [
        headers,
        ...rows
      ]
        .map(
          (row) =>
            row
              .map(
                escapeCsvValue
              )
              .join(",")
        )
        .join("\n");

      const csvBlob =
        new Blob(
          [
            "\uFEFF",
            csvContent
          ],
          {
            type:
              "text/csv;charset=utf-8;"
          }
        );

      const objectUrl =
        URL.createObjectURL(
          csvBlob
        );

      const downloadLink =
        document.createElement(
          "a"
        );

      const dateStamp =
        new Date()
          .toISOString()
          .slice(0, 10);

      downloadLink.href =
        objectUrl;

      downloadLink.download =
        `administrator-audit-log-${dateStamp}.csv`;

      document.body.appendChild(
        downloadLink
      );

      downloadLink.click();
      downloadLink.remove();

      URL.revokeObjectURL(
        objectUrl
      );
    };

  /* =========================================================
     DETAIL MODAL
     ========================================================= */

  const openLogDetails = (
    auditLog
  ) => {
    setSelectedLog(
      auditLog
    );
  };

  const closeLogDetails =
    () => {
      setSelectedLog(
        null
      );
    };

  /* =========================================================
     ACCESS CONTROL
     ========================================================= */

  if (
    !canAccessAuditLog
  ) {
    return (
      <section className="admin-panel">
        <div className="form-alert form-alert--error">
          Your administrator account does not
          have permission to view the system
          audit log.
        </div>

        <button
          type="button"
          className="secondary-button"
          onClick={() =>
            navigate(
              "/admin/dashboard"
            )
          }
        >
          Back to dashboard
        </button>
      </section>
    );
  }

  return (
    <div className="admin-audit-page">
      {/* =====================================================
          PAGE HEADER
          ===================================================== */}

      <section className="admin-audit-header">
        <div>
          <span className="admin-audit-eyebrow">
            System Accountability
          </span>

          <h2>
            Audit Log
          </h2>

          <p>
            Review administrator activities,
            account changes, staff record
            decisions and other security-sensitive
            system events.
          </p>
        </div>

        <div className="admin-audit-header__actions">
          <button
            type="button"
            className="secondary-button"
            onClick={
              handleRefresh
            }
            disabled={loading}
          >
            {loading
              ? "Refreshing..."
              : "Refresh"}
          </button>

          {admin?.role ===
            "super_admin" && (
            <button
              type="button"
              className="primary-button"
              onClick={
                exportCurrentPage
              }
              disabled={
                loading ||
                logs.length === 0
              }
            >
              Export current page
            </button>
          )}
        </div>
      </section>

      {/* =====================================================
          OVERVIEW
          ===================================================== */}

      <section className="admin-audit-overview">
        <article>
          <span>
            Total Events
          </span>

          <strong>
            {
              overview
                .total_events
            }
          </strong>

          <small>
            All recorded administrator
            activities.
          </small>
        </article>

        <article>
          <span>
            Events Today
          </span>

          <strong>
            {
              overview
                .events_today
            }
          </strong>

          <small>
            Activities recorded today.
          </small>
        </article>

        <article>
          <span>
            Last 7 Days
          </span>

          <strong>
            {
              overview
                .events_last_7_days
            }
          </strong>

          <small>
            Recent administrator activities.
          </small>
        </article>

        <article>
          <span>
            Account Events
          </span>

          <strong>
            {
              overview
                .account_events
            }
          </strong>

          <small>
            Administrator account changes.
          </small>
        </article>

        <article>
          <span>
            Administrators
          </span>

          <strong>
            {
              overview
                .active_administrators
            }
          </strong>

          <small>
            Administrators represented in the
            audit history.
          </small>
        </article>
      </section>

      {/* =====================================================
          FILTERS AND TABLE
          ===================================================== */}

      <section className="admin-panel">
        <div className="admin-panel__heading admin-audit-panel-heading">
          <div>
            <h3>
              Administrator Activity
            </h3>

            <p>
              Search, filter and inspect
              permanent records of administrator
              actions.
            </p>
          </div>

          <div className="admin-submission-count">
            <span>
              Matching events
            </span>

            <strong>
              {
                pagination
                  .total_records
              }
            </strong>
          </div>
        </div>

        {error && (
          <div
            className="form-alert form-alert--error"
            role="alert"
          >
            {error}
          </div>
        )}

        <form
          className="admin-audit-filters"
          onSubmit={
            handleSearchSubmit
          }
        >
          <div className="admin-filter-search admin-audit-filter-search">
            <label htmlFor="audit_search">
              Search audit log
            </label>

            <div className="admin-filter-search__field">
              <input
                id="audit_search"
                type="search"
                value={
                  searchInput
                }
                onChange={(event) =>
                  setSearchInput(
                    event.target.value
                  )
                }
                placeholder="Administrator, action, description, entity or IP address"
              />

              <button
                type="submit"
                className="primary-button"
                disabled={loading}
              >
                Search
              </button>
            </div>
          </div>

          <div className="admin-filter-group">
            <label htmlFor="audit_action">
              Action
            </label>

            <select
              id="audit_action"
              value={
                actionFilter
              }
              onChange={(event) =>
                setActionFilter(
                  event.target.value
                )
              }
              disabled={loading}
            >
              <option value="">
                All actions
              </option>

              {(options.actions || []).map(
                (action) => (
                  <option
                    key={action}
                    value={action}
                  >
                    {formatLabel(
                      action
                    )}
                  </option>
                )
              )}
            </select>
          </div>

          <div className="admin-filter-group">
            <label htmlFor="audit_entity_type">
              Entity Type
            </label>

            <select
              id="audit_entity_type"
              value={
                entityTypeFilter
              }
              onChange={(event) =>
                setEntityTypeFilter(
                  event.target.value
                )
              }
              disabled={loading}
            >
              <option value="">
                All entity types
              </option>

              {(options.entity_types || []).map(
                (entityType) => (
                  <option
                    key={
                      entityType
                    }
                    value={
                      entityType
                    }
                  >
                    {formatEntityLabel(
                      entityType
                    )}
                  </option>
                )
              )}
            </select>
          </div>

          <div className="admin-filter-group">
            <label htmlFor="audit_administrator">
              Administrator
            </label>

            <select
              id="audit_administrator"
              value={
                administratorFilter
              }
              onChange={(event) =>
                setAdministratorFilter(
                  event.target.value
                )
              }
              disabled={loading}
            >
              <option value="">
                All administrators
              </option>

              {(options.administrators || []).map(
                (
                  administrator
                ) => (
                  <option
                    key={
                      administrator.id
                    }
                    value={
                      administrator.id
                    }
                  >
                    {
                      administrator
                        .full_name
                    }
                    {" — "}
                    {roleLabels[
                      administrator.role
                    ] ||
                      formatLabel(
                        administrator.role
                      )}
                  </option>
                )
              )}
            </select>
          </div>

          <div className="admin-filter-group">
            <label htmlFor="audit_date_from">
              Date From
            </label>

            <input
              id="audit_date_from"
              type="date"
              value={
                dateFrom
              }
              onChange={(event) =>
                setDateFrom(
                  event.target.value
                )
              }
              max={
                dateTo ||
                undefined
              }
              disabled={loading}
            />
          </div>

          <div className="admin-filter-group">
            <label htmlFor="audit_date_to">
              Date To
            </label>

            <input
              id="audit_date_to"
              type="date"
              value={
                dateTo
              }
              onChange={(event) =>
                setDateTo(
                  event.target.value
                )
              }
              min={
                dateFrom ||
                undefined
              }
              disabled={loading}
            />
          </div>

          <button
            type="button"
            className="secondary-button admin-audit-clear-button"
            onClick={
              handleClearFilters
            }
            disabled={
              loading ||
              !hasFilters
            }
          >
            Clear filters
          </button>
        </form>

        {loading ? (
          <div className="admin-page-loading admin-page-loading--compact">
            <div className="admin-loading-spinner" />

            <p>
              Loading administrator audit
              events...
            </p>
          </div>
        ) : logs.length ===
          0 ? (
          <div className="admin-audit-empty">
            <div className="admin-audit-empty__icon">
              ⎘
            </div>

            <h3>
              No audit events found
            </h3>

            <p>
              No administrator activities match
              the selected search and filters.
            </p>

            {hasFilters && (
              <button
                type="button"
                className="secondary-button"
                onClick={
                  handleClearFilters
                }
              >
                Show all events
              </button>
            )}
          </div>
        ) : (
          <>
            <div className="admin-table-wrapper">
              <table className="admin-table admin-audit-table">
                <thead>
                  <tr>
                    <th>
                      Date and Time
                    </th>

                    <th>
                      Administrator
                    </th>

                    <th>
                      Action
                    </th>

                    <th>
                      Entity
                    </th>

                    <th>
                      Description
                    </th>

                    <th>
                      IP Address
                    </th>

                    <th>
                      Details
                    </th>
                  </tr>
                </thead>

                <tbody>
                  {logs.map(
                    (auditLog) => (
                      <tr
                        key={
                          auditLog.id
                        }
                      >
                        <td>
                          <strong className="admin-audit-date">
                            {formatDate(
                              auditLog
                                .created_at
                            )}
                          </strong>
                        </td>

                        <td>
                          <div className="admin-audit-administrator">
                            <div className="admin-audit-avatar">
                              {getInitials(
                                auditLog
                                  .admin_user_name
                              )}
                            </div>

                            <div>
                              <strong>
                                {auditLog
                                  .admin_user_name ||
                                  "System"}
                              </strong>

                              {auditLog
                                .admin_username && (
                                <span>
                                  @
                                  {
                                    auditLog
                                      .admin_username
                                  }
                                </span>
                              )}

                              {auditLog
                                .admin_user_role && (
                                <small>
                                  {roleLabels[
                                    auditLog
                                      .admin_user_role
                                  ] ||
                                    formatLabel(
                                      auditLog
                                        .admin_user_role
                                    )}
                                </small>
                              )}
                            </div>
                          </div>
                        </td>

                        <td>
                          <span
                            className={[
                              "admin-audit-action",
                              getActionClass(
                                auditLog
                                  .action
                              )
                            ].join(" ")}
                          >
                            {formatLabel(
                              auditLog
                                .action
                            )}
                          </span>
                        </td>

                        <td>
                          <div className="admin-audit-entity">
                            <strong>
                              {formatEntityLabel(
                                auditLog
                                  .entity_type
                              )}
                            </strong>

                            {auditLog
                              .entity_id && (
                              <span>
                                ID:{" "}
                                {
                                  auditLog
                                    .entity_id
                                }
                              </span>
                            )}
                          </div>
                        </td>

                        <td>
                          <p className="admin-audit-description">
                            {auditLog
                              .description ||
                              "No description was recorded."}
                          </p>
                        </td>

                        <td>
                          <span className="admin-audit-ip">
                            {auditLog
                              .ip_address ||
                              "Not recorded"}
                          </span>
                        </td>

                        <td>
                          <button
                            type="button"
                            className="admin-action-button"
                            onClick={() =>
                              openLogDetails(
                                auditLog
                              )
                            }
                          >
                            View details
                          </button>
                        </td>
                      </tr>
                    )
                  )}
                </tbody>
              </table>
            </div>

            <div className="admin-pagination">
              <div>
                Page{" "}
                <strong>
                  {
                    pagination
                      .current_page
                  }
                </strong>{" "}
                of{" "}
                <strong>
                  {
                    pagination
                      .total_pages
                  }
                </strong>
              </div>

              <div className="admin-pagination__actions">
                <button
                  type="button"
                  className="secondary-button"
                  onClick={() =>
                    loadAuditLogs(
                      pagination
                        .current_page -
                        1
                    )
                  }
                  disabled={
                    loading ||
                    !pagination
                      .has_previous_page
                  }
                >
                  Previous
                </button>

                <button
                  type="button"
                  className="secondary-button"
                  onClick={() =>
                    loadAuditLogs(
                      pagination
                        .current_page +
                        1
                    )
                  }
                  disabled={
                    loading ||
                    !pagination
                      .has_next_page
                  }
                >
                  Next
                </button>
              </div>
            </div>
          </>
        )}
      </section>

      {/* =====================================================
          AUDIT DETAIL MODAL
          ===================================================== */}

      {selectedLog && (
        <div
          className="system-modal-backdrop"
          role="presentation"
          onMouseDown={(event) => {
            if (
              event.target ===
              event.currentTarget
            ) {
              closeLogDetails();
            }
          }}
        >
          <div
            className="system-modal admin-audit-detail-modal"
            role="dialog"
            aria-modal="true"
            aria-labelledby="audit-detail-title"
          >
            <div className="admin-assignment-modal__heading">
              <div>
                <span>
                  Audit Event
                </span>

                <h3 id="audit-detail-title">
                  {formatLabel(
                    selectedLog
                      .action
                  )}
                </h3>

                <p>
                  Event ID:{" "}
                  {
                    selectedLog.id
                  }
                </p>
              </div>

              <button
                type="button"
                className="admin-modal-close"
                onClick={
                  closeLogDetails
                }
                aria-label="Close audit details"
              >
                ×
              </button>
            </div>

            <div className="admin-audit-detail-content">
              <section className="admin-audit-detail-summary">
                <div>
                  <span>
                    Date and Time
                  </span>

                  <strong>
                    {formatDate(
                      selectedLog
                        .created_at
                    )}
                  </strong>
                </div>

                <div>
                  <span>
                    Administrator
                  </span>

                  <strong>
                    {selectedLog
                      .admin_user_name ||
                      "System"}
                  </strong>
                </div>

                <div>
                  <span>
                    Username
                  </span>

                  <strong>
                    {selectedLog
                      .admin_username
                      ? `@${selectedLog.admin_username}`
                      : "Not available"}
                  </strong>
                </div>

                <div>
                  <span>
                    Administrator Role
                  </span>

                  <strong>
                    {roleLabels[
                      selectedLog
                        .admin_user_role
                    ] ||
                      formatLabel(
                        selectedLog
                          .admin_user_role
                      )}
                  </strong>
                </div>

                <div>
                  <span>
                    Entity Type
                  </span>

                  <strong>
                    {formatEntityLabel(
                      selectedLog
                        .entity_type
                    )}
                  </strong>
                </div>

                <div>
                  <span>
                    Entity ID
                  </span>

                  <strong>
                    {selectedLog
                      .entity_id ||
                      "Not available"}
                  </strong>
                </div>

                <div>
                  <span>
                    IP Address
                  </span>

                  <strong>
                    {selectedLog
                      .ip_address ||
                      "Not recorded"}
                  </strong>
                </div>
              </section>

              <section className="admin-audit-detail-section">
                <h4>
                  Description
                </h4>

                <p>
                  {selectedLog
                    .description ||
                    "No description was recorded."}
                </p>
              </section>

              <section className="admin-audit-detail-section">
                <h4>
                  Browser and Device
                </h4>

                <p className="admin-audit-user-agent">
                  {selectedLog
                    .user_agent ||
                    "No user-agent information was recorded."}
                </p>
              </section>

              <section className="admin-audit-detail-section">
                <h4>
                  Event Metadata
                </h4>

                {!selectedLog
                  .metadata ? (
                  <div className="admin-review-empty">
                    No additional metadata was
                    recorded for this event.
                  </div>
                ) : (
                  <div className="admin-audit-metadata">
                    {Object.entries(
                      selectedLog
                        .metadata
                    ).map(
                      ([
                        metadataKey,
                        metadataValue
                      ]) => (
                        <div
                          key={
                            metadataKey
                          }
                          className="admin-audit-metadata__item"
                        >
                          <span>
                            {formatLabel(
                              metadataKey
                            )}
                          </span>

                          {typeof metadataValue ===
                            "object" ? (
                            <pre>
                              {formatMetadataValue(
                                metadataValue
                              )}
                            </pre>
                          ) : (
                            <strong>
                              {formatMetadataValue(
                                metadataValue
                              )}
                            </strong>
                          )}
                        </div>
                      )
                    )}
                  </div>
                )}
              </section>
            </div>

            <div className="system-modal__actions">
              <button
                type="button"
                className="secondary-button"
                onClick={
                  closeLogDetails
                }
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default AdminAuditLog;