<script lang="ts">
	let {
		open = $bindable(false),
		onCreated
	}: {
		open: boolean;
		onCreated: (tripId: string) => void;
	} = $props();

	let name = $state('');
	let description = $state('');
	let startDate = $state('');
	let endDate = $state('');
	let saving = $state(false);

	$effect(() => {
		if (open) { name = ''; description = ''; startDate = ''; endDate = ''; }
	});

	function close() { open = false; }

	async function create() {
		if (!name.trim()) return;
		saving = true;
		try {
			const res = await fetch('/api/trips/trip', {
				method: 'POST', credentials: 'include',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({ name, description, start_date: startDate, end_date: endDate })
			});
			if (res.ok) {
				const data = await res.json();
				close();
				onCreated(data.id);
			}
		} catch (e) { console.error('Create failed:', e); }
		finally { saving = false; }
	}
</script>

{#if open}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-overlay" onclick={close}>
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div class="modal-sheet" onclick={(e) => e.stopPropagation()}>
		<div class="modal-header">
			<div class="modal-title">Plan a Trip</div>
			<button class="modal-close" onclick={close}>
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
			</button>
		</div>
		<div class="modal-body">
			<div class="field">
				<label class="field-label">Trip Name</label>
				<input class="field-input" type="text" bind:value={name} placeholder="e.g. Tokyo 2027" autofocus />
			</div>
			<div class="field">
				<label class="field-label">Description</label>
				<textarea class="field-input field-textarea" bind:value={description} rows="2" placeholder="Optional..."></textarea>
			</div>
			<div class="field-row">
				<div class="field"><label class="field-label">Start Date</label><input class="field-input" type="date" bind:value={startDate} /></div>
				<div class="field"><label class="field-label">End Date</label><input class="field-input" type="date" bind:value={endDate} /></div>
			</div>
		</div>
		<div class="modal-footer">
			<div></div>
			<div class="footer-right">
				<button class="btn-cancel" onclick={close}>Cancel</button>
				<button class="btn-save" onclick={create} disabled={saving || !name.trim()}>
					{saving ? 'Creating...' : 'Create Trip'}
				</button>
			</div>
		</div>
	</div>
</div>
{/if}

<style>
	.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 70; display: flex; align-items: center; justify-content: center; animation: fade 150ms ease; }
	@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
	.modal-sheet { width: 440px; max-width: 92vw; background: var(--surface); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,0.15); animation: slideUp 200ms ease; }
	@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
	.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
	.modal-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-1); }
	.modal-close { background: none; border: none; cursor: pointer; color: var(--text-3); padding: var(--sp-1); border-radius: var(--radius-sm); }
	.modal-close:hover { color: var(--text-1); background: var(--card-hover); }
	.modal-close svg { width: 18px; height: 18px; }
	.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
	.field { display: flex; flex-direction: column; gap: var(--sp-1); }
	.field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
	.field-input { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-secondary); color: var(--text-1); font-size: var(--text-md); font-family: var(--font); }
	.field-input:focus { outline: none; border-color: var(--accent); }
	.field-textarea { resize: vertical; min-height: 50px; }
	.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--border); }
	.footer-right { display: flex; gap: var(--sp-2); }
	.btn-cancel { padding: 8px 14px; border-radius: var(--radius-md); background: var(--card-secondary); color: var(--text-2); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: 500; cursor: pointer; font-family: var(--font); }
	.btn-save { padding: 8px 18px; border-radius: var(--radius-md); background: var(--accent); color: white; border: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--font); }
	.btn-save:disabled { opacity: 0.4; }
</style>
