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

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

  if (activities.length === 0) {
    return (
      <div className="activity-log-cards-container">
        <p className="activity-log-cards-empty">No activities found </p>
      </div>
    );
  }

  if (isAuditLogs) {
    return (
      <div className="activity-log-cards-container">
        <div className="activity-log-cards-grid">
          {activities.map((activity, index) => (
            <article key={activity.log_id != null ? activity.log_id : index} className="activity-log-card activity-log-card--audit">
              <div className="activity-log-card__header">
                <span className="activity-log-card__timestamp">{activity.timestamp}</span>
                <Badge variant="success">{activity.action}</Badge>
              </div>
              <div className="activity-log-card__body">
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Audit</span>
                  <span className="activity-log-card__value">#{activity.audit_id} · {activity.audit_name}</span>
                </div>
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Auditor</span>
                  <span className="activity-log-card__value">{activity.auditor_name}</span>
                </div>
                {(activity.co_auditors && activity.co_auditors !== "—") && (
                  <div className="activity-log-card__row">
                    <span className="activity-log-card__label">Co-auditors</span>
                    <span className="activity-log-card__value activity-log-card__value--wrap">{activity.co_auditors}</span>
                  </div>
                )}
                {(activity.auditees && activity.auditees !== "—") && (
                  <div className="activity-log-card__row">
                    <span className="activity-log-card__label">Auditees</span>
                    <span className="activity-log-card__value activity-log-card__value--wrap">{activity.auditees}</span>
                  </div>
                )}
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">User ID</span>
                  <span className="activity-log-card__value">{activity.user_id}</span>
                </div>
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Site Name</span>
                  <span className="activity-log-card__value">{activity.location}</span>
                </div>
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Status</span>
                  <span className="activity-log-card__value">{activity.audit_status_name}</span>
                </div>
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Created</span>
                  <span className="activity-log-card__value">{activity.audit_created_at}</span>
                </div>
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Observed</span>
                  <span className="activity-log-card__value">{activity.observed_at}</span>
                </div>
                {(activity.start_time !== "—" || activity.end_time !== "—") && (
                  <div className="activity-log-card__row">
                    <span className="activity-log-card__label">Time</span>
                    <span className="activity-log-card__value">{activity.start_time} – {activity.end_time}</span>
                  </div>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    );
  }

  if (isFormLogs) {
    return (
      <div className="activity-log-cards-container">
        <div className="activity-log-cards-grid">
          {activities.map((activity, index) => (
            <article key={index} className="activity-log-card activity-log-card--form">
              <div className="activity-log-card__header">
                <span className="activity-log-card__title">{activity.form_name}</span>
                <span className="activity-log-card__timestamp">{activity.timestamp}</span>
              </div>
              <div className="activity-log-card__body">
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">User</span>
                  <span className="activity-log-card__value">{activity.user} (ID: {activity.user_id})</span>
                </div>
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Form type</span>
                  <span className="activity-log-card__value">{activity.form_type}</span>
                </div>
                {activity.description && (
                  <div className="activity-log-card__row">
                    <span className="activity-log-card__label">Description</span>
                    <span className="activity-log-card__value activity-log-card__value--wrap">{activity.description}</span>
                  </div>
                )}
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Created by</span>
                  <span className="activity-log-card__value">{activity.created_by}</span>
                </div>
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Location</span>
                  <span className="activity-log-card__value">{activity.location}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="activity-log-cards-container">
      <div className="activity-log-cards-grid">
        {activities.map((activity, index) => (
          <article key={index} className="activity-log-card activity-log-card--default">
            <div className="activity-log-card__header">
              <span className="activity-log-card__timestamp">{activity.timestamp}</span>
              <Badge variant="success">{activity.type}</Badge>
            </div>
            <div className="activity-log-card__body">
              <div className="activity-log-card__row">
                <span className="activity-log-card__label">User</span>
                <span className="activity-log-card__value">{activity.user}</span>
              </div>
              <div className="activity-log-card__row">
                <span className="activity-log-card__label">Action</span>
                <span className="activity-log-card__value">{activity.action}</span>
              </div>
              {activity.details && (
                <div className="activity-log-card__row">
                  <span className="activity-log-card__label">Details</span>
                  <span className="activity-log-card__value activity-log-card__value--wrap">{activity.details}</span>
                </div>
              )}
            </div>
          </article>
        ))}
      </div>
    </div>
  );
};

export default ActivityLogCards;
