<script setup lang="ts">
import type { ConnectProviderButtonProps, ProviderConfig } from '../../types'

const props = withDefaults(defineProps<ConnectProviderButtonProps>(), {
  isConnected: false
})

const { t } = useI18n()
// const auth = useAuth()
const toast = useToast()

const providerConfig = computed(() => {
  const configs: Record<string, ProviderConfig> = {
    github: {
      name: 'GitHub',
      icon: 'i-simple-icons-github',
      color: 'neutral' as const
    },
    google: {
      name: 'Google',
      icon: 'i-simple-icons-google',
      color: 'neutral' as const
    }
  }

  // Return config if exists, otherwise create a default config
  return configs[props.provider] || {
    name: props.provider.charAt(0).toUpperCase() + props.provider.slice(1),
    icon: useSolarIcon('link'),
    color: 'neutral' as const
  }
})

// Handle provider connection with error handling
const connectProvider = async () => {
  toast.add({
    title: 'Connect from the login page instead',
    color: 'warning'
  })
  /* TODO: Implement better flow for provider connection
  try {
    await auth.signIn.social({ provider: props.provider, callbackURL: '/dashboard/account/settings' })
  } catch (error) {
    toast.add({
      title: t('account.connectionError'),
      description: t('account.emailMismatchError', { provider: providerConfig.value.name }),
      color: 'error'
    })
  } */
}
</script>

<template>
  <UButton
    v-if="!isConnected"
    :icon="providerConfig.icon"
    :color="providerConfig.color"
    variant="outline"
    block
    @click="connectProvider"
  >
    {{ t('account.connectProvider', { provider: providerConfig.name }) }}
  </UButton>
  <div
    v-else
    class="flex items-center gap-2 p-3 border border-default rounded-lg bg-muted/5"
  >
    <UIcon
      :name="providerConfig.icon"
      class="h-5 w-5"
    />
    <span class="text-sm font-medium">{{ providerConfig.name }}</span>
    <UBadge
      color="success"
      variant="soft"
      class="ml-auto"
    >
      {{ t('account.verified') }}
    </UBadge>
  </div>
</template>
