<script lang="ts">
	import { client } from '$lib/graphql/client';
	import { ImportNovelDocument } from '$lib/graphql/__generated__/graphql';
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';

	interface Props {
		open: boolean;
		onClose: () => void;
		onSuccess?: () => void;
	}

	let { open = $bindable(), onClose, onSuccess }: Props = $props();

	let novelUrl = $state('');
	let submitting = $state(false);
	let error: string | null = $state(null);
	let success = $state(false);

	async function handleSubmit(e: Event) {
		e.preventDefault();

		if (!novelUrl.trim()) {
			error = 'Please enter a URL';
			return;
		}

		submitting = true;
		error = null;

		try {
			const result = await client
				.mutation(ImportNovelDocument, { input: { novelUrl: novelUrl.trim() } })
				.toPromise();

			if (result.error) {
				error = result.error.message;
				return;
			}

			const mutationErrors = result.data?.importNovel?.errors;
			if (mutationErrors && mutationErrors.length > 0) {
				error = mutationErrors[0].message;
				return;
			}

			if (result.data?.importNovel?.importNovelResult) {
				success = true;
				setTimeout(() => {
					handleClose();
					onSuccess?.();
				}, 1500);
			}
		} catch (e) {
			error = e instanceof Error ? e.message : 'Unknown error occurred';
		} finally {
			submitting = false;
		}
	}

	function handleClose() {
		novelUrl = '';
		error = null;
		success = false;
		onClose();
	}

	function handleBackdropClick(e: MouseEvent) {
		if (e.target === e.currentTarget) {
			handleClose();
		}
	}

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape') {
			handleClose();
		}
	}
</script>

<svelte:window onkeydown={handleKeydown} />

{#if open}
	<div
		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
		onclick={handleBackdropClick}
		onkeydown={handleKeydown}
		role="dialog"
		aria-modal="true"
		aria-labelledby="import-modal-title"
		tabindex="-1"
	>
		<Card class="w-full max-w-md mx-4 shadow-xl">
			<CardHeader>
				<CardTitle id="import-modal-title">Import Novel</CardTitle>
				<p class="text-muted-foreground text-sm">
					Enter the URL of the novel you want to import
				</p>
			</CardHeader>
			<CardContent>
				<form onsubmit={handleSubmit} class="space-y-4">
					<div class="space-y-2">
						<label for="novel-url" class="text-sm font-medium">Novel URL</label>
						<Input
							id="novel-url"
							type="url"
							placeholder="https://example.com/novel/..."
							bind:value={novelUrl}
							disabled={submitting || success}
						/>
					</div>

					{#if error}
						<p class="text-destructive text-sm">{error}</p>
					{/if}

					{#if success}
						<p class="text-green-600 dark:text-green-400 text-sm">
							Import request submitted successfully!
						</p>
					{/if}

					<div class="flex justify-end gap-2 pt-2">
						<Button
							type="button"
							variant="outline"
							onclick={handleClose}
							disabled={submitting}
						>
							Cancel
						</Button>
						<Button type="submit" disabled={submitting || success || !novelUrl.trim()}>
							{#if submitting}
								Importing...
							{:else if success}
								Done
							{:else}
								Import
							{/if}
						</Button>
					</div>
				</form>
			</CardContent>
		</Card>
	</div>
{/if}
