<script lang="ts">
	import { userStore } from '$lib/UserStore.svelte';
	import { get } from '$lib/utils';
	import { onMount } from 'svelte';

	let id: string | undefined | null = $state(undefined);

	onMount(() => {
		const url = new URLSearchParams(window.location.search);

		id = url.get('id');

		loadData();
	});

	type SimpleFlair = {
		name: string;
		description: string;
		color: string;
	};

	type Application = {
		recruiter: string;
		message: string;
		company: string;
		flairs: SimpleFlair[];
	};

	let application: Application | undefined = $state(undefined);

	async function loadData() {
		if (!id) return;
		try {
			application = await get(`application/cv/${id}`);

			if (!application) {
				return;
			}

			application.flairs.sort((a, b) => {
				if (a.description && b.description) {
					return 0;
				}
				if (a.description) {
					return -1;
				}
				if (b.description) {
					return 1;
				}
				return 0;
			});

			loadFlairs();
		} catch (e) {
			console.log('TODO show this to the user', e);
		}
	}

	// Other skills search
	let otherSearch = $state('');
	let flairs: SimpleFlair[] = $state([]);

	async function loadFlairs() {
		try {
			flairs = await get(`flair/simple/${id ?? ''}`);
		} catch (e) {
			console.log('TODO inform the user', e);
		}
	}
</script>

<svelte:head>
	{#if application && userStore.isLoggedIn}
		<title>
			andre-henriques-{application.company.toLowerCase().split(' ')[0]}
		</title>
	{:else}
		<title>CV</title>
	{/if}
</svelte:head>

<div class="flex items-center w-full flex-col">
	<div class="py-10 w-[190mm]">
		<div class="bg-white rounded-lg p-3">
			<div class="w-full flex">
				<h1 class="text-black text-5xl">Andre Henriques</h1>
				<div class="flex-grow"></div>
				<div class="text-right">
					<ul>
						<li class="px-1">
							{#if id}
								<a
									class="underline"
									href="https://www.andr3h3nriqu3s.com/cv?id={id}"
									>andr3h3nriqu3s.com</a
								>
							{:else}
								<a class="underline" href="https://www.andr3h3nriqu3s.com/cv"
									>andr3h3nriqu3s.com</a
								>
							{/if}
						</li>
						<li class="px-1">
							<a class="underline" href="mailto:contact@andr3h3nriqu3s.com"
								>contact@andr3h3nriqu3s.com</a
							>
						</li>
						<li class="px-1">
							<a class="underline" href="tel:+4407823391342">+44 0 782339 1342</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="w-full flex py-9">
				<div>
					I am a dedicated and versatile programmer with four years of professional
					experience. <br />
					During those years mainly worked with Typescript, JavaScript, React, Svelte.
					<br />
					I thrive in high paced new environments, and I am always striving to learn new skills
					and technologies.
					<br />
					I also am knowable in various other technologies and am always learning new ones.
					<br />
				</div>
			</div>
		</div>
	</div>
	{#if application}
		<h2 class="text-white p-3 text-4xl">
			👋 Hello
			{#if application.recruiter}
				<span class="font-bold">{application.recruiter}</span> @
				<span class="font-bold">{application.company}</span>
			{:else if application.company}
				recruiter @ <span class="font-bold">{application.company}</span>
			{/if}
		</h2>

		{#if application.message}
			<div class="p-3 bg-white w-[190mm] rounded-lg">
				<h1>A small message from me</h1>
				<div class="py-2">
					{@html application.message.split('\n').join('<br>')}
				</div>
			</div>
			<div class="p-1"></div>
		{/if}
		{#if application.flairs.length > 0}
			<div class="p-3 bg-white w-[190mm] rounded-lg">
				<h1 class="flex gap-5 items-end">
					Your Ad & My skills {#if flairs.length > 0}<input
							placeholder="Search other skills!"
							class="flex-grow text-blue-500 print:hidden"
							bind:value={otherSearch}
						/>
                        <span class="hidden print:inline text-slate-600 text-sm"><a href="https://www.andr3h3nriqu3s.com/cv?id={id}">Looking for other skills?</a></span>
					{/if}
				</h1>
				<div class="flex flex-wrap gap-2 py-2">
					{#if otherSearch === ''}
						{#each application.flairs as flair}
							<div class="min-w-0 {flair.description ? 'flex-grow w-full' : ''}">
								{#if flair.description}
									<div
										class="p-2 rounded-lg forced-color-adjust-none"
										style="background: {flair.color};"
									>
										<div
											class="rounded-lg print:p-2 print:inline-block"
											style="background: {flair.color}; print-color-adjust: exact !important;"
										>
											{flair.name}
										</div>
										<span class="hidden print:inline">:</span>
										<div class="bg-white my-1 print:inline p-1 rounded-md">
											{flair.description}
										</div>
									</div>
								{:else}
									<div
										class="p-2 rounded-lg forced-color-adjust-none"
										style="background: {flair.color}; print-color-adjust: exact !important;"
									>
										{flair.name}
									</div>
								{/if}
							</div>
						{/each}
					{:else}
						{@const filtered_list = flairs.filter((a) =>
							a.name.match(new RegExp(otherSearch, 'i'))
						)}
						{#if filtered_list.length == 0}
                            <div class="w-full text-center text-blue-500 font-bold text-2xl py-10">
                                Could not find the skill you are looking for.
                            </div>
                        {:else}
							{#each filtered_list as flair}
								<div class="min-w-0 {flair.description ? 'flex-grow w-full' : ''}">
									{#if flair.description}
										<div
											class="p-2 rounded-lg forced-color-adjust-none"
											style="background: {flair.color};"
										>
											<div
												class="rounded-lg print:p-2 print:inline-block"
												style="background: {flair.color}; print-color-adjust: exact !important;"
											>
												{flair.name}
											</div>
											<span class="hidden print:inline">:</span>
											<div class="bg-white my-1 print:inline p-1 rounded-md">
												{flair.description}
											</div>
										</div>
									{:else}
										<div
											class="p-2 rounded-lg forced-color-adjust-none"
											style="background: {flair.color}; print-color-adjust: exact !important;"
										>
											{flair.name}
										</div>
									{/if}
								</div>
							{/each}
						{/if}
					{/if}
				</div>
			</div>
		{/if}
	{/if}
	<div class="p-2"></div>
	<div class="w-[190mm]">
		<h2 class="pb-2 px-2 print:px-5 text-4xl print:text-3xl font-bold text-white">
			Work Expericence
		</h2>
	</div>

	<div class="p-2"></div>

	<div class="w-[100vw] flex items-center flex-col">
		<div class="p-3 bg-white w-[190mm] rounded-lg">
			<h1>Senior Software Developer @ Planum Solucoes</h1>
			<div class="ml-5">
				<h2>4 years - May 2020 - Present</h2>
				<h3>Developed various projects:</h3>
				<ul class="pl-5 list-disc">
					<li>Developing various websites using React and Svelte.</li>
					<li>Interacting with a RESTful API</li>
					<li>Implemented an ORM system using Java Reflection</li>
					<li>Implemented automatic deployment with GitLab CI/CD tools.</li>
					<li>Linux Server Administration</li>
					<li>Technologies used: React, WebRTC, WebSockets, Rest, Google Maps AP</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="p-2"></div>

	<div class="w-[100vw] flex items-center flex-col">
		<div class="text-black w-[190mm] bg-white p-4 rounded-lg">
			<div>
				<div>
					<h1>Associate Devops Engineer @ Sky UK</h1>
					<div class="ml-5">
						<h2>1 year - July 2022 - June 2023</h2>
						<h3>Working with:</h3>
						<ul class="pl-5 list-disc">
							<li>Python</li>
							<li>Jenkins</li>
							<li>GitLab CI</li>
							<li>Ansible</li>
							<li>Docker</li>
						</ul>
						<h3>Associated Software Developer / DevOps Engineer:</h3>
						<ul class="pl-5 list-disc">
							<li>Developed web-based tools for the DevOps team to use</li>
							<li>
								Updated Jenkins pipelines that the team uses to manage one of the
								most important pipelines that the team manages.
							</li>
							<li>
								Created new scripts that were used to clean up multiple terabytes of
								unused data that led to improvements in the performance of the other
								scripts running on the same server as well as the performance of the
								backup system
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="p-5"></div>

	<div class="bg-white p-3 text-black rounded-lg w-[190mm]">
		<h2 class="pb-2 text-3xl">Education</h2>
		<div>
			<div>
				<h1>Bachelors of science in Computer Science @ University of Surrey</h1>
				<div class="ml-5">
					<h2>July 2020 - June 2024</h2>
				</div>
			</div>
		</div>
	</div>

	<!--div class="p-5"></div>
		<div>TODO: Previous projetcs</div -->
	<!-- div class="p-5"></div>
		<div>TODO: Info form</div -->
</div>
