import type { Metadata } from "next";
import Image from "next/image";
import { notFound } from "next/navigation";
import { createClient } from "@supabase/supabase-js";
import "./boletim.css";

/**
 * A página pública do boletim: info.ktalogu.com.br/<endereco>.
 *
 * Abre sem login e sem menu do sistema. Quem chega aqui veio ler uma coisa só,
 * e a página inteira é essa coisa.
 *
 * O corpo é HTML que já passou pela faxina da rota do Owner, com lista de tags
 * permitidas. 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 Params = { params: Promise<{ slug: string }> };

type Boletim = {
  slug: string;
  title: string;
  subtitle: string | null;
  tag: string | null;
  cover_image_url: string | null;
  body_html: string;
  published_at: string | null;
  updated_at: string | null;
};

function leitor() {
  /* Chave anônima de propósito: a política do banco só deixa ver boletim
     publicado, então rascunho não vaza nem por engano de código. */
  return createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL as string,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string,
    { auth: { persistSession: false, autoRefreshToken: false } }
  );
}

async function buscar(slug: string): Promise<Boletim | null> {
  const { data } = await leitor()
    .from("system_bulletins")
    .select("slug,title,subtitle,tag,cover_image_url,body_html,published_at,updated_at")
    .eq("slug", slug)
    .eq("status", "published")
    .maybeSingle();
  return (data as Boletim | null) ?? null;
}

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { slug } = await params;
  const boletim = await buscar(slug);
  if (!boletim) return { title: "Boletim não encontrado" };
  return {
    title: `${boletim.title} · Ktalogu`,
    description: boletim.subtitle || undefined,
    openGraph: {
      title: boletim.title,
      description: boletim.subtitle || undefined,
      images: boletim.cover_image_url ? [boletim.cover_image_url] : undefined,
      type: "article",
    },
  };
}

function dataPorExtenso(valor: string | null) {
  if (!valor) return "";
  const data = new Date(valor);
  if (Number.isNaN(data.getTime())) return "";
  return data.toLocaleDateString("pt-BR", { day: "numeric", month: "long", year: "numeric" });
}

function minutosDeLeitura(html: string) {
  const palavras = html.replace(/<[^>]*>/g, " ").split(/\s+/).filter(Boolean).length;
  return Math.max(1, Math.round(palavras / 200));
}

export default async function BoletimPage({ params }: Params) {
  const { slug } = await params;
  const boletim = await buscar(slug);
  if (!boletim) notFound();

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

  return (
    <main className="bol-pagina">
      <header className="bol-topo">
        <a className="bol-marca" href="https://ktalogu.com.br">
          {/* A marca de verdade, a mesma do site. Antes era um quadrado com
              degradê e o nome escrito, que parecia rascunho de marca. */}
          <Image src="/brand-logo.svg" alt="Ktalogu" width={112} height={25} priority style={{ height: 25, width: "auto" }} />
          <span className="bol-selo">Boletim</span>
        </a>
        <a className="bol-voltar" href="https://admin.ktalogu.com.br">
          Voltar ao sistema →
        </a>
      </header>

      <section className="bol-capa">
        <span className="bol-onda bol-onda-1" aria-hidden="true" />
        <span className="bol-onda bol-onda-2" aria-hidden="true" />
        <div className="bol-capa-dentro">
          {boletim.tag ? <span className="bol-chip">{boletim.tag}</span> : null}
          <h1>{boletim.title}</h1>
          {boletim.subtitle ? <p className="bol-apoio">{boletim.subtitle}</p> : null}
          <div className="bol-meta">
            {quando ? <span>{quando}</span> : null}
            {quando ? <span aria-hidden="true">·</span> : null}
            <span>{minutosDeLeitura(boletim.body_html)} min de leitura</span>
          </div>
        </div>
      </section>

      {boletim.cover_image_url ? (
        <div className="bol-capa-foto">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={boletim.cover_image_url} alt="" />
        </div>
      ) : null}

      <article className="bol-corpo" dangerouslySetInnerHTML={{ __html: boletim.body_html }} />

      <footer className="bol-rodape">
        Boletim da Ktalogu · <a href="https://ktalogu.com.br">ktalogu.com.br</a>
      </footer>
    </main>
  );
}