import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import ProfilePage from './+page.svelte';

afterEach(cleanup);

const baseUser = {
	firstName: 'Anna',
	lastName: 'Schmidt',
	email: 'anna@example.com',
	contact: ''
};

describe('profile page', () => {
	it('renders the page heading and back link', async () => {
		render(ProfilePage, {
			props: {
				data: {
					user: baseUser,
					notificationPrefs: { notifyOnReply: false, notifyOnMention: false }
				},
				form: null
			}
		});

		await expect.element(page.getByRole('heading', { name: /mein profil/i })).toBeVisible();
		await expect
			.element(page.getByRole('link', { name: /zurück zur übersicht/i }))
			.toHaveAttribute('href', '/');
	});

	it('disables the notification checkboxes when the user has no email', async () => {
		render(ProfilePage, {
			props: {
				data: {
					user: { ...baseUser, email: '' },
					notificationPrefs: { notifyOnReply: false, notifyOnMention: false }
				},
				form: null
			}
		});

		const replyCheckbox = document.querySelector('input[name="notifyOnReply"]') as HTMLInputElement;
		const mentionCheckbox = document.querySelector(
			'input[name="notifyOnMention"]'
		) as HTMLInputElement;
		expect(replyCheckbox.disabled).toBe(true);
		expect(mentionCheckbox.disabled).toBe(true);
	});

	it('enables the notification checkboxes when the user has an email', async () => {
		render(ProfilePage, {
			props: {
				data: {
					user: baseUser,
					notificationPrefs: { notifyOnReply: true, notifyOnMention: false }
				},
				form: null
			}
		});

		const replyCheckbox = document.querySelector('input[name="notifyOnReply"]') as HTMLInputElement;
		expect(replyCheckbox.disabled).toBe(false);
		expect(replyCheckbox.checked).toBe(true);
	});

	it('shows the no-email hint when the user has no email', async () => {
		render(ProfilePage, {
			props: {
				data: {
					user: { ...baseUser, email: '' },
					notificationPrefs: { notifyOnReply: false, notifyOnMention: false }
				},
				form: null
			}
		});

		await expect
			.element(
				page.getByText(
					'Bitte trage zuerst eine E-Mail-Adresse ein, um Benachrichtigungen zu erhalten.'
				)
			)
			.toBeVisible();
	});

	it('shows the prefs success banner when form.prefsSuccess is true', async () => {
		render(ProfilePage, {
			props: {
				data: {
					user: baseUser,
					notificationPrefs: { notifyOnReply: false, notifyOnMention: false }
				},
				form: { prefsSuccess: true }
			}
		});

		const banners = document.querySelectorAll('.bg-green-50');
		expect(banners.length).toBeGreaterThan(0);
	});

	it('shows the prefs error banner with the message when form.prefsError is set', async () => {
		render(ProfilePage, {
			props: {
				data: {
					user: baseUser,
					notificationPrefs: { notifyOnReply: false, notifyOnMention: false }
				},
				form: { prefsError: 'Speichern fehlgeschlagen' }
			}
		});

		await expect.element(page.getByText('Speichern fehlgeschlagen')).toBeVisible();
	});

	it('falls back to false when notificationPrefs are missing', async () => {
		render(ProfilePage, {
			props: { data: { user: baseUser, notificationPrefs: null }, form: null }
		});

		const replyCheckbox = document.querySelector('input[name="notifyOnReply"]') as HTMLInputElement;
		expect(replyCheckbox.checked).toBe(false);
	});
});
