"use client";

import type { ReactNode } from "react";
import { ChevronDown, CircleHelp, ListChecks } from "lucide-react";

import type { PainelNaTela } from "./campos";
import type { Etapa } from "./cliente";

type ConteudoDaAjuda = { precisa: string[]; duvidas: Array<{ pergunta: string; resposta: ReactNode }> };

const AJUDA: Record<Etapa, ConteudoDaAjuda> = {
  empresa: {
    precisa: ["O CNPJ da empresa", "A inscrição estadual, para nota de produto e cupom fiscal", "A inscrição municipal, só se for emitir nota de serviço"],
    duvidas: [
      {
        pergunta: "Onde encontro a inscrição estadual?",
        resposta: "Ela não aparece no cartão CNPJ. Está no cadastro da empresa na Secretaria da Fazenda do seu estado; o seu contador tem esse número.",
      },
      {
        pergunta: "Qual é o meu regime tributário?",
        resposta: "Ao buscar o CNPJ o sistema já marca o que está na Receita Federal. Se a empresa é MEI ou Simples Nacional, é quase sempre isso mesmo.",
      },
      {
        pergunta: "Os dados precisam ser iguais aos da Receita?",
        resposta: "Sim. Razão social, endereço e inscrições iguais ao cadastro oficial evitam que as notas sejam recusadas.",
      },
    ],
  },
  certificado: {
    precisa: ["O arquivo do certificado digital A1 (termina em .pfx ou .p12)", "A senha do certificado"],
    duvidas: [
      {
        pergunta: "O que é o certificado A1?",
        resposta: "É a assinatura digital da empresa, comprada em uma certificadora. Ele vem como um arquivo com senha e é o mesmo usado em qualquer sistema de notas.",
      },
      {
        pergunta: "Tenho certificado em cartão ou token USB. Serve?",
        resposta: "Não. Esse é o tipo A3, que só funciona plugado no computador. Para emitir pelo sistema é preciso o A1, em arquivo.",
      },
      {
        pergunta: "A senha fica guardada?",
        resposta: "Não. Ela é usada só para ativar o certificado. O Ktalogu guarda apenas o nome do titular e a data de validade, para avisar antes de vencer.",
      },
    ],
  },
  notas: {
    precisa: [
      "Saber quais notas a empresa emite",
      "Para cupom fiscal: a empresa credenciada para emitir cupom, no site da Secretaria da Fazenda",
      "Para cupom fiscal: o código CSC, gerado no mesmo site",
      "Para nota de serviço: a alíquota do ISS",
    ],
    duvidas: [
      {
        pergunta: "Nota de produto ou cupom fiscal?",
        resposta: "A nota de produto sai com os dados completos do cliente: é a de pedidos, entregas e vendas para empresas. O cupom fiscal é a nota rápida do balcão, no PDV.",
      },
      {
        pergunta: "Preciso avisar a Secretaria da Fazenda que vou emitir cupom fiscal?",
        resposta:
          "Sim. Além do CSC, a empresa precisa ser credenciada para emitir cupom fiscal — é um pedido separado do da nota de produto, com um credenciamento para o ambiente de teste e outro para o de uso real. Sem ele a nota volta recusada sem explicação. O seu contador pede no site da Secretaria e costuma sair na hora.",
      },
      {
        pergunta: "O que é o CSC?",
        resposta: "Um código que a Secretaria da Fazenda do seu estado gera para a empresa poder emitir cupom fiscal. O contador consegue em poucos minutos no site dela; vem um código para teste e outro para uso real. Cada um tem uma identificação curta (como 1 ou 000001) e o CSC em si, de 16 a 36 caracteres: copie inteiro, do jeito que aparece lá — alguns estados entregam com traços.",
      },
      {
        pergunta: "E os impostos da nota?",
        resposta: "Com as suas respostas o sistema monta os códigos no padrão do seu regime. Antes de emitir de verdade, mostre a nota de teste ao seu contador. Ele pode ajustar tudo em Ajustes do contador.",
      },
      {
        pergunta: "O que é o código fiscal do produto (NCM)?",
        resposta: "Um número de 8 dígitos que diz à Receita o que é o produto. Todo produto que sai em nota precisa dele. Dá para procurar pelo nome, como adesivo ou lona.",
      },
    ],
  },
  testar: {
    precisa: ["Os passos anteriores prontos"],
    duvidas: [
      {
        pergunta: "O que a nota de teste faz?",
        resposta: "Ela vai até a Secretaria da Fazenda ou a prefeitura em modo de teste e volta aprovada se estiver tudo certo. Não tem valor fiscal e não gasta o seu pacote.",
      },
      {
        pergunta: "E se o teste for recusado?",
        resposta: "A tela mostra o motivo em palavras simples e onde corrigir. Corrija e teste de novo quantas vezes precisar.",
      },
      {
        pergunta: "Quando começo a emitir de verdade?",
        resposta: "Depois do teste aprovado, ligue a emissão de verdade de cada tipo de nota. A partir daí cada nota autorizada gasta uma nota do pacote do mês, comprado em Assinatura.",
      },
    ],
  },
};

export function Ajuda({ etapa, painel }: { etapa: Etapa; painel: PainelNaTela }) {
  const conteudo = AJUDA[etapa];
  return (
    <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-2 2xl:grid-cols-1">
      <section className="rounded-3xl bg-[var(--ks-color-bg-elevated)] p-5 shadow-[0_10px_30px_rgba(26,26,43,0.06)]">
        <h3 className="flex items-center gap-2 text-sm font-extrabold text-[var(--ks-color-text-primary)]">
          <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 text-white">
            <ListChecks size={16} />
          </span>
          Tenha em mãos
        </h3>
        <ul className="mt-4 space-y-2.5">
          {conteudo.precisa.map((item) => (
            <li key={item} className="flex gap-2.5 text-sm leading-5 text-[var(--ks-color-text-secondary)]">
              <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--ks-color-primary)]" />
              {item}
            </li>
          ))}
        </ul>
      </section>

      <section className="rounded-3xl bg-[var(--ks-color-bg-elevated)] p-5 shadow-[0_10px_30px_rgba(26,26,43,0.06)]">
        <h3 className="flex items-center gap-2 text-sm font-extrabold text-[var(--ks-color-text-primary)]">
          <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-sky-500 to-indigo-600 text-white">
            <CircleHelp size={16} />
          </span>
          Dúvidas comuns
        </h3>
        <div className="mt-3">
          {conteudo.duvidas.map((duvida) => (
            <details key={duvida.pergunta} className="group border-t border-slate-100/60 first:border-t-0">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-3 py-3 text-sm font-semibold text-[var(--ks-color-text-primary)] [&::-webkit-details-marker]:hidden">
                {duvida.pergunta}
                <ChevronDown size={16} className="shrink-0 text-[var(--ks-color-text-soft)] transition-transform group-open:rotate-180" />
              </summary>
              <p className="pb-3 text-[13px] leading-6 text-[var(--ks-color-text-muted)]">{duvida.resposta}</p>
            </details>
          ))}
        </div>
      </section>

      {painel.ambiente === "sandbox" ? (
        <p className="px-2 text-xs leading-5 text-[var(--ks-color-text-soft)] lg:col-span-2 2xl:col-span-1">
          Você está no ambiente de testes do Ktalogu: aqui nenhuma nota tem valor fiscal, mesmo depois de tudo pronto.
        </p>
      ) : null}
    </div>
  );
}
