/**
 * ds-metric-card.js
 * Reusable web component for displaying dashboard metrics
 * Encapsulates styling and layout for consistency across dashboards
 */

export default class MetricCard extends HTMLElement {
  static get observedAttributes() {
    return ['title', 'value', 'subtitle', 'color', 'trend'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      this.render();
    }
  }

  render() {
    const title = this.getAttribute('title') || '';
    const value = this.getAttribute('value') || '0';
    const subtitle = this.getAttribute('subtitle') || '';
    const color = this.getAttribute('color') || 'var(--vscode-textLink-foreground)';

    // Trend implementation (optional enhancement)
    const trend = this.getAttribute('trend'); // e.g., "up", "down"

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          height: 100%;
        }
        .card {
          background: var(--vscode-sidebar-background);
          border: 1px solid var(--vscode-widget-border);
          border-radius: 4px;
          padding: 16px;
          height: 100%;
          box-sizing: border-box;
          border-top: 3px solid var(--card-color, ${color});
          transition: transform 0.1s ease-in-out;
        }
        .card:hover {
          background: var(--vscode-list-hoverBackground);
        }
        .header {
          color: var(--vscode-descriptionForeground);
          font-size: 11px;
          margin-bottom: 8px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          font-weight: 600;
        }
        .value {
          font-size: 28px;
          font-weight: 600;
          margin-bottom: 4px;
          color: var(--card-color, ${color});
        }
        .subtitle {
          color: var(--vscode-descriptionForeground);
          font-size: 11px;
          line-height: 1.4;
        }
      </style>
      <div class="card" style="--card-color: ${color}">
        <div class="header">${title}</div>
        <div class="value">${value}</div>
        <div class="subtitle">${subtitle}</div>
      </div>
    `;
  }
}

customElements.define('ds-metric-card', MetricCard);