import React from "react";
import "../styles/RAPersonalizedWidgets.css";
import AddToPersonalizedButton from "../common/AddToPersonalizedButton";

const RARecentAssessments = ({ recent, widgetId }) => {
  const getLabel = (a) => a.assessment_status_name || `Status ${a.assessment_status_id}`;

  function pillClassKey(a) {
    const label = getLabel(a).toLowerCase();
    if (label.includes("complete") || label.includes("done")) return "success";
    if (label.includes("progress") || label.includes("ongoing")) return "info";
    if (label.includes("high") || label.includes("risk")) return "danger";
    return "warning";
  }

  const pillStyles = {
    success: {
      backgroundColor: "rgba(52, 211, 153, 0.15)",
      color: "#6ee7b7",
    },
    info: {
      backgroundColor: "rgba(96, 165, 250, 0.15)",
      color: "#93c5fd",
    },
    danger: {
      backgroundColor: "rgba(248, 113, 113, 0.18)",
      color: "#fca5a5",
    },
    warning: {
      backgroundColor: "rgba(251, 191, 36, 0.15)",
      color: "#fcd34d",
    },
  };

  return (
    <div className="pd-ra-widget-panel" style={{ height: "100%", overflow: "auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "12px" }}>
        <h3>Recent assessments</h3>
        {!window.location.pathname.includes("personalized") && (
          <AddToPersonalizedButton widgetId={widgetId || "raRecentAssessments"} />
        )}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
        {recent.length === 0 && <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 13 }}>No assessments yet</div>}
        {recent.map((row) => {
          const pk = pillClassKey(row);
          return (
            <div key={row.assessment_id} className="pd-ra-recent-row">
              <div style={{ display: "flex", flexDirection: "column", gap: "4px", minWidth: 0 }}>
                <span style={{ fontWeight: 600, color: "rgba(255,255,255,0.95)" }}>{row.video_title || "—"}</span>
                <span className="pd-ra-recent-meta">
                  {(row.contract_details ?? row.contact_details) || "—"} • {row.video_capture_date || "—"}
                </span>
              </div>
              <span
                style={{
                  padding: "4px 10px",
                  borderRadius: "999px",
                  fontSize: "11px",
                  fontWeight: 600,
                  flexShrink: 0,
                  ...pillStyles[pk],
                }}
              >
                {getLabel(row)}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default RARecentAssessments;
