import React from "react";
import Badge from "../../../common/Badge";
import "../styles/ActivityLogTable.css";

const ActivityLogTable = ({ activities }) => {
  const isFormLogs = activities.length > 0 && activities[0].form_name !== undefined;
  const isAuditLogs = activities.length > 0 && activities[0].audit_name !== undefined;

  return (
    <div className="activity-log-table-container">
      <table className="activity-log-table">
        <thead>
          <tr>
            {isAuditLogs ? (
              <>
                <th>Timestamp</th>
                <th>User ID</th>
                <th>Action</th>
                <th>Audit ID</th>
                <th>Audit Name</th>
                <th>Site Name</th>
                <th>Auditor</th>
                <th>Co-auditors</th>
                <th>Auditees</th>
                <th>Audit Status</th>
                <th>Audit Created</th>
                <th>Observed At</th>
                <th>Start Time</th>
                <th>End Time</th>
              </>
            ) : !isFormLogs ? (
              <>
                <th>Timestamp</th>
                <th>User</th>
                <th>Action</th>
                <th>Type</th>
                <th>Details</th>
              </>
            ) : null}
            {isFormLogs && (
              <>
                <th>User</th>
                <th>User ID</th>
                <th>Form name</th>
                <th>Form type</th>
                <th>Description</th>
                <th>Created By</th>
                <th>Location</th>
                <th>Timestamp</th>
              </>
            )}
          </tr>
        </thead>
        <tbody>
          {activities.length === 0 ? (
            <tr>
              <td
                colSpan={
                  isFormLogs ? 9 : isAuditLogs ? 14 : 5
                }
                className="no-activities"
              >
                No activities found
              </td>
            </tr>
          ) : isAuditLogs ? (
            activities.map((activity, index) => (
              <tr key={activity.log_id != null ? activity.log_id : index}>
                <td data-label="Timestamp">{activity.timestamp}</td>
                <td data-label="User ID">{activity.user_id}</td>
                <td data-label="Action">{activity.action}</td>
                <td data-label="Audit ID">{activity.audit_id}</td>
                <td data-label="Audit Name" className="activity-log-cell-wrap">{activity.audit_name}</td>
                <td data-label="Site Name">{activity.location}</td>
                <td data-label="Auditor">{activity.auditor_name}</td>
                <td data-label="Co-auditors" className="activity-log-cell-wrap">{activity.co_auditors ?? "—"}</td>
                <td data-label="Auditees" className="activity-log-cell-wrap">{activity.auditees ?? "—"}</td>
                <td data-label="Audit Status">{activity.audit_status_name}</td>
                <td data-label="Audit Created">{activity.audit_created_at}</td>
                <td data-label="Observed At">{activity.observed_at}</td>
                <td data-label="Start Time">{activity.start_time}</td>
                <td data-label="End Time">{activity.end_time}</td>
              </tr>
            ))
          ) : isFormLogs ? (
            activities.map((activity, index) => (
              <tr key={index}>
                <td data-label="User">{activity.user}</td>
                <td data-label="User ID">{activity.user_id}</td>
                <td data-label="Form name" className="activity-log-cell-wrap">{activity.form_name}</td>
                <td data-label="Form type">{activity.form_type}</td>
                <td data-label="Description" className="activity-log-cell-wrap">{activity.description}</td>
                <td data-label="Created By">{activity.created_by}</td>
                <td data-label="Location">{activity.location}</td>
                <td data-label="Timestamp">{activity.timestamp}</td>
              </tr>
            ))
          ) : (
            activities.map((activity, index) => (
              <tr key={index}>
                <td data-label="Timestamp">{activity.timestamp}</td>
                <td data-label="User">{activity.user}</td>
                <td data-label="Action">{activity.action}</td>
                <td data-label="Type">
                  <Badge variant="success">{activity.type}</Badge>
                </td>
                <td data-label="Details">{activity.details}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default ActivityLogTable;

