"use client";

/* A aba Financeiro do orçamento: as condições comerciais.

   Formas de pagamento aceitas, como o cliente paga (à vista, entrada e saldo
   ou parcelado), o parcelamento do cartão, observações e o cronograma que
   sai na proposta. É um componente controlado: recebe as condições e devolve
   as novas a cada mudança. Quem grava é a página, junto com o resto do
   orçamento. */

import { useState, type ReactNode } from "react";
import { Barcode, Check, CreditCard, Landmark, Link2, Minus, Plus } from "lucide-react";
import { CashIcon, PixIcon } from "@/components/icons/payment-icons";
import { Switch } from "@/components/ui/switch";
import { formatMoney, formatMoneyInput, parseMoneyInput } from "@/utils/formatters";
import {
  FORMAS_DE_PAGAMENTO,
  LIMITES,
  cronograma,
  descreverCondicoes,
  formatarDia,
  valorDaEntrada,
  type CondicoesComerciais,
  type FormaDePagamento,
  type Momento,
} from "@/lib/condicoes-comerciais";
import type { ModeloDeCondicoes } from "@/lib/modelos-de-condicoes";
import { ModelosDeCondicoes } from "./modelos-de-condicoes";
import { CARTAO_EM_ETAPAS, CabecalhoDoCartao } from "./orcamento-em-etapas";

const ICONE_DA_FORMA: Record<FormaDePagamento, { icone: ReactNode; cor: string }> = {
  pix: { icone: <PixIcon size={18} />, cor: "text-[#32BCAD]" },
  cash: { icone: <CashIcon size={18} />, cor: "text-emerald-600" },
  credit_card: { icone: <CreditCard size={18} />, cor: "text-indigo-600" },
  debit_card: { icone: <CreditCard size={18} />, cor: "text-sky-600" },
  boleto: { icone: <Barcode size={18} />, cor: "text-zinc-700" },
  transfer: { icone: <Landmark size={18} />, cor: "text-purple-600" },
  link: { icone: <Link2 size={18} />, cor: "text-[var(--ks-color-primary)]" },
};

export function IconeDaForma({ codigo, tamanho = 16 }: { codigo: string; tamanho?: number }) {
  const forma = ICONE_DA_FORMA[codigo as FormaDePagamento];
  if (!forma) return <CreditCard size={tamanho} />;
  return <span className={`inline-flex ${forma.cor}`}>{forma.icone}</span>;
}

type Props = {
  valor: CondicoesComerciais;
  aoMudar: (novo: CondicoesComerciais) => void;
  total: number;
  dataDeEntrega: string | null;
  desabilitado?: boolean;
  emEtapas: boolean;
  /* Os modelos da empresa: a lista, quem pode mexer nela e o que fazer
     quando a pessoa aplica um. Sem isto, o bloco não aparece. */
  modelos?: {
    lista: ModeloDeCondicoes[];
    podeGerenciar: boolean;
    aoUsar: (condicoes: CondicoesComerciais) => void;
    aoMudarLista: (modelos: ModeloDeCondicoes[]) => void;
  };
  /* Tira as condições da proposta (o orçamento volta a não ter nenhuma). */
  aoRemover?: () => void;
  /* A chave liga/desliga, no canto do primeiro cartão (modo em etapas): assim
     ela não vira um cartão só para ela. */
  chave?: ReactNode;
};

const SEGMENTO =
  "rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-60";
const SEGMENTO_ATIVO = "bg-[var(--ks-color-primary)] text-white shadow-sm";
const SEGMENTO_INATIVO = "text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)]";

function Segmentos<T extends string>({
  opcoes,
  valor,
  aoEscolher,
  desabilitado,
  rotulo,
}: {
  opcoes: ReadonlyArray<{ valor: T; nome: string }>;
  valor: T;
  aoEscolher: (valor: T) => void;
  desabilitado?: boolean;
  rotulo: string;
}) {
  return (
    <div role="group" aria-label={rotulo} className="inline-flex flex-wrap gap-0.5 rounded-xl border border-[var(--ks-color-border-subtle)] bg-white p-1">
      {opcoes.map((opcao) => (
        <button
          key={opcao.valor}
          type="button"
          disabled={desabilitado}
          aria-pressed={opcao.valor === valor}
          onClick={() => aoEscolher(opcao.valor)}
          className={`${SEGMENTO} ${opcao.valor === valor ? SEGMENTO_ATIVO : SEGMENTO_INATIVO}`}
        >
          {opcao.nome}
        </button>
      ))}
    </div>
  );
}

/* Contador de inteiros com menos e mais: parcelas, dias, porcentagem. Sem
   input numérico do navegador, que aceita "e" e vírgula e some no celular. */
function Contador({
  valor,
  minimo,
  maximo,
  passo = 1,
  aoMudar,
  desabilitado,
  rotulo,
  sufixo,
}: {
  valor: number;
  minimo: number;
  maximo: number;
  passo?: number;
  aoMudar: (valor: number) => void;
  desabilitado?: boolean;
  rotulo: string;
  sufixo?: string;
}) {
  const prender = (n: number) => Math.min(maximo, Math.max(minimo, n));
  const botao =
    "flex h-8 w-8 items-center justify-center rounded-lg text-[var(--ks-color-text-muted)] transition-colors hover:bg-[var(--ks-color-bg-soft)] hover:text-[var(--ks-color-text-primary)] disabled:cursor-not-allowed disabled:opacity-40";
  return (
    <div className="inline-flex items-center rounded-xl border border-[var(--ks-color-border-subtle)] bg-white p-0.5">
      <button type="button" className={botao} disabled={desabilitado || valor <= minimo} onClick={() => aoMudar(prender(valor - passo))} aria-label={`Menos ${rotulo}`}>
        <Minus size={14} />
      </button>
      <input
        type="text"
        inputMode="numeric"
        aria-label={rotulo}
        value={String(valor)}
        disabled={desabilitado}
        onChange={(evento) => {
          const digitos = evento.target.value.replace(/\D/g, "");
          if (!digitos) return;
          aoMudar(prender(Number(digitos)));
        }}
        className="w-12 bg-transparent text-center text-sm font-bold tabular-nums text-[var(--ks-color-text-primary)] outline-none"
      />
      {sufixo && <span className="pr-1 text-xs font-semibold text-[var(--ks-color-text-muted)]">{sufixo}</span>}
      <button type="button" className={botao} disabled={desabilitado || valor >= maximo} onClick={() => aoMudar(prender(valor + passo))} aria-label={`Mais ${rotulo}`}>
        <Plus size={14} />
      </button>
    </div>
  );
}

function Rotulo({ children, dica }: { children: ReactNode; dica?: string }) {
  return (
    <div className="mb-2 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
      <span className="text-sm font-semibold text-[var(--ks-color-text-primary)]">{children}</span>
      {dica && <span className="text-xs text-[var(--ks-color-text-muted)]">{dica}</span>}
    </div>
  );
}

const MOMENTOS_A_VISTA: ReadonlyArray<{ valor: Momento; nome: string }> = [
  { valor: "aprovacao", nome: "Na aprovação" },
  { valor: "entrega", nome: "Na entrega" },
  { valor: "retirada", nome: "Na retirada" },
  { valor: "faturado", nome: "Faturado" },
];

const MOMENTOS_DO_SALDO: ReadonlyArray<{ valor: Momento | "parcelado"; nome: string }> = [
  { valor: "entrega", nome: "Na entrega" },
  { valor: "retirada", nome: "Na retirada" },
  { valor: "faturado", nome: "Faturado" },
  { valor: "parcelado", nome: "Em parcelas" },
];

const PRIMEIRA_PARCELA: ReadonlyArray<{ valor: "aprovacao" | "entrega" | "dias"; nome: string }> = [
  { valor: "aprovacao", nome: "Na aprovação" },
  { valor: "entrega", nome: "Na entrega" },
  { valor: "dias", nome: "Em N dias" },
];

const ESQUEMAS: ReadonlyArray<{ valor: CondicoesComerciais["esquema"]; nome: string; descricao: string }> = [
  { valor: "a_vista", nome: "À vista", descricao: "Tudo de uma vez: na aprovação, na entrega ou faturado." },
  { valor: "entrada_e_saldo", nome: "Entrada + saldo", descricao: "Um sinal na aprovação e o restante depois." },
  { valor: "parcelado", nome: "Parcelado", descricao: "Parcelas iguais, no intervalo que você escolher." },
];

export function CondicoesComerciaisEditor({ valor, aoMudar, total, dataDeEntrega, desabilitado, emEtapas, modelos, aoRemover, chave }: Props) {
  const [entradaTexto, setEntradaTexto] = useState<string | null>(null);

  const mudar = (mudancas: Partial<CondicoesComerciais>) => aoMudar({ ...valor, ...mudancas });
  const aceitaCartaoDeCredito = valor.formas.includes("credit_card");
  const escritas = descreverCondicoes(valor, total);
  const parcelas = cronograma(valor, total, { entrega: dataDeEntrega });
  const algumaPresaNaAprovacao = parcelas.some((parcela) => parcela.base === "aprovacao");
  const entradaCalculada = valorDaEntrada(valor, total);

  const alternarForma = (codigo: FormaDePagamento) => {
    const formas = valor.formas.includes(codigo) ? valor.formas.filter((forma) => forma !== codigo) : [...valor.formas, codigo];
    mudar({ formas });
  };

  const classeDoCartao = emEtapas ? `${CARTAO_EM_ETAPAS} space-y-4` : "space-y-4";

  const secaoFormas = (
    <div className={classeDoCartao}>
      {emEtapas ? (
        <div className="flex items-start justify-between gap-4">
          <CabecalhoDoCartao icone="condicoes" titulo="Formas de pagamento" descricao="Marque todas as que valem para este orçamento. Elas saem na proposta." />
          {chave}
        </div>
      ) : (
        <Rotulo dica="Marque todas as que valem para este orçamento.">Formas de pagamento aceitas</Rotulo>
      )}
      <div className="grid grid-cols-2 gap-2 md:grid-cols-3 2xl:grid-cols-4">
        {FORMAS_DE_PAGAMENTO.map((forma) => {
          const marcada = valor.formas.includes(forma.codigo);
          return (
            <button
              key={forma.codigo}
              type="button"
              disabled={desabilitado}
              aria-pressed={marcada}
              onClick={() => alternarForma(forma.codigo)}
              className={`flex items-center gap-2.5 rounded-xl border px-3 py-2.5 text-left text-sm font-semibold transition-all disabled:cursor-not-allowed disabled:opacity-60 ${
                marcada
                  ? "border-[var(--ks-color-primary)] bg-[var(--ks-color-primary-soft)] text-[var(--ks-color-text-primary)] shadow-[0_0_0_3px_var(--ks-color-primary-soft)]"
                  : "border-[var(--ks-color-border-subtle)] bg-white text-[var(--ks-color-text-secondary)] hover:border-[var(--ks-n-200)]"
              }`}
            >
              <span className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${marcada ? "bg-white" : "bg-[var(--ks-color-bg-soft)]"}`}>
                <IconeDaForma codigo={forma.codigo} />
              </span>
              <span className="min-w-0 flex-1 text-[13px] leading-tight">{forma.nome}</span>
              <span
                aria-hidden="true"
                className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full border ${
                  marcada ? "border-[var(--ks-color-primary)] bg-[var(--ks-color-primary)] text-white" : "border-[var(--ks-color-border-subtle)] bg-white"
                }`}
              >
                {marcada && <Check size={12} strokeWidth={3} />}
              </span>
            </button>
          );
        })}
      </div>
      {aceitaCartaoDeCredito && (
        <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-inset)] px-3.5 py-3">
          <div className="flex items-center gap-3">
            <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-white text-indigo-600">
              <CreditCard size={18} />
            </span>
            <div>
              <div className="text-sm font-semibold text-[var(--ks-color-text-primary)]">Cartão de crédito em até</div>
              <div className="text-xs text-[var(--ks-color-text-muted)]">Como o cliente pode parcelar na maquininha ou no link.</div>
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <Contador
              rotulo="parcelas no cartão"
              valor={valor.cartao.parcelas}
              minimo={LIMITES.parcelasNoCartao.minimo}
              maximo={LIMITES.parcelasNoCartao.maximo}
              sufixo="x"
              desabilitado={desabilitado}
              aoMudar={(parcelas) => mudar({ cartao: { ...valor.cartao, parcelas } })}
            />
            <label className="inline-flex items-center gap-2 text-xs font-semibold text-[var(--ks-color-text-secondary)]">
              <Switch checked={valor.cartao.sem_juros} disabled={desabilitado} onCheckedChange={(sem_juros) => mudar({ cartao: { ...valor.cartao, sem_juros } })} />
              sem juros
            </label>
          </div>
        </div>
      )}
    </div>
  );

  const secaoCondicoes = (
    <div className={classeDoCartao}>
      {emEtapas ? (
        <CabecalhoDoCartao icone="condicoes" titulo="Como o cliente paga" descricao="Escolha o esquema e ajuste os prazos. O cronograma ao lado muda na hora." />
      ) : (
        <Rotulo>Como o cliente paga</Rotulo>
      )}

      <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
        {ESQUEMAS.map((esquema) => {
          const marcado = valor.esquema === esquema.valor;
          return (
            <button
              key={esquema.valor}
              type="button"
              disabled={desabilitado}
              aria-pressed={marcado}
              onClick={() => mudar({ esquema: esquema.valor })}
              className={`rounded-xl border px-3.5 py-3 text-left transition-all disabled:cursor-not-allowed disabled:opacity-60 ${
                marcado
                  ? "border-[var(--ks-color-primary)] bg-[var(--ks-color-primary-soft)] shadow-[0_0_0_3px_var(--ks-color-primary-soft)]"
                  : "border-[var(--ks-color-border-subtle)] bg-white hover:border-[var(--ks-n-200)]"
              }`}
            >
              <div className="flex items-center justify-between gap-2">
                <span className="text-sm font-bold text-[var(--ks-color-text-primary)]">{esquema.nome}</span>
                <span
                  aria-hidden="true"
                  className={`flex h-4 w-4 items-center justify-center rounded-full border-2 ${
                    marcado ? "border-[var(--ks-color-primary)]" : "border-[var(--ks-color-border-subtle)]"
                  }`}
                >
                  {marcado && <span className="h-2 w-2 rounded-full bg-[var(--ks-color-primary)]" />}
                </span>
              </div>
              <p className="mt-1 text-xs leading-snug text-[var(--ks-color-text-muted)]">{esquema.descricao}</p>
            </button>
          );
        })}
      </div>

      {valor.esquema === "a_vista" && (
        <div>
          <Rotulo>Quando o cliente paga</Rotulo>
          <div className="flex flex-wrap items-center gap-3">
            <Segmentos rotulo="Quando o cliente paga" opcoes={MOMENTOS_A_VISTA} valor={valor.a_vista.quando} desabilitado={desabilitado} aoEscolher={(quando) => mudar({ a_vista: { ...valor.a_vista, quando } })} />
            {valor.a_vista.quando === "faturado" && (
              <span className="inline-flex items-center gap-2 text-sm text-[var(--ks-color-text-secondary)]">
                <Contador rotulo="dias para pagar" valor={valor.a_vista.dias} minimo={LIMITES.dias.minimo} maximo={LIMITES.dias.maximo} desabilitado={desabilitado} aoMudar={(dias) => mudar({ a_vista: { ...valor.a_vista, dias } })} />
                dias após a entrega
              </span>
            )}
          </div>
        </div>
      )}

      {valor.esquema === "entrada_e_saldo" && (
        <div className="space-y-4">
          <div>
            <Rotulo dica="Paga na aprovação do orçamento.">Entrada</Rotulo>
            <div className="flex flex-wrap items-center gap-3">
              <Segmentos
                rotulo="Tipo da entrada"
                opcoes={[
                  { valor: "percentual", nome: "%" },
                  { valor: "valor", nome: "R$" },
                ]}
                valor={valor.entrada.tipo}
                desabilitado={desabilitado}
                aoEscolher={(tipo) => {
                  setEntradaTexto(null);
                  mudar({ entrada: tipo === "percentual" ? { tipo, valor: 50 } : { tipo, valor: entradaCalculada } });
                }}
              />
              {valor.entrada.tipo === "percentual" ? (
                <>
                  <Contador rotulo="porcentagem da entrada" valor={valor.entrada.valor} minimo={LIMITES.entradaPercentual.minimo} maximo={LIMITES.entradaPercentual.maximo} passo={5} sufixo="%" desabilitado={desabilitado} aoMudar={(v) => mudar({ entrada: { tipo: "percentual", valor: v } })} />
                  <div className="inline-flex gap-1">
                    {[30, 50, 70].map((atalho) => (
                      <button
                        key={atalho}
                        type="button"
                        disabled={desabilitado}
                        onClick={() => mudar({ entrada: { tipo: "percentual", valor: atalho } })}
                        className={`rounded-lg border px-2 py-1 text-xs font-bold transition-colors ${
                          valor.entrada.valor === atalho
                            ? "border-[var(--ks-color-primary)] bg-[var(--ks-color-primary-soft)] text-[var(--ks-color-primary)]"
                            : "border-[var(--ks-color-border-subtle)] bg-white text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)]"
                        }`}
                      >
                        {atalho}%
                      </button>
                    ))}
                  </div>
                  {total > 0 && <span className="text-sm font-semibold tabular-nums text-[var(--ks-color-text-secondary)]">= {formatMoney(entradaCalculada)}</span>}
                </>
              ) : (
                <div className="relative">
                  <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-[var(--ks-color-text-muted)]">R$</span>
                  <input
                    type="text"
                    inputMode="numeric"
                    aria-label="Valor da entrada"
                    disabled={desabilitado}
                    value={entradaTexto ?? formatMoneyInput(valor.entrada.valor)}
                    onChange={(evento) => {
                      const texto = formatMoneyInput(evento.target.value);
                      setEntradaTexto(texto);
                      mudar({ entrada: { tipo: "valor", valor: parseMoneyInput(texto) } });
                    }}
                    onBlur={() => setEntradaTexto(null)}
                    className="w-36 rounded-xl border border-[var(--ks-color-border-subtle)] bg-white py-2 pl-9 pr-3 text-right text-sm font-semibold tabular-nums focus:border-[var(--ks-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ks-color-primary)]/20"
                  />
                </div>
              )}
            </div>
          </div>
          <div>
            <Rotulo>Saldo</Rotulo>
            <div className="flex flex-wrap items-center gap-3">
              <Segmentos rotulo="Quando o saldo é pago" opcoes={MOMENTOS_DO_SALDO} valor={valor.saldo.quando} desabilitado={desabilitado} aoEscolher={(quando) => mudar({ saldo: { ...valor.saldo, quando } })} />
              {valor.saldo.quando === "faturado" && (
                <span className="inline-flex items-center gap-2 text-sm text-[var(--ks-color-text-secondary)]">
                  <Contador rotulo="dias para o saldo" valor={valor.saldo.dias} minimo={LIMITES.dias.minimo} maximo={LIMITES.dias.maximo} desabilitado={desabilitado} aoMudar={(dias) => mudar({ saldo: { ...valor.saldo, dias } })} />
                  dias após a entrega
                </span>
              )}
              {valor.saldo.quando === "parcelado" && (
                <span className="inline-flex flex-wrap items-center gap-2 text-sm text-[var(--ks-color-text-secondary)]">
                  <Contador rotulo="parcelas do saldo" valor={valor.saldo.parcelas} minimo={LIMITES.parcelas.minimo} maximo={LIMITES.parcelas.maximo} sufixo="x" desabilitado={desabilitado} aoMudar={(parcelas) => mudar({ saldo: { ...valor.saldo, parcelas } })} />
                  a cada
                  <Contador rotulo="intervalo entre as parcelas" valor={valor.saldo.intervalo_dias} minimo={LIMITES.intervaloDias.minimo} maximo={LIMITES.intervaloDias.maximo} passo={5} desabilitado={desabilitado} aoMudar={(intervalo_dias) => mudar({ saldo: { ...valor.saldo, intervalo_dias } })} />
                  dias, contando da aprovação
                </span>
              )}
            </div>
          </div>
        </div>
      )}

      {valor.esquema === "parcelado" && (
        <div className="space-y-4">
          <div>
            <Rotulo>Parcelas</Rotulo>
            <div className="flex flex-wrap items-center gap-2 text-sm text-[var(--ks-color-text-secondary)]">
              <Contador rotulo="quantidade de parcelas" valor={valor.parcelado.parcelas} minimo={LIMITES.parcelas.minimo} maximo={LIMITES.parcelas.maximo} sufixo="x" desabilitado={desabilitado} aoMudar={(parcelas) => mudar({ parcelado: { ...valor.parcelado, parcelas } })} />
              a cada
              <Contador rotulo="intervalo entre as parcelas" valor={valor.parcelado.intervalo_dias} minimo={LIMITES.intervaloDias.minimo} maximo={LIMITES.intervaloDias.maximo} passo={5} desabilitado={desabilitado} aoMudar={(intervalo_dias) => mudar({ parcelado: { ...valor.parcelado, intervalo_dias } })} />
              dias
            </div>
          </div>
          <div>
            <Rotulo>Primeira parcela</Rotulo>
            <div className="flex flex-wrap items-center gap-3">
              <Segmentos rotulo="Quando vence a primeira parcela" opcoes={PRIMEIRA_PARCELA} valor={valor.parcelado.primeira} desabilitado={desabilitado} aoEscolher={(primeira) => mudar({ parcelado: { ...valor.parcelado, primeira } })} />
              {valor.parcelado.primeira === "dias" && (
                <span className="inline-flex items-center gap-2 text-sm text-[var(--ks-color-text-secondary)]">
                  <Contador rotulo="dias até a primeira parcela" valor={valor.parcelado.dias} minimo={LIMITES.dias.minimo} maximo={LIMITES.dias.maximo} passo={5} desabilitado={desabilitado} aoMudar={(dias) => mudar({ parcelado: { ...valor.parcelado, dias } })} />
                  dias após a aprovação
                </span>
              )}
            </div>
          </div>
        </div>
      )}

      <div>
        <Rotulo dica="Saem na proposta, logo abaixo das condições.">Observações das condições</Rotulo>
        <textarea
          value={valor.observacoes}
          disabled={desabilitado}
          onChange={(evento) => mudar({ observacoes: evento.target.value })}
          rows={2}
          maxLength={1000}
          placeholder="Ex.: Preços válidos para pagamento no Pix. Boleto sujeito a análise de crédito."
          className="w-full rounded-xl border border-[var(--ks-color-border-subtle)] bg-white px-3 py-2.5 text-sm focus:border-[var(--ks-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ks-color-primary)]/20 disabled:bg-[var(--ks-color-bg-soft)] disabled:text-[var(--ks-color-text-muted)]"
        />
      </div>
    </div>
  );

  const secaoCronograma = (
    <div className={classeDoCartao}>
      {emEtapas ? (
        <CabecalhoDoCartao icone="prazos" titulo="Cronograma" descricao="É assim que as condições saem na proposta e no pedido." />
      ) : (
        <Rotulo dica="Como sai na proposta.">Cronograma</Rotulo>
      )}
      <div className="rounded-xl bg-[var(--ks-color-primary-soft)] px-3.5 py-3 text-sm leading-relaxed text-[var(--ks-color-text-primary)]">
        <p className="font-semibold">{escritas.pagamento}</p>
        {escritas.formas ? (
          <p className="text-[var(--ks-color-text-secondary)]">{escritas.formas}</p>
        ) : (
          <p className="text-[var(--ks-color-status-danger)]">Escolha ao menos uma forma de pagamento.</p>
        )}
      </div>
      <div className="-mx-2 overflow-x-auto px-2">
        <table className="w-full min-w-[420px] border-collapse text-sm">
          <thead>
            <tr className="text-[11px] font-bold uppercase tracking-[0.08em] text-[var(--ks-color-text-muted)]">
              <th className="pb-2 text-left font-bold">Parcela</th>
              <th className="pb-2 text-left font-bold">Quando</th>
              <th className="pb-2 text-left font-bold">Vencimento</th>
              <th className="pb-2 text-right font-bold">Valor</th>
            </tr>
          </thead>
          <tbody>
            {parcelas.map((parcela) => (
              <tr key={parcela.numero} className="border-t border-[var(--ks-color-border-subtle)]">
                <td className="py-2 pr-3 font-medium text-[var(--ks-color-text-primary)]">{parcela.rotulo}</td>
                <td className="py-2 pr-3 text-[var(--ks-color-text-secondary)]">{parcela.quando}</td>
                <td className="py-2 pr-3 tabular-nums text-[var(--ks-color-text-secondary)]">
                  {parcela.vencimento ? formatarDia(parcela.vencimento) : <span className="text-[var(--ks-color-text-soft)]">—</span>}
                </td>
                <td className="py-2 text-right font-semibold tabular-nums text-[var(--ks-color-text-primary)]">{formatMoney(parcela.valor)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="text-xs text-[var(--ks-color-text-muted)]">
        {total <= 0
          ? "Os valores aparecem assim que os itens tiverem preço."
          : algumaPresaNaAprovacao
            ? "As datas presas à aprovação são definidas quando o pedido for gerado."
            : !dataDeEntrega
              ? "Informe a data de entrega para o cronograma ganhar as datas."
              : "Datas calculadas pela data de entrega informada."}
      </p>
      {modelos && (
        <ModelosDeCondicoes
          modelos={modelos.lista}
          podeGerenciar={modelos.podeGerenciar}
          desabilitado={desabilitado}
          condicoesAtuais={valor}
          aoUsar={modelos.aoUsar}
          aoMudarLista={modelos.aoMudarLista}
        />
      )}
      {aoRemover && (
        <div className="flex justify-end border-t border-dashed border-[var(--ks-color-border-subtle)] pt-3">
          <button type="button" disabled={desabilitado} onClick={aoRemover} className="inline-flex items-center rounded-lg px-2.5 py-1.5 text-xs font-semibold text-[var(--ks-color-text-muted)] transition-colors hover:bg-[var(--ks-color-bg-soft)] hover:text-[var(--ks-color-status-danger)] disabled:opacity-50">
            Não incluir condições nesta proposta
          </button>
        </div>
      )}
    </div>
  );

  if (emEtapas) {
    return (
      <div className="flex flex-col gap-6">
        {secaoFormas}
        {secaoCondicoes}
        {secaoCronograma}
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {secaoFormas}
      <div className="h-px bg-[var(--ks-color-border-subtle)]" />
      {secaoCondicoes}
      <div className="h-px bg-[var(--ks-color-border-subtle)]" />
      {secaoCronograma}
    </div>
  );
}

/* Só o interruptor, para entrar no canto de um cartão que já existe. */
export function InterruptorDasCondicoes({ ligada, aoMudar, desabilitado }: { ligada: boolean; aoMudar: (ligada: boolean) => void; desabilitado?: boolean }) {
  return (
    <Switch
      checked={ligada}
      disabled={desabilitado}
      onCheckedChange={aoMudar}
      aria-label={ligada ? "Tirar as condições de pagamento da proposta" : "Incluir condições de pagamento na proposta"}
      title={ligada ? "Tirar as condições de pagamento da proposta" : "Incluir condições de pagamento na proposta"}
    />
  );
}

/*
 * A chave "condições de pagamento na proposta". É a pessoa que decide se o
 * orçamento leva forma e prazo de pagamento: desligada, a proposta sai sem
 * esse bloco (payment_terms = null) e o pedido nasce sem condições.
 */
export function ChaveDasCondicoes({
  ligada,
  aoMudar,
  emEtapas,
  desabilitado,
}: {
  ligada: boolean;
  aoMudar: (ligada: boolean) => void;
  emEtapas: boolean;
  desabilitado?: boolean;
}) {
  const titulo = "Condições de pagamento na proposta";
  const descricao = ligada
    ? "Formas e prazos saem na proposta e seguem para o pedido."
    : "Desligado: a proposta sai sem forma nem prazo de pagamento. Ligue para escolher."
  const chave = <InterruptorDasCondicoes ligada={ligada} aoMudar={aoMudar} desabilitado={desabilitado} />;
  if (emEtapas) {
    return (
      <div className={`${CARTAO_EM_ETAPAS} flex items-center justify-between gap-4`}>
        <CabecalhoDoCartao icone="condicoes" titulo={titulo} descricao={descricao} />
        {chave}
      </div>
    );
  }
  return (
    <div className="flex items-center justify-between gap-4">
      <div>
        <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">{titulo}</h2>
        <p className="text-sm text-[var(--ks-color-text-muted)]">{descricao}</p>
      </div>
      {chave}
    </div>
  );
}

/* As condições como saem na proposta: frase, formas e o cronograma. Serve
   ao PDF do orçamento e à impressão do pedido; o link público tem a versão
   dele no app público. */
export function CondicoesParaImpressao({
  condicoes,
  total,
  datas,
  titulo = "Condições de pagamento",
  moldura = true,
}: {
  condicoes: CondicoesComerciais;
  total: number;
  datas: { aprovacao?: string | null; entrega?: string | null };
  titulo?: string;
  /* Sem moldura o bloco entra numa folha que já tem título próprio. */
  moldura?: boolean;
}) {
  const escritas = descreverCondicoes(condicoes, total);
  const parcelas = cronograma(condicoes, total, datas);
  const mostraTabela = parcelas.length > 1 || parcelas.some((parcela) => parcela.vencimento);
  /* Sem total (Lista de Preço) a coluna de valores some. */
  const mostraValores = total > 0;
  return (
    <div className={moldura ? "rounded-lg border border-zinc-200 p-3" : undefined}>
      {moldura && <div className="text-sm font-semibold text-zinc-900">{titulo}</div>}
      <div className={`text-[12px] text-zinc-800 ${moldura ? "mt-1" : ""}`}>{escritas.pagamento}</div>
      {escritas.formas && <div className="text-[12px] text-zinc-700">Formas de pagamento: {escritas.formas}</div>}
      {mostraTabela && (
        <table className="mt-2 w-full text-[11px]">
          <thead>
            <tr className="border-b border-zinc-300 text-left text-[9.5px] font-bold uppercase tracking-[0.12em] text-zinc-500">
              <th className="py-1 pr-2 font-bold">Parcela</th>
              <th className="py-1 pr-2 font-bold">Quando</th>
              <th className="py-1 pr-2 font-bold">Vencimento</th>
              {mostraValores && <th className="py-1 text-right font-bold">Valor</th>}
            </tr>
          </thead>
          <tbody>
            {parcelas.map((parcela) => (
              <tr key={parcela.numero} className="border-b border-zinc-100">
                <td className="py-1 pr-2 font-medium text-zinc-900">{parcela.rotulo}</td>
                <td className="py-1 pr-2 text-zinc-700">{parcela.quando}</td>
                <td className="py-1 pr-2 text-zinc-700">{parcela.vencimento ? formatarDia(parcela.vencimento) : "—"}</td>
                {mostraValores && <td className="py-1 text-right font-semibold text-zinc-900 tabular-nums">{formatMoney(parcela.valor)}</td>}
              </tr>
            ))}
          </tbody>
        </table>
      )}
      {escritas.observacoes && <div className="mt-2 whitespace-pre-wrap text-[11px] text-zinc-600">{escritas.observacoes}</div>}
    </div>
  );
}