/* SER-OS — Persistent Mode Bar
   ──────────────────────────────────────────────────────────────────
   A thin bar that lives just below the top Nav while the FD is
   inside a focus mode (Arrangement / Amendment / Read-only).

   Why it exists:
   - At a glance the FD knows which mode they're in
   - Reinforces save semantics (auto-save vs. unsaved-until-finalise)
   - Right-side status pill confirms whether their last change is safe

   Visual language:
   - White bar, 3px left accent stripe per mode
   - Small mode icon + bold label + soft caption
   - Right-aligned status indicator with a colored dot

   Mode colors (subtle, premium, not loud):
   - arrangement : navy   #1F3A60  (calm primary)
   - amendment   : cinn.  #B45309  (caution — temporary)
   - readonly    : sage   #5B7D4F  (confirmed — official)

   The mode bar is sticky (top: 64px) so it follows scroll without
   blocking the Nav above it.
   ────────────────────────────────────────────────────────────────── */

function ModeBar({ mode, signedAt, versionNo, dirty }) {
  // mode: "arrangement" | "amendment" | "readonly" | null
  if (!mode) return null;

  const CONFIG = {
    arrangement: {
      accent: "#1F3A60",
      bg: "#FFFFFF",
      tint: "#F0F4F8",
      icon: <SerIcons.Edit size={14} color="#1F3A60" />,
      label: "Creating Arrangement",
      caption: "Changes are auto-saved.",
    },
    amendment: {
      accent: "#B45309",
      bg: "#FFFBF4",
      tint: "#FFF2DD",
      icon: <SerIcons.AlertDot size={14} color="#B45309" />,
      label: "Editing Confirmed Arrangement",
      caption: "Changes are NOT saved until finalised.",
    },
    readonly: {
      accent: "#5B7D4F",
      bg: "#F6F9F3",
      tint: "#E8F0E4",
      icon: <SerIcons.Lock size={14} color="#5B7D4F" />,
      label: "Signed Service Summary Form",
      caption: signedAt
        ? `Customer signed on ${signedAt}.`
        : "Confirmed arrangement — locked.",
    },
  };

  const cfg = CONFIG[mode];
  if (!cfg) return null;

  return (
    <div
      role="status"
      aria-live="polite"
      style={{
        position: "sticky", top: 64, zIndex: 50,
        display: "flex", alignItems: "stretch",
        background: cfg.bg,
        borderBottom: "1px solid #E5E7EB",
      }}
    >
      {/* 3px left accent stripe — anchors the mode visually */}
      <div style={{ width: 3, background: cfg.accent, flexShrink: 0 }} />

      <div style={{
        flex: 1, display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 28px", height: 44, gap: 16,
      }}>
        {/* Left: icon + label + caption */}
        <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
          <span style={{
            width: 22, height: 22, borderRadius: 6, flexShrink: 0,
            background: cfg.tint,
            display: "inline-flex", alignItems: "center", justifyContent: "center",
          }}>
            {cfg.icon}
          </span>
          <span style={{
            fontSize: 13, fontWeight: 600, color: cfg.accent,
            letterSpacing: "-0.1px", whiteSpace: "nowrap",
          }}>
            {cfg.label}
          </span>
          <span style={{ width: 1, height: 14, background: "#E5E7EB", flexShrink: 0 }} />
          <span style={{
            fontSize: 13, color: "#6B7A8F", letterSpacing: "-0.1px",
            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
          }}>
            {cfg.caption}
          </span>
        </div>

        {/* Right: status pill */}
        <ModeBarStatus mode={mode} dirty={dirty} versionNo={versionNo} />
      </div>
    </div>
  );
}

function ModeBarStatus({ mode, dirty, versionNo }) {
  if (mode === "arrangement") {
    // No status pill here — the top Nav's "Saved" auto-save indicator
    // already communicates save state for arrangement mode.
    return null;
  }
  if (mode === "amendment") {
    return (
      <span style={{
        display: "inline-flex", alignItems: "center", gap: 6, flexShrink: 0,
        padding: "4px 10px", borderRadius: 14,
        background: "#FFF2DD", border: "1px solid #F4D6A0",
        fontSize: 12, fontWeight: 600, color: "#B45309",
        letterSpacing: "-0.05px", whiteSpace: "nowrap",
      }}>
        <span style={{
          width: 7, height: 7, borderRadius: "50%", background: "#B45309",
        }} />
        {dirty ? "Unsaved changes" : "Awaiting changes"}
      </span>
    );
  }
  if (mode === "readonly") {
    return (
      <span style={{
        display: "inline-flex", alignItems: "center", gap: 8, flexShrink: 0,
        fontSize: 12, color: "#6B7A8F", letterSpacing: "-0.05px",
        whiteSpace: "nowrap",
      }}>
        {versionNo ? (
          <React.Fragment>
            <SerIcons.History size={13} color="#6B7A8F" />
            <span style={{ fontFeatureSettings: "'tnum'" }}>Version {versionNo}</span>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <SerIcons.Check size={13} color="#5B7D4F" />
            Confirmed
          </React.Fragment>
        )}
      </span>
    );
  }
  return null;
}

/* ──────────────────────────────────────────────────────────────────
   Helper: derive the current mode from screen + confirmationStatus.
   Only "focus" screens get a mode bar — the FD's case-list, archive,
   and contacts views are not focus modes.
   ────────────────────────────────────────────────────────────────── */
function deriveFocusMode(screen, confirmationStatus) {
  const FOCUS_SCREENS = new Set([
    "service", "package", "casket", "addons",
    "readonly", "history-view",
  ]);
  if (!FOCUS_SCREENS.has(screen)) return null;
  // Historical version viewer is a frozen snapshot — the ModeBar adds
  // nothing here (no live state to communicate) and just steals space.
  if (screen === "history-view") return null;
  if (screen === "readonly") return "readonly";
  if (confirmationStatus === "amendment_draft") return "amendment";
  if (confirmationStatus === "draft") return "arrangement";
  // awaiting / confirmed / confirmed_updated / amended_awaiting on a
  // consultation screen shouldn't happen in normal flow, but if it does,
  // treat as read-only (safer — no edits).
  return "readonly";
}

Object.assign(window, { ModeBar, ModeBarStatus, deriveFocusMode });