import type { Metadata } from "next";
import RodapeDoHelp from "../../rodape";
import Voltar from "../../voltar";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import Resolveu from "./resolveu-client";
import {
  ROTULO_DO_NIVEL,
  dataPorExtenso,
  leitor,
  minutosDeLeitura,
  prepararTexto,
} from "@/lib/help";

/**
 * A página do artigo: help.ktalogu.com.br/<seção>/<artigo>.
 *
 * Três colunas. À esquerda os outros artigos da seção, no meio a folha de
 * leitura, à direita o "nesta página".
 *
 * O corpo é HTML que já passou pela faxina da rota do Owner. Nada é
 * higienizado aqui de novo: se algo escapasse, o lugar de consertar seria lá,
 * na única porta por onde HTML entra.
 */

export const revalidate = 60;

type Props = { params: Promise<{ secao: string; artigo: string }> };

async function buscar(secaoSlug: string, artigoSlug: string) {
  const db = leitor();
  const { data: secao } = await db
    .from("help_sections")
    .select("id,slug,title,color,icon")
    .eq("slug", secaoSlug)
    .eq("active", true)
    .maybeSingle();
  if (!secao) return null;

  const { data: artigo } = await db
    .from("help_articles")
    .select("id,slug,title,subtitle,body_html,level,published_at,updated_at,position")
    .eq("section_id", secao.id)
    .eq("slug", artigoSlug)
    .eq("status", "published")
    .maybeSingle();
  if (!artigo) return null;

  const { data: vizinhos } = await db
    .from("help_articles")
    .select("id,slug,title,position")
    .eq("section_id", secao.id)
    .eq("status", "published")
    .order("position", { ascending: true });

  return { secao, artigo, vizinhos: vizinhos ?? [] };
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { secao, artigo } = await params;
  const achado = await buscar(secao, artigo);
  if (!achado) return { title: "Artigo não encontrado" };
  return {
    title: `${achado.artigo.title} · ${achado.secao.title} · Ktalogu`,
    description: achado.artigo.subtitle || undefined,
    openGraph: { title: achado.artigo.title, description: achado.artigo.subtitle || undefined, type: "article" },
  };
}

export default async function PaginaDoArtigo({ params }: Props) {
  const { secao: secaoSlug, artigo: artigoSlug } = await params;
  const achado = await buscar(secaoSlug, artigoSlug);
  if (!achado) notFound();

  const { secao, artigo, vizinhos } = achado;
  const { html, titulos } = prepararTexto(artigo.body_html || "");

  const posicao = vizinhos.findIndex((v) => v.id === artigo.id);
  const anterior = posicao > 0 ? vizinhos[posicao - 1] : null;
  const proximo = posicao >= 0 && posicao < vizinhos.length - 1 ? vizinhos[posicao + 1] : null;

  const quando = dataPorExtenso(artigo.updated_at || artigo.published_at);

  return (
    <main className="hl">
      <div className="hl-barra hl-grao">
        <div className="hl-topo">
          <Link className="hl-marca" href="/aprender">
            <Image src="/brand-logo.svg" alt="Ktalogu" width={112} height={20} priority style={{ height: 20, width: "auto" }} />
            <span className="hl-selo">Aprender</span>
          </Link>
          <div className="hl-topo-fim">
            <a className="hl-btn hl-btn-marca" href="https://admin.ktalogu.com.br" style={{ height: 38, padding: "0 15px", fontSize: 13.5 }}>
              Abrir o sistema
            </a>
          </div>
        </div>
      </div>

      <div className="hl-corpo">
        <aside className="hl-trilho">
          <div className="hl-trilho-grupo">
            <span className="hl-chapa">{secao.title}</span>
            {vizinhos.map((v) => (
              <Link key={v.id} href={`/aprender/${secao.slug}/${v.slug}`} data-ativo={v.id === artigo.id ? "1" : "0"}>
                <i className="hl-pino" />
                {v.title}
              </Link>
            ))}
          </div>
        </aside>

        <article className="hl-leitura">
          <nav className="hl-migalha">
            <Voltar destino={`/aprender/${secao.slug}`} rotulo={secao.title} />
            <Link href="/aprender">Módulos</Link>
            <span>/</span>
            <Link href={`/aprender/${secao.slug}`}>{secao.title}</Link>
            <span>/</span>
            <span style={{ color: "var(--tinta)" }}>{artigo.title}</span>
          </nav>

          <h1>{artigo.title}</h1>
          {artigo.subtitle ? <p className="hl-leitura-apoio">{artigo.subtitle}</p> : null}

          <div className="hl-ficha">
            {quando ? (
              <div>
                <span className="hl-chapa">Atualizado</span>
                <b>{quando}</b>
              </div>
            ) : null}
            <div>
              <span className="hl-chapa">Leitura</span>
              <b>{minutosDeLeitura(artigo.body_html || "")} min</b>
            </div>
            <div>
              <span className="hl-chapa">Nível</span>
              <b>{ROTULO_DO_NIVEL[artigo.level] ?? "Começando"}</b>
            </div>
          </div>

          <div className="hl-texto" dangerouslySetInnerHTML={{ __html: html }} />

          <Resolveu artigoId={artigo.id} />

          {anterior || proximo ? (
            <div className="hl-pular">
              {anterior ? (
                <Link href={`/aprender/${secao.slug}/${anterior.slug}`}>
                  <span className="hl-chapa">← Anterior</span>
                  <b>{anterior.title}</b>
                </Link>
              ) : (
                <span />
              )}
              {proximo ? (
                <Link className="hl-fim" href={`/aprender/${secao.slug}/${proximo.slug}`}>
                  <span className="hl-chapa">Próximo →</span>
                  <b>{proximo.title}</b>
                </Link>
              ) : null}
            </div>
          ) : null}
        </article>

        <aside className="hl-nesta">
          {titulos.length > 0 ? (
            <>
              <span className="hl-chapa">Nesta página</span>
              <ul>
                {titulos.map((t) => (
                  <li key={t.id} className={t.nivel === 3 ? "hl-sub" : ""}>
                    <a href={`#${t.id}`}>{t.texto}</a>
                  </li>
                ))}
              </ul>
            </>
          ) : null}
        </aside>
      </div>

      <RodapeDoHelp />
    </main>
  );
}