"use client";

import { usePathname } from "next/navigation";
import { useTranslation } from "react-i18next";

import { AdminSubnav, AdminSubnavLink } from "@/components/admin/admin-subnav";
import { adminHasAnyPermission } from "@/lib/admin-permissions";
import { useAdminProfile } from "@/stores/admin-session";

const RECONCILE_PERMS = [
  "prd.wallet_reconcile.manage",
  "prd.wallet_reconcile.view",
  "prd.wallet_reconcile.view_cs",
] as const;

const tabs: { href: string; label: string; requiredAny: readonly string[] }[] = [
  { href: "/admin/wallet/transactions", label: "subnavTransactions", requiredAny: RECONCILE_PERMS },
  { href: "/admin/wallet/transfer-orders", label: "subnavTransferOrders", requiredAny: RECONCILE_PERMS },
];

export function WalletSubnav(): React.ReactElement {
  const { t } = useTranslation("wallet");
  const pathname = usePathname();
  const profile = useAdminProfile();
  const perms = profile?.permissions;

  return (
    <AdminSubnav aria-label={t("subnavLabel")}>
      {tabs.map((tab) => {
        const allowed = adminHasAnyPermission(perms, [...tab.requiredAny]);
        const active = pathname === tab.href || pathname.startsWith(`${tab.href}/`);

        return (
          <AdminSubnavLink
            key={tab.href}
            href={tab.href}
            active={active}
            disabled={!allowed}
            disabledTitle={t("noPermission")}
          >
            {t(tab.label)}
          </AdminSubnavLink>
        );
      })}
    </AdminSubnav>
  );
}
