/* SER-OS — Top navigation bar */

function Nav({ active = "cases", onNavigate, workspace = "serenity", onSetWorkspace, onLogout, focusMode = false, onExitCase }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [workspaceExpanded, setWorkspaceExpanded] = React.useState(false);
  const menuRef = React.useRef(null);

  React.useEffect(() => {
    if (!menuOpen) return;
    const onDocClick = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) {
        setMenuOpen(false);
        setWorkspaceExpanded(false);
      }
    };
    const onEsc = (e) => {
      if (e.key === "Escape") {
        setMenuOpen(false);
        setWorkspaceExpanded(false);
      }
    };
    document.addEventListener("mousedown", onDocClick);
    document.addEventListener("keydown", onEsc);
    return () => {
      document.removeEventListener("mousedown", onDocClick);
      document.removeEventListener("keydown", onEsc);
    };
  }, [menuOpen]);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 60,
      height: 84, background: "#FFFFFF",
      borderBottom: "1px solid #E5E7EB",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 32px", flexShrink: 0
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 32 }}>
        <button
          onClick={() => focusMode && onExitCase ? onExitCase() : onNavigate && onNavigate("cases")}
          aria-label="Home"
          style={{
            all: "unset", cursor: "pointer",
            display: "inline-flex", alignItems: "center", gap: 14
          }}>
          
          {workspace === "fountains" ?
          <img
            src="./assets/logo-fountains-navy.png"
            alt=""
            style={{ height: 38, width: "auto" }} /> :


          <img
            src="./assets/butterfly-navy.png"
            alt=""
            style={{ width: "70px", height: "70px" }} />

          }
          {/* Wordmark intentionally omitted from customer-visible nav.
                    The workspace identity stays accessible to the director via the
                    profile menu dropdown. */}
        </button>
        <nav style={{ display: "flex", gap: 40, marginLeft: 18, opacity: focusMode ? 0.4 : 1, transition: "opacity 200ms ease", pointerEvents: focusMode ? "auto" : "auto" }}>
          <NavLink label="My Cases" isActive={active === "cases"} onClick={() => onNavigate && onNavigate("cases")} />
          <NavLink label="My Contacts" isActive={active === "contacts"} onClick={() => onNavigate && onNavigate("contacts")} />
        </nav>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        {focusMode && (
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "5px 13px", borderRadius: 20,
            background: "var(--slate-75, #F3F4F6)", border: "1px solid var(--border-subtle, #E5E7EB)",
            fontSize: 12, fontWeight: 500, color: "var(--fg-secondary, #6B7A8F)",
            letterSpacing: "-0.1px", userSelect: "none",
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: "50%",
              background: "#9CAE82", flexShrink: 0,
              animation: "seros-save-pulse 2.4s ease-in-out infinite",
            }} />
            Editing Case
          </div>
        )}
        <SavedIndicator />
        {focusMode && onExitCase && (
          <ExitCaseButton onClick={onExitCase} />
        )}
        <div ref={menuRef} style={{ position: "relative" }}>
          <button
            onClick={() => {
              setMenuOpen((o) => {
                const next = !o;
                if (!next) setWorkspaceExpanded(false);
                return next;
              });
            }}
            aria-haspopup="menu"
            aria-expanded={menuOpen}
            style={{
              all: "unset",
              display: "flex", alignItems: "center", gap: 12,
              padding: "8px 16px", borderRadius: 8, cursor: "pointer",
              background: menuOpen ? "var(--slate-75)" : "transparent",
              transition: "background 120ms ease"
            }}>
            
            <div style={{
              width: 36, height: 36, borderRadius: "50%",
              background: "rgba(87,79,64,0.10)", color: "var(--slate-600)",
              display: "flex", alignItems: "center", justifyContent: "center"
            }}>
              <SerIcons.User size={20} />
            </div>
            <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
              <span style={{ fontSize: 14, fontWeight: 500, color: "var(--fg-primary)", letterSpacing: "-0.15px" }}>John Lim</span>
              <span style={{ fontSize: 12, fontWeight: 500, color: "var(--fg-secondary)", marginTop: 2 }}>Funeral Director</span>
            </div>
            <SerIcons.ChevronDown size={18} color="var(--fg-secondary)" />
          </button>

          {menuOpen &&
          <div
            role="menu"
            style={{
              position: "absolute",
              top: "calc(100% + 8px)",
              right: 0,
              minWidth: 220,
              background: "var(--surface-card)",
              border: "1px solid var(--border-subtle)",
              borderRadius: "var(--radius-lg)",
              boxShadow: "var(--shadow-overlay)",
              padding: 6,
              display: "flex", flexDirection: "column",
              zIndex: 50
            }}>
            
              {/* Workspace section (discreet) */}
              <ProfileMenuItem
              onClick={() => setWorkspaceExpanded((e) => !e)}
              trailing={
              <SerIcons.ChevronDown
                size={14}
                color="var(--fg-secondary)" />

              }>
              
                Workspace
              </ProfileMenuItem>
              {workspaceExpanded &&
            <div style={{ paddingLeft: 6, display: "flex", flexDirection: "column" }}>
                  <WorkspaceOption
                label="Serenity"
                selected={workspace === "serenity"}
                onClick={() => {
                  onSetWorkspace && onSetWorkspace("serenity");
                  setMenuOpen(false);setWorkspaceExpanded(false);
                }} />
              
                  <WorkspaceOption
                label="Fountains"
                selected={workspace === "fountains"}
                onClick={() => {
                  onSetWorkspace && onSetWorkspace("fountains");
                  setMenuOpen(false);setWorkspaceExpanded(false);
                }} />
              
                </div>
            }

              <div style={{ height: 1, background: "var(--border-subtle)", margin: "6px 4px" }} />

              <ProfileMenuItem danger onClick={() => { setMenuOpen(false); setWorkspaceExpanded(false); onLogout && onLogout(); }}>
                Log Out
              </ProfileMenuItem>
            </div>
          }
        </div>
      </div>
    </header>);

}

/* Subtle workspace wordmark beside the butterfly mark.
   Display serif, all-caps with letter-spacing — matches the brand-display token. */
function BrandWordmark({ workspace }) {
  const label = workspace === "fountains" ? "Fountains" : "Serenity";
  return (
    <span
      style={{
        fontFamily: "var(--font-display)",
        fontWeight: 500,
        fontSize: 22,
        letterSpacing: "0.06em",
        color: "var(--brand-navy)",
        lineHeight: 1,
        userSelect: "none"
      }}>
      
      {label}
    </span>);

}

function ProfileMenuItem({ children, danger, onClick, trailing }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      role="menuitem"
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        all: "unset",
        cursor: "pointer",
        padding: "10px 12px",
        borderRadius: "var(--radius-md)",
        fontSize: 14, fontWeight: 500,
        letterSpacing: "-0.15px",
        color: danger ? "var(--status-danger)" : "var(--fg-primary)",
        background: hover ? "var(--slate-75)" : "transparent",
        transition: "background 100ms ease",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12
      }}>
      
      <span>{children}</span>
      {trailing}
    </button>);

}

function WorkspaceOption({ label, selected, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      role="menuitemradio"
      aria-checked={selected}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        all: "unset",
        cursor: "pointer",
        padding: "8px 12px",
        borderRadius: "var(--radius-md)",
        fontSize: 14, fontWeight: 500,
        letterSpacing: "-0.15px",
        color: "var(--fg-primary)",
        background: hover ? "var(--slate-75)" : "transparent",
        transition: "background 100ms ease",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12
      }}>
      
      <span>{label}</span>
      <span style={{
        width: 16, height: 16, display: "inline-flex",
        alignItems: "center", justifyContent: "center",
        color: selected ? "var(--brand-navy)" : "transparent"
      }}>
        <SerIcons.Check size={16} />
      </span>
    </button>);

}

function NavLink({ label, isActive, onClick }) {
  return (
    <button onClick={onClick} style={{
      background: "transparent", border: "none", padding: 0, cursor: "pointer",
      fontFamily: "inherit", fontSize: 16, fontWeight: 500, lineHeight: "28px",
      letterSpacing: "-0.439px",
      color: isActive ? "#1F3A60" : "#1F3A60",
      position: "relative"
    }}>
      {label}
      {isActive &&
      <span style={{
        position: "absolute", left: 0, right: 0, bottom: -28, height: 2,
        background: "#1F3A60", borderRadius: 2
      }} />
      }
    </button>);

}

function ExitCaseButton({ onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        all: "unset", cursor: "pointer",
        display: "inline-flex", alignItems: "center", gap: 6,
        padding: "7px 14px", borderRadius: 8,
        fontSize: 13, fontWeight: 500,
        letterSpacing: "-0.1px",
        color: hover ? "var(--fg-primary, #1F3A60)" : "var(--fg-secondary, #6B7A8F)",
        border: `1px solid ${hover ? "#C5CDD8" : "var(--border-subtle, #E5E7EB)"}`,
        background: hover ? "var(--slate-75, #F3F4F6)" : "transparent",
        transition: "background 120ms ease, color 120ms ease, border-color 120ms ease",
      }}>
      <SerIcons.ArrowLeft size={14} />
      Exit Case
    </button>
  );
}

Object.assign(window, { Nav });