import React from "react";
import { formatStatusLabel, statusBadgeClass } from "../utils/statusBadge.js";

/**
 * @param {{
 *   documents: Array<Record<string, unknown>>,
 *   onSelect: (doc: Record<string, unknown>) => void,
 *   selectedId: number | null
 * }} props
 */
const SWIDocumentTable = ({ documents, onSelect, selectedId }) => {
  if (!documents.length) {
    return (
      <p className="swi-muted">
        No documents are registered yet. Use <strong>New SWI / SOP</strong> or{" "}
        <strong>Load sample data</strong> in the header to get started.
      </p>
    );
  }

  return (
    <div className="swi-table-wrap">
      <table className="swi-table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Type</th>
            <th>Contract / activity</th>
            <th>Version</th>
            <th>Status</th>
            <th>Next review</th>
            <th>Approvals</th>
          </tr>
        </thead>
        <tbody>
          {documents.map((d) => (
            <tr
              key={d.id}
              onClick={() => onSelect(d)}
              className={selectedId === d.id ? "swi-table-row--selected" : ""}
            >
              <td>{d.title}</td>
              <td>
                <span className="swi-type-pill">{d.doc_type}</span>
              </td>
              <td>
                <div>{d.contract_ref || "—"}</div>
                <div className="swi-muted">{d.activity_code || ""}</div>
              </td>
              <td>{d.version_label}</td>
              <td>
                <span className={statusBadgeClass(d.status)}>
                  {formatStatusLabel(d.status)}
                </span>
              </td>
              <td>{d.next_review_at || "—"}</td>
              <td>{d.pending_approvals != null ? d.pending_approvals : "—"}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default SWIDocumentTable;
