// Board-facing delivery diagnostics. This is deliberately presentational: the
// task/review projection is the source of truth and this component never fetches
// or changes notification preferences.
function NotificationDeliveryStatus({ review, notifications }) {
  const rows = Array.isArray(notifications)
    ? notifications
    : (Array.isArray(review?.notifications) ? review.notifications : []);
  const failures = rows.filter((notification) => !notification.ok);

  // Successful (and absent) deliveries should not add noise to a task card.
  if (failures.length === 0) return null;

  return (
    <div className="mt-3 space-y-2" role="status" aria-label="Notification delivery failures">
      {failures.map((notification, index) => {
        const recipient = notification.recipient || 'Recipient unavailable';
        const channel = notification.channel || 'Channel unavailable';
        const reason = notification.error || 'Delivery reason unavailable.';
        return (
          <div key={`${recipient}-${channel}-${index}`} className="rounded-lg border border-red-200 bg-red-50 p-2.5 text-xs text-red-900">
            <div className="font-bold">Notification delivery failed</div>
            <div className="mt-1">Recipient: {recipient}</div>
            <div>Channel: {channel}</div>
            <div>Reason: {reason}</div>
          </div>
        );
      })}
    </div>
  );
}

window.NotificationDeliveryStatus = NotificationDeliveryStatus;