"""Gera a página de comparação dos layouts (Escolha do layout).

Escreve prototipos/layouts/escolha.html (cópia do projeto) e monta a pasta de
publicação (por padrão, ../../var/escolha) com a página, as telas clicáveis e os
prints. Uso:

    python prototipos/layouts/gerar_escolha.py [pasta-de-publicacao]

Os dados de cada proposta ficam em escolha_dados.py, ao lado deste arquivo.
"""
import html
import re
import shutil
import sys
from pathlib import Path

AQUI = Path(__file__).resolve().parent
RAIZ = AQUI.parent.parent
sys.path.insert(0, str(AQUI))
import escolha_dados as D  # noqa: E402

ESC = html.escape


def nota_txt(n):
    if n is None:
        return '—'
    s = f'{n:.1f}'.replace('.', ',')
    return s[:-2] if s.endswith(',0') else s


def media(notas, rodada):
    vals = [v[rodada] for v in notas.values() if v[rodada] is not None]
    return sum(vals) / len(vals) if vals else None


MONOGRAMA = (
    '<svg class="marca" viewBox="0 0 36 48" width="30" height="40" role="img" '
    'aria-label="Dra. Suellen Ferreira"><rect class="marca-moldura" x="1" y="1" '
    'width="34" height="46" rx="17" fill="none" stroke-width="1.5"/><text x="18" y="30" '
    'text-anchor="middle" font-family="Montserrat, sans-serif" font-size="15" '
    'font-weight="500" letter-spacing="0.5"><tspan class="marca-s">S</tspan>'
    '<tspan class="marca-f">F</tspan></text></svg>'
)


def figura(src, legenda, classe):
    return (
        f'<figure class="fig {classe}"><button type="button" class="fig-botao" '
        f'data-img="{ESC(src)}" data-legenda="{ESC(legenda)}" '
        f'aria-label="Ampliar: {ESC(legenda)}"><img src="{ESC(src)}" alt="{ESC(legenda)}" '
        f'loading="lazy"></button><figcaption>{ESC(legenda)}</figcaption></figure>'
    )


def lista(itens):
    return '<ul>' + ''.join(f'<li>{i}</li>' for i in itens) + '</ul>'


def secao_candidato(c, pos):
    notas = c['notas']
    chips = []
    for chave, rotulo in D.LENTES:
        r1, r2 = notas[chave]
        if c.get('rodada') == 1 or r2 is None:
            txt = nota_txt(r1)
        elif r1 is None:
            txt = nota_txt(r2)
        else:
            txt = f'{nota_txt(r1)} → {nota_txt(r2)}'
        chips.append(f'<li><span class="chip-rotulo">{ESC(rotulo)}</span> <strong>{txt}</strong></li>')
    rodada_txt = 'Primeira rodada, sem ajuste' if c.get('rodada') == 1 else (
        'Nova, desenhada na segunda rodada' if c['slug'] == 'sintese' else 'Ajustada na segunda rodada')
    p = c['prints']
    figs = [
        figura(p['fer'], 'Fer, notebook de 1366 × 768: a primeira tela', 'fig-fer'),
        figura(p['doutora'], 'Doutora, iPhone: o que aparece ao abrir no Safari', 'fig-cel'),
        figura(p['ipad'], 'Doutora, iPad em pé', 'fig-ipad'),
        figura(p['depois'], c.get('legenda_depois', 'Fer, depois de resolver a primeira urgente'), 'fig-depois'),
    ]
    return f'''
<section class="cand" id="{ESC(c['slug'])}" aria-labelledby="t-{ESC(c['slug'])}">
  <header class="cand-topo">
    <p class="cand-pos">{pos}º</p>
    <div class="cand-titulo">
      <h2 id="t-{ESC(c['slug'])}">{ESC(c['nome'])}</h2>
      <p class="cand-ideia">{c['ideia']}</p>
      <p class="cand-rodada">{ESC(rodada_txt)}</p>
    </div>
    <ul class="chips" aria-label="Notas dos críticos">{''.join(chips)}</ul>
  </header>
  <div class="cand-grade">
    {figs[0]}{figs[1]}{figs[2]}
    {figs[3]}
    <div class="cand-texto">
      <h3>O que tem de melhor</h3>
      {lista(c['melhor'])}
      <h3>O que ainda falta</h3>
      {lista(c['falta'])}
      <p class="abrir">
        <button type="button" class="botao" data-tela="telas/{ESC(c['slug'])}-fer.html" data-largura="1440" data-titulo="{ESC(c['nome'])}: tela da Fer">Abrir a tela da Fer</button>
        <button type="button" class="botao" data-tela="telas/{ESC(c['slug'])}-doutora.html" data-largura="390" data-titulo="{ESC(c['nome'])}: tela da doutora">Abrir a tela da doutora</button>
      </p>
    </div>
  </div>
</section>'''


def tabela_notas(cands):
    linhas = []
    for c in cands:
        celulas = []
        for chave, _ in D.LENTES:
            r1, r2 = c['notas'][chave]
            if c.get('rodada') == 1:
                celulas.append(f'<td>{nota_txt(r1)}</td><td class="r2">—</td>')
            else:
                celulas.append(f'<td>{nota_txt(r1)}</td><td class="r2">{nota_txt(r2)}</td>')
        m2 = media(c['notas'], 1) if c.get('rodada') != 1 else None
        m1 = media(c['notas'], 0)
        linhas.append(
            f'<tr><th scope="row"><a href="#{ESC(c["slug"])}">{ESC(c["nome"])}</a></th>'
            + ''.join(celulas)
            + f'<td class="media">{nota_txt(m2 if m2 is not None else m1)}</td></tr>'
        )
    cab1 = ''.join(f'<th scope="colgroup" colspan="2">{ESC(r)}</th>' for _, r in D.LENTES)
    cab2 = ''.join('<th scope="col">1ª</th><th scope="col" class="r2">2ª</th>' for _ in D.LENTES)
    return f'''
<div class="tabela-rolagem">
<table class="notas">
  <caption>Notas de 0 a 10, na primeira e na segunda passada dos críticos</caption>
  <thead>
    <tr><th scope="col" rowspan="2">Proposta</th>{cab1}<th scope="col" rowspan="2">Média final</th></tr>
    <tr>{cab2}</tr>
  </thead>
  <tbody>{''.join(linhas)}</tbody>
</table>
</div>'''


def pagina():
    cands = D.CANDIDATOS
    secoes = ''.join(secao_candidato(c, i + 1) for i, c in enumerate(cands))
    a = D.ANTES
    css = (AQUI / 'escolha.css').read_text(encoding='utf-8')
    js = (AQUI / 'escolha.js').read_text(encoding='utf-8')
    return f'''<title>Escolha do layout</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap">
<style>
{css}
</style>
<a class="pular" href="#notas">Pular para as notas</a>
<header class="topo">
  <div class="topo-marca">{MONOGRAMA}<span>Clínica Dra. Suellen Ferreira</span></div>
  <h1>Escolha do layout</h1>
  <p class="lede">{D.LEDE}</p>
  <ol class="passos">{''.join(f'<li>{p}</li>' for p in D.PASSOS)}</ol>
</header>
<main>
<section class="hoje" aria-labelledby="t-hoje">
  <h2 id="t-hoje">Hoje</h2>
  <p>{D.HOJE_TEXTO}</p>
  <div class="hoje-grade">
    {figura(a['fer'], 'Hoje, Fer: notebook de 1366 × 768', 'fig-fer')}
    {figura(a['doutora'], 'Hoje, doutora: o que aparece ao abrir no Safari', 'fig-cel')}
  </div>
</section>
<section class="recomendacao" aria-labelledby="t-rec">
  <h2 id="t-rec">{D.RECOMENDACAO_TITULO}</h2>
  {D.RECOMENDACAO}
</section>
<section id="notas" class="notas-sec" aria-labelledby="t-notas">
  <h2 id="t-notas">As notas</h2>
  <p>{D.NOTAS_TEXTO}</p>
  {tabela_notas(cands)}
</section>
{secoes}
<section class="depois" aria-labelledby="t-depois">
  <h2 id="t-depois">Depois da escolha</h2>
  {D.DEPOIS}
</section>
</main>
<footer class="rodape"><p>{D.RODAPE}</p></footer>
<div class="caixa" id="caixa" hidden>
  <div class="caixa-barra">
    <p class="caixa-titulo" id="caixa-titulo"></p>
    <div class="caixa-acoes">
      <button type="button" class="botao botao-claro" id="caixa-largura" hidden>Ver na largura do iPhone</button>
      <button type="button" class="botao" id="caixa-fechar">Fechar</button>
    </div>
  </div>
  <div class="caixa-corpo" id="caixa-corpo"></div>
</div>
<div class="aviso" role="status" aria-live="polite" id="aviso"></div>
<script>
{js}
</script>
'''


VOLTAR = (
    '<a id="voltar-comparacao" href="../" onclick="if(history.length>1){history.back();return false}" '
    'style="display:none;position:fixed;z-index:99999;left:12px;bottom:12px;padding:10px 14px;'
    'border-radius:999px;background:#14284B;color:#fff;font:600 14px/1 \'Nunito Sans\','
    'system-ui,sans-serif;text-decoration:none;box-shadow:0 2px 8px rgba(20,40,75,.3)">'
    '← Voltar para a comparação</a>'
    '<script>if(window.self===window.top){document.getElementById("voltar-comparacao").style.display="inline-flex"}</script>'
)


def main():
    destino = Path(sys.argv[1]) if len(sys.argv) > 1 else RAIZ / 'var' / 'escolha'
    pag = pagina()
    (AQUI / 'escolha.html').write_text(pag, encoding='utf-8', newline='\n')
    if destino.exists():
        shutil.rmtree(destino)
    (destino / 'telas').mkdir(parents=True)
    (destino / 'prints').mkdir()
    (destino / 'escolha-layout.html').write_text(pag, encoding='utf-8', newline='\n')
    usados = set(re.findall(r'(?:src|data-img)="(prints/[^"]+)"', pag))
    for rel in sorted(usados):
        origem = RAIZ / D.ORIGEM_PRINTS[rel]
        shutil.copyfile(origem, destino / rel)
    for c in D.CANDIDATOS:
        for lado in ('fer', 'doutora'):
            nome = f"{c['slug']}-{lado}.html"
            txt = (AQUI / nome).read_text(encoding='utf-8')
            # Na cópia publicada, um botão de voltar; o arquivo do projeto fica intacto.
            txt = re.sub(r'(<body[^>]*>)', lambda m: m.group(1) + VOLTAR, txt, count=1)
            (destino / 'telas' / nome).write_text(txt, encoding='utf-8', newline='\n')
    print('página:', AQUI / 'escolha.html')
    print('publicação:', destino, '·', len(usados), 'prints')


if __name__ == '__main__':
    main()