const STATUS_LABELS = {
  draft: 'Draft', assigned: 'Assigned', scheduled: 'Scheduled',
  in_progress: 'In Progress', pending_review: 'Pending Review', closed: 'Closed',
};
const PRIORITY_LABELS = { low: 'Low', normal: 'Normal', high: 'High', urgent: 'Urgent' };

class UiBadge extends HTMLElement {
  connectedCallback() { this.#render(); }
  static get observedAttributes() { return ['type', 'value']; }
  attributeChangedCallback() { this.#render(); }

  #render() {
    const type  = this.getAttribute('type')  || 'status';
    const value = this.getAttribute('value') || '';
    const label = type === 'priority'
      ? (PRIORITY_LABELS[value] || value)
      : (STATUS_LABELS[value]   || value.replace('_', ' '));

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: inline-flex; }
        .badge {
          display: inline-flex; align-items: center; gap: .35rem;
          padding: .2rem .6rem; border-radius: 999px;
          font-size: .7rem; font-weight: 700; text-transform: uppercase;
          letter-spacing: .04em; white-space: nowrap;
        }
        .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

        /* Status variants */
        .s-draft          { background:var(--status-draft-bg);          color:var(--status-draft);          }
        .s-assigned       { background:var(--status-assigned-bg);       color:var(--status-assigned);       }
        .s-scheduled      { background:var(--status-scheduled-bg);      color:var(--status-scheduled);      }
        .s-in_progress    { background:var(--status-in_progress-bg);    color:var(--status-in_progress);    }
        .s-pending_review { background:var(--status-pending_review-bg); color:var(--status-pending_review); }
        .s-closed         { background:var(--status-closed-bg);         color:var(--status-closed);         }

        /* Priority variants */
        .p-low    { background:#F1F5F9; color:var(--priority-low);    }
        .p-normal { background:#E0F2FE; color:var(--priority-normal); }
        .p-high   { background:#FFF7ED; color:var(--priority-high);   }
        .p-urgent { background:#FEF2F2; color:var(--priority-urgent); }
      </style>
      <span class="badge ${type === 'priority' ? 'p' : 's'}-${value}">
        <span class="dot" style="background:currentColor"></span>
        ${label}
      </span>`;
  }
}

customElements.define('ui-badge', UiBadge);