import { tr } from '../../../src/lib/ui-i18n.ts';
import { LitElement, html } from 'lit';
import { labStyles, defineVersionedElement } from './styles.js';

export class RuntimeWorkbench extends LitElement {
  static componentVersion = '1.0.0';
  static properties = { model: { attribute:false } };
  static styles = labStyles;
  constructor() { super(); this.model=null; }
  intent(action) { this.dispatchEvent(new CustomEvent('wu-runtime-intent',{detail:{action},bubbles:true,composed:true})); }
  render() {
    const m=this.model;
    if(!m) return html`<p role="status">${tr("Preparando runtime…")}</p>`;
    return html`<section class="workbench" part="panel" aria-labelledby="runtime-title">
      <div class="content">
        <header class="heading">
          <h2 id="runtime-title">${tr("Inspeccionar la composición")}</h2>
          <p class="muted">${tr("Observa cómo los cambios y comandos llegan desde la otra app.")}</p>
        </header>
        <section class="counter-section" aria-labelledby="counter-title">
          <div class="section-heading"><h3 id="counter-title">${tr("Contador compartido")}</h3><span class="connection" data-connected=${m.connected}><span aria-hidden="true"></span>${m.connected?tr("En directo"):tr("En pausa")}</span></div>
          <div class="counter"><output aria-label=${tr("Contador compartido")} aria-live="polite">${m.counter}</output><div class="counter-actions"><button aria-label=${tr("Restar uno desde Vue")} @click=${()=>this.intent('decrement')}>−</button><button class="primary" aria-label=${tr("Sumar uno desde Vue")} @click=${()=>this.intent('increment')}>+</button><button class="quiet" @click=${()=>this.intent('reset')}>${tr("Reiniciar")}</button></div></div>
        </section>
        <section class="events-section" aria-labelledby="events-title">
          <div class="section-heading"><h3 id="events-title">${tr("Últimos eventos")} <span class="count">${m.events.length}</span></h3><button class="quiet small" @click=${()=>this.intent('clear')}>${tr("Limpiar eventos")}</button></div>
          <ol class="log" aria-label=${tr("Eventos recibidos en el bus WU")} tabindex="0">${m.events.length?m.events.map(e=>html`<li><time datetime=${e.iso}>${e.time}</time><div><code>${e.name}</code><small>${e.description}</small></div></li>`):html`<li class="empty"><span aria-hidden="true">↗</span><div>${tr("Aún no hay eventos.")}<small>${tr("Publica un comando o cambia el contador para verlo aquí.")}</small></div></li>`}</ol>
          <div class="subscription-row"><button class="small" @click=${()=>this.intent('toggle')}>${m.connected?tr("Pausar suscripciones"):tr("Reconectar suscripciones")}</button><span class="note">${m.connected?tr("{0} suscripciones activas", [m.listeners]):tr("Al reconectar se lee el estado actual.")}</span></div>
        </section>
        <p class="status" role="status">${m.status}</p>
        <section class="last-command" aria-labelledby="last-command-title"><h3 id="last-command-title">${tr("Último comando compartido")}</h3>${m.lastCommand?html`<div class="terminal"><span class="prompt" aria-hidden="true">$</span><code>${m.lastCommand}</code></div>`:html`<p class="note">${tr("Usa «Publicar en el bus» en el constructor para recibirlo.")}</p>`}</section>
        <details class="diagnostics"><summary>${tr("Lifecycle y suscripciones")}</summary><div class="stats"><div class="stat"><strong>${m.mounts}</strong><span>${tr("montajes Vue")}</span></div><div class="stat"><strong>${m.unmounts}</strong><span>${tr("desmontajes completos")}</span></div><div class="stat"><strong>${m.listeners}</strong><span>${tr("suscripciones activas")}</span></div><div class="stat"><strong>${m.cleanups}</strong><span>${tr("suscripciones liberadas")}</span></div></div></details>
      </div>
    </section>`;
  }
}
defineVersionedElement('wu-docs-runtime-workbench',RuntimeWorkbench);