import { LitElement, html, css, svg } from '/vendor/lit/lit.min.js';

/**
 * <connection-status> - Server connectivity indicator.
 *
 * Properties:
 *   level: 'ok' | 'warn' | 'err'
 */
export class ConnectionStatus extends LitElement {
  static properties = {
    level: { type: String, reflect: true },
  };

  static styles = css`
    :host { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
    .indicator { display: inline-flex; align-items: center; gap: 4px; }
    :host([level="ok"]) .indicator { color: var(--status-ok, #3fb950); }
    :host([level="warn"]) .indicator { color: var(--status-warn, #d29922); }
    :host([level="err"]) .indicator { color: var(--status-err, #f85149); }
  `;

  constructor() {
    super();
    this.level = 'ok';
  }

  render() {
    const content = {
      ok: html`
        <span class="indicator">
          <svg viewBox="0 0 16 16" width="10" height="10" fill="currentColor"><circle cx="8" cy="8" r="4"/></svg>
        </span>
      `,
      warn: html`
        <span class="indicator">
          <svg viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><circle cx="8" cy="8" r="5"/></svg>
          slow
        </span>
      `,
      err: html`
        <span class="indicator">
          <svg viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
          offline
        </span>
      `,
    };
    return content[this.level] || content.ok;
  }
}

customElements.define('connection-status', ConnectionStatus);