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

export type TIdpBadgeVariant = 'default' | 'accent' | 'ok' | 'warn' | 'error' | 'outline';

declare global {
  interface HTMLElementTagNameMap {
    'idp-badge': IdpBadge;
  }
}

@customElement('idp-badge')
export class IdpBadge extends DeesElement {
  public static demo = () => html`
    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
      <idp-badge>Default</idp-badge>
      <idp-badge variant="accent">Admin</idp-badge>
      <idp-badge variant="ok">Trusted</idp-badge>
      <idp-badge variant="warn">New network</idp-badge>
      <idp-badge variant="error">Denied</idp-badge>
    </div>
  `;
  public static demoGroups = ['idp.global v3 primitives'];

  @property({ type: String })
  public accessor variant: TIdpBadgeVariant = 'default';

  public static styles = [
    ...idpElementStyles,
    css`
      :host {
        display: inline-flex;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-family: var(--idp-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 16px;
      }
      .default {
        background: var(--idp-muted);
        color: var(--idp-muted-fg);
      }
      .accent {
        background: var(--idp-accent-soft);
        color: var(--idp-accent);
      }
      .ok {
        background: var(--idp-ok-bg);
        color: var(--idp-ok);
        border-color: var(--idp-ok-border);
      }
      .warn {
        background: var(--idp-warn-bg);
        color: var(--idp-warn);
        border-color: var(--idp-warn-border);
      }
      .error {
        background: var(--idp-error-bg);
        color: var(--idp-error);
        border-color: var(--idp-error-border);
      }
      .accent {
        border-color: var(--idp-info-border);
      }
      .outline {
        background: transparent;
        color: var(--idp-fg);
        border-color: var(--idp-border);
      }
    `,
  ];

  public render(): TemplateResult {
    return html`<span class="badge ${this.variant}"><slot></slot></span>`;
  }
}