import {
  DeesElement,
  customElement,
  html,
  property,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';
import type { TSgProtocol } from '../interfaces.js';

declare global {
  interface HTMLElementTagNameMap {
    'sg-protocol-badge': SgProtocolBadge;
  }
}

const protocolColors: Record<string, string> = {
  npm: '#cb3837',
  oci: '#2496ed',
  maven: '#c71a36',
  cargo: '#dea584',
  composer: '#885630',
  pypi: '#3775a9',
  rubygems: '#e9573f',
};

@customElement('sg-protocol-badge')
export class SgProtocolBadge extends DeesElement {
  public static demo = () => html`
    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
      <sg-protocol-badge .protocol=${'npm'}></sg-protocol-badge>
      <sg-protocol-badge .protocol=${'oci'}></sg-protocol-badge>
      <sg-protocol-badge .protocol=${'maven'}></sg-protocol-badge>
      <sg-protocol-badge .protocol=${'cargo'}></sg-protocol-badge>
      <sg-protocol-badge .protocol=${'pypi'}></sg-protocol-badge>
      <sg-protocol-badge .protocol=${'composer'}></sg-protocol-badge>
      <sg-protocol-badge .protocol=${'rubygems'}></sg-protocol-badge>
    </div>
  `;
  public static demoGroups = ['Shared'];

  @property({ type: String })
  accessor protocol: TSgProtocol = 'npm';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: inline-block;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
        font-family: 'JetBrains Mono', monospace;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #fff;
      }
    `,
  ];

  public render(): TemplateResult {
    const color = protocolColors[this.protocol] || '#666';
    return html`
      <span class="badge" style="background: ${color}">
        ${this.protocol}
      </span>
    `;
  }
}