'use client'

import { useState } from 'react'
import { useLocale, useTranslations } from 'next-intl'
import { createClient } from '@/lib/supabase/client'
import { Button } from '@/components/ui/button'
import { Loader2 } from 'lucide-react'
import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
import { GoogleMark } from '@/components/ui/provider-marks'


/**
 * "Continue with Google" for the login and register pages.
 *
 * Kicks off the Supabase OAuth redirect; the round-trip lands in
 * /auth/callback (PKCE code exchange), which owns MFA routing, invite
 * acceptance and silent-team creation for OAuth sign-ins and sign-ups alike.
 * The flow=oauth marker lets the callback tag failures so the login page
 * shows Google-specific copy instead of the email-confirmation framing.
 */
export function GoogleAuthButton({
  onError,
  compact = false,
}: {
  onError: (message: string) => void
  /**
   * Half-width alternative-method chip on the login panel: shows just the
   * mark and "Google" (a brand name, never translated), with the full label
   * kept as the accessible name.
   */
  compact?: boolean
}) {
  const [isRedirecting, setIsRedirecting] = useState(false)
  const supabase = createClient()
  const tAuth = useTranslations('auth')
  const errorLocale = useLocale() as ErrorLocale

  const handleClick = async () => {
    setIsRedirecting(true)
    try {
      const { error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
          redirectTo: `${window.location.origin}/auth/callback?flow=oauth`,
        },
      })
      if (error) {
        onError(getErrorMessage(error, { context: 'auth', locale: errorLocale }))
        setIsRedirecting(false)
      }
      // On success the browser navigates away; keep the spinner until then.
    } catch (error) {
      onError(getErrorMessage(error, { context: 'auth', locale: errorLocale }))
      setIsRedirecting(false)
    }
  }

  return (
    <Button
      type="button"
      variant="outline"
      className={compact ? 'h-10 w-full gap-2' : 'w-full h-11'}
      onClick={handleClick}
      disabled={isRedirecting}
      aria-label={tAuth('continue_with_google')}
    >
      {isRedirecting ? (
        <Loader2 className={compact ? 'h-4 w-4 animate-spin' : 'mr-2 h-4 w-4 animate-spin'} />
      ) : (
        <span className={compact ? 'flex items-center' : 'mr-2 flex items-center'}>
          <GoogleMark />
        </span>
      )}
      {compact ? 'Google' : tAuth('continue_with_google')}
    </Button>
  )
}