// Journey Viewer — horizontal timeline + Decisions log + customer status panel

// Horizontal step rail (the primary visualization, option 1 from the questions)
const TimelineRail = ({ steps, state }) => {
  const todayDay = state.todayDay;
  const maxDay = Math.max(...steps.map((s) => (s.shiftedTo ?? s.day))) + 4;

  return (
    <div style={{ position: "relative", padding: "44px 24px 30px" }}>
      {/* Background rail */}
      <div style={{
        position: "absolute", left: 24, right: 24, top: 76, height: 2,
        background: "repeating-linear-gradient(90deg, var(--mw-border) 0 8px, transparent 8px 14px)",
      }} />
      {/* Progress overlay (solid up to today) */}
      <div style={{
        position: "absolute", left: 24, top: 76, height: 2,
        background: "var(--mw-brand-500)",
        width: `calc(${Math.min(100, (todayDay / maxDay) * 100)}% - 48px * ${Math.min(1, todayDay / maxDay)})`,
      }} />

      {/* Today marker */}
      <div style={{
        position: "absolute", left: `calc(24px + (100% - 48px) * ${todayDay / maxDay})`, top: 30,
        transform: "translateX(-50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
      }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: "var(--mw-brand-500)", background: "#fff", padding: "2px 8px", borderRadius: 9999, border: "1px solid var(--mw-brand-500)" }}>
          Today · Day {todayDay}
        </span>
        <div style={{ width: 2, height: 18, background: "var(--mw-brand-500)" }} />
      </div>

      {/* Steps row */}
      <div style={{ display: "flex", justifyContent: "space-between", position: "relative", paddingTop: 30 }}>
        {steps.map((step) => {
          const positionDay = step.shiftedTo ?? step.day;
          const isShifted = step.status === "shifted";
          return (
            <div key={step.id} style={{
              flex: 1, minWidth: 0, display: "flex", flexDirection: "column", alignItems: "center",
              position: "relative",
            }}>
              {/* Step pill */}
              <div style={{
                position: "relative",
                animation: "mw-step-pop 360ms var(--mw-ease) both",
              }}>
                <StepIcon kind={step.kind} status={step.status} size={36} />
                {step.status === "done" && (
                  <span style={{
                    position: "absolute", right: -2, bottom: -2, width: 14, height: 14, borderRadius: "50%",
                    background: "var(--mw-success)", border: "2px solid #fff", display: "inline-flex",
                    alignItems: "center", justifyContent: "center",
                  }}>
                    <Icon name="check" size={8} color="white" />
                  </span>
                )}
                {step.status === "shifted" && (
                  <span style={{
                    position: "absolute", right: -4, bottom: -4, width: 16, height: 16, borderRadius: "50%",
                    background: "var(--mw-warning)", border: "2px solid #fff", display: "inline-flex",
                    alignItems: "center", justifyContent: "center", color: "#fff",
                  }}>
                    <Icon name="clock" size={9} color="white" />
                  </span>
                )}
              </div>
              <span style={{ fontSize: 11, color: "var(--mw-text-tertiary)", marginTop: 10, fontWeight: 500 }}>
                Day {step.day}{isShifted && step.shiftedTo ? ` → ${step.shiftedTo}` : ""}
              </span>
              <span style={{ fontSize: 13, fontWeight: 500, marginTop: 2, textAlign: "center",
                color: step.status === "skipped" ? "var(--mw-text-tertiary)" : "var(--mw-text-primary)",
                textDecoration: step.status === "skipped" ? "line-through" : "none" }}>
                {step.title}
              </span>
              {step.status === "skipped" && (
                <Chip tone="warning" style={{ marginTop: 6 }}>Skipped</Chip>
              )}
              {step.status === "shifted" && (
                <Chip tone="warning" style={{ marginTop: 6 }}>Delayed +7d</Chip>
              )}
              {step.status === "done" && (
                <Chip tone="success" style={{ marginTop: 6 }} dot>Done</Chip>
              )}
              {step.status === "pending" && (
                <span style={{ fontSize: 11, color: "var(--mw-text-tertiary)", marginTop: 6 }}>Upcoming</span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// Vertical layout (Tweak option 2)
const TimelineVertical = ({ steps, state }) => (
  <div style={{ padding: "12px 24px 24px", position: "relative" }}>
    <div style={{ position: "absolute", left: 47, top: 26, bottom: 18, width: 2, background: "var(--mw-border)" }} />
    <div style={{ position: "absolute", left: 47, top: 26, height: `${(state.todayDay / 95) * 100}%`, width: 2, background: "var(--mw-brand-500)", maxHeight: "calc(100% - 44px)" }} />
    {steps.map((step, i) => (
      <div key={step.id} style={{
        display: "flex", alignItems: "center", gap: 16, padding: "12px 0",
        animation: `mw-row-in 280ms ${i * 40}ms var(--mw-ease) both`,
      }}>
        <span style={{ width: 64, fontSize: 12, color: "var(--mw-text-tertiary)", fontWeight: 500, textAlign: "right" }}>
          Day {step.day}{step.shiftedTo ? ` → ${step.shiftedTo}` : ""}
        </span>
        <div style={{ position: "relative", background: "#fff", zIndex: 1 }}>
          <StepIcon kind={step.kind} status={step.status} size={36} />
        </div>
        <div style={{ flex: 1, padding: "10px 14px", borderRadius: 10, border: "1px solid var(--mw-border)",
          background: step.status === "skipped" ? "var(--mw-bg)" : "#fff",
          opacity: step.status === "skipped" ? 0.7 : 1 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
            <span style={{ fontSize: 14, fontWeight: 500,
              textDecoration: step.status === "skipped" ? "line-through" : "none",
              color: step.status === "skipped" ? "var(--mw-text-tertiary)" : "inherit" }}>
              {step.title}
            </span>
            {step.status === "done" && <Chip tone="success" dot>Done</Chip>}
            {step.status === "skipped" && <Chip tone="warning">Skipped</Chip>}
            {step.status === "shifted" && <Chip tone="warning">Delayed +7d</Chip>}
            {step.status === "pending" && <Chip tone="neutral">Upcoming</Chip>}
          </div>
          <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)", marginTop: 2 }}>{step.detail}</div>
        </div>
      </div>
    ))}
  </div>
);

// Branching layout (Tweak option 3) — shows conditional flow shape
const TimelineBranching = ({ steps, state }) => (
  <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 6 }}>
    {steps.map((step, i) => {
      const next = steps[i + 1];
      const conditionalEdge = step.kind !== "exit" && (next?.status === "skipped" || step.status === "shifted");
      return (
        <div key={step.id} style={{ display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <StepIcon kind={step.kind} status={step.status} size={34} />
            <div style={{
              flex: 1, padding: "10px 14px", borderRadius: 10,
              border: "1px solid var(--mw-border)", background: "#fff",
              display: "flex", justifyContent: "space-between", alignItems: "center",
            }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500,
                  textDecoration: step.status === "skipped" ? "line-through" : "none",
                  color: step.status === "skipped" ? "var(--mw-text-tertiary)" : "inherit" }}>
                  {step.title} <span style={{ color: "var(--mw-text-tertiary)", fontWeight: 400 }}>· Day {step.day}{step.shiftedTo ? ` → ${step.shiftedTo}` : ""}</span>
                </div>
                <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)" }}>{step.detail}</div>
              </div>
              {step.status === "done" && <Chip tone="success" dot>Done</Chip>}
              {step.status === "skipped" && <Chip tone="warning">Skipped</Chip>}
              {step.status === "shifted" && <Chip tone="warning">Delayed</Chip>}
              {step.status === "pending" && <Chip tone="neutral">Upcoming</Chip>}
            </div>
          </div>
          {next && (
            <div style={{ paddingLeft: 17, display: "flex", flexDirection: "column", gap: 2 }}>
              <div style={{
                width: 2, height: 14,
                background: conditionalEdge
                  ? "repeating-linear-gradient(180deg, var(--mw-warning) 0 4px, transparent 4px 8px)"
                  : "var(--mw-border)",
              }} />
              {conditionalEdge && (
                <div style={{ marginLeft: 14, fontSize: 11, color: "var(--mw-warning)", fontWeight: 500,
                  padding: "1px 8px", border: "1px solid var(--mw-warning)", borderRadius: 9999, alignSelf: "flex-start",
                  background: "var(--mw-warning-bg)" }}>
                  Condition: customer replied → branch
                </div>
              )}
              <div style={{
                width: 2, height: conditionalEdge ? 8 : 0,
                background: "var(--mw-border)",
              }} />
            </div>
          )}
        </div>
      );
    })}
  </div>
);

// Calendar layout (Tweak option 4) — day-by-day strip
const TimelineCalendar = ({ steps, state }) => {
  const days = 95;
  const dayWidth = 9;
  const stepsByDay = {};
  steps.forEach((s) => { stepsByDay[s.shiftedTo ?? s.day] = s; });

  return (
    <div style={{ padding: 24 }}>
      <div style={{ overflowX: "auto", borderRadius: 12, border: "1px solid var(--mw-border)", background: "#fff" }}>
        <div style={{ minWidth: days * dayWidth + 60, position: "relative", height: 120 }}>
          {/* Week grid */}
          {Array.from({ length: Math.ceil(days / 7) + 1 }).map((_, w) => (
            <div key={w} style={{
              position: "absolute", left: w * 7 * dayWidth, top: 0, bottom: 0,
              borderLeft: "1px solid var(--mw-border-soft)",
            }}>
              <span style={{ position: "absolute", top: 4, left: 4, fontSize: 10, color: "var(--mw-text-tertiary)" }}>
                W{w + 1}
              </span>
            </div>
          ))}
          {/* Today */}
          <div style={{
            position: "absolute", left: state.todayDay * dayWidth, top: 0, bottom: 0, width: 2,
            background: "var(--mw-brand-500)",
          }}>
            <span style={{ position: "absolute", top: -2, left: 4, fontSize: 11, fontWeight: 600, color: "var(--mw-brand-500)" }}>
              Today
            </span>
          </div>
          {/* Steps */}
          {steps.map((s) => {
            const x = (s.shiftedTo ?? s.day) * dayWidth;
            return (
              <div key={s.id} style={{
                position: "absolute", left: x - 18, top: 36, display: "flex", flexDirection: "column", alignItems: "center", width: 36,
              }}>
                <StepIcon kind={s.kind} status={s.status} size={28} />
                <span style={{ fontSize: 10, color: "var(--mw-text-tertiary)", marginTop: 4, whiteSpace: "nowrap" }}>
                  D{s.shiftedTo ?? s.day}
                </span>
              </div>
            );
          })}
        </div>
      </div>
      <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
        {steps.filter((s) => s.kind !== "trigger" && s.kind !== "exit").map((s) => (
          <div key={s.id} style={{ padding: 10, borderRadius: 10, border: "1px solid var(--mw-border)", background: "#fff", display: "flex", gap: 10, alignItems: "center" }}>
            <StepIcon kind={s.kind} status={s.status} size={28} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{s.title}</div>
              <div style={{ fontSize: 11, color: "var(--mw-text-tertiary)" }}>Day {s.day}{s.shiftedTo ? ` → ${s.shiftedTo}` : ""}</div>
            </div>
            {s.status === "done" && <Chip tone="success">Done</Chip>}
            {s.status === "skipped" && <Chip tone="warning">Skipped</Chip>}
            {s.status === "shifted" && <Chip tone="warning">Shifted</Chip>}
            {s.status === "pending" && <Chip tone="neutral">Upcoming</Chip>}
          </div>
        ))}
      </div>
    </div>
  );
};

// Decisions log — the differentiator panel
const DecisionsLog = ({ decisions }) => {
  const kindMeta = {
    trigger: { icon: "flag",      color: "#1A1B25", chip: "Trigger",  tone: "dark" },
    sent:    { icon: "send",      color: "#534AFF", chip: "Sent",     tone: "info" },
    skipped: { icon: "branch",    color: "#B2791A", chip: "Skipped",  tone: "warning" },
    shifted: { icon: "clock",     color: "#B2791A", chip: "Shifted",  tone: "warning" },
    signal:  { icon: "infoCircle",color: "#534AFF", chip: "Signal",   tone: "info" },
    paused:  { icon: "lock",      color: "#B2791A", chip: "Paused",   tone: "warning" },
    exit:    { icon: "check",     color: "#22863A", chip: "Exit",     tone: "success" },
  };
  return (
    <div className="mw-card" style={{ display: "flex", flexDirection: "column", maxHeight: 540 }}>
      <div style={{ padding: "16px 18px 12px", borderBottom: "1px solid var(--mw-border-soft)", display: "flex", alignItems: "center", gap: 8 }}>
        <AIOrb size={18} />
        <span style={{ fontSize: 14, fontWeight: 600 }}>AI Decisions</span>
        <Chip tone="info" style={{ marginLeft: 4 }}>{decisions.length}</Chip>
        <span style={{ flex: 1 }} />
        <button style={{ background: "transparent", border: 0, cursor: "pointer", color: "var(--mw-text-tertiary)", fontSize: 12, display: "inline-flex", alignItems: "center", gap: 4 }}>
          <Icon name="filter" size={12} opacity={0.6} /> Filter
        </button>
      </div>
      <div style={{ padding: "12px 6px 14px", overflowY: "auto" }}>
        {decisions.slice().reverse().map((d, i) => {
          const m = kindMeta[d.kind] || kindMeta.signal;
          return (
            <div key={i} style={{
              position: "relative", padding: "10px 14px 12px 38px", margin: "0 12px",
              animation: `mw-row-in 320ms ${i * 30}ms var(--mw-ease) both`,
            }}>
              <span style={{
                position: "absolute", left: 8, top: 14, width: 20, height: 20, borderRadius: "50%",
                background: m.tone === "dark" ? "#1A1B25" : "#fff",
                border: m.tone === "dark" ? "0" : `1.5px solid ${m.color}`,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name={m.icon} size={10} style={{ filter: m.tone === "dark" ? "brightness(0) invert(1)" :
                  m.color === "#534AFF" ? "invert(28%) sepia(98%) saturate(3500%) hue-rotate(238deg) brightness(96%) contrast(105%)" :
                  m.color === "#B2791A" ? "invert(46%) sepia(98%) saturate(421%) hue-rotate(11deg) brightness(91%) contrast(91%)" :
                  m.color === "#22863A" ? "invert(36%) sepia(91%) saturate(394%) hue-rotate(86deg) brightness(94%) contrast(89%)" : ""}} />
              </span>
              {i < decisions.length - 1 && (
                <span style={{ position: "absolute", left: 17, top: 38, bottom: -10, width: 2, background: "var(--mw-border-soft)" }} />
              )}
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4, flexWrap: "wrap" }}>
                <Chip tone={m.tone}>{m.chip}</Chip>
                <span style={{ fontSize: 11, color: "var(--mw-text-tertiary)" }}>{d.at}</span>
                <span style={{ fontSize: 11, color: "var(--mw-text-tertiary)" }}>· Day {d.day}</span>
              </div>
              <div style={{ fontSize: 13, fontWeight: 500, color: "var(--mw-text-primary)", marginBottom: 4 }}>
                {d.text}
              </div>
              <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)", lineHeight: 1.45 }}>
                {d.reason}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const JourneyHeader = ({ state, journey, onBack, vizMode, onVizChange }) => (
  <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 18, gap: 16 }}>
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--mw-text-tertiary)", fontSize: 12, marginBottom: 4 }}>
        <span onClick={onBack} style={{ cursor: "pointer" }}>Active Journeys</span>
        <Icon name="chevronRight" size={12} opacity={0.5} />
        <span>Quote Follow-Up · Template</span>
        <Icon name="chevronRight" size={12} opacity={0.5} />
        <span style={{ color: "var(--mw-text-primary)" }}>{state.customer.quote}</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
        <h1 className="mw-h1" style={{ fontSize: 26 }}>{state.customer.name}</h1>
        <Chip tone={journey.status === "Active" ? "success" : journey.status === "Paused" ? "warning" : "neutral"} dot>{journey.status}</Chip>
        <Chip tone="info">{state.label}</Chip>
      </div>
      <div style={{ fontSize: 13, color: "var(--mw-text-tertiary)", marginTop: 6 }}>
        Live instance · Trigger: Quote Sent · Quote <strong style={{ color: "var(--mw-text-primary)" }}>{state.customer.quote}</strong> · Value <strong style={{ color: "var(--mw-text-primary)" }}>{state.customer.value}</strong> · Owner <strong style={{ color: "var(--mw-text-primary)" }}>{state.customer.owner}</strong>
      </div>
    </div>
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <div style={{ display: "flex", background: "#fff", border: "1px solid var(--mw-border-strong)", borderRadius: 9999, padding: 2 }}>
        {["timeline","vertical","branching","calendar"].map((v) => (
          <button key={v} onClick={() => onVizChange(v)} style={{
            height: 26, padding: "0 12px", border: 0, borderRadius: 9999, cursor: "pointer",
            background: v === vizMode ? "var(--mw-brand-500)" : "transparent",
            color: v === vizMode ? "#fff" : "var(--mw-text-secondary)",
            fontSize: 12, fontWeight: 500, textTransform: "capitalize",
          }}>{v}</button>
        ))}
      </div>
      <Button icon="pen">Edit</Button>
      <Button icon="more"></Button>
    </div>
  </div>
);

const JourneyStats = ({ state, steps }) => {
  const counts = {
    done: steps.filter((s) => s.status === "done").length,
    skipped: steps.filter((s) => s.status === "skipped").length,
    shifted: steps.filter((s) => s.status === "shifted").length,
    pending: steps.filter((s) => s.status === "pending").length,
  };
  return (
    <div className="mw-card" style={{ padding: 14, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 12, marginBottom: 16 }}>
      <Stat label="Sent" value={counts.done} icon="check" tone="success" />
      <Stat label="Skipped by AI" value={counts.skipped} icon="branch" tone="warning" />
      <Stat label="Rescheduled" value={counts.shifted} icon="clock" tone="warning" />
      <Stat label="Upcoming" value={counts.pending} icon="reminder" tone="info" />
    </div>
  );
};
const Stat = ({ label, value, icon, tone }) => {
  const toneColor = {
    success: "var(--mw-success)", warning: "var(--mw-warning)",
    info: "var(--mw-brand-500)", neutral: "var(--mw-text-secondary)",
  }[tone];
  const toneBg = {
    success: "var(--mw-success-bg)", warning: "var(--mw-warning-bg)",
    info: "var(--mw-brand-50)", neutral: "var(--mw-bg)",
  }[tone];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <span style={{ width: 32, height: 32, borderRadius: 8, background: toneBg, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name={icon} size={14} style={{ filter: tone === "warning" ? "invert(46%) sepia(98%) saturate(421%) hue-rotate(11deg) brightness(91%) contrast(91%)" :
          tone === "success" ? "invert(36%) sepia(91%) saturate(394%) hue-rotate(86deg) brightness(94%) contrast(89%)" :
          tone === "info" ? "invert(28%) sepia(98%) saturate(3500%) hue-rotate(238deg) brightness(96%) contrast(105%)" : "" }} />
      </span>
      <div>
        <div style={{ fontSize: 22, fontWeight: 600, lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>{value}</div>
        <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)", marginTop: 3 }}>{label}</div>
      </div>
    </div>
  );
};

const JourneyViewerPage = ({ stateKey, vizMode = "timeline", onVizChange, onBack, journey }) => {
  const state = JOURNEY_STATES[stateKey] || JOURNEY_STATES.midflight;
  const steps = STEP_TEMPLATE.map((t) => {
    const ov = state.overrides[t.id] || {};
    const merged = { ...t, status: ov.status || "pending", ...ov };
    if (ov.from && ov.to) { merged.shiftedTo = ov.to; }
    return merged;
  });

  const Viz = { timeline: TimelineRail, vertical: TimelineVertical, branching: TimelineBranching, calendar: TimelineCalendar }[vizMode] || TimelineRail;

  return (
    <div data-screen-label="03 Journey Viewer" style={{ padding: "24px 28px", maxWidth: 1320, margin: "0 auto" }}>
      <JourneyHeader state={state} journey={journey} onBack={onBack} vizMode={vizMode} onVizChange={onVizChange} />
      <JourneyStats state={state} steps={steps} />

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 18 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="mw-card">
            <div style={{ padding: "16px 20px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>Journey Timeline</div>
                <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)", marginTop: 2 }}>
                  5 steps · {steps.filter((s) => s.status === "done").length} completed · Day {state.todayDay} of 90
                </div>
              </div>
              <div style={{ display: "flex", gap: 16, fontSize: 11, color: "var(--mw-text-tertiary)" }}>
                <LegendDot color="var(--mw-brand-500)" label="Done" />
                <LegendDot color="#A3ACBA" label="Skipped" dashed />
                <LegendDot color="var(--mw-warning)" label="Shifted" />
                <LegendDot color="#D5DBE1" label="Upcoming" outline />
              </div>
            </div>
            <Viz steps={steps} state={state} />
          </div>

          {/* Skip rules + Exit rules summary */}
          <div className="mw-card" style={{ padding: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <Icon name="branch" size={14} />
              <span style={{ fontSize: 14, fontWeight: 600 }}>Conditions & Exit Rules</span>
              <span style={{ fontSize: 12, color: "var(--mw-text-tertiary)" }}>· what changes the journey</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              {[
                { tone: "warning", kind: "Skip",  text: "If customer replied in last 14 days, delay next step." },
                { tone: "warning", kind: "Skip",  text: "If sales rep contacted customer, offset next step by 7 days." },
                { tone: "warning", kind: "Skip",  text: "Suppress redundant outreach if active two-way thread exists." },
                { tone: "success", kind: "Exit",  text: "If quote is Accepted or Rejected, end journey immediately." },
              ].map((r, i) => (
                <div key={i} style={{
                  padding: "10px 12px", borderRadius: 10, border: "1px solid var(--mw-border)",
                  background: r.tone === "warning" ? "rgba(255, 249, 224, 0.4)" : "rgba(218, 240, 224, 0.3)",
                  display: "flex", gap: 10, alignItems: "flex-start",
                }}>
                  <Chip tone={r.tone}>{r.kind}</Chip>
                  <span style={{ fontSize: 13, color: "var(--mw-text-primary)", lineHeight: 1.4 }}>{r.text}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <DecisionsLog decisions={state.decisions} />
      </div>
    </div>
  );
};

const LegendDot = ({ color, label, dashed, outline }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
    <span style={{
      width: 9, height: 9, borderRadius: "50%",
      background: outline ? "#fff" : dashed ? "transparent" : color,
      border: dashed ? `1.5px dashed ${color}` : outline ? `1.5px solid ${color}` : 0,
    }} />
    {label}
  </span>
);

Object.assign(window, { JourneyViewerPage });