"use client";

import { useEffect, useMemo, useState } from "react";
import Image from "next/image";
import {
  ChevronDown,
  ChevronUp,
  GripVertical,
  Layers,
  Loader2,
  Plus,
  Trash2,
  TriangleAlert,
} from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { EntradaDecimal } from "@/components/ui/campo-decimal";
import { CurrencyInput } from "@/components/ui/currency-input";
import { CustomSelect } from "@/components/ui/custom-select";
import { Switch } from "@/components/ui/switch";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import {
  ICONES_DE_SERVICO,
  novoIdDeServico,
  type CustoDoServico,
  type GrupoDeServicos,
  type IconeDoServico,
  type ServicoOpcional,
  type TipoDeCusto,
} from "@/lib/servicos-opcionais";

/*
  A biblioteca de serviços da empresa.

  Cadastro único: "Criação de arte" existe uma vez, com um preço e um custo.
  Os produtos apenas ligam ou desligam. Foi o erro do primeiro desenho —
  cadastrar dentro de cada produto — e é a razão desta tela existir.

  O grupo é quem dá o título que aparece na loja e a regra de escolha: marcar
  vários, ou escolher um. Sem isso, o cliente soma duas entregas no mesmo
  pedido e a loja não tem como dizer que não.
*/

type Papel = { id: string; role_name: string; hourly_rate?: number | null };
type Maquina = { id: string; name: string; hourly_cost?: number | null };
type Insumo = { id: string; name: string; unit?: string | null; is_service?: boolean | null };

const ROTULO_DO_ICONE: Record<IconeDoServico, string> = {
  arte: "Arte e design",
  revisao: "Revisão",
  montagem: "Montagem",
  entrega: "Entrega",
  urgencia: "Urgência",
  embalagem: "Embalagem",
  acabamento: "Acabamento",
  impressao: "Impressão",
  corte: "Corte",
  projeto: "Projeto",
  foto: "Foto",
  garantia: "Garantia",
  servico: "Genérico",
};

const CUSTOS: Array<{ value: TipoDeCusto; label: string }> = [
  { value: "nenhum", label: "Não declarar custo" },
  { value: "mao_de_obra", label: "Mão de obra (papel × minutos)" },
  { value: "maquina", label: "Máquina (× minutos)" },
  { value: "insumo", label: "Insumo ou serviço de terceiro" },
];

const dinheiro = (valor: number) => valor.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });

/* O ícone acompanha o que a pessoa escreve enquanto ela não escolher um. */
function iconePeloTitulo(titulo: string): IconeDoServico {
  const t = titulo.toLowerCase();
  if (/(arte|design|criaç|layout|diagram|logo|banner)/.test(t)) return "arte";
  if (/(revis|confer|prova|verific|checag)/.test(t)) return "revisao";
  if (/(montag|instal|aplicaç|fixaç)/.test(t)) return "montagem";
  if (/(entreg|frete|motoboy|envio)/.test(t)) return "entrega";
  if (/(urgen|express|corrid|rápid|rapid|24h|prazo)/.test(t)) return "urgencia";
  if (/(embal|pacote|presente|kit)/.test(t)) return "embalagem";
  if (/(verniz|lamin|acabam|brilho|fosco|relevo)/.test(t)) return "acabamento";
  if (/(impress|print|plotag)/.test(t)) return "impressao";
  if (/(corte|recorte|faca|refil)/.test(t)) return "corte";
  if (/(projeto|medi|planta|orçament)/.test(t)) return "projeto";
  if (/(foto|imagem|banco de)/.test(t)) return "foto";
  if (/(garanti|seguro|proteç)/.test(t)) return "garantia";
  return "servico";
}

export function BibliotecaDeServicos({
  grupos: gruposIniciais,
  servicos: servicosIniciais,
  custos: custosIniciais,
  onFechar,
  onSalvo,
}: {
  grupos: GrupoDeServicos[];
  servicos: ServicoOpcional[];
  custos: Record<string, CustoDoServico>;
  onFechar: () => void;
  onSalvo: (dados: {
    grupos: GrupoDeServicos[];
    servicos: ServicoOpcional[];
    custos: Record<string, CustoDoServico>;
  }) => void;
}) {
  const [grupos, setGrupos] = useState<GrupoDeServicos[]>(gruposIniciais);
  const [servicos, setServicos] = useState<ServicoOpcional[]>(servicosIniciais);
  const [custos, setCustos] = useState<Record<string, CustoDoServico>>(custosIniciais);
  const [aberto, setAberto] = useState<string | null>(null);
  const [salvando, setSalvando] = useState(false);
  /* A confirmação de remover mora DENTRO da linha, não numa caixa flutuante.
     Caixa sobre caixa não funciona aqui: o painel é um Dialog modal, que
     desliga os cliques em tudo que está fora dele — o clique atravessava a
     confirmação e ia acertar o campo que estava atrás. */
  const [aRemover, setARemover] = useState<string | null>(null);
  const [grupoARemover, setGrupoARemover] = useState<string | null>(null);

  const [papeis, setPapeis] = useState<Papel[]>([]);
  const [maquinas, setMaquinas] = useState<Maquina[]>([]);
  const [insumos, setInsumos] = useState<Insumo[]>([]);

  useEffect(() => {
    let ativo = true;
    const pegar = (url: string) =>
      fetch(url)
        .then((res) => (res.ok ? res.json() : []))
        .catch(() => []);
    Promise.all([
      pegar("/api/production/operations?type=roles"),
      pegar("/api/production/operations?type=machines"),
      pegar("/api/production/materials?papel=insumo"),
    ]).then(([p, m, i]) => {
      if (!ativo) return;
      if (Array.isArray(p)) setPapeis(p as Papel[]);
      if (Array.isArray(m)) setMaquinas(m as Maquina[]);
      if (Array.isArray(i)) setInsumos(i as Insumo[]);
    });
    /* Sem as listas o cadastro continua: o serviço só fica sem custo declarado. */
    return () => {
      ativo = false;
    };
  }, []);

  const opcoesDeGrupo = useMemo(
    () => [
      { value: "", label: "Sem grupo (aparece em “Serviços”)" },
      ...grupos.filter((g) => g.nome.trim()).map((g) => ({ value: g.id, label: g.nome })),
    ],
    [grupos]
  );
  const opcoesDePapel = useMemo(
    () => [{ value: "", label: "Escolher papel" }, ...papeis.map((p) => ({ value: p.id, label: p.role_name }))],
    [papeis]
  );
  const opcoesDeMaquina = useMemo(
    () => [{ value: "", label: "Escolher máquina" }, ...maquinas.map((m) => ({ value: m.id, label: m.name }))],
    [maquinas]
  );
  const opcoesDeInsumo = useMemo(() => {
    /* Serviço de terceiro primeiro: é o que a pessoa procura aqui. */
    const rotulo = (i: Insumo) => (i.unit ? `${i.name} (${i.unit})` : i.name);
    return [
      { value: "", label: "Escolher insumo" },
      ...insumos.filter((i) => i.is_service).map((i) => ({ value: i.id, label: rotulo(i) })),
      ...insumos.filter((i) => !i.is_service).map((i) => ({ value: i.id, label: rotulo(i) })),
    ];
  }, [insumos]);

  function mexerServico(id: string, mudanca: Partial<ServicoOpcional>) {
    setServicos((antes) => antes.map((s) => (s.id === id ? { ...s, ...mudanca } : s)));
  }

  function mexerCusto(id: string, mudanca: Partial<CustoDoServico>) {
    setCustos((antes) => ({
      ...antes,
      [id]: {
        ...(antes[id] || {
          tipo: "nenhum",
          materialId: null,
          materialQtd: 1,
          roleId: null,
          machineId: null,
          minutos: 0,
          setupMinutos: 0,
        }),
        ...mudanca,
      },
    }));
  }

  function adicionarGrupo() {
    setGrupos((antes) => [
      ...antes,
      {
        id: novoIdDeServico(),
        nome: "",
        modo: "varias",
        obrigatorio: false,
        posicao: antes.length,
        ativo: true,
      },
    ]);
  }

  function adicionarServico() {
    const novo: ServicoOpcional = {
      id: novoIdDeServico(),
      grupoId: grupos[0]?.id ?? null,
      titulo: "",
      descricao: null,
      detalhes: null,
      icone: "servico",
      preco: 0,
      /* Uma vez no pedido: o certo para arte, revisão e projeto. */
      porPeca: false,
      valeParaTodos: false,
      posicao: servicos.length,
      ativo: true,
    };
    setServicos((antes) => [...antes, novo]);
    setAberto(novo.id);
  }

  function moverServico(indice: number, passo: -1 | 1) {
    const destino = indice + passo;
    if (destino < 0 || destino >= servicos.length) return;
    const lista = [...servicos];
    [lista[indice], lista[destino]] = [lista[destino], lista[indice]];
    setServicos(lista.map((s, i) => ({ ...s, posicao: i })));
  }

  function custoDeclarado(servico: ServicoOpcional) {
    const custo = custos[servico.id];
    if (!custo) return null;
    const minutos = custo.minutos + custo.setupMinutos;
    if (custo.tipo === "mao_de_obra") {
      const papel = papeis.find((p) => p.id === custo.roleId);
      if (!papel) return null;
      return (Number(papel.hourly_rate) || 0) * (minutos / 60);
    }
    if (custo.tipo === "maquina") {
      const maquina = maquinas.find((m) => m.id === custo.machineId);
      if (!maquina) return null;
      return (Number(maquina.hourly_cost) || 0) * (minutos / 60);
    }
    return null;
  }

  async function salvar() {
    const semNome = servicos.find((s) => !s.titulo.trim());
    if (semNome) {
      toast.error("Todo serviço precisa de um nome.");
      setAberto(semNome.id);
      return;
    }
    setSalvando(true);
    const res = await fetch("/api/catalog/servicos", {
      method: "PUT",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        grupos: grupos
          .filter((g) => g.nome.trim())
          .map((g, i) => ({
            id: g.id,
            name: g.nome.trim(),
            selection_mode: g.modo,
            required: g.obrigatorio,
            position: i,
            active: true,
          })),
        servicos: servicos.map((s, i) => ({
          id: s.id,
          group_id: s.grupoId,
          title: s.titulo.trim(),
          description: s.descricao,
          details: s.detalhes,
          icon: s.icone,
          price: s.preco,
          charge_per_unit: s.porPeca,
          apply_to_all: s.valeParaTodos,
          position: i,
          active: s.ativo,
        })),
        custos: Object.fromEntries(
          servicos.map((s) => {
            const custo = custos[s.id];
            return [
              s.id,
              {
                cost_kind: custo?.tipo ?? "nenhum",
                material_id: custo?.materialId ?? null,
                material_qty: custo?.materialQtd ?? 0,
                role_id: custo?.roleId ?? null,
                machine_id: custo?.machineId ?? null,
                minutes: custo?.minutos ?? 0,
                setup_minutes: custo?.setupMinutos ?? 0,
              },
            ];
          })
        ),
      }),
    });
    const json = (await res.json().catch(() => null)) as { error?: string } | null;
    setSalvando(false);
    if (!res.ok) {
      toast.error(json?.error || "Não foi possível salvar os serviços.");
      return;
    }
    toast.success("Serviços da loja atualizados.");
    onSalvo({ grupos: grupos.filter((g) => g.nome.trim()), servicos, custos });
    onFechar();
  }

  return (
    <Dialog open onOpenChange={(estado) => (!estado ? onFechar() : undefined)}>
        <DialogContent
          className="max-h-[88vh] max-w-4xl overflow-y-auto"
          /* A lista de um seletor abre num portal, fora deste painel. Sem isto,
             clicar numa opção conta como "clique fora" e fecha o painel
             inteiro no meio do cadastro. */
          onPointerDownOutside={(evento) => {
            const alvo = evento.target as HTMLElement | null;
            if (alvo?.closest('[data-ks-select-dropdown="true"]')) evento.preventDefault();
          }}
          onInteractOutside={(evento) => {
            const alvo = evento.target as HTMLElement | null;
            if (alvo?.closest('[data-ks-select-dropdown="true"]')) evento.preventDefault();
          }}
        >
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Layers size={18} className="text-[var(--ks-color-primary)]" />
              Serviços da loja
            </DialogTitle>
          </DialogHeader>

          <p className="-mt-2 text-[13px] text-slate-500">
            Cadastre uma vez o que a sua gráfica faz além da peça. Depois é só marcar em quais
            produtos cada serviço aparece.
          </p>

          {/* ---------------- grupos ---------------- */}
          <section className="mt-4 space-y-2">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-[13px] font-bold text-slate-800">Grupos</p>
                <p className="text-[12px] text-slate-500">
                  O nome do grupo é o título que aparece na loja, e é ele que decide se o cliente
                  pode marcar vários ou só um.
                </p>
              </div>
              <Button type="button" variant="ghost" size="sm" onClick={adicionarGrupo} className="gap-1.5">
                <Plus size={14} />
                Grupo
              </Button>
            </div>

            {grupos.length === 0 ? (
              <p className="rounded-lg border border-dashed border-slate-200 bg-slate-50/60 px-3 py-3 text-[12.5px] text-slate-500">
                Sem grupo, tudo aparece junto sob o título “Serviços”, com múltipla escolha.
              </p>
            ) : (
              <div className="space-y-2">
                {grupos.map((grupo, indice) => (
                  <div
                    key={grupo.id}
                    className="flex flex-wrap items-end gap-2 rounded-xl border border-slate-200 bg-slate-50/60 p-2.5"
                  >
                    <GripVertical size={14} className="mb-2.5 shrink-0 text-slate-300" />
                    <div className="min-w-[150px] flex-1">
                      <label className="text-[10px] font-medium uppercase tracking-wide text-slate-500">
                        Título na loja
                      </label>
                      <Input
                        placeholder="Ex: Serviços, Acabamento, Prazo"
                        value={grupo.nome}
                        className="mt-1 h-9 bg-white"
                        onChange={(e) =>
                          setGrupos((antes) =>
                            antes.map((g, i) => (i === indice ? { ...g, nome: e.target.value } : g))
                          )
                        }
                      />
                    </div>
                    <div className="w-[190px]">
                      <label className="text-[10px] font-medium uppercase tracking-wide text-slate-500">
                        O cliente pode
                      </label>
                      <CustomSelect
                        options={[
                          { value: "varias", label: "Marcar vários" },
                          { value: "uma", label: "Escolher só um" },
                        ]}
                        value={grupo.modo}
                        onChange={(valor) =>
                          setGrupos((antes) =>
                            antes.map((g, i) =>
                              i === indice
                                ? {
                                    ...g,
                                    modo: valor === "uma" ? "uma" : "varias",
                                    obrigatorio: valor === "uma" ? g.obrigatorio : false,
                                  }
                                : g
                            )
                          )
                        }
                        className="mt-1 [&>div>button]:h-9 [&>div>button]:min-h-9 [&>div>button]:bg-white"
                      />
                    </div>
                    {grupo.modo === "uma" ? (
                      <label className="mb-1.5 flex items-center gap-2 text-[12px] text-slate-600">
                        <Switch
                          checked={grupo.obrigatorio}
                          onCheckedChange={(marcado) =>
                            setGrupos((antes) =>
                              antes.map((g, i) => (i === indice ? { ...g, obrigatorio: marcado } : g))
                            )
                          }
                        />
                        Escolha obrigatória
                      </label>
                    ) : null}
                    <button
                      type="button"
                      onClick={() => setGrupoARemover(grupoARemover === grupo.id ? null : grupo.id)}
                      className={`mb-1 rounded-md p-1.5 transition-colors ${
                        grupoARemover === grupo.id
                          ? "bg-rose-50 text-rose-500"
                          : "text-slate-400 hover:bg-rose-50 hover:text-rose-500"
                      }`}
                      aria-label="Remover grupo"
                    >
                      <Trash2 size={14} />
                    </button>

                    {grupoARemover === grupo.id ? (
                      <div className="flex w-full flex-wrap items-center gap-3 rounded-lg border border-rose-100 bg-rose-50 px-3 py-2">
                        <p className="min-w-0 flex-1 text-[12.5px] leading-snug text-rose-900">
                          Remover o grupo <strong>“{grupo.nome || "sem nome"}”</strong>?{" "}
                          {servicos.some((s) => s.grupoId === grupo.id)
                            ? "Os serviços dele continuam existindo e voltam a aparecer sob o título “Serviços”, com múltipla escolha."
                            : "Nenhum serviço usa este grupo."}
                        </p>
                        <div className="flex shrink-0 items-center gap-2">
                          <button
                            type="button"
                            onClick={() => setGrupoARemover(null)}
                            className="h-8 rounded-lg bg-white px-3 text-[12.5px] font-semibold text-slate-600 shadow-sm transition hover:bg-slate-50"
                          >
                            Cancelar
                          </button>
                          <button
                            type="button"
                            onClick={() => {
                              /* O serviço não some junto: ele volta para o
                                 grupo padrão, e o lojista decide o destino. */
                              setServicos((antes) =>
                                antes.map((s) => (s.grupoId === grupo.id ? { ...s, grupoId: null } : s))
                              );
                              setGrupos((antes) => antes.filter((g) => g.id !== grupo.id));
                              setGrupoARemover(null);
                            }}
                            className="h-8 rounded-lg bg-[#e13a58] px-3 text-[12.5px] font-bold text-white transition hover:opacity-90"
                          >
                            Remover
                          </button>
                        </div>
                      </div>
                    ) : null}
                  </div>
                ))}
              </div>
            )}
          </section>

          {/* ---------------- serviços ---------------- */}
          <section className="mt-6 space-y-2">
            <div className="flex items-center justify-between">
              <p className="text-[13px] font-bold text-slate-800">Serviços</p>
              <Button type="button" variant="outline" size="sm" onClick={adicionarServico} className="gap-1.5">
                <Plus size={14} />
                Serviço
              </Button>
            </div>

            {servicos.length === 0 ? (
              <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50/60 px-5 py-8 text-center">
                <p className="text-sm font-semibold text-slate-700">Nenhum serviço cadastrado</p>
                <p className="mx-auto mt-1 max-w-md text-[13px] text-slate-500">
                  Criação de arte, revisão de arquivo, montagem no local, entrega expressa.
                </p>
              </div>
            ) : (
              <div className="space-y-2">
                {servicos.map((servico, indice) => {
                  const custo = custos[servico.id];
                  const expandido = aberto === servico.id;
                  const declarado = custoDeclarado(servico);
                  return (
                    <div key={servico.id} className="overflow-hidden rounded-xl border border-slate-200 bg-white">
                      <div className="flex items-center gap-2.5 px-3 py-2.5">
                        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-50">
                          <Image
                            src={`/icones/servicos/${servico.icone}.svg`}
                            alt=""
                            width={22}
                            height={22}
                            style={{ width: 22, height: 22 }}
                          />
                        </span>
                        <button
                          type="button"
                          onClick={() => setAberto(expandido ? null : servico.id)}
                          className="min-w-0 flex-1 text-left"
                        >
                          <span className="block truncate text-[13.5px] font-semibold text-slate-800">
                            {servico.titulo || "Serviço sem nome"}
                          </span>
                          <span className="block truncate text-[11.5px] text-slate-500">
                            {dinheiro(servico.preco)} · {servico.porPeca ? "por unidade" : "uma vez no pedido"}
                            {servico.valeParaTodos ? " · em todos os produtos" : ""}
                            {servico.ativo ? "" : " · desligado"}
                          </span>
                        </button>
                        <div className="flex shrink-0 items-center gap-1">
                          <button
                            type="button"
                            onClick={() => moverServico(indice, -1)}
                            disabled={indice === 0}
                            className="rounded-md p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 disabled:opacity-30"
                            aria-label="Subir"
                          >
                            <ChevronUp size={14} />
                          </button>
                          <button
                            type="button"
                            onClick={() => moverServico(indice, 1)}
                            disabled={indice === servicos.length - 1}
                            className="rounded-md p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 disabled:opacity-30"
                            aria-label="Descer"
                          >
                            <ChevronDown size={14} />
                          </button>
                          <Switch
                            checked={servico.ativo}
                            onCheckedChange={(marcado) => mexerServico(servico.id, { ativo: marcado })}
                          />
                          <button
                            type="button"
                            onClick={() => setARemover(aRemover === servico.id ? null : servico.id)}
                            className={`rounded-md p-1 transition-colors ${
                              aRemover === servico.id
                                ? "bg-rose-50 text-rose-500"
                                : "text-slate-400 hover:bg-rose-50 hover:text-rose-500"
                            }`}
                            aria-label="Remover serviço"
                          >
                            <Trash2 size={14} />
                          </button>
                        </div>
                      </div>

                      {aRemover === servico.id ? (
                        <div className="flex flex-wrap items-center gap-3 border-t border-rose-100 bg-rose-50 px-3 py-2.5">
                          <p className="min-w-0 flex-1 text-[12.5px] leading-snug text-rose-900">
                            Remover <strong>“{servico.titulo || "Serviço sem nome"}”</strong>? Ele sai da
                            biblioteca e de todos os produtos quando você salvar. Os pedidos já feitos
                            continuam mostrando o serviço que o cliente contratou.
                          </p>
                          <div className="flex shrink-0 items-center gap-2">
                            <button
                              type="button"
                              onClick={() => setARemover(null)}
                              className="h-8 rounded-lg bg-white px-3 text-[12.5px] font-semibold text-slate-600 shadow-sm transition hover:bg-slate-50"
                            >
                              Cancelar
                            </button>
                            <button
                              type="button"
                              onClick={() => {
                                setServicos((antes) => antes.filter((s) => s.id !== servico.id));
                                setCustos((antes) => {
                                  const copia = { ...antes };
                                  delete copia[servico.id];
                                  return copia;
                                });
                                if (aberto === servico.id) setAberto(null);
                                setARemover(null);
                              }}
                              className="h-8 rounded-lg bg-[#e13a58] px-3 text-[12.5px] font-bold text-white transition hover:opacity-90"
                            >
                              Remover
                            </button>
                          </div>
                        </div>
                      ) : null}

                      {expandido ? (
                        <div className="space-y-4 border-t border-slate-100 bg-slate-50/50 p-4">
                          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                            <Input
                              label="Nome do serviço"
                              placeholder="Ex: Criação de arte"
                              value={servico.titulo}
                              onChange={(e) => {
                                const titulo = e.target.value;
                                const sugerido =
                                  servico.icone === "servico" ? iconePeloTitulo(titulo) : servico.icone;
                                mexerServico(servico.id, { titulo, icone: sugerido });
                              }}
                            />
                            <div className="space-y-2">
                              <label className="text-xs font-medium uppercase tracking-[0.16em] text-[var(--ks-color-text-soft)]">
                                Grupo
                              </label>
                              <CustomSelect
                                options={opcoesDeGrupo}
                                value={servico.grupoId || ""}
                                onChange={(valor) => mexerServico(servico.id, { grupoId: valor || null })}
                              />
                            </div>
                          </div>

                          <div className="space-y-2">
                            <label className="text-xs font-medium uppercase tracking-[0.16em] text-[var(--ks-color-text-soft)]">
                              Ícone
                            </label>
                            <div className="flex flex-wrap gap-1.5">
                              {ICONES_DE_SERVICO.map((icone) => (
                                <button
                                  key={icone}
                                  type="button"
                                  title={ROTULO_DO_ICONE[icone]}
                                  onClick={() => mexerServico(servico.id, { icone })}
                                  className={`flex h-11 w-11 items-center justify-center rounded-lg border transition-all ${
                                    servico.icone === icone
                                      ? "border-[var(--ks-color-primary)] bg-white shadow-sm ring-2 ring-[rgba(10,192,214,0.25)]"
                                      : "border-slate-200 bg-white hover:border-slate-300"
                                  }`}
                                >
                                  <Image
                                    src={`/icones/servicos/${icone}.svg`}
                                    alt={ROTULO_DO_ICONE[icone]}
                                    width={26}
                                    height={26}
                                    style={{ width: 26, height: 26 }}
                                  />
                                </button>
                              ))}
                            </div>
                          </div>

                          <Input
                            label="Explicação (uma frase)"
                            placeholder="Ex: Nossa equipe cria a arte do zero para você"
                            value={servico.descricao || ""}
                            onChange={(e) => mexerServico(servico.id, { descricao: e.target.value || null })}
                          />

                          <div className="space-y-2">
                            <label className="text-xs font-medium uppercase tracking-[0.16em] text-[var(--ks-color-text-soft)]">
                              Detalhes do “?” na loja
                            </label>
                            <textarea
                              rows={2}
                              placeholder="Ex: Inclui até 2 alterações. A aprovação da arte é por WhatsApp antes de imprimir."
                              value={servico.detalhes || ""}
                              onChange={(e) => mexerServico(servico.id, { detalhes: e.target.value || null })}
                              className="w-full rounded-lg border border-[var(--ks-color-border-subtle)] bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ks-color-primary)]"
                            />
                            <p className="text-[11px] text-slate-500">
                              Sem este texto, o cartão da loja não mostra o ícone de ajuda.
                            </p>
                          </div>

                          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                            <div className="space-y-2">
                              <label className="text-xs font-medium uppercase tracking-[0.16em] text-[var(--ks-color-text-soft)]">
                                Preço
                              </label>
                              <CurrencyInput
                                value={servico.preco}
                                onChange={(valor) => mexerServico(servico.id, { preco: valor })}
                              />
                            </div>
                            <div className="space-y-2">
                              <label className="text-xs font-medium uppercase tracking-[0.16em] text-[var(--ks-color-text-soft)]">
                                Como cobrar
                              </label>
                              <CustomSelect
                                options={[
                                  { value: "uma_vez", label: "Uma vez no pedido" },
                                  { value: "por_peca", label: "Por unidade" },
                                ]}
                                value={servico.porPeca ? "por_peca" : "uma_vez"}
                                onChange={(valor) =>
                                  mexerServico(servico.id, { porPeca: valor === "por_peca" })
                                }
                              />
                            </div>
                          </div>

                          {servico.porPeca ? (
                            <div className="flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2.5">
                              <TriangleAlert size={15} className="mt-0.5 shrink-0 text-amber-600" />
                              <p className="text-[12.5px] leading-snug text-amber-800">
                                Cobrado por unidade, quem pedir 500 peças paga{" "}
                                <strong>{dinheiro(servico.preco * 500)}</strong> só por este serviço.
                                Arte, revisão e projeto costumam ser cobrados uma vez.
                              </p>
                            </div>
                          ) : null}

                          <label className="flex items-start gap-3 rounded-lg border border-slate-200 bg-white px-3 py-2.5">
                            <Switch
                              checked={servico.valeParaTodos}
                              onCheckedChange={(marcado) =>
                                mexerServico(servico.id, { valeParaTodos: marcado })
                              }
                            />
                            <span className="min-w-0">
                              <span className="block text-[13px] font-semibold text-slate-800">
                                Oferecer em todos os produtos
                              </span>
                              <span className="block text-[11.5px] text-slate-500">
                                Liga sozinho no catálogo inteiro, inclusive nos produtos novos. Dá
                                para desligar num produto específico.
                              </span>
                            </span>
                          </label>

                          <div className="space-y-2 border-t border-dashed border-slate-200 pt-4">
                            <label className="text-xs font-medium uppercase tracking-[0.16em] text-[var(--ks-color-text-soft)]">
                              De onde vem o custo
                            </label>
                            <CustomSelect
                              options={CUSTOS}
                              value={custo?.tipo ?? "nenhum"}
                              onChange={(valor) => mexerCusto(servico.id, { tipo: (valor || "nenhum") as TipoDeCusto })}
                              description="O que este serviço consome de verdade. Sem isso o preço entra na venda, mas o lucro do pedido fica otimista."
                            />
                          </div>

                          {custo?.tipo === "mao_de_obra" || custo?.tipo === "maquina" ? (
                            <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
                              <div className="space-y-2">
                                <label className="text-[11px] font-medium text-slate-500">
                                  {custo.tipo === "mao_de_obra" ? "Papel" : "Máquina"}
                                </label>
                                <CustomSelect
                                  options={custo.tipo === "mao_de_obra" ? opcoesDePapel : opcoesDeMaquina}
                                  value={(custo.tipo === "mao_de_obra" ? custo.roleId : custo.machineId) || ""}
                                  onChange={(valor) =>
                                    mexerCusto(
                                      servico.id,
                                      custo.tipo === "mao_de_obra"
                                        ? { roleId: valor || null }
                                        : { machineId: valor || null }
                                    )
                                  }
                                  searchable
                                />
                              </div>
                              <EntradaDecimal
                                label="Minutos"
                                valor={custo.minutos}
                                aoMudar={(n) => mexerCusto(servico.id, { minutos: n })}
                              />
                              <EntradaDecimal
                                label="Preparação (min)"
                                valor={custo.setupMinutos}
                                aoMudar={(n) => mexerCusto(servico.id, { setupMinutos: n })}
                              />
                            </div>
                          ) : null}

                          {custo?.tipo === "insumo" ? (
                            <div className="space-y-2">
                              <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
                                <div className="space-y-2 md:col-span-2">
                                  <label className="text-[11px] font-medium text-slate-500">
                                    Insumo consumido
                                  </label>
                                  <CustomSelect
                                    options={opcoesDeInsumo}
                                    value={custo.materialId || ""}
                                    onChange={(valor) => mexerCusto(servico.id, { materialId: valor || null })}
                                    searchable
                                  />
                                </div>
                                <EntradaDecimal
                                  label="Qtd por peça"
                                  valor={custo.materialQtd}
                                  aoMudar={(n) => mexerCusto(servico.id, { materialQtd: n })}
                                />
                              </div>
                              <p className="text-[11px] text-slate-500">
                                O insumo é contado <strong>por peça</strong> do pedido, mesmo quando o
                                serviço é cobrado uma vez. Para trabalho que acontece uma vez só, use
                                mão de obra.
                              </p>
                            </div>
                          ) : null}

                          {declarado !== null && declarado > 0 ? (
                            <p className="text-[12px] text-slate-500">
                              Custo declarado: <strong className="text-slate-700">{dinheiro(declarado)}</strong>
                              {servico.preco > 0 ? (
                                <>
                                  {" "}
                                  · sobra{" "}
                                  <strong
                                    className={
                                      servico.preco - declarado >= 0 ? "text-emerald-600" : "text-red-500"
                                    }
                                  >
                                    {dinheiro(servico.preco - declarado)}
                                  </strong>
                                </>
                              ) : null}
                            </p>
                          ) : null}
                        </div>
                      ) : null}
                    </div>
                  );
                })}
              </div>
            )}
          </section>

          <div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 pt-4">
            <Button type="button" variant="ghost" onClick={onFechar} disabled={salvando}>
              Cancelar
            </Button>
            <Button type="button" onClick={salvar} disabled={salvando} className="gap-1.5">
              {salvando ? <Loader2 size={14} className="animate-spin" /> : null}
              Salvar serviços
            </Button>
          </div>
        </DialogContent>
    </Dialog>
  );
}