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' };

const CSS = `
  :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; }
  .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);         }
  .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); }
`;

class UiBadge extends HTMLElement {
  static get observedAttributes() { return ['type', 'value']; }

  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `<style>${CSS}</style><span class="badge"></span>`;
    }
    this.#update();
  }

  attributeChangedCallback() {
    if (this.shadowRoot) this.#update();
  }

  #update() {
    const type  = this.getAttribute('type')  || 'status';
    const value = this.getAttribute('value') || '';
    const label = type === 'priority'
      ? (PRIORITY_LABELS[value] || value)
      : (STATUS_LABELS[value]   || value.replace('_', ' '));
    const span = this.shadowRoot.querySelector('.badge');
    span.className = `badge ${type === 'priority' ? 'p' : 's'}-${value}`;
    span.innerHTML = `<span class="dot" style="background:currentColor"></span>${label}`;
  }
}

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