"use client";

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

import {
  AdminSubnav,
  AdminSubnavBar,
  AdminSubnavLink,
  adminSubnavItemClassName,
} from "@/components/admin/admin-subnav";
import { cn } from "@/lib/utils";

const segments = [
  { suffix: "/occupancy", key: "occupancy", label: "subnavOccupancy" },
  { suffix: "/pools", key: "pools", label: "subnavPools" },
] as const;

function isPoolsTabActive(pathname: string, base: string): boolean {
  const poolsPrefix = `${base}/pools`;
  return (
    pathname === poolsPrefix
    || pathname.startsWith(`${poolsPrefix}/`)
    || pathname === `${base}/hot`
    || pathname === `${base}/sold-out`
  );
}

export function RiskSubnav({ drawId }: { drawId: string }) {
  const { t } = useTranslation("risk");
  const pathname = usePathname();
  const base = `/admin/draws/${drawId}/risk`;

  return (
    <AdminSubnavBar className="mb-6">
      <AdminSubnav aria-label={t("subnavLabel", { defaultValue: "风控导航" })}>
        {segments.map(({ suffix, key, label }) => {
          const href = `${base}${suffix}`;
          const active =
            key === "pools" ? isPoolsTabActive(pathname, base) : pathname === href;

          return (
            <AdminSubnavLink key={key} href={href} active={active}>
              {t(label)}
            </AdminSubnavLink>
          );
        })}
      </AdminSubnav>
      <Link
        href="/admin/draws"
        className={cn(adminSubnavItemClassName(false), "text-muted-foreground")}
      >
        {t("changeDraw")}
      </Link>
    </AdminSubnavBar>
  );
}
