import { useMemo } from "react";
import "./ra-admin-activity.css";

function displayPersonName(name, id) {
  const n = name && String(name).trim();
  if (n) return n;
  if (id != null && id !== "") return String(id);
  return "—";
}

function isAssignedAssessment(a) {
  return Boolean(a.executor_id || a.verifier_id);
}

function getAdminActivityStatusLabel(row) {
  const id = Number(row.assessment_status_id);
  switch (id) {
    case 1:
      return "Not Started";
    case 2:
      return "Complete";
    case 3:
      return "InProgress";
    case 4:
      return "Returned";
    case 5:
      return "Verification Required";
    default: {
      const raw = row.assessment_status_name || `Status ${row.assessment_status_id}`;
      return String(raw).replace(/\bVarification\b/gi, "Verification");
    }
  }
}

function adminActivityStatusPillClass(row) {
  const id = Number(row.assessment_status_id);
  switch (id) {
    case 1:
      return "ra-act-pill ra-act-pill--warn";
    case 2:
      return "ra-act-pill ra-act-pill--ok";
    case 3:
      return "ra-act-pill ra-act-pill--info";
    case 4:
      return "ra-act-pill ra-act-pill--ret";
    case 5:
      return "ra-act-pill ra-act-pill--ver";
    default:
      return "ra-act-pill ra-act-pill--muted";
  }
}

function formatActivityDate(row) {
  const raw = row.created_at || row.video_capture_date;
  if (!raw) return "—";
  const d = new Date(raw);
  if (Number.isNaN(d.getTime())) return String(raw);
  return d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
}

export default function RAAdminActivityList({ assessments }) {
  const rows = useMemo(() => {
    return (Array.isArray(assessments) ? assessments : [])
      .filter(isAssignedAssessment)
      .sort((a, b) => Number(b.assessment_id) - Number(a.assessment_id));
  }, [assessments]);

  return (
    <div className="ra-admin-activity">
      <h3 className="ra-admin-activity-title">Activity list</h3>
      <p className="ra-admin-activity-sub">
        Assessments with executor or verifier set, newest first
      </p>
      <div className="ra-admin-activity-table-wrap">
        <table className="ra-admin-activity-table">
          <thead>
            <tr>
              <th>Video title</th>
              <th>Executor</th>
              <th>Verifier</th>
              <th>Current status</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr>
                <td colSpan={5} className="ra-admin-activity-empty">
                  No assigned assessments in scope.
                </td>
              </tr>
            )}
            {rows.map((row) => (
              <tr key={row.assessment_id}>
                <td>{row.video_title || "—"}</td>
                <td>{displayPersonName(row.executor_name, row.executor_id)}</td>
                <td>{displayPersonName(row.verifier_name, row.verifier_id)}</td>
                <td>
                  <span className={adminActivityStatusPillClass(row)}>
                    {getAdminActivityStatusLabel(row)}
                  </span>
                </td>
                <td>{formatActivityDate(row)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
