/* ─── Trigger Create/Edit Modal (window-scoped) ─────────────────── */
const { useState: useStateT, useEffect: useEffectT, useMemo: useMemoT } = React;

const EMPTY_TRIGGER = {
  id: null,
  name: "",
  description: "",
  category: "competitors",
  competitors: [],
  products: [],
  featureAreas: [],
  changelogUrls: [],
  keywords: [],
  excludeKeywords: [],
  domains: [],
  blockDomains: [],
  languages: ["pt-BR", "en-US"],
  geo: "global",
  sources: ["google-news", "linkedin"],
  customApis: [],
  frequency: "daily",
  runTime: "08:00",
  minRelevance: 60,
  alertThreshold: 80,
  notify: { slack: true, email: false, inApp: true },
  aiDepth: "balanced",
  autoSummarize: true,
  customPrompt: "",
  enabled: true
};

const CATEGORY_CHOICES = [
  { value: "competitors", label: "Concorrentes",  icon: "swords"    },
  { value: "launches",    label: "Lançamentos",   icon: "rocket"    },
  { value: "market",      label: "Mercado",       icon: "trending"  },
  { value: "vertical",    label: "Vertical",      icon: "briefcase" },
  { value: "eventos",     label: "Eventos",       icon: "calendar"  },
  { value: "tech",        label: "Tech & IA",     icon: "cpu"       },
  { value: "regulatory",  label: "Regulatório",   icon: "gavel"     }
];

const FREQ_CHOICES = [
  { value: "realtime",  label: "Tempo real", icon: "zap" },
  { value: "daily",     label: "Diário",     icon: "refresh" },
  { value: "weekly",    label: "Semanal",    icon: "calendar" },
  { value: "monthly",   label: "Mensal",     icon: "calendar" },
  { value: "on-demand", label: "Sob demanda",icon: "play" }
];

const LANG_OPTIONS = ["pt-BR", "en-US", "es-LA", "fr", "de", "zh"];

function Section({ num, title, sub, children }) {
  return (
    <div className="rd-section">
      <div className="rd-section-head">
        <div className="rd-section-num">{num}</div>
        <div className="rd-section-title">{title}</div>
        {sub && <div className="rd-section-sub">{sub}</div>}
      </div>
      {children}
    </div>
  );
}

/* ─── Custom API row ─────────────────────────────────────────────── */
function CustomApiRow({ api, onChange, onRemove }) {
  return (
    <div style={{ background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 10, padding: 12, display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ width: 24, height: 24, borderRadius: 6, background: "var(--brand-dim)", color: "var(--brand)", border: "1px solid var(--brand-glow)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="code" size={12} />
        </div>
        <input
          className="rd-input"
          placeholder="Nome da API (ex: ANPD Diário)"
          value={api.name}
          onChange={(e) => onChange({ ...api, name: e.target.value })}
          style={{ flex: 1 }}
        />
        <button type="button" className="rd-btn ghost sm icon" onClick={onRemove}>
          <Icon name="trash" size={13} />
        </button>
      </div>
      <div className="rd-field-row cols-3" style={{ gap: 8 }}>
        <select
          className="rd-select"
          value={api.method || "GET"}
          onChange={(e) => onChange({ ...api, method: e.target.value })}
          style={{ maxWidth: 100 }}
        >
          <option value="GET">GET</option>
          <option value="POST">POST</option>
        </select>
        <input
          className="rd-input"
          placeholder="https://api.exemplo.com/endpoint"
          value={api.url || ""}
          onChange={(e) => onChange({ ...api, url: e.target.value })}
          style={{ gridColumn: "span 2" }}
        />
      </div>
      <div className="rd-field-row cols-3" style={{ gap: 8 }}>
        <select
          className="rd-select"
          value={api.auth || "none"}
          onChange={(e) => onChange({ ...api, auth: e.target.value })}
        >
          <option value="none">Sem auth</option>
          <option value="bearer">Bearer Token</option>
          <option value="apikey">API Key (header)</option>
          <option value="basic">Basic Auth</option>
        </select>
        <input
          className="rd-input"
          placeholder={api.auth === "bearer" ? "Token (secret)" : api.auth === "apikey" ? "Header: X-API-Key" : api.auth === "basic" ? "user:pass" : "—"}
          value={api.authValue || ""}
          onChange={(e) => onChange({ ...api, authValue: e.target.value })}
          disabled={!api.auth || api.auth === "none"}
        />
        <input
          className="rd-input"
          placeholder="JSONPath: $.items[*]"
          value={api.jsonPath || ""}
          onChange={(e) => onChange({ ...api, jsonPath: e.target.value })}
          style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}
        />
      </div>
      <div className="rd-hint" style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <Icon name="info" size={12} />
        Mapeie os campos title, url, publishedAt no JSONPath. Use <code style={{ fontFamily: "var(--font-mono)", background: "var(--bg-3)", padding: "1px 4px", borderRadius: 3 }}>$.items[*]</code> ou similar.
      </div>
    </div>
  );
}

/* ─── Main Modal ─────────────────────────────────────────────── */
function TriggerModal({ open, initial, onClose, onSave, onDelete }) {
  const [data, setData] = useStateT(EMPTY_TRIGGER);
  const [showAdvanced, setShowAdvanced] = useStateT(false);

  useEffectT(() => {
    if (open) {
      setData(initial ? { ...EMPTY_TRIGGER, ...initial } : EMPTY_TRIGGER);
      setShowAdvanced(!!(initial && (initial.customPrompt || initial.blockDomains?.length)));
    }
  }, [open, initial]);

  const isEdit = !!initial?.id;
  const valid = data.name.trim() && (data.keywords.length > 0 || data.competitors.length > 0 || (data.products && data.products.length > 0));

  const set = (patch) => setData({ ...data, ...patch });
  const setNotify = (patch) => setData({ ...data, notify: { ...data.notify, ...patch } });

  const toggleSource = (id) => {
    set({ sources: data.sources.includes(id) ? data.sources.filter(s => s !== id) : [...data.sources, id] });
  };
  const toggleLang = (l) => {
    set({ languages: data.languages.includes(l) ? data.languages.filter(x => x !== l) : [...data.languages, l] });
  };

  const addApi = () => set({
    customApis: [...(data.customApis || []), { id: `api-${Date.now()}`, name: "", method: "GET", url: "", auth: "none", jsonPath: "" }],
    sources: data.sources.includes("custom-api") ? data.sources : [...data.sources, "custom-api"]
  });
  const updateApi = (id, patch) => set({ customApis: data.customApis.map(a => a.id === id ? patch : a) });
  const removeApi = (id) => set({ customApis: data.customApis.filter(a => a.id !== id) });

  if (!open) return null;

  return (
    <div className="rd-modal-overlay" onClick={onClose}>
      <div className="rd-modal lg" onClick={(e) => e.stopPropagation()}>
        <div className="rd-modal-header">
          <div>
            <div className="rd-modal-title">
              <span style={{ width: 24, height: 24, borderRadius: 6, background: "var(--brand)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "white" }}>
                <Icon name={isEdit ? "edit" : "radar"} size={13} strokeWidth={2.2} />
              </span>
              {isEdit ? "Editar Trigger" : "Novo Trigger"}
            </div>
            <div className="rd-modal-subtitle">
              Configure o que o agente de Discovery deve monitorar e como reportar
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 500 }}>
              {data.enabled ? "Ativo" : "Pausado"}
            </span>
            <Toggle on={data.enabled} onChange={(v) => set({ enabled: v })} size="lg" />
            <button className="rd-modal-close" onClick={onClose}>
              <Icon name="x" size={14} />
            </button>
          </div>
        </div>

        <div className="rd-modal-body">
          {/* 1 — Básico */}
          <Section num="1" title="Identificação" sub="Como esse trigger aparece para o time">
            <div className="rd-field">
              <label className="rd-label">Nome <span className="req">*</span></label>
              <input
                className="rd-input"
                placeholder="ex: IA em LXP, Movimentação Alura, Funding rounds"
                value={data.name}
                onChange={(e) => set({ name: e.target.value })}
                autoFocus
              />
            </div>
            <div className="rd-field">
              <label className="rd-label">Descrição <span className="opt">(opcional)</span></label>
              <textarea
                className="rd-textarea"
                placeholder="Contexto curto sobre o objetivo desse radar — ajuda o agente a calibrar relevância."
                value={data.description}
                onChange={(e) => set({ description: e.target.value })}
                style={{ minHeight: 64 }}
              />
            </div>
            <div className="rd-field">
              <label className="rd-label">Categoria</label>
              <div className="rd-segmented wide">
                {CATEGORY_CHOICES.map(c => (
                  <button
                    key={c.value}
                    type="button"
                    className={data.category === c.value ? "active" : ""}
                    onClick={() => set({ category: c.value })}
                    style={data.category === c.value ? { color: CAT_META[c.value]?.color } : {}}
                  >
                    <Icon name={c.icon} size={12} />
                    {c.label}
                  </button>
                ))}
              </div>
            </div>
          </Section>

          {/* 2 — O que rastrear */}
          <Section num="2" title="O que rastrear" sub="O agente busca tudo que case com pelo menos um termo">
            <div className="rd-field">
              <label className="rd-label">
                <Icon name="swords" size={13} color="var(--competitors)" />
                Concorrentes
                <span className="opt">— monitorar nominalmente</span>
              </label>
              <ChipInput
                values={data.competitors}
                onChange={(v) => set({ competitors: v })}
                placeholder="Digite e pressione Enter (ex: Alura, Coursera, Docebo…)"
                variant="comp"
              />
              <div className="rd-hint">O agente prioriza menções diretas, M&A, funding, leadership changes e lançamentos de cada empresa.</div>
            </div>

            <div className="rd-field">
              <label className="rd-label">
                <Icon name="package" size={13} color="#EC4899" />
                Produtos monitorados
                <span className="opt">— rastrear releases & features</span>
              </label>
              <ChipInput
                values={data.products || []}
                onChange={(v) => set({ products: v })}
                placeholder="ex: Coursera for Business, Pagar.me, Conexa Saúde…"
                variant="neutral"
              />
              <div className="rd-hint">Use para acompanhar versões, changelogs e novas funcionalidades de produtos específicos.</div>
            </div>

            <div className="rd-field">
              <label className="rd-label">
                <Icon name="sparkles" size={13} color="var(--brand)" />
                Áreas de feature de interesse
                <span className="opt">— foque o agente em áreas específicas</span>
              </label>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {FEATURE_AREAS.map(fa => {
                  const on = (data.featureAreas || []).includes(fa.id);
                  return (
                    <button
                      key={fa.id}
                      type="button"
                      onClick={() => set({
                        featureAreas: on
                          ? (data.featureAreas || []).filter(x => x !== fa.id)
                          : [...(data.featureAreas || []), fa.id]
                      })}
                      className="rd-chip"
                      style={{
                        padding: "5px 11px", cursor: "pointer",
                        background: on ? fa.color + "16" : "var(--bg-2)",
                        color: on ? fa.color : "var(--ink-2)",
                        borderColor: on ? fa.color + "55" : "var(--line-md)",
                        fontWeight: on ? 700 : 600
                      }}
                    >
                      {fa.label}
                    </button>
                  );
                })}
              </div>
              <div className="rd-hint">Sinaliza ao agente que features novas em <strong style={{ color: "var(--ink-1)" }}>{(data.featureAreas || []).length > 0 ? (data.featureAreas || []).map(id => FEATURE_AREAS.find(f => f.id === id)?.label).filter(Boolean).join(" · ") : "qualquer área"}</strong> são prioritárias.</div>
            </div>

            {(data.category === "launches" || (data.changelogUrls && data.changelogUrls.length > 0)) && (
              <div className="rd-field">
                <label className="rd-label">
                  <Icon name="git-branch" size={13} color="var(--ink-2)" />
                  URLs de changelog / release feeds
                  <span className="opt">(RSS, GitHub releases, JSON)</span>
                </label>
                <ChipInput
                  values={data.changelogUrls || []}
                  onChange={(v) => set({ changelogUrls: v })}
                  placeholder="ex: github.com/.../releases.atom, docs.exemplo.com/changelog.rss…"
                  variant="neutral"
                />
                <div className="rd-hint">O agente acompanha estes feeds nativamente — detecta versão, autor, e categoriza a feature automaticamente.</div>
              </div>
            )}

            <div className="rd-field">
              <label className="rd-label">
                <Icon name="tag" size={13} color="var(--brand)" />
                Palavras-chave / Termos de busca <span className="req">*</span>
              </label>
              <ChipInput
                values={data.keywords}
                onChange={(v) => set({ keywords: v })}
                placeholder="ex: AI-powered learning, LXP, competency mapping…"
              />
              <div className="rd-hint">Use frases entre aspas para match exato. Até 30 termos.</div>
            </div>

            <div className="rd-field">
              <label className="rd-label">
                <Icon name="x" size={13} color="var(--danger)" />
                Excluir termos
                <span className="opt">(reduz ruído)</span>
              </label>
              <ChipInput
                values={data.excludeKeywords}
                onChange={(v) => set({ excludeKeywords: v })}
                placeholder="ex: kids, infantil, webinar grátis…"
                variant="danger"
              />
            </div>

            <div className="rd-field">
              <label className="rd-label">
                <Icon name="tag" size={13} />
                Domínios prioritários
                <span className="opt">(boost na relevância)</span>
              </label>
              <ChipInput
                values={data.domains}
                onChange={(v) => set({ domains: v })}
                placeholder="ex: techcrunch.com, gartner.com…"
                variant="neutral"
              />
            </div>
          </Section>

          {/* 3 — Onde buscar */}
          <Section num="3" title="Onde buscar" sub={`${data.sources.length} ${data.sources.length === 1 ? "fonte" : "fontes"} selecionada${data.sources.length === 1 ? "" : "s"}`}>
            <div className="rd-field">
              <label className="rd-label">Fontes de dados</label>
              <div className="rd-source-grid">
                {SOURCE_CATALOG.map(s => {
                  const selected = data.sources.includes(s.id);
                  return (
                    <div
                      key={s.id}
                      className={`rd-source-card${selected ? " selected" : ""}`}
                      onClick={() => toggleSource(s.id)}
                    >
                      <SourceAvatar source={s} />
                      <div className="body">
                        <div className="name">{s.name}</div>
                        <div className="sub">{s.sub}</div>
                      </div>
                      <div className="check">
                        {selected && <Icon name="check" size={9} strokeWidth={3.5} color="white" />}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Custom APIs sub-block */}
            {(data.sources.includes("custom-api") || (data.customApis || []).length > 0) && (
              <div className="rd-field" style={{ marginTop: 14, padding: 14, background: "var(--bg-2)", borderRadius: 10, border: "1px dashed var(--line-md)" }}>
                <label className="rd-label" style={{ marginBottom: 4 }}>
                  <Icon name="code" size={13} color="var(--brand)" />
                  Conectores de API customizados
                </label>
                <div className="rd-hint" style={{ marginBottom: 10 }}>
                  Conecte qualquer endpoint REST que retorne JSON. O agente vai indexar resultados conforme o JSONPath informado.
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {(data.customApis || []).map(api => (
                    <CustomApiRow
                      key={api.id}
                      api={api}
                      onChange={(p) => updateApi(api.id, p)}
                      onRemove={() => removeApi(api.id)}
                    />
                  ))}
                </div>
                <button type="button" className="rd-btn sm" onClick={addApi} style={{ marginTop: 10 }}>
                  <Icon name="plus" size={12} />
                  Adicionar API
                </button>
              </div>
            )}

            <div className="rd-field-row cols-2" style={{ marginTop: 12 }}>
              <div className="rd-field" style={{ marginBottom: 0 }}>
                <label className="rd-label">
                  <Icon name="globe" size={13} />
                  Geografia
                </label>
                <select className="rd-select" value={data.geo} onChange={(e) => set({ geo: e.target.value })}>
                  {Object.entries(GEO_LABEL).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                </select>
              </div>
              <div className="rd-field" style={{ marginBottom: 0 }}>
                <label className="rd-label">Idiomas</label>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {LANG_OPTIONS.map(l => {
                    const on = data.languages.includes(l);
                    return (
                      <button
                        key={l}
                        type="button"
                        className={`rd-chip ${on ? "" : "neutral"}`}
                        style={{ padding: "5px 11px", cursor: "pointer" }}
                        onClick={() => toggleLang(l)}
                      >
                        {l}
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>
          </Section>

          {/* 4 — Quality & relevance */}
          <Section num="4" title="Qualidade & relevância" sub="Calibre o filtro do agente">
            <div className="rd-field">
              <label className="rd-label">
                <Icon name="sparkles" size={13} color="var(--brand)" />
                Relevância mínima
              </label>
              <Slider
                value={data.minRelevance}
                onChange={(v) => set({ minRelevance: v })}
                labels={["0% (tudo)", "50% (médio)", "100% (alta)"]}
              />
              <div className="rd-hint">Insights abaixo desse score não aparecem no feed.</div>
            </div>
            <div className="rd-field">
              <label className="rd-label">
                <Icon name="alert" size={13} color="var(--warning)" />
                Limiar de alerta
              </label>
              <Slider
                value={data.alertThreshold}
                onChange={(v) => set({ alertThreshold: v })}
                labels={["Calmo", "Notificável", "Crítico"]}
              />
              <div className="rd-hint">A partir desse score, dispara notificações pelos canais escolhidos.</div>
            </div>
          </Section>

          {/* 5 — Cadence */}
          <Section num="5" title="Cadência & alertas" sub="Quando rodar e como avisar">
            <div className="rd-field">
              <label className="rd-label">Frequência</label>
              <div className="rd-segmented wide">
                {FREQ_CHOICES.map(f => (
                  <button
                    key={f.value}
                    type="button"
                    className={data.frequency === f.value ? "active" : ""}
                    onClick={() => set({ frequency: f.value })}
                  >
                    <Icon name={f.icon} size={12} />
                    {f.label}
                  </button>
                ))}
              </div>
            </div>

            {(data.frequency === "daily" || data.frequency === "weekly" || data.frequency === "monthly") && (
              <div className="rd-field-row cols-2">
                <div className="rd-field" style={{ marginBottom: 0 }}>
                  <label className="rd-label">
                    <Icon name="clock" size={13} />
                    Horário (horário de Brasília)
                  </label>
                  <input
                    type="time"
                    className="rd-input"
                    value={data.runTime}
                    onChange={(e) => set({ runTime: e.target.value })}
                  />
                </div>
                <div className="rd-field" style={{ marginBottom: 0 }}>
                  <label className="rd-label">Janela de coleta</label>
                  <select className="rd-select" defaultValue="24h">
                    <option value="24h">Últimas 24h</option>
                    <option value="48h">Últimas 48h</option>
                    <option value="7d">Últimos 7 dias</option>
                    <option value="30d">Últimos 30 dias</option>
                  </select>
                </div>
              </div>
            )}

            <div className="rd-field">
              <label className="rd-label">
                <Icon name="bell" size={13} />
                Canais de notificação
              </label>
              <div className="rd-field-row cols-3">
                {[
                  { key: "slack", label: "Slack",   icon: "slack" },
                  { key: "email", label: "E-mail",  icon: "mail"  },
                  { key: "inApp", label: "In-app",  icon: "bell"  }
                ].map(ch => (
                  <button
                    key={ch.key}
                    type="button"
                    onClick={() => setNotify({ [ch.key]: !data.notify[ch.key] })}
                    className="rd-source-card"
                    style={{
                      cursor: "pointer",
                      ...(data.notify[ch.key] ? {
                        borderColor: "var(--brand)",
                        background: "var(--brand-dim)",
                        boxShadow: "0 0 0 1px var(--brand) inset"
                      } : {})
                    }}
                  >
                    <Icon name={ch.icon} size={16} color={data.notify[ch.key] ? "var(--brand)" : "var(--ink-2)"} />
                    <div className="body">
                      <div className="name">{ch.label}</div>
                      <div className="sub">{data.notify[ch.key] ? "Ativado" : "Desativado"}</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </Section>

          {/* 6 — AI tuning */}
          <Section num="6" title="Agente de IA" sub="Como o Discovery Agent processa os achados">
            <div className="rd-field">
              <label className="rd-label">
                <Icon name="sparkles" size={13} color="var(--brand)" />
                Profundidade da análise
              </label>
              <Segmented
                wide
                value={data.aiDepth}
                onChange={(v) => set({ aiDepth: v })}
                options={[
                  { value: "fast",     label: "Rápido",     icon: "zap" },
                  { value: "balanced", label: "Balanceado", icon: "sparkles" },
                  { value: "deep",     label: "Profundo",   icon: "cpu" }
                ]}
              />
              <div className="rd-hint">
                {data.aiDepth === "fast" && "Resumo de 1 frase por insight. Ideal para alto volume."}
                {data.aiDepth === "balanced" && "Resumo + tags + relevância. Boa relação custo/qualidade (padrão)."}
                {data.aiDepth === "deep" && "Cross-source analysis, identifica contradições, gera recomendações. Custo maior."}
              </div>
            </div>

            <div className="rd-field">
              <div className="rd-set-row" style={{ padding: 12 }}>
                <Icon name="sparkles" size={18} color="var(--brand)" />
                <div className="body">
                  <div className="lbl">Auto-resumir cada insight</div>
                  <div className="desc">O agente gera um resumo executivo de 2-3 linhas para cada item descoberto.</div>
                </div>
                <Toggle on={data.autoSummarize} onChange={(v) => set({ autoSummarize: v })} />
              </div>
            </div>

            <button
              type="button"
              className="rd-btn ghost sm"
              onClick={() => setShowAdvanced(!showAdvanced)}
              style={{ marginTop: 4 }}
            >
              <Icon name="chevron" size={11} style={{ transform: showAdvanced ? "rotate(90deg)" : "none", transition: "transform 0.15s" }} />
              {showAdvanced ? "Ocultar avançado" : "Mostrar opções avançadas"}
            </button>

            {showAdvanced && (
              <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 14 }}>
                <div className="rd-field" style={{ marginBottom: 0 }}>
                  <label className="rd-label">
                    <Icon name="x" size={13} color="var(--danger)" />
                    Domínios bloqueados
                  </label>
                  <ChipInput
                    values={data.blockDomains}
                    onChange={(v) => set({ blockDomains: v })}
                    placeholder="ex: spam-site.com…"
                    variant="danger"
                  />
                </div>
                <div className="rd-field" style={{ marginBottom: 0 }}>
                  <label className="rd-label">
                    <Icon name="code" size={13} />
                    Prompt customizado para o agente
                  </label>
                  <textarea
                    className="rd-textarea"
                    placeholder={`ex: "Foque em sinais competitivos de B2B. Priorize anúncios de funding e mudanças de leadership. Ignore conteúdo institucional puro."`}
                    value={data.customPrompt}
                    onChange={(e) => set({ customPrompt: e.target.value })}
                    style={{ fontFamily: "var(--font-mono)", fontSize: 12, minHeight: 80 }}
                  />
                  <div className="rd-hint">Esse contexto é anexado a TODAS as chamadas do agente. Use para refinar o filtro.</div>
                </div>
              </div>
            )}
          </Section>
        </div>

        <div className="rd-modal-footer">
          <div className="left">
            {isEdit && onDelete && (
              <button type="button" className="rd-btn danger sm" onClick={() => { onDelete(initial.id); onClose(); }}>
                <Icon name="trash" size={12} />
                Excluir
              </button>
            )}
            <span style={{ fontSize: 11.5, color: "var(--ink-3)", marginLeft: 4 }}>
              {data.keywords.length + data.competitors.length} termos · {data.sources.length} fontes
            </span>
          </div>
          <div className="right">
            <button type="button" className="rd-btn" onClick={onClose}>Cancelar</button>
            <button
              type="button"
              className="rd-btn primary"
              disabled={!valid}
              onClick={() => { onSave(data); onClose(); }}
            >
              <Icon name="sparkles" size={12} />
              {isEdit ? "Salvar alterações" : "Criar e iniciar busca"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TriggerModal = TriggerModal;