import React from "react";
import { statusBadgeClass } from "../../constants/swiDocumentStatus.js";
import { formatAssignmentDate } from "../../utils/assignmentDisplay.js";

/**
 * @param {{
 *   documents: object[],
 *   currentUserId?: number | string | null,
 *   onOpenForm?: (documentId: number, documentNumber: number) => void,
 *   onViewSubmission?: (documentId: number, documentNumber: number) => void,
 *   showAssignee?: boolean,
 *   isUnread?: (row: object) => boolean,
 *   emptyMessage?: string,
 * }} props
 */
export default function UserSwiDocumentList({
  documents = [],
  currentUserId = null,
  onOpenForm,
  onViewSubmission,
  showAssignee = false,
  isUnread,
  emptyMessage = "No SWI documents found.",
}) {
  if (!documents.length) {
    return <p className="swi-muted">{emptyMessage}</p>;
  }

  const userId = currentUserId != null ? Number(currentUserId) : null;

  return (
    <ul className="swi-assign-doc-list">
      {documents.map((doc) => {
        const key = `${doc.document_id}-${doc.document_number}`;
        const isMine =
          userId != null &&
          Number(doc.assigned_to_user_id) === userId;
        const canAct = isMine && onOpenForm && onViewSubmission;
        const showNew = isUnread?.(doc);

        return (
          <li key={key}>
            <div
              className={`swi-assign-doc-item swi-assign-doc-item--static${showNew ? " swi-assign-doc-item--new" : ""}`}
            >
              <div className="swi-assign-doc-item__top">
                <span className="swi-assign-doc-item__title">
                  {doc.document_name || "Untitled"}
                </span>
                <span className="swi-assign-doc-item__badges">
                  {showNew ? (
                    <span className="swi-assign-doc-item__new-badge">New</span>
                  ) : null}
                  <span
                    className={`swi-status-badge ${statusBadgeClass(doc.document_status_id)}`}
                  >
                    {doc.document_status_name || "—"}
                  </span>
                </span>
              </div>
              <div className="swi-assign-doc-item__meta">
                <span className="swi-assign-doc-item__pill">
                  ID {doc.document_id}
                </span>
                <span className="swi-assign-doc-item__pill">
                  #{doc.document_number}
                </span>
                {doc.process_name ? (
                  <span className="swi-assign-doc-item__pill">
                    {doc.process_name}
                  </span>
                ) : null}
                {showAssignee ? (
                  <span className="swi-assign-doc-item__pill">
                    {doc.assignee_name
                      ? `Assigned to ${doc.assignee_name}`
                      : "Unassigned"}
                  </span>
                ) : null}
              </div>
              <p className="swi-muted swi-assign-task-meta">
                Issued {formatAssignmentDate(doc.issued_at)}
                {doc.assigned_at
                  ? ` · Assigned ${formatAssignmentDate(doc.assigned_at)}`
                  : ""}
                {doc.department_name ? ` · ${doc.department_name}` : ""}
              </p>
              {canAct ? (
                <div className="swi-form-actions swi-form-actions--inline">
                  <button
                    type="button"
                    className="swi-btn swi-btn--primary"
                    onClick={() =>
                      onOpenForm(doc.document_id, doc.document_number)
                    }
                  >
                    Open SWI
                  </button>
                  <button
                    type="button"
                    className="swi-btn"
                    onClick={() =>
                      onViewSubmission(doc.document_id, doc.document_number)
                    }
                  >
                    View submission
                  </button>
                </div>
              ) : null}
            </div>
          </li>
        );
      })}
    </ul>
  );
}
