import React from "react";
import "../styles/Dashboard.css"; // Basic dashboard styles
import AddToPersonalizedButton from "../common/AddToPersonalizedButton";

const RARecentAssessments = ({ recent, widgetId }) => {
  const getLabel = (a) => a.assessment_status_name || `Status ${a.assessment_status_id}`;
  function pillClass(a) {
    const label = getLabel(a).toLowerCase();
    if (label.includes('complete') || label.includes('done')) return 'status-pill--success';
    if (label.includes('progress') || label.includes('ongoing')) return 'status-pill--info';
    if (label.includes('high') || label.includes('risk')) return 'status-pill--danger';
    return 'status-pill--warning';
  }

  return (
    <div style={{ height: "100%", overflow: "auto", padding: "16px", backgroundColor: "var(--theme-surface)", borderRadius: "8px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
        <h3 style={{ margin: 0, fontSize: "16px", fontWeight: "600", color: "var(--theme-text-primary)" }}>Recent Assessments</h3>
        {!window.location.pathname.includes("personalized") && (
          <AddToPersonalizedButton widgetId={widgetId || "raRecentAssessments"} />
        )}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
        {recent.length === 0 && (
          <div style={{ color: 'var(--theme-text-secondary)' }}>No assessments yet</div>
        )}
        {recent.map((row) => (
          <div key={row.assessment_id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px", border: "1px solid var(--theme-border)", borderRadius: "6px" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
              <span style={{ fontWeight: "500", color: "var(--theme-text-primary)" }}>{row.video_title || '—'}</span>
              <span style={{ fontSize: "12px", color: "var(--theme-text-secondary)" }}>{(row.contract_details ?? row.contact_details) || '—'} • {row.video_capture_date || '—'}</span>
            </div>
            <div>
              <span style={{
                padding: "4px 8px", 
                borderRadius: "12px", 
                fontSize: "12px", 
                fontWeight: "500",
                backgroundColor: pillClass(row).includes('success') ? "var(--theme-green-bg, #e8f5e9)" : 
                                 pillClass(row).includes('info') ? "var(--theme-blue-bg, #e3f2fd)" :
                                 pillClass(row).includes('danger') ? "var(--theme-red-bg, #ffebee)" : "var(--theme-orange-bg, #fff3e0)",
                color: pillClass(row).includes('success') ? "var(--theme-green, #2e7d32)" : 
                       pillClass(row).includes('info') ? "var(--theme-blue, #1565c0)" :
                       pillClass(row).includes('danger') ? "var(--theme-red, #c62828)" : "var(--theme-orange, #ef6c00)"
              }}>
                {getLabel(row)}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RARecentAssessments;
