/* أيقونات تبديل السمة (شمس/قمر) */
const BnySunSvg = (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="4" />
    <line x1="12" y1="2" x2="12" y2="5" /><line x1="12" y1="19" x2="12" y2="22" />
    <line x1="2" y1="12" x2="5" y2="12" /><line x1="19" y1="12" x2="22" y2="12" />
    <line x1="4.9" y1="4.9" x2="7" y2="7" /><line x1="17" y1="17" x2="19.1" y2="19.1" />
    <line x1="4.9" y1="19.1" x2="7" y2="17" /><line x1="17" y1="7" x2="19.1" y2="4.9" />
  </svg>
);
const BnyMoonSvg = (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z" />
  </svg>
);

/* Bonyan ERP — top bar with the unified smart search & voice */
function Topbar({ title, query, onQuery, listening, onVoice, showSearch = true, compact = false, user, onLogout, theme = "light", onToggleTheme, onMenu }) {
  const I = window.BnyIcon;
  const D = window.BnyData;
  const { SearchBar } = window.BonyanDesignSystem_ad3ca0;
  const initials = (user ? user.name : "").split(/[\s—-]+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("") || "؟";
  const roleName = (user && (D.roles.find((r) => r.id === user.role) || {}).name) || "";
  const isDark = theme === "dark";
  const themeBtn = (
    <button className="bny-iconbtn" onClick={onToggleTheme} style={{ flex: "none" }}
      aria-label={isDark ? "تفعيل الوضع النهاري" : "تفعيل الوضع الليلي"}
      title={isDark ? "الوضع النهاري" : "الوضع الليلي"}>
      {isDark ? BnySunSvg : BnyMoonSvg}
    </button>
  );

  if (compact) {
    return (
      <div style={{
        height: 56, flex: "none", display: "flex", alignItems: "center", gap: "var(--space-3)",
        padding: "0 var(--space-4)", background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)",
      }}>
        <button className="bny-iconbtn" aria-label="القائمة" title="القائمة" onClick={onMenu} style={{ flex: "none" }}>
          <I.menu size={22} />
        </button>
        <img src="../../assets/logo/bonyan-mark.svg" alt="بُنيان" style={{ width: 26, height: 26, flex: "none" }} />
        {showSearch ? (
          <div style={{ flex: 1, minWidth: 0 }}>
            <SearchBar value={query} onChange={onQuery} listening={listening} onVoice={onVoice} />
          </div>
        ) : (
          <h1 style={{ fontSize: 16, margin: 0, flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{title}</h1>
        )}
        {themeBtn}
        <div className="bny-avatar bny-avatar--sm" style={{ background: "var(--brand-soft)", color: "var(--brand-strong)", flex: "none" }} title={user ? user.name : ""}>{initials}</div>
      </div>
    );
  }

  return (
    <div style={{
      height: "var(--topbar-height)", flex: "none", display: "flex", alignItems: "center",
      gap: "var(--space-7)", padding: "0 var(--space-8)", background: "var(--surface-card)",
      borderBottom: "1px solid var(--border-subtle)",
    }}>
      <h1 style={{ fontSize: 19, margin: 0, whiteSpace: "nowrap" }}>{title}</h1>
      {showSearch ? (
        <div style={{ flex: 1, maxWidth: 620, margin: "0 auto" }}>
          <SearchBar value={query} onChange={onQuery} listening={listening} onVoice={onVoice} />
        </div>
      ) : (
        <div style={{ flex: 1 }} />
      )}
      <div style={{ display: "flex", alignItems: "center", gap: "var(--space-4)" }}>
        {themeBtn}
        <button className="bny-iconbtn" aria-label="التنبيهات" style={{ position: "relative" }}>
          <I.bell size={20} />
          <span style={{ position: "absolute", top: 6, insetInlineEnd: 6, width: 8, height: 8, borderRadius: "50%", background: "var(--danger)", border: "2px solid var(--surface-card)" }} />
        </button>
        <div style={{ width: 1, height: 28, background: "var(--border-subtle)" }} />
        <div className="bny-avatar bny-avatar--sm" style={{ background: "var(--brand-soft)", color: "var(--brand-strong)" }}>{initials}</div>
        <div style={{ lineHeight: 1.2 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: "var(--text-strong)", maxWidth: 150, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{user ? user.name : ""}</div>
          <div style={{ fontSize: 11, color: "var(--text-muted)" }}>{roleName}</div>
        </div>
        <button className="bny-btn bny-btn--secondary bny-btn--sm" onClick={onLogout}>خروج</button>
      </div>
    </div>
  );
}
window.Topbar = Topbar;
