siftlode/frontend/src/components/Header.tsx

import { useTranslation } from "react-i18next";
import { Library, Search, User, Youtube } from "lucide-react";
import type { FeedFilters, Me } from "../lib/api";
import type { Page } from "../lib/urlState";
import SyncStatus from "./SyncStatus";

// Contextual top bar. Primary navigation + account now live in the left NavSidebar; the
// header carries the global sync status, the feed's scope toggle + search (or the current
// page title), the language switcher and the notification bell.
export default function Header({
  me,
  filters,
  setFilters,
  page,
  onGoToFullHistory,
  onYtSearch,
}: {
  me: Me;
  filters: FeedFilters;
  setFilters: (f: FeedFilters) => void;
  page: Page;
  onGoToFullHistory: () => void;
  // Trigger a live YouTube search for the current term (hidden for the demo account, which
  // can't spend the shared quota).
  onYtSearch: (q: string) => void;
}) {
  const { t } = useTranslation();
  const canSearchYt = !me.is_demo;
  const trimmedQ = filters.q.trim();

  return (
    <header className="glass h-14 shrink-0 border-b border-border flex items-center gap-3 px-4 z-20">
      <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={onGoToFullHistory} />

      {page === "feed" && (
        <div
          className="flex items-center rounded-full border border-border bg-card p-0.5 text-xs shrink-0"
          role="group"
          aria-label={t("header.scope.label")}
        >
          {(["my", "all"] as const).map((s) => (
            <button
              key={s}
              onClick={() => setFilters({ ...filters, scope: s })}
              title={t("header.scope." + s + "Tip")}
              aria-pressed={filters.scope === s}
              className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full transition ${
                filters.scope === s
                  ? "bg-accent text-accent-fg"
                  : "text-muted hover:text-fg"
              }`}
            >
              {s === "my" ? (
                <User className="w-3.5 h-3.5" />
              ) : (
                <Library className="w-3.5 h-3.5" />
              )}
              <span className="hidden sm:inline">{t("header.scope." + s)}</span>
            </button>
          ))}
        </div>
      )}

      {page === "feed" ? (
        <div className="flex-1 max-w-xl mx-auto flex items-center gap-2">
          <div className="flex-1 relative">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
            <input
              value={filters.q}
              onChange={(e) => {
                const q = e.target.value;
                // When a search first appears, rank the feed by relevance — set atomically with
                // the query (race-free vs. per-keystroke updates). Only overrides the default
                // "newest" sort; a custom sort the user chose is left alone. Cleared in Feed.
                const startSearch = !filters.q.trim() && !!q.trim() && filters.sort === "newest";
                setFilters({ ...filters, q, ...(startSearch ? { sort: "relevance" } : {}) });
              }}
              onKeyDown={(e) => {
                // Enter runs a live YouTube search for the typed term (the box itself filters
                // the local catalog as you type; Enter escalates to the YouTube API).
                if (e.key === "Enter" && trimmedQ && canSearchYt) onYtSearch(trimmedQ);
              }}
              placeholder={t("header.searchPlaceholder")}
              className="w-full bg-card border border-border rounded-full pl-9 pr-4 py-2 text-sm outline-none focus:border-accent"
            />
          </div>
          {trimmedQ && canSearchYt && (
            <button
              onClick={() => onYtSearch(trimmedQ)}
              title={t("header.searchYoutubeTip")}
              className="shrink-0 inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-2 text-xs font-medium text-muted hover:text-accent hover:border-accent transition"
            >
              <Youtube className="w-4 h-4" />
              <span className="hidden md:inline">{t("header.searchYoutube")}</span>
            </button>
          )}
        </div>
      ) : (
        <div className="flex-1 text-center text-sm font-semibold">
          {page === "stats"
            ? t("header.usageStats")
            : page === "playlists"
              ? t("header.account.playlists")
              : page === "settings"
                ? t("settings.title")
                : page === "scheduler"
                  ? t("header.scheduler")
                  : page === "config"
                    ? t("header.configuration")
                    : page === "users"
                      ? t("header.users")
                      : page === "notifications"
                        ? t("inbox.navLabel")
                        : page === "messages"
                          ? t("messages.navLabel")
                          : t("header.channelManager")}
        </div>
      )}
    </header>
  );
}