import { css } from 'lit';

export const labStyles = css`
  :host { display:block; min-width:0; max-width:100%; container-type:inline-size; color:var(--wu-docs-text,#d8d1c4); font:13px/1.6 var(--wu-docs-font,Inter,Arial,sans-serif); color-scheme:dark; }
  * { box-sizing:border-box; }
  .workbench { min-width:0; background:var(--wu-docs-panel,#0c0e0e); }
  .content { padding:22px; }
  .heading { margin-bottom:22px; }
  h2 { font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-.025em; margin:0 0 8px; text-wrap:balance; }
  h3,.section-label { margin:0; font:11px/1.7 var(--wu-docs-mono,'IBM Plex Mono',Consolas,monospace); font-weight:400; }
  p { margin:0; overflow-wrap:anywhere; }
  .heading p { font-size:12px; line-height:1.8; max-width:48ch; }
  .muted { color:#9b9d98; }
  .fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 12px; margin:0 0 10px; }
  label { display:grid; min-width:0; gap:7px; font-size:11px; color:#9b9d98; }
  input,select,button { font:inherit; min-width:0; max-width:100%; }
  input,select { background:#070909; color:#d8d1c4; border:1px solid #303632; border-radius:2px; min-height:43px; padding:9px 10px; width:100%; font-size:12px; }
  select { text-overflow:ellipsis; }
  input[aria-invalid=true] { border-color:#ff7160; }
  button { min-height:42px; padding:10px 13px; border:1px solid #303632; border-radius:2px; background:transparent; color:#d8d1c4; cursor:pointer; font-size:11px; line-height:1.5; transition:background .15s,border-color .15s; }
  button:hover { background:#161b18; border-color:#687169; }
  button.primary { background:#ff3b26; border-color:#ff3b26; color:#070909; font-weight:650; }
  button.primary:hover { background:#ff7160; border-color:#ff7160; }
  button.quiet { color:#9b9d98; border-color:transparent; }
  button.quiet:hover { color:#d8d1c4; border-color:#303632; }
  button.small { min-height:36px; padding:8px 10px; font-size:10px; }
  button:disabled { opacity:.5; cursor:not-allowed; }
  button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,.log:focus-visible { outline:2px solid #ff7160; outline-offset:3px; }
  .actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .check { display:flex; align-items:center; gap:10px; margin-top:14px; min-height:32px; cursor:pointer; }
  .check input { accent-color:#ff7160; width:18px; height:18px; min-height:18px; margin:0; flex-shrink:0; }
  .check code { display:block; font-size:10px; }
  .command-result { border-top:1px solid #292e2b; margin-top:20px; padding-top:18px; }
  .terminal { display:flex; align-items:baseline; gap:10px; min-width:0; background:#070909; border:1px solid #292e2b; border-inline-start:2px solid #ff7160; padding:13px 14px; margin:10px 0 14px; }
  code { font:11px/1.85 var(--wu-docs-mono,'IBM Plex Mono',Consolas,monospace); overflow-wrap:anywhere; white-space:pre-wrap; }
  .terminal code { color:#d8d1c4; min-width:0; }
  .prompt { color:#ff7160; flex-shrink:0; font:12px var(--wu-docs-mono,Consolas,monospace); user-select:none; }
  .status { font-size:11px; line-height:1.7; color:#b7d900; }
  .status:not(:empty) { margin-top:12px; }
  .error { color:#ff7160; font-size:11px; margin-top:8px; }
  .note { color:#9b9d98; font-size:11px; line-height:1.8; }
  .next-step { margin-top:14px; }
  .shared-state { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:18px 22px; border-top:1px solid #292e2b; }
  .shared-value { display:flex; align-items:center; gap:16px; min-width:0; }
  .section-label { color:#9b9d98; }
  .shared-value strong { color:#d8d1c4; font:28px/1.2 var(--wu-docs-mono,Consolas,monospace); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
  .connection { display:inline-flex; align-items:center; gap:7px; color:#9b9d98; font:10px var(--wu-docs-mono,Consolas,monospace); }
  .connection>span { width:5px; height:5px; background:#9b9d98; border-radius:50%; }
  .connection[data-connected=true]>span { background:#b7d900; }
  .counter-section { border-block:1px solid #292e2b; padding:17px 0 20px; }
  .counter { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-top:16px; }
  .counter output { display:block; min-width:0; max-width:100%; font:48px/1.1 var(--wu-docs-mono,Consolas,monospace); letter-spacing:-.045em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .counter-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .counter-actions button { min-width:42px; }
  .counter-actions button[aria-label] { font-size:20px; line-height:1; padding:10px; }
  .events-section { margin-top:18px; }
  .count { color:#9b9d98; margin-inline-start:6px; }
  .log { margin:10px 0 0; padding:0 3px; list-style:none; max-height:222px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#414943 transparent; }
  .log li { display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; padding:11px 0; border-top:1px solid #232926; }
  .log time { font:10px/1.85 var(--wu-docs-mono,Consolas,monospace); color:#9b9d98; }
  .log code { font-size:10px; color:#ff7160; }
  .log small { display:block; color:#9b9d98; font-size:11px; line-height:1.75; overflow-wrap:anywhere; }
  .log .empty { grid-template-columns:20px minmax(0,1fr); color:#d8d1c4; padding-block:16px; font-size:12px; }
  .log .empty>span { color:#ff7160; font-size:18px; }
  .log .empty small { margin-top:3px; }
  .subscription-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:12px; border-top:1px solid #292e2b; }
  .subscription-row .note { font-size:10px; }
  .last-command { margin-top:20px; }
  .last-command .note { margin-top:8px; }
  .last-command .terminal { margin-bottom:0; }
  .diagnostics { margin-top:20px; border-top:1px solid #292e2b; }
  .diagnostics summary { color:#9b9d98; padding-top:14px; cursor:pointer; font:10px/1.8 var(--wu-docs-mono,Consolas,monospace); }
  .diagnostics summary:hover { color:#d8d1c4; }
  .stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding-top:14px; }
  .stat { min-width:0; }
  .stat strong { display:block; font:19px/1.6 var(--wu-docs-mono,Consolas,monospace); overflow-wrap:anywhere; }
  .stat span { display:block; color:#9b9d98; font-size:10px; line-height:1.7; }
  @container(max-width:390px) {
    .fields { grid-template-columns:1fr; }
    .content { padding:18px; }
    .shared-state { padding-inline:18px; }
    .shared-value { gap:12px; }
    .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .log li { grid-template-columns:minmax(0,1fr); gap:2px; }
    .log .empty { grid-template-columns:20px minmax(0,1fr); gap:8px; }
  }
  @container(max-width:290px) {
    .content { padding:15px; }
    .shared-state { padding-inline:15px; }
    h2 { font-size:18px; }
    .actions { align-items:stretch; }
    .actions button { flex:1 1 100%; }
    .counter-actions { width:100%; }
  }
  @media(prefers-reduced-motion:reduce) { button{transition:none} }
  @media(forced-colors:active) { button,input,select,.workbench,.terminal{border:1px solid CanvasText}.connection>span{background:CanvasText} }
`;

export function defineVersionedElement(tagName, elementClass) {
  const current = customElements.get(tagName);
  if (current && current.componentVersion !== elementClass.componentVersion) {
    throw new Error(`${tagName}: versión incompatible de @wu-docs/lab-ui`);
  }
  if (!current) customElements.define(tagName, elementClass);
}