<template>
  <Section variant="plain">
    <Stack gap="6">
      <PageHeader :title="t('clientTeam.invite.title')" />

      <Card padding="lg">
        <form @submit.prevent="submitInvite">
          <Stack gap="4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">{{ t('clientTeam.invite.email') }}</span>
              </label>
              <input
                v-model="inviteEmail"
                type="email"
                :placeholder="t('clientTeam.invite.emailPlaceholder')"
                class="input input-bordered w-full"
                required
              />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">{{ t('clientTeam.invite.role') }}</span>
              </label>
              <select v-model="inviteRole" class="select select-bordered w-full">
                <option value="MEMBER">{{ t('clientTeam.roles.member') }}</option>
                <option value="MANAGER">{{ t('clientTeam.roles.manager') }}</option>
                <option value="ADMIN">{{ t('clientTeam.roles.admin') }}</option>
              </select>
            </div>

            <Alert v-if="inviteError" variant="error">
              {{ inviteError }}
            </Alert>

            <Alert v-if="inviteSuccess" variant="success">
              {{ t('clientTeam.invite.success') }}
            </Alert>

            <Stack direction="row" gap="3">
              <Button variant="ghost" :to="localePath('/clientarea/team')">
                {{ t('clientTeam.invite.cancel') }}
              </Button>
              <Button type="submit" :loading="inviteLoading">
                {{ t('clientTeam.invite.submit') }}
              </Button>
            </Stack>
          </Stack>
        </form>
      </Card>
    </Stack>
  </Section>
</template>

<script setup lang="ts">
import { InviteMemberDocument } from '~/composables/graphql/team/teams-generated'

const { t } = useI18n()
const { mutate } = useGraphQL()
const localePath = useLocalePath()
const router = useRouter()

definePageMeta({
  layout: 'topnav',
  middleware: ['auth-oidc']
})

const inviteEmail = ref('')
const inviteRole = ref('MEMBER')
const inviteLoading = ref(false)
const inviteError = ref('')
const inviteSuccess = ref(false)

const submitInvite = async () => {
  if (!inviteEmail.value) return

  inviteLoading.value = true
  inviteError.value = ''
  inviteSuccess.value = false

  try {
    const result = await mutate(InviteMemberDocument, {
      input: {
        email: inviteEmail.value,
        role: inviteRole.value
      }
    }, 'team', 'teams')

    if (result?.inviteMember?.success) {
      inviteSuccess.value = true
      setTimeout(() => {
        router.push(localePath('/clientarea/team'))
      }, 1500)
    } else {
      inviteError.value = result?.inviteMember?.message || t('clientTeam.invite.error')
    }
  } catch (err: any) {
    inviteError.value = err.message || t('clientTeam.invite.error')
  } finally {
    inviteLoading.value = false
  }
}
</script>
