// Top header / navigation.

function AppHeader({ page, onNav, alertsCount, criticalCount }) {
  const items = [
    { id: "dashboard",    label: "Главная" },
    { id: "alerts",       label: "Алерты" },
    { id: "team",         label: "Команда" },
    { id: "rules",        label: "Правила" },
    { id: "instructions", label: "Инструкции" },
    { id: "tasks",        label: "История" },
    { id: "config",       label: "Конфигурация" },
  ];
  const badgeCls =
    criticalCount > 0 ? "alert-badge has-alerts" :
    alertsCount  > 0 ? "alert-badge has-warn" :
    "alert-badge";

  return (
    <header className="app-header">
      <div className="hdr-inner">
        <div className="logo">
          <div className="logo-mark" />
          <div className="logo-name">
            <span style={{ color: "var(--accent)" }}>WorkflowTools</span>
            <span className="dim"> · Watchdog</span>
          </div>
          <span className="ver mono">v0.3.1</span>
        </div>

        <nav className="app-nav">
          {items.map((it) => (
            <a
              key={it.id}
              href={`#${it.id}`}
              className={page === it.id ? "active" : ""}
              onClick={(e) => { e.preventDefault(); onNav(it.id); }}
            >
              {it.label}
              {it.id === "alerts" && alertsCount > 0 && (
                <span style={{
                  marginLeft: 6, fontSize: 10, fontWeight: 600,
                  padding: "1px 6px", borderRadius: 999,
                  background: criticalCount > 0 ? "var(--crit)" : "var(--warn)",
                  color: "white",
                  fontFamily: "var(--font-mono)",
                }}>{alertsCount}</span>
              )}
            </a>
          ))}
        </nav>

        <div className="hdr-right">
          <div style={{ fontSize: 11, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>
            <span className="dot ok" style={{ verticalAlign: "middle", marginRight: 6 }} />
            polling · 30s
          </div>
          <button className={badgeCls} onClick={() => onNav("alerts")} title="Активные алерты">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
              <path d="M10 21a2 2 0 0 0 4 0" />
            </svg>
            <span className="num">{alertsCount}</span>
            <span style={{ opacity: 0.7 }}>активных</span>
          </button>
          <div className="avatar-ring lead" style={{ display: "inline-block" }} title="Максим (LAN)">
            <div style={{
              width: 28, height: 28, borderRadius: "50%",
              background: "var(--bg)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, color: "var(--accent)",
            }}>М</div>
          </div>
        </div>
      </div>
    </header>
  );
}

window.AppHeader = AppHeader;