<script>
	import InputField from '$lib/components/InputField.svelte';
	import SmallLoader from '$lib/components/SmallLoader.svelte';
	import { createEventDispatcher } from 'svelte';
	import { applyAction, enhance } from '$app/forms';
	import { receive, send } from '$lib/utils/helpers';
	import { t } from 'svelte-i18n';

	/** @type {import('../../routes/auth/about/[id]/$types').ActionData} */
	export let form;

	/** @type {App.Locals['subscriptions']}*/
	export let subscriptions;

	/** @type {App.Locals['user']} */
	const blankUser = {
		id: 0,
		email: '',
		first_name: '',
		last_name: '',
		password: '',
		phone: '',
		address: '',
		zip_code: '',
		city: '',
		company: '',
		dateofbirth: '',
		notes: '',
		profile_picture: '',
		payment_status: 0,
		status: 1,
		role_id: 0,
		membership: {
			id: 0,
			start_date: '',
			end_date: '',
			status: 3,
			parent_member_id: 0,
			subscription_model: {
				id: 0,
				name: '',
				details: '',
				conditions: '',
				monthly_fee: 0,
				hourly_rate: 0,
				included_hours_per_month: 0,
				included_hours_per_year: 0
			}
		},
		licence: {
			id: 0,
			status: 1,
			number: '',
			issued_date: '',
			expiration_date: '',
			country: '',
			categories: []
		},
		bank_account: {
			id: 0,
			mandate_date_signed: '',
			bank: '',
			account_holder_name: '',
			iban: '',
			bic: '',
			mandate_reference: ''
		}
	};

	/** @type {App.Locals['user'] | null} */
	export let user;

	/** @type {App.Locals['user'] } */
	let localUser;

	$: {
		if (user !== undefined && !localUser) {
			localUser =
				user === null
					? { ...blankUser }
					: {
							...user,
							licence: user.licence || blankUser.licence,
							membership: user.membership || blankUser.membership,
							bank_account: user.bank_account || blankUser.bank_account
						};
		}
	}

	// $: isNewUser = user === null;
	$: isLoading = user === undefined;

	/** @type {App.Locals['licence_categories']} */
	export let licence_categories;

	const userStatusOptions = [
		{ value: 1, label: $t('userStatus.1'), color: '#b1b1b1' }, // Grey for "Nicht verifiziert"
		{ value: 2, label: $t('userStatus.2'), color: '#90EE90' }, // Light green for "Verifiziert"
		{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv"
		{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv"
		{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert"
	];

	const userRoleOptions = [
		{ value: 0, label: $t('userRole.0'), color: '#b1b1b1' }, // Grey for "Mitglied"
		{ value: 1, label: $t('userRole.1'), color: '#00bc00' }, // Green for "Betrachter"
		{ value: 4, label: $t('userRole.4'), color: '#FFC0CB' }, // Pink for "Bearbeiter"
		{ value: 8, label: $t('userRole.8'), color: '#FF4646' } // Red for "Admin"
	];
	const membershipStatusOptions = [
		{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv"
		{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv"
		{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert"
	];
	const licenceStatusOptions = [
		{ value: 1, label: $t('userStatus.1'), color: '#b1b1b1' }, // Grey for "Nicht verifiziert"
		{ value: 3, label: $t('userStatus.3'), color: '#00bc00' }, // Green for "Aktiv"
		{ value: 4, label: $t('userStatus.4'), color: '#FFC0CB' }, // Pink for "Passiv"
		{ value: 5, label: $t('userStatus.5'), color: '#FF4646' } // Red for "Deaktiviert"
	];

	const dispatch = createEventDispatcher();
	const TABS = ['profile', 'licence', 'membership', 'bankaccount'];
	let activeTab = TABS[0];

	let isUpdating = false,
		password = '',
		password2 = '';

	/** @type {Object.<string, App.Locals['licence_categories']>} */
	$: groupedCategories = groupCategories(licence_categories);
	$: subscriptionModelOptions = subscriptions.map((sub) => ({
		value: sub?.name ?? '',
		label: sub?.name ?? ''
	}));
	$: selectedSubscriptionModel =
		subscriptions.find((sub) => sub?.name === localUser.membership?.subscription_model.name) ||
		null;

	/**
	 * creates groups of categories depending on the first letter
	 * @param {App.Locals['licence_categories']} categories - the categories to sort and group
	 * @returns {Object.<string, App.Locals['licence_categories']>} Grouped categories
	 */
	function groupCategories(categories) {
		return Object.entries(categories)
			.sort((a, b) => a[1].category.localeCompare(b[1].category))
			.reduce(
				(/** @type {Object.<string, App.Locals['licence_categories']>} */ acc, [, category]) => {
					const firstLetter = category.category[0];
					if (!acc[firstLetter]) {
						acc[firstLetter] = [];
					}
					acc[firstLetter].push(category);
					return acc;
				},
				{}
			);
	}

	/**
	 * Sets the active tab
	 * @param {string} tab - The tab to set as active
	 */
	function setActiveTab(tab) {
		activeTab = tab;
	}

	/** @type {import('../../routes/auth/about/[id]/$types').SubmitFunction} */
	const handleUpdate = async () => {
		isUpdating = true;
		return async ({ result }) => {
			isUpdating = false;
			if (result.type === 'success' || result.type === 'redirect') {
				dispatch('close');
			} else {
				document.querySelector('.modal .container')?.scrollTo({ top: 0, behavior: 'smooth' });
			}
			await applyAction(result);
		};
	};
</script>

{#if isLoading}
	<SmallLoader width={30} message={$t('loading.user_data')} />
{:else if localUser}
	<form class="content" action="?/updateUser" method="POST" use:enhance={handleUpdate}>
		<input name="user[id]" type="hidden" bind:value={localUser.id} />
		<h1 class="step-title" style="text-align: center;">
			{localUser.id ? $t('user.edit') : $t('user.create')}
		</h1>
		{#if form?.success}
			<h4
				class="step-subtitle warning"
				in:receive|global={{ key: Math.floor(Math.random() * 100) }}
				out:send|global={{ key: Math.floor(Math.random() * 100) }}
			>
				Um einen fehlerhaften upload Ihres Bildes zu vermeiden, clicke bitte auf den "Update" Button
				unten.
			</h4>
		{/if}
		{#if form?.errors}
			{#each form?.errors as error (error.id)}
				<h4
					class="step-subtitle warning"
					in:receive|global={{ key: error.id }}
					out:send|global={{ key: error.id }}
				>
					{$t(error.field) + ': ' + $t(error.key)}
				</h4>
			{/each}
		{/if}

		<input
			type="hidden"
			hidden
			name="user[profile_picture]"
			bind:value={localUser.profile_picture}
		/>

		<div class="button-container">
			{#each TABS as tab}
				<button
					type="button"
					class="button-dark"
					class:active={activeTab === tab}
					on:click={() => setActiveTab(tab)}
				>
					{$t(tab)}
				</button>
			{/each}
		</div>
		<div class="tab-content" style="display: {activeTab === 'profile' ? 'block' : 'none'}">
			<InputField
				name="user[status]"
				type="select"
				label={$t('status')}
				bind:value={localUser.status}
				options={userStatusOptions}
			/>
			{#if localUser.role_id === 8}
				<InputField
					name="user[role_id]"
					type="select"
					label={$t('user.role')}
					bind:value={localUser.role_id}
					options={userRoleOptions}
				/>
			{/if}
			<InputField
				name="user[password]"
				type="password"
				label={$t('password')}
				placeholder={$t('placeholder.password')}
				bind:value={password}
				otherPasswordValue={password2}
			/>
			<InputField
				name="password2"
				type="password"
				label={$t('password_repeat')}
				placeholder={$t('placeholder.password')}
				bind:value={password2}
				otherPasswordValue={password}
			/>
			<InputField
				name="user[first_name]"
				label={$t('first_name')}
				bind:value={localUser.first_name}
				placeholder={$t('placeholder.first_name')}
				required={true}
			/>
			<InputField
				name="user[last_name]"
				label={$t('last_name')}
				bind:value={localUser.last_name}
				placeholder={$t('placeholder.last_name')}
				required={true}
			/>
			<InputField
				name="user[company]"
				label={$t('company')}
				bind:value={localUser.company}
				placeholder={$t('placeholder.company')}
			/>
			<InputField
				name="user[email]"
				type="email"
				label={$t('user.email')}
				bind:value={localUser.email}
				placeholder={$t('placeholder.email')}
				required={true}
			/>
			<InputField
				name="user[phone]"
				type="tel"
				label={$t('phone')}
				bind:value={localUser.phone}
				placeholder={$t('placeholder.phone')}
			/>
			<InputField
				name="user[dateofbirth]"
				type="date"
				label={$t('dateofbirth')}
				bind:value={localUser.dateofbirth}
				placeholder={$t('placeholder.dateofbirth')}
			/>
			<InputField
				name="user[address]"
				label={$t('address')}
				bind:value={localUser.address}
				placeholder={$t('placeholder.address')}
			/>
			<InputField
				name="user[zip_code]"
				label={$t('zip_code')}
				bind:value={localUser.zip_code}
				placeholder={$t('placeholder.zip_code')}
			/>
			<InputField
				name="user[city]"
				label={$t('city')}
				bind:value={localUser.city}
				placeholder={$t('placeholder.city')}
			/>
			<InputField
				name="user[notes]"
				type="textarea"
				label={$t('notes')}
				bind:value={localUser.notes}
				placeholder={$t('placeholder.notes', {
					values: { name: localUser.first_name || '' }
				})}
				rows={10}
			/>
		</div>
		<div class="tab-content" style="display: {activeTab === 'licence' ? 'block' : 'none'}">
			<InputField
				name="user[licence][status]"
				type="select"
				label={$t('status')}
				bind:value={localUser.licence.status}
				options={licenceStatusOptions}
			/>
			<InputField
				name="user[licence][number]"
				type="text"
				label={$t('licence_number')}
				bind:value={localUser.licence.number}
				placeholder={$t('placeholder.licence_number')}
				toUpperCase={true}
			/>
			<InputField
				name="user[licence][issued_date]"
				type="date"
				label={$t('issued_date')}
				bind:value={localUser.licence.issued_date}
				placeholder={$t('placeholder.issued_date')}
			/>
			<InputField
				name="user[licence][expiration_date]"
				type="date"
				label={$t('expiration_date')}
				bind:value={localUser.licence.expiration_date}
				placeholder={$t('placeholder.expiration_date')}
			/>
			<InputField
				name="user[licence][country]"
				label={$t('country')}
				bind:value={localUser.licence.country}
				placeholder={$t('placeholder.issuing_country')}
			/>
			<div class="licence-categories">
				<h3>{$t('licence_categories')}</h3>
				<div class="checkbox-grid">
					{#each Object.entries(groupedCategories) as [, categories], groupIndex}
						{#if groupIndex > 0}
							<div class="category-break"></div>
						{/if}
						{#each categories as category}
							<div class="checkbox-item">
								<div class="checkbox-label-container">
									<InputField
										type="checkbox"
										name="user[licence][categories][]"
										value={JSON.stringify(category)}
										label={category.category}
										checked={localUser.licence.categories != null &&
											localUser.licence.categories.some(
												(cat) => cat.category === category.category
											)}
									/>
								</div>
								<span class="checkbox-description">
									{$t(`licenceCategory.${category.category}`)}
								</span>
							</div>
						{/each}
					{/each}
				</div>
			</div>
		</div>
		<div class="tab-content" style="display: {activeTab === 'membership' ? 'block' : 'none'}">
			<InputField
				name="user[membership][status]"
				type="select"
				label={$t('status')}
				bind:value={localUser.membership.status}
				options={membershipStatusOptions}
			/>
			<InputField
				name="user[membership][subscription_model][name]"
				type="select"
				label={$t('subscription.subscription')}
				bind:value={localUser.membership.subscription_model.name}
				options={subscriptionModelOptions}
			/>
			<div class="subscription-info">
				<div class="subscription-column">
					<p>
						<strong>{$t('subscription.monthly_fee')}:</strong>
						{selectedSubscriptionModel?.monthly_fee || '-'} €
					</p>
					<p>
						<strong>{$t('subscription.hourly_rate')}:</strong>
						{selectedSubscriptionModel?.hourly_rate || '-'} €
					</p>
					{#if selectedSubscriptionModel?.included_hours_per_year}
						<p>
							<strong>{$t('subscription.included_hours_per_year')}:</strong>
							{selectedSubscriptionModel?.included_hours_per_year}
						</p>
					{/if}
					{#if selectedSubscriptionModel?.included_hours_per_month}
						<p>
							<strong>{$t('subscription.included_hours_per_month')}:</strong>
							{selectedSubscriptionModel?.included_hours_per_month}
						</p>
					{/if}
				</div>
				<div class="subscription-column">
					<p>
						<strong>{$t('details')}:</strong>
						{selectedSubscriptionModel?.details || '-'}
					</p>
					{#if selectedSubscriptionModel?.conditions}
						<p>
							<strong>{$t('subscription.conditions')}:</strong>
							{selectedSubscriptionModel?.conditions}
						</p>
					{/if}
				</div>
			</div>
			<InputField
				name="user[membership][start_date]"
				type="date"
				label={$t('start')}
				bind:value={localUser.membership.start_date}
				placeholder={$t('placeholder.start_date')}
			/>
			<InputField
				name="user[membership][end_date]"
				type="date"
				label={$t('end')}
				bind:value={localUser.membership.end_date}
				placeholder={$t('placeholder.end_date')}
			/>
			<InputField
				name="user[membership][parent_member_id]"
				type="number"
				label={$t('parent_member_id')}
				bind:value={localUser.membership.parent_member_id}
				placeholder={$t('placeholder.parent_member_id')}
			/>
		</div>
		<div class="tab-content" style="display: {activeTab === 'bankaccount' ? 'block' : 'none'}">
			<InputField
				name="user[bank_account][account_holder_name]"
				label={$t('bank_account_holder')}
				bind:value={localUser.bank_account.account_holder_name}
				placeholder={$t('placeholder.bank_account_holder')}
			/>
			<InputField
				name="user[bank_account][bank_name]"
				label={$t('bank_name')}
				bind:value={localUser.bank_account.bank}
				placeholder={$t('placeholder.bank_name')}
			/>
			<InputField
				name="user[bank_account][iban]"
				label={$t('iban')}
				bind:value={localUser.bank_account.iban}
				placeholder={$t('placeholder.iban')}
				toUpperCase={true}
			/>
			<InputField
				name="user[bank_account][bic]"
				label={$t('bic')}
				bind:value={localUser.bank_account.bic}
				placeholder={$t('placeholder.bic')}
				toUpperCase={true}
			/>
			<InputField
				name="user[bank_account][mandate_reference]"
				label={$t('mandate_reference')}
				bind:value={localUser.bank_account.mandate_reference}
				placeholder={$t('placeholder.mandate_reference')}
			/>
			<InputField
				name="user[bank_account][mandate_date_signed]"
				label={$t('mandate_date_signed')}
				type="date"
				bind:value={localUser.bank_account.mandate_date_signed}
				readonly={true}
			/>
		</div>
		<div class="button-container">
			{#if isUpdating}
				<SmallLoader width={30} message={'Aktualisiere...'} />
			{:else}
				<button type="button" class="button-dark" on:click={() => dispatch('cancel')}>
					{$t('cancel')}</button
				>
				<button type="submit" class="button-dark">{$t('confirm')}</button>
			{/if}
		</div>
	</form>
{/if}

<style>
	.category-break {
		grid-column: 1 / -1;
		height: 1px;
		background-color: var(--overlay0);
		margin-top: 10px;
		margin-left: 20%;
		width: 60%;
		opacity: 0.4;
	}

	.licence-categories {
		margin-bottom: 20px;
	}

	.checkbox-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0px;
	}

	.checkbox-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.checkbox-label-container {
		flex: 0 0 auto;
		width: 4em;
		margin-right: 5px;
	}

	.checkbox-description {
		flex: 1;
		font-size: 15px;
		color: var(--subtext0);
		margin-left: 10px;
	}

	@media (min-width: 768px) {
		.checkbox-grid {
			grid-template-columns: 1fr 1fr;
			gap: 0px;
		}
	}

	@media (max-width: 480px) {
		.checkbox-item {
			flex-direction: column;
			align-items: flex-start;
		}

		.checkbox-description {
			margin-left: 24px;
			margin-top: 5px;
			text-align: left;
		}
	}
	.subscription-info {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		margin-top: 1rem;
		font-size: 0.9rem;
		background-color: var(--surface0);
		padding: 1rem;
		border-radius: 8px;
		border: 1px solid var(--surface1);
	}

	.subscription-column {
		flex: 1;
		min-width: 200px;
		color: var(--text);
	}

	.subscription-column p {
		margin: 0.5rem 0;
	}

	.subscription-column strong {
		display: inline-block;
		min-width: 100px;
		color: var(--lavender);
	}
	.tab-content {
		padding: 1rem;
		border-radius: 0 0 3px 3px;
		background-color: var(--surface0);
		border: 1px solid var(--surface1);
		margin-top: 1rem;
	}
	.button-container {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 1rem;
		width: 100%;
	}

	.button-container button {
		flex: 1 1 0;
		min-width: 120px;
		max-width: calc(50% - 5px);
		background-color: var(--surface1);
		color: var(--text);
		border: 1px solid var(--overlay0);
		transition: all 0.2s ease-in-out;
	}

	.button-container button:hover {
		background-color: var(--surface2);
		border-color: var(--lavender);
	}

	.button-container button.active {
		background-color: var(--mauve);
		border-color: var(--mauve);
		color: var(--base);
	}

	@media (max-width: 480px) {
		.button-container button {
			flex-basis: 100%;
			max-width: none;
		}
	}
</style>
