import { useTranslation } from 'react-i18next';
import type { DashboardWidget } from '../../api';

export const WORKER_TAB_SLUG = 'worker-status';

interface Props {
  widgets: DashboardWidget[];
  activeSlug: string;
  onSelect: (slug: string) => void;
  onAdd: () => void;
  /** Called with the widget slug when the user clicks the × on a tab. */
  onDeleteWidget?: (widget: DashboardWidget) => void;
  collapsed?: boolean;
  onToggleCollapse?: () => void;
}

export function WidgetTabBar({
  widgets,
  activeSlug,
  onSelect,
  onAdd,
  onDeleteWidget,
  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="👷 Worker"
      />
      {widgets.map((w) => (
        <TabButton
          key={w.slug}
          active={activeSlug === w.slug}
          onClick={() => onSelect(w.slug)}
          label={w.kind === 'node-status' ? `🖥️ ${w.title}` : w.title}
          onDelete={onDeleteWidget ? () => onDeleteWidget(w) : undefined}
        />
      ))}
      <button
        type="button"
        onClick={onAdd}
        title={t('tabBar.addWidget')}
        className="px-2 py-1 text-xs text-slate-500 hover:text-slate-800 hover:bg-surface-2 rounded"
        aria-label={t('tabBar.addWidget')}
      >
        +
      </button>
      <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, onDelete,
}: { active: boolean; onClick: () => void; label: string; onDelete?: () => void }) {
  const { t } = useTranslation('dashboard');
  // group/tab を親に付け、× は group-hover で表示。タブ自体の active 状態でも常時表示する
  // ことで、編集中のタブを誤って閉じる怖さは confirm dialog 側で吸収する。
  return (
    <div className={`relative group/tab inline-flex items-center rounded ${
      active ? 'bg-accent text-accent-fg' : 'hover:bg-surface-2'
    }`}>
      <button
        type="button"
        onClick={onClick}
        className={`pl-2 ${onDelete ? 'pr-1' : 'pr-2'} py-1 text-xs whitespace-nowrap ${
          active ? 'font-semibold' : 'text-slate-600'
        }`}
      >
        {label}
      </button>
      {onDelete && (
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onDelete();
          }}
          aria-label={t('tabBar.deleteWidget')}
          title={t('tabBar.delete')}
          className={`mr-1 w-4 h-4 inline-flex items-center justify-center rounded text-[11px] leading-none transition-opacity ${
            active
              ? 'opacity-70 hover:opacity-100 hover:bg-white/20'
              : 'opacity-0 group-hover/tab:opacity-100 hover:bg-slate-300/60'
          }`}
        >
          ×
        </button>
      )}
    </div>
  );
}
