/* ================================================================
   Khronus — Design System
   ----------------------------------------------------------------
   Mostra o documento em design-system.md. NÃO tem cópia do conteúdo
   aqui dentro, de propósito: esta tela busca o mesmo arquivo que o
   Blindagem busca, então os dois não têm como divergir. Se tivesse
   cópia, um dia alguém atualizaria um lado só.

   O leitor de markdown é curto e feito à mão porque o app não tem
   empacotador e não vale puxar biblioteca de CDN só pra isto. Ele cobre
   o que o documento usa: título, tabela, lista, negrito, código,
   citação e linha. Se um dia o documento usar algo além disso, o texto
   aparece cru em vez de sumir — falhar mostrando é melhor que falhar
   escondendo.

   Arquivo inteiro dentro de IIFE: sem empacotador, dois arquivos que
   declarem o mesmo nome no topo derrubam o app todo.
   ================================================================ */
(function () {
  const { useState, useEffect } = React;
  const { LucideIcon, TopBar } = window;

  const ENDERECO = '/design-system.md';

  /* ── Leitor de markdown ──────────────────────────────────────── */

  function escapar(t) {
    return t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }

  // Negrito, código e link dentro de uma linha. Ordem importa: o código
  // é resolvido primeiro pra que ** dentro de `crase` não vire negrito.
  function inline(t) {
    return escapar(t)
      .replace(/`([^`]+)`/g,
        '<code style="background:var(--app-surface-2);border:1px solid var(--app-border);'
        + 'border-radius:6px;padding:1px 5px;font-family:ui-monospace,monospace;'
        + 'font-size:.92em">$1</code>')
      .replace(/\*\*([^*]+)\*\*/g, '<strong style="color:var(--text-1)">$1</strong>')
      .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>');
  }

  function linhaDeTabela(l) {
    return l.trim().startsWith('|') && l.trim().endsWith('|');
  }

  function celulas(l) {
    return l.trim().slice(1, -1).split('|').map(c => c.trim());
  }

  function paraHtml(md) {
    const linhas = md.split('\n');
    const saida = [];
    let i = 0;
    let emLista = false;

    const fechaLista = () => { if (emLista) { saida.push('</ul>'); emLista = false; } };

    while (i < linhas.length) {
      const l = linhas[i];

      // Tabela: cabeçalho + separador + corpo
      if (linhaDeTabela(l) && linhaDeTabela(linhas[i + 1] || '')
          && /^[\s|:-]+$/.test(linhas[i + 1])) {
        fechaLista();
        const cab = celulas(l);
        i += 2;
        const corpo = [];
        while (i < linhas.length && linhaDeTabela(linhas[i])) {
          corpo.push(celulas(linhas[i]));
          i++;
        }
        saida.push(
          '<div style="overflow-x:auto;margin:16px 0">'
          + '<table style="width:100%;border-collapse:collapse;font-size:var(--fs-md)">'
          + '<thead><tr>'
          + cab.map(c => '<th style="text-align:left;padding:8px 10px;font-weight:500;'
              + 'color:var(--text-2);border-bottom:1px solid var(--app-border);'
              + 'white-space:nowrap">' + inline(c) + '</th>').join('')
          + '</tr></thead><tbody>'
          + corpo.map(linha => '<tr>' + linha.map(
              c => '<td style="padding:8px 10px;border-bottom:1px solid var(--app-border);'
                + 'color:var(--text-2);vertical-align:top">' + inline(c) + '</td>').join('')
            + '</tr>').join('')
          + '</tbody></table></div>');
        continue;
      }

      // Título
      const t = l.match(/^(#{1,4})\s+(.*)$/);
      if (t) {
        fechaLista();
        const nivel = t[1].length;
        const estilos = {
          1: 'font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px',
          2: 'font-size:20px;font-weight:600;margin:32px 0 12px;padding-top:20px;'
             + 'border-top:1px solid var(--app-border)',
          3: 'font-size:var(--fs-xl);font-weight:600;margin:24px 0 8px',
          4: 'font-size:var(--fs-lg);font-weight:600;margin:16px 0 6px',
        };
        saida.push(`<h${nivel} style="color:var(--text-1);${estilos[nivel]}">`
          + inline(t[2]) + `</h${nivel}>`);
        i++;
        continue;
      }

      if (/^---+$/.test(l.trim())) { fechaLista(); i++; continue; }

      // Item de lista
      const item = l.match(/^[-*]\s+(.*)$/);
      if (item) {
        if (!emLista) {
          saida.push('<ul style="margin:8px 0;padding-left:20px;color:var(--text-2)">');
          emLista = true;
        }
        saida.push('<li style="margin:4px 0;line-height:1.6">' + inline(item[1]) + '</li>');
        i++;
        continue;
      }

      if (!l.trim()) { fechaLista(); i++; continue; }

      /* Parágrafo é o BLOCO de linhas seguidas, não cada linha.
         Processar linha a linha quebrava negrito que abre numa linha e
         fecha na outra — e o documento tem vários, porque é escrito com
         margem de 72 colunas. É assim que markdown de verdade trata
         parágrafo, então isto também conserta o caso geral. */
      fechaLista();
      const bloco = [];
      while (i < linhas.length && linhas[i].trim()
             && !/^(#{1,4}\s|[-*]\s|---+$)/.test(linhas[i])
             && !linhaDeTabela(linhas[i])) {
        bloco.push(linhas[i].trim());
        i++;
      }
      saida.push('<p style="margin:10px 0;line-height:1.65;color:var(--text-2)">'
        + inline(bloco.join(' ')) + '</p>');
    }
    fechaLista();
    return saida.join('\n');
  }

  /* ── Tela ────────────────────────────────────────────────────── */
  function DesignScreen() {
    const [html, setHtml] = useState('');
    const [erro, setErro] = useState('');

    useEffect(() => {
      let vivo = true;
      fetch(ENDERECO + '?t=' + Date.now())
        .then(r => { if (!r.ok) throw new Error('não encontrei o documento'); return r.text(); })
        .then(md => { if (vivo) setHtml(paraHtml(md)); })
        .catch(e => { if (vivo) setErro(String(e.message || e)); });
      return () => { vivo = false; };
    }, []);

    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <TopBar title="Design" />
        <div style={{ flex: 1, overflowY: 'auto', padding: '32px 40px' }}>
          <div style={{ maxWidth: 900, margin: '0 auto', fontFamily: 'Roboto,sans-serif' }}>
            {erro ? (
              <div style={{ fontSize: 'var(--fs-md)', color: 'var(--clr-neg)' }}>
                Não consegui abrir o documento: {erro}
              </div>
            ) : !html ? (
              <div style={{ fontSize: 'var(--fs-md)', color: 'var(--text-3)' }}>Carregando…</div>
            ) : (
              <>
                <div dangerouslySetInnerHTML={{ __html: html }} />
                <div style={{ marginTop: 40, paddingTop: 16,
                  borderTop: '1px solid var(--app-border)', display: 'flex',
                  alignItems: 'center', gap: 8, fontSize: 'var(--fs-xs)',
                  color: 'var(--text-3)' }}>
                  <LucideIcon icon="file-text" size={12} />
                  Este texto vem de <code>frontend/design-system.md</code>, o mesmo arquivo
                  que a aba Design do Blindagem lê. Editar lá muda os dois.
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    );
  }

  window.DesignScreen = DesignScreen;
})();