// Agent detail modal — opens when any agent pill is clicked (idle chip in the
// agents row, or the engaged "working"/"validating" pill perched over a card).
// Shows who the agent is, which station it belongs to, what it's doing right
// now (if engaged on a task), and what its job is (instructions from the
// station library). Read-only.

const AgentModal = ({ agent, station = null, task = null, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  if (!agent) return null;

  const { colorFor, TOKENS } = window.AgentColors || {};
  const colorName = colorFor ? colorFor(agent) : "neutral";
  const t = (TOKENS && TOKENS[colorName]) || {
    bg: "bg-neutral-100", text: "text-neutral-700", border: "border-neutral-300",
  };

  const isValidator = agent.role === "Validator";
  const kind = isValidator ? "Validator" : "Agent";
  const initial = (agent.name || agent.id || "?").charAt(0).toUpperCase();

  const statusVerb =
    task?.status === "rejected" ? "Fixing"
    : task?.status === "validating" ? "Validating"
    : "Working on";

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-8" role="dialog" aria-modal="true">
      <div className="absolute inset-0 bg-neutral-900/60 backdrop-blur-sm" onClick={onClose} />
      <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] overflow-auto">
        {/* Header */}
        <div className="flex items-start gap-4 p-6 border-b border-neutral-100">
          <div className={`w-14 h-14 rounded-full ${t.bg} ${t.text} ${t.border} border-2 flex items-center justify-center text-xl font-black ring-2 ring-white shrink-0`}>
            {initial}
          </div>
          <div className="min-w-0 flex-1">
            <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-400">{kind}</div>
            <h2 className="text-2xl font-black text-neutral-900 leading-tight">{agent.name}</h2>
            {agent.role && agent.role !== agent.name && (
              <div className="text-sm text-neutral-500 font-medium">{agent.role}</div>
            )}
          </div>
          <button
            onClick={onClose}
            className="shrink-0 w-9 h-9 rounded-full bg-neutral-100 hover:bg-neutral-200 text-neutral-600 flex items-center justify-center text-lg leading-none"
            aria-label="Close"
          >
            ✕
          </button>
        </div>

        {/* Body */}
        <div className="p-6 space-y-5">
          {station && (
            <div>
              <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-400 mb-1">Station</div>
              <div className="text-sm font-semibold text-neutral-800">{station.title}</div>
            </div>
          )}

          {task && (
            <div>
              <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-400 mb-1">Currently</div>
              <div className="text-sm text-neutral-700">
                <span className={`font-bold ${t.text}`}>{statusVerb}:</span>{" "}
                <span className="font-semibold text-neutral-800">{task.title}</span>
              </div>
            </div>
          )}

          <div>
            <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-400 mb-1">
              {isValidator ? "Validation instructions" : "Instructions"}
            </div>
            <p className="text-sm text-neutral-700 leading-relaxed whitespace-pre-wrap">
              {agent.instructions || "No description is available for this agent yet."}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

if (typeof window !== "undefined") {
  window.AgentModal = AgentModal;
}