<script lang="ts">
  import { currentStep } from '$lib/stores.js';
  import { isSignedIn, handleSignIn, handleSignOut, isGoogleApiReady } from '$lib/google';

  function proceed() {
    currentStep.set(2);
  }
</script>

<div class="p-6">
  <div class="max-w-md mx-auto text-center">
    <div class="mb-6">
      <div class="mx-auto mb-4 w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
        <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12.017 11.215c-3.573-2.775-9.317-.362-9.317 4.686C2.7 21.833 6.943 24 12.017 24c5.076 0 9.319-2.167 9.319-8.099 0-5.048-5.744-7.461-9.319-4.686z"/>
          <path d="M20.791 5.016c-1.395-1.395-3.61-1.428-5.024-.033l-1.984 1.984v-.002L12.017 8.73 10.25 6.965l-1.984-1.984c-1.414-1.395-3.629-1.362-5.024.033L1.498 6.758c-1.438 1.438-1.438 3.77 0 5.208l1.744 1.744c1.395 1.395 3.61 1.428 5.024.033l1.984-1.984v.002L12.017 9.996l1.767 1.765 1.984 1.984c1.414 1.395 3.629 1.362 5.024-.033l1.744-1.744c1.438-1.438 1.438-3.77 0-5.208L20.791 5.016z"/>
        </svg>
      </div>
      
      <h2 class="text-xl font-semibold text-gray-900 mb-2">
        Connect to Google
      </h2>
      
      <p class="text-sm text-gray-700 leading-relaxed mb-6">
        Sign in with your Google account to access your Google Sheets and Google Drive for photo downloads.
      </p>
      
      <div class="text-xs text-gray-500 mb-6 space-y-1">
        <p>Required permissions:</p>
        <p>• View your Google Spreadsheets</p>
        <p>• View and manage the files in your Google Drive</p>
      </div>
    </div>

    {#if $isSignedIn}
      <!-- Authenticated state -->
      <div class="bg-green-50 border border-green-300 rounded-lg p-4 mb-4">
        <div class="flex items-center justify-center mb-2">
          <svg class="w-5 h-5 text-green-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
          </svg>
          <span class="text-sm font-medium text-green-800">Authenticated</span>
        </div>
        
        <p class="text-sm text-green-800 mb-3">
          You are signed in.
        </p>
        
        <div class="flex space-x-3 justify-center">
          <button
            on:click={proceed}
            class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700"
          >
            Continue →
          </button>
          
          <button
            on:click={handleSignOut}
            class="text-red-600 hover:text-red-700 px-4 py-2 text-sm font-medium"
          >
            Sign Out
          </button>
        </div>
      </div>
    {:else}
      <!-- Unauthenticated state -->
      <button
        on:click={handleSignIn}
        disabled={!$isGoogleApiReady}
        class="w-full bg-blue-600 text-white px-4 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
      >
        {#if $isGoogleApiReady}
          Sign In with Google
        {:else}
          Loading Google API...
        {/if}
      </button>
    {/if}
  </div>
</div>
