// wh-section-shared.jsx - shared visual helpers for dashboard sections

(() => {

const { Icon, Badge } = window;

function NoticeCard({
  title = 'Aviso',
  text,
  icon = 'alert-circle',
  tone = 'warn',
  className = '',
  style = {},
}) {
  const toneMap = {
    warn: {
      background: 'var(--warn-soft)',
      borderColor: 'oklch(82% 0.12 76)',
      iconColor: 'var(--warn)',
    },
    danger: {
      background: 'var(--danger-soft)',
      borderColor: 'oklch(74% 0.18 22)',
      iconColor: 'var(--danger)',
    },
    info: {
      background: 'var(--brand-soft)',
      borderColor: 'var(--border)',
      iconColor: 'var(--brand)',
    },
  };

  const cfg = toneMap[tone] || toneMap.warn;

  return (
    <div
      className={`card card-pad notice-card ${className}`.trim()}
      style={{ background: cfg.background, borderColor: cfg.borderColor, ...style }}
    >
      <div className="flex-r" style={{ gap: 9, marginBottom: 7 }}>
        <Icon name={icon} size={15} style={{ color: cfg.iconColor, flexShrink: 0 }} />
        <div className="notice-title">{title}</div>
      </div>
      <p className="notice-text">{text}</p>
    </div>
  );
}

function DisconnectedBanner({
  text = 'WhatsApp desconectado \u2014 conectalo desde la secci\u00f3n Conexi\u00f3n.',
}) {
  return (
    <div className="altas-disconnected-banner">
      <Icon name="wifi-off" size={14} style={{ flexShrink: 0 }} />
      {text}
    </div>
  );
}

function JobStatusBadge({ statusMap, status }) {
  const fallback = statusMap.failed || Object.values(statusMap)[0] || { color: 'gray', label: status };
  const cfg = statusMap[status] || fallback;
  return <Badge color={cfg.color}>{cfg.label}</Badge>;
}

function FormField({ label, className = '', style = {}, children }) {
  return (
    <div className={`field ${className}`.trim()} style={style}>
      {label && <label className="field-lbl">{label}</label>}
      {children}
    </div>
  );
}

function InlineFeedback({ tone = 'danger', icon = '', className = '', style = {}, children }) {
  if (!children) return null;

  const colors = {
    ok: 'var(--ok)',
    danger: 'var(--danger)',
    muted: 'var(--muted)',
  };

  return (
    <div
      className={className}
      style={{ fontSize: 12.5, color: colors[tone] || tone, ...style }}
    >
      {icon ? `${icon} ` : ''}
      {children}
    </div>
  );
}

function FormFeedbackGroup({ message, error }) {
  return (
    <>
      <InlineFeedback tone="ok" icon="OK">{message}</InlineFeedback>
      <InlineFeedback tone="danger">{error}</InlineFeedback>
    </>
  );
}

function SummaryRow({ label, children }) {
  return (
    <div className="flex-r">
      <span className="t-muted t-sm">{label}</span>
      {children}
    </div>
  );
}

Object.assign(window, {
  NoticeCard,
  DisconnectedBanner,
  JobStatusBadge,
  FormField,
  InlineFeedback,
  FormFeedbackGroup,
  SummaryRow,
});

})();