import { fireEvent, render, screen } from '@testing-library/react';
import MobileConfigList from './MobileConfigList';

const entry = {
  id: '33875',
  label: 'Balkanbäckerei',
  active: false,
  autoDeactivate: true,
  checkProfileId: true,
  onlyNotify: false,
  skipDormantCheck: false,
  lastPickupAt: '2026-08-01T10:00:00.000Z'
};

const props = {
  entries: [entry, { ...entry, id: '69375', label: 'Donat', active: true }],
  regularPickupMap: {},
  weekdays: ['Montag', 'Dienstag'],
  formatRangeLabel: () => 'Kein Zeitraum',
  formatRegularPickup: () => null,
  onToggleActive: jest.fn(),
  onToggleAutoDeactivate: jest.fn(),
  onToggleProfileCheck: jest.fn(),
  onToggleOnlyNotify: jest.fn(),
  onToggleDormantSkip: jest.fn(),
  onWeekdayChange: jest.fn(),
  onRangePickerRequest: jest.fn(),
  onHideEntry: jest.fn(),
  onDeleteEntry: jest.fn(),
  canDelete: true,
  isDirty: true,
  onSaveConfig: jest.fn(),
  onResetConfig: jest.fn()
};

describe('MobileConfigList', () => {
  beforeEach(() => jest.clearAllMocks());

  it('filters entries by search and activity', () => {
    render(<MobileConfigList {...props} />);

    fireEvent.click(screen.getByRole('button', { name: 'Aktiv' }));
    expect(screen.getByText('Donat')).toBeInTheDocument();
    expect(screen.queryByText('Balkanbäckerei')).not.toBeInTheDocument();

    fireEvent.click(screen.getByRole('button', { name: 'Alle' }));
    fireEvent.change(screen.getByPlaceholderText('Betrieb oder ID suchen'), { target: { value: '33875' } });
    expect(screen.getByText('Balkanbäckerei')).toBeInTheDocument();
    expect(screen.queryByText('Donat')).not.toBeInTheDocument();
  });

  it('shows the last pickup directly in the card header', () => {
    render(<MobileConfigList {...props} />);

    expect(screen.getAllByText(/Letzte Abholung:/)[0]).toBeInTheDocument();
  });

  it('shows a visible membership date when no pickup has happened yet', () => {
    render(<MobileConfigList {...props} entries={[{ ...entry, lastPickupAt: null, memberSinceAt: '2026-07-01T00:00:00.000Z' }]} />);

    expect(screen.getByText(/Noch nicht abgeholt/)).toBeInTheDocument();
    expect(screen.getByText('01.07.2026')).toBeInTheDocument();
  });

  it('marks stale pickups in the mobile card', () => {
    render(<MobileConfigList {...props} entries={[{ ...entry, lastPickupAt: '2025-01-01T00:00:00.000Z' }]} />);

    expect(document.querySelector('.mobile-config-card__last-pickup--stale')).toBeInTheDocument();
  });

  it('uses the existing configuration callbacks', () => {
    render(<MobileConfigList {...props} />);

    fireEvent.click(screen.getByLabelText('Balkanbäckerei automatisch buchen'));
    fireEvent.click(screen.getAllByText('Kein Zeitraum')[0]);
    fireEvent.click(screen.getAllByText('Weitere Optionen')[0]);
    fireEvent.click(screen.getAllByLabelText('Profil prüfen')[0]);
    fireEvent.click(screen.getByText('Speichern'));

    expect(props.onToggleActive).toHaveBeenCalledWith('33875');
    expect(props.onRangePickerRequest).toHaveBeenCalledWith('33875');
    expect(props.onToggleProfileCheck).toHaveBeenCalledWith('33875');
    expect(props.onSaveConfig).toHaveBeenCalledTimes(1);
  });
});
