/* global React, Icon, Button, Badge, brl,
          FormShell, FormSection, FieldLabel,
          FText, FNum, FDate, FSelect, FTextarea, FSwitch, FChipBox,
          ObservacoesSection, AnexosSection */

// ============================================================
// Produtos_Forms.jsx — full-page cadastros para Produto, Linha,
// Categoria, Tabela de Preço, Movimentação de estoque.
// ============================================================

const { useState: useProdFormState } = React;

// ============================================================
// Links list — repeat input rows of {label, url, tipo}
// ============================================================
function LinksList({ value, onChange }) {
  const links = value || [];
  const update = (idx, key, v) => onChange(links.map((l, i) => i === idx ? { ...l, [key]: v } : l));
  const remove = (idx) => onChange(links.filter((_, i) => i !== idx));
  const add = (preset) => onChange([...links, preset || { tipo: "Site", label: "", url: "" }]);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {links.length === 0 && (
        <div style={{ fontSize: 12.5, color: "var(--tm-fg-3)", padding: "4px 0" }}>
          Nenhum link adicionado ainda. Use os botões abaixo para incluir páginas de produto, vídeos, fichas técnicas ou materiais de apoio.
        </div>
      )}
      {links.map((l, i) => (
        <div key={i} className="link-row">
          <div className="link-row-icon">
            <Icon name={linkIcon(l.tipo)} size={14} />
          </div>
          <select className="input link-tipo" value={l.tipo || "Site"} onChange={(e) => update(i, "tipo", e.target.value)}>
            {["Site","Vídeo","Ficha técnica","Tutorial","Loja parceira","Instagram","YouTube","PDF","Outro"].map(t => <option key={t} value={t}>{t}</option>)}
          </select>
          <input className="input" placeholder="Rótulo (ex.: Página oficial)" value={l.label || ""} onChange={(e) => update(i, "label", e.target.value)} />
          <input className="input" placeholder="https://" value={l.url || ""} onChange={(e) => update(i, "url", e.target.value)} />
          {l.url && (
            <a href={l.url} target="_blank" rel="noopener noreferrer" className="icon-btn link-open" title="Abrir link em nova aba" onClick={(e) => e.stopPropagation()}>
              <Icon name="external-link" size={14} />
            </a>
          )}
          <button className="icon-btn danger" title="Remover" onClick={() => remove(i)}>
            <Icon name="trash-2" size={14} />
          </button>
        </div>
      ))}
      <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 4 }}>
        <button className="add-link" onClick={() => add()}><Icon name="plus" size={12} /> Adicionar link</button>
        <button className="add-link" onClick={() => add({ tipo: "Vídeo", label: "Vídeo de demonstração", url: "" })}><Icon name="play-circle" size={12} /> + Vídeo</button>
        <button className="add-link" onClick={() => add({ tipo: "Ficha técnica", label: "Ficha técnica (PDF)", url: "" })}><Icon name="file-text" size={12} /> + Ficha técnica</button>
        <button className="add-link" onClick={() => add({ tipo: "Tutorial", label: "Tutorial de aplicação", url: "" })}><Icon name="book-open" size={12} /> + Tutorial</button>
      </div>
    </div>
  );
}
function linkIcon(tipo) {
  switch (tipo) {
    case "Vídeo":
    case "YouTube":        return "play-circle";
    case "Ficha técnica":
    case "PDF":            return "file-text";
    case "Tutorial":       return "book-open";
    case "Loja parceira":  return "shopping-bag";
    case "Instagram":      return "instagram";
    default:               return "link";
  }
}

// ============================================================
// CALCULADORA DE PREÇOS
// ============================================================
function PrecosCalcTab({ p, set, onApply }) {
  const [custos, setCustos] = useProdFormState({
    producao:    parseFloat(p.custo) || 0,
    embalagem:   0,
    etiqueta:    0,
    envase:      0,
    variavel:    0,
    operacional: 0,
  });
  const [margens, setMargens] = useProdFormState({ dist: 40, salao: 100, final: 180 });

  const setC = (k, v) => setCustos(prev => ({ ...prev, [k]: parseFloat(v) || 0 }));
  const setM = (k, v) => setMargens(prev => ({ ...prev, [k]: parseFloat(v) || 0 }));

  const total = Object.values(custos).reduce((a, v) => a + v, 0);
  const precoCalc = {
    dist:  total > 0 ? total * (1 + margens.dist  / 100) : 0,
    salao: total > 0 ? total * (1 + margens.salao / 100) : 0,
    final: total > 0 ? total * (1 + margens.final / 100) : 0,
  };
  const mkup = (preco) => total > 0 && preco > 0 ? (preco / total).toFixed(2) + "×" : "—";

  const presets = [
    { label: "Conservador", dist: 30,  salao: 80,  final: 120 },
    { label: "Moderado",    dist: 50,  salao: 120, final: 200 },
    { label: "Agressivo",   dist: 80,  salao: 200, final: 300 },
  ];

  const canais = [
    { key: "dist",  label: "Distribuidor",      color: "var(--tm-info)" },
    { key: "salao", label: "Salão / Barbearia",  color: "var(--tm-brand-champagne)" },
    { key: "final", label: "Cliente final",      color: "var(--tm-success)" },
  ];

  return (
    <div style={{ padding: "0 24px 32px" }}>

      {/* ── Composição do custo ─────────────────────────── */}
      <FormSection title="Composição do custo" meta="Informe todos os custos unitários do produto">
        <div className="field-grid-3">
          <FNum label="Custo de produção"        suffix="R$" value={custos.producao}    onChange={(v) => setC("producao", v)} />
          <FNum label="Custo de embalagem"        suffix="R$" value={custos.embalagem}   onChange={(v) => setC("embalagem", v)} />
          <FNum label="Custo de etiqueta"         suffix="R$" value={custos.etiqueta}    onChange={(v) => setC("etiqueta", v)} />
          <FNum label="Custo de envase"           suffix="R$" value={custos.envase}      onChange={(v) => setC("envase", v)} />
          <FNum label="Custo variável por volume" suffix="R$" value={custos.variavel}    onChange={(v) => setC("variavel", v)} />
          <FNum label="Custo operacional"         suffix="R$" value={custos.operacional} onChange={(v) => setC("operacional", v)} />
        </div>
        <div style={{
          marginTop: 14, padding: "14px 18px", borderRadius: 8,
          background: "rgba(201,163,107,0.07)", border: "1px solid rgba(201,163,107,0.2)",
          display: "flex", alignItems: "center", justifyContent: "space-between",
        }}>
          <span style={{ fontSize: 13, color: "var(--tm-fg-2)" }}>Custo total unitário</span>
          <span style={{ fontFamily: "var(--tm-font-display)", fontSize: 24, color: "var(--tm-brand-champagne)", fontWeight: 700 }}>
            R$ {brl(total)}
          </span>
        </div>
      </FormSection>

      {/* ── Preços por canal ────────────────────────────── */}
      <FormSection title="Preços por canal" meta="Ajuste a margem de cada canal para ver o preço sugerido">
        <table className="tbl" style={{ marginTop: 0 }}>
          <thead>
            <tr>
              <th>Canal</th>
              <th style={{ width: 160 }}>Margem %</th>
              <th className="num right">Preço calculado</th>
              <th className="num right">Markup</th>
            </tr>
          </thead>
          <tbody>
            {canais.map(canal => (
              <tr key={canal.key}>
                <td>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ width: 8, height: 8, borderRadius: "50%", background: canal.color, flexShrink: 0 }} />
                    <span style={{ fontWeight: 500 }}>{canal.label}</span>
                  </div>
                </td>
                <td>
                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                    <input
                      type="number" className="input"
                      style={{ height: 32, width: 86, textAlign: "right", fontVariantNumeric: "tabular-nums" }}
                      value={margens[canal.key]}
                      onChange={(e) => setM(canal.key, e.target.value)}
                      min="0" step="5"
                    />
                    <span className="muted" style={{ fontSize: 13 }}>%</span>
                  </div>
                </td>
                <td className="num right" style={{ color: canal.color, fontWeight: 600, fontSize: 15 }}>
                  {precoCalc[canal.key] > 0 ? `R$ ${brl(precoCalc[canal.key])}` : "—"}
                </td>
                <td className="num right" style={{ color: "var(--tm-fg-3)", fontSize: 13 }}>
                  {mkup(precoCalc[canal.key])}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </FormSection>

      {/* ── Sugestões ───────────────────────────────────── */}
      <FormSection title="Sugestões de margem" meta="Baseado em canais cosméticos profissionais">
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 14 }}>
          {presets.map(pr => (
            <button
              key={pr.label}
              onClick={() => setMargens({ dist: pr.dist, salao: pr.salao, final: pr.final })}
              style={{
                padding: "8px 16px", borderRadius: 8,
                border: "1px solid var(--tm-line-1)", background: "var(--tm-bg-2)",
                color: "var(--tm-fg-1)", cursor: "pointer", fontSize: 13, fontFamily: "var(--tm-font-ui)",
                display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 2,
              }}
            >
              <span style={{ fontWeight: 600 }}>{pr.label}</span>
              <span style={{ fontSize: 11, color: "var(--tm-fg-3)" }}>
                dist {pr.dist}% · salão {pr.salao}% · final {pr.final}%
              </span>
            </button>
          ))}
        </div>
        <div style={{ fontSize: 12, color: "var(--tm-fg-3)", lineHeight: 1.65 }}>
          <b style={{ color: "var(--tm-fg-2)" }}>Conservador</b> — indicado para produtos com alta concorrência ou custo de produção baixo.<br/>
          <b style={{ color: "var(--tm-fg-2)" }}>Moderado</b> — padrão recomendado para a linha profissional TopMix.<br/>
          <b style={{ color: "var(--tm-fg-2)" }}>Agressivo</b> — para produtos exclusivos, premium ou com baixíssima concorrência.
        </div>
      </FormSection>

      {/* ── Aplicar ao produto ──────────────────────────── */}
      <div style={{
        marginTop: 8, padding: "18px 20px", borderRadius: 10,
        background: "var(--tm-bg-2)", border: "1px solid var(--tm-line-1)",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
        flexWrap: "wrap",
      }}>
        <div>
          <div style={{ fontSize: 13.5, fontWeight: 500 }}>Aplicar ao produto</div>
          <div style={{ fontSize: 12, color: "var(--tm-fg-3)", marginTop: 3, lineHeight: 1.5 }}>
            Preenche <b style={{ color: "var(--tm-fg-2)" }}>Custo médio</b> com{" "}
            <b style={{ color: "var(--tm-brand-champagne)" }}>R$ {brl(total)}</b>,{" "}
            <b style={{ color: "var(--tm-fg-2)" }}>Preço distribuidor</b> com{" "}
            <b style={{ color: "var(--tm-info)" }}>R$ {brl(precoCalc.dist)}</b>,{" "}
            <b style={{ color: "var(--tm-fg-2)" }}>Preço salão</b> com{" "}
            <b style={{ color: "var(--tm-brand-champagne)" }}>R$ {brl(precoCalc.salao)}</b> e{" "}
            <b style={{ color: "var(--tm-fg-2)" }}>Preço de venda</b> com{" "}
            <b style={{ color: "var(--tm-success)" }}>R$ {brl(precoCalc.final)}</b>.
          </div>
        </div>
        <Button
          variant="primary" icon="check"
          onClick={() => {
            set("custo",      parseFloat(total.toFixed(2)));
            set("precoDiv",   parseFloat(precoCalc.dist.toFixed(2)));
            set("precoSalao", parseFloat(precoCalc.salao.toFixed(2)));
            set("venda",      parseFloat(precoCalc.final.toFixed(2)));
            onApply();
          }}
        >
          Aplicar custo + preços dos 3 canais
        </Button>
      </div>
    </div>
  );
}

// ============================================================
// MÍDIA DO PRODUTO — galeria com upload p/ o Supabase Storage
// ============================================================
const midiaBtn = {
  flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 3,
  border: "none", background: "transparent", color: "#fff", cursor: "pointer",
  fontSize: 10, padding: "4px 2px", fontFamily: "var(--tm-font-ui)",
};

function ProdutoMidia({ value, onChange }) {
  const imgs = value || [];
  const fileRef = React.useRef(null);
  const [uploading, setUploading] = React.useState(false);
  const [err, setErr] = React.useState("");

  const onFiles = async (e) => {
    const files = Array.from(e.target.files || []);
    e.target.value = "";
    if (!files.length) return;
    if (!window.tmSupabase) { setErr("Supabase indisponível — não foi possível enviar."); return; }
    setErr("");
    setUploading(true);
    const novos = [];
    for (const file of files) {
      if (!file.type.startsWith("image/")) { setErr("Selecione apenas arquivos de imagem."); continue; }
      if (file.size > 5 * 1024 * 1024) { setErr("Cada imagem deve ter no máximo 5 MB."); continue; }
      try {
        const ext  = (file.name.split(".").pop() || "jpg").toLowerCase();
        const path = `produtos/${Date.now()}-${Math.random().toString(36).slice(2, 8)}.${ext}`;
        const { error } = await window.tmSupabase.storage
          .from("produto-imagens").upload(path, file, { contentType: file.type });
        if (error) throw error;
        const { data } = window.tmSupabase.storage.from("produto-imagens").getPublicUrl(path);
        novos.push(data.publicUrl);
      } catch (ex) {
        setErr(ex.message || "Erro ao enviar imagem.");
      }
    }
    if (novos.length) onChange([...imgs, ...novos]);
    setUploading(false);
  };

  const remover    = (i) => onChange(imgs.filter((_, idx) => idx !== i));
  const tornarCapa = (i) => onChange([imgs[i], ...imgs.filter((_, idx) => idx !== i)]);
  const baixar = async (url, i) => {
    try {
      const resp = await fetch(url);
      const blob = await resp.blob();
      const ext = (url.split('.').pop() || 'png').split('?')[0];
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = `produto-imagem-${i + 1}.${ext}`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setTimeout(() => URL.revokeObjectURL(a.href), 3000);
    } catch (e) {
      console.error('Erro ao baixar imagem:', e);
      window.open(url, '_blank');
    }
  };

  return (
    <>
      <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
        {imgs.map((url, i) => (
          <div key={url + i} style={{
            position: "relative", width: 124, height: 124, borderRadius: 10,
            overflow: "hidden", border: "1px solid var(--tm-line-1)", background: "var(--tm-bg-2)",
          }}>
            <img src={url} alt={`Imagem ${i + 1}`} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            {i === 0 && (
              <span style={{
                position: "absolute", top: 6, left: 6, fontSize: 9.5, fontWeight: 600,
                padding: "2px 7px", borderRadius: 10, color: "#0B0B0D",
                background: "var(--tm-brand-champagne)", letterSpacing: "0.04em",
              }}>CAPA</span>
            )}
            <div style={{
              position: "absolute", left: 0, right: 0, bottom: 0,
              display: "flex", gap: 1, background: "rgba(0,0,0,0.55)",
            }}>
              {i !== 0 && (
                <button type="button" onClick={() => tornarCapa(i)} title="Tornar capa" style={midiaBtn}>
                  <Icon name="star" size={12} /> Capa
                </button>
              )}
              <button type="button" onClick={() => baixar(url, i)} title="Baixar imagem"
                style={{ ...midiaBtn, color: "#8ad4ff" }}>
                <Icon name="download" size={12} />
              </button>
              <button type="button" onClick={() => remover(i)} title="Remover"
                style={{ ...midiaBtn, color: "#ff8a8a" }}>
                <Icon name="trash-2" size={12} />
              </button>
            </div>
          </div>
        ))}
        <div className="foto-slot"
          style={{ width: 124, height: 124, marginTop: 0, flexDirection: "column", gap: 4, cursor: uploading ? "wait" : "pointer" }}
          onClick={() => { if (!uploading && fileRef.current) fileRef.current.click(); }}>
          <Icon name={uploading ? "loader-2" : "plus"} size={20} />
          <span style={{ fontSize: 11 }}>{uploading ? "Enviando…" : "Adicionar"}</span>
        </div>
      </div>
      <input ref={fileRef} type="file" accept="image/*" multiple style={{ display: "none" }} onChange={onFiles} />
      {err && <div style={{ fontSize: 11.5, color: "var(--tm-danger)", marginTop: 2 }}>{err}</div>}
      <div style={{ fontSize: 11.5, color: "var(--tm-fg-3)" }}>JPG, PNG ou WebP até 5 MB · 1ª imagem é a capa</div>
    </>
  );
}

// ============================================================
// VARIAÇÕES DO PRODUTO
// ============================================================
const VARIACAO_TIPOS = ["Cor", "Volume", "Tamanho", "Fragrância", "Combinação", "Versão técnica"];

function novaVariacaoBlank() {
  return { nome: "", tipo: "", sku: "", ean: "", custo: 0, venda: 0,
    precoDiv: "", precoSalao: "", precoPromo: "", est: 0, min: 0, imagens: [], ativo: true };
}

function VariacoesTab({ value, onChange }) {
  const vars = Array.isArray(value) ? value : [];
  const [openIdx, setOpenIdx] = useProdFormState(-1);

  const updItem  = (i, patch) => onChange(vars.map((v, idx) => idx === i ? { ...v, ...patch } : v));
  const setField = (i, k, val) => updItem(i, { [k]: val });
  const add = () => { onChange([...vars, novaVariacaoBlank()]); setOpenIdx(vars.length); };
  const remove = (i) => {
    if (!confirm(`Remover a variação "${vars[i].nome || `#${i + 1}`}"?`)) return;
    onChange(vars.filter((_, idx) => idx !== i));
    setOpenIdx(-1);
  };
  const aplicarPrecos = () => {
    if (vars.length < 2) return;
    if (!confirm("Copiar custo e preços da 1ª variação para todas as outras?")) return;
    const b = vars[0];
    onChange(vars.map((v, i) => i === 0 ? v : {
      ...v, custo: b.custo, venda: b.venda,
      precoDiv: b.precoDiv, precoSalao: b.precoSalao, precoPromo: b.precoPromo,
    }));
  };

  return (
    <div style={{ padding: "0 24px 32px" }}>
      <div style={{ margin: "4px 0 16px", padding: "11px 14px", borderRadius: 8,
        background: "rgba(201,163,107,0.06)", border: "1px solid rgba(201,163,107,0.18)",
        fontSize: 12, color: "var(--tm-fg-2)", display: "flex", gap: 8, lineHeight: 1.55 }}>
        <Icon name="info" size={13} style={{ color: "var(--tm-brand-champagne)", flexShrink: 0, marginTop: 1 }} />
        <span>Use variações para cores, volumes, tamanhos ou fragrâncias do mesmo item.
          Quando o produto tem variações, ele passa a ser uma vitrine — a venda e o estoque
          acontecem em cada variação.</span>
      </div>

      <FormSection title="Variações do produto"
        meta={vars.length ? `${vars.length} variaç${vars.length === 1 ? "ão" : "ões"}` : ""}>
        {vars.length === 0 && (
          <div style={{ padding: "26px 0", textAlign: "center", color: "var(--tm-fg-3)" }}>
            <Icon name="layers" size={30} style={{ opacity: 0.3, marginBottom: 8 }} />
            <div style={{ fontSize: 13 }}>Nenhuma variação cadastrada</div>
            <div style={{ fontSize: 11.5, marginTop: 2 }}>Clique em "Adicionar variação" para começar</div>
          </div>
        )}

        {vars.map((v, i) => {
          const aberta = openIdx === i;
          return (
            <div key={i} style={{ border: "1px solid var(--tm-line-1)", borderRadius: 9, marginBottom: 8, overflow: "hidden" }}>
              <div onClick={() => setOpenIdx(aberta ? -1 : i)}
                style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", cursor: "pointer",
                  background: aberta ? "var(--tm-bg-2)" : "transparent" }}>
                <Icon name={aberta ? "chevron-down" : "chevron-right"} size={14} className="muted" />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{v.nome || `Variação ${i + 1}`}</div>
                  <div className="muted" style={{ fontSize: 11 }}>
                    {[v.tipo, v.sku].filter(Boolean).join(" · ") || "sem SKU"}
                  </div>
                </div>
                <span className="muted" style={{ fontSize: 12 }}>R$ {brl(v.venda || 0)}</span>
                <span className="muted" style={{ fontSize: 12, minWidth: 52, textAlign: "right" }}>{Number(v.est) || 0} un</span>
                <button className="icon-btn danger" title="Remover variação"
                  onClick={(e) => { e.stopPropagation(); remove(i); }}>
                  <Icon name="trash-2" size={14} />
                </button>
              </div>
              {aberta && (
                <div style={{ padding: "4px 14px 14px", borderTop: "1px solid var(--tm-line-1)" }}>
                  <div className="field-grid-3">
                    <FText label="Nome da variação" required value={v.nome} onChange={(x) => setField(i, "nome", x)} placeholder="7.0 Louro Médio" />
                    <FSelect label="Tipo" value={v.tipo || ""} onChange={(x) => setField(i, "tipo", x)} options={VARIACAO_TIPOS} />
                    <FText label="SKU" value={v.sku} onChange={(x) => setField(i, "sku", x)} placeholder="TMX-000-00" />
                  </div>
                  <div className="field-grid-3">
                    <FText label="GTIN / EAN" value={v.ean} onChange={(x) => setField(i, "ean", x)} placeholder="7891234567890" />
                    <FNum label="Estoque" value={v.est} onChange={(x) => setField(i, "est", x)} />
                    <FNum label="Estoque mínimo" value={v.min} onChange={(x) => setField(i, "min", x)} />
                  </div>
                  <div className="field-grid-4">
                    <FNum label="Custo" suffix="R$" value={v.custo} onChange={(x) => setField(i, "custo", x)} />
                    <FNum label="Preço de venda" suffix="R$" value={v.venda} onChange={(x) => setField(i, "venda", x)} />
                    <FNum label="Preço distribuidor" suffix="R$" value={v.precoDiv} onChange={(x) => setField(i, "precoDiv", x)} />
                    <FNum label="Preço salão" suffix="R$" value={v.precoSalao} onChange={(x) => setField(i, "precoSalao", x)} />
                  </div>
                  <div className="field-grid-4">
                    <FNum label="Preço promocional" suffix="R$" value={v.precoPromo} onChange={(x) => setField(i, "precoPromo", x)} />
                  </div>

                  <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--tm-fg-3)", margin: "10px 0 2px" }}>Fiscal da variação</div>
                  <div className="field-grid-4">
                    <FText label="NCM"  value={v.ncm}  onChange={(x) => setField(i, "ncm", x)}  placeholder="3305.10.00" />
                    <FText label="CEST" value={v.cest} onChange={(x) => setField(i, "cest", x)} placeholder="00.000.00" />
                    <FText label="CFOP" value={v.cfop} onChange={(x) => setField(i, "cfop", x)} placeholder="5102" />
                    <FText label="Registro ANVISA" value={v.registroAnvisa} onChange={(x) => setField(i, "registroAnvisa", x)} />
                  </div>
                  <div className="field-grid-4">
                    <FSelect label="Origem da mercadoria" value={v.origem || "0"} onChange={(x) => setField(i, "origem", x)} options={[
                      { value: "0", label: "0 - Nacional" },
                      { value: "1", label: "1 - Estrangeira (importação direta)" },
                      { value: "2", label: "2 - Estrangeira (mercado interno)" },
                      { value: "3", label: "3 - Nacional > 40% importado" },
                    ]} />
                  </div>

                  <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--tm-fg-3)", margin: "12px 0 4px" }}>Imagens da variação</div>
                  <ProdutoMidia value={v.imagens} onChange={(x) => setField(i, "imagens", x)} />
                </div>
              )}
            </div>
          );
        })}

        <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
          <Button variant="secondary" icon="plus" size="sm" onClick={add}>Adicionar variação</Button>
          {vars.length >= 2 && (
            <Button variant="secondary" icon="copy" size="sm" onClick={aplicarPrecos}>
              Aplicar custo e preços da 1ª a todas
            </Button>
          )}
        </div>
      </FormSection>
    </div>
  );
}

// ============================================================
// PRODUTO (SKU)
// ============================================================
function ProdutoForm({ state, set, onCancel, onSave, onDelete, linhas, categorias, marcas }) {
  const p = state.draft;
  const isNew = state.mode === "new";
  const markup = p.custo && p.venda ? (p.venda / p.custo).toFixed(2) : "—";
  const margem = p.custo && p.venda ? ((1 - p.custo / p.venda) * 100).toFixed(1) : "—";
  const [tab, setTab] = useProdFormState("produto");

  const ftabStyle = (active) => ({
    padding: "11px 18px", background: "none", border: "none",
    borderBottom: active ? "2px solid var(--tm-brand-champagne)" : "2px solid transparent",
    color: active ? "var(--tm-brand-champagne)" : "var(--tm-fg-3)",
    cursor: "pointer", fontSize: 13, fontFamily: "var(--tm-font-ui)",
    display: "inline-flex", alignItems: "center", gap: 6,
    marginBottom: -1, fontWeight: active ? 500 : 400,
    transition: "color 0.15s, border-color 0.15s",
  });

  return (
    <div className="canvas">
      <FormShell
        breadcrumb="Produtos"
        eyebrow={isNew ? "Novo produto" : p.name || "Produto"}
        title={p.name}
        meta={isNew ? "" : `SKU <b>${p.sku || "—"}</b> · Alterado em <b>14/05/2026 09:42</b>, por <b>topmix</b>`}
        isNew={isNew}
        onCancel={onCancel}
        onSave={onSave}
        onDelete={onDelete}
      >
        {/* ── Tab strip ──────────────────────────────────── */}
        <div style={{ borderBottom: "1px solid var(--tm-line-1)", display: "flex", padding: "0 24px", marginBottom: 4 }}>
          <button style={ftabStyle(tab === "produto")} onClick={() => setTab("produto")}>
            <Icon name="package" size={13} /> Produto
          </button>
          <button style={ftabStyle(tab === "calc")} onClick={() => setTab("calc")}>
            <Icon name="calculator" size={13} /> Calcular Preço
          </button>
          <button style={ftabStyle(tab === "variacoes")} onClick={() => setTab("variacoes")}>
            <Icon name="layers" size={13} /> Variações
            {Array.isArray(p.variacoes) && p.variacoes.length > 0 &&
              <span style={{ marginLeft: 4, fontSize: 11, opacity: 0.7 }}>({p.variacoes.length})</span>}
          </button>
        </div>

        {/* ── Aba Produto ────────────────────────────────── */}
        {tab === "produto" && <>
          <FormSection title="Dados cadastrais">
            <div className="field-grid-4">
              <FText label="Nome do produto" required value={p.name} onChange={(v) => set("name", v)} placeholder="Shampoo Glow System 2,5 L" />
              <FText label="SKU"   required hint="Código interno"   value={p.sku} onChange={(v) => set("sku", v)} placeholder="TMX-000-00" />
              <FText label="GTIN / EAN" hint="Código de barras" value={p.ean}  onChange={(v) => set("ean", v)} placeholder="7891234567890" />
              <FText label="Registro ANVISA" hint="Registro ou isenção" value={p.registroAnvisa} onChange={(v) => set("registroAnvisa", v)} placeholder="2.xxxxx.xxxxx" />
            </div>
            <div className="field-grid-4">
              <FSelect label="Linha"      required value={p.linha}     onChange={(v) => set("linha", v)} options={linhas} />
              <FSelect label="Categoria"  required value={p.cat}       onChange={(v) => set("cat", v)}   options={categorias} />
              <FSelect label="Marca / empresa" hint="Empresa dona do produto" value={p.marca || ""} onChange={(v) => set("marca", v)}
                options={marcas || []} />
              <FSelect label="Status"     value={p.statusCadastro || "Ativo"} onChange={(v) => set("statusCadastro", v)} options={["Ativo","Inativo","Descontinuado","Em lançamento"]} />
            </div>
            <div className="field-grid-4">
              <FSelect label="Unidade comercial" value={p.unidade || "UN"} onChange={(v) => set("unidade", v)} options={["UN","CX","KG","G","L","ML","PCT"]} />
              <FNum    label="Conteúdo"  suffix={p.unidadeConteudo || "ml"} value={p.conteudo} onChange={(v) => set("conteudo", v)} />
              <FNum    label="Peso bruto"   suffix="g" value={p.pesoBruto}   onChange={(v) => set("pesoBruto", v)} />
              <FNum    label="Peso líquido" suffix="g" value={p.pesoLiquido} onChange={(v) => set("pesoLiquido", v)} />
            </div>
          </FormSection>

          <FormSection title="Fiscal" meta="Tributos e classificação fiscal">
            <div className="field-grid-4">
              <FText   label="NCM"  required hint="Nomenclatura Comum do Mercosul" value={p.ncm} onChange={(v) => set("ncm", v)} placeholder="3305.10.00" />
              <FText   label="CEST" value={p.cest} onChange={(v) => set("cest", v)} placeholder="00.000.00" />
              <FText   label="CFOP padrão" value={p.cfop || "5102"} onChange={(v) => set("cfop", v)} />
              <FSelect label="Origem da mercadoria" value={p.origem || "0"} onChange={(v) => set("origem", v)} options={[
                { value: "0", label: "0 - Nacional" },
                { value: "1", label: "1 - Estrangeira (importação direta)" },
                { value: "2", label: "2 - Estrangeira (mercado interno)" },
                { value: "3", label: "3 - Nacional com >40% conteúdo importado" },
              ]} />
            </div>
            <div className="field-grid-4">
              <FNum label="ICMS"   suffix="%" value={p.icms}   onChange={(v) => set("icms", v)} />
              <FNum label="IPI"    suffix="%" value={p.ipi}    onChange={(v) => set("ipi", v)} />
              <FNum label="PIS"    suffix="%" value={p.pis}    onChange={(v) => set("pis", v)} />
              <FNum label="COFINS" suffix="%" value={p.cofins} onChange={(v) => set("cofins", v)} />
            </div>
          </FormSection>

          <FormSection title="Preços" meta="Custo, venda e preços por canal de distribuição">
            <div className="field-grid-4">
              <FNum label="Custo médio"          suffix="R$" value={p.custo}    onChange={(v) => set("custo", v)} />
              <FNum label="Preço de venda" required suffix="R$" value={p.venda}   onChange={(v) => set("venda", v)} />
              <div className="field">
                <FieldLabel label="Markup calculado" hint="Venda ÷ Custo" />
                <div className="input" style={{ display: "flex", alignItems: "center", color: "var(--tm-brand-champagne)", fontWeight: 600 }}>{markup}×</div>
              </div>
              <div className="field">
                <FieldLabel label="Margem bruta" hint="(Venda − Custo) ÷ Venda" />
                <div className="input" style={{ display: "flex", alignItems: "center", color: "var(--tm-success)", fontWeight: 600 }}>{margem}%</div>
              </div>
            </div>

            {/* ── Preços por canal ── */}
            <div style={{
              margin: "6px 0 2px",
              padding: "12px 14px 10px",
              borderRadius: 8,
              background: "rgba(201,163,107,0.05)",
              border: "1px solid rgba(201,163,107,0.15)",
            }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: "var(--tm-fg-3)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 10 }}>
                Preços por canal — usados nas tabelas de preço do sistema
              </div>
              <div className="field-grid-4">
                <FNum label="Preço distribuidor"      hint="Tabela Distribuidor"   suffix="R$" value={p.precoDiv}   onChange={(v) => set("precoDiv", v)} />
                <FNum label="Preço salão / barbearia" hint="Tabela Salão"          suffix="R$" value={p.precoSalao} onChange={(v) => set("precoSalao", v)} />
                <FNum label="Preço cliente final"     hint="Tabela Cliente Final"  suffix="R$" value={p.venda}      onChange={(v) => set("venda", v)} />
                <FNum label="Preço promocional"       hint="Tabela Promocional"    suffix="R$" value={p.precoPromo} onChange={(v) => set("precoPromo", v)} />
              </div>
            </div>

            <div className="field-grid-3">
              <FDate label="Promo válida até"    value={p.promoValidade} onChange={(v) => set("promoValidade", v)} />
              <FNum  label="Desconto máx. PDV"   suffix="%"  value={p.descMaxPdv}   onChange={(v) => set("descMaxPdv", v)} />
              <FNum  label="Comissão da venda"   suffix="%"  value={p.comissao}     onChange={(v) => set("comissao", v)} />
            </div>
          </FormSection>

          <FormSection title="Estoque">
            <div className="field-grid-4">
              <FNum label="Estoque atual" value={p.est} onChange={(v) => set("est", v)} />
              <FNum label="Mínimo"        hint="Dispara alerta de reposição" value={p.min} onChange={(v) => set("min", v)} />
              <FNum label="Máximo"        value={p.max} onChange={(v) => set("max", v)} />
              <FText label="Localização"  hint="Corredor / prateleira" value={p.localizacao} onChange={(v) => set("localizacao", v)} placeholder="A-12 / P-03" />
            </div>
            <div className="field" style={{ gap: 10 }}>
              <FieldLabel label="Controle de lote e validade" />
              <div className="switch-row">
                <FSwitch label="Controla lote"     value={p.controlaLote}     onChange={(v) => set("controlaLote", v)} />
                <FSwitch label="Controla validade" value={p.controlaValidade} onChange={(v) => set("controlaValidade", v)} />
                <FSwitch label="Permite venda fracionada" value={p.fracionado} onChange={(v) => set("fracionado", v)} />
              </div>
            </div>
            <div className="field-grid-3">
              <FText label="Fornecedor principal" value={p.fornecedor} onChange={(v) => set("fornecedor", v)} placeholder="Razão social" />
              <FNum  label="Lead time"  suffix="dias" hint="Tempo de reposição" value={p.leadTime} onChange={(v) => set("leadTime", v)} />
              <FNum  label="Lote de compra padrão" value={p.lotePadrao} onChange={(v) => set("lotePadrao", v)} />
            </div>
          </FormSection>

          <FormSection title="Conteúdo de marketing" collapsible defaultOpen>
            <FTextarea label="Descrição curta"   rows={2} value={p.descCurta}  onChange={(v) => set("descCurta", v)}  placeholder="Frase única para listagens e carrinho" />
            <FTextarea label="Descrição completa" rows={5} value={p.descLonga} onChange={(v) => set("descLonga", v)} placeholder="Texto descritivo, benefícios, posicionamento de marca…" />
            <div className="field-grid-2">
              <FTextarea label="Ingredientes (INCI)" rows={3} value={p.ingredientes} onChange={(v) => set("ingredientes", v)} />
              <FTextarea label="Modo de uso"         rows={3} value={p.modoUso}      onChange={(v) => set("modoUso", v)} />
            </div>
            <FChipBox label="Palavras-chave"  values={p.keywords || []} onChange={(v) => set("keywords", v)} suggestions={["cabelo","brilho","reparação","hidratação","cacheado","liso"]} />
          </FormSection>

          <FormSection title="Ficha técnica do produto" meta="Informações técnicas e de aplicação" collapsible defaultOpen={false}>
            <FTextarea label="Indicação" rows={3} value={p.indicacao} onChange={(v) => set("indicacao", v)}
              placeholder="Para quem é indicado, quais processos, tipos de cabelo…" />
            <FTextarea label="Ativos principais" rows={3} value={p.ativosPrincipais} onChange={(v) => set("ativosPrincipais", v)}
              placeholder="Liste os ativos e suas funções no produto…" />
            <div className="field-grid-3">
              <FText label="pH" hint="Ex.: 3,5 a 5,5" value={p.ph} onChange={(v) => set("ph", v)} placeholder="3,5 a 5,5" />
              <FText label="Tempo de ação" value={p.tempoAcao} onChange={(v) => set("tempoAcao", v)} placeholder="Ex.: 20 a 30 minutos" />
              <FText label="Rendimento estimado" value={p.rendimentoEstimado} onChange={(v) => set("rendimentoEstimado", v)} placeholder="Ex.: 8 a 10 aplicações" />
            </div>
            <FTextarea label="Especificações técnicas" rows={4} value={p.especTecnicas} onChange={(v) => set("especTecnicas", v)}
              placeholder="Tipo, textura, concentração, volume, uso profissional/doméstico…" />
            <FTextarea label="Contraindicações" rows={3} value={p.contraindicacoes} onChange={(v) => set("contraindicacoes", v)}
              placeholder="Situações, tipos de cabelo ou condições em que o produto não deve ser usado…" />
          </FormSection>

          <FormSection title="Mídia" collapsible defaultOpen>
            <ProdutoMidia value={p.imagens} onChange={(v) => set("imagens", v)} />
          </FormSection>

          <FormSection title="Links e referências" meta="Páginas, vídeos e materiais de apoio" collapsible defaultOpen>
            <LinksList value={p.links} onChange={(v) => set("links", v)} />
          </FormSection>

          <ObservacoesSection value={p} set={set} />
          <AnexosSection />
        </>}

        {/* ── Aba Calculadora ────────────────────────────── */}
        {tab === "calc" && (
          <PrecosCalcTab p={p} set={set} onApply={() => setTab("produto")} />
        )}

        {/* ── Aba Variações ──────────────────────────────── */}
        {tab === "variacoes" && (
          <VariacoesTab value={p.variacoes} onChange={(v) => set("variacoes", v)} />
        )}
      </FormShell>
    </div>
  );
}

// ============================================================
// LINHA DE PRODUTO
// ============================================================
function LinhaForm({ state, set, onCancel, onSave, onDelete }) {
  const l = state.draft;
  const isNew = state.mode === "new";
  return (
    <div className="canvas">
      <FormShell
        breadcrumb="Linhas de Produto"
        eyebrow={isNew ? "Nova linha" : l.nome || "Linha"}
        title={l.nome}
        meta={isNew ? "" : `<b>${l.skus || 0}</b> SKUs nesta linha`}
        isNew={isNew}
        onCancel={onCancel}
        onSave={onSave}
        onDelete={onDelete}
      >
        <FormSection title="Identidade da linha">
          <div className="field-grid-3">
            <FText label="Nome" required hint="Aparece em listagens e materiais" value={l.nome} onChange={(v) => set("nome", v)} placeholder="Glow System" />
            <FText label="Slug" hint="Usado em URLs e exportação" value={l.slug} onChange={(v) => set("slug", v)} placeholder="glow-system" />
            <FSelect label="Status" value={l.status || "Ativa"} onChange={(v) => set("status", v)} options={["Ativa","Em lançamento","Descontinuada","Pausada"]} />
          </div>
          <FText label="Tagline" hint="Frase curta de posicionamento" value={l.tagline} onChange={(v) => set("tagline", v)} placeholder="Shampoo + finalizador com brilho refletor" />
          <FTextarea label="Descrição da linha" rows={4} value={l.descricao} onChange={(v) => set("descricao", v)} placeholder="Quem é o público, qual problema resolve, qual o diferencial técnico…" />
        </FormSection>

        <FormSection title="Visual & merchandising">
          <div className="field-grid-4">
            <FText label="Cor da marca" hint="Hex — usada em badges e covers" value={l.color || "#C9A36B"} onChange={(v) => set("color", v)} placeholder="#C9A36B" />
            <FSelect label="Ícone representativo" value={l.icone || "sparkles"} onChange={(v) => set("icone", v)} options={["sparkles","droplets","scissors","palette","wind","heart","flame","leaf"]} />
            <FSelect label="Categoria principal" value={l.catPrincipal} onChange={(v) => set("catPrincipal", v)} options={["Shampoo","Condicionador","Coloração","Tratamento","Finalizador","Permanente"]} />
            <FSelect label="Posicionamento" value={l.posicionamento || "Premium"} onChange={(v) => set("posicionamento", v)} options={["Entrada","Médio","Premium","Profissional","Luxo"]} />
          </div>
        </FormSection>

        <FormSection title="Comercial">
          <div className="field-grid-4">
            <FNum label="Preço médio"   suffix="R$" value={l.precoMedio}  onChange={(v) => set("precoMedio", v)} />
            <FNum label="Preço mínimo"  suffix="R$" value={l.precoMin}    onChange={(v) => set("precoMin", v)} />
            <FNum label="Preço máximo"  suffix="R$" value={l.precoMax}    onChange={(v) => set("precoMax", v)} />
            <FNum label="Comissão padrão" suffix="%" value={l.comissao || 4} onChange={(v) => set("comissao", v)} />
          </div>
          <div className="field-grid-3">
            <FSelect label="Gestor da linha" value={l.gestor} onChange={(v) => set("gestor", v)} options={((window.TM_VENDEDORES || []).map(vd => vd.nome)).filter(Boolean)} />
            <FNum    label="SKUs vinculados" hint="Atualizado automaticamente" value={l.skus} onChange={(v) => set("skus", v)} />
            <FNum    label="Meta de vendas mês" suffix="R$" value={l.metaMes} onChange={(v) => set("metaMes", v)} />
          </div>
          <FChipBox label="Tabelas de preço aplicáveis" values={l.tabelas || []} onChange={(v) => set("tabelas", v)} suggestions={["Distribuidor Ouro","Distribuidor Prata","Salão Premium","Salão Padrão","Cliente Final","Promocional · Maio"]} />
        </FormSection>

        <ObservacoesSection value={l} set={set} />
        <AnexosSection />
      </FormShell>
    </div>
  );
}

// ============================================================
// CATEGORIA
// ============================================================
function CategoriaForm({ state, set, onCancel, onSave, onDelete, categoriasPai }) {
  const c = state.draft;
  const isNew = state.mode === "new";
  return (
    <div className="canvas">
      <FormShell
        breadcrumb="Categorias"
        eyebrow={isNew ? "Nova categoria" : c.nome || "Categoria"}
        title={c.nome}
        meta={isNew ? "" : `<b>${c.skus || 0}</b> SKUs nesta categoria`}
        isNew={isNew}
        onCancel={onCancel}
        onSave={onSave}
        onDelete={onDelete}
      >
        <FormSection title="Identificação">
          <div className="field-grid-3">
            <FText label="Nome" required value={c.nome} onChange={(v) => set("nome", v)} />
            <FText label="Slug" hint="Usado em URLs" value={c.slug} onChange={(v) => set("slug", v)} placeholder="shampoo" />
            <FSelect label="Status" value={c.status || "Ativa"} onChange={(v) => set("status", v)} options={["Ativa","Inativa"]} />
          </div>
          <div className="field-grid-3">
            <FSelect label="Categoria pai" hint="Deixe em branco para nível raiz" value={c.parent} onChange={(v) => set("parent", v)} options={["— Sem categoria pai —", ...categoriasPai]} />
            <FNum    label="Ordem de exibição" value={c.ordem} onChange={(v) => set("ordem", v)} />
            <FText   label="Cor"                value={c.color || "#C9A36B"} onChange={(v) => set("color", v)} />
          </div>
          <FTextarea label="Descrição" rows={3} value={c.descricao} onChange={(v) => set("descricao", v)} />
        </FormSection>

        <FormSection title="Padrão fiscal" meta="Aplicado a novos SKUs desta categoria">
          <div className="field-grid-4">
            <FText label="NCM padrão"  value={c.ncmPadrao || "3305.10.00"} onChange={(v) => set("ncmPadrao", v)} />
            <FText label="CEST padrão" value={c.cestPadrao} onChange={(v) => set("cestPadrao", v)} />
            <FText label="CFOP padrão" value={c.cfopPadrao || "5102"} onChange={(v) => set("cfopPadrao", v)} />
            <FSelect label="Origem padrão" value={c.origemPadrao || "0"} onChange={(v) => set("origemPadrao", v)} options={[
              { value: "0", label: "0 - Nacional" },
              { value: "1", label: "1 - Estrangeira" },
            ]} />
          </div>
          <div className="field-grid-4">
            <FNum label="ICMS"   suffix="%" value={c.icms}   onChange={(v) => set("icms", v)} />
            <FNum label="IPI"    suffix="%" value={c.ipi}    onChange={(v) => set("ipi", v)} />
            <FNum label="PIS"    suffix="%" value={c.pis}    onChange={(v) => set("pis", v)} />
            <FNum label="COFINS" suffix="%" value={c.cofins} onChange={(v) => set("cofins", v)} />
          </div>
        </FormSection>

        <ObservacoesSection value={c} set={set} />
      </FormShell>
    </div>
  );
}

// ============================================================
// TABELA DE PREÇO
// ============================================================
const TIPOS_TABELA = [
  { value: "Distribuidor",  label: "Distribuidor",    icon: "truck",    color: "#3B82F6", desc: "Usa o preço distribuidor cadastrado no produto" },
  { value: "Salão",         label: "Salão / Barb.",   icon: "scissors", color: "#8B5CF6", desc: "Usa o preço salão / barbearia do produto" },
  { value: "Cliente Final", label: "Cliente Final",   icon: "user",     color: "#22C55E", desc: "Usa o preço de venda (cliente final)" },
  { value: "Promocional",   label: "Promocional",     icon: "tag",      color: "#F59E0B", desc: "Usa o preço promocional do produto" },
  { value: "Personalizada", label: "Personalizada",   icon: "sliders",  color: "#C9A36B", desc: "Desconto % sobre preço de venda — configurável" },
];

function TabelaPrecoForm({ state, set, onCancel, onSave, onDelete }) {
  const t = state.draft;
  const isNew = state.mode === "new";
  const tipoAtual = t.tipo || "Personalizada";
  const tipoInfo  = TIPOS_TABELA.find(x => x.value === tipoAtual) || TIPOS_TABELA[4];
  return (
    <div className="canvas">
      <FormShell
        breadcrumb="Tabelas de Preço"
        eyebrow={isNew ? "Nova tabela" : t.nome || "Tabela"}
        title={t.nome}
        meta={isNew ? "" : `<b>${t.prods || 0}</b> produtos aplicados`}
        isNew={isNew}
        onCancel={onCancel}
        onSave={onSave}
        onDelete={onDelete}
      >
        {/* ── Tipo da tabela ─────────────────────────── */}
        <FormSection title="Tipo de tabela" meta="Define qual coluna de preço do produto será usada nos pedidos">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10 }}>
            {TIPOS_TABELA.map(opt => {
              const sel = tipoAtual === opt.value;
              return (
                <div
                  key={opt.value}
                  onClick={() => set("tipo", opt.value)}
                  style={{
                    padding: "13px 11px", borderRadius: 10, cursor: "pointer",
                    border: `1.5px solid ${sel ? opt.color : "var(--tm-line-1)"}`,
                    background: sel ? `${opt.color}15` : "var(--tm-bg-2)",
                    display: "flex", flexDirection: "column", gap: 6,
                    transition: "border-color 0.15s, background 0.15s",
                  }}
                >
                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                    <Icon name={opt.icon} size={14} style={{ color: sel ? opt.color : "var(--tm-fg-3)", flexShrink: 0 }} />
                    <span style={{ fontSize: 12.5, fontWeight: sel ? 600 : 400, color: sel ? opt.color : "var(--tm-fg-2)" }}>
                      {opt.label}
                    </span>
                  </div>
                  <span style={{ fontSize: 11, color: "var(--tm-fg-3)", lineHeight: 1.45 }}>{opt.desc}</span>
                </div>
              );
            })}
          </div>
          {tipoAtual !== "Personalizada" && (
            <div style={{
              marginTop: 12, padding: "10px 14px", borderRadius: 8,
              background: `${tipoInfo.color}0D`, border: `1px solid ${tipoInfo.color}33`,
              fontSize: 12, color: "var(--tm-fg-2)", lineHeight: 1.55,
            }}>
              <Icon name="info" size={12} style={{ marginRight: 6, color: tipoInfo.color, verticalAlign: "text-bottom" }} />
              Tabela padrão: ao selecionar <b>"{tipoInfo.label}"</b> num pedido, os itens serão preenchidos automaticamente com o preço correspondente de cada produto.
              O campo "Desconto padrão" abaixo é opcional — permite aplicar um desconto adicional sobre esse preço.
            </div>
          )}
        </FormSection>

        <FormSection title="Dados da tabela">
          <div className="field-grid-3">
            <FText label="Nome" required value={t.nome} onChange={(v) => set("nome", v)} placeholder="Distribuidor Ouro" />
            <FSelect label="Canal de venda" required value={t.canal || "B2B"} onChange={(v) => set("canal", v)} options={["B2B","B2C","Salão","PDV","Marketplace","Promocional"]} />
            <FSelect label="Status" value={t.status || "Ativa"} onChange={(v) => set("status", v)} options={["Ativa","Inativa","Programada","Encerrada"]} />
          </div>
          <FText label="Descrição curta" hint="Mostrada na listagem" value={t.desc} onChange={(v) => set("desc", v)} placeholder="B2B · rede ≥ 15 salões" />
        </FormSection>

        <FormSection title="Regra de desconto">
          <div className="field-grid-4">
            <FText  label="Desconto padrão" required suffix="%" value={t.desconto} onChange={(v) => set("desconto", v)} placeholder="30%" />
            <FNum   label="Desconto máx. extra" suffix="%" value={t.descMax} onChange={(v) => set("descMax", v)} />
            <FNum   label="Mínimo de pedido"   suffix="R$" value={t.minPedido} onChange={(v) => set("minPedido", v)} />
            <FNum   label="Mínimo de itens"     value={t.minItens} onChange={(v) => set("minItens", v)} />
          </div>
          <div className="field-grid-3">
            <FDate label="Válida de"  value={t.validaDe}  onChange={(v) => set("validaDe", v)} />
            <FDate label="Válida até" value={t.validaAte} onChange={(v) => set("validaAte", v)} />
            <FSelect label="Recorrência" value={t.recorrencia || "Permanente"} onChange={(v) => set("recorrencia", v)} options={["Permanente","Mensal","Sazonal","Promoção pontual"]} />
          </div>
        </FormSection>

        <FormSection title="Aplicação">
          <FChipBox label="Linhas aplicáveis"     hint="Vazio = todas as linhas"     values={t.linhasAplic     || []} onChange={(v) => set("linhasAplic", v)}     suggestions={["Glow System","Top Color","Top Hair Care","Top Barber","Top Curl","Top Spa"]} />
          <FChipBox label="Categorias aplicáveis" hint="Vazio = todas as categorias" values={t.categoriasAplic || []} onChange={(v) => set("categoriasAplic", v)} suggestions={["Shampoo","Condicionador","Coloração","Tratamento","Finalizador","Permanente"]} />
          <FChipBox label="UFs habilitadas"       hint="Vazio = nacional"             values={t.ufs             || []} onChange={(v) => set("ufs", v)}             suggestions={["SP","RJ","MG","PR","SC","RS","BA","PE","CE","DF"]} />
        </FormSection>

        <ObservacoesSection value={t} set={set} />
        <AnexosSection />
      </FormShell>
    </div>
  );
}

// ============================================================
// MOVIMENTAÇÃO DE ESTOQUE
// ============================================================
function MovEstoqueForm({ state, set, onCancel, onSave, onDelete, produtos, variacoes }) {
  const m = state.draft;
  const isNew = state.mode === "new";
  const isSaida = m.tipo === "Saída" || m.tipo === "Ajuste";
  const prodSel = (produtos || []).find(o => o.value === m.produtoId);
  const varsDoProd = (prodSel && prodSel.temVariacoes)
    ? (variacoes || []).filter(x => x.produtoId === prodSel.value) : [];
  return (
    <div className="canvas">
      <FormShell
        breadcrumb="Movimentações de Estoque"
        eyebrow={isNew ? "Nova movimentação" : `${m.tipo} · ${m.sku}`}
        title={m.motivo}
        meta={isNew ? "" : `<b>${m.when || ""}</b> · por <b>${m.who || "topmix"}</b>`}
        isNew={isNew}
        onCancel={onCancel}
        onSave={onSave}
        onDelete={onDelete}
      >
        <FormSection title="Movimentação">
          <div className="field-grid-4">
            <FSelect label="Tipo" required value={m.tipo || "Entrada"} onChange={(v) => set("tipo", v)} options={["Entrada","Saída","Ajuste","Transferência"]} />
            <FSelect label="Produto" required value={m.produtoId || ""}
              onChange={(v) => {
                const prod = (produtos || []).find(o => o.value === v);
                set({ produtoId: v, sku: prod ? (prod.sku || "") : "", variacaoId: null });
              }}
              options={produtos} />
            <FNum    label="Quantidade" required value={m.qty != null ? Math.abs(m.qty) : ""} onChange={(v) => set("qty", isSaida ? -Math.abs(v) : Math.abs(v))} />
            <FNum    label="Custo unitário" suffix="R$" value={m.custoUn} onChange={(v) => set("custoUn", v)} />
          </div>
          {prodSel && prodSel.temVariacoes && (
            <div className="field-grid-4">
              <FSelect label="Variação" required value={m.variacaoId || ""}
                hint="Este produto tem variações — escolha qual"
                onChange={(vid) => {
                  const vv = varsDoProd.find(x => x.id === vid);
                  set({ variacaoId: vid, sku: vv ? (vv.sku || "") : "" });
                }}
                options={varsDoProd.map(x => ({ value: x.id, label: x.nome + (x.sku ? " · " + x.sku : "") }))} />
            </div>
          )}
          <div className="field-grid-4">
            <FText label="Motivo / referência" required value={m.motivo} onChange={(v) => set("motivo", v)} placeholder="Compra Fornecedor A · NF 1245" />
            <FText label="Número da NF"       value={m.nf} onChange={(v) => set("nf", v)} />
            <FText label="Lote"               value={m.lote} onChange={(v) => set("lote", v)} />
            <FDate label="Validade do lote"   value={m.validade} onChange={(v) => set("validade", v)} />
          </div>
          <div className="field-grid-3">
            <FSelect label="Responsável" value={m.who} onChange={(v) => set("who", v)} options={["Gabriela N.","Henrique O.","Bianca R.","Tatiana M.","IA Comercial","topmix"]} />
            <FText   label="Localização" value={m.localizacao} onChange={(v) => set("localizacao", v)} placeholder="A-12 / P-03" />
            <FDate   label="Data da movimentação" value={m.when} onChange={(v) => set("when", v)} />
          </div>
        </FormSection>

        <ObservacoesSection value={m} set={set} />
      </FormShell>
    </div>
  );
}

Object.assign(window, { ProdutoForm, LinhaForm, CategoriaForm, TabelaPrecoForm, MovEstoqueForm });