"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  ArrowLeft,
  BarChart3,
  ExternalLink,
  Gift,
  KeyRound,
  Loader2,
  PackageOpen,
  Plus,
  Save,
  ShieldCheck,
  Store,
  Trash2,
  Truck,
  X,
} from "lucide-react";

import ImageUpload from "@/components/image-upload";
import { AreaFechada, CarregandoArea, ErroDaArea, FalhaDaArea, moeda, pedirDigitais } from "@/components/digitais/comum";
import { Aviso } from "@/components/ui/aviso";
import { Button } from "@/components/ui/button";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import { EntradaDecimal } from "@/components/ui/campo-decimal";
import {
  AreaDeTexto,
  EscolhaDeAjuste,
  FolhaDeAjustes,
  LinhaDeAjuste,
  SecaoDeAjustes,
  type ItemDoIndice,
} from "@/components/ui/folha-de-ajustes";
import { Input } from "@/components/ui/input";
import type { CampoDoComprador, ConfigDigital } from "@/lib/digitais/produto";

import { CamposDoComprador } from "./campos-do-comprador";
import { CodigosDoProduto } from "./codigos";
import { EntregaveisDoProduto, type Entregavel } from "./entregaveis";

type Resposta = {
  podeEditar: boolean;
  produto: {
    id: string;
    nome: string;
    descricao: string;
    preco: number;
    imagem: string | null;
    naLoja: boolean;
    tipo: ConfigDigital["tipo"];
    rotuloDoTipo: string;
    config: ConfigDigital;
    vendas: number;
    enderecoNaLoja: string | null;
    campos: CampoDoComprador[];
  };
  entregaveis: Entregavel[];
  numeros: { pedidos30: number; receita30: number; comAcesso: number; downloads: number };
};

type Ficha = {
  nome: string;
  descricao: string;
  preco: number;
  imagem: string | null;
  config: ConfigDigital;
  /* Sob encomenda: o que o comprador preenche na compra. */
  campos: CampoDoComprador[];
};

/* A data da pré-venda na tela (dia de Brasília) e de volta (meia-noite de Brasília). */
function diaDaPreVenda(iso: string | null | undefined): string {
  if (!iso) return "";
  try {
    return new Date(iso).toLocaleDateString("en-CA", { timeZone: "America/Sao_Paulo" });
  } catch {
    return "";
  }
}

function preVendaDoDia(dia: string): { em: string } | null {
  return /^\d{4}-\d{2}-\d{2}$/.test(dia) ? { em: `${dia}T03:00:00.000Z` } : null;
}

function amanha(): string {
  return new Date(Date.now() + 36 * 60 * 60 * 1000).toLocaleDateString("en-CA", { timeZone: "America/Sao_Paulo" });
}

type PrazoDoProduto = "loja" | "sempre" | "dias";

const LICENCAS: Array<{ valor: "nenhuma" | "pessoal" | "comercial" | "livre" | "texto"; titulo: string; texto: string }> = [
  { valor: "nenhuma", titulo: "Sem licença especial", texto: "A página não fala de licença." },
  { valor: "pessoal", titulo: "Uso pessoal", texto: "Para uso próprio. Não pode vender o que fizer com o arquivo." },
  { valor: "comercial", titulo: "Uso comercial", texto: "Pode vender o que fizer com o arquivo, mas não o arquivo em si." },
  { valor: "livre", titulo: "Uso livre", texto: "Pode usar como quiser, inclusive para vender o que fizer." },
  { valor: "texto", titulo: "Texto próprio", texto: "Você escreve as regras de uso." },
];

/* O retrato do que a pessoa edita, sem "o que recebe" (quem monta é o
   servidor, a partir dos itens): é com ele que se sabe se há algo por salvar. */
function retrato(ficha: Ficha) {
  return JSON.stringify({ ...ficha, config: { ...ficha.config, recebe: [] } });
}

function fichaDe(resposta: Resposta): Ficha {
  return {
    nome: resposta.produto.nome,
    descricao: resposta.produto.descricao,
    preco: resposta.produto.preco,
    imagem: resposta.produto.imagem,
    config: resposta.produto.config,
    campos: resposta.produto.campos ?? [],
  };
}

export default function EditorDoProdutoDigital({ id }: { id: string }) {
  const router = useRouter();
  const [dados, setDados] = useState<Resposta | null>(null);
  const [ficha, setFicha] = useState<Ficha | null>(null);
  const [salva, setSalva] = useState("");
  const [erro, setErro] = useState<Error | null>(null);
  const [salvando, setSalvando] = useState(false);
  const [publicando, setPublicando] = useState(false);
  const [aviso, setAviso] = useState<{ tom: "bom" | "ruim" | "atencao"; texto: string; faltas?: string[] } | null>(null);
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const [ocupado, setOcupado] = useState(false);
  const [novaFuncao, setNovaFuncao] = useState("");
  /* Já carregou uma vez? Depois disso, recarregar (ao mexer nos itens) não
     apaga o que a pessoa está digitando: só atualiza "o que recebe". */
  const carregouRef = useRef(false);

  const carregar = useCallback(
    () =>
      pedirDigitais<Resposta>(`/api/digitais/produtos/${id}`)
        .then((resposta) => {
          /* Curso tem editor próprio (módulos e aulas). */
          if (resposta.produto.tipo === "curso") {
            router.replace(`/dashboard/digitais/cursos/${id}`);
            return;
          }
          setDados(resposta);
          setErro(null);
          if (!carregouRef.current) {
            carregouRef.current = true;
            const nova = fichaDe(resposta);
            setFicha(nova);
            setSalva(retrato(nova));
            return;
          }
          setFicha((atual) => (atual ? { ...atual, config: { ...atual.config, recebe: resposta.produto.config.recebe } } : fichaDe(resposta)));
        })
        .catch((e: unknown) => setErro(e instanceof Error ? e : new Error("Não foi possível carregar o produto."))),
    [id, router]
  );

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

  const mudou = ficha !== null && retrato(ficha) !== salva;

  const mudarConfig = (parte: Partial<ConfigDigital>) =>
    setFicha((atual) => (atual ? { ...atual, config: { ...atual.config, ...parte } } : atual));

  const salvar = async (): Promise<boolean> => {
    if (!ficha) return false;
    setSalvando(true);
    try {
      await pedirDigitais(`/api/digitais/produtos/${id}`, {
        method: "PUT",
        body: JSON.stringify({
          nome: ficha.nome,
          descricao: ficha.descricao,
          preco: ficha.preco,
          imagem: ficha.imagem,
          config: ficha.config,
          ...(ficha.config.tipo === "arquivos" || ficha.config.tipo === "link" ? { campos: ficha.campos } : {}),
        }),
      });
      setSalva(retrato(ficha));
      setAviso({ tom: "bom", texto: "Produto salvo." });
      /* Mudar o jeito de entregar cria (ou desliga) o item "Arquivo feito para
         você": a lista do que o comprador recebe se atualiza, sem mexer no que
         está sendo digitado. */
      void carregar();
      return true;
    } catch (e) {
      setAviso({ tom: "ruim", texto: e instanceof Error ? e.message : "Não foi possível salvar." });
      return false;
    } finally {
      setSalvando(false);
    }
  };

  const publicar = async (naLoja: boolean) => {
    if (mudou && !(await salvar())) return;
    setPublicando(true);
    try {
      const resposta = await fetch(`/api/digitais/produtos/${id}`, {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ naLoja }),
      });
      const corpo = (await resposta.json().catch(() => null)) as { error?: string; faltas?: string[] } | null;
      if (!resposta.ok) {
        setAviso({ tom: "atencao", texto: corpo?.error || "Não foi possível publicar.", faltas: corpo?.faltas });
        return;
      }
      setAviso({ tom: "bom", texto: naLoja ? "Pronto: o produto está na loja." : "O produto saiu da loja. Quem comprou continua com acesso." });
      await carregar();
    } finally {
      setPublicando(false);
    }
  };

  const pedirParaApagar = () => {
    setConfirmacao({
      titulo: "Apagar este produto?",
      texto: "Some da área de produtos digitais. Se alguém já comprou, ele não pode ser apagado: tire da loja.",
      confirmar: "Apagar",
      cancelar: "Voltar",
      tom: "perigo",
      aoConfirmar: async () => {
        setOcupado(true);
        try {
          await pedirDigitais(`/api/digitais/produtos/${id}`, { method: "DELETE" });
          router.push("/dashboard/digitais/produtos");
        } catch (e) {
          setAviso({ tom: "ruim", texto: e instanceof Error ? e.message : "Não foi possível apagar." });
          setConfirmacao(null);
        } finally {
          setOcupado(false);
        }
      },
    });
  };

  const indice: ItemDoIndice[] = useMemo(() => {
    if (!dados || !ficha) return [];
    const prazo = ficha.config.acesso;
    const tipo = ficha.config.tipo;
    const visiveis = dados.entregaveis.filter((e) => e.ativo || !["codigos", "encomenda", "curso"].includes(e.tipo));
    return [
      {
        id: "pd-recebe",
        titulo: "O que recebe",
        resumo: visiveis.length ? `${visiveis.length} ${visiveis.length === 1 ? "item" : "itens"}` : "Nada ainda",
        Icone: PackageOpen,
      },
      ...(tipo === "codigo" ? [{ id: "pd-codigos", titulo: "Códigos", resumo: `aviso com ${ficha.config.avisarCodigosCom}`, Icone: KeyRound }] : []),
      ...(tipo === "arquivos" || tipo === "link"
        ? [
            {
              id: "pd-entrega",
              titulo: "Como entrega",
              resumo: ficha.config.entrega.modo === "encomenda" ? `sob encomenda · ${ficha.config.entrega.prazoDias} dias úteis` : "na hora, sozinho",
              Icone: Truck,
            },
          ]
        : []),
      {
        id: "pd-regras",
        titulo: "Regras de acesso",
        resumo: ficha.config.preVenda ? `pré-venda ${new Date(ficha.config.preVenda.em).toLocaleDateString("pt-BR", { timeZone: "America/Sao_Paulo" })}` : ficha.config.limiteDeDownloads ? `${ficha.config.limiteDeDownloads} downloads` : "sem limite, com freio",
        Icone: ShieldCheck,
      },
      { id: "pd-pagina", titulo: "Página na loja", resumo: ficha.imagem ? "Com capa" : "Sem capa", Icone: Store },
      {
        id: "pd-preco",
        titulo: "Preço e acesso",
        resumo: `${ficha.preco > 0 ? moeda(ficha.preco) : "Grátis"} · ${
          prazo === null ? "prazo da loja" : prazo.prazoDias === null ? "para sempre" : `${prazo.prazoDias} dias`
        }`,
        Icone: Gift,
      },
      { id: "pd-numeros", titulo: "Números", resumo: `${dados.numeros.pedidos30} vendas em 30 dias`, Icone: BarChart3 },
    ];
  }, [dados, ficha]);

  if (erro instanceof ErroDaArea && erro.status === 403) return <AreaFechada erro={erro} />;
  if (erro && !dados) return <FalhaDaArea erro={erro} aoTentarDeNovo={() => void carregar()} />;
  if (!dados || !ficha) return <CarregandoArea />;

  const podeEditar = dados.podeEditar;
  const { produto, numeros } = dados;
  const prazoEscolhido: PrazoDoProduto = ficha.config.acesso === null ? "loja" : ficha.config.acesso.prazoDias === null ? "sempre" : "dias";
  const licencaEscolhida = ficha.config.licenca?.tipo ?? "nenhuma";

  return (
    <div className="space-y-5 pb-4">
      <div className="flex flex-wrap items-center gap-3">
        <Link href="/dashboard/digitais/produtos" className="inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)]">
          <ArrowLeft size={16} />
          Produtos digitais
        </Link>
      </div>

      <header className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div className="min-w-0">
          <p className="ks-page-eyebrow">{produto.rotuloDoTipo}</p>
          <h1 className="ks-page-title flex flex-wrap items-center gap-3">
            <span className="min-w-0 break-words">{ficha.nome || "Sem nome"}</span>
            <span
              className={`rounded-full px-2.5 py-1 text-xs font-bold ${
                produto.naLoja ? "bg-[color:rgba(14,158,112,0.12)] text-[var(--ks-emerald)]" : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)]"
              }`}
            >
              {produto.naLoja ? "Na loja" : "Rascunho"}
            </span>
          </h1>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {produto.naLoja && produto.enderecoNaLoja ? (
            <a href={produto.enderecoNaLoja} target="_blank" rel="noreferrer" className="ks-button ks-button-soft">
              <ExternalLink size={16} />
              Ver na loja
            </a>
          ) : null}
          {podeEditar && produto.vendas === 0 ? (
            <button type="button" onClick={pedirParaApagar} className="ks-button ks-button-ghost" aria-label="Apagar produto">
              <Trash2 size={16} />
            </button>
          ) : null}
        </div>
      </header>

      {aviso ? (
        <Aviso tom={aviso.tom} aoFechar={() => setAviso(null)}>
          {aviso.texto}
          {aviso.faltas?.length ? (
            <ul className="mt-1 list-disc pl-5">
              {aviso.faltas.map((falta) => (
                <li key={falta}>{falta}</li>
              ))}
            </ul>
          ) : null}
        </Aviso>
      ) : null}

      <FolhaDeAjustes indice={indice} rotuloDoIndice="Neste produto">
        <SecaoDeAjustes
          id="pd-recebe"
          Icone={PackageOpen}
          titulo="O que o comprador recebe"
          texto="Chega na hora, assim que o pagamento é aprovado: na tela, no e-mail e na área de membros."
        >
          <EntregaveisDoProduto
            produtoId={id}
            entregaveis={dados.entregaveis}
            podeEditar={podeEditar}
            aoMudar={carregar}
            aoAvisar={(tom, texto) => setAviso({ tom, texto })}
          />
        </SecaoDeAjustes>

        {ficha.config.tipo === "codigo" ? (
          <SecaoDeAjustes
            id="pd-codigos"
            Icone={KeyRound}
            titulo="Códigos"
            texto="Cada compra leva um código da lista, sem repetir. Sem código livre, a loja não vende este produto."
          >
            <CodigosDoProduto produtoId={id} podeEditar={podeEditar} aoAvisar={(tom, texto) => setAviso({ tom, texto })} />
            <LinhaDeAjuste titulo="Avisar quando restarem" texto="O produto fica marcado como Acabando e aparece na Visão geral.">
              <div className="max-w-[220px]">
                <EntradaDecimal
                  aria-label="Avisar quando restarem"
                  casas={0}
                  valor={ficha.config.avisarCodigosCom}
                  disabled={!podeEditar}
                  aoMudar={(n) => mudarConfig({ avisarCodigosCom: Math.max(0, Math.min(1000, Math.round(n || 0))) })}
                  suffix="códigos"
                />
              </div>
            </LinhaDeAjuste>
          </SecaoDeAjustes>
        ) : null}

        {ficha.config.tipo === "arquivos" || ficha.config.tipo === "link" ? (
          <SecaoDeAjustes id="pd-entrega" Icone={Truck} titulo="Como entrega" texto="Quando o comprador recebe depois de pagar.">
            <LinhaDeAjuste titulo="Jeito de entregar">
              <EscolhaDeAjuste
                rotulo="Jeito de entregar"
                valor={ficha.config.entrega.modo}
                aoEscolher={(valor) => {
                  if (!podeEditar) return;
                  mudarConfig({ entrega: { ...ficha.config.entrega, modo: valor } });
                }}
                opcoes={[
                  {
                    valor: "na_hora",
                    titulo: "Na hora, sozinho",
                    texto: "O cliente paga e recebe na mesma hora: na tela, no e-mail e na área de membros.",
                  },
                  {
                    valor: "encomenda",
                    titulo: "Sob encomenda",
                    texto: "Você produz depois da compra (convite com nome, arte personalizada) e envia o arquivo final pelo pedido. A entrega sai sozinha quando você anexa.",
                  },
                ]}
              />
            </LinhaDeAjuste>
            {ficha.config.entrega.modo === "encomenda" ? (
              <>
                <LinhaDeAjuste titulo="Prazo para entregar" texto="Em dias úteis, contando do pagamento. O comprador vê a data na compra.">
                  <div className="max-w-[220px]">
                    <EntradaDecimal
                      aria-label="Prazo para entregar"
                      casas={0}
                      valor={ficha.config.entrega.prazoDias}
                      disabled={!podeEditar}
                      aoMudar={(n) => mudarConfig({ entrega: { ...ficha.config.entrega, prazoDias: Math.max(0, Math.min(90, Math.round(n || 0))) } })}
                      suffix="dias úteis"
                    />
                  </div>
                </LinhaDeAjuste>
                <LinhaDeAjuste titulo="O que o comprador informa" texto="Perguntas que aparecem na compra (nome no convite, data da festa...)." largo>
                  <CamposDoComprador campos={ficha.campos} podeEditar={podeEditar} aoMudar={(campos) => setFicha({ ...ficha, campos })} />
                </LinhaDeAjuste>
              </>
            ) : null}
          </SecaoDeAjustes>
        ) : null}

        <SecaoDeAjustes id="pd-regras" Icone={ShieldCheck} titulo="Regras de acesso" texto="Valem para quem comprar daqui para a frente.">
          <LinhaDeAjuste titulo="Quantas vezes pode baixar" texto="Sem limite é o que o comprador espera; o freio pausa o acesso usado em muitos lugares e avisa você.">
            <EscolhaDeAjuste
              rotulo="Quantas vezes pode baixar"
              valor={ficha.config.limiteDeDownloads ? "limitar" : "livre"}
              aoEscolher={(valor) => {
                if (!podeEditar) return;
                mudarConfig({ limiteDeDownloads: valor === "livre" ? null : ficha.config.limiteDeDownloads ?? 5 });
              }}
              opcoes={[
                { valor: "livre", titulo: "Sem limite, com freio contra compartilhamento", texto: "Baixa quantas vezes precisar." },
                { valor: "limitar", titulo: "Limitar por arquivo", texto: "Depois disso, o botão de baixar some e a pessoa fala com a loja." },
              ]}
            />
            {ficha.config.limiteDeDownloads ? (
              <div className="mt-2 max-w-[220px]">
                <EntradaDecimal
                  aria-label="Vezes por arquivo"
                  casas={0}
                  valor={ficha.config.limiteDeDownloads}
                  disabled={!podeEditar}
                  aoMudar={(n) => mudarConfig({ limiteDeDownloads: Math.max(1, Math.min(1000, Math.round(n || 1))) })}
                  suffix="vezes"
                />
              </div>
            ) : null}
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Marcar o PDF com o comprador" texto="Nome, e-mail e número do pedido no rodapé de cada página. Desencoraja quem repassa o arquivo.">
            <EscolhaDeAjuste
              rotulo="Marcar o PDF"
              valor={ficha.config.marcaNoPdf === null ? "loja" : ficha.config.marcaNoPdf ? "sim" : "nao"}
              aoEscolher={(valor) => {
                if (!podeEditar) return;
                mudarConfig({ marcaNoPdf: valor === "loja" ? null : valor === "sim" });
              }}
              opcoes={[
                { valor: "loja", titulo: "Igual às Configurações", texto: "Segue a marca d'água de Configurações." },
                { valor: "sim", titulo: "Marcar", texto: "Todo PDF deste produto sai com o comprador no rodapé." },
                { valor: "nao", titulo: "Não marcar", texto: "Melhor para arquivo de imprimir." },
              ]}
            />
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Pré-venda" texto="Vende hoje e entrega sozinho na data marcada, com e-mail para quem comprou.">
            <EscolhaDeAjuste
              rotulo="Pré-venda"
              valor={ficha.config.preVenda ? "data" : "nao"}
              aoEscolher={(valor) => {
                if (!podeEditar) return;
                mudarConfig({ preVenda: valor === "nao" ? null : ficha.config.preVenda ?? preVendaDoDia(amanha()) });
              }}
              opcoes={[
                { valor: "nao", titulo: "Desligada", texto: "Quem compra recebe na hora." },
                { valor: "data", titulo: "Entregar numa data", texto: "O acesso abre sozinho no dia marcado." },
              ]}
            />
            {ficha.config.preVenda ? (
              <div className="mt-2 max-w-[220px]">
                <Input
                  type="date"
                  aria-label="Dia da entrega"
                  value={diaDaPreVenda(ficha.config.preVenda.em)}
                  min={amanha()}
                  disabled={!podeEditar}
                  onChange={(e) => {
                    const nova = preVendaDoDia(e.target.value);
                    if (nova) mudarConfig({ preVenda: nova });
                  }}
                />
              </div>
            ) : null}
          </LinhaDeAjuste>
        </SecaoDeAjustes>

        <SecaoDeAjustes id="pd-pagina" Icone={Store} titulo="Página na loja" texto="O que quem visita a loja vê antes de comprar.">
          <LinhaDeAjuste titulo="Nome" htmlFor="pd-nome">
            <Input id="pd-nome" value={ficha.nome} maxLength={200} disabled={!podeEditar} onChange={(e) => setFicha({ ...ficha, nome: e.target.value })} />
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Capa" texto="Quadrada. É ela que aparece na vitrine e nos e-mails." largo>
            <div className="max-w-xs">
              <ImageUpload
                bucket="products"
                folder="digitais/capas"
                value={ficha.imagem ?? ""}
                onChange={(url) => setFicha({ ...ficha, imagem: url || null })}
                disabled={!podeEditar}
                enableCrop
                cropAspect={1}
              />
            </div>
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Resumo" texto="Uma frase embaixo do nome." htmlFor="pd-resumo">
            <Input
              id="pd-resumo"
              value={ficha.config.resumo ?? ""}
              maxLength={160}
              disabled={!podeEditar}
              placeholder="Ex.: 32 peças para imprimir em casa ou na gráfica"
              onChange={(e) => mudarConfig({ resumo: e.target.value || null })}
            />
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Descrição" texto="Conte o que é, para quem é e como usar." htmlFor="pd-descricao">
            <AreaDeTexto
              id="pd-descricao"
              value={ficha.descricao}
              rows={6}
              maxLength={20000}
              disabled={!podeEditar}
              onChange={(e) => setFicha({ ...ficha, descricao: e.target.value })}
            />
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Funciona com" texto="Programas, aparelhos ou impressoras. Aparecem como selos na página.">
            <div className="flex flex-wrap items-center gap-1.5">
              {ficha.config.funcionaCom.map((item) => (
                <span key={item} className="inline-flex items-center gap-1 rounded-full bg-[var(--ks-color-bg-inset)] py-1 pl-3 pr-1.5 text-xs font-semibold text-[var(--ks-color-text-secondary)]">
                  {item}
                  {podeEditar ? (
                    <button
                      type="button"
                      aria-label={`Tirar ${item}`}
                      onClick={() => mudarConfig({ funcionaCom: ficha.config.funcionaCom.filter((x) => x !== item) })}
                      className="flex h-5 w-5 items-center justify-center rounded-full hover:bg-white"
                    >
                      <X size={12} />
                    </button>
                  ) : null}
                </span>
              ))}
              {podeEditar && ficha.config.funcionaCom.length < 12 ? (
                <form
                  className="flex items-center gap-1.5"
                  onSubmit={(evento) => {
                    evento.preventDefault();
                    const valor = novaFuncao.trim().slice(0, 40);
                    if (!valor || ficha.config.funcionaCom.includes(valor)) return;
                    mudarConfig({ funcionaCom: [...ficha.config.funcionaCom, valor] });
                    setNovaFuncao("");
                  }}
                >
                  <input
                    value={novaFuncao}
                    onChange={(e) => setNovaFuncao(e.target.value)}
                    placeholder="Ex.: Canva"
                    aria-label="Funciona com"
                    className="ks-field w-36 text-xs"
                    style={{ padding: "6px 10px", borderRadius: 999 }}
                  />
                  <button type="submit" className="ks-button ks-button-soft ks-button-sm" aria-label="Acrescentar">
                    <Plus size={14} />
                  </button>
                </form>
              ) : null}
            </div>
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Licença de uso" texto="O que o comprador pode fazer com o que recebe.">
            <EscolhaDeAjuste
              rotulo="Licença de uso"
              valor={licencaEscolhida}
              aoEscolher={(valor) => {
                if (!podeEditar) return;
                mudarConfig({ licenca: valor === "nenhuma" ? null : { tipo: valor, texto: ficha.config.licenca?.texto ?? null } });
              }}
              opcoes={LICENCAS}
            />
            {licencaEscolhida === "texto" ? (
              <AreaDeTexto
                className="mt-2"
                value={ficha.config.licenca?.texto ?? ""}
                rows={4}
                maxLength={2000}
                disabled={!podeEditar}
                placeholder="Ex.: Pode imprimir quantas vezes quiser para a sua festa. Não pode repassar o arquivo."
                onChange={(e) => mudarConfig({ licenca: { tipo: "texto", texto: e.target.value || null } })}
              />
            ) : null}
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Perguntas frequentes" texto="Respondem as dúvidas antes da compra." largo>
            <div className="space-y-2">
              {ficha.config.perguntas.map((item, indice) => (
                <div key={indice} className="grid gap-2 rounded-2xl bg-[var(--ks-color-bg-subtle)] p-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)_auto]">
                  <Input
                    aria-label="Pergunta"
                    placeholder="Pergunta"
                    value={item.pergunta}
                    maxLength={200}
                    disabled={!podeEditar}
                    onChange={(e) =>
                      mudarConfig({ perguntas: ficha.config.perguntas.map((p, i) => (i === indice ? { ...p, pergunta: e.target.value } : p)) })
                    }
                  />
                  <Input
                    aria-label="Resposta"
                    placeholder="Resposta"
                    value={item.resposta}
                    maxLength={1200}
                    disabled={!podeEditar}
                    onChange={(e) =>
                      mudarConfig({ perguntas: ficha.config.perguntas.map((p, i) => (i === indice ? { ...p, resposta: e.target.value } : p)) })
                    }
                  />
                  {podeEditar ? (
                    <button
                      type="button"
                      aria-label="Tirar pergunta"
                      onClick={() => mudarConfig({ perguntas: ficha.config.perguntas.filter((_, i) => i !== indice) })}
                      className="flex h-10 w-10 items-center justify-center rounded-full text-[var(--ks-color-text-soft)] hover:bg-white"
                    >
                      <Trash2 size={15} />
                    </button>
                  ) : null}
                </div>
              ))}
              {podeEditar && ficha.config.perguntas.length < 12 ? (
                <button
                  type="button"
                  className="ks-button ks-button-soft ks-button-sm"
                  onClick={() => mudarConfig({ perguntas: [...ficha.config.perguntas, { pergunta: "", resposta: "" }] })}
                >
                  <Plus size={14} />
                  Pergunta
                </button>
              ) : null}
            </div>
          </LinhaDeAjuste>
        </SecaoDeAjustes>

        <SecaoDeAjustes id="pd-preco" Icone={Gift} titulo="Preço e acesso" texto="Pagamento único. Com preço zero, o produto vira grátis e pede só o contato.">
          <LinhaDeAjuste titulo="Preço">
            <div className="max-w-[220px]">
              <EntradaDecimal
                aria-label="Preço"
                casas={2}
                valor={ficha.preco}
                disabled={!podeEditar}
                aoMudar={(n) => setFicha({ ...ficha, preco: Math.max(0, Math.round((n || 0) * 100) / 100) })}
                icon={<span className="text-sm font-semibold text-[var(--ks-color-text-muted)]">R$</span>}
              />
            </div>
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Por quanto tempo o comprador acessa">
            <EscolhaDeAjuste
              rotulo="Prazo de acesso"
              valor={prazoEscolhido}
              aoEscolher={(valor) => {
                if (!podeEditar) return;
                if (valor === "loja") mudarConfig({ acesso: null });
                else if (valor === "sempre") mudarConfig({ acesso: { prazoDias: null } });
                else mudarConfig({ acesso: { prazoDias: ficha.config.acesso?.prazoDias ?? 365 } });
              }}
              opcoes={[
                { valor: "loja", titulo: "Igual às configurações da loja", texto: "Segue o prazo de Configurações." },
                { valor: "sempre", titulo: "Para sempre", texto: "Quem comprou acessa quando quiser." },
                { valor: "dias", titulo: "Um prazo em dias", texto: "Depois disso, o acesso fecha sozinho." },
              ]}
            />
            {prazoEscolhido === "dias" ? (
              <div className="mt-2 max-w-[220px]">
                <EntradaDecimal
                  aria-label="Dias de acesso"
                  casas={0}
                  valor={ficha.config.acesso?.prazoDias ?? 365}
                  disabled={!podeEditar}
                  aoMudar={(n) => mudarConfig({ acesso: { prazoDias: Math.max(1, Math.min(3650, Math.round(n || 1))) } })}
                  suffix="dias"
                />
              </div>
            ) : null}
          </LinhaDeAjuste>
        </SecaoDeAjustes>

        <SecaoDeAjustes id="pd-numeros" Icone={BarChart3} titulo="Números" texto="Últimos 30 dias, sem pedidos cancelados.">
          <div className="grid grid-cols-2 gap-x-6 gap-y-4 py-4 sm:grid-cols-4">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">Vendas</p>
              <p className="ks-num mt-1 text-xl font-extrabold text-[var(--ks-color-text-primary)]">{numeros.pedidos30}</p>
            </div>
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">Receita</p>
              <p className="ks-num mt-1 text-xl font-extrabold text-[var(--ks-color-text-primary)]">{moeda(numeros.receita30)}</p>
            </div>
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">Com acesso</p>
              <p className="ks-num mt-1 text-xl font-extrabold text-[var(--ks-color-text-primary)]">{numeros.comAcesso}</p>
            </div>
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">Downloads</p>
              <p className="ks-num mt-1 text-xl font-extrabold text-[var(--ks-color-text-primary)]">{numeros.downloads}</p>
            </div>
          </div>
        </SecaoDeAjustes>
      </FolhaDeAjustes>

      {podeEditar ? (
        <div className="sticky bottom-3 z-30 flex flex-wrap items-center justify-end gap-3 rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white/95 px-4 py-3 shadow-[0_10px_30px_-18px_rgba(15,23,42,0.45)] backdrop-blur">
          {mudou ? <span className="mr-auto text-sm text-[var(--ks-color-text-muted)]">Há mudanças por salvar.</span> : null}
          <button
            type="button"
            className="ks-button ks-button-soft"
            disabled={publicando || salvando}
            onClick={() => void publicar(!produto.naLoja)}
          >
            {publicando ? <Loader2 size={16} className="animate-spin" /> : <Store size={16} />}
            {produto.naLoja ? "Tirar da loja" : "Publicar na loja"}
          </button>
          <Button
            type="button"
            disabled={salvando || !mudou}
            onClick={() => void salvar()}
            icon={salvando ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
          >
            {salvando ? "Salvando..." : "Salvar"}
          </Button>
        </div>
      ) : null}

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