"use client";

import { useEffect, useRef, useState } from "react";
import { Loader2, Search } from "lucide-react";

import { ncmFormatado, soDigitos } from "./tipos";

type Resultado = { codigo: string; descricao: string };

/**
 * O NCM da linha: aceita o código digitado ou, com a lupa (ou digitando
 * letras), busca pela descrição do produto.
 */
export function CampoNcm({
  valor,
  aoMudar,
  descricaoDaLinha,
  invalido = false,
  desabilitado = false,
  id,
}: {
  valor: string;
  aoMudar: (digitos: string) => void;
  descricaoDaLinha: string;
  invalido?: boolean;
  desabilitado?: boolean;
  id?: string;
}) {
  const [texto, setTexto] = useState(() => ncmFormatado(valor));
  const [conhecido, setConhecido] = useState(valor);
  if (valor !== conhecido) {
    setConhecido(valor);
    setTexto(ncmFormatado(valor));
  }

  const [aberta, setAberta] = useState(false);
  const [termo, setTermo] = useState("");
  const [resultados, setResultados] = useState<Resultado[]>([]);
  const [buscando, setBuscando] = useState(false);
  const caixa = useRef<HTMLDivElement>(null);
  const rodada = useRef(0);

  useEffect(() => {
    if (!aberta) return;
    const minha = ++rodada.current;
    const relogio = setTimeout(async () => {
      const busca = termo.trim();
      if (busca.length < 3) {
        setResultados([]);
        return;
      }
      setBuscando(true);
      try {
        const resposta = await fetch(`/api/fiscal/consultas/ncm?q=${encodeURIComponent(busca)}`, { cache: "no-store" });
        const json = (await resposta.json().catch(() => null)) as { resultados?: Resultado[] } | null;
        if (minha === rodada.current) setResultados(json?.resultados ?? []);
      } catch {
        if (minha === rodada.current) setResultados([]);
      } finally {
        if (minha === rodada.current) setBuscando(false);
      }
    }, 350);
    return () => clearTimeout(relogio);
  }, [termo, aberta]);

  useEffect(() => {
    if (!aberta) return;
    const fechar = (evento: MouseEvent) => {
      if (caixa.current && !caixa.current.contains(evento.target as Node)) setAberta(false);
    };
    window.addEventListener("mousedown", fechar);
    return () => window.removeEventListener("mousedown", fechar);
  }, [aberta]);

  const abrirBusca = (comTermo: string) => {
    setTermo(comTermo);
    setAberta(true);
  };

  const escolher = (resultado: Resultado) => {
    const digitos = soDigitos(resultado.codigo).slice(0, 8);
    setTexto(ncmFormatado(digitos));
    setConhecido(digitos);
    aoMudar(digitos);
    setAberta(false);
  };

  const buscaAtual = termo.trim();

  return (
    <div ref={caixa} className="relative">
      <input
        id={id}
        value={texto}
        disabled={desabilitado}
        onChange={(e) => {
          const entrada = e.target.value;
          if (/\p{L}/u.test(entrada)) {
            /* Começou a escrever palavra: vira busca pela descrição. */
            abrirBusca(entrada.replace(/[\d.]/g, "").trimStart());
            return;
          }
          const digitos = soDigitos(entrada).slice(0, 8);
          setTexto(ncmFormatado(digitos));
          setConhecido(digitos);
          aoMudar(digitos);
        }}
        placeholder="0000.00.00"
        inputMode="numeric"
        autoComplete="off"
        aria-invalid={invalido}
        aria-label="NCM"
        className={`ks-field ks-num ${invalido ? "ring-2 ring-rose-400/70" : ""}`}
        style={{ paddingRight: "2.5rem" }}
      />
      <button
        type="button"
        disabled={desabilitado}
        onClick={() => abrirBusca(descricaoDaLinha.trim().split(/\s+/).slice(0, 3).join(" "))}
        title="Buscar o NCM pela descrição"
        aria-label="Buscar o NCM pela descrição"
        className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-lg p-1.5 text-[var(--ks-color-primary)] transition hover:bg-[var(--ks-color-bg-hover)] disabled:opacity-40"
      >
        <Search size={15} />
      </button>

      {aberta ? (
        <div className="absolute left-0 top-[calc(100%+6px)] z-40 w-[min(440px,calc(100vw-40px))] overflow-hidden rounded-2xl bg-[var(--ks-color-bg-elevated)] shadow-[0_24px_60px_rgba(26,26,43,0.22)] ring-1 ring-[var(--ks-color-border-subtle)] lg:left-auto lg:right-0">
          <div className="p-3">
            <p className="mb-2 text-xs font-semibold text-[var(--ks-color-text-secondary)]">Buscar o NCM pela descrição</p>
            <div className="relative">
              <input
                autoFocus
                value={termo}
                onChange={(e) => setTermo(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Escape") setAberta(false);
                  if (e.key === "Enter" && resultados[0]) {
                    e.preventDefault();
                    escolher(resultados[0]);
                  }
                }}
                placeholder="Ex.: banner, adesivo, cartão de visita"
                className="ks-field"
              />
              {buscando ? <Loader2 className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-[var(--ks-color-primary)]" /> : null}
            </div>
          </div>
          <ul className="max-h-[300px] overflow-y-auto pb-2">
            {resultados.map((resultado) => (
              <li key={resultado.codigo}>
                <button
                  type="button"
                  onClick={() => escolher(resultado)}
                  className="flex w-full items-start gap-3 px-4 py-2 text-left transition-colors hover:bg-[var(--ks-color-bg-hover)]"
                >
                  <span className="ks-num shrink-0 pt-px text-[13px] font-bold text-[var(--ks-color-text-primary)]">{ncmFormatado(resultado.codigo)}</span>
                  <span className="text-[13px] leading-5 text-[var(--ks-color-text-muted)]">{resultado.descricao}</span>
                </button>
              </li>
            ))}
          </ul>
          {buscaAtual.length < 3 ? (
            <p className="px-4 pb-4 text-xs text-[var(--ks-color-text-muted)]">Escreva pelo menos 3 letras.</p>
          ) : !buscando && !resultados.length ? (
            <p className="px-4 pb-4 text-xs text-[var(--ks-color-text-muted)]">Nada encontrado. Tente outra palavra, ou peça o código ao seu contador.</p>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}