'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import useTranslation from '@/src/hooks/useTranslation';

interface FacilityTabNavigationProps {
  facilityId: number;
}

interface TabConfig {
  key: string;
  label: string;
  href: string;
}

export default function FacilityTabNavigation({ facilityId }: FacilityTabNavigationProps) {
  const { locale } = useTranslation();
  const pathname = usePathname();

  const basePath = `/${locale}/admin/facilities/${facilityId}`;

  const tabs: TabConfig[] = [
    { key: 'profile', label: 'Profile', href: basePath },
    { key: 'courts', label: 'Courts', href: `${basePath}/courts` },
    { key: 'slot-definitions', label: 'Slot Definitions', href: `${basePath}/slot-definitions` },
    { key: 'slot-instances', label: 'Slot Instances', href: `${basePath}/slot-instances` },
    { key: 'plans', label: 'Plans', href: `${basePath}/plans` },
    { key: 'members', label: 'Members', href: `${basePath}/members` },
    { key: 'competitions', label: 'Competitions', href: `${basePath}/competitions` },
    { key: 'settings', label: 'Settings', href: `${basePath}/settings` },
    { key: 'credits', label: 'Credits', href: `${basePath}/credits` },
    { key: 'transfers', label: 'Transfers', href: `${basePath}/transfers` },
  ];

  function isActive(tab: TabConfig): boolean {
    // For the base facility path (profile), check if we're exactly on it
    if (tab.key === 'profile') {
      // Active if pathname is exactly the basePath (no sub-routes)
      return pathname === basePath;
    }
    // For sub-pages, check if pathname starts with the tab's href
    return pathname.startsWith(tab.href);
  }

  return (
    <div className="border-b-2 border-slate-200 mb-8">
      <div className="overflow-x-auto scrollbar-hide -mb-px">
        <div className="flex min-w-max">
          {tabs.map((tab) => {
            const active = isActive(tab);
            return (
              <Link
                key={tab.key}
                href={tab.href}
                className={`px-4 sm:px-6 py-3 font-semibold transition-colors border-b-2 whitespace-nowrap text-sm sm:text-base ${
                  active
                    ? 'border-slate-900 text-slate-900'
                    : 'border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300'
                }`}
              >
                {tab.label}
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
}