<script lang="ts">
	import { post } from '$lib/api/client';

	let {
		tripId,
		tripName = '',
		onClose
	}: {
		tripId: string;
		tripName?: string;
		onClose: () => void;
	} = $props();

	let modal = $state<HTMLDialogElement | null>(null);
	let loading = $state(false);
	let content = $state('');
	let error = $state('');
	let provider = $state<'gemini' | 'openai'>('gemini');

	let initialized = false;
	$effect(() => {
		if (modal && !initialized) {
			initialized = true;
			modal.showModal();
		}
	});

	async function generate() {
		loading = true;
		error = '';
		content = '';
		try {
			const data = await post<{ suggestions?: string; content?: string; error?: string }>('/api/ai-guide', {
				trip_id: tripId,
				provider
			});
			if (data.error) {
				error = data.error;
			} else {
				content = data.suggestions || data.content || '';
			}
		} catch {
			error = 'Failed to generate guide';
		} finally {
			loading = false;
		}
	}

	function close() { modal?.close(); onClose(); }
</script>

<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
	<div class="modal-box max-w-3xl max-h-[85vh] flex flex-col">
		<form method="dialog">
			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
		</form>

		<h3 class="font-bold text-lg flex items-center gap-2 mb-4 shrink-0">
			<div class="p-2 rounded-xl bg-accent/15">
				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
				</svg>
			</div>
			AI Trip Guide
			<span class="text-sm font-normal text-base-content/40">— {tripName}</span>
		</h3>

		{#if !content && !loading}
			<div class="space-y-4">
				<p class="text-sm text-base-content/60">
					Generate personalized travel suggestions, tips, and recommendations for your trip using AI with real-time web search.
				</p>

				<div class="flex gap-2">
					<label class="label cursor-pointer gap-2">
						<input type="radio" name="provider" class="radio radio-sm radio-primary" value="gemini" bind:group={provider} />
						<span class="label-text">Gemini (with web search)</span>
					</label>
					<label class="label cursor-pointer gap-2">
						<input type="radio" name="provider" class="radio radio-sm radio-primary" value="openai" bind:group={provider} />
						<span class="label-text">OpenAI</span>
					</label>
				</div>

				{#if error}
					<div class="alert alert-error text-sm py-2"><span>{error}</span></div>
				{/if}

				<button class="btn btn-primary w-full" onclick={generate}>
					Generate Trip Guide
				</button>
			</div>
		{:else if loading}
			<div class="flex-1 flex flex-col items-center justify-center py-12">
				<span class="loading loading-spinner loading-lg text-primary mb-4"></span>
				<p class="text-sm text-base-content/50">Researching your trip...</p>
				<p class="text-xs text-base-content/30 mt-1">This may take 15-30 seconds</p>
			</div>
		{:else}
			<div class="flex-1 overflow-y-auto min-h-0">
				<div class="prose prose-sm max-w-none text-base-content/80">
					{@html content.replace(/\n/g, '<br>')}
				</div>
			</div>
			<div class="flex gap-2 mt-4 pt-4 border-t border-base-300 shrink-0">
				<button class="btn btn-ghost btn-sm" onclick={() => { content = ''; error = ''; }}>
					Regenerate
				</button>
				<button class="btn btn-ghost btn-sm" onclick={close}>Close</button>
			</div>
		{/if}
	</div>
	<form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
