// @ts-nocheck
import { formatEventDetail, formatEventLabel, formatRequestTimestamp } from "../utils";

export function LauncherLogsModal({
  logsLoading,
  recentSaveEvents,
  setLogsModalOpen,
}) {
  return (
    <div className="launcher-modal-backdrop" onClick={() => setLogsModalOpen(false)}>
      <section
        className="launcher-modal launcher-modal-logs"
        onClick={(event) => event.stopPropagation()}
        aria-label="Request logs"
      >
        <div className="launcher-modal-head">
          <div>
            <div className="launcher-request-admin-kicker">Console View</div>
            <h3 className="launcher-request-admin-title">Request Logs</h3>
          </div>
          <button
            type="button"
            className="launcher-secondary-btn"
            onClick={() => setLogsModalOpen(false)}
          >
            Close
          </button>
        </div>
        <div className="launcher-modal-console">
          {logsLoading && recentSaveEvents.length === 0 ? (
            <div className="launcher-request-empty">Loading admin logs...</div>
          ) : null}
          {!logsLoading && recentSaveEvents.length === 0 ? (
            <div className="launcher-request-empty">No admin logs have been recorded yet.</div>
          ) : null}
          {recentSaveEvents.map((eventEntry, index) => (
            <article key={`modal-log-${eventEntry.at || index}-${eventEntry.type || "event"}`} className="launcher-modal-console-row">
              <div className="launcher-modal-console-time">{formatRequestTimestamp(String(eventEntry.at || ""))}</div>
              <div className="launcher-modal-console-copy">
                <div className="launcher-request-admin-log-title">{formatEventLabel(eventEntry)}</div>
                <div className="launcher-request-admin-log-detail">{formatEventDetail(eventEntry) || "No extra details recorded."}</div>
              </div>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}
