'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Building2, Clock3 } from 'lucide-react';

import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import { cn } from '@/lib/utils';

const TASK_MANAGEMENT_TABS = [
  {
    label: 'Office',
    href: '/office',
    icon: Building2,
    match: (pathname: string) => pathname === '/office' || pathname.startsWith('/office/'),
  },
  {
    label: 'Scheduled tasks',
    href: '/cron',
    icon: Clock3,
    match: (pathname: string) => pathname === '/cron' || pathname.startsWith('/cron/'),
  },
] as const;

export function TaskManagementTabs() {
  const { locale } = useAppI18n();
  const pathname = usePathname();

  return (
    <div className="rounded-2xl border border-border/70 bg-muted/20 p-1">
      <div className="flex flex-wrap gap-1">
        {TASK_MANAGEMENT_TABS.map((tab) => {
          const isActive = tab.match(pathname);
          const Icon = tab.icon;

          return (
            <Link
              key={tab.href}
              href={tab.href}
              className={cn(
                'inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-colors',
                isActive
                  ? 'bg-background text-foreground shadow-sm'
                  : 'text-muted-foreground hover:bg-background/70 hover:text-foreground'
              )}
            >
              <Icon className="h-4 w-4" />
              {tab.href === '/cron'
                ? pickAppText(locale, '定时任务', 'Scheduled tasks')
                : pickAppText(locale, '办公室', 'Office')}
            </Link>
          );
        })}
      </div>
    </div>
  );
}