/* Top header: branding, global search, theme toggle, history breadcrumb. */
{
  const { useEffect, useMemo, useState, useRef } = React;

  function buildTrail(history) {
    if (!history || history.length === 0) return [];
    const toName = (h) => (typeof h === "string" ? h : h.entity);
    if (history.length <= 5) return history.map((n, i) => ({ name: toName(n), idx: i }));
    return [
      { name: toName(history[0]), idx: 0 },
      { name: "…", idx: -1, ellipsis: true, hiddenCount: history.length - 5 },
      ...history.slice(-4).map((n, i) => ({ name: toName(n), idx: history.length - 4 + i })),
    ];
  }

  function UserPill({ user, onSignIn, onSignOut }) {
    const [open, setOpen] = useState(false);
    const anchorRef = useRef(null);

    useEffect(() => {
      if (!open) return;
      function onDoc(e) {
        if (anchorRef.current && !anchorRef.current.contains(e.target)) setOpen(false);
      }
      document.addEventListener("mousedown", onDoc);
      return () => document.removeEventListener("mousedown", onDoc);
    }, [open]);

    if (!user) {
      return (
        <button className="iconbtn" onClick={onSignIn} title="Sign in with Google to create and edit diagrams" aria-label="Sign in">
          <Icon.googleG />
        </button>
      );
    }

    const initial = (user.displayName || user.email || "?").trim().charAt(0).toUpperCase() || "?";
    return (
      <div className="user-anchor" ref={anchorRef}>
        <button
          className="user-pill compact"
          onClick={() => setOpen(v => !v)}
          title={user.displayName ? `${user.displayName} — ${user.email}` : user.email}
          aria-label={user.displayName || user.email}
        >
          {user.photoURL
            ? <img className="user-avatar" src={user.photoURL} alt="" referrerPolicy="no-referrer" />
            : <span className="user-avatar-fallback">{initial}</span>}
        </button>
        {open && (
          <div className="user-menu">
            <div className="user-menu-row identity">
              <span className="name">{user.displayName || "—"}</span>
              <span className="email">{user.email}</span>
            </div>
            <button className="user-menu-row action" onClick={() => { setOpen(false); onSignOut(); }}>
              <Icon.signOut /> Sign out
            </button>
          </div>
        )}
      </div>
    );
  }

  function SaveIndicator({ state }) {
    if (!state) return null;
    const map = {
      saved:    { cls: "saved", text: "saved", icon: <Icon.check /> },
      saving:   { cls: "saving", text: "saving…", icon: <Icon.spinner /> },
      offline:  { cls: "offline", text: "offline", icon: null },
      error:    { cls: "error", text: "save failed", icon: null },
      readonly: { cls: "readonly", text: "read-only", icon: null },
      local:    { cls: "offline", text: "local only", icon: null },
    };
    const v = map[state] || map.saved;
    return (
      <span className={`save-indicator ${v.cls}`} title={state}>
        {v.icon || <span className="dot"></span>}
        <span>{v.text}</span>
      </span>
    );
  }

  function Header({
    search, onSearch, onPaste,
    theme, onTheme,
    history, canBack, canForward, onBack, onForward, onJump, onClearPath,
    hasModel, diagramName,
    editMode, onToggleEditMode, onExport, onImport,
    user, onSignIn, onSignOut,
    isCloudDiagram, canEdit,
    versionsOpen, onToggleVersions,
    chatOpen, onToggleChat,
    onCheckpoint,
  }) {
    const trail = useMemo(() => buildTrail(history), [history]);

    return (
      <header className="header">
        <div className="header-row">
          <a className="home-link" href="../index.html" title="Back to tools">
            <Icon.arrowLeft />
            <span>Home</span>
          </a>
          <h1 className="diagram-title" title={diagramName || ""}>
            {diagramName || <span className="diagram-title-placeholder">No diagram</span>}
          </h1>
          <div className="search-inline">
            <span className="icon"><Icon.search /></span>
            <input
              placeholder={hasModel ? "Search the model…" : "Load a PUML first"}
              value={search}
              onChange={(e) => onSearch(e.target.value)}
              id="global-search"
              disabled={!hasModel}
            />
            <span className="kbd"><span className="kbd">/</span></span>
          </div>
          <div className="right">
            <button className="btn" onClick={onPaste}>
              <Icon.upload />
              Diagrams
            </button>
            {hasModel && (onToggleEditMode || onCheckpoint || onToggleVersions || onExport || onImport) && (
              <div className="edit-cluster" role="group" aria-label="Diagram actions">
                {onToggleEditMode && canEdit && (
                  <button
                    className={`btn ${editMode ? "primary" : ""}`}
                    onClick={onToggleEditMode}
                    title={editMode ? "Exit edit mode" : "Enable edit mode — add classes, fields, subclasses from the graph"}
                    aria-pressed={editMode}
                  >
                    <Icon.wrench />
                    {editMode ? "Editing" : "Edit"}
                  </button>
                )}
                {isCloudDiagram && canEdit && onCheckpoint && (
                  <button
                    className="btn"
                    onClick={onCheckpoint}
                    title="Save a named checkpoint version (⇧⌘S)"
                  >
                    <Icon.checkpoint />
                    Checkpoint
                  </button>
                )}
                {isCloudDiagram && onToggleVersions && (
                  <button
                    className={`btn ${versionsOpen ? "primary" : ""}`}
                    onClick={onToggleVersions}
                    title={versionsOpen ? "Hide version history" : "Show version history"}
                    aria-pressed={versionsOpen}
                  >
                    <Icon.history />
                    Versions
                  </button>
                )}
                {isCloudDiagram && onToggleChat && (
                  <button
                    className={`btn ${chatOpen ? "primary" : ""}`}
                    onClick={onToggleChat}
                    title={chatOpen ? "Hide AI chat" : "Open AI chat — describe diagram changes in plain English"}
                    aria-pressed={chatOpen}
                  >
                    <Icon.sparkles />
                    AI
                  </button>
                )}
                {onImport && (
                  <button className="btn" onClick={onImport} title="Replace current PUML from a file or pasted text">
                    <Icon.upload />
                    Import
                  </button>
                )}
                {onExport && (
                  <button className="btn" onClick={onExport} title="Download current PUML">
                    <Icon.download />
                    Export
                  </button>
                )}
              </div>
            )}
            <UserPill user={user} onSignIn={onSignIn} onSignOut={onSignOut} />
            <button
              className="iconbtn theme-toggle"
              onClick={() => onTheme(theme === "dark" ? "light" : "dark")}
              title={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
              aria-label="Toggle theme"
            >
              {theme === "dark" ? <Icon.sun /> : <Icon.moon />}
            </button>
          </div>
        </div>
        {hasModel && (
          <div className="breadcrumb">
            <button className="navbtn" onClick={onBack} disabled={!canBack} title="Back — undo last open">←</button>
            <button className="navbtn" onClick={onForward} disabled={!canForward} title="Forward — redo">→</button>
            <span className="bc-prefix">~/datamodel/</span>
            <div className="bc-trail">
              {trail.map((t, i) => (
                <React.Fragment key={i}>
                  {i > 0 && <span className="bc-sep">›</span>}
                  {t.ellipsis ? (
                    <span className="bc-ellipsis" title={`${t.hiddenCount} hidden`}>{t.name}</span>
                  ) : (
                    <button
                      className={`bc-seg ${t.idx === 0 ? "current" : ""}`}
                      onClick={() => onJump(t.idx)}
                      title={t.idx === 0 ? `${t.name} — focal` : `Focus on ${t.name}`}
                    >
                      {t.name}
                    </button>
                  )}
                </React.Fragment>
              ))}
            </div>
            {history.length > 1 && onClearPath && (
              <button
                className="navbtn clear-path"
                onClick={onClearPath}
                title="Clear path (reset to current entity)"
              >✕</button>
            )}
          </div>
        )}
      </header>
    );
  }

  window.Header = Header;
  window.SaveIndicator = SaveIndicator;
}