import { useTranslation } from 'react-i18next';

export const WORKER_TAB_SLUG = 'worker-status';
export const NODE_TAB_SLUG = 'node-status';

interface Props {
  activeSlug: string;
  onSelect: (slug: string) => void;
  collapsed?: boolean;
  onToggleCollapse?: () => void;
}

/**
 * Fixed two-tab bar for the Side Info Panel: worker status and node (GPU)
 * status. The configurable-widget feature was removed (2026-06), so there is
 * no add/delete/reorder — just a switch between the two live status views.
 */
export function WidgetTabBar({
  activeSlug,
  onSelect,
  collapsed,
  onToggleCollapse,
}: Props) {
  const { t } = useTranslation('dashboard');
  return (
    <div className="flex items-center gap-1 px-1 py-1 border-b border-hairline overflow-x-auto">
      <TabButton
        active={activeSlug === WORKER_TAB_SLUG}
        onClick={() => onSelect(WORKER_TAB_SLUG)}
        label={`👷 ${t('worker.tab')}`}
      />
      <TabButton
        active={activeSlug === NODE_TAB_SLUG}
        onClick={() => onSelect(NODE_TAB_SLUG)}
        label={`🖥️ ${t('nodeStatus.tab')}`}
      />
      <div className="flex-1" />
      {onToggleCollapse && (
        <button
          type="button"
          onClick={onToggleCollapse}
          className="px-2 py-1 text-xs text-slate-500 hover:text-slate-800 hover:bg-surface-2 rounded"
          aria-label={collapsed ? t('tabBar.expand') : t('tabBar.collapse')}
        >
          {collapsed ? '▲' : '▼'}
        </button>
      )}
    </div>
  );
}

function TabButton({
  active, onClick, label,
}: { active: boolean; onClick: () => void; label: string }) {
  return (
    <div className={`relative inline-flex items-center rounded ${
      active ? 'bg-accent text-accent-fg' : 'hover:bg-surface-2'
    }`}>
      <button
        type="button"
        onClick={onClick}
        className={`px-2 py-1 text-xs whitespace-nowrap ${
          active ? 'font-semibold' : 'text-slate-600'
        }`}
      >
        {label}
      </button>
    </div>
  );
}
