function WorkforceEmptyState({ state }) {
  const kind = state?.kind || "no-selection";
  const showOperationalVisual = kind !== "loading";
  const titleByKind = {
    loading: "Loading Inbox",
    "request-error": "Inbox Unavailable",
    "no-conversations": "No Conversations Yet",
    "no-selection": "Operational Flow Ready",
    "selected-deleted": "Conversation Not Found",
  };
  const descByKind = {
    loading: "Fetching the latest conversations and transcript metadata.",
    "request-error": state?.message || "Failed to load conversations. Try refreshing.",
    "no-conversations": "When customers message your agents, active threads will appear here.",
    "no-selection": "Select a conversation from the list to monitor agent performance and step in when needed.",
    "selected-deleted": "The thread you selected was removed. Choose another conversation to continue.",
  };

  return (
    <div className="wf-empty" role="status" aria-live="polite">
      {showOperationalVisual ? (
        <div className="wf-empty-visual" aria-hidden="true">
          <div className="wf-empty-glow" />
          <div className="wf-empty-card wf-empty-card-outer">
            <div className="wf-empty-card wf-empty-card-inner">
              <div className="wf-empty-row wf-empty-row-top">
                <span className="wf-dot wf-dot-green" />
                <span className="wf-line wf-line-short" />
              </div>
              <div className="wf-empty-lines">
                <span className="wf-line wf-line-full" />
                <span className="wf-line wf-line-mid" />
                <span className="wf-line wf-line-half" />
              </div>
              <div className="wf-empty-row wf-empty-row-bottom">
                <span className="wf-chat-chip">💬</span>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="wf-empty-icon" aria-hidden="true">◌</div>
      )}
      <h3>{titleByKind[kind] || "Inbox"}</h3>
      <p>{descByKind[kind] || ""}</p>
      {showOperationalVisual ? (
        <div className="wf-empty-actions" aria-hidden="true">
          <div className="wf-empty-action-card wf-empty-action-monitor">
            <div className="wf-empty-action-title">Monitor Agents</div>
            <div className="wf-empty-action-sub">Real-time status of all active fleet nodes.</div>
          </div>
          <div className="wf-empty-action-card wf-empty-action-logs">
            <div className="wf-empty-action-title">Live Logs</div>
            <div className="wf-empty-action-sub">Direct stream of decision-making logic.</div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

window.WorkforceEmptyState = WorkforceEmptyState;