import React from "react";
import {
  canStartWork,
  statusBadgeClass,
} from "../../../constants/swiDocumentStatus.js";
import {
  assignmentFeatureTags,
  assignmentKey,
  assignmentListEditEnabled,
  assignmentListShowEditButton,
  formatAssignmentDateTime,
} from "../../../utils/assignmentDisplay.js";

/**
 * @param {{
 *   tasks: object[],
 *   userName: string,
 *   startingKey: string | null,
 *   onOpenForm: (documentId: number, documentNumber: number) => void,
 *   onViewSubmission: (documentId: number, documentNumber: number) => void,
 *   onStartWork: (documentId: number, documentNumber: number) => void,
 * }} props
 */
export default function AssignmentCardGrid({
  tasks,
  userName,
  startingKey,
  onOpenForm,
  onViewSubmission,
  onStartWork,
}) {
  return (
    <ul className="swi-assign-doc-list swi-assignment-card-grid">
      {tasks.map((t) => {
        const key = assignmentKey(t);
        const tags = assignmentFeatureTags(t);
        const showStart = canStartWork(t.document_status_id);
        const showEditBtn = assignmentListShowEditButton(t.document_status_id);
        const editEnabled = assignmentListEditEnabled(t.document_status_id);
        const busy = startingKey === key;

        return (
          <li key={key}>
            <article className="swi-assign-doc-item swi-assign-doc-item--static swi-assignment-card">
              <div className="swi-assign-doc-item__top">
                <span className="swi-assign-doc-item__title">
                  {t.document_name || "Untitled"}
                </span>
                <span
                  className={`swi-status-badge ${statusBadgeClass(t.document_status_id)}`}
                >
                  {t.document_status_name || "Assigned"}
                </span>
              </div>

              <dl className="swi-assignment-card__facts">
                <div>
                  <dt>User</dt>
                  <dd>{userName}</dd>
                </div>
                <div>
                  <dt>Assigned</dt>
                  <dd>{formatAssignmentDateTime(t.assigned_at)}</dd>
                </div>
                <div>
                  <dt>Document</dt>
                  <dd>
                    ID {t.document_id} · #{t.document_number}
                  </dd>
                </div>
              </dl>

              {tags.length ? (
                <ul className="swi-assignment-tags swi-assignment-tags--card">
                  {tags.map((tag) => (
                    <li key={`${key}-${tag.label}`} className="swi-assignment-tags__item">
                      <span className="swi-assignment-tags__label">{tag.label}</span>
                      <span className="swi-assignment-tags__value">{tag.value}</span>
                    </li>
                  ))}
                </ul>
              ) : null}

              <div className="swi-assignment-card__actions">
                <button
                  type="button"
                  className={`swi-btn${editEnabled ? "" : " swi-btn--primary"}`}
                  onClick={() => onViewSubmission(t.document_id, t.document_number)}
                >
                  View
                </button>
                {showEditBtn ? (
                  <button
                    type="button"
                    className="swi-btn swi-btn--primary"
                    disabled={!editEnabled}
                    title={
                      editEnabled
                        ? "Edit document form"
                        : "Completed documents cannot be edited"
                    }
                    onClick={() => onOpenForm(t.document_id, t.document_number)}
                  >
                    Edit
                  </button>
                ) : null}
                {showStart ? (
                  <button
                    type="button"
                    className="swi-btn swi-btn--ghost"
                    disabled={busy}
                    onClick={() => onStartWork(t.document_id, t.document_number)}
                  >
                    {busy ? "Updating…" : "Set to in process"}
                  </button>
                ) : null}
              </div>
            </article>
          </li>
        );
      })}
    </ul>
  );
}
