"use client";

import type { ReactNode } from "react";
import Link from "next/link";
import { Landmark } from "lucide-react";

import { adminPaths } from "@/app/customer/_lib/admin/admin-paths";
import { canViewSection } from "@/app/customer/_lib/admin/admin-section-permissions";
import { cn } from "@/lib/utils";
import type { CustomerPortalCapabilities } from "@/lib/frontend-auth/report-capabilities";

export type BankSetupTab = "link-accounts" | "parent-banks" | "unassigned";

type BankSetupTabsProps = {
  tenant: string;
  active: BankSetupTab;
  capabilities?: CustomerPortalCapabilities | null;
};

const TABS: Array<{
  id: BankSetupTab;
  label: string;
  href: (paths: ReturnType<typeof adminPaths>) => string;
  section: "linkBankAccounts" | "parentBanks" | "unassignedBanks";
}> = [
  {
    id: "link-accounts",
    label: "Link Accounts",
    href: (paths) => paths.linkBankAccounts(),
    section: "linkBankAccounts",
  },
  {
    id: "parent-banks",
    label: "Parent Banks",
    href: (paths) => paths.parentBanks(),
    section: "parentBanks",
  },
  {
    id: "unassigned",
    label: "Unassigned",
    href: (paths) => paths.unassignedBanks(),
    section: "unassignedBanks",
  },
];

/** Underline tab strip; each tab is its own route so deep links and per-section ACL keep working. */
export function BankSetupTabs({ tenant, active, capabilities }: BankSetupTabsProps) {
  const paths = adminPaths(tenant);
  const visibleTabs = TABS.filter((tab) => canViewSection(tab.section, capabilities));

  if (visibleTabs.length <= 1) {
    return null;
  }

  return (
    <nav aria-label="Bank setup" className="-mb-px">
      <ul className="flex list-none flex-row items-stretch gap-6" role="tablist">
        {visibleTabs.map((tab) => {
          const isActive = tab.id === active;
          return (
            <li key={tab.id} role="presentation">
              <Link
                href={tab.href(paths)}
                role="tab"
                aria-selected={isActive}
                aria-current={isActive ? "page" : undefined}
                className={cn(
                  "inline-flex items-center border-b-2 px-0.5 pb-3 text-sm font-medium whitespace-nowrap transition-colors",
                  isActive
                    ? "border-primary text-foreground"
                    : "border-transparent text-muted-foreground hover:border-border hover:text-foreground",
                )}
              >
                {tab.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

type BankSetupHeaderProps = BankSetupTabsProps & {
  /** Primary action for the active tab (e.g. "Create parent bank"). */
  action?: ReactNode;
};

/**
 * One page identity for all bank-setup tabs: constant title, tab strip on a divider,
 * and a slot for the active tab's primary action.
 */
export function BankSetupHeader({ tenant, active, capabilities, action }: BankSetupHeaderProps) {
  return (
    <header className="flex flex-col gap-4 border-b pb-4 has-[nav]:pb-0">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <Landmark className="size-5 text-muted-foreground" />
            <h1 className="text-2xl tracking-tight">Bank Setup</h1>
          </div>
          <p className="mt-1 text-sm text-muted-foreground">
            Link customer bank accounts and maintain the parent bank catalog.
          </p>
        </div>
        {action ? <div className="shrink-0">{action}</div> : null}
      </div>
      <BankSetupTabs tenant={tenant} active={active} capabilities={capabilities} />
    </header>
  );
}