/* global React, Icon, Button, Badge, Card, brl */

// ============================================================
// CRM_Forms.jsx — full-page cadastro/edição used by all four
// CRM lists. Sections: Dados cadastrais, Endereço (Geral/Cobrança),
// Contato, Dados adicionais, Financeiro, Observações, Anexos.
// ============================================================

const { useState: useFormState } = React;

// ── Hook: carrega representantes e distribuidores reais do banco ──
function useRepsDists() {
  const [reps,  setReps]  = useFormState([]);
  const [dists, setDists] = useFormState([]);
  React.useEffect(() => {
    if (!window.tmSupabase) return;
    window.tmSupabase.from('representantes').select('nome').order('nome')
      .then(({ data }) => { if (data?.length) setReps(data.map(r => r.nome)); });
    window.tmSupabase.from('distribuidores').select('nome').order('nome')
      .then(({ data }) => { if (data?.length) setDists(data.map(d => d.nome)); });
  }, []);  // eslint-disable-line
  const repOpts  = reps.length  ? reps  : ['— Nenhum representante cadastrado —'];
  const distOpts = dists.length ? dists : ['— Nenhum distribuidor cadastrado —'];
  return { repOpts, distOpts };
}

// ============================================================
// Shell + section primitives
// ============================================================
function FormShell({ eyebrow, breadcrumb, title, meta, onCancel, onSave, onDelete, isNew, extraActions, children }) {
  return (
    <div className="form-shell">
      <div className="form-head">
        <div className="titles">
          <div className="crumbs">
            <button onClick={onCancel}>…</button>
            <span className="sep">›</span>
            <button onClick={onCancel}>{breadcrumb}</button>
            <span className="sep">›</span>
            <span className="current">{isNew ? "Novo" : title}</span>
          </div>
          <div className="form-title">{eyebrow}</div>
          {meta && <div className="form-meta" dangerouslySetInnerHTML={{ __html: meta }} />}
        </div>
        <div className="actions" style={{ flexDirection: "column", alignItems: "flex-end" }}>
          <div style={{ display: "flex", gap: 10 }}>
            {extraActions}
            {!isNew && onDelete && (
              <Button variant="ghost" icon="trash-2" onClick={onDelete}>Excluir</Button>
            )}
            <Button variant="secondary" onClick={onCancel}>Cancelar</Button>
            <Button variant="primary" onClick={onSave}>Salvar</Button>
          </div>
          <div className="req-note"><span className="ast">(*)</span> Campos obrigatórios</div>
        </div>
      </div>
      {children}
    </div>
  );
}

function FormSection({ title, meta, collapsible = false, defaultOpen = true, children }) {
  const [open, setOpen] = useFormState(defaultOpen);
  return (
    <div className={`form-section ${!open ? "collapsed" : ""}`}>
      <div className="sh">
        <span>{title}</span>
        {meta && <span className="meta">{meta}</span>}
        {collapsible && (
          <button className="chev" onClick={() => setOpen(!open)} aria-label="Recolher">
            <Icon name="chevron-down" size={16} />
          </button>
        )}
      </div>
      <div className="body">{children}</div>
    </div>
  );
}

// Field building blocks
function FieldLabel({ label, required, hint }) {
  return (
    <span>
      {label}
      {required && <span className="ast">*</span>}
      {hint && <span className="info-dot" title={hint}>i</span>}
    </span>
  );
}
function FText({ label, required, hint, value, onChange, placeholder, suffix, icon }) {
  return (
    <label className="field">
      <FieldLabel label={label} required={required} hint={hint} />
      <div className="input-wrap">
        {icon && <span className="field-icon"><Icon name={icon} size={14} /></span>}
        <input className={`input ${icon ? "with-icon" : ""}`}
          value={value ?? ""}
          placeholder={placeholder}
          onChange={(e) => onChange(e.target.value)} />
        {suffix && <span className="field-suffix">{suffix}</span>}
      </div>
    </label>
  );
}
function FNum({ label, required, hint, value, onChange, suffix, placeholder }) {
  return (
    <label className="field">
      <FieldLabel label={label} required={required} hint={hint} />
      <div className="input-wrap">
        <input className="input" type="number"
          value={value ?? ""}
          placeholder={placeholder}
          onChange={(e) => onChange(e.target.value === "" ? "" : Number(e.target.value))} />
        {suffix && <span className="field-suffix">{suffix}</span>}
      </div>
    </label>
  );
}
function FDate({ label, required, hint, value, onChange }) {
  return (
    <label className="field">
      <FieldLabel label={label} required={required} hint={hint} />
      <div className="input-wrap">
        <input className="input" value={value ?? ""}
          placeholder="DD/MM/AAAA"
          onChange={(e) => onChange(e.target.value)} />
        <span className="field-suffix"><Icon name="calendar" size={14} /></span>
      </div>
    </label>
  );
}
function FSelect({ label, required, hint, value, onChange, options }) {
  return (
    <label className="field">
      <FieldLabel label={label} required={required} hint={hint} />
      <select className="input"
        value={value ?? ""}
        onChange={(e) => onChange(e.target.value)}>
        <option value="" disabled>selecione</option>
        {options.map(o => {
          const opt = typeof o === "string" ? { value: o, label: o } : o;
          return <option key={opt.value} value={opt.value}>{opt.label}</option>;
        })}
      </select>
    </label>
  );
}
function FCombo({ label, required, hint, value, onChange, options, placeholder }) {
  const [open, setOpen] = React.useState(false);
  const [q, setQ]       = React.useState("");
  const ref             = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", close);
    return () => document.removeEventListener("mousedown", close);
  }, [open]);

  const filtered = options.filter(o => {
    const lbl = typeof o === "string" ? o : o.label;
    return !q || lbl.toLowerCase().includes(q.toLowerCase());
  });

  const pick = (v) => { onChange(v); setQ(""); setOpen(false); };

  return (
    <label className="field" style={{ position: "relative" }} ref={ref}>
      <FieldLabel label={label} required={required} hint={hint} />
      <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
        <input
          className="input"
          value={value ?? ""}
          onChange={(e) => { onChange(e.target.value); setQ(e.target.value); setOpen(true); }}
          onFocus={() => setOpen(true)}
          placeholder={placeholder || "Selecione ou digite…"}
          autoComplete="off"
          style={{ paddingRight: 32 }}
        />
        <button type="button" tabIndex={-1}
          onClick={() => setOpen(o => !o)}
          style={{ position: "absolute", right: 8, background: "none", border: "none",
            color: "var(--tm-fg-3)", cursor: "pointer", padding: 0, lineHeight: 1 }}>
          <Icon name={open ? "chevron-up" : "chevron-down"} size={13} />
        </button>
      </div>
      {open && (
        <div style={{
          position: "absolute", top: "100%", left: 0, right: 0, zIndex: 200,
          background: "var(--tm-bg-2)", border: "1px solid var(--tm-line-1)",
          borderRadius: 8, boxShadow: "0 6px 20px rgba(0,0,0,0.35)",
          maxHeight: 220, overflowY: "auto", marginTop: 4,
        }}>
          {filtered.length === 0 && (
            <div style={{ padding: "10px 12px", fontSize: 12.5, color: "var(--tm-fg-3)" }}>
              Nenhuma opção — valor personalizado será salvo
            </div>
          )}
          {filtered.map(o => {
            const opt = typeof o === "string" ? { value: o, label: o } : o;
            const active = opt.value === value;
            return (
              <div key={opt.value}
                onMouseDown={(e) => { e.preventDefault(); pick(opt.value); }}
                style={{
                  padding: "9px 12px", fontSize: 13, cursor: "pointer",
                  background: active ? "color-mix(in srgb, var(--tm-brand-champagne) 12%, transparent)" : "transparent",
                  color: active ? "var(--tm-brand-champagne)" : "var(--tm-fg-1)",
                  borderBottom: "1px solid var(--tm-line-1)",
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.background = "var(--tm-bg-3)"; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.background = "transparent"; }}
              >
                {opt.label}
              </div>
            );
          })}
        </div>
      )}
    </label>
  );
}
function FTextarea({ label, value, onChange, placeholder, rows = 4 }) {
  return (
    <label className="field">
      <FieldLabel label={label} />
      <textarea className="input" rows={rows}
        value={value ?? ""}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)} />
    </label>
  );
}
function FSwitch({ label, value, onChange }) {
  return (
    <div className={`switch ${value ? "on" : ""}`} onClick={() => onChange(!value)}>
      <span className="track" />
      <span className="lab">{label}</span>
    </div>
  );
}
function FChipBox({ label, hint, values, onChange, suggestions = [] }) {
  const [draft, setDraft] = useFormState("");
  const add = (v) => { if (v && !values.includes(v)) onChange([...values, v]); setDraft(""); };
  const remove = (v) => onChange(values.filter(x => x !== v));
  return (
    <label className="field">
      <FieldLabel label={label} hint={hint} />
      <div className="chip-tagbox">
        {values.map(v => (
          <span key={v} className="tg">{v} <span className="x" onClick={() => remove(v)}>×</span></span>
        ))}
        <input
          value={draft}
          placeholder={values.length ? "" : "Digite e tecle Enter…"}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(draft.trim()); } }}
        />
      </div>
      {suggestions.length > 0 && (
        <div style={{ display: "flex", gap: 6, marginTop: 4, flexWrap: "wrap" }}>
          {suggestions.filter(s => !values.includes(s)).slice(0, 6).map(s => (
            <button key={s} className="add-link" onClick={() => add(s)}>+ {s}</button>
          ))}
        </div>
      )}
    </label>
  );
}

// ============================================================
// Reusable composite sections
// ============================================================
const UF_OPTS = ["AC","AL","AM","AP","BA","CE","DF","ES","GO","MA","MG","MS","MT","PA","PB","PE","PI","PR","RJ","RN","RO","RR","RS","SC","SE","SP","TO"];

function EnderecoSection({ value, set }) {
  const [tab, setTab]           = useFormState("geral");
  const [cepLoading, setCepLoading] = useFormState(false);
  const v = value || {};

  const cepDigits = (v[`${tab}_cep`] || '').replace(/\D/g, '');

  React.useEffect(() => {
    if (cepDigits.length !== 8) return;
    setCepLoading(true);
    fetch(`https://viacep.com.br/ws/${cepDigits}/json/`)
      .then(r => r.json())
      .then(data => {
        if (!data.erro) {
          set({
            [`${tab}_uf`]:       data.uf        || '',
            [`${tab}_cidade`]:   data.localidade || '',
            [`${tab}_bairro`]:   data.bairro     || '',
            [`${tab}_endereco`]: data.logradouro || '',
          });
        }
      })
      .catch(() => {})
      .finally(() => setCepLoading(false));
  }, [cepDigits, tab]);  // eslint-disable-line

  return (
    <FormSection title="Endereço">
      <div className="section-tabs">
        <span className={`stab ${tab === "geral" ? "active" : ""}`} onClick={() => setTab("geral")}>Geral</span>
        <span className={`stab ${tab === "cobranca" ? "active" : ""}`} onClick={() => setTab("cobranca")}>Cobrança</span>
      </div>
      <div className="field-grid-4">
        <FText label="CEP" icon={cepLoading ? "loader" : "search"}
          value={v[`${tab}_cep`]} onChange={(x) => set(`${tab}_cep`, x)}
          placeholder="00000-000" hint={cepLoading ? "Buscando…" : "Digite para preencher o endereço"} />
        <FSelect label="UF"   value={v[`${tab}_uf`]}     onChange={(x) => set(`${tab}_uf`, x)}     options={UF_OPTS} />
        <FText   label="Cidade" value={v[`${tab}_cidade`]} onChange={(x) => set(`${tab}_cidade`, x)} />
        <FText   label="Bairro" value={v[`${tab}_bairro`]} onChange={(x) => set(`${tab}_bairro`, x)} />
      </div>
      <div className="field-grid-6">
        <FText label="Endereço"        hint="Logradouro" value={v[`${tab}_endereco`]}   onChange={(x) => set(`${tab}_endereco`, x)} />
        <FText label="Endereço (cont.)"                  value={v[`${tab}_endereco2`]}  onChange={(x) => set(`${tab}_endereco2`, x)} />
        <FText label="Complemento"                       value={v[`${tab}_complemento`]} onChange={(x) => set(`${tab}_complemento`, x)} />
        <FText label="Número"                            value={v[`${tab}_numero`]}      onChange={(x) => set(`${tab}_numero`, x)} />
        <FText label="Referência"                        value={v[`${tab}_referencia`]}  onChange={(x) => set(`${tab}_referencia`, x)} />
        <FText label="País"                              value={v[`${tab}_pais`] ?? "Brasil"} onChange={(x) => set(`${tab}_pais`, x)} />
      </div>
    </FormSection>
  );
}

function ContatoSection({ value, set }) {
  return (
    <FormSection title="Contato" meta="Informações de contato">
      <div className="field-grid-5">
        <FText label="Telefone fixo" icon="phone"           value={value.fone}     onChange={(x) => set("fone", x)} placeholder="(00) 0000-0000" />
        <FText label="Fax"                                  value={value.fax}      onChange={(x) => set("fax", x)} />
        <FText label="Celular"       icon="smartphone"      value={value.celular}  onChange={(x) => set("celular", x)} placeholder="(00) 00000-0000" />
        <FSelect label="Operadora" value={value.operadora} onChange={(x) => set("operadora", x)}
                 options={["Vivo","Claro","TIM","Oi","Algar","Outra"]} />
        <FText label="E-mail"       icon="mail"             value={value.email}    onChange={(x) => set("email", x)} placeholder="contato@exemplo.com" />
      </div>
      <div className="field-grid-4">
        <FText label="E-mail para envio da NFe" hint="Receberá XML/DANFE"  value={value.emailNfe} onChange={(x) => set("emailNfe", x)} />
        <FText label="WebSite"  icon="globe"        value={value.website}  onChange={(x) => set("website", x)} placeholder="https://" />
        <FText label="Skype"                        value={value.skype}    onChange={(x) => set("skype", x)} />
        <FDate label="Próxima visita" hint="Lembrete para CRM" value={value.proxVisita} onChange={(x) => set("proxVisita", x)} />
      </div>
    </FormSection>
  );
}

function FinanceiroSection({ value, set, extras }) {
  const ilimitado = value.limiteIlimitado;
  const zero = value.limiteZero;
  return (
    <FormSection title="Financeiro">
      <div className="field" style={{ gap: 10 }}>
        <FieldLabel label="Limite de crédito" hint="Defina como ilimitado, zero ou valor específico" />
        <div className="switch-row">
          <FSwitch label="Ilimitado"   value={ilimitado} onChange={(v) => { set("limiteIlimitado", v); if (v) set("limiteZero", false); }} />
          <FSwitch label="Limite zero" value={zero}      onChange={(v) => { set("limiteZero", v); if (v) set("limiteIlimitado", false); }} />
        </div>
      </div>
      <div className="field-grid-3">
        <FNum
          label="Valor do limite"
          value={ilimitado || zero ? "" : value.limiteValor}
          onChange={(v) => set("limiteValor", v)}
          suffix="R$"
          placeholder={ilimitado ? "Ilimitado" : zero ? "0,00" : ""}
        />
        <FSelect label="Condição de pagamento" hint="Prazo padrão" value={value.condPag} onChange={(x) => set("condPag", x)}
                 options={["À vista","30 dias","30/60","30/60/90","Boleto 21 dias","Cartão 2x","Cartão 3x","Cartão 6x"]} />
        <FSelect label="Categoria" hint="Agrupamento financeiro" value={value.categoria} onChange={(x) => set("categoria", x)}
                 options={["Clientes A","Clientes B","Clientes C","Inadimplentes","VIP"]} />
      </div>
      {extras}
    </FormSection>
  );
}

function ObservacoesSection({ value, set }) {
  return (
    <FormSection title="Observações">
      <FTextarea label="Notas internas" rows={5}
        value={value.observacoes} onChange={(x) => set("observacoes", x)}
        placeholder="Detalhes operacionais, preferências do cliente, restrições, histórico relevante…" />
    </FormSection>
  );
}

function AnexosSection() {
  return (
    <FormSection title="Anexos" collapsible defaultOpen={false} meta="0 arquivos">
      <div className="attach-empty">
        <div className="ico"><Icon name="paperclip" size={18} /></div>
        <div style={{ flex: 1 }}>
          Arraste arquivos aqui ou <button className="add-link" style={{ verticalAlign: "baseline" }}>selecione no computador</button>
          <div style={{ fontSize: 11, color: "var(--tm-fg-3)", marginTop: 2 }}>PDF, JPG, PNG, DOCX, XLSX — máx 10 MB por arquivo</div>
        </div>
        <Button variant="secondary" icon="upload" size="sm">Enviar</Button>
      </div>
    </FormSection>
  );
}

// ============================================================
// CLIENTE FINAL (PF)
// ============================================================
function ClienteForm({ state, set, onCancel, onSave, onDelete }) {
  const c = state.draft;
  const isNew = state.mode === "new";
  const { repOpts } = useRepsDists();
  return (
    <div className="canvas">
      <FormShell
        breadcrumb="Clientes Finais"
        eyebrow={isNew ? "Novo cliente" : c.nome || "Cliente"}
        title={c.nome}
        meta={isNew ? "" : `Alterado em <b>14/05/2026 09:42</b>, por <b>topmix</b>`}
        isNew={isNew}
        onCancel={onCancel}
        onSave={onSave}
        onDelete={onDelete}
      >
        {/* Dados cadastrais */}
        <FormSection title="Dados cadastrais">
          <div className="field-grid-3">
            <FText  label="Nome" required hint="Nome completo do cliente" value={c.nome}     onChange={(v) => set("nome", v)} />
            <FText  label="Fantasia"      hint="Apelido / nome social"     value={c.fantasia} onChange={(v) => set("fantasia", v)} />
            <FText  label="Código"        hint="Gerado automaticamente"    value={c.codigo}   onChange={(v) => set("codigo", v)} placeholder="10116" />
          </div>
          <div className="field-grid-4">
            <FSelect label="Tipo da Pessoa" value={c.tipoPessoa || "PF"} onChange={(v) => set("tipoPessoa", v)} options={[{value:"PF",label:"Pessoa Física"},{value:"PJ",label:"Pessoa Jurídica"}]} />
            <FText   label="CPF"          value={c.cpf}         onChange={(v) => set("cpf", v)} placeholder="000.000.000-00" />
            <FDate   label="Cliente desde" value={c.clienteDesde || c.ult} onChange={(v) => set("clienteDesde", v)} />
            <FSelect label="Contribuinte" value={c.contribuinte || "9"} onChange={(v) => set("contribuinte", v)}
                     options={[
                       { value: "1", label: "1 - Contribuinte ICMS" },
                       { value: "2", label: "2 - Contribuinte isento" },
                       { value: "9", label: "9 - Não contribuinte" },
                     ]} />
          </div>
          <div className="field-grid-3">
            <FText label="Inscrição Estadual" value={c.ie}       onChange={(v) => set("ie", v)} />
            <FText label="RG"                 value={c.rg}       onChange={(v) => set("rg", v)} />
            <FText label="Órgão Emissor"      value={c.orgaoEmissor} onChange={(v) => set("orgaoEmissor", v)} placeholder="SSP/SP" />
          </div>
        </FormSection>

        <EnderecoSection value={c} set={set} />
        <ContatoSection  value={c} set={set} />

        {/* Dados adicionais — collapsible */}
        <FormSection title="Dados adicionais" collapsible defaultOpen>
          <div className="field-grid-photo">
            <FSelect label="Estado civil" value={c.estadoCivil} onChange={(v) => set("estadoCivil", v)} options={["Solteiro(a)","Casado(a)","União estável","Divorciado(a)","Viúvo(a)"]} />
            <FText   label="Profissão"  value={c.profissao}   onChange={(v) => set("profissao", v)} />
            <FSelect label="Sexo"       value={c.sexo}        onChange={(v) => set("sexo", v)} options={["Feminino","Masculino","Outro","Prefiro não informar"]} />
            <FDate   label="Data nascimento" value={c.dataNasc || c.nasc} onChange={(v) => set("dataNasc", v)} />
            <FText   label="Naturalidade"    value={c.naturalidade}       onChange={(v) => set("naturalidade", v)} placeholder="Cidade · UF" />
            <div className="field">
              <FieldLabel label="Foto" />
              <div className="foto-slot"><Icon name="plus" size={18} /></div>
            </div>
          </div>
          <div className="field-grid-4">
            <FText label="Nome do Pai" value={c.nomePai} onChange={(v) => set("nomePai", v)} />
            <FText label="CPF do Pai"  value={c.cpfPai}  onChange={(v) => set("cpfPai", v)} placeholder="000.000.000-00" />
            <FText label="Nome da Mãe" value={c.nomeMae} onChange={(v) => set("nomeMae", v)} />
            <FText label="CPF da Mãe"  value={c.cpfMae}  onChange={(v) => set("cpfMae", v)} placeholder="000.000.000-00" />
          </div>
          <div className="field-grid-4">
            <FChipBox label="Tipo de contato" values={c.tiposContato || ["Cliente"]} onChange={(v) => set("tiposContato", v)} suggestions={["Cliente","Fornecedor","Transportadora","Funcionário"]} />
            <FChipBox label="Marcas / Empresas" hint="Empresas com as quais este cliente se relaciona" values={c.marcas || []} onChange={(v) => set("marcas", v)} suggestions={(window.tmEmpresas || []).map(e => e.nome_fantasia || e.razao_social).filter(Boolean)} />
            <FSelect label="Situação" value={c.situacao || "Ativo"} onChange={(v) => set("situacao", v)} options={["Ativo","Inativo","Bloqueado","Em análise"]} />
            <FSelect label="Representante / vendedor" value={c.vendedor} onChange={(v) => set("vendedor", v)} options={repOpts} />
          </div>
          <div className="field-grid-4">
            <FSelect label="Tag CRM"   value={c.tag}       onChange={(v) => set("tag", v)} options={["Novo","Recorrente","VIP","Risco"]} />
          </div>
          <div className="field-grid-2">
            <FSelect label="Natureza de Operação Padrão" hint="Será usada nas notas fiscais" value={c.naturezaOp} onChange={(v) => set("naturezaOp", v)}
                     options={["Venda de mercadoria","Bonificação","Devolução","Remessa para conserto","Venda fora do estabelecimento"]} />
          </div>
        </FormSection>

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

// ============================================================
// SALÃO / DISTRIBUIDOR (PJ/PF — formulário compartilhado)
// ============================================================
function BizForm({ kind, state, set, onCancel, onSave, onDelete }) {
  const r = state.draft;
  const isNew = state.mode === "new";
  const isDist = kind === "dist";
  const { repOpts, distOpts } = useRepsDists();
  const tipoPessoa = r.tipoPessoa || "PJ";
  const isPF = tipoPessoa === "PF";
  const breadcrumb = isDist ? "Distribuidores" : "Salões / Barbearias";
  const eyebrow = isNew ? (isDist ? "Novo distribuidor" : "Novo salão") : r.nome || (isDist ? "Distribuidor" : "Salão");

  return (
    <div className="canvas">
      <FormShell
        breadcrumb={breadcrumb}
        eyebrow={eyebrow}
        title={r.nome}
        meta={isNew ? "" : `Alterado em <b>14/05/2026 09:42</b>, por <b>topmix</b>`}
        isNew={isNew}
        onCancel={onCancel}
        onSave={onSave}
        onDelete={onDelete}
      >
        <FormSection title="Dados cadastrais">
          <div className="field-grid-3">
            <FText label={isPF ? "Nome completo" : "Razão social"} required value={r.nome} onChange={(v) => set("nome", v)} />
            <FText label="Nome fantasia" value={r.fantasia} onChange={(v) => set("fantasia", v)} />
            <FText label="Código" hint="Gerado automaticamente" value={r.codigo} onChange={(v) => set("codigo", v)} />
          </div>
          <div className="field-grid-4">
            <FSelect label="Tipo da Pessoa" value={tipoPessoa}
              onChange={(v) => set(v === "PF"
                ? { tipoPessoa: "PF", cnpj: "", ie: "", im: "", cnae: "" }
                : { tipoPessoa: "PJ", cpf: "" }
              )}
              options={[{value:"PJ",label:"Pessoa Jurídica"},{value:"PF",label:"Pessoa Física"}]} />
            {isPF ? (
              <FText label="CPF" value={r.cpf} onChange={(v) => set("cpf", v)} placeholder="000.000.000-00" />
            ) : (
              <FText label="CNPJ" value={r.cnpj} onChange={(v) => set("cnpj", v)} placeholder="00.000.000/0000-00" />
            )}
            <FDate label={isDist ? "Parceiro desde" : "Cliente desde"} value={r.desde} onChange={(v) => set("desde", v)} />
            {!isPF && (
              <FSelect label="Contribuinte" value={r.contribuinte || "1"} onChange={(v) => set("contribuinte", v)}
                options={[
                  { value: "1", label: "1 - Contribuinte ICMS" },
                  { value: "2", label: "2 - Contribuinte isento" },
                  { value: "9", label: "9 - Não contribuinte" },
                ]} />
            )}
          </div>
          {!isPF && (
            <div className="field-grid-4">
              <FText label="Inscrição Estadual"  value={r.ie}   onChange={(v) => set("ie", v)} />
              <FText label="Inscrição Municipal" value={r.im}   onChange={(v) => set("im", v)} />
              <FText label="CNAE" hint="Atividade principal" value={r.cnae} onChange={(v) => set("cnae", v)} placeholder="9602-5/01" />
              {isDist
                ? <FText label="Suframa" value={r.suframa} onChange={(v) => set("suframa", v)} />
                : <FSelect label="Tipo de salão" value={r.tipoSalao} onChange={(v) => set("tipoSalao", v)}
                    options={["Cabelo","Estética","Barbearia","Manicure / Pedicure","Multisserviço","Spa"]} />
              }
            </div>
          )}
          {isPF && (
            <div className="field-grid-4">
              <FSelect label="Tipo de salão" value={r.tipoSalao} onChange={(v) => set("tipoSalao", v)}
                options={["Cabelo","Estética","Barbearia","Manicure / Pedicure","Multisserviço","Spa"]} />
              <FDate label="Data de nascimento" value={r.dataNasc} onChange={(v) => set("dataNasc", v)} />
            </div>
          )}
        </FormSection>

        <EnderecoSection value={r} set={set} />
        <ContatoSection  value={r} set={set} />

        <FormSection title="Dados adicionais" collapsible defaultOpen>
          <div className="field-grid-4">
            <FText   label="Responsável"          value={r.resp}      onChange={(v) => set("resp", v)} />
            <FText   label="CPF do responsável"   value={r.respCpf}   onChange={(v) => set("respCpf", v)} placeholder="000.000.000-00" />
            <FText   label="Cargo"                value={r.respCargo} onChange={(v) => set("respCargo", v)} placeholder="Sócio-proprietário" />
            <FText   label="Telefone do responsável" value={r.respFone} onChange={(v) => set("respFone", v)} />
          </div>
          {isDist ? (
            <>
              <div className="field-grid-4">
                <FSelect label="Tier"        value={r.status || "Bronze"} onChange={(v) => set("status", v)} options={["Ouro","Prata","Bronze","Onboarding"]} />
                <FNum    label="Salões na rede" value={r.saloes} onChange={(v) => set("saloes", v)} />
                <FSelect label="Representante vinculado" value={r.repVinculado} onChange={(v) => set("repVinculado", v)}
                         options={repOpts} />
                <FSelect label="Situação" value={r.situacao || "Ativo"} onChange={(v) => set("situacao", v)} options={["Ativo","Onboarding","Inativo","Bloqueado"]} />
              </div>
              <div className="field-grid-2">
                <FChipBox label="Território (UFs)" hint="UFs onde o distribuidor pode atuar" values={r.territorio || (r.uf ? [r.uf] : [])} onChange={(v) => set("territorio", v)} suggestions={UF_OPTS} />
                <FChipBox label="Tipo de contato"  values={r.tiposContato || ["Distribuidor"]} onChange={(v) => set("tiposContato", v)} suggestions={["Distribuidor","Cliente","Fornecedor"]} />
              </div>
              <div className="field-grid-2">
                <FChipBox label="Marcas / Empresas" hint="Empresas com as quais este parceiro se relaciona" values={r.marcas || []} onChange={(v) => set("marcas", v)} suggestions={(window.tmEmpresas || []).map(e => e.nome_fantasia || e.razao_social).filter(Boolean)} />
              </div>
            </>
          ) : (
            <>
              <div className="field-grid-4">
                <FNum    label="Cadeiras / estações" value={r.cadeiras} onChange={(v) => set("cadeiras", v)} />
                <FNum    label="Funcionários"        value={r.funcionarios} onChange={(v) => set("funcionarios", v)} />
                <FSelect label="Distribuidor vinculado" value={r.distribuidor} onChange={(v) => set("distribuidor", v)}
                         options={distOpts} />
                <FSelect label="Representante" value={r.repVinculado} onChange={(v) => set("repVinculado", v)}
                         options={repOpts} />
              </div>
              <div className="field-grid-3">
                <FSelect label="Status comercial" value={r.status || "Ativo"} onChange={(v) => set("status", v)} options={["Ativo","VIP","Risco","Inativo"]} />
                <FSelect label="Situação cadastral" value={r.situacao || "Ativo"} onChange={(v) => set("situacao", v)} options={["Ativo","Inativo","Bloqueado","Em análise"]} />
                <FChipBox label="Tipo de contato" values={r.tiposContato || ["Cliente","Salão"]} onChange={(v) => set("tiposContato", v)} suggestions={["Cliente","Salão","Distribuidor","Fornecedor"]} />
              </div>
              <div className="field-grid-2">
                <FChipBox label="Marcas / Empresas" hint="Empresas com as quais este parceiro se relaciona" values={r.marcas || []} onChange={(v) => set("marcas", v)} suggestions={(window.tmEmpresas || []).map(e => e.nome_fantasia || e.razao_social).filter(Boolean)} />
              </div>
            </>
          )}
          <div className="field-grid-2">
            <FSelect label="Natureza de Operação Padrão" hint="Será usada nas notas fiscais" value={r.naturezaOp} onChange={(v) => set("naturezaOp", v)}
                     options={["Venda de mercadoria","Bonificação","Devolução","Remessa para conserto","Venda fora do estabelecimento"]} />
          </div>
        </FormSection>

        <FinanceiroSection value={r} set={set} extras={
          <div className="field-grid-3">
            <FSelect label="Tabela de preço" hint="Quais preços este parceiro vê" value={r.tabela} onChange={(v) => set("tabela", v)}
                     options={isDist
                       ? ["Distribuidor Ouro","Distribuidor Prata","Distribuidor Bronze"]
                       : ["Salão Premium","Salão Padrão","Barbearia","Direto consumidor"]} />
            <FNum label="Desconto adicional" suffix="%" value={r.descAdicional} onChange={(v) => set("descAdicional", v)} />
            {isDist && <FNum label="Comissão sobre rede" suffix="%" value={r.comissaoRede} onChange={(v) => set("comissaoRede", v)} />}
          </div>
        } />
        <ObservacoesSection value={r} set={set} />
        <AnexosSection />
      </FormShell>
    </div>
  );
}

// ============================================================
// REPRESENTANTE COMERCIAL
// ============================================================
function RepresentanteForm({ state, set, onCancel, onSave, onDelete }) {
  const r = state.draft;
  const isNew = state.mode === "new";
  const { distOpts } = useRepsDists();
  return (
    <div className="canvas">
      <FormShell
        breadcrumb="Representantes"
        eyebrow={isNew ? "Novo representante" : r.nome || "Representante"}
        title={r.nome}
        meta={isNew ? "" : `Alterado em <b>14/05/2026 09:42</b>, por <b>topmix</b>`}
        isNew={isNew}
        onCancel={onCancel}
        onSave={onSave}
        onDelete={onDelete}
      >
        <FormSection title="Dados cadastrais">
          <div className="field-grid-3">
            <FText label="Nome completo" required value={r.nome} onChange={(v) => set("nome", v)} />
            <FText label="Apelido / como é chamado" value={r.fantasia} onChange={(v) => set("fantasia", v)} />
            <FText label="Código" hint="Gerado automaticamente" value={r.codigo} onChange={(v) => set("codigo", v)} />
          </div>
          <div className="field-grid-4">
            <FText label="CPF"        value={r.cpf}        onChange={(v) => set("cpf", v)} placeholder="000.000.000-00" />
            <FText label="RG"         value={r.rg}         onChange={(v) => set("rg", v)} />
            <FDate label="Nascimento" value={r.dataNasc}   onChange={(v) => set("dataNasc", v)} />
            <FDate label="Admissão"   value={r.admissao}   onChange={(v) => set("admissao", v)} />
          </div>
        </FormSection>

        <EnderecoSection value={r} set={set} />
        <ContatoSection  value={r} set={set} />

        <FormSection title="Dados adicionais" collapsible defaultOpen>
          <div className="field-grid-photo">
            <FSelect label="Estado civil" value={r.estadoCivil} onChange={(v) => set("estadoCivil", v)} options={["Solteiro(a)","Casado(a)","União estável","Divorciado(a)","Viúvo(a)"]} />
            <FSelect label="Sexo"  value={r.sexo} onChange={(v) => set("sexo", v)} options={["Feminino","Masculino","Outro","Prefiro não informar"]} />
            <FText   label="Naturalidade" value={r.naturalidade} onChange={(v) => set("naturalidade", v)} placeholder="Cidade · UF" />
            <FSelect label="Tipo de contrato" value={r.contrato || "PJ"} onChange={(v) => set("contrato", v)} options={["PJ","CLT","Autônomo","Estagiário"]} />
            <FSelect label="Situação" value={r.situacao || "Ativo"} onChange={(v) => set("situacao", v)} options={["Ativo","Afastado","Férias","Inativo"]} />
            <div className="field">
              <FieldLabel label="Foto" />
              <div className="foto-slot"><Icon name="plus" size={18} /></div>
            </div>
          </div>
        </FormSection>

        <FormSection title="Comercial">
          <div className="field-grid-3">
            <FText  label="Região de atuação" required value={r.regiao} onChange={(v) => set("regiao", v)} placeholder="SP · Capital" />
            <FChipBox label="UFs cobertas" values={r.ufs || []} onChange={(v) => set("ufs", v)} suggestions={UF_OPTS} />
            <FSelect label="Distribuidor preferencial" value={r.distribuidor} onChange={(v) => set("distribuidor", v)}
                     options={distOpts} />
          </div>
          <div className="field-grid-4">
            <FNum label="Meta mensal" suffix="R$" value={r.meta} onChange={(v) => set("meta", v)} />
            <FNum label="Realizado mês" suffix="R$" value={r.atual} onChange={(v) => set("atual", v)} />
            <FNum label="Salões ativos" value={r.saloes} onChange={(v) => set("saloes", v)} />
            <FNum label="Comissão" suffix="%" value={r.comissao} onChange={(v) => set("comissao", v)} />
          </div>
          <div className="field-grid-3">
            <FSelect label="Tabela de comissão" value={r.tabelaComissao} onChange={(v) => set("tabelaComissao", v)}
                     options={["Padrão","Premium","Sênior","Especial"]} />
            <FSelect label="Frequência de pagamento" value={r.freqPag || "Mensal"} onChange={(v) => set("freqPag", v)} options={["Mensal","Quinzenal","Por pedido"]} />
            <FDate   label="Próxima visita planejada" value={r.proxVisita} onChange={(v) => set("proxVisita", v)} />
          </div>
        </FormSection>

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

// ============================================================
// VENDEDOR (INTERNO — staff/balcão/atendimento)
// ============================================================
function VendedorForm({ state, set, onCancel, onSave, onDelete }) {
  const v = state.draft;
  const isNew = state.mode === "new";
  return (
    <div className="canvas">
      <FormShell
        breadcrumb="Vendedores"
        eyebrow={isNew ? "Novo vendedor" : v.nome || "Vendedor"}
        title={v.nome}
        meta={isNew ? "" : `${v.departamento || "—"} · ${v.loja || "—"}`}
        isNew={isNew}
        onCancel={onCancel}
        onSave={onSave}
        onDelete={onDelete}
      >
        <FormSection title="Dados cadastrais">
          <div className="field-grid-3">
            <FText label="Nome completo" required value={v.nome} onChange={(x) => set("nome", x)} />
            <FText label="Apelido / como aparece em pedidos" value={v.fantasia} onChange={(x) => set("fantasia", x)} placeholder="Aparece nas listas" />
            <FText label="Código" hint="Gerado automaticamente" value={v.codigo} onChange={(x) => set("codigo", x)} />
          </div>
          <div className="field-grid-4">
            <FText label="CPF" value={v.cpf} onChange={(x) => set("cpf", x)} placeholder="000.000.000-00" />
            <FText label="RG" value={v.rg} onChange={(x) => set("rg", x)} />
            <FDate label="Data de nascimento" value={v.dataNasc} onChange={(x) => set("dataNasc", x)} />
            <FDate label="Admissão" value={v.admissao} onChange={(x) => set("admissao", x)} />
          </div>
        </FormSection>

        <FormSection title="Contato">
          <div className="field-grid-4">
            <FText label="Telefone" value={v.fone}    onChange={(x) => set("fone", x)} placeholder="(00) 0000-0000" />
            <FText label="Celular"  value={v.celular} onChange={(x) => set("celular", x)} placeholder="(00) 00000-0000" />
            <FText label="E-mail corporativo" value={v.email} onChange={(x) => set("email", x)} placeholder="nome@topmix.com.br" />
            <FText label="Ramal" value={v.ramal} onChange={(x) => set("ramal", x)} />
          </div>
        </FormSection>

        <FormSection title="Atuação na empresa">
          <div className="field-grid-4">
            <FSelect label="Loja / unidade" required value={v.loja} onChange={(x) => set("loja", x)} options={["Matriz · SP","Filial · RJ","Filial · BH","E-commerce","Marketplace"]} />
            <FSelect label="Departamento" required value={v.departamento || "Comercial interno"} onChange={(x) => set("departamento", x)}
                     options={["Comercial interno","Balcão","Atendimento PDV","Atendimento WhatsApp","E-commerce / Marketplace","Pré-venda","Pós-venda"]} />
            <FSelect label="Turno" value={v.turno || "Comercial"} onChange={(x) => set("turno", x)} options={["Comercial","Manhã","Tarde","Noite","Plantão fim de semana"]} />
            <FSelect label="Tipo de contrato" value={v.contrato || "CLT"} onChange={(x) => set("contrato", x)} options={["CLT","PJ","Autônomo","Estágio","Aprendiz"]} />
          </div>
          <div className="field-grid-3">
            <FSelect label="Perfil de acesso" hint="Define o que o usuário pode ver no sistema" value={v.perfil || "Vendedor"} onChange={(x) => set("perfil", x)}
                     options={["Vendedor","Vendedor Sênior","Supervisor","Gerente de loja","Administrador","Somente leitura"]} />
            <FSelect label="Situação" value={v.situacao || "Ativo"} onChange={(x) => set("situacao", x)} options={["Ativo","Afastado","Férias","Inativo","Desligado"]} />
            <FSelect label="Supervisor direto" value={v.supervisor} onChange={(x) => set("supervisor", x)}
                     options={((window.TM_VENDEDORES || []).map(vd => vd.nome)).filter(Boolean)} />
          </div>
        </FormSection>

        <FormSection title="Comercial" meta="Metas, comissões e poderes de desconto">
          <div className="field-grid-4">
            <FNum label="Meta mensal"     suffix="R$" value={v.meta}     onChange={(x) => set("meta", x)} />
            <FNum label="Realizado mês"  suffix="R$" value={v.realizado}onChange={(x) => set("realizado", x)} />
            <FNum label="Comissão padrão"suffix="%"  value={v.comissao || 1.5} onChange={(x) => set("comissao", x)} />
            <FNum label="Desconto máximo permitido" hint="Aplicado no PDV/pedido" suffix="%" value={v.descMax || 10} onChange={(x) => set("descMax", x)} />
          </div>
          <div className="field-grid-3">
            <FSelect label="Tabela de comissão" value={v.tabelaComissao || "Padrão interno"} onChange={(x) => set("tabelaComissao", x)} options={["Padrão interno","Balcão","Pré-venda","Pós-venda","Especial"]} />
            <FSelect label="Frequência de pagamento" value={v.freqPag || "Mensal"} onChange={(x) => set("freqPag", x)} options={["Mensal","Quinzenal","Por pedido"]} />
            <FSwitchField label="Pode emitir NF-e"     value={v.podeNFe}      onChange={(x) => set("podeNFe", x)} />
          </div>
        </FormSection>

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

// Inline switch wrapped as a field (used in Vendedor form)
function FSwitchField({ label, value, onChange }) {
  return (
    <div className="field">
      <FieldLabel label={label} />
      <div style={{ height: 42, display: "flex", alignItems: "center" }}>
        <FSwitch label={value ? "Sim" : "Não"} value={value} onChange={onChange} />
      </div>
    </div>
  );
}

Object.assign(window, {
  ClienteForm, BizForm, RepresentanteForm, VendedorForm,
  // Form primitives — reusable by other modules
  FormShell, FormSection, FieldLabel,
  FText, FNum, FDate, FSelect, FCombo, FTextarea, FSwitch, FChipBox,
  FinanceiroSection, ObservacoesSection, AnexosSection,
  UF_OPTS,
});