import { render, screen } from '@testing-library/react';
import { vi } from 'vitest';
import { I18nProvider } from '@/hooks/useI18n';
import { QueryProvider } from '@/providers/QueryProvider';
import ResourceFlowList from './ResourceFlowList';

// Mock translation to return readable strings for keys we use
vi.mock('../../../hooks/useI18n', async () => {
  const actual = await vi.importActual('../../../hooks/useI18n');
  return {
    ...actual,
    useTranslation: () => ({
      t: (k: string) => {
        if (k === 'resourceFlows.title') return 'Resource Flows';
        if (k === 'resourceFlows.inputs') return 'Inputs';
        if (k === 'resourceFlows.outputs') return 'Outputs';
        if (k === 'resourceFlows.noInputs') return 'No inputs';
        if (k === 'resourceFlows.noOutputs') return 'No outputs';
        return k;
      },
    }),
  };
});

describe('ResourceFlowList', () => {
  test('shows empty state when no data', () => {
    vi.mock('../../../hooks/api', () => ({
      useResourceFlowsByOrganization: () => ({ data: [], isLoading: false, error: null }),
    }));

    render(
      <QueryProvider>
        <I18nProvider>
          <ResourceFlowList organizationId={'org-1'} />
        </I18nProvider>
      </QueryProvider>
    );

    expect(screen.getByText('Resource Flows')).toBeInTheDocument();
    expect(screen.getByText('No input flows defined')).toBeInTheDocument();
  });

  test('renders tabs correctly', () => {
    vi.mock('../../../hooks/api', () => ({
      useResourceFlowsByOrganization: () => ({ data: [], isLoading: false, error: null }),
    }));

    render(
      <QueryProvider>
        <I18nProvider>
          <ResourceFlowList organizationId={'org-1'} />
        </I18nProvider>
      </QueryProvider>
    );

    // Should render tab buttons
    expect(screen.getByText('Inputs (0)')).toBeInTheDocument();
    expect(screen.getByText('Outputs (0)')).toBeInTheDocument();
  });
});