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

const props = withDefaults(defineProps<ConnectedAccountCardProps>(), {
  isLastAccount: false,
  isDeleting: false
})

const emit = defineEmits<{
  (e: 'disconnect', accountId: string, providerName: string): void
}>()

const { t } = useI18n()

// Provider icon mapping
const getProviderIcon = (providerId: string) => {
  const icons: Record<string, string> = {
    github: 'i-simple-icons-github',
    google: 'i-simple-icons-google'
  }
  return icons[providerId] || useSolarIcon('link')
}

// Provider name mapping
const getProviderName = (providerId: string) => {
  const names: Record<string, string> = {
    github: 'GitHub',
    google: 'Google'
  }
  return names[providerId] || providerId
}

// Format date
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const handleDisconnect = () => {
  emit('disconnect', props.account.id, getProviderName(props.account.providerId))
}
</script>

<template>
  <div class="flex items-center justify-between p-4 border border-default rounded-lg hover:bg-muted/5 transition-colors">
    <div class="flex items-center gap-4">
      <div class="flex items-center justify-center w-10 h-10 rounded-full bg-muted/10">
        <UIcon
          :name="getProviderIcon(account.providerId)"
          class="h-5 w-5"
        />
      </div>
      <div>
        <p class="font-medium">
          {{ getProviderName(account.providerId) }}
          <UBadge
            color="success"
            variant="soft"
            class="ml-auto"
          >
            {{ t('account.verified') }}
          </UBadge>
        </p>
        <p class="text-sm text-muted">
          {{ t('account.connectedOn') }} {{ formatDate(account.createdAt) }}
        </p>
      </div>
    </div>

    <UTooltip
      v-if="isLastAccount"
      :text="t('account.cannotDisconnectLast')"
    >
      <UButton
        color="error"
        variant="ghost"
        :icon="useSolarIcon('trash-bin-trash')"
        :loading="isDeleting"
        :disabled="isLastAccount"
        @click="handleDisconnect"
      >
        {{ t('account.disconnect') }}
      </UButton>
    </UTooltip>
    <UButton
      v-else
      color="error"
      variant="ghost"
      :icon="useSolarIcon('trash-bin-trash')"
      :loading="isDeleting"
      @click="handleDisconnect"
    >
      {{ t('account.disconnect') }}
    </UButton>
  </div>
</template>
