<script lang="ts">
	import { onMount } from 'svelte';
	import { currentStep } from '$lib/stores.js';
	import {
		isSignedIn,
		handleSignOut,
		requestTokenFromUser,
		isGoogleApiReady,
		initGoogleClients
	} from '$lib/google';
	import Navigator from './subcomponents/Navigator.svelte';

	onMount(() => {
		if (!$isGoogleApiReady) {
			initGoogleClients(() => {
				// This callback is called when the Google clients are ready.
			});
		}
	});

	function handleSignIn() {
		requestTokenFromUser();
	}
</script>

<div class="p-6">
	<div class="mb-6">
		<h2 class="mb-2 text-xl font-semibold text-gray-900">Connect to Google</h2>
		<p class="text-sm text-gray-700">
			Sign in with your Google account to access your Google Sheets and Google Drive for photo
			downloads.
		</p>
	</div>

	<div class="grid gap-8 md:grid-cols-2">
		<!-- Left Column: Information -->
		<div class="space-y-6 text-gray-700">
			<div>
				<h4 class="font-semibold text-gray-900">Google Sheets Integration</h4>
				<p class="text-sm">
					Seamlessly import your data without the hassle of manual copy-pasting.
				</p>
			</div>
			<div>
				<h4 class="font-semibold text-gray-900">Google Drive Access</h4>
				<p class="text-sm">
					Automatically download photos for your cards directly from your Google Drive.
				</p>
			</div>
			<div>
				<h4 class="font-semibold text-gray-900">Privacy & Security</h4>
				<p class="text-sm">
					Your data is processed entirely in your browser. Nothing is ever uploaded to or stored on
					our servers. We only request read-only access. All of the data is then removed from your browser
          when the work is finished.
				</p>
			</div>
		</div>

		<!-- Right Column: Action -->
		<div
			class="flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50 p-8"
		>
			{#if !$isGoogleApiReady}
				<!-- Loading state -->
				<div class="flex items-center justify-center gap-2">
					<div
						class="h-6 w-6 animate-spin rounded-full border-2 border-blue-600 border-t-transparent"
					></div>
					<span class="text-sm text-gray-600">Loading Google services...</span>
				</div>
			{:else if $isSignedIn}
				<!-- Authenticated state -->
				<div class="text-center">
					<div class="flex items-center justify-center gap-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="h-6 w-6 text-green-500"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
							stroke-width="2"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
							/>
						</svg>
						<h3 class="text-lg font-medium text-gray-900">Successfully Connected</h3>
					</div>
					<p class="mb-6 mt-2 text-sm text-gray-600">You are signed in and ready to proceed.</p>
					<button
						onclick={handleSignOut}
						class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
					>
						Sign Out
					</button>
				</div>
			{:else}
				<!-- Unauthenticated state -->
				<div class="w-full text-center">
					<h3 class="text-lg font-medium text-gray-900">Ready to Connect?</h3>
					<p class="mb-6 text-sm text-gray-600">
						Click the button below to sign in with your Google account.
					</p>
					<button
						onclick={handleSignIn}
						class="flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-400"
					>
						Sign In with Google
					</button>
				</div>
			{/if}
		</div>
	</div>	<div class="mt-8">
		<Navigator
			canProceed={$isSignedIn}
			{currentStep}
			textBack="Back to Splash"
			textForwardDisabled="Sign in to continue"
			textForwardEnabled="Continue to Sheet Search"
		/>
	</div>
</div>
