<!-- src/routes/login/+page.svelte -->
<script lang="ts">
	// invalidateAll을 import 합니다.
	import { goto, invalidateAll } from '$app/navigation';
	let login_id = '';
	let password = '';
	let message = '';
	let isLoading = false;

	async function handleLogin(e: Event) {
		e.preventDefault();
		message = '';
		isLoading = true;

		try {
			const res = await fetch('/login', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({ login_id, password })
			});

			const data = await res.json();

			if (!res.ok) {
				message = `❌ ${data.error ?? '로그인 실패'}`;
				return;
			}

			// --- 여기가 핵심 변경사항 ---
			// 로그인 성공 후, SvelteKit에게 모든 load 함수를 다시 실행하라고 알립니다.
			// 이렇게 하면 +layout.server.ts가 새로운 쿠키를 읽어 사용자 정보를 갱신합니다.
			await invalidateAll();
			// -------------------------

			message = '✅ 로그인 성공! 잠시 후 이동합니다...';
			// bigdata-generate 페이지로 이동합니다.
			setTimeout(() => goto('/bigdata-generate'), 800);
		} catch (err) {
			console.error('Login error:', err);
			message = '❌ 서버에 문제가 발생했습니다.';
		} finally {
			isLoading = false;
		}
	}
</script>

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50">
	<div class="w-full max-w-md p-8 space-y-6 bg-white rounded-xl shadow-lg">
		<h1 class="text-3xl font-bold text-center text-gray-800">로그인</h1>

		<form on:submit={handleLogin} class="space-y-4">
			<div>
				<label for="login_id" class="sr-only">로그인 아이디</label>
				<input
					id="login_id"
					type="text"
					bind:value={login_id}
					placeholder="로그인 아이디"
					class="w-full px-4 py-2 text-gray-700 bg-gray-100 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
					required
				/>
			</div>

			<div>
				<label for="password" class="sr-only">비밀번호</label>
				<input
					id="password"
					type="password"
					bind:value={password}
					placeholder="비밀번호"
					class="w-full px-4 py-2 text-gray-700 bg-gray-100 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
					required
				/>
			</div>

			<button
				type="submit"
				disabled={isLoading}
				class="w-full px-4 py-2 font-semibold text-white bg-purple-600 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 disabled:bg-purple-300 transition-colors duration-300"
			>
				{isLoading ? '로그인 중...' : '로그인'}
			</button>
		</form>

		{#if message}
			<p class="mt-4 text-center text-sm" class:text-red-500={message.startsWith('❌')}>
				{message}
			</p>
		{/if}

		<div class="text-center">
			<a href="/register" class="text-sm text-purple-600 hover:underline">아직 회원이 아니신가요?</a>
		</div>
	</div>
</div>

