<script lang="ts">
	import {
		ApplicationStatus,
		ApplicationStatusMaping,
		applicationStore,
		type Application
	} from '$lib/ApplicationsStore.svelte';

	import { put, preventDefault, post, get } from '$lib/utils';
	import { onMount } from 'svelte';
	import ExtractTextDialog from './ExtractTextDialog.svelte';
	import Flair from '../flair/Flair.svelte';
	import NewUrlDialog from './NewUrlDialog.svelte';
	import { userStore } from '$lib/UserStore.svelte';
	import LinkApplication from './LinkApplication.svelte';
	import SearchApplication from './SearchApplication.svelte';
	import NewApplication from './NewApplication.svelte';
	import Timeline from './Timeline.svelte';
	import DropingZone from './DropingZone.svelte';
	import CompanyField from './CompanyField.svelte';

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

	let extractTokens: HTMLDialogElement;
	let changeUrl: HTMLDialogElement;
	let linkApplication: HTMLDialogElement;

	let lastExtData: any = $state(undefined);
	let autoExtData = false;

	let showExtraData = $state(false);

	let drag = $state(true);

	async function activate(item?: Application) {
		if (!item) {
			return;
		}
		if (activeItem && activeItem.id !== item.id && activeItem.status === 1) {
			// Deactivate active item
			try {
				await put('application/status', {
					id: activeItem.id,
					status: 0
				});
			} catch (e) {
				// Show User
				console.log('info data', e);
				return;
			}
		}

		if (item.status === 0) {
			openWindow(item.url);
			openCV(item.id);
		}

		try {
			await put('application/status', {
				id: item.id,
				status: ApplicationStatus.WorkingOnIt
			});
			activeItem = await get('application/active');
			if (!activeItem?.unique_url) {
				window.requestAnimationFrame(() => {
					changeUrl.showModal();
				});
			}
		} catch (e) {
			// Show User
			console.log('info data', e);
		}
		applicationStore.loadApplications(true);

		autoExtData = false;
		lastExtData = undefined;
	}

	function openWindow(url: string) {
		if (!url.startsWith('https://')) {
			url = `https://${url}`;
		}

		window.open(
			url,
			'new window',
			`location,height=${window.screen.height},width=${window.screen.width},scrollbars,status,toolbar,menubar,popup`
		);
	}

	function openCV(id?: string) {
		window.open(
			`/cv?id=${id ?? activeItem!.id}`,
			'cv viwer',
			`location,height=${window.screen.height},width=${window.screen.width},scrollbars,status,toolbar,menubar,popup`
		);
	}

	//
	// Make the CV open on a new page
	//
	function docKey(e: KeyboardEvent) {
		if (activeItem && e.ctrlKey && e.code === 'KeyO') {
			openCV(activeItem.id);
			e.stopPropagation();
			e.preventDefault();
			return;
		}
	}
	$effect(() => {
		document.addEventListener('keydown', docKey, false);
		return () => {
			document.removeEventListener('keydown', docKey);
		};
	});
	//
	//
	//

	async function loadActive() {
		try {
			activeItem = await get('application/active');
			if (activeItem?.unique_url === null) {
				changeUrl.showModal();
			}
		} catch (e) {
			// Show User
			console.log('info data', e);
		}
	}

	// Load Ext
	$effect(() => {
		function onMessage(e: MessageEvent) {
			if (e.data.type === 'GOT_INFO_R') {
				lastExtData = e.data;
				if (autoExtData) {
					window.requestAnimationFrame(() => {
						setExtData();
					});
				}
			}
		}

		window.addEventListener('message', onMessage);
		window.postMessage({ type: 'REGISTER_INTEREST' });
		return () => {
			window.removeEventListener('message', onMessage);
		};
	});

	function setExtData() {
		if (!lastExtData || !activeItem) return;
		activeItem.title = lastExtData.jobTitle;
		activeItem.company = lastExtData.company;
		activeItem.payrange = lastExtData.money;
		window.requestAnimationFrame(() => {
			save().then(async () => {
				if (!lastExtData.description) {
					lastExtData = undefined;
					return;
				}
				await post('application/text/flair', {
					id: activeItem?.id ?? '',
					text: lastExtData.description
				});
				loadActive();
				lastExtData = undefined;
			});
		});
	}

	onMount(() => {
		userStore.checkLogin();
		loadActive();
	});

	$effect(() => {
		if (!applicationStore.loadItem) {
			return;
		}
		activeItem = applicationStore.loadItem;
		applicationStore.loadItem = undefined;
	});

	async function save() {
		try {
			await put('application/update', activeItem);
		} catch (e) {
			// Show User
			console.log('info data', e);
		}
	}

	async function resetUrl() {
		try {
			activeItem = await post(`application/reset/url/${activeItem?.id}`, {});
		} catch (e) {
			// Show User
			console.log('info data', e);
		}
	}
</script>

<div class="flex flex-col w-full gap-2 min-w-0 relative" role="none">
	{#if activeItem && (!applicationStore.dragging || applicationStore.dragging?.id === activeItem.id)}
		<div
			draggable={drag}
			ondrag={() => {
				applicationStore.dragStart(activeItem);
			}}
			ondragend={() => {
				window.requestAnimationFrame(() => {
					applicationStore.dragEnd();
				});
			}}
			role="none"
			class="flex flex-col p-2 h-full gap-2 card min-w-0 flex-grow min-h-[50vh]"
		>
			<div class="w-full">
				{#if activeItem.status != 1}
					<div class="bg-danger text-white p-2 rounded-lg text-lg font-bold">
						{(ApplicationStatusMaping[
							activeItem?.status as (typeof ApplicationStatus)[keyof typeof ApplicationStatus]
						] as string) ?? ''}
					</div>
				{/if}
				{#if showExtraData}
					<fieldset class="max-w-full min-w-0 overflow-hidden">
						<div class="flabel">Id</div>
						<div class="finput bg-white w-full break-keep">
							{activeItem.id}
						</div>
					</fieldset>
					<fieldset class="max-w-full min-w-0 overflow-hidden">
						<div class="flabel">Create Time</div>
						<div class="finput bg-white w-full break-keep">
							{activeItem.create_time}
						</div>
					</fieldset>
				{/if}
				<div class="flex gap-2">
					<CompanyField bind:company={activeItem.company} {save} />
					<fieldset class="grow">
						<label class="flabel" for="title">Recruiter</label>
						<input
							class="finput"
							id="title"
							bind:value={activeItem.recruiter}
							onchange={save}
						/>
					</fieldset>
					<fieldset>
						<label class="flabel" for="title">Agency</label>
						<input
							class="finput"
							id="title"
							type="checkbox"
							bind:checked={activeItem.agency}
							onchange={save}
						/>
					</fieldset>
				</div>
				<fieldset>
					<label class="flabel" for="title">Title</label>
					<input
						class="finput"
						id="title"
						bind:value={activeItem.title}
						onchange={save}
					/>
				</fieldset>
				<fieldset>
					<label class="flabel" for="payrange">Pay Range</label>
					<input
						class="finput"
						id="payrange"
						bind:value={activeItem.payrange}
						onchange={save}
					/>
				</fieldset>
				{#if !activeItem.unique_url || showExtraData}
					<fieldset class="max-w-full min-w-0 overflow-hidden">
						<div class="flabel">Url</div>
						<div class="finput bg-white w-full break-keep">
							{activeItem.url}
						</div>
					</fieldset>
				{/if}
				{#if activeItem.unique_url}
					<fieldset>
						<div class="flabel">Unique Url</div>
						<div class="finput bg-white">
							{activeItem.unique_url}
						</div>
					</fieldset>
				{/if}
				{#if activeItem.linked_application}
					<fieldset>
						<div class="flabel">Linked Application</div>
						<div class="finput bg-white">
							{activeItem.linked_application}
						</div>
					</fieldset>
				{/if}
				{#if activeItem.application_time}
					<fieldset>
						<div class="flabel">Application Time</div>
						<div class="finput bg-white">
							{activeItem.application_time}
						</div>
					</fieldset>
				{/if}
				<div>
					<div class="flabel">Tags</div>
					<div class="flex gap-2 flex-wrap">
						{#each activeItem.flairs as item}
							<Flair
								{item}
								allowDelete
								application={activeItem}
								updateApplication={(item) => (activeItem = item)}
							/>
						{/each}
					</div>
				</div>
				<fieldset>
					<label class="flabel" for="extra">Extra Info</label>
					<textarea
						class="finput"
						id="extra"
						bind:value={activeItem.extra_data}
						onchange={save}
					></textarea>
				</fieldset>
				<fieldset>
					<label class="flabel" for="extra">Message</label>
					<textarea
						class="finput"
						id="extra"
						bind:value={activeItem.message}
						onchange={save}
					></textarea>
				</fieldset>
				{#if activeItem.views.length > 0}
					<h1 class="text-sm">Non Loggedin Views Time ({activeItem.views.length})</h1>
					{#each activeItem.views as view}
						<div>
							{view.time}
						</div>
					{/each}
				{/if}
			</div>
			<div class="flex btns">
				<button
					class="btn-confirm"
					onclick={() => {
						openWindow(activeItem!.url);
					}}
				>
					Open
				</button>
				<button class="btn-primary" onclick={() => openCV()}> Open CV </button>
				<div class="px-10"></div>
				<button class="btn-primary" onclick={() => extractTokens.showModal()}>
					Extract Flair
				</button>
				{#if lastExtData !== undefined}
					<button class="btn-primary" onclick={() => setExtData()}> Ext Data </button>
				{:else}
					<button
						class="btn-primary"
						onclick={() => {
							autoExtData = true;
							window.postMessage({ type: 'R_GET_DATA_FROM_PAGE' });
						}}
					>
						Get Ext Data
					</button>
				{/if}
				{#if activeItem.original_url == null}
					<button class="btn-primary" onclick={() => changeUrl.showModal()}>
						Update Url
					</button>
				{/if}
				<div class="px-10"></div>
				<button class="btn-primary" onclick={() => linkApplication.showModal()}>
					Link Application
				</button>
				{#if activeItem.original_url != null}
					<button class="btn-danger" onclick={resetUrl}> Reset Url </button>
				{/if}
				<button
					class:btn-primary={drag}
					class:btn-danger={!drag}
					onclick={() => (drag = !drag)}
				>
					👋
				</button>
				<button
					class:btn-primary={!showExtraData}
					class:btn-confirm={showExtraData}
					onclick={() => (showExtraData = !showExtraData)}
				>
					🔬
				</button>
			</div>
			<Timeline application={activeItem} showAll={showExtraData} />
		</div>
		<DropingZone bind:activeItem />
	{:else}
		<div
			class="p-2 h-full w-full gap-2 flex-grow card grid place-items-center min-h-[50vh]"
			ondragover={(e) => {
				e.preventDefault();
			}}
			ondragenter={preventDefault(() => {})}
			ondrop={() => {
				activate(applicationStore.dragging);
			}}
			role="none"
		>
			<div class="text-center relative">
				<span
					class="bi bi-layers-fill text-7xl text-white absolute"
					class:animate-bounce={applicationStore.dragging}
				></span>
				<span class="bi bi-layers-fill text-7xl text-white opacity-0"></span>
				<div class="text-xl">Drop Application To Manage</div>
			</div>
		</div>
	{/if}
</div>

<ExtractTextDialog id={activeItem?.id ?? ''} bind:dialog={extractTokens} onreload={loadActive} />

{#if !activeItem?.original_url}
	<NewUrlDialog
		id={activeItem?.id ?? ''}
		bind:dialog={changeUrl}
		onreload={async (item) => {
			item.events = await get(`events/${item.id}`);
			activeItem = item;
		}}
	/>
{/if}

{#if activeItem}
	<LinkApplication
		application={activeItem}
		bind:dialog={linkApplication}
		onreload={(item) => (activeItem = item)}
	/>
{/if}

<SearchApplication
	application={activeItem}
	onreload={async (item) => {
		item.events = await get(`events/${item.id}`);
		activeItem = item;
	}}
/>

<NewApplication onreload={activate} />
