"use client";

import { useState, type ReactNode } from "react";
import { ExternalLink, HelpCircle } from "lucide-react";

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import type { ChaveDeLinkOficial } from "@/lib/fiscal/tabelas";
import { LINKS_OFICIAIS } from "@/lib/fiscal/tabelas";

/**
 * A bolinha de interrogação dos campos fiscais.
 *
 * Toda sigla que a empresa não é obrigada a conhecer (NCM, CFOP, CSC, CST…)
 * ganha uma explicação em uma frase e, quando existe, o link do site oficial
 * onde o número é conseguido. Funciona no mouse (passar por cima) e no dedo
 * (tocar), porque metade das gráficas cadastra pelo celular.
 */
export function Dica({
  titulo,
  children,
  link,
  rotuloDoLink,
}: {
  titulo?: string;
  children: ReactNode;
  link?: ChaveDeLinkOficial | { titulo: string; url: string };
  rotuloDoLink?: string;
}) {
  const [aberta, setAberta] = useState(false);
  const alvo = typeof link === "string" ? LINKS_OFICIAIS[link] : link;

  return (
    <TooltipProvider delayDuration={200}>
      <Tooltip open={aberta} onOpenChange={setAberta}>
        <TooltipTrigger asChild>
          <button
            type="button"
            aria-label={titulo ? `O que é ${titulo}` : "Saiba mais"}
            onClick={(e) => {
              e.preventDefault();
              setAberta((antes) => !antes);
            }}
            className="ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[var(--ks-color-text-soft)] transition-colors hover:text-[var(--ks-color-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ks-color-primary)]"
          >
            <HelpCircle size={14} />
          </button>
        </TooltipTrigger>
        <TooltipContent side="top" align="start" className="max-w-[300px] space-y-2 text-[13px] leading-5">
          {titulo ? <p className="font-bold">{titulo}</p> : null}
          <div className="text-white/90">{children}</div>
          {alvo ? (
            <a
              href={alvo.url}
              target="_blank"
              rel="noopener noreferrer"
              onClick={(e) => e.stopPropagation()}
              className="inline-flex items-center gap-1 font-semibold text-white underline decoration-white/40 underline-offset-2 hover:decoration-white"
            >
              {rotuloDoLink ?? alvo.titulo}
              <ExternalLink size={12} />
            </a>
          ) : null}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

/** O link oficial solto, para ficar embaixo de um campo ou de um bloco. */
export function LinkOficial({ chave, rotulo }: { chave: ChaveDeLinkOficial; rotulo?: string }) {
  const alvo = LINKS_OFICIAIS[chave];
  return (
    <a
      href={alvo.url}
      target="_blank"
      rel="noopener noreferrer"
      className="inline-flex items-center gap-1 text-xs font-semibold text-[var(--ks-color-primary)] hover:underline"
    >
      {rotulo ?? alvo.titulo}
      <ExternalLink size={12} />
    </a>
  );
}