mealprep/frontend/src/lib/planner/RecipePicker.test.ts

import { describe, it, expect, vi } from 'vitest';
import { render, screen, within } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import RecipePicker from './RecipePicker.svelte';

const suggestions = [
	{ recipe: { id: 's1', name: 'Lachsfilet', effort: 'easy', cookTimeMin: 25 }, scoreDelta: 1.5, hasConflict: false },
	{ recipe: { id: 's2', name: 'Hähnchen-Curry', effort: 'easy', cookTimeMin: 35 }, scoreDelta: -1.5, hasConflict: true }
];

const allRecipes = [
	{ id: 'r1', name: 'Beef Bourguignon', effort: 'hard', cookTimeMin: 150 },
	{ id: 'r2', name: 'Spaghetti Carbonara', effort: 'easy', cookTimeMin: 20 },
	{ id: 'r3', name: 'Tomatensuppe', effort: 'easy', cookTimeMin: 30 }
];

const baseProps = {
	planId: 'plan-1',
	date: '2026-04-05',
	dateLabel: 'Samstag, 5. April',
	suggestions,
	allRecipes,
	onpick: vi.fn()
};

describe('RecipePicker', () => {
	it('shows date label in header', () => {
		render(RecipePicker, { props: baseProps });
		expect(screen.getByText('Samstag, 5. April')).toBeTruthy();
	});

	it('shows Empfohlen section', () => {
		render(RecipePicker, { props: baseProps });
		expect(screen.getByText(/Empfohlen/i)).toBeTruthy();
	});

	it('shows only positive-delta suggestions in Empfohlen', () => {
		render(RecipePicker, { props: baseProps });
		// s1 (scoreDelta=1.5) appears in Empfohlen
		expect(screen.getByText('Lachsfilet')).toBeTruthy();
		// s2 (scoreDelta=-1.5) is excluded from Empfohlen; not in allRecipes either → absent
		expect(screen.queryByText('Hähnchen-Curry')).toBeNull();
	});

	it('shows green badge when hasConflict is false', () => {
		render(RecipePicker, { props: baseProps });
		// Lachsfilet: hasConflict = false → green badge
		const badge = screen.getByTestId('badge-s1');
		expect(badge.getAttribute('data-type')).toBe('good');
	});

	it('shows red delta badge in Alle Rezepte when hasConflict is true', () => {
		// r2 is in allRecipes; scoring it negative via suggestions → red badge in Alle Rezepte
		const withR2Scored = [
			...suggestions,
			{ recipe: { id: 'r2', name: 'Spaghetti Carbonara', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: -1.5, hasConflict: true }
		];
		render(RecipePicker, { props: { ...baseProps, suggestions: withR2Scored } });
		const alleRezepte = screen.getByTestId('alle-rezepte-section');
		const badge = within(alleRezepte).getByTestId('badge-r2');
		expect(badge.getAttribute('data-type')).toBe('bad');
		expect(badge.textContent).toContain('-1.5');
	});

	it('shows Alle Rezepte section', () => {
		render(RecipePicker, { props: baseProps });
		expect(screen.getByText(/Alle Rezepte/i)).toBeTruthy();
	});

	it('shows all recipe names in Alle Rezepte', () => {
		render(RecipePicker, { props: baseProps });
		expect(screen.getByText('Beef Bourguignon')).toBeTruthy();
		expect(screen.getByText('Spaghetti Carbonara')).toBeTruthy();
		expect(screen.getByText('Tomatensuppe')).toBeTruthy();
	});

	it('filters recipes by search query', async () => {
		render(RecipePicker, { props: baseProps });
		const input = screen.getByRole('searchbox');
		await userEvent.type(input, 'Spaghetti');
		expect(screen.queryByText('Beef Bourguignon')).toBeNull();
		expect(screen.getByText('Spaghetti Carbonara')).toBeTruthy();
	});

	it('calls onpick with recipeId and name when Wählen clicked for suggestion', async () => {
		const onpick = vi.fn();
		render(RecipePicker, { props: { ...baseProps, onpick } });
		const buttons = screen.getAllByRole('button', { name: /Wählen/i });
		await userEvent.click(buttons[0]);
		expect(onpick).toHaveBeenCalledWith('s1', 'Lachsfilet');
	});

	it('calls onpick when Wählen clicked for all-recipes item', async () => {
		const onpick = vi.fn();
		render(RecipePicker, { props: { ...baseProps, onpick } });
		const buttons = screen.getAllByRole('button', { name: /Wählen/i });
		// First 1 is the positive-delta suggestion (s1), rest are allRecipes
		await userEvent.click(buttons[1]);
		expect(onpick).toHaveBeenCalledWith('r1', 'Beef Bourguignon');
	});

	it('shows empty state when search has no results', async () => {
		render(RecipePicker, { props: baseProps });
		const input = screen.getByRole('searchbox');
		await userEvent.type(input, 'xyznotfound');
		expect(screen.getByText(/Keine Treffer/i)).toBeTruthy();
	});

	it('shows yellow neutral badge in Alle Rezepte when scoreDelta is zero', () => {
		// r1 is in allRecipes; scoring it neutral via suggestions → yellow badge in Alle Rezepte
		const neutralSuggestions = [
			{ recipe: { id: 'r1', name: 'Beef Bourguignon', effort: 'hard' as const, cookTimeMin: 150 }, scoreDelta: 0.0, hasConflict: false }
		];
		render(RecipePicker, { props: { ...baseProps, suggestions: neutralSuggestions } });
		const alleRezepte = screen.getByTestId('alle-rezepte-section');
		const badge = within(alleRezepte).getByTestId('badge-r1');
		expect(badge.getAttribute('data-type')).toBe('neutral');
		expect(badge.textContent).toContain('0.0');
	});

	it('Empfohlen shows only positive-delta suggestions, capped at 5', () => {
		const sixImproving = Array.from({ length: 6 }, (_, i) => ({
			recipe: { id: `imp${i}`, name: `Improving ${i}`, effort: 'easy' as const, cookTimeMin: 20 },
			scoreDelta: 1.0,
			hasConflict: false
		}));
		render(RecipePicker, { props: { ...baseProps, suggestions: sixImproving } });
		const empfohlen = screen.getByTestId('empfohlen-section');
		const buttons = empfohlen.querySelectorAll('button');
		expect(buttons).toHaveLength(5);
	});

	it('Empfohlen excludes neutral and negative suggestions', () => {
		const mixed = [
			{ recipe: { id: 'pos', name: 'Positiv', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: 1.0, hasConflict: false },
			{ recipe: { id: 'neu', name: 'Neutral', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: 0.0, hasConflict: false },
			{ recipe: { id: 'neg', name: 'Negativ', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: -1.0, hasConflict: true }
		];
		render(RecipePicker, { props: { ...baseProps, suggestions: mixed } });
		const empfohlen = screen.getByTestId('empfohlen-section');
		expect(empfohlen.textContent).toContain('Positiv');
		expect(empfohlen.textContent).not.toContain('Neutral');
		expect(empfohlen.textContent).not.toContain('Negativ');
	});

	it('shows score badge inside Alle Rezepte for a recipe that has a matching suggestion', () => {
		// r1 is in allRecipes; scoreDelta=-0.3 → not in Empfohlen (needs >0), but scoreMap provides badge
		const withR1Scored = [
			...suggestions,
			{ recipe: { id: 'r1', name: 'Beef Bourguignon', effort: 'hard' as const, cookTimeMin: 150 }, scoreDelta: -0.3, hasConflict: true }
		];
		render(RecipePicker, { props: { ...baseProps, suggestions: withR1Scored } });
		const alleRezepte = screen.getByTestId('alle-rezepte-section');
		const badge = within(alleRezepte).getByTestId('badge-r1');
		expect(badge.getAttribute('data-type')).toBe('bad');
	});

	it('shows no badge in Alle Rezepte for recipes with no suggestion score', () => {
		// r2 and r3 have no suggestion entry
		render(RecipePicker, { props: baseProps });
		const alleRezepte = screen.getByTestId('alle-rezepte-section');
		expect(within(alleRezepte).queryByTestId('badge-r2')).toBeNull();
		expect(within(alleRezepte).queryByTestId('badge-r3')).toBeNull();
	});

	it('shows loading skeleton instead of Empfohlen section when isLoading is true', () => {
		render(RecipePicker, { props: { ...baseProps, isLoading: true } });
		expect(screen.getByTestId('suggestions-loading')).toBeTruthy();
		expect(screen.queryByText(/Empfohlen/i)).toBeNull();
	});

	it('hides loading skeleton when isLoading is false and suggestions are present', () => {
		render(RecipePicker, { props: { ...baseProps, isLoading: false } });
		expect(screen.queryByTestId('suggestions-loading')).toBeNull();
		expect(screen.getByText(/Empfohlen/i)).toBeTruthy();
	});

	it('shows Wird ersetzt banner when replacingRecipe is provided', () => {
		render(RecipePicker, { props: { ...baseProps, replacingRecipe: { name: 'Pasta', meta: '20 Min · easy' } } });
		expect(screen.getByText(/Wird ersetzt/i)).toBeTruthy();
		expect(screen.getByTestId('replacing-name').textContent).toContain('Pasta');
	});

	it('hides Wird ersetzt banner when replacingRecipe is not provided', () => {
		render(RecipePicker, { props: baseProps });
		expect(screen.queryByText(/Wird ersetzt/i)).toBeNull();
	});

	it('hides Rezept wählen header when replacingRecipe is set', () => {
		render(RecipePicker, { props: { ...baseProps, replacingRecipe: { name: 'Pasta' } } });
		expect(screen.queryByText(/Rezept wählen/i)).toBeNull();
	});

	it('shows Rezept wählen header when replacingRecipe is not set', () => {
		render(RecipePicker, { props: baseProps });
		expect(screen.getByText(/Rezept wählen/i)).toBeTruthy();
	});

	it('excludes recipe from Alle Rezepte when excludeRecipeId is set', () => {
		render(RecipePicker, { props: { ...baseProps, excludeRecipeId: 'r2' } });
		expect(screen.queryByText('Spaghetti Carbonara')).toBeNull();
		expect(screen.getByText('Beef Bourguignon')).toBeTruthy();
		expect(screen.getByText('Tomatensuppe')).toBeTruthy();
	});

	it('excludes recipe from Empfohlen when excludeRecipeId matches a positive-delta suggestion', () => {
		// s1 (Lachsfilet, scoreDelta=1.5) would normally appear in Empfohlen
		render(RecipePicker, { props: { ...baseProps, excludeRecipeId: 's1' } });
		expect(screen.queryByText('Lachsfilet')).toBeNull();
	});

	it('disables Wählen buttons when isDisabled is true', () => {
		render(RecipePicker, { props: { ...baseProps, isDisabled: true } });
		const buttons = screen.getAllByRole('button', { name: /Wählen/i });
		buttons.forEach((btn) => expect((btn as HTMLButtonElement).disabled).toBe(true));
	});

	it('enables Wählen buttons when isDisabled is false', () => {
		render(RecipePicker, { props: { ...baseProps, isDisabled: false } });
		const buttons = screen.getAllByRole('button', { name: /Wählen/i });
		buttons.forEach((btn) => expect((btn as HTMLButtonElement).disabled).toBe(false));
	});
});