"use client";

import { useCallback, useRef, useState } from "react";
import Link from "next/link";

/**
 * A busca do centro de aprendizado.
 *
 * Ela é o maior elemento da capa de propósito: quem chega no help já sabe o
 * que quer, e o menu é o plano B.
 *
 * Toda busca é registrada com quantos resultados deu. As de zero resultado
 * viram, no painel do Owner, a lista de artigos que faltam — escrita pelos
 * próprios usuários.
 */

type Achado = { slug: string; title: string; subtitle: string | null; secao: string; secao_titulo: string };

const ESPERA = 260;

export default function BuscaDoHelp({ sugestoes }: { sugestoes: string[] }) {
  const [termo, setTermo] = useState("");
  const [achados, setAchados] = useState<Achado[] | null>(null);
  const [procurando, setProcurando] = useState(false);
  const relogio = useRef<ReturnType<typeof setTimeout> | null>(null);
  const ultimaMarca = useRef(0);

  const procurar = useCallback(async (texto: string) => {
    const limpo = texto.trim();
    if (limpo.length < 2) {
      setAchados(null);
      return;
    }
    /* Cada busca leva uma marca. Só a mais recente pinta a tela: sem isso, uma
       resposta lenta de três letras atrás sobrescreveria a de agora. */
    const marca = Date.now();
    ultimaMarca.current = marca;
    setProcurando(true);
    try {
      const resposta = await fetch(`/api/help/busca?q=${encodeURIComponent(limpo)}`);
      const retorno = (await resposta.json().catch(() => null)) as { results?: Achado[] } | null;
      if (ultimaMarca.current !== marca) return;
      setAchados(retorno?.results ?? []);
    } catch {
      if (ultimaMarca.current === marca) setAchados([]);
    } finally {
      if (ultimaMarca.current === marca) setProcurando(false);
    }
  }, []);

  function aoDigitar(texto: string) {
    setTermo(texto);
    if (relogio.current) clearTimeout(relogio.current);
    relogio.current = setTimeout(() => void procurar(texto), ESPERA);
  }

  return (
    <>
      <div className="hl-busca">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <circle cx="10.5" cy="10.5" r="6.6" stroke="#8f6bf1" strokeWidth="2.1" />
          <path d="M15.6 15.6 21 21" stroke="#8f6bf1" strokeWidth="2.1" strokeLinecap="round" />
        </svg>
        <input
          value={termo}
          onChange={(e) => aoDigitar(e.target.value)}
          placeholder="Como faço para… fechar o caixa, criar um orçamento, lançar uma compra"
          aria-label="Buscar no centro de aprendizado"
        />
        {termo ? (
          <button
            type="button"
            onClick={() => {
              setTermo("");
              setAchados(null);
            }}
            style={{ border: 0, background: "none", cursor: "pointer", color: "rgba(255,255,255,.5)", padding: 6 }}
            aria-label="Limpar"
          >
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6 6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" /></svg>
          </button>
        ) : (
          <kbd>/</kbd>
        )}

        {achados !== null ? (
          <div className="hl-resultados">
            {achados.length === 0 ? (
              <div className="hl-nada">
                <b>{procurando ? "Procurando…" : "Nada por aqui"}</b>
                <span>
                  {procurando
                    ? "Um instante."
                    : "Anotamos o que você procurou. Se faltou artigo, ele entra na fila para ser escrito."}
                </span>
              </div>
            ) : (
              achados.map((a) => (
                <Link key={`${a.secao}/${a.slug}`} className="hl-resultado" href={`/aprender/${a.secao}/${a.slug}`}>
                  <b>{a.title}</b>
                  <span>
                    {a.secao_titulo}
                    {a.subtitle ? ` · ${a.subtitle}` : ""}
                  </span>
                </Link>
              ))
            )}
          </div>
        ) : null}
      </div>

      {sugestoes.length > 0 && achados === null ? (
        <div className="hl-sugestoes">
          <span>mais buscados</span>
          {sugestoes.map((s) => (
            <button key={s} type="button" onClick={() => aoDigitar(s)}>
              {s}
            </button>
          ))}
        </div>
      ) : null}
    </>
  );
}