import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import BuscaDoHelp from "./busca-client";
import CapaViva from "./capa-viva";
import RodapeDoHelp, { SISTEMA, zap } from "./rodape";
import { DESENHOS, leitor } from "@/lib/help";

/**
 * A porta do centro de aprendizado: help.ktalogu.com.br.
 *
 * Abre sem login e sem menu do sistema. Quem chega aqui veio aprender uma
 * coisa, então a busca é o maior elemento da página e os módulos vêm logo
 * abaixo, com os mesmos nomes do menu do sistema.
 */

export const revalidate = 60;



export const metadata: Metadata = {
  title: "Centro de aprendizado · Ktalogu",
  description:
    "O manual da Ktalogu: todo o sistema explicado passo a passo, com as telas de verdade, em vídeo e por escrito.",
};

function Desenho({ nome, tamanho = 21 }: { nome: string; tamanho?: number }) {
  return (
    <svg width={tamanho} height={tamanho} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d={DESENHOS[nome] ?? DESENHOS.livro} stroke="#fff" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}

export default async function CentroDeAprendizado() {
  const db = leitor();
  const [{ data: secoes }, { data: artigos }, { data: trilhas }, { data: passos }] = await Promise.all([
    db.from("help_sections").select("id,slug,title,description,icon,color,position").eq("active", true).order("position"),
    db.from("help_articles").select("id,section_id,title,slug,updated_at").eq("status", "published"),
    db.from("help_paths").select("id,slug,title,description,position").eq("active", true).order("position"),
    db.from("help_path_steps").select("path_id,article_id"),
  ]);

  const porSecao = new Map<string, number>();
  for (const a of artigos ?? []) porSecao.set(a.section_id, (porSecao.get(a.section_id) ?? 0) + 1);

  const passosPorTrilha = new Map<string, number>();
  for (const p of passos ?? []) passosPorTrilha.set(p.path_id, (passosPorTrilha.get(p.path_id) ?? 0) + 1);

  const total = (artigos ?? []).length;
  const maisRecente = (artigos ?? [])
    .map((a) => a.updated_at)
    .filter(Boolean)
    .sort()
    .pop();

  const atualizado = maisRecente
    ? new Date(maisRecente).toDateString() === new Date().toDateString()
      ? "Hoje"
      : new Date(maisRecente).toLocaleDateString("pt-BR", { day: "2-digit", month: "short" })
    : "—";

  /* Os termos sugeridos saem dos próprios artigos: as palavras-chave mais
     usadas viram os atalhos da capa, em vez de uma lista escrita à mão que
     envelhece sozinha. */
  const sugestoes = [...new Set((secoes ?? []).slice(0, 5).map((s) => s.title.toLowerCase()))];

  return (
    <main className="hl">
      <header className="hl-capa hl-grao">
        {/* O fundo que se move, no lugar da grade milimetrada. */}
        <CapaViva />
        <div className="hl-topo">
          <a className="hl-marca" href="https://ktalogu.com.br">
            <Image src="/brand-logo.svg" alt="Ktalogu" width={112} height={21} priority style={{ height: 21, width: "auto" }} />
            <span className="hl-selo">Aprender</span>
          </a>
          <nav className="hl-nav">
            <a href="#modulos">Módulos</a>
            {(trilhas ?? []).length > 0 ? <a href="#trilhas">Trilhas</a> : null}
          </nav>
          <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 className="hl-capa-dentro">
          <div>
            <span className="hl-chapa">Centro de aprendizado</span>
            <h1>
              O manual completo
              <br />
              da <em>Ktalogu</em>.
            </h1>
            <p className="hl-apoio">
              Todo o sistema explicado passo a passo, com as telas de verdade. Do primeiro cadastro ao fechamento do
              mês, escrito por quem construiu.
            </p>
            <BuscaDoHelp sugestoes={sugestoes} />
          </div>

          {/* O mascote, no lugar das três folhas de papel que ficavam aqui.
              `playsInline` é o que impede o iPhone de abrir o vídeo em tela
              cheia sozinho, e `muted` é o que deixa o navegador dar play sem
              o usuário pedir. O PNG do primeiro quadro entra como cartaz,
              para não ficar um buraco enquanto o vídeo carrega. */}
          <div className="hl-mascote" aria-hidden="true">
            {/* Ele é enfeite, não conteúdo: não recebe clique, não abre menu
                do botão direito, não oferece download nem picture-in-picture.
                Quem barra o clique e o menu do botão direito é o
                `pointer-events: none` do CSS — e não um `onContextMenu` aqui,
                porque esta é uma página de servidor e função não atravessa
                para o cliente: o Next devolve a página como erro. */}
            <video
              src="/mascote/mascote-animado.webm"
              poster="/mascote/mascote-parado.png"
              autoPlay
              loop
              muted
              playsInline
              preload="metadata"
              controls={false}
              disablePictureInPicture
              controlsList="nodownload noplaybackrate noremoteplayback"
              tabIndex={-1}
            />
          </div>
        </div>
      </header>

      {/* A faixa deixou de ser placar e virou atalho.

          Antes ela anunciava "0 trilhas guiadas" — um número que não existe e
          que não ajuda ninguém — e quebrava no celular em duas colunas tortas.
          Agora são três caminhos: o que tem aqui dentro, por onde começar, e
          o que fazer quando o manual não resolve. */}
      <div className="hl-faixa">
        <a href="#modulos">
          <span className="hl-chapa">O que tem aqui</span>
          <strong>{total} artigos</strong>
          <span>em {(secoes ?? []).length} módulos, atualizados {atualizado.toLowerCase()}</span>
        </a>
        <Link href="/aprender/primeiros-passos">
          <span className="hl-chapa">Comece por aqui</span>
          <strong>Primeiros passos</strong>
          <span>o caminho de quem abriu a conta esta semana</span>
        </Link>
        <a href={zap("Olá! Não achei no manual da Ktalogu:")} target="_blank" rel="noreferrer">
          <span className="hl-chapa">Não achou?</span>
          <strong>Falar no WhatsApp</strong>
          <span>o time responde e o artigo nasce da sua pergunta</span>
        </a>
      </div>

      <section className="hl-secao" id="modulos">
        <div className="hl-secao-cab">
          <div>
            <span className="hl-chapa">Por onde andar</span>
            <h2>Os módulos, um a um</h2>
            <p>
              A mesma divisão do menu do sistema. Se você está numa tela e travou, o módulo dela está aqui com o mesmo
              nome.
            </p>
          </div>
        </div>

        {(secoes ?? []).length === 0 ? (
          <p style={{ marginTop: 30, color: "var(--tinta-3)" }}>Os primeiros artigos estão a caminho.</p>
        ) : (
          <div className="hl-grade">
            {(secoes ?? []).map((s) => (
              <Link key={s.id} className="hl-modulo" href={`/aprender/${s.slug}`}>
                <span className="hl-marca-secao" style={{ background: `linear-gradient(135deg, ${s.color}, ${s.color}bb)` }}>
                  <Desenho nome={s.icon} />
                </span>
                <h3>{s.title}</h3>
                <p>{s.description || ""}</p>
                <span className="hl-modulo-pe">
                  <span className="hl-chapa">{porSecao.get(s.id) ?? 0} artigo(s)</span>
                  <svg className="hl-seta" width="18" height="18" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12h13M13 6l6 6-6 6" stroke="#16112b" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </Link>
            ))}
          </div>
        )}
      </section>

      {(trilhas ?? []).length > 0 ? (
        <section className="hl-secao" id="trilhas">
          <div className="hl-secao-cab">
            <div>
              <span className="hl-chapa">Do zero ao rodando</span>
              <h2>Trilhas guiadas</h2>
              <p>Uma ordem pronta para quem não sabe por onde começar. Cada passo é um artigo.</p>
            </div>
          </div>
          <div className="hl-trilhas">
            {(trilhas ?? []).map((t, i) => (
              <Link key={t.id} className="hl-trilha" href={`/aprender/trilha/${t.slug}`}>
                <span className="hl-trilha-n">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <h3>{t.title}</h3>
                  <p>{t.description || ""}</p>
                  <span className="hl-trilha-passos">
                    {Array.from({ length: passosPorTrilha.get(t.id) ?? 0 }).map((_, k) => (
                      <i key={k} />
                    ))}
                  </span>
                </div>
                <span className="hl-trilha-tempo">{passosPorTrilha.get(t.id) ?? 0} passos</span>
              </Link>
            ))}
          </div>
        </section>
      ) : null}

      <RodapeDoHelp />
    </main>
  );
}