import { headers } from 'next/headers';

import { enderecoBase, listarLinks, paraJson } from '@/lib/links';
import { LOGO_DADO_SVG } from '@/lib/paginas';

import pacote from '../package.json';
import Encurtador from './Encurtador';

// A página lê os links e as variáveis a cada visita (nada de HTML congelado no build).
export const dynamic = 'force-dynamic';

// Variável de ambiente de exemplo: na Dado, ela se configura no painel do app.
const MENSAGEM = process.env.MENSAGEM_BOAS_VINDAS || 'Defina a variável MENSAGEM_BOAS_VINDAS para trocar este texto.';
// Hora em que o processo do servidor subiu (= a publicação mais recente).
const INICIO = new Date(Date.now() - process.uptime() * 1000);
const fusoBrasilia = { timeZone: 'America/Sao_Paulo' } as const;
const INICIO_FORMATADO = `${INICIO.toLocaleDateString('pt-BR', fusoBrasilia)} às ${INICIO.toLocaleTimeString('pt-BR', {
  ...fusoBrasilia,
  hour: '2-digit',
  minute: '2-digit',
})} (horário de Brasília)`;

export default async function Pagina() {
  const base = enderecoBase(await headers());
  const linksIniciais = listarLinks().map((link) => paraJson(link, base));

  return (
    <main className="pagina">
      <header className="topo">
        <span className="marca" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
            <path d="M10 14l4-4M8.5 11.5l-1.8 1.8a3.2 3.2 0 004.5 4.5l1.8-1.8M15.5 12.5l1.8-1.8a3.2 3.2 0 00-4.5-4.5l-1.8 1.8" />
          </svg>
        </span>
        <h1>Encurtador de links</h1>
      </header>
      <p className="lead">Cole um link comprido e receba um endereço curto, pronto para compartilhar.</p>

      <Encurtador linksIniciais={linksIniciais} />

      <p className="aviso">
        Os links ficam na memória do app e somem quando ele é publicado de novo. Para guardar os links de vez,{' '}
        <a href="https://app.dado.cloud/deploys" target="_blank" rel="noopener">
          ligue um Postgres
        </a>
        .
      </p>

      <section className="sobre cartao" aria-labelledby="sobre-titulo">
        <h2 id="sobre-titulo">Sobre este deploy</h2>
        <dl>
          <dt>Runtime</dt>
          <dd>{`Next.js ${pacote.dependencies.next} · Node.js ${process.versions.node}`}</dd>
          <dt>Região</dt>
          <dd>Rodando em São Paulo</dd>
          <dt>No ar desde</dt>
          <dd>
            <time dateTime={INICIO.toISOString()}>{INICIO_FORMATADO}</time>
          </dd>
          <dt>Mensagem</dt>
          <dd>{MENSAGEM}</dd>
        </dl>
        <p className="dica">
          A mensagem vem da variável <code>MENSAGEM_BOAS_VINDAS</code>. Troque o valor nas configurações do app, no
          painel, e publique de novo.
        </p>
      </section>

      <footer className="rodape">
        <span>Publicado na</span>
        <a
          href="https://dado.cloud"
          target="_blank"
          rel="noopener"
          aria-label="Dado"
          dangerouslySetInnerHTML={{ __html: LOGO_DADO_SVG }}
        />
      </footer>
    </main>
  );
}