roco

  on('ui.render', { component: 'Pane', requestId: MENU }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const animo = await read($, animoMenu)
    const tarjetas = await cargarGaleria($)
    const actual = { personaje: o.personaje, tema: o.temaId, acento: o.acento, campos: o.campos, estilo: o.estilo, animo }
    return panelMenu(ui, ov, actual, tarjetas, {
      animo: a => void update($, animoMenu, () => a),
      // El panel sigue abierto tras la recarga y se redibuja con lo nuevo.
      guardar: cambios =>
        void (async () => {
          if (!(await guardarEnOrden($, cambios))) $.ui.toast(tx.comando.noGuardado)
        })(),
      // Con el panel abierto (un diálogo) el cuadro no acepta texto: primero se cierra.
      crear: () =>
        void (async () => {
          await $.store.set('menuVisto', true).catch(() => undefined)
          await $.ui.close({ id: MENU }).catch(() => undefined)
          const r = await $.prompt.fill({ text: '/roco:crear ' }).catch(() => ({ isFilled: false }))
          $.ui.toast(r.isFilled ? tx.menu.escribeIdea : tx.menu.escribeComando)
        })(),
      cerrar: () =>
        void (async () => {
          await $.store.set('menuVisto', true).catch(() => undefined)
          await $.ui.close({ id: MENU }).catch(() => undefined)
        })(),
    })
  })

export function panelMenu(ui: PiezasMenu, o: Opciones, a: Actual, tarjetas: readonly Tarjeta[], hacer: AccionesMenu) {
  const { Box, Text, Button } = ui
  const { tx, tema } = o
  const m = tx.menu

  const seccion = (key: string, titulo: string, hijos: unknown[]) => (
    <Box key={key} flexDirection="column">
      <Text bold>{titulo}</Text>
      <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
        {hijos}
      </Box>
    </Box>
  )

  const animos = ANIMOS.map((an, i) => (
    <Button key={`animo-${an}`} label={tx.animo[an]} hotkey={String(i + 1)} {...marca(an === a.animo)} onPress={() => hacer.animo(an)} />
  ))

  const galeria = tarjetas.map(t => (
    <Box key={`tarjeta-${t.id}`} flexDirection="column" alignItems="center" width={18}>
      {figura(ui, t, a.animo, `${t.nombre} · ${tx.animo[a.animo]}`)}
      <Text bold wrap="truncate-end">
        {t.nombre}
      </Text>
      {t.id === a.personaje ? (
        <Text color={tema.acento}>✓ {m.actual}</Text>
      ) : (
        <Button key={`elegir-${t.id}`} label={m.elegir} onPress={() => hacer.guardar([['roco.personaje', t.id]])} />
      )}
    </Box>
  ))

  // Un tema trae su color: si había un color propio, se quita después de guardar el tema.
  const temas = TEMAS_VALIDOS.map(t => (
    <Button
      key={`tema-${t}`}
      label={t}
      {...marca(t === a.tema)}
      onPress={() => hacer.guardar(a.acento ? [['roco.tema', t], ['roco.acento', '']] : [['roco.tema', t]])}
    />
  ))

  const colores = [
    ...COLORES.map(c => (
      <Box key={`color-${c.id}`} flexDirection="row">
        <Text color={c.hex}>● </Text>
        <Button key={`boton-${c.id}`} label={m.colores[c.id] ?? c.id} {...marca(c.hex === a.acento)} onPress={() => hacer.guardar([['roco.acento', c.hex]])} />
      </Box>
    )),
    <Button key="color-tema" label={m.colorTema} {...marca(!a.acento)} onPress={() => hacer.guardar([['roco.acento', '']])} />,
  ]

  const campos = CAMPOS_MENU.map(c => {
    const prendido = a.campos.includes(c)
    const nuevos = alternarCampo(a.campos, c).join(',')
    return (
      <Button
        key={`campo-${c}`}
        label={`${prendido ? '✓' : '·'} ${m.campos[c] ?? c}`}
        {...(prendido ? {} : { dimColor: true })}
        onPress={() => {
          if (nuevos !== a.campos.join(',')) hacer.guardar([['roco.campos', nuevos]])
        }}
      />
    )
  })

  const estilos = ESTILOS.map(s => (
    <Button key={`estilo-${s}`} label={m.estilos[s]} {...marca(s === a.estilo)} onPress={() => hacer.guardar([['roco.estilo', s]])} />
  ))

  return (
    <Box flexDirection="column" gap={1}>
      <Text dimColor wrap="truncate-end">
        {m.pista}
      </Text>
      {seccion('animos', m.animo, animos)}
      {seccion('galeria', m.mascotas, galeria)}
      {seccion('temas', m.tema, temas)}
      {seccion('colores', m.color, colores)}
      {seccion('campos', m.info, campos)}
      {seccion('estilos', m.tamano, estilos)}
      <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
        <Button key="crear" label={m.crear} variant="primary" onPress={hacer.crear} />
        <Button key="cerrar" label={m.cerrar} role="dismiss" onPress={hacer.cerrar} />
      </Box>
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, oculto))) {
      return next(e)
    }

    const l: Lectura = {
      ahora: await read($, estado),
      hechas: await read($, acciones),
      medido: await read($, uso),
      c: await read($, cuenta),
      g: await read($, git),
      ahoraMs: await read($, minuto),
    }
    const estilo = estiloEfectivo(o.estilo, (e.props as unknown as Record<string, unknown>).bodyColumns)

    if (e.surface === 'terminal') {
      // `cuadro` cambia cada 600 ms: solo se lee (y suscribe) donde se dibuja el ASCII; el personaje propio va fijo.
      const n = estilo === 'minimo' || dibujo ? 0 : await read($, cuadro)
      return franjaTerminal($.ui.resolve(e), ov, l, estilo, n, dibujo)
    }
    return franjaGrafica($.ui.resolve(e), ov, l, estilo, dibujo)
  })

export function franjaGrafica(ui: PiezasSvg, o: Opciones, l: Lectura, estilo: Estilo, d: Dibujo | null = null) {
  const { Box, Text, Svg } = ui
  const { tx, tema, camposDer } = o
  const nombreDisplay = o.nombre
  const { ahora, medido, c, ahoraMs } = l
  const aviso = avisoDe(medido, c, o.avisos, tx)
  const lineas = columnaIzquierda(ui, o, l)
  // Roco o el personaje propio, al alto pedido. El nombre va solo en `alt`, nunca dentro del SVG.
  const dibujar = (alto: number) => {
    const m = medidaSvg(d ? d.caja : null, alto)
    return (
      <Svg
        source={d ? d.svg[ahora.animo] : svg(ahora.animo)}
        alt={`${nombreDisplay} · ${tx.animo[ahora.animo]}: ${ahora.detalle}`}
        width={m.width}
        height={m.height}
      />
    )
  }

  if (estilo === 'minimo') {
    return (
      <Box flexDirection="row" alignItems="center" gap={1}>
        {dibujar(37)}
        <Text bold>
          <Text color={tema.acento}>{nombreDisplay} ·</Text> {tx.animo[ahora.animo]}
        </Text>
        <Text dimColor wrap="truncate-end">
          {' — '}
          {ahora.detalle}
        </Text>
      </Box>
    )
  }

  if (estilo === 'compacto') {
    const detalleCompacto = `${ahora.detalle} · 5 h ${pct(medido.cinco)} · ${tx.uso.semana} ${pct(medido.semana)}${aviso ? ` · ⚠ ${aviso}` : ''}`
    return (
      <Box flexDirection="row" alignItems="center" gap={1} width="100%">
        {dibujar(44)}
        <Box flexDirection="row" flexGrow={1} flexShrink={1} minWidth={0}>
          <Text bold>
            <Text color={tema.acento}>{nombreDisplay} ·</Text> {tx.animo[ahora.animo]}
          </Text>
          <Text dimColor wrap="truncate-end">
            {' — '}
            {detalleCompacto}
          </Text>
        </Box>
      </Box>
    )
  }

  const elementosDerecha = camposDer
    .map(campo => {
      switch (campo) {
        case 'sesion':
          return (
            <Text key="sesion" dimColor wrap="truncate-end">
              {tx.derecha.sesion(medido.inicio !== undefined && ahoraMs > 0 ? duracion(ahoraMs - medido.inicio, tx) : '–')}
            </Text>
          )
        case 'reinicio':
          return (
            <Text key="reinicio" dimColor wrap="truncate-end">
              {tx.derecha.cuotaCinco(medido.reinicioCinco !== undefined && ahoraMs > 0 ? duracion(medido.reinicioCinco - ahoraMs, tx) : '–')}
            </Text>
          )
        case 'contadores':
          return (
            <Text key="contadores" dimColor wrap="truncate-end">
              💬 {c.turnos} {tx.derecha.turnos} · ✏️ {c.ediciones} · ▶ {c.comandos} · ⚠ {c.errores}
            </Text>
          )
        default:
          return null
      }
    })
    .filter(Boolean)

  // Ancho fijo (peor caso de duraciones y contadores): si cambiara cada minuto, empujaría el texto de la izquierda.
  const anchoDer =
    Math.max(
      tx.derecha.sesion('23 h 59 m').length,
      tx.derecha.cuotaCinco('23 h 59 m').length,
      `💬 999 ${tx.derecha.turnos} · ✏️ 999 · ▶ 999 · ⚠ 999`.length,
    ) + 2
  const derecha =
    elementosDerecha.length > 0 ? (
      <Box flexDirection="column" alignItems="flex-start" justifyContent="center" flexShrink={0} width={anchoDer}>
        {elementosDerecha}
      </Box>
    ) : null

  return (
    <Box
      flexDirection="row"
      alignItems="center"
      gap={1}
      width="100%"
      borderStyle="round"
      borderColor={tema.acento}
    >
      {/* Como imagen (sin isInteractive): fondo transparente; el marco interactivo pinta blanco en modo oscuro. */}
      {dibujar(72)}
      <Box flexGrow={1} flexShrink={1} minWidth={0}>
        {lineas}
      </Box>
      {derecha}
    </Box>
  )
}

function columnaIzquierda(ui: Piezas, o: Opciones, l: Lectura) {
  const { Box, Text } = ui
  const { tx, tema, camposIzq } = o
  const nombreDisplay = o.nombre
  const { ahora, hechas, medido, c, g } = l
  const aviso = avisoDe(medido, c, o.avisos, tx)

  const elementosIzquierda = camposIzq
    .map(campo => {
      switch (campo) {
        case 'estado':
          return (
            <Box key="estado" flexDirection="row" minWidth={0}>
              <Text bold>
                <Text color={tema.acento}>{nombreDisplay} ·</Text> {tx.animo[ahora.animo]}
              </Text>
              <Text dimColor wrap="truncate-end">
                {' — '}
                {ahora.detalle}
              </Text>
            </Box>
          )
        case 'acciones':
          return (
            <Text key="acciones" dimColor wrap="truncate-end">
              {hechas.length > 0 ? hechas.join(' · ') : tx.acciones.sinAcciones}
            </Text>
          )
        case 'uso':
          return aviso ? (
            <Text key="uso" color={tema.aviso} wrap="truncate-end">
              {lineaUso(medido, tx)} · ⚠ {aviso}
            </Text>
          ) : (
            <Text key="uso" dimColor wrap="truncate-end">
              {lineaUso(medido, tx)}
            </Text>
          )
        case 'git': {
          const lg = lineaGit(g, tx)
          return lg ? (
            <Text key="git" dimColor wrap="truncate-end">
              {lg}
            </Text>
          ) : null
        }
        default:
          return null
      }
    })
    .filter(Boolean)

  const lineas = (
    <Box flexDirection="column" justifyContent="center" minWidth={0}>
      {elementosIzquierda}
    </Box>
  )

  return lineas
}