import { useNavigate, useParams } from "react-router";
import { Trans } from "@lingui/react/macro";
import { useAuth } from "../hooks/useAuth.ts";
import { DEFAULT_FEED_TAB, FEED_TABS, type FeedTab } from "../config/feedTabs.ts";
import { useDefaultFeedTab } from "../hooks/useDefaultFeedTab.ts";
import { TabBar } from "./TabBar.tsx";
import { CategorySwitcher } from "./CategorySwitcher.tsx";

/**
 * Feed sort tabs (hot/new/journal/followed). Navigation stays within the
 * current scope: `~` for all categories, or the active category slug — so the
 * tabs link to `/~/new`, `/music/new`, etc.
 */
export function FeedTabBar() {
  const { user } = useAuth();
  const navigate = useNavigate();
  const { categorySlug, feedTab } = useParams();

  const [preferredTab] = useDefaultFeedTab();
  const defaultTab: FeedTab = preferredTab === "followed" && !user
    ? DEFAULT_FEED_TAB
    : preferredTab;
  const active: FeedTab = (FEED_TABS as readonly string[]).includes(feedTab ?? "") &&
      (feedTab !== "followed" || !!user)
    ? (feedTab as FeedTab)
    : defaultTab;

  const scope = categorySlug ?? "~";

  const tabs = [
    { key: "hot" as FeedTab, label: <Trans>Hot</Trans> },
    { key: "new" as FeedTab, label: <Trans>New</Trans> },
    { key: "journal" as FeedTab, label: <Trans>Journal</Trans> },
    ...(user
      ? [{ key: "followed" as FeedTab, label: <Trans>Followed</Trans> }]
      : []),
  ];

  return (
    <TabBar
      tabs={tabs}
      activeTab={active}
      onChange={(t) => navigate(`/${scope}/${t}`)}
      leading={<CategorySwitcher />}
    />
  );
}