"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { Bell, CalendarPlus, FlaskConical, History, Loader2, Pencil, Plus, Tag, Trash2, Workflow, Zap } from "lucide-react";

import { Aviso } from "@/components/ui/aviso";
import { Button } from "@/components/ui/button";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import { CampoDecimal } from "@/components/ui/campo-decimal";
import { EscolhaDeAjuste, FolhaDeAjustes, LinhaDeAjuste, SecaoDeAjustes } from "@/components/ui/folha-de-ajustes";
import { Input } from "@/components/ui/input";
import { PageHeader } from "@/components/ui/page-header";
import { Switch } from "@/components/ui/switch";
import { LEMBRETES_DA_REGRA, ROTULO_DA_ACAO, type Acao, type Gatilho, type TipoDeAcao, type TipoDeGatilho } from "@/lib/regras/regras";

/* ------------------------------------------------------------------- tipos */

type Execucao = { id: string; regra_id: string; quando: string; sobre: string | null; resultado: string; detalhe: string | null };

type Regra = {
  id: string;
  nome: string;
  ativa: boolean;
  frase: string;
  gatilho: Gatilho | null;
  acoes: Acao[];
  vezes: number;
  ultima_verificacao: string | null;
  ultimo_erro: string | null;
  ultimas_execucoes: Execucao[];
};

type Opcoes = {
  etapas: Array<{ id: string; nome: string }>;
  pessoas: Array<{ id: string; nome: string }>;
  insumos: Array<{ id: string; nome: string; unidade: string | null; estoque: number | null; minimo: number | null }>;
  produtos: Array<{ id: string; nome: string; estoque: number | null }>;
  lembra_estoque_a_cada_dias: number;
};

type Teste = {
  frase: string;
  total_agora: number;
  ainda_nao_tratados: number;
  ja_tratados: number;
  agiria_na_proxima_volta: number;
  observacao?: string;
  itens: Array<{ sobre: string; detalhe: string; ja_tratado: boolean }>;
};

/* O formulário guarda tudo solto; na hora de salvar vira gatilho + ações. */
type Rascunho = {
  id: string | null;
  nome: string;
  gatilho: TipoDeGatilho;
  dias: number;
  etapa: string;
  itemTipo: "insumo" | "produto";
  itemId: string;
  usarMinimo: boolean;
  quantidade: number;
  compromisso: { ligado: boolean; titulo: string; daqui: number; lembrete: string; pessoa: string };
  aviso: { ligado: boolean; pessoa: string; mensagem: string };
  etiqueta: { ligado: boolean; texto: string };
};

const GATILHOS: Array<{ valor: TipoDeGatilho; titulo: string; texto: string }> = [
  { valor: "orcamento_sem_resposta", titulo: "Orçamento sem resposta", texto: "Orçamento em aberto (rascunho ou enviado) parado há alguns dias." },
  { valor: "pedido_parado_na_etapa", titulo: "Pedido parado na produção", texto: "Pedido há alguns dias na mesma etapa do quadro de produção." },
  { valor: "pedido_entrou_na_etapa", titulo: "Pedido entrou numa etapa", texto: "Assim que um pedido entra na etapa escolhida." },
  { valor: "estoque_abaixo", titulo: "Estoque baixo", texto: "Insumo ou produto com estoque abaixo do limite." },
  { valor: "cliente_sem_comprar", titulo: "Cliente sem comprar", texto: "Cliente cuja última compra foi há muitos dias." },
  { valor: "conta_a_pagar_vencendo", titulo: "Conta a pagar vencendo", texto: "Alguns dias antes de uma conta a pagar vencer." },
  { valor: "conta_a_receber_vencida", titulo: "Conta a receber vencida", texto: "Conta a receber que venceu e não foi paga." },
];

const COM_CLIENTE = new Set<TipoDeGatilho>(["orcamento_sem_resposta", "pedido_parado_na_etapa", "pedido_entrou_na_etapa", "cliente_sem_comprar"]);

const DIAS_PADRAO: Record<TipoDeGatilho, number> = {
  orcamento_sem_resposta: 3,
  pedido_parado_na_etapa: 2,
  pedido_entrou_na_etapa: 0,
  estoque_abaixo: 0,
  cliente_sem_comprar: 90,
  conta_a_pagar_vencendo: 2,
  conta_a_receber_vencida: 1,
};

function rascunhoNovo(): Rascunho {
  return {
    id: null,
    nome: "",
    gatilho: "orcamento_sem_resposta",
    dias: 3,
    etapa: "",
    itemTipo: "insumo",
    itemId: "",
    usarMinimo: true,
    quantidade: 10,
    compromisso: { ligado: true, titulo: "", daqui: 0, lembrete: "", pessoa: "" },
    aviso: { ligado: false, pessoa: "", mensagem: "" },
    etiqueta: { ligado: false, texto: "" },
  };
}

function rascunhoDaRegra(r: Regra): Rascunho {
  const base = rascunhoNovo();
  const g = r.gatilho;
  const rascunho: Rascunho = { ...base, id: r.id, nome: r.nome, compromisso: { ...base.compromisso, ligado: false } };
  if (g) {
    rascunho.gatilho = g.tipo;
    const p = g.parametros as Record<string, unknown>;
    if (typeof p.dias === "number") rascunho.dias = p.dias;
    if (typeof p.etapa === "string") rascunho.etapa = p.etapa;
    if (p.item_tipo === "produto" || p.item_tipo === "insumo") rascunho.itemTipo = p.item_tipo;
    if (typeof p.item_id === "string") rascunho.itemId = p.item_id;
    if (typeof p.quantidade === "number") {
      rascunho.quantidade = p.quantidade;
      rascunho.usarMinimo = false;
    }
  }
  for (const a of r.acoes) {
    if (a.tipo === "criar_compromisso")
      rascunho.compromisso = {
        ligado: true,
        titulo: a.parametros.titulo ?? "",
        daqui: a.parametros.daqui_a_dias,
        lembrete: a.parametros.lembrete_minutos ? String(a.parametros.lembrete_minutos) : "",
        pessoa: a.parametros.responsavel_id ?? "",
      };
    if (a.tipo === "avisar_pessoa") rascunho.aviso = { ligado: true, pessoa: a.parametros.usuario_id ?? "", mensagem: a.parametros.mensagem ?? "" };
    if (a.tipo === "adicionar_etiqueta_ao_cliente") rascunho.etiqueta = { ligado: true, texto: a.parametros.etiqueta };
  }
  return rascunho;
}

function corpoDoRascunho(r: Rascunho) {
  const parametros: Record<string, unknown> = {};
  if (r.gatilho === "pedido_entrou_na_etapa") parametros.etapa = r.etapa;
  else if (r.gatilho === "estoque_abaixo") {
    parametros.item_tipo = r.itemTipo;
    parametros.item_id = r.itemId || null;
    parametros.quantidade = r.itemTipo === "insumo" && r.usarMinimo ? null : r.quantidade;
  } else {
    parametros.dias = r.dias;
    if (r.gatilho === "pedido_parado_na_etapa") parametros.etapa = r.etapa || null;
  }
  const acoes: Array<{ tipo: TipoDeAcao; parametros: Record<string, unknown> }> = [];
  if (r.compromisso.ligado)
    acoes.push({
      tipo: "criar_compromisso",
      parametros: {
        titulo: r.compromisso.titulo || null,
        daqui_a_dias: r.compromisso.daqui,
        lembrete_minutos: r.compromisso.lembrete ? Number(r.compromisso.lembrete) : null,
        responsavel_id: r.compromisso.pessoa || null,
      },
    });
  if (r.aviso.ligado) acoes.push({ tipo: "avisar_pessoa", parametros: { usuario_id: r.aviso.pessoa || null, mensagem: r.aviso.mensagem || null } });
  if (r.etiqueta.ligado && COM_CLIENTE.has(r.gatilho)) acoes.push({ tipo: "adicionar_etiqueta_ao_cliente", parametros: { etiqueta: r.etiqueta.texto } });
  return { nome: r.nome.trim() || undefined, gatilho: { tipo: r.gatilho, parametros }, acoes };
}

async function pedir<T>(url: string, init?: RequestInit): Promise<T> {
  const resposta = await fetch(url, { ...init, headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) } });
  const corpo = (await resposta.json().catch(() => ({}))) as T & { error?: string };
  if (!resposta.ok) throw new Error(corpo.error || "Não foi possível concluir agora.");
  return corpo;
}

function quandoFoi(iso: string | null) {
  if (!iso) return "ainda não conferida";
  const minutos = Math.round((Date.now() - Date.parse(iso)) / 60000);
  if (minutos < 1) return "conferida agora há pouco";
  if (minutos < 60) return `conferida há ${minutos} min`;
  const horas = Math.round(minutos / 60);
  if (horas < 48) return `conferida há ${horas} h`;
  return `conferida em ${new Date(iso).toLocaleDateString("pt-BR")}`;
}

function dataHora(iso: string) {
  return new Date(iso).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
}

const COR_DO_RESULTADO: Record<string, string> = {
  feito: "text-[var(--ks-color-status-success,#15803d)]",
  falhou: "text-[var(--ks-color-status-danger)]",
  "em andamento": "text-[var(--ks-color-text-soft)]",
};

/* -------------------------------------------------------------------- tela */

export default function RegrasPage() {
  const [regras, setRegras] = useState<Regra[] | null>(null);
  const [opcoes, setOpcoes] = useState<Opcoes | null>(null);
  const [erro, setErro] = useState<string | null>(null);
  const [mensagem, setMensagem] = useState<{ tom: "bom" | "ruim"; texto: string } | null>(null);
  const [rascunho, setRascunho] = useState<Rascunho | null>(null);
  const [salvando, setSalvando] = useState(false);
  const [testando, setTestando] = useState<string | null>(null);
  const [teste, setTeste] = useState<{ de: string; resultado: Teste } | null>(null);
  const [historico, setHistorico] = useState<Execucao[] | null>(null);
  const [aberta, setAberta] = useState<string | null>(null);
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const [ocupado, setOcupado] = useState(false);

  const carregar = useCallback(async () => {
    try {
      const [lista, hist] = await Promise.all([
        pedir<{ regras: Regra[]; opcoes: Opcoes }>("/api/regras"),
        pedir<{ execucoes: Execucao[] }>("/api/regras/execucoes"),
      ]);
      setRegras(lista.regras);
      setOpcoes(lista.opcoes);
      setHistorico(hist.execucoes);
      setErro(null);
    } catch (e) {
      setErro(e instanceof Error ? e.message : "Não foi possível carregar as regras.");
    }
  }, []);

  useEffect(() => {
    void carregar();
  }, [carregar]);

  const nomeDaRegra = useMemo(() => Object.fromEntries((regras ?? []).map((r) => [r.id, r.nome])), [regras]);

  const mudar = (parte: Partial<Rascunho>) => setRascunho((atual) => (atual ? { ...atual, ...parte } : atual));

  const salvar = async () => {
    if (!rascunho) return;
    setSalvando(true);
    setMensagem(null);
    try {
      const corpo = corpoDoRascunho(rascunho);
      if (rascunho.id) await pedir(`/api/regras/${rascunho.id}`, { method: "PATCH", body: JSON.stringify({ ...corpo, nome: rascunho.nome.trim() || nomeDaRegra[rascunho.id] }) });
      else await pedir("/api/regras", { method: "POST", body: JSON.stringify(corpo) });
      setMensagem({ tom: "bom", texto: rascunho.id ? "Regra alterada." : "Regra criada. Ela é conferida a cada 5 minutos." });
      setRascunho(null);
      setTeste(null);
      await carregar();
    } catch (e) {
      setMensagem({ tom: "ruim", texto: e instanceof Error ? e.message : "Não foi possível salvar." });
    } finally {
      setSalvando(false);
    }
  };

  const testar = async (de: string, corpo: Record<string, unknown>) => {
    setTestando(de);
    setMensagem(null);
    try {
      const { teste: resultado } = await pedir<{ teste: Teste }>("/api/regras/testar", { method: "POST", body: JSON.stringify(corpo) });
      setTeste({ de, resultado });
    } catch (e) {
      setMensagem({ tom: "ruim", texto: e instanceof Error ? e.message : "Não foi possível testar." });
    } finally {
      setTestando(null);
    }
  };

  const ligar = async (regra: Regra, ativa: boolean) => {
    setRegras((lista) => (lista ?? []).map((r) => (r.id === regra.id ? { ...r, ativa } : r)));
    try {
      await pedir(`/api/regras/${regra.id}`, { method: "PATCH", body: JSON.stringify({ ativa }) });
    } catch (e) {
      setRegras((lista) => (lista ?? []).map((r) => (r.id === regra.id ? { ...r, ativa: !ativa } : r)));
      setMensagem({ tom: "ruim", texto: e instanceof Error ? e.message : "Não foi possível mudar." });
    }
  };

  const pedirExclusao = (regra: Regra) =>
    setConfirmacao({
      titulo: "Excluir esta regra?",
      texto: `"${regra.nome}" e o histórico dela serão apagados. O que ela já fez (compromissos e etiquetas) continua onde está. Para só parar, desligue a regra.`,
      confirmar: "Excluir",
      tom: "perigo",
      aoConfirmar: async () => {
        setOcupado(true);
        try {
          await pedir(`/api/regras/${regra.id}`, { method: "DELETE" });
          setConfirmacao(null);
          setMensagem({ tom: "bom", texto: "Regra excluída." });
          await carregar();
        } catch (e) {
          setConfirmacao(null);
          setMensagem({ tom: "ruim", texto: e instanceof Error ? e.message : "Não foi possível excluir." });
        } finally {
          setOcupado(false);
        }
      },
    });

  const resultadoDoTeste = (de: string) =>
    teste && teste.de === de ? (
      <div className="mt-3 rounded-xl bg-[var(--ks-brand-50)] px-4 py-3 text-sm">
        <p className="font-semibold text-[var(--ks-color-text-primary)]">
          {teste.resultado.total_agora === 0
            ? "Agora nada dispara esta regra."
            : `Agora, ${teste.resultado.total_agora} ${teste.resultado.total_agora === 1 ? "registro dispara" : "registros disparam"} esta regra${
                teste.resultado.ja_tratados ? ` (${teste.resultado.ja_tratados} já ${teste.resultado.ja_tratados === 1 ? "tratado" : "tratados"})` : ""
              }.`}
        </p>
        {teste.resultado.agiria_na_proxima_volta ? (
          <p className="mt-0.5 text-xs text-[var(--ks-color-text-muted)]">
            Na próxima conferência ela agiria em {teste.resultado.agiria_na_proxima_volta}. Nada foi feito agora.
          </p>
        ) : (
          <p className="mt-0.5 text-xs text-[var(--ks-color-text-muted)]">Nada foi feito agora: isto é só um teste.</p>
        )}
        {teste.resultado.observacao ? <p className="mt-1 text-xs text-[var(--ks-color-text-muted)]">{teste.resultado.observacao}</p> : null}
        {teste.resultado.itens.length ? (
          <ul className="mt-2 space-y-1">
            {teste.resultado.itens.map((item, i) => (
              <li key={i} className="text-[13px] text-[var(--ks-color-text-secondary)]">
                {item.ja_tratado ? <span className="mr-1 text-xs font-semibold text-[var(--ks-color-text-soft)]">já tratado ·</span> : null}
                {item.sobre}
              </li>
            ))}
          </ul>
        ) : null}
      </div>
    ) : null;

  if (erro) {
    return (
      <div className="space-y-6 pb-4">
        <PageHeader eyebrow="Configurações" title="Regras automáticas" />
        <Aviso tom="ruim">{erro}</Aviso>
      </div>
    );
  }

  return (
    <div className="space-y-6 pb-4">
      <PageHeader
        eyebrow="Configurações"
        title="Regras automáticas"
        subtitle="Quando algo acontecer, o sistema faz por você: marca um compromisso, avisa alguém da equipe ou põe uma etiqueta no cliente."
        actions={
          !rascunho ? (
            <Button icon={<Plus className="h-4 w-4" />} onClick={() => { setRascunho(rascunhoNovo()); setTeste(null); setMensagem(null); }}>
              Nova regra
            </Button>
          ) : null
        }
      />

      {mensagem ? <Aviso tom={mensagem.tom}>{mensagem.texto}</Aviso> : null}

      {rascunho && opcoes ? (
        <Editor
          rascunho={rascunho}
          opcoes={opcoes}
          mudar={mudar}
          salvando={salvando}
          testando={testando === "rascunho"}
          aoSalvar={salvar}
          aoTestar={() => testar("rascunho", { regra: corpoDoRascunho(rascunho) })}
          aoCancelar={() => { setRascunho(null); setTeste(null); }}
          resultado={resultadoDoTeste("rascunho")}
        />
      ) : null}

      <FolhaDeAjustes>
        <SecaoDeAjustes
          id="regras-lista"
          Icone={Workflow}
          titulo="Suas regras"
          texto="Conferidas a cada 5 minutos. Cada regra age uma vez só em cada caso. Nada é enviado aos clientes e nada mexe em dinheiro."
        >
          {regras === null ? (
            <p className="flex items-center gap-2 py-6 text-sm text-[var(--ks-color-text-muted)]">
              <Loader2 className="h-4 w-4 animate-spin" /> Carregando…
            </p>
          ) : regras.length === 0 ? (
            <p className="py-6 text-sm text-[var(--ks-color-text-muted)]">
              Nenhuma regra ainda. Exemplo: &quot;quando um orçamento passar 3 dias sem resposta, marcar um compromisso para ligar&quot;.
            </p>
          ) : (
            <ul>
              {regras.map((regra) => (
                <li key={regra.id} className="border-t border-[var(--ks-n-100)] py-4 first:border-t-0">
                  <div className="flex items-start gap-4">
                    <Switch checked={regra.ativa} onCheckedChange={(v) => void ligar(regra, v)} aria-label={regra.ativa ? "Desligar a regra" : "Ligar a regra"} />
                    <div className="min-w-0 flex-1">
                      <p className={`text-sm font-bold ${regra.ativa ? "text-[var(--ks-color-text-primary)]" : "text-[var(--ks-color-text-soft)]"}`}>{regra.nome}</p>
                      <p className="mt-0.5 text-[13px] leading-5 text-[var(--ks-color-text-secondary)]">{regra.frase}</p>
                      <p className="mt-1 text-xs text-[var(--ks-color-text-muted)]">
                        {regra.ativa ? "Ligada" : "Desligada"} · agiu {regra.vezes} {regra.vezes === 1 ? "vez" : "vezes"} · {quandoFoi(regra.ultima_verificacao)}
                      </p>
                      {regra.ultimo_erro ? <p className="mt-1 text-xs font-semibold text-[var(--ks-color-status-danger)]">{regra.ultimo_erro}</p> : null}
                      <div className="mt-2 flex flex-wrap gap-1.5">
                        <Button size="sm" variant="ghost" disabled={testando === regra.id} onClick={() => void testar(regra.id, { id: regra.id })} icon={testando === regra.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <FlaskConical className="h-3.5 w-3.5" />}>
                          Testar agora
                        </Button>
                        <Button size="sm" variant="ghost" onClick={() => { setRascunho(rascunhoDaRegra(regra)); setTeste(null); window.scrollTo({ top: 0, behavior: "smooth" }); }} icon={<Pencil className="h-3.5 w-3.5" />}>
                          Editar
                        </Button>
                        <Button size="sm" variant="ghost" onClick={() => setAberta(aberta === regra.id ? null : regra.id)} icon={<History className="h-3.5 w-3.5" />}>
                          Últimas vezes
                        </Button>
                        <Button size="sm" variant="ghost" onClick={() => pedirExclusao(regra)} icon={<Trash2 className="h-3.5 w-3.5" />}>
                          Excluir
                        </Button>
                      </div>
                      {resultadoDoTeste(regra.id)}
                      {aberta === regra.id ? (
                        regra.ultimas_execucoes.length ? (
                          <ul className="mt-2 space-y-1">
                            {regra.ultimas_execucoes.map((e) => (
                              <li key={e.id} className="text-[13px] text-[var(--ks-color-text-secondary)]">
                                <span className="text-xs text-[var(--ks-color-text-soft)]">{dataHora(e.quando)}</span> · {e.sobre} ·{" "}
                                <span className={`font-semibold ${COR_DO_RESULTADO[e.resultado] ?? ""}`}>{e.detalhe || e.resultado}</span>
                              </li>
                            ))}
                          </ul>
                        ) : (
                          <p className="mt-2 text-xs text-[var(--ks-color-text-muted)]">Esta regra ainda não agiu.</p>
                        )
                      ) : null}
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </SecaoDeAjustes>

        <SecaoDeAjustes id="regras-historico" Icone={History} titulo="Histórico" texto="O que as regras fizeram, das mais recentes para as mais antigas.">
          {historico && historico.length ? (
            <ul className="pb-3">
              {historico.slice(0, 60).map((e) => (
                <li key={e.id} className="border-t border-[var(--ks-n-100)] py-2.5 text-[13px] first:border-t-0">
                  <span className="text-xs text-[var(--ks-color-text-soft)]">{dataHora(e.quando)}</span>
                  <span className="mx-1.5 text-[var(--ks-color-text-soft)]">·</span>
                  <span className="font-semibold text-[var(--ks-color-text-primary)]">{nomeDaRegra[e.regra_id] ?? "Regra"}</span>
                  <span className="mx-1.5 text-[var(--ks-color-text-soft)]">·</span>
                  <span className="text-[var(--ks-color-text-secondary)]">{e.sobre}</span>
                  <span className={`ml-1.5 font-semibold ${COR_DO_RESULTADO[e.resultado] ?? ""}`}>{e.detalhe || e.resultado}</span>
                </li>
              ))}
            </ul>
          ) : (
            <p className="py-6 text-sm text-[var(--ks-color-text-muted)]">Nada ainda.</p>
          )}
        </SecaoDeAjustes>
      </FolhaDeAjustes>

      <CaixaDeConfirmacao pedido={confirmacao} ocupado={ocupado} aoFechar={() => (ocupado ? null : setConfirmacao(null))} />
    </div>
  );
}

/* ------------------------------------------------------------------ editor */

function SeletorDePessoa({ valor, aoMudar, pessoas, id }: { valor: string; aoMudar: (v: string) => void; pessoas: Opcoes["pessoas"]; id: string }) {
  return (
    <select id={id} className="ks-field w-full" value={valor} onChange={(e) => aoMudar(e.target.value)}>
      <option value="">O dono da empresa</option>
      {pessoas
        .filter((p, i) => i > 0)
        .map((p) => (
          <option key={p.id} value={p.id}>
            {p.nome}
          </option>
        ))}
    </select>
  );
}

function MarcaDaAcao({ ligado, aoMudar, titulo, texto, Icone, desligada }: { ligado: boolean; aoMudar: (v: boolean) => void; titulo: string; texto: string; Icone: typeof Bell; desligada?: string }) {
  return (
    <div className="flex items-start justify-between gap-4 border-t border-[var(--ks-n-100)] pt-4 first:border-t-0">
      <div className="flex min-w-0 items-start gap-2.5">
        <Icone className="mt-0.5 h-4 w-4 shrink-0 text-[var(--ks-brand-600)]" />
        <div>
          <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">{titulo}</p>
          <p className="text-xs text-[var(--ks-color-text-muted)]">{desligada ?? texto}</p>
        </div>
      </div>
      <Switch checked={ligado} disabled={Boolean(desligada)} onCheckedChange={aoMudar} aria-label={titulo} />
    </div>
  );
}

function Editor({
  rascunho: r,
  opcoes,
  mudar,
  salvando,
  testando,
  aoSalvar,
  aoTestar,
  aoCancelar,
  resultado,
}: {
  rascunho: Rascunho;
  opcoes: Opcoes;
  mudar: (parte: Partial<Rascunho>) => void;
  salvando: boolean;
  testando: boolean;
  aoSalvar: () => void;
  aoTestar: () => void;
  aoCancelar: () => void;
  resultado: React.ReactNode;
}) {
  const usaDias = r.gatilho !== "pedido_entrou_na_etapa" && r.gatilho !== "estoque_abaixo";
  const rotuloDosDias =
    r.gatilho === "conta_a_pagar_vencendo" ? "Quantos dias antes do vencimento" : r.gatilho === "conta_a_receber_vencida" ? "Vencida há quantos dias" : "Depois de quantos dias";
  const nenhumaAcao = !r.compromisso.ligado && !r.aviso.ligado && !(r.etiqueta.ligado && COM_CLIENTE.has(r.gatilho));
  const itens = r.itemTipo === "insumo" ? opcoes.insumos : opcoes.produtos;

  return (
    <FolhaDeAjustes>
      <SecaoDeAjustes id="regra-quando" Icone={Zap} titulo={r.id ? "Editar regra" : "Nova regra"} texto="Primeiro, quando a regra dispara.">
        <LinhaDeAjuste titulo="Quando" largo>
          <EscolhaDeAjuste
            rotulo="Quando"
            valor={r.gatilho}
            aoEscolher={(g) => mudar({ gatilho: g, dias: DIAS_PADRAO[g] || r.dias, etapa: g === "pedido_entrou_na_etapa" && !r.etapa ? opcoes.etapas[0]?.id ?? "" : r.etapa })}
            opcoes={GATILHOS}
          />
        </LinhaDeAjuste>

        {usaDias ? (
          <LinhaDeAjuste
            titulo={rotuloDosDias}
            htmlFor="regra-dias"
            texto={r.gatilho === "conta_a_pagar_vencendo" ? "0 = no dia do vencimento." : r.gatilho === "conta_a_receber_vencida" ? "0 = assim que vencer." : undefined}
          >
            <CampoDecimal id="regra-dias" className="ks-field w-32" casas={0} valor={r.dias} aoMudar={(n) => mudar({ dias: n })} />
          </LinhaDeAjuste>
        ) : null}

        {r.gatilho === "pedido_parado_na_etapa" || r.gatilho === "pedido_entrou_na_etapa" ? (
          <LinhaDeAjuste titulo="Etapa" htmlFor="regra-etapa" texto="As etapas do quadro de produção.">
            <select id="regra-etapa" className="ks-field w-full" value={r.etapa} onChange={(e) => mudar({ etapa: e.target.value })}>
              {r.gatilho === "pedido_parado_na_etapa" ? <option value="">Qualquer etapa (aguardando ou em produção)</option> : null}
              {opcoes.etapas.map((e) => (
                <option key={e.id} value={e.id}>
                  {e.nome}
                </option>
              ))}
            </select>
          </LinhaDeAjuste>
        ) : null}

        {r.gatilho === "estoque_abaixo" ? (
          <>
            <LinhaDeAjuste titulo="Estoque de" largo>
              <EscolhaDeAjuste
                rotulo="Estoque de"
                valor={r.itemTipo}
                aoEscolher={(v) => mudar({ itemTipo: v, itemId: "", usarMinimo: v === "insumo" })}
                opcoes={[
                  { valor: "insumo", titulo: "Insumo", texto: "Lona, vinil, tinta… os que têm estoque controlado." },
                  { valor: "produto", titulo: "Produto", texto: "Produtos com estoque controlado." },
                ]}
              />
            </LinhaDeAjuste>
            <LinhaDeAjuste titulo="Qual" htmlFor="regra-item">
              <select id="regra-item" className="ks-field w-full" value={r.itemId} onChange={(e) => mudar({ itemId: e.target.value })}>
                <option value="">{r.itemTipo === "insumo" ? "Qualquer insumo" : "Qualquer produto"}</option>
                {itens.map((i) => (
                  <option key={i.id} value={i.id}>
                    {i.nome}
                  </option>
                ))}
              </select>
            </LinhaDeAjuste>
            <LinhaDeAjuste
              titulo="Abaixo de"
              htmlFor="regra-quantidade"
              texto={`Enquanto continuar baixo, a regra lembra de novo a cada ${opcoes.lembra_estoque_a_cada_dias} dias.`}
            >
              {r.itemTipo === "insumo" ? (
                <label className="mb-2 flex items-center gap-2 text-sm text-[var(--ks-color-text-secondary)]">
                  <input type="checkbox" checked={r.usarMinimo} onChange={(e) => mudar({ usarMinimo: e.target.checked })} />
                  Usar o mínimo cadastrado em cada insumo
                </label>
              ) : null}
              {!(r.itemTipo === "insumo" && r.usarMinimo) ? (
                <CampoDecimal id="regra-quantidade" className="ks-field w-32" casas={3} valor={r.quantidade} aoMudar={(n) => mudar({ quantidade: n })} />
              ) : null}
            </LinhaDeAjuste>
          </>
        ) : null}
      </SecaoDeAjustes>

      <SecaoDeAjustes id="regra-faca" Icone={Workflow} titulo="Faça" texto="Uma ou mais ações. Nada é enviado ao cliente.">
        <div className="space-y-4 py-3">
          <MarcaDaAcao
            Icone={CalendarPlus}
            titulo={ROTULO_DA_ACAO.criar_compromisso}
            texto="Fica ligado ao cliente, pedido ou orçamento."
            ligado={r.compromisso.ligado}
            aoMudar={(v) => mudar({ compromisso: { ...r.compromisso, ligado: v } })}
          />
          {r.compromisso.ligado ? (
            <div className="grid gap-3 pl-6 sm:grid-cols-2">
              <div>
                <label className="text-xs font-semibold text-[var(--ks-color-text-secondary)]" htmlFor="regra-titulo">Título (opcional)</label>
                <Input id="regra-titulo" value={r.compromisso.titulo} maxLength={80} placeholder="Ex.: Ligar para o cliente" onChange={(e) => mudar({ compromisso: { ...r.compromisso, titulo: e.target.value } })} />
              </div>
              <div>
                <label className="text-xs font-semibold text-[var(--ks-color-text-secondary)]" htmlFor="regra-daqui">Para quantos dias depois</label>
                <CampoDecimal id="regra-daqui" className="ks-field w-full" casas={0} valor={r.compromisso.daqui} aoMudar={(n) => mudar({ compromisso: { ...r.compromisso, daqui: n } })} />
              </div>
              <div>
                <label className="text-xs font-semibold text-[var(--ks-color-text-secondary)]" htmlFor="regra-responsavel">Com quem</label>
                <SeletorDePessoa id="regra-responsavel" pessoas={opcoes.pessoas} valor={r.compromisso.pessoa} aoMudar={(v) => mudar({ compromisso: { ...r.compromisso, pessoa: v } })} />
              </div>
              <div>
                <label className="text-xs font-semibold text-[var(--ks-color-text-secondary)]" htmlFor="regra-lembrete">Lembrete</label>
                <select id="regra-lembrete" className="ks-field w-full" value={r.compromisso.lembrete} onChange={(e) => mudar({ compromisso: { ...r.compromisso, lembrete: e.target.value } })}>
                  <option value="">Sem lembrete</option>
                  {LEMBRETES_DA_REGRA.map((m) => (
                    <option key={m} value={m}>
                      {m < 60 ? `${m} minutos antes` : m === 1440 ? "1 dia antes" : m === 2880 ? "2 dias antes" : `${m / 60} ${m === 60 ? "hora" : "horas"} antes`}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          ) : null}

          <MarcaDaAcao
            Icone={Bell}
            titulo={ROTULO_DA_ACAO.avisar_pessoa}
            texto="Aparece na agenda de hoje da pessoa e no celular, se ela ligou as notificações."
            ligado={r.aviso.ligado}
            aoMudar={(v) => mudar({ aviso: { ...r.aviso, ligado: v } })}
          />
          {r.aviso.ligado ? (
            <div className="grid gap-3 pl-6 sm:grid-cols-2">
              <div>
                <label className="text-xs font-semibold text-[var(--ks-color-text-secondary)]" htmlFor="regra-quem">Quem</label>
                <SeletorDePessoa id="regra-quem" pessoas={opcoes.pessoas} valor={r.aviso.pessoa} aoMudar={(v) => mudar({ aviso: { ...r.aviso, pessoa: v } })} />
              </div>
              <div>
                <label className="text-xs font-semibold text-[var(--ks-color-text-secondary)]" htmlFor="regra-mensagem">Mensagem (opcional)</label>
                <Input id="regra-mensagem" value={r.aviso.mensagem} maxLength={200} placeholder="Ex.: Cobrar o cliente" onChange={(e) => mudar({ aviso: { ...r.aviso, mensagem: e.target.value } })} />
              </div>
            </div>
          ) : null}

          <MarcaDaAcao
            Icone={Tag}
            titulo={ROTULO_DA_ACAO.adicionar_etiqueta_ao_cliente}
            texto="Fica no cadastro do cliente, para filtrar depois."
            desligada={COM_CLIENTE.has(r.gatilho) ? undefined : "Este gatilho não aponta para um cliente cadastrado."}
            ligado={r.etiqueta.ligado && COM_CLIENTE.has(r.gatilho)}
            aoMudar={(v) => mudar({ etiqueta: { ...r.etiqueta, ligado: v } })}
          />
          {r.etiqueta.ligado && COM_CLIENTE.has(r.gatilho) ? (
            <div className="pl-6 sm:w-1/2">
              <label className="text-xs font-semibold text-[var(--ks-color-text-secondary)]" htmlFor="regra-etiqueta">Etiqueta</label>
              <Input id="regra-etiqueta" value={r.etiqueta.texto} maxLength={40} placeholder="Ex.: reativar" onChange={(e) => mudar({ etiqueta: { ...r.etiqueta, texto: e.target.value } })} />
            </div>
          ) : null}
        </div>
      </SecaoDeAjustes>

      <SecaoDeAjustes id="regra-nome" Icone={Pencil} titulo="Nome" texto="Opcional. Sem nome, a regra se chama pelo que ela vigia.">
        <LinhaDeAjuste titulo="Nome da regra" htmlFor="regra-nome-campo">
          <Input id="regra-nome-campo" value={r.nome} maxLength={120} placeholder="Ex.: Cobrar orçamento parado" onChange={(e) => mudar({ nome: e.target.value })} />
        </LinhaDeAjuste>
        <div className="flex flex-wrap items-center gap-2 py-4">
          <Button onClick={aoSalvar} disabled={salvando || nenhumaAcao} icon={salvando ? <Loader2 className="h-4 w-4 animate-spin" /> : null}>
            {r.id ? "Salvar alteração" : "Criar regra"}
          </Button>
          <Button variant="outline" onClick={aoTestar} disabled={testando || nenhumaAcao} icon={testando ? <Loader2 className="h-4 w-4 animate-spin" /> : <FlaskConical className="h-4 w-4" />}>
            Testar sem salvar
          </Button>
          <Button variant="ghost" onClick={aoCancelar} disabled={salvando}>
            Cancelar
          </Button>
          {nenhumaAcao ? <span className="text-xs text-[var(--ks-color-text-muted)]">Ligue pelo menos uma ação.</span> : null}
        </div>
        {resultado ? <div className="pb-4">{resultado}</div> : null}
      </SecaoDeAjustes>
    </FolhaDeAjustes>
  );
}