import { render, screen } from '@testing-library/react';
import { vi } from 'vitest';
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 loading state when loading and no data', () => {
    vi.mock('../../../hooks/api', () => ({
      useResourceFlowsByOrganization: () => ({ data: undefined, isLoading: true, error: null }),
    }));

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

    expect(screen.getByText('Resource Flows')).toBeInTheDocument();
    expect(screen.getByText('common.loading') || screen.getByText(/loading/i)).toBeTruthy();
  });

  test('renders input and output flows and counts', () => {
    const mockFlows = [
      { ID: 'r1', Direction: 'input', Type: 'water', Quantity: { amount: 10, unit: 't' } },
      { ID: 'r2', Direction: 'output', Type: 'heat', Quantity: { amount: 5, unit: 'kW' } },
    ];
    vi.mock('../../../hooks/api', () => ({
      useResourceFlowsByOrganization: () => ({ data: mockFlows, isLoading: false, error: null }),
    }));

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

    // Tabs should show counts
    expect(screen.getByText(/Inputs \(1\)/i)).toBeInTheDocument();
    expect(screen.getByText(/Outputs \(1\)/i)).toBeInTheDocument();

    // One card for each flow should be rendered
    expect(screen.getAllByRole('article').length).toBeGreaterThanOrEqual(2);
  });
});