import React, { useMemo } from "react";
import AddToPersonalizedButton from "./personalized/AddToPersonalizedButton.jsx";
import { statusBadgeClass } from "../../constants/swiDocumentStatus.js";
import { formatAssignmentDateTime } from "../../utils/assignmentDisplay.js";
import { getUndoneAssignments } from "../../utils/userSwiDashboard.js";

/**
 * @param {{
 *   assignments?: object[],
 *   limit?: number,
 *   onOpenForm?: (documentId: number, documentNumber: number) => void,
 *   onViewAll?: () => void,
 * }} props
 */
export default function RecentUndoneSwisList({
  assignments = [],
  limit = 5,
  onOpenForm,
  onViewAll,
}) {
  const undone = useMemo(
    () => getUndoneAssignments(assignments).slice(0, limit),
    [assignments, limit]
  );

  return (
    <section className="swi-user-undone swi-panel" aria-label="Recent undone SWIs">
      <header className="swi-user-remaining__head">
        <div>
          <h2 className="swi-user-section-title">Recent SWIs</h2>
          <p className="swi-user-section-desc">
            Latest {limit} SWIs that still need your action.
          </p>
        </div>
        <div className="swi-user-remaining__head-actions">
          <AddToPersonalizedButton
            widgetId="swiRecentUndone"
            label="Add"
            className="swi-add-to-pd--compact"
          />
          {onViewAll ? (
            <button type="button" className="swi-btn swi-btn--ghost" onClick={onViewAll}>
              View all
            </button>
          ) : null}
        </div>
      </header>

      {!undone.length ? (
        <p className="swi-muted">You are all caught up. No undone SWIs.</p>
      ) : (
        <ol className="swi-user-undone__list">
          {undone.map((doc) => {
            const key = `${doc.document_id}-${doc.document_number}`;
            return (
              <li key={key} className="swi-user-undone__item">
                <div className="swi-user-undone__body">
                  <p className="swi-user-undone__title">
                    {doc.document_name || "Untitled"}
                  </p>
                  <p className="swi-user-undone__meta">
                    Assigned {formatAssignmentDateTime(doc.assigned_at)}
                    {doc.process_name ? ` · ${doc.process_name}` : ""}
                  </p>
                </div>
                <span
                  className={`swi-status-badge ${statusBadgeClass(doc.document_status_id)}`}
                >
                  {doc.document_status_name || "Pending"}
                </span>
                {onOpenForm ? (
                  <button
                    type="button"
                    className="swi-btn swi-btn--primary swi-btn--compact"
                    onClick={() =>
                      onOpenForm(doc.document_id, doc.document_number)
                    }
                  >
                    Open
                  </button>
                ) : null}
              </li>
            );
          })}
        </ol>
      )}
    </section>
  );
}
