import React from "react";
import {
  canStartWork,
  statusBadgeClass,
} from "../../../constants/swiDocumentStatus.js";
import {
  assignmentFeatureTags,
  assignmentKey,
  assignmentListEditEnabled,
  assignmentListShowEditButton,
  formatAssignmentDate,
} 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 AssignmentListTable({
  tasks,
  userName,
  startingKey,
  onOpenForm,
  onViewSubmission,
  onStartWork,
}) {
  return (
    <div className="swi-table-wrap swi-assignment-table-wrap">
      <table className="swi-table swi-assignment-table">
        <thead>
          <tr>
            <th>Document</th>
            <th>User name</th>
            <th>Date</th>
            <th>Details</th>
            <th>Actions</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {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 (
              <tr key={key} className="swi-assignment-table__row">
                <td data-label="Document">
                  <div className="swi-assignment-table__doc">
                    <span className="swi-assignment-table__doc-name">
                      {t.document_name || "Untitled"}
                    </span>
                    <span className="swi-muted small">
                      ID {t.document_id} · #{t.document_number}
                    </span>
                  </div>
                </td>
                <td data-label="User name">
                  <span className="swi-assignment-table__user">{userName}</span>
                </td>
                <td data-label="Date">
                  <div className="swi-assignment-table__dates">
                    <span>{formatAssignmentDate(t.assigned_at)}</span>
                    <span className="swi-muted small">Assigned</span>
                  </div>
                </td>
                <td data-label="Details">
                  <ul className="swi-assignment-tags">
                    {tags.length ? (
                      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>
                      ))
                    ) : (
                      <li className="swi-muted small">—</li>
                    )}
                  </ul>
                </td>
                <td data-label="Actions">
                  <div className="swi-assignment-table__actions">
                    <button
                      type="button"
                      className={`swi-btn swi-btn--compact${editEnabled ? "" : " swi-btn--primary"}`}
                      onClick={() =>
                        onViewSubmission(t.document_id, t.document_number)
                      }
                    >
                      View
                    </button>
                    {showEditBtn ? (
                      <button
                        type="button"
                        className="swi-btn swi-btn--primary swi-btn--compact"
                        disabled={!editEnabled}
                        title={
                          editEnabled
                            ? "Edit document form"
                            : "Completed documents cannot be edited"
                        }
                        onClick={() => onOpenForm(t.document_id, t.document_number)}
                      >
                        Edit
                      </button>
                    ) : null}
                  </div>
                </td>
                <td data-label="Status">
                  <div className="swi-assignment-table__status">
                    <span
                      className={`swi-status-badge ${statusBadgeClass(t.document_status_id)}`}
                    >
                      {t.document_status_name || "Assigned"}
                    </span>
                    {showStart ? (
                      <button
                        type="button"
                        className="swi-btn swi-btn--ghost swi-btn--compact swi-assignment-table__start-btn"
                        disabled={busy}
                        onClick={() => onStartWork(t.document_id, t.document_number)}
                      >
                        {busy ? "Updating…" : "Set to in process"}
                      </button>
                    ) : null}
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}
