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

export class CommandWorkbench extends LitElement {
  static componentVersion = '1.0.0';
  static properties = { model: { attribute: false } };
  static styles = labStyles;
  constructor() { super(); this.model = null; }
  intent(action, value) { this.dispatchEvent(new CustomEvent('wu-command-intent', { detail: { action, value }, bubbles:true, composed:true })); }
  render() {
    const m = this.model;
    if (!m) return html`<p role="status">${tr("Preparando constructor…")}</p>`;
    return html`
      <section class="workbench" part="panel" aria-labelledby="command-title">
        <div class="content">
          <header class="heading">
            <h2 id="command-title">${tr("Construir un comando")}</h2>
            <p class="muted">${tr("Configura una receta del CLI y compártela con el inspector.")}</p>
          </header>
          <div class="fields">
            <label>${tr("Operación")}<select .value=${m.operation} @change=${e => this.intent('operation',e.target.value)}><option value="create" ?selected=${m.operation==='create'}>${tr("wu create · nuevo proyecto")}</option><option value="add" ?selected=${m.operation==='add'}>${tr("wu add · nueva microapp")}</option></select></label>
            <label>${m.operation==='create'?tr("Nombre del proyecto"):tr("Nombre de la microapp")}<input .value=${m.name} maxlength="48" autocomplete="off" spellcheck="false" aria-describedby="name-hint" aria-invalid=${m.error?'true':'false'} @input=${e=>this.intent('name',e.target.value)}></label>
            <label>${tr("Framework de la microapp")}<select .value=${m.framework} @change=${e=>this.intent('framework',e.target.value)}>${m.frameworks.map(f=>html`<option value=${f.value} ?selected=${m.framework===f.value}>${f.label}</option>`)}</select></label>
            ${m.operation==='create'?html`<label>${tr("Shell del proyecto")}<select .value=${m.shell} @change=${e=>this.intent('shell',e.target.value)}>${m.shells.map(f=>html`<option value=${f.value} ?selected=${m.shell===f.value}>${f.label}</option>`)}</select></label>`:nothing}
          </div>
          <p id="name-hint" class=${m.error?'error':'note'}>${m.error||tr("Minúsculas, números y guiones. Empieza por una letra.")}</p>
          ${m.operation==='add'?html`<label class="check"><input type="checkbox" .checked=${m.noInstall} @change=${e=>this.intent('noInstall',e.target.checked)}><span>${tr("Instalar dependencias después")} <code>--no-install</code></span></label>`:nothing}
          <section class="command-result" aria-labelledby="result-title">
            <h3 id="result-title">${tr("Comando generado")}</h3>
            <div class="terminal" part="terminal"><span class="prompt" aria-hidden="true">$</span><code aria-label=${tr("Comando generado")}>${m.command||tr("Completa un nombre válido para generar el comando.")}</code></div>
            <div class="actions"><button class="primary" ?disabled=${!!m.error} @click=${()=>this.intent('copy')}>${tr("Copiar comando")} <span aria-hidden="true">↗</span></button><button ?disabled=${!!m.error} @click=${()=>this.intent('publish')}>${tr("Publicar en el bus")}</button></div>
          </section>
          <p class="status" role="status">${m.status}</p>
          <p class="note next-step">${m.operation==='create'?html`${tr("Continúa en tu terminal:")} <code>cd ${m.name||'<nombre>'}</code>, <code>wu install</code> ${tr("y")} <code>wu dev</code>.`:html`${tr("Ejecuta")} <code>wu add</code> ${tr("desde la raíz que contiene")} <code>wu.config.json</code>.`}</p>
        </div>
        <footer class="shared-state">
          <div class="shared-value"><span class="section-label">${tr("Estado compartido")}</span><strong aria-live="polite" aria-label=${tr("Contador compartido desde React")}>${m.counter}</strong></div>
          <button @click=${()=>this.intent('increment')}>${tr("+1 desde React")}</button>
        </footer>
      </section>`;
  }
}
defineVersionedElement('wu-docs-command-workbench', CommandWorkbench);