"use client";

import { useEffect, useState } from "react";
import { AlertCircle, ExternalLink } from "lucide-react";
import { pedirFiscal } from "@/components/fiscal/comum";
import { conferirCodigoDoServico, CONSULTA_DA_PREFEITURA, dicaDoCodigo, formatarCnae, type ExemploDaCidade } from "@/lib/fiscal/formato-da-cidade";

/*
  Embaixo do "Código do serviço na prefeitura": o formato que a cidade aceita
  (tirado de uma nota que a prefeitura autorizou) e o aviso quando o que foi
  digitado não tem a cara dele — o item da lista nacional no lugar do código,
  ou um código que não combina com a atividade escolhida. Regras em
  lib/fiscal/formato-da-cidade.ts.
*/

/* Um pedido por cidade enquanto a página está aberta. */
const pedidos = new Map<string, Promise<ExemploDaCidade | null>>();

function useExemploDaCidade(ibge: string | null | undefined) {
  const [exemplo, setExemplo] = useState<{ ibge: string; exemplo: ExemploDaCidade | null } | null>(null);
  const codigo = String(ibge ?? "").replace(/\D/g, "");
  useEffect(() => {
    if (codigo.length !== 7) return;
    let vivo = true;
    let pedido = pedidos.get(codigo);
    if (!pedido) {
      pedido = pedirFiscal<{ exemplo: ExemploDaCidade | null }>(`/api/fiscal/cidade/exemplo?ibge=${codigo}`)
        .then((resposta) => resposta.exemplo ?? null)
        .catch(() => {
          pedidos.delete(codigo);
          return null;
        });
      pedidos.set(codigo, pedido);
    }
    void pedido.then((achado) => {
      if (vivo) setExemplo({ ibge: codigo, exemplo: achado });
    });
    return () => {
      vivo = false;
    };
  }, [codigo]);
  return exemplo && exemplo.ibge === codigo ? exemplo.exemplo : null;
}

export function FormatoDoCodigo({
  ibge,
  cidade,
  codigo,
  cnae,
  cnaes,
  aoEscolherCnae,
}: {
  ibge: string | null | undefined;
  cidade: string | null | undefined;
  codigo: string | null;
  cnae: string | null;
  cnaes: string[];
  aoEscolherCnae?: (cnae: string) => void;
}) {
  const exemplo = useExemploDaCidade(ibge);
  const dica = dicaDoCodigo(exemplo, cidade ?? null, cnae);
  const avisos = conferirCodigoDoServico({ codigo, cnae, exemplo, cnaesDaEmpresa: cnaes, cidade: cidade ?? null });
  const consulta = CONSULTA_DA_PREFEITURA[String(ibge ?? "").replace(/\D/g, "")];
  if (!dica && !avisos.length && !consulta) return null;

  return (
    <div className="space-y-2">
      {dica ? <p className="text-xs leading-5 text-[var(--ks-color-text-muted)]">{dica}</p> : null}
      {consulta ? (
        <a
          href={consulta}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1.5 text-xs font-semibold text-[var(--ks-color-primary)] hover:underline"
        >
          Ver os códigos de cada atividade no site da prefeitura
          <ExternalLink size={12} />
        </a>
      ) : null}
      {avisos.map((aviso) => (
        <div key={aviso.tipo} className="flex items-start gap-2 text-xs leading-5 text-[var(--ks-color-status-danger)]">
          <AlertCircle size={14} className="mt-0.5 shrink-0" />
          <span>
            {aviso.texto}
            {aviso.cnaeSugerido && aoEscolherCnae ? (
              <>
                {" "}
                <button type="button" onClick={() => aoEscolherCnae(aviso.cnaeSugerido as string)} className="font-semibold underline underline-offset-2">
                  Usar a atividade {formatarCnae(aviso.cnaeSugerido)}
                </button>
              </>
            ) : null}
          </span>
        </div>
      ))}
    </div>
  );
}