<script lang="ts">
import { enhance } from '$app/forms';
import { m } from '$lib/paraglide/messages.js';

let {
	person,
	canWrite,
	form
}: {
	person: {
		firstName: string;
		lastName: string;
		alias?: string | null;
		birthYear?: number | null;
		deathYear?: number | null;
		notes?: string | null;
	};
	canWrite: boolean;
	form?: { updated?: boolean; updateError?: string } | null;
} = $props();

let editMode = $state(false);

$effect(() => {
	if (form?.updated) editMode = false;
});
</script>

<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
	<div class="h-2 w-full bg-primary"></div>

	<div class="p-8 md:p-10">
		{#if editMode && canWrite}
			<!-- Edit Form -->
			<form method="POST" action="?/update" use:enhance>
				<div class="flex flex-col gap-6">
					<h2 class="border-b border-line-2 pb-3 font-serif text-xl text-ink">
						{m.person_edit_heading()}
					</h2>

					{#if form?.updateError}
						<p class="rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
							{form.updateError}
						</p>
					{/if}

					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
						<div>
							<label
								for="firstName"
								class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
								>{m.form_label_first_name()} *</label
							>
							<input
								id="firstName"
								name="firstName"
								type="text"
								required
								value={person.firstName}
								class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
							/>
						</div>
						<div>
							<label
								for="lastName"
								class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
								>{m.form_label_last_name()} *</label
							>
							<input
								id="lastName"
								name="lastName"
								type="text"
								required
								value={person.lastName}
								class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
							/>
						</div>
						<div class="md:col-span-2">
							<label
								for="alias"
								class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
								>{m.form_label_alias()}</label
							>
							<input
								id="alias"
								name="alias"
								type="text"
								value={person.alias ?? ''}
								class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
							/>
						</div>
						<div>
							<label
								for="birthYear"
								class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
								>{m.person_label_birth_year()}</label
							>
							<input
								id="birthYear"
								name="birthYear"
								type="number"
								min="1"
								max="2100"
								placeholder={m.person_placeholder_year()}
								value={person.birthYear ?? ''}
								class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
							/>
						</div>
						<div>
							<label
								for="deathYear"
								class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
								>{m.person_label_death_year()}</label
							>
							<input
								id="deathYear"
								name="deathYear"
								type="number"
								min="1"
								max="2100"
								placeholder={m.person_placeholder_year()}
								value={person.deathYear ?? ''}
								class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
							/>
						</div>
						<div class="md:col-span-2">
							<label
								for="notes"
								class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
								>{m.person_label_notes()}</label
							>
							<textarea
								id="notes"
								name="notes"
								rows="4"
								placeholder={m.person_placeholder_notes()}
								class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
								>{person.notes ?? ''}</textarea
							>
						</div>
					</div>

					<div class="flex gap-3">
						<button
							type="submit"
							class="rounded bg-primary px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
						>
							{m.btn_save()}
						</button>
						<button
							type="button"
							onclick={() => (editMode = false)}
							class="rounded border border-line px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
						>
							{m.btn_cancel()}
						</button>
					</div>
				</div>
			</form>
		{:else}
			<!-- View Mode -->
			<div class="flex flex-col items-start gap-8 md:flex-row">
				<div class="flex-shrink-0">
					<div
						class="flex h-24 w-24 items-center justify-center rounded-full border border-line bg-muted text-ink"
					>
						<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
					</div>
				</div>

				<div class="w-full flex-1">
					<div class="mb-8 flex items-start justify-between border-b border-line-2 pb-4">
						<h1 class="font-serif text-4xl text-ink">
							{person.firstName}
							{person.lastName}
						</h1>
						<div class="ml-4 flex flex-shrink-0 items-center gap-2">
							{#if canWrite}
								<button
									onclick={() => (editMode = true)}
									class="inline-flex items-center gap-1.5 rounded border border-line px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
								>
									<img
										src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
										alt=""
										aria-hidden="true"
										class="h-3.5 w-3.5"
									/>
									{m.btn_edit()}
								</button>
							{/if}
						</div>
					</div>

					<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
						<div>
							<span
								class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
								>{m.person_label_full_name()}</span
							>
							<span class="block font-serif text-lg text-ink"
								>{person.firstName} {person.lastName}</span
							>
						</div>

						{#if person.alias}
							<div>
								<span
									class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
									>{m.form_label_alias()}</span
								>
								<span class="block font-serif text-lg text-ink italic">"{person.alias}"</span>
							</div>
						{/if}

						{#if person.birthYear || person.deathYear}
							<div>
								<span
									class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
								>
									{#if person.birthYear && person.deathYear}{m.person_label_birth_year()} / {m.person_label_death_year()}{:else if person.birthYear}{m.person_label_birth_year()}{:else}{m.person_label_death_year()}{/if}
								</span>
								<span class="block font-serif text-lg text-ink">
									{#if person.birthYear}* {person.birthYear}{/if}{#if person.birthYear && person.deathYear}
										&nbsp;{/if}{#if person.deathYear}† {person.deathYear}{/if}
								</span>
							</div>
						{/if}

						{#if person.notes}
							<div class="md:col-span-2">
								<span
									class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
									>{m.person_label_notes()}</span
								>
								<p class="font-serif text-base whitespace-pre-wrap text-ink">
									{person.notes}
								</p>
							</div>
						{/if}
					</div>
				</div>
			</div>
		{/if}
	</div>
</div>
