"use client";

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

import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const segments = [
  { suffix: "", key: "status", label: "subnav.status" },
  { suffix: "/results", key: "results", label: "subnav.results" },
  { suffix: "/finance", key: "finance", label: "subnav.finance" },
  { suffix: "/review", key: "review", label: "subnav.review" },
  { suffix: "/risk/occupancy", key: "riskLockLogs", label: "subnav.riskLockLogs" },
  { suffix: "/risk/hot", key: "riskHot", label: "subnav.riskHot" },
  { suffix: "/risk/sold-out", key: "riskSoldOut", label: "subnav.riskSoldOut" },
  { suffix: "/risk/pools", key: "riskPools", label: "subnav.riskPools" },
] as const;

function isReviewTabActive(pathname: string, base: string): boolean {
  const reviewPrefix = `${base}/review`;
  const publishPrefix = `${base}/publish`;
  return (
    pathname === reviewPrefix ||
    pathname.startsWith(`${reviewPrefix}/`) ||
    pathname.startsWith(`${publishPrefix}/`)
  );
}

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

  return (
    <nav className="mb-6 flex flex-wrap gap-2 border-b border-border pb-3">
      {segments.map(({ suffix, key, label }) => {
        const href = `${base}${suffix}`;
        const active =
          suffix === ""
            ? pathname === base || pathname === `${base}/`
            : suffix === "/review"
              ? isReviewTabActive(pathname, base)
              : pathname === href || pathname.startsWith(`${href}/`);

        return (
          <Link
            key={key}
            href={href}
            className={cn(
              buttonVariants({ variant: active ? "default" : "outline", size: "sm" }),
            )}
          >
            {t(label)}
          </Link>
        );
      })}
    </nav>
  );
}