// ============ ACTION DRAWER ============
// Slide-in panel for contextual actions without navigating away.
// Opened via window.citrus.openDrawer(type, props).
// Types: "kb-add" -> KBQuickAddDrawer, "training" -> TrainingDrawerContent.

const { useState, useEffect, useRef } = window.React || React;

const _adrServerURL = () =>
  (window.CITRUS_CONFIG && window.CITRUS_CONFIG.SERVER_URL) || "http://localhost:3001";

function _adrEnvHeaders() {
  const h = {};
  try {
    const id = localStorage.getItem("citrus_active_env");
    const d = JSON.parse(localStorage.getItem("citrus_active_env_data") || "null");
    if (id && d && d.type !== "production") h["X-Env-Id"] = id;
  } catch {}
  if (window.__citrusTenantSlug) h["X-Tenant-Slug"] = window.__citrusTenantSlug;
  return h;
}

function adrFetch(path, opts = {}) {
  const headers = { "content-type": "application/json", ..._adrEnvHeaders(), ...(opts.headers || {}) };
  return fetch(_adrServerURL() + path, { ...opts, credentials: "include", headers })
    .then(r => r.ok ? r.json() : r.json().then(b => Promise.reject(new Error(b?.error || r.status))));
}

function _adrTimeAgo(iso) {
  if (!iso) return "";
  const diff = Date.now() - new Date(iso).getTime();
  const m = Math.floor(diff / 60000);
  if (m < 1) return "just now";
  if (m < 60) return m + "m ago";
  const h = Math.floor(m / 60);
  if (h < 24) return h + "h ago";
  return Math.floor(h / 24) + "d ago";
}

// ── KB Quick-Add ──────────────────────────────────────────────────────────────

function KBQuickAddDrawer({ prefill = "", onClose }) {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState(prefill || "");
  const [folders, setFolders] = useState([]);
  const [folderId, setFolderId] = useState("");
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    adrFetch("/knowledge/folders").then(setFolders).catch(() => {});
  }, []);

  const save = () => {
    const name = title.trim();
    if (!name) { window.toast && window.toast("Please add a title", "warn"); return; }
    setSaving(true);
    adrFetch("/knowledge", {
      method: "POST",
      body: JSON.stringify({
        name,
        kind: "doc",
        content: content.trim(),
        contentType: "text/plain",
        folderId: folderId || null,
      }),
    })
      .then(() => { window.toast && window.toast("Document added to knowledge base", "good"); onClose(); })
      .catch(e => { window.toast && window.toast("Couldn't add: " + e.message, "warn"); })
      .finally(() => setSaving(false));
  };

  return (
    <div className="adr-body">
      <div className="adr-field">
        <label className="adr-label">Title</label>
        <input
          className="adr-input"
          value={title}
          onChange={e => setTitle(e.target.value)}
          placeholder="e.g. Return policy update"
          autoFocus
        />
      </div>
      <div className="adr-field">
        <label className="adr-label">Content <span className="adr-opt">(optional)</span></label>
        <textarea
          className="adr-textarea"
          value={content}
          onChange={e => setContent(e.target.value)}
          placeholder="Paste or type knowledge here..."
          rows={9}
        />
      </div>
      <div className="adr-field">
        <label className="adr-label">Folder <span className="adr-opt">(optional)</span></label>
        <select className="adr-select" value={folderId} onChange={e => setFolderId(e.target.value)}>
          <option value="">No folder</option>
          {folders.map(f => <option key={f.id} value={f.id}>{f.name}</option>)}
        </select>
      </div>
      <div className="adr-actions">
        <button className="adr-btn adr-btn--primary" onClick={save} disabled={saving}>
          {saving ? "Saving..." : "Add to knowledge base"}
        </button>
      </div>
    </div>
  );
}

// ── Training Drawer ───────────────────────────────────────────────────────────

function TrainingDrawerContent({ agentId, agentName, expandScenario = true, viewPersonaId, onClose }) {
  const [personas, setPersonas] = useState(null);
  const [loading, setLoading] = useState(true);
  const [running, setRunning] = useState(null);
  const [scenarioOpen, setScenarioOpen] = useState(!!expandScenario);
  const [improving, setImproving] = useState(false);
  const [detecting, setDetecting] = useState(false);
  const [maintResult, setMaintResult] = useState(null); // { type: "learn"|"conflicts", data, at }

  // In-drawer navigation
  const [view, setView] = useState("home"); // "home" | "scenarios" | "transcript"
  const [txPid, setTxPid] = useState(null);
  const [txData, setTxData] = useState(null);
  const [txLoading, setTxLoading] = useState(false);

  const historyRef = useRef(null);

  const reloadPersonas = () => {
    if (!agentId) return;
    adrFetch("/personas")
      .then(data => setPersonas(Array.isArray(data) ? data.filter(p => p.agentId === agentId) : []))
      .catch(() => {});
  };

  useEffect(() => {
    if (!agentId) { setLoading(false); return; }
    adrFetch("/personas")
      .then(data => setPersonas(Array.isArray(data) ? data.filter(p => p.agentId === agentId) : []))
      .catch(() => setPersonas([]))
      .finally(() => setLoading(false));
  }, [agentId]);

  useEffect(() => {
    if (viewPersonaId && !loading && personas !== null) {
      viewTranscript(viewPersonaId);
    }
  }, [viewPersonaId, loading, personas !== null]);

  useEffect(() => {
    if (!expandScenario && !loading && historyRef.current) {
      setTimeout(() => historyRef.current && historyRef.current.scrollIntoView({ behavior: "smooth", block: "start" }), 120);
    }
  }, [expandScenario, loading]);

  // Poll transcript while persona is running
  useEffect(() => {
    if (view !== "transcript" || !txData || txData.status !== "running") return;
    const iv = setInterval(() => {
      adrFetch("/personas/" + txPid)
        .then(data => {
          setTxData(data);
          setPersonas(ps => (ps || []).map(p => p.id === data.id ? { ...p, status: data.status, grades: data.grades } : p));
        })
        .catch(() => {});
    }, 3000);
    return () => clearInterval(iv);
  }, [view, txData && txData.status, txPid]);

  const viewTranscript = (pid) => {
    setTxPid(pid);
    setTxData(null);
    setTxLoading(true);
    setView("transcript");
    adrFetch("/personas/" + pid)
      .then(data => setTxData(data))
      .catch(() => setTxData(null))
      .finally(() => setTxLoading(false));
  };

  const runPersona = (pId) => {
    setRunning(pId);
    adrFetch("/personas/" + pId + "/start", { method: "POST" })
      .then(() => {
        window.toast && window.toast("Scenario started", "good");
        setPersonas(ps => (ps || []).map(p => p.id === pId ? { ...p, status: "running" } : p));
        viewTranscript(pId);
      })
      .catch(() => window.toast && window.toast("Couldn't start scenario", "warn"))
      .finally(() => setRunning(null));
  };

  const goBack = () => { setView("home"); setTxData(null); setTxPid(null); };

  // ── Helpers ──

  const sc = (s) => s >= 7 ? "#196C42" : s >= 5 ? "#B84410" : "#742855";

  const _avg = (grades) => {
    if (!grades || !grades.length) return null;
    return (grades.reduce((s, g) => s + g.score, 0) / grades.length).toFixed(1);
  };

  const _trendLabel = (grades) => {
    const scores = (grades || []).map(g => g.score);
    if (scores.length < 2) return { text: "no trend yet", cls: "tr-trend-none" };
    const first = scores[0], last = scores[scores.length - 1];
    if (last > first) return { text: "improving", cls: "tr-trend-up" };
    if (last < first) return { text: "declining", cls: "tr-trend-down" };
    return { text: "stable", cls: "tr-trend-stable" };
  };

  const _personaIcon = (p) => {
    if (!p) return "?";
    const n = (p.name || "").toLowerCase();
    if (n.includes("aggressive") || n.includes("angry") || n.includes("buyer")) return "🔥";
    if (n.includes("technical") || n.includes("specif")) return "🔧";
    if (n.includes("confused") || n.includes("senior")) return "🤔";
    if (n.includes("complain")) return "😤";
    return "▷";
  };

  const _ps = personas || [];

  const _recommended = _ps.reduce((best, p) => {
    if (!best) return p;
    const lastAt = ((p.grades || []).slice(-1)[0] || {}).at || "";
    const bestAt = ((best.grades || []).slice(-1)[0] || {}).at || "";
    return lastAt > bestAt ? p : best;
  }, null);

  const _others = _ps.filter(p => p !== _recommended);

  const _runHistory = _ps.flatMap(p =>
    (p.grades || []).map(g => ({ ...g, personaName: p.name, personaId: p.id, durationMin: p.durationMin, personaObj: p }))
  ).sort((a, b) => new Date(b.at || 0) - new Date(a.at || 0));

  const _improveLearning = () => {
    if (!agentId) return;
    setImproving(true);
    setMaintResult(null);
    adrFetch("/agents/" + agentId + "/learn", { method: "POST" })
      .then(data => setMaintResult({ type: "learn", data, at: new Date() }))
      .catch(() => setMaintResult({ type: "learn", error: true, at: new Date() }))
      .finally(() => setImproving(false));
  };

  const _detectConflicts = () => {
    if (!agentId) return;
    setDetecting(true);
    setMaintResult(null);
    adrFetch("/conflicts/detect", { method: "POST", body: JSON.stringify({ agentId }) })
      .then(data => setMaintResult({ type: "conflicts", data, at: new Date() }))
      .catch(() => setMaintResult({ type: "conflicts", error: true, at: new Date() }))
      .finally(() => setDetecting(false));
  };

  // ── Loading / Empty ──

  if (loading) return <div className="tr-adr-loading">Loading training data...</div>;

  if (_ps.length === 0 && view === "home") {
    return (
      <div className="tr-adr-empty">
        <div className="tr-adr-empty-title">No personas configured yet</div>
        <div className="tr-adr-empty-sub">
          Personas are synthetic test customers that stress-test {agentName || "this agent"} before they meet real customers.
        </div>
        <button
          className="tr-adr-empty-btn"
          onClick={() => { onClose(); window.citrusNav && window.citrusNav("personas"); }}
        >
          Create a persona -&gt;
        </button>
      </div>
    );
  }

  // ── Transcript View ──

  if (view === "transcript") {
    const txPersona = _ps.find(p => p.id === txPid) || (txData ? { id: txData.id, name: txData.name } : null);
    const isLive = txData && txData.status === "running";
    const msgs = txData ? (txData.transcript || []) : [];
    const lastGrade = txData ? ((txData.grades || []).slice(-1)[0] || null) : null;
    const issuesByTurn = {};
    if (lastGrade && Array.isArray(lastGrade.issues)) {
      for (const it of lastGrade.issues) {
        if (!issuesByTurn[it.turnIndex]) issuesByTurn[it.turnIndex] = [];
        issuesByTurn[it.turnIndex].push(it.issue);
      }
    }
    const axes = lastGrade && lastGrade.axes ? lastGrade.axes : null;

    return (
      <div className="tr-adr-wrap">
        <div className="tr-adr-topbar">
          <button className="tr-adr-back-btn" onClick={goBack}>
            ← Back
          </button>
          <span className="tr-adr-topbar-title">{txPersona ? txPersona.name : "Transcript"}</span>
          {isLive && <span className="tr-adr-live-chip">● Live</span>}
          <button
            className="tr-adr-run-inline-btn"
            onClick={() => txPid && runPersona(txPid)}
            disabled={running === txPid || isLive}
          >
            {running === txPid ? "Starting..." : isLive ? "Running..." : "Run again"}
          </button>
        </div>

        {txLoading && (
          <div className="tr-adr-loading" style={{ marginTop: 24 }}>Loading transcript...</div>
        )}

        {!txLoading && txData && lastGrade && (
          <div className="tr-adr-grade-card">
            <div className="tr-adr-grade-top">
              <span className="tr-adr-grade-score" style={{ color: sc(lastGrade.score) }}>{lastGrade.score}/10</span>
              <span className="tr-adr-grade-time">{_adrTimeAgo(lastGrade.at)}</span>
            </div>
            {(lastGrade.feedback || lastGrade.summary) && (
              <div className="tr-adr-grade-feedback">{lastGrade.feedback || lastGrade.summary}</div>
            )}
            {axes && (
              <div className="tr-adr-axes">
                {Object.entries(axes).map(([k, v]) => (
                  <span key={k} className="tr-adr-axis-chip">
                    {k.replace(/([A-Z])/g, " $1").toLowerCase()} {v}/5
                  </span>
                ))}
              </div>
            )}
            {lastGrade.issues && lastGrade.issues.length > 0 && (
              <div className="tr-adr-grade-issues">
                {lastGrade.issues.map((it, i) => (
                  <div key={i} className="tr-adr-grade-issue">⚠ Turn {it.turnIndex + 1}: {it.issue}</div>
                ))}
              </div>
            )}
          </div>
        )}

        {!txLoading && msgs.length === 0 && (
          <div className="tr-adr-empty-sub" style={{ padding: "20px 0", textAlign: "center" }}>
            {isLive ? "Conversation starting..." : "No messages yet — run the scenario to see the transcript."}
          </div>
        )}

        {!txLoading && msgs.length > 0 && (
          <div className="tr-adr-messages">
            {msgs.map((m, i) => {
              const isAgent = m.role === "agent";
              const turnIssues = issuesByTurn[i] || [];
              return (
                <div key={i} className={"tr-adr-msg " + (isAgent ? "tr-adr-msg--agent" : "tr-adr-msg--customer")}>
                  <div className="tr-adr-msg-label">
                    {isAgent ? ("🤖 " + (agentName || "Agent")) : ("👤 " + (txPersona ? txPersona.name : "Customer"))}
                  </div>
                  <div className="tr-adr-msg-bubble" dir="auto">{m.content}</div>
                  {turnIssues.length > 0 && (
                    <div className="tr-adr-msg-flag">
                      {turnIssues.map((iss, ix) => <span key={ix}>⚠ {iss}</span>)}
                    </div>
                  )}
                </div>
              );
            })}
            {isLive && (
              <div className="tr-adr-live-indicator">● Conversation in progress — refreshing automatically</div>
            )}
          </div>
        )}
      </div>
    );
  }

  // ── All Scenarios View ──

  if (view === "scenarios") {
    return (
      <div className="tr-adr-wrap">
        <div className="tr-adr-topbar">
          <button className="tr-adr-back-btn" onClick={goBack}>← Back</button>
          <span className="tr-adr-topbar-title">All scenarios</span>
        </div>

        <div className="tr-adr-scenarios-list">
          {_ps.map(p => {
            const avg = _avg(p.grades);
            const lastRun = (p.grades || []).slice(-1)[0];
            const isRunning = p.status === "running";
            return (
              <div key={p.id} className="tr-adr-scenario-card">
                <div className="tr-adr-scenario-card-top">
                  <span className="tr-adr-scenario-card-icon">{_personaIcon(p)}</span>
                  <div className="tr-adr-scenario-card-info">
                    <span className="tr-adr-scenario-card-name">{p.name}</span>
                    {avg && <span className="tr-adr-scenario-card-avg" style={{ color: sc(Number(avg)) }}>{avg}/10 avg</span>}
                  </div>
                </div>
                {p.vibe && <div className="tr-adr-scenario-card-vibe">{p.vibe}</div>}
                {lastRun && (
                  <div className="tr-adr-scenario-card-meta">
                    Last run {_adrTimeAgo(lastRun.at)} · score {lastRun.score}/10
                  </div>
                )}
                <div className="tr-adr-scenario-card-actions">
                  <button
                    className="tr-adr-run-primary"
                    style={{ flex: 1 }}
                    onClick={() => runPersona(p.id)}
                    disabled={running === p.id || isRunning}
                  >
                    {running === p.id || isRunning ? "Running..." : "Run scenario"}
                  </button>
                  {(p.grades || []).length > 0 && (
                    <button className="tr-adr-run-btn-ghost" onClick={() => viewTranscript(p.id)}>
                      View transcript
                    </button>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--border, #e5e7eb)" }}>
          <button
            className="tr-adr-pill tr-adr-pill--dashed"
            style={{ fontSize: 13, padding: "8px 16px" }}
            onClick={() => { onClose(); window.citrusNav && window.citrusNav("personas"); }}
          >
            + Build your own persona
          </button>
        </div>
      </div>
    );
  }

  // ── Home View ──

  return (
    <div className="tr-adr-wrap">

      {/* Run a new scenario */}
      <div className="tr-adr-scenario-block">
        <div className="tr-adr-scenario-hdr">
          <span className="tr-adr-scenario-title">Run a new scenario</span>
          <button className="tr-adr-chevron-btn" onClick={() => setScenarioOpen(v => !v)} aria-label="Toggle">
            {scenarioOpen ? "▾" : "▸"}
          </button>
        </div>

        {scenarioOpen && _recommended && (
          <div className="tr-adr-featured">
            <div className="tr-adr-feat-top">
              <span className="tr-adr-feat-icon">{_personaIcon(_recommended)}</span>
              <span className="tr-adr-feat-name">{_recommended.name}</span>
              <span className="tr-adr-feat-badge">recommended</span>
            </div>
            {_recommended.vibe && <div className="tr-adr-feat-vibe">{_recommended.vibe}</div>}
            {(() => {
              const last = (_recommended.grades || []).slice(-1)[0];
              if (!last) return null;
              return (
                <div className="tr-adr-feat-meta">
                  <span className="tr-adr-feat-meta-item">
                    last run: {last.score}/10, {_adrTimeAgo(last.at)}
                  </span>
                  {_recommended.durationMin && (
                    <span className="tr-adr-feat-meta-item">~{_recommended.durationMin} min</span>
                  )}
                </div>
              );
            })()}
            <div style={{ display: "flex", gap: 8 }}>
              <button
                className="tr-adr-run-primary"
                style={{ flex: 1 }}
                onClick={() => runPersona(_recommended.id)}
                disabled={running === _recommended.id || _recommended.status === "running"}
              >
                {running === _recommended.id || _recommended.status === "running" ? "Starting..." : "Run this persona"}
              </button>
              {(_recommended.grades || []).length > 0 && (
                <button className="tr-adr-run-btn-ghost" onClick={() => viewTranscript(_recommended.id)}>
                  Transcript
                </button>
              )}
            </div>
          </div>
        )}

        {scenarioOpen && (
          <div className="tr-adr-pills-row">
            {_others.map(p => (
              <button
                key={p.id}
                className="tr-adr-pill"
                onClick={() => runPersona(p.id)}
                disabled={running === p.id || p.status === "running"}
              >
                {_personaIcon(p)} {p.name}
              </button>
            ))}
            <button className="tr-adr-pill" onClick={() => setView("scenarios")}>
              See all scenarios -&gt;
            </button>
            <button
              className="tr-adr-pill tr-adr-pill--dashed"
              onClick={() => { onClose(); window.citrusNav && window.citrusNav("personas"); }}
            >
              + Build your own
            </button>
          </div>
        )}
      </div>

      {/* AI Maintenance */}
      <div className="tr-adr-maintenance">
        <div className="tr-adr-maintenance-label">AI maintenance</div>
        <div className="tr-adr-maintenance-row">
          <button className="tr-adr-maint-btn" onClick={_improveLearning} disabled={improving || detecting}>
            {improving ? "Running..." : "🧠 Extract lessons"}
          </button>
          <button className="tr-adr-maint-btn" onClick={_detectConflicts} disabled={detecting || improving}>
            {detecting ? "Checking..." : "🔍 Check for conflicts"}
          </button>
        </div>

        {maintResult && (() => {
          const r = maintResult;
          const timeStr = r.at ? r.at.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "";

          if (r.error) {
            return (
              <div className="tr-maint-result tr-maint-result--warn">
                <div className="tr-maint-result-hdr">
                  <span>{r.type === "learn" ? "Learning cycle failed" : "Check failed"}</span>
                  <button className="tr-maint-result-close" onClick={() => setMaintResult(null)}>×</button>
                </div>
                <div className="tr-maint-result-body">Something went wrong — try again.</div>
              </div>
            );
          }

          if (r.type === "learn") {
            const lessons = (r.data && r.data.lessons) ? r.data.lessons : [];
            return (
              <div className={"tr-maint-result " + (lessons.length > 0 ? "tr-maint-result--good" : "tr-maint-result--neutral")}>
                <div className="tr-maint-result-hdr">
                  <span>
                    {lessons.length > 0
                      ? "Extracted " + lessons.length + " lesson" + (lessons.length === 1 ? "" : "s")
                      : "Nothing new to learn yet"}
                    {timeStr ? " · " + timeStr : ""}
                  </span>
                  <button className="tr-maint-result-close" onClick={() => setMaintResult(null)}>×</button>
                </div>
                {lessons.length > 0 && (
                  <div className="tr-maint-result-body">
                    {lessons.map((l, i) => (
                      <div key={i} className="tr-maint-lesson">
                        <span className="tr-maint-lesson-dot">•</span>
                        <span>{l.what || l.text || l.content || JSON.stringify(l)}</span>
                      </div>
                    ))}
                  </div>
                )}
                {lessons.length === 0 && (
                  <div className="tr-maint-result-body tr-maint-result-hint">
                    Run more conversations first — the more {agentName || "the agent"} talks to real customers, the more there is to learn from.
                  </div>
                )}
              </div>
            );
          }

          if (r.type === "conflicts") {
            const d = r.data || {};
            const conflicts = d.conflicts || [];
            const autoResolved = d.autoResolved || 0;
            const found = d.found || 0;
            const hasIssues = found > 0 || conflicts.length > 0;
            return (
              <div className={"tr-maint-result " + (autoResolved > 0 ? "tr-maint-result--good" : hasIssues ? "tr-maint-result--warn" : "tr-maint-result--neutral")}>
                <div className="tr-maint-result-hdr">
                  <span>
                    {autoResolved > 0 && "Auto-resolved " + autoResolved + " conflict" + (autoResolved === 1 ? "" : "s")}
                    {!autoResolved && hasIssues && found + " conflict" + (found === 1 ? "" : "s") + " found"}
                    {!hasIssues && "No conflicts found"}
                    {timeStr ? " · " + timeStr : ""}
                  </span>
                  <button className="tr-maint-result-close" onClick={() => setMaintResult(null)}>×</button>
                </div>
                {conflicts.length > 0 && (
                  <div className="tr-maint-result-body">
                    {conflicts.map((c, i) => (
                      <div key={i} className="tr-maint-conflict">
                        <div className="tr-maint-conflict-pair">
                          <span className="tr-maint-conflict-a">{c.lessonA || c.a}</span>
                          <span className="tr-maint-conflict-vs">vs</span>
                          <span className="tr-maint-conflict-b">{c.lessonB || c.b}</span>
                        </div>
                        {c.resolution && (
                          <div className="tr-maint-conflict-resolution">→ {c.resolution}</div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
                {!hasIssues && (
                  <div className="tr-maint-result-body tr-maint-result-hint">
                    All of {agentName || "this agent"}'s learnings are consistent with each other.
  </div>
                )}
              </div>
            );
          }
          return null;
        })()}
      </div>

    </div>
  );
}

// ── Shell ─────────────────────────────────────────────────────────────────────

function ActionDrawer({ drawer, onClose }) {
  const isTraining = drawer && drawer.type === "training";

  useEffect(() => {
    if (!drawer) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [drawer, onClose]);

  if (!drawer) return null;

  const getTitle = () => {
    if (drawer.type === "training") {
      return drawer.props && drawer.props.agentName ? drawer.props.agentName + " · Training" : "Training";
    }
    return "Add to knowledge base";
  };

  const getSubtitle = () => {
    if (drawer.type === "training" && drawer.props && drawer.props.agentName) {
      return "Stress-test " + drawer.props.agentName + " before she meets a real customer";
    }
    return null;
  };

  const subtitle = getSubtitle();

  return (
    <>
      <div
        className="adr-backdrop"
        onClick={isTraining ? undefined : onClose}
        aria-hidden="true"
      />
      <div className={"adr-panel" + (isTraining ? " adr-panel--training" : "")} role="dialog" aria-modal="true" aria-label={getTitle()}>
        <div className="adr-header">
          <div className="adr-header-text">
            <span className="adr-title">{getTitle()}</span>
            {subtitle && <span className="adr-subtitle">{subtitle}</span>}
          </div>
          <button className="adr-close" onClick={onClose} aria-label="Close">x</button>
        </div>
        {drawer.type === "kb-add" && (
          <KBQuickAddDrawer prefill={drawer.props && drawer.props.prefill} onClose={onClose} />
        )}
        {drawer.type === "training" && (
          <TrainingDrawerContent
            agentId={drawer.props && drawer.props.agentId}
            agentName={drawer.props && drawer.props.agentName}
            expandScenario={drawer.props && drawer.props.expandScenario !== false}
            viewPersonaId={drawer.props && drawer.props.viewPersonaId}
            onClose={onClose}
          />
        )}
      </div>
    </>
  );
}

window.ActionDrawer = ActionDrawer;