"use client";

import type { ComponentType, SVGProps } from "react";
import {
  BanknotesIcon,
  DocumentTextIcon,
  InboxIcon,
  PhotoIcon,
  UserGroupIcon,
} from "@heroicons/react/24/outline";
import { CAMPAIGN_DETAIL_TAB_LABELS } from "@/lib/campaign-detail-ui";
import {
  CAMPAIGN_MANAGEMENT_TABS,
  type CampaignManagementTab,
} from "@/lib/campaign-management";

type HeroIcon = ComponentType<SVGProps<SVGSVGElement>>;

const TAB_ICONS: Record<CampaignManagementTab, HeroIcon> = {
  overview: DocumentTextIcon,
  applications: InboxIcon,
  payments: BanknotesIcon,
  deliverables: PhotoIcon,
  participants: UserGroupIcon,
};

export function CampaignDetailTabs({
  activeTab,
  counts,
  onTabChange,
}: {
  activeTab: CampaignManagementTab;
  counts?: Partial<Record<CampaignManagementTab, number>>;
  onTabChange: (tab: CampaignManagementTab) => void;
}) {
  return (
    <nav
      className="flex gap-1 overflow-x-auto pb-0.5"
      aria-label="Campaign sections"
      role="tablist"
    >
      {CAMPAIGN_MANAGEMENT_TABS.map((tab) => {
        const isActive = activeTab === tab;
        const count = counts?.[tab];
        const Icon = TAB_ICONS[tab];
        return (
          <button
            key={tab}
            type="button"
            role="tab"
            aria-selected={isActive}
            id={`campaign-tab-${tab}`}
            className={`inline-flex min-h-10 shrink-0 items-center gap-1.5 rounded-pv px-3 py-2 text-[0.8125rem] font-medium transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
              isActive
                ? "bg-primary text-white"
                : "border border-line bg-surface text-primary hover:border-primary"
            }`}
            onClick={() => onTabChange(tab)}
          >
            <Icon className="size-4 shrink-0" aria-hidden="true" />
            {CAMPAIGN_DETAIL_TAB_LABELS[tab]}
            {typeof count === "number" ? (
              <span className={isActive ? "text-white/80" : "text-ink-40"}>{count}</span>
            ) : null}
          </button>
        );
      })}
    </nav>
  );
}