/* global React, Icon, Chip, Button, Avatar, getServiceStages, api */

function StageConfirmModal({ from, to, stageName, onConfirm, onCancel, saving, error }) {
  const isForward = to > from;
  const [note, setNote] = React.useState("");
  return (
    <div className="scrim" onClick={onCancel}>
      <div className="modal" style={{ maxWidth: 440 }} onClick={ev => ev.stopPropagation()}>
        <div className="modal-head">
          <h2 style={{ margin: 0, fontSize: 17 }}>{isForward ? "Advance to next stage" : "Revert stage"}</h2>
          <button className="icon-btn" onClick={onCancel}><Icon name="x" size={18} /></button>
        </div>
        <div className="modal-body" style={{ padding: "16px 20px", display: "flex", flexDirection: "column", gap: 14 }}>
          <p style={{ margin: 0, fontSize: 14, color: "var(--fg-2)" }}>
            {isForward
              ? <span>Move to <b>Stage {to}</b>: <b>{stageName}</b>.</span>
              : <span>Revert to <b>Stage {to}</b>: <b>{stageName}</b>? Later stages will be marked incomplete.</span>}
          </p>
          <div>
            <label style={{ fontSize: 12, fontWeight: 600, color: "var(--fg-3)", display: "block", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.08em" }}>
              Message / Note <span style={{ fontWeight: 400, textTransform: "none", letterSpacing: 0 }}>(optional)</span>
            </label>
            <textarea
              value={note}
              onChange={ev => setNote(ev.target.value)}
              placeholder="e.g. Documents verified, application submitted to GDRFA…"
              rows={3}
              autoFocus
              style={{
                width: "100%", boxSizing: "border-box", resize: "vertical",
                padding: "9px 12px", borderRadius: 7, border: "1px solid var(--border-strong)",
                fontFamily: "inherit", fontSize: 13.5, color: "var(--fg-1)",
                background: "var(--ink-50)", outline: "none", lineHeight: 1.5,
              }}
              onFocus={ev => { ev.target.style.borderColor = "var(--brand-burgundy)"; ev.target.style.boxShadow = "0 0 0 3px var(--plum-100)"; }}
              onBlur={ev =>  { ev.target.style.borderColor = "var(--border-strong)";   ev.target.style.boxShadow = "none"; }}
            />
          </div>
          {error && <div style={{ color: "var(--danger-700)", fontSize: 13 }}>{error}</div>}
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, padding: "12px 20px", borderTop: "1px solid var(--border-subtle)" }}>
          <button className="btn btn-secondary" onClick={onCancel} disabled={saving}>Cancel</button>
          <button className="btn btn-primary" onClick={() => onConfirm(note.trim())} disabled={saving}>
            {saving ? "Saving…" : isForward ? "Advance stage" : "Revert stage"}
          </button>
        </div>
      </div>
    </div>
  );
}

function EngagementPage({ engagement, onBack }) {
  const e = engagement || {
    id: "ENG-2026-0214",
    customer: "Mohammed Al-Rashid",
    service: "Investor visa renewal",
    serviceIcon: "plane",
    started: "02 May 2026",
    due: "28 May 2026",
    daysLeft: 14,
    quoted: "AED 4,750",
    paid: "AED 2,000",
    stage: 2,
  };
  const stageDefs = getServiceStages(e.service);
  const stages = stageDefs.map((sd, i) => ({
    n: String(i + 1).padStart(2, "0"),
    t: sd.t,
    s: sd.desc,
  }));

  const [currentStage, setCurrentStage] = React.useState(e.stage || 1);
  const [pendingStage, setPendingStage]  = React.useState(null);
  const [saving, setSaving]             = React.useState(false);
  const [stageError, setStageError]     = React.useState("");

  const [rawEng, setRawEng]           = React.useState(e._raw || null);
  const [notes, setNotes]             = React.useState([]);
  const [noteText, setNoteText]       = React.useState("");
  const [notePosting, setNotePosting] = React.useState(false);
  const [documents, setDocuments]     = React.useState([]);
  const [uploading, setUploading]     = React.useState(false);

  const [channels, setChannels]         = React.useState(["mail"]);
  const [savingChannels, setSavingChannels] = React.useState(false);
  const [editingRenewal, setEditingRenewal] = React.useState(false);
  const [renewalForm, setRenewalForm]   = React.useState({ dueDate: "", refNumber: "" });
  const [savingRenewal, setSavingRenewal] = React.useState(false);

  const composerRef  = React.useRef(null);
  const fileInputRef = React.useRef(null);
  const engId = e._id || e.id;

  function fmtWhen(dateStr) {
    if (!dateStr) return "";
    const d   = new Date(dateStr);
    const now = new Date();
    const time = d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
    const diffDays = Math.floor((now - d) / 86400000);
    if (diffDays === 0) return "Today · " + time;
    if (diffDays === 1) return "Yesterday · " + time;
    return d.toLocaleDateString("en-GB", { day: "numeric", month: "short" }) + " · " + time;
  }

  function fmtSize(bytes) {
    if (!bytes) return "";
    if (bytes < 1024) return bytes + " B";
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + " KB";
    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
  }

  function docIcon(name) {
    const ext = (name || "").split(".").pop().toLowerCase();
    if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext)) return "image";
    if (ext === "pdf") return "file-text";
    if (["doc", "docx"].includes(ext)) return "file-text";
    if (["xls", "xlsx"].includes(ext)) return "table";
    if (["zip", "rar"].includes(ext)) return "archive";
    return "paperclip";
  }

  async function loadEngagement() {
    try {
      const res = await api.get("/engagements/" + engId);
      setRawEng(res.data);
      setNotes((res.data.notes || []).slice().reverse());
      setDocuments((res.data.documents || []).slice().reverse());
      setChannels(res.data.reminderChannels || ["mail"]);
      setRenewalForm({
        dueDate:   res.data.dueDate   ? new Date(res.data.dueDate).toISOString().split("T")[0] : "",
        refNumber: res.data.refNumber || "",
      });
    } catch (_) {}
  }

  React.useEffect(() => {
    if (engId) loadEngagement();
  }, [engId]);

  async function switchStage(newStage, note) {
    setSaving(true);
    setStageError("");
    try {
      await api.put("/engagements/" + engId + "/stage", { currentStage: newStage });
      if (note) {
        const stageName = stages[newStage - 1]?.t || ("Stage " + newStage);
        const label = newStage > currentStage ? "Advanced to" : "Reverted to";
        await api.post("/engagements/" + engId + "/notes", {
          text: label + " " + stageName + ": " + note,
          by: "Team",
        });
      }
      setCurrentStage(newStage);
      setPendingStage(null);
      loadEngagement();
    } catch (err) {
      setStageError(err.message || "Failed to update stage");
    } finally {
      setSaving(false);
    }
  }

  async function postNote() {
    const text = noteText.trim();
    if (!text) return;
    setNotePosting(true);
    try {
      await api.post("/engagements/" + engId + "/notes", { text, by: "Team" });
      setNoteText("");
      loadEngagement();
    } catch (_) {}
    finally { setNotePosting(false); }
  }

  async function uploadDoc(file) {
    if (!file) return;
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append("file", file);
      fd.append("uploadedBy", "Team");
      await api.upload("/engagements/" + engId + "/documents", fd);
      loadEngagement();
    } catch (_) {}
    finally { setUploading(false); if (fileInputRef.current) fileInputRef.current.value = ""; }
  }

  async function deleteDoc(docId) {
    try {
      await api.delete("/engagements/" + engId + "/documents/" + docId);
      loadEngagement();
    } catch (_) {}
  }

  async function toggleChannel(ch) {
    const updated = channels.includes(ch)
      ? channels.filter(c => c !== ch)
      : [...channels, ch];
    if (updated.length === 0) return;
    setSavingChannels(true);
    try {
      await api.put("/engagements/" + engId, { reminderChannels: updated });
      setChannels(updated);
    } catch (_) {}
    finally { setSavingChannels(false); }
  }

  async function saveRenewal() {
    setSavingRenewal(true);
    try {
      const body = { refNumber: renewalForm.refNumber };
      if (renewalForm.dueDate) body.dueDate = renewalForm.dueDate;
      await api.put("/engagements/" + engId, body);
      setEditingRenewal(false);
      loadEngagement();
    } catch (_) {}
    finally { setSavingRenewal(false); }
  }

  function requestStage(n) {
    if (n !== currentStage && n >= 1 && n <= stages.length) setPendingStage(n);
  }

  return (
    <div className="page" style={{ maxWidth: "none" }}>
      {pendingStage !== null && (
        <StageConfirmModal
          from={currentStage}
          to={pendingStage}
          stageName={stages[pendingStage - 1]?.t || ""}
          saving={saving}
          error={stageError}
          onConfirm={(note) => switchStage(pendingStage, note)}
          onCancel={() => { setPendingStage(null); setStageError(""); }}
        />
      )}
      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
        <button className="btn btn-ghost btn-sm" onClick={onBack}><Icon name="arrow-left" size={14} />Back</button>
        <span className="cell-mono" style={{ fontSize: 12, color: "var(--fg-3)" }}>{e.id}</span>
        <span style={{ color: "var(--fg-4)" }}>·</span>
        <Chip kind="info">In progress</Chip>
      </div>

      <div className="page-head" style={{ alignItems: "flex-start" }}>
        <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
          <div style={{ width: 56, height: 56, borderRadius: 12, background: "var(--plum-50)", color: "var(--brand-burgundy)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <Icon name={e.serviceIcon} size={28} />
          </div>
          <div>
            <div className="eyebrow">Engagement</div>
            <h1 className="page-title">{e.service}</h1>
            <div className="page-sub">For <b style={{ color: "var(--fg-1)" }}>{e.customer}</b> · started {e.started} · due {e.due}</div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <Button variant="secondary" icon="message-circle">Message customer</Button>
          <button className="btn btn-secondary btn-sm" onClick={() => requestStage(currentStage - 1)} disabled={currentStage <= 1 || saving}>
            <Icon name="chevron-left" size={14} />Prev
          </button>
          <span style={{ fontSize: 12, color: "var(--fg-3)", whiteSpace: "nowrap" }}>Stage {currentStage} / {stages.length}</span>
          <button className="btn btn-primary btn-sm" onClick={() => requestStage(currentStage + 1)} disabled={currentStage >= stages.length || saving}>
            Next stage<Icon name="chevron-right" size={14} />
          </button>
        </div>
      </div>

      {/* Pipeline */}
      <div style={{ overflowX: "auto", marginBottom: 22, paddingBottom: 2 }}>
        <div className="pipeline" style={{ gridTemplateColumns: `repeat(${stages.length}, minmax(140px, 1fr))`, minWidth: stages.length > 5 ? `${stages.length * 150}px` : undefined }}>
          {stages.map((s, i) => {
            const stageNum = i + 1;
            const cls = "stage " + (stageNum < currentStage ? "done" : stageNum === currentStage ? "current" : "");
            return (
              <div key={i} className={cls} style={{ cursor: stageNum !== currentStage ? "pointer" : "default" }}
                onClick={() => requestStage(stageNum)}
                title={stageNum !== currentStage ? `Switch to Stage ${stageNum}` : undefined}>
                <div className="n">STAGE {s.n}</div>
                <div className="t">{s.t}</div>
                <div className="s">{s.s}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Two-column main */}
      <div className="resp-two-col" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16 }}>
        {/* Activity timeline */}
        <div>
          <div className="card">
            <div className="card-head">
              <h3 className="card-title">Activity timeline</h3>
              <Button variant="ghost" size="sm" icon="plus" onClick={() => composerRef.current && composerRef.current.focus()}>Add note</Button>
            </div>
            <div style={{ padding: "16px 22px 6px" }}>
              {/* Composer */}
              <div style={{ display: "flex", gap: 10, marginBottom: 16, padding: "10px 12px", background: "var(--ink-50)", border: "1px solid var(--border-subtle)", borderRadius: 8 }}>
                <Avatar name="Team" />
                <input
                  ref={composerRef}
                  value={noteText}
                  onChange={ev => setNoteText(ev.target.value)}
                  onKeyDown={ev => { if (ev.key === "Enter" && !ev.shiftKey) { ev.preventDefault(); postNote(); } }}
                  placeholder="Add a comment or status note…"
                  style={{ flex: 1, border: 0, background: "transparent", outline: "none", fontFamily: "inherit", fontSize: 13.5 }}
                  disabled={notePosting}
                />
                <Button size="sm" onClick={postNote} disabled={notePosting || !noteText.trim()}>
                  {notePosting ? "Posting…" : "Post"}
                </Button>
              </div>
              <div className="timeline">
                {notes.length === 0 ? (
                  <div style={{ padding: "16px 0 12px", fontSize: 13, color: "var(--fg-3)", textAlign: "center" }}>
                    No activity yet. Add the first note above.
                  </div>
                ) : notes.map((n, i) => (
                  <div key={n._id || i} className="tl-item done">
                    <div className="when">{fmtWhen(n.at)}</div>
                    <div className="what">{n.text}</div>
                    <div className="who">{n.by}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Documents */}
          <div className="card" style={{ marginTop: 14 }}>
            <div className="card-head">
              <h3 className="card-title">Documents {documents.length > 0 && <span style={{ fontSize: 12, color: "var(--fg-3)", fontWeight: 400 }}>({documents.length})</span>}</h3>
              <button className="btn btn-ghost btn-sm" onClick={() => fileInputRef.current && fileInputRef.current.click()} disabled={uploading}>
                <Icon name="upload" size={14} />{uploading ? "Uploading…" : "Upload"}
              </button>
              <input ref={fileInputRef} type="file" style={{ display: "none" }} onChange={ev => uploadDoc(ev.target.files[0])} />
            </div>
            <div>
              {documents.length === 0 ? (
                <div style={{ padding: "28px 22px", fontSize: 13, color: "var(--fg-3)", textAlign: "center" }}>
                  <Icon name="paperclip" size={22} />
                  <div style={{ marginTop: 8 }}>No documents yet. Click Upload to add files.</div>
                </div>
              ) : documents.map((d, i) => (
                <div key={d._id || i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 22px", borderBottom: i < documents.length - 1 ? "1px solid var(--border-subtle)" : 0 }}>
                  <div style={{ width: 32, height: 32, borderRadius: 6, background: "var(--ink-100)", color: "var(--fg-2)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name={docIcon(d.name)} size={16} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.name}</div>
                    <div style={{ fontSize: 11.5, color: "var(--fg-3)" }}>
                      {fmtSize(d.size)}{d.uploadedBy ? " · " + d.uploadedBy : ""}{d.uploadedAt ? " · " + fmtWhen(d.uploadedAt) : ""}
                    </div>
                  </div>
                  <a href={d.url} target="_blank" rel="noreferrer" className="icon-btn" title="Download"><Icon name="download" size={16} /></a>
                  <button className="icon-btn" title="Remove" onClick={() => deleteDoc(d._id)} style={{ color: "var(--fg-3)" }}><Icon name="trash-2" size={15} /></button>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Side panel */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>

          {/* Customer */}
          {(() => {
            const c    = rawEng && rawEng.customer ? rawEng.customer : null;
            const isOrg = c ? c.type === "organisation" : false;
            const name  = c ? (isOrg ? c.companyName : [c.firstName, c.lastName].filter(Boolean).join(" ")) : e.customer;
            const since = c && c.since ? new Date(c.since).toLocaleDateString("en-AE", { month: "short", year: "numeric" }) : null;
            return (
              <div className="card card-pad">
                <div className="eyebrow" style={{ marginBottom: 8 }}>Customer</div>
                <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 10 }}>
                  <Avatar name={name} />
                  <div>
                    <div style={{ fontWeight: 600 }}>{name || "—"}</div>
                    <div style={{ fontSize: 12, color: "var(--fg-3)" }}>
                      {isOrg ? "Organisation" : "Individual"}{since ? " · Smash since " + since : ""}
                    </div>
                  </div>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "6px 12px", fontSize: 12.5 }}>
                  {c && c.phone && <><span style={{ color: "var(--fg-3)" }}>Mobile</span><span className="cell-mono">{c.phone}</span></>}
                  {c && c.email && <><span style={{ color: "var(--fg-3)" }}>Email</span><span style={{ wordBreak: "break-all" }}>{c.email}</span></>}
                  {!isOrg && c && c.emiratesId && <><span style={{ color: "var(--fg-3)" }}>EID</span><span className="cell-mono">{c.emiratesId}</span></>}
                  {!isOrg && c && c.nationality && <><span style={{ color: "var(--fg-3)" }}>Nationality</span><span>{c.nationality}</span></>}
                  {isOrg && c && c.tradeLicenseNo && <><span style={{ color: "var(--fg-3)" }}>Trade Lic.</span><span className="cell-mono">{c.tradeLicenseNo}</span></>}
                  {isOrg && c && c.contactPerson && <><span style={{ color: "var(--fg-3)" }}>Contact</span><span>{c.contactPerson}</span></>}
                  {isOrg && c && c.country && <><span style={{ color: "var(--fg-3)" }}>Country</span><span>{c.country}</span></>}
                </div>
              </div>
            );
          })()}

          {/* Quotation & payment */}
          {(() => {
            const curr        = (rawEng && rawEng.currency) || "AED";
            const quotedAmt   = rawEng ? (rawEng.quoted || 0) : 0;
            const paidAmt     = rawEng ? (rawEng.paid   || 0) : 0;
            const outstanding = quotedAmt - paidAmt;
            const fmt = n => curr + " " + Number(n).toLocaleString("en-AE");
            return (
              <div className="card card-pad">
                <div className="eyebrow" style={{ marginBottom: 8 }}>Quotation &amp; payment</div>
                <div style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", fontSize: 13.5 }}>
                  <span style={{ color: "var(--fg-3)" }}>Quoted</span>
                  <b className="cell-mono">{rawEng ? fmt(quotedAmt) : e.quoted}</b>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", fontSize: 13.5 }}>
                  <span style={{ color: "var(--fg-3)" }}>Paid</span>
                  <b className="cell-mono" style={{ color: "var(--success-700)" }}>{rawEng ? fmt(paidAmt) : e.paid}</b>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", padding: "6px 0 12px", fontSize: 13.5, borderBottom: "1px dashed var(--border-subtle)" }}>
                  <span style={{ color: "var(--fg-3)" }}>Outstanding</span>
                  <b className="cell-mono" style={{ color: outstanding > 0 ? "var(--warning-700)" : "var(--success-700)" }}>
                    {rawEng ? fmt(outstanding) : "—"}
                  </b>
                </div>
                <Button size="sm" variant="secondary" icon="send" style={{ marginTop: 12 }}>Send payment link</Button>
              </div>
            );
          })()}

          {/* Team */}
          {(() => {
            const team = rawEng && rawEng.assignedTo && rawEng.assignedTo.length > 0
              ? rawEng.assignedTo
              : null;
            return (
              <div className="card card-pad">
                <div className="eyebrow" style={{ marginBottom: 8 }}>Team</div>
                {team ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                    {team.map((m, i) => (
                      <div key={m._id || i} style={{ display: "flex", gap: 10, alignItems: "center" }}>
                        <Avatar name={m.name} />
                        <div>
                          <div style={{ fontSize: 13, fontWeight: 500 }}>{m.name}</div>
                          {m.initials && <div style={{ fontSize: 11, color: "var(--fg-3)" }}>{m.initials}</div>}
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div style={{ fontSize: 13, color: "var(--fg-3)" }}>No team members assigned.</div>
                )}
              </div>
            );
          })()}

          <div className="card card-pad">
            <div className="eyebrow" style={{ marginBottom: 10 }}>Renewal &amp; reminders</div>

            {/* Due date + ref number */}
            {!editingRenewal ? (
              <div style={{ marginBottom: 12 }}>
                <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "6px 12px", fontSize: 12.5, marginBottom: 10 }}>
                  <span style={{ color: "var(--fg-3)" }}>Due date</span>
                  <span className="cell-mono">
                    {rawEng && rawEng.dueDate
                      ? new Date(rawEng.dueDate).toLocaleDateString("en-AE", { day: "2-digit", month: "short", year: "numeric" })
                      : "—"}
                  </span>
                  <span style={{ color: "var(--fg-3)" }}>Ref no.</span>
                  <span className="cell-mono">{rawEng && rawEng.refNumber ? rawEng.refNumber : "—"}</span>
                </div>
                <button className="btn btn-ghost btn-sm" onClick={() => setEditingRenewal(true)}>
                  <Icon name="pencil" size={13} />Edit
                </button>
              </div>
            ) : (
              <div style={{ marginBottom: 12, display: "flex", flexDirection: "column", gap: 10 }}>
                <div className="field" style={{ margin: 0 }}>
                  <label>Due / expiry date</label>
                  <input type="date" value={renewalForm.dueDate}
                    onChange={ev => setRenewalForm(f => ({ ...f, dueDate: ev.target.value }))} />
                </div>
                <div className="field" style={{ margin: 0 }}>
                  <label>Document ref no.</label>
                  <input placeholder="e.g. DED-0934412"
                    value={renewalForm.refNumber}
                    onChange={ev => setRenewalForm(f => ({ ...f, refNumber: ev.target.value }))} />
                </div>
                <div style={{ display: "flex", gap: 6 }}>
                  <Button size="sm" onClick={saveRenewal} disabled={savingRenewal}>
                    {savingRenewal ? "Saving…" : "Save"}
                  </Button>
                  <Button size="sm" variant="secondary" onClick={() => setEditingRenewal(false)}>Cancel</Button>
                </div>
              </div>
            )}

            {/* Reminder channels */}
            <div style={{ borderTop: "1px solid var(--border-subtle)", paddingTop: 10 }}>
              <div style={{ fontSize: 12, color: "var(--fg-3)", marginBottom: 8, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.07em" }}>
                Reminder channels
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                {[
                  { id: "mail",      icon: "mail",           label: "Email",    activeBg: "var(--plum-50)",    activeFg: "var(--brand-burgundy)", activeBorder: "var(--brand-burgundy)" },
                  { id: "whatsapp",  icon: "message-circle", label: "WhatsApp", activeBg: "var(--success-50)", activeFg: "var(--success-700)",    activeBorder: "var(--success-500)"    },
                ].map(ch => {
                  const active = channels.includes(ch.id);
                  return (
                    <button key={ch.id}
                      onClick={() => !savingChannels && toggleChannel(ch.id)}
                      disabled={savingChannels}
                      style={{
                        display: "flex", alignItems: "center", gap: 6,
                        padding: "6px 12px", borderRadius: 6, border: "1px solid",
                        background:   active ? ch.activeBg     : "var(--ink-50)",
                        color:        active ? ch.activeFg     : "var(--fg-3)",
                        borderColor:  active ? ch.activeBorder : "var(--border-subtle)",
                        cursor: savingChannels ? "default" : "pointer",
                        fontSize: 12.5, fontFamily: "inherit", fontWeight: 500,
                        opacity: savingChannels ? 0.6 : 1,
                      }}>
                      <Icon name={ch.icon} size={13} />
                      {ch.label}
                    </button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EngagementPage });