<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Abitai CRM Extractor</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <main class="app-shell">
      <aside class="workspace-sidebar" aria-label="Controles do CRM Extractor">
        <header class="product-header">
          <p class="eyebrow">Abitai</p>
          <h1>CRM Extractor</h1>
          <p class="product-subtitle">Conversas em perfis estruturados para o CRM.</p>
          <button id="auth-button" class="auth-button" type="button" hidden>Entrar</button>
        </header>

        <nav class="mode-switch" aria-label="Área de trabalho">
          <button id="mode-catalog-button" class="mode-button is-active" type="button">
            Base data-shared
          </button>
          <button id="mode-upload-button" class="mode-button" type="button">
            Upload CSV
          </button>
          <button id="mode-analysis-button" class="mode-button" type="button">
            Análise
          </button>
        </nav>

        <section id="catalog-controls" class="sidebar-section" aria-label="Catálogo">
          <div class="field search-field">
            <label for="conversation-search">Conversa da base</label>
            <input
              id="conversation-search"
              class="text-input"
              autocomplete="off"
              placeholder="Buscar por ID, telefone ou nome"
            />
            <div id="conversation-results" class="result-list" role="listbox"></div>
          </div>

          <p id="catalog-summary" class="catalog-summary">Carregando conversas...</p>
          <div id="selected-summary" class="selected-summary muted">
            Nenhuma conversa selecionada.
          </div>
        </section>

        <section id="upload-controls" class="sidebar-section" aria-label="Upload CSV" hidden>
          <div class="field">
            <label for="csv-upload-input">Arquivos CSV</label>
            <input
              id="csv-upload-input"
              class="file-input"
              type="file"
              accept=".csv,text/csv"
              multiple
            />
          </div>
          <div id="upload-summary" class="selected-summary muted">
            Nenhum arquivo selecionado.
          </div>
          <div id="upload-list" class="upload-list empty-state">
            Os arquivos selecionados aparecem aqui.
          </div>
        </section>

        <section id="analysis-controls" class="sidebar-section analysis-controls" hidden>
          <p class="section-kicker">Benchmark consolidado</p>
          <div class="field">
            <label for="benchmark-select">Relatório</label>
            <select id="benchmark-select" class="select-input"></select>
          </div>
          <p id="benchmark-sidebar-summary" class="analysis-sidebar-summary">
            Carregando relatórios...
          </p>
          <nav class="analysis-nav" aria-label="Seções da análise">
            <a href="#analysis-overview">Visão geral</a>
            <a href="#analysis-scenarios">Decisões por cenário</a>
            <a href="#analysis-models">Modelos</a>
            <a href="#analysis-cost-latency">Custo e latência</a>
            <a href="#analysis-quality">Qualidade e erros</a>
            <a href="#analysis-fields">Campos e casos</a>
            <a href="#analysis-methodology">Como interpretar</a>
          </nav>
        </section>

        <section id="shared-run-controls" class="run-controls" aria-label="Configuração da extração">
          <div id="selection-lock" class="selection-lock" hidden></div>

          <div class="control-grid">
            <div class="field">
              <label for="framework-select">Framework</label>
              <select id="framework-select" class="select-input"></select>
            </div>
            <div class="field">
              <label for="provider-select">Provider</label>
              <select id="provider-select" class="select-input"></select>
            </div>
            <div class="field full-width">
              <label for="model-select">Modelo</label>
              <select id="model-select" class="select-input"></select>
            </div>
          </div>

          <p id="active-setup" class="active-setup">Setup ainda não carregado.</p>

          <div class="button-row">
            <button id="estimate-button" class="btn secondary" type="button">Estimar</button>
            <button id="run-button" class="btn primary" type="button">
              <span class="button-label">Executar</span>
              <span class="button-spinner" aria-hidden="true"></span>
            </button>
          </div>

          <dl id="run-status" class="status-grid">
            <div>
              <dt>Status</dt>
              <dd id="status-text">Pronto</dd>
            </div>
            <div>
              <dt>Estimate</dt>
              <dd id="estimate-text">-</dd>
            </div>
            <div>
              <dt>Último run</dt>
              <dd id="latency-text">-</dd>
            </div>
            <div>
              <dt>Store</dt>
              <dd id="store-text">-</dd>
            </div>
          </dl>
        </section>
      </aside>

      <section id="workspace-content" class="workspace-content" aria-label="Resultado da extração">
        <section class="workspace-panel transcript-panel" aria-label="Conversa limpa">
          <header class="panel-header">
            <div>
              <p id="transcript-eyebrow" class="eyebrow">Conversa limpa</p>
              <h2 id="conversation-title">Selecione uma conversa</h2>
            </div>
            <span id="message-count-badge" class="metric-badge">0 mensagens</span>
          </header>
          <div id="transcript" class="scroll-surface empty-state">
            As mensagens aparecem aqui.
          </div>
        </section>

        <section class="workspace-panel crm-panel" aria-label="CRM extraído">
          <header class="panel-header">
            <div>
              <p id="crm-eyebrow" class="eyebrow">CRM extraído</p>
              <h2 id="crm-title">Buyer Profile</h2>
            </div>
            <label class="toggle">
              <input id="json-toggle" type="checkbox" />
              <span>JSON</span>
            </label>
          </header>
          <div id="crm-output" class="scroll-surface empty-state">
            O CRM aparece aqui.
          </div>
        </section>

        <section class="workspace-panel gold-panel" aria-label="Golden Set">
          <header class="panel-header">
            <div>
              <p class="eyebrow">Golden Set</p>
              <h2 id="gold-title">Referência</h2>
            </div>
            <span id="comparison-badge" class="metric-badge">Sem comparação</span>
          </header>
          <div id="gold-output" class="scroll-surface empty-state">
            Selecione uma conversa com gabarito.
          </div>
        </section>
      </section>

      <section id="analysis-panel" class="analysis-panel" aria-label="Análise de benchmark" hidden>
        <header id="analysis-overview" class="analysis-header analysis-anchor">
          <div class="analysis-title-row">
            <div>
              <p class="eyebrow">Golden Set · CurrentHouse</p>
              <h2>Decisão de modelo, com contexto.</h2>
              <p id="analysis-lead">
                Carregando o benchmark consolidado das execuções já concluídas.
              </p>
            </div>
            <span id="analysis-scope-badge" class="analysis-scope-badge">Carregando</span>
          </div>
          <dl id="analysis-kpis" class="analysis-kpis" aria-label="Cobertura do benchmark"></dl>
          <div id="analysis-evidence-note" class="analysis-evidence-note"></div>
        </header>

        <div id="analysis-loading" class="analysis-loading">
          Preparando comparações agregadas...
        </div>

        <section id="analysis-scenarios" class="analysis-band analysis-anchor" hidden>
          <header class="analysis-section-header">
            <div>
              <p class="section-kicker">Começo · decisão</p>
              <h3>Qual modelo serve melhor a cada cenário?</h3>
            </div>
            <p>As recomendações usam somente setups completos e elegíveis para produção.</p>
          </header>
          <div id="analysis-scenario-tabs" class="scenario-tabs" role="tablist"></div>
          <div id="analysis-scenario-detail" class="scenario-detail"></div>
        </section>

        <section id="analysis-models" class="analysis-band analysis-anchor" hidden>
          <header class="analysis-section-header">
            <div>
              <p class="section-kicker">Meio · comparação</p>
              <h3>Todos os modelos sob a mesma régua</h3>
            </div>
            <p>Filtre, ordene e abra os detalhes sem perder cobertura, setup e origem do custo.</p>
          </header>
          <div class="analysis-toolbar">
            <label>
              Provider
              <select id="analysis-provider-filter" class="select-input"></select>
            </label>
            <label>
              Ordenar por
              <select id="analysis-sort" class="select-input">
                <option value="quality">Qualidade ponderada</option>
                <option value="cost">Menor custo</option>
                <option value="latency">Menor latência P95</option>
                <option value="false_positive">Menos falsos positivos</option>
                <option value="false_negative">Menos falsos negativos</option>
              </select>
            </label>
            <label class="analysis-checkbox">
              <input id="analysis-production-only" type="checkbox" checked />
              <span>Somente candidatos homogêneos</span>
            </label>
          </div>
          <div id="analysis-model-table" class="analysis-table-wrap"></div>
          <div id="analysis-model-detail" class="model-detail" hidden></div>
        </section>

        <section id="analysis-cost-latency" class="analysis-band analysis-anchor" hidden>
          <header class="analysis-section-header">
            <div>
              <p class="section-kicker">Operação</p>
              <h3>Custo e latência sem esconder a unidade</h3>
            </div>
            <label class="projection-control">
              Projetar para
              <input id="analysis-projection-count" type="number" min="1" step="100" value="1500" />
              conversas
            </label>
          </header>
          <div id="analysis-cost-latency-content" class="metric-comparison"></div>
        </section>

        <section id="analysis-quality" class="analysis-band analysis-anchor" hidden>
          <header class="analysis-section-header">
            <div>
              <p class="section-kicker">Diagnóstico</p>
              <h3>Onde a qualidade se perde</h3>
            </div>
            <p>Status, valor e evidência são lidos separadamente para tornar o erro acionável.</p>
          </header>
          <div id="analysis-error-content" class="analysis-split"></div>
          <div class="pairwise-tool">
            <header>
              <h4>Comparação conversa a conversa</h4>
              <p>O confronto usa apenas os 40 casos compartilhados pelos dois modelos.</p>
            </header>
            <div class="pairwise-controls">
              <select id="analysis-pair-model-a" class="select-input" aria-label="Primeiro modelo"></select>
              <span aria-hidden="true">×</span>
              <select id="analysis-pair-model-b" class="select-input" aria-label="Segundo modelo"></select>
            </div>
            <div id="analysis-pairwise-result"></div>
          </div>
        </section>

        <section id="analysis-fields" class="analysis-band analysis-anchor" hidden>
          <header class="analysis-section-header">
            <div>
              <p class="section-kicker">Profundidade</p>
              <h3>Campos, grupos e casos que exigem atenção</h3>
            </div>
            <p>As descrições dos campos vêm do mesmo dicionário versionado usado no CRM.</p>
          </header>
          <div id="analysis-field-content" class="analysis-split"></div>
        </section>

        <section id="analysis-methodology" class="analysis-band analysis-anchor analysis-methodology" hidden>
          <header class="analysis-section-header">
            <div>
              <p class="section-kicker">Fim · leitura responsável</p>
              <h3>O que estes resultados provam</h3>
            </div>
            <p>Metodologia e limitações ficam junto da decisão, não em uma página separada.</p>
          </header>
          <div id="analysis-methodology-content" class="analysis-split"></div>
        </section>
      </section>

    </main>
    <div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
    <script src="/analysis.js"></script>
    <script src="/app.js"></script>
  </body>
</html>
