/* EquipmentCard.jsx — tarjeta de detalle de equipo
   Equivalente del "MessageBubble" de un kit de chat: la unidad atómica
   que recibe la mayor parte del esfuerzo visual en el workspace. */

function EquipmentCard({ unit }) {
  if (!unit) return null;
  const statusLabel = {
    operational: 'Operativo',
    maintenance: 'En mantenimiento',
    fault:       'Falla crítica',
    offline:     'Apagado',
  }[unit.status];
  const statusVar = {
    operational: { fg: 'var(--success)', bg: 'var(--success-bg)' },
    maintenance: { fg: 'var(--warning)', bg: 'var(--warning-bg)' },
    fault:       { fg: 'var(--danger)',  bg: 'var(--danger-bg)' },
    offline:     { fg: 'var(--fg-muted)', bg: 'var(--surface-sunken)' },
  }[unit.status];

  return (
    <article className="ax-card ax-equipment">
      <header className="ax-card__head">
        <div>
          <span className="eyebrow">{unit.kind}</span>
          <h2 className="ax-card__title">{unit.name}</h2>
          <div className="ax-card__sub">
            <span>{unit.client}</span>
            <span aria-hidden>·</span>
            <span>{unit.location}</span>
          </div>
        </div>
        <span
          className="ax-chip"
          style={{ color: statusVar.fg, background: statusVar.bg }}
        >● {statusLabel}</span>
      </header>

      <dl className="ax-metrics">
        <div>
          <dt>Lectura</dt>
          <dd className="mono">{unit.metrics.reading}</dd>
        </div>
        <div>
          <dt>Setpoint</dt>
          <dd className="mono">{unit.metrics.setpoint}</dd>
        </div>
        <div>
          <dt>Capacidad</dt>
          <dd className="mono">{unit.metrics.capacity}</dd>
        </div>
        <div>
          <dt>Refrigerante</dt>
          <dd className="mono">{unit.metrics.refrigerant}</dd>
        </div>
      </dl>

      <section className="ax-card__history">
        <span className="eyebrow">Últimos eventos</span>
        <ul>
          {unit.events.map((e, i) => (
            <li key={i}>
              <span className="mono ax-event__time">{e.time}</span>
              <span className="ax-event__msg">{e.msg}</span>
            </li>
          ))}
        </ul>
      </section>
    </article>
  );
}

window.EquipmentCard = EquipmentCard;