import { undoneAssignments } from "./swiPersonalDashboardHelpers.js";
import "./swi-pd-embed.css";

function formatWhen(value) {
  if (!value) return "—";
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return "—";
  return d.toLocaleString(undefined, {
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

export default function SwiRecentUndoneWidget({ assignments = [] }) {
  const rows = undoneAssignments(assignments, 5);

  if (!rows.length) {
    return <p className="swi-pd-empty">All caught up — no undone SWIs.</p>;
  }

  return (
    <ul className="swi-pd-widget swi-pd-undone">
      {rows.map((row) => (
        <li key={`${row.document_id}-${row.document_number}`}>
          <div>
            <strong>{row.document_name || "Untitled"}</strong>
            <span>Assigned {formatWhen(row.assigned_at)}</span>
          </div>
          <em>{row.document_status_name || "Pending"}</em>
        </li>
      ))}
    </ul>
  );
}
