<template>
  <UModal v-model:open="open" title="Mitglied einladen" description="Laden Sie ein Mitglied zu Ihrer Organisation ein">
    <UButton v-if="canInviteMembers" icon="i-lucide-mail-plus" variant="outline" size="sm" @click="open = true">
      Mitglied einladen
    </UButton>

    <template #body>
      <UForm :state="form" class="space-y-4" @submit="handleSubmit">
        <UFormField label="E-Mail" name="email">
          <UInput v-model="form.email" type="email" placeholder="E-Mail" class="w-full" />
        </UFormField>

        <UFormField label="Rolle" name="role">
          <USelect
            v-model="form.role"
            :items="availableRoles"
            placeholder="Rolle auswählen"
            value-key="value"
            class="w-full"
          >
            <template #option="{ option }">
              <div class="flex items-center gap-2">
                <UIcon :name="option.icon" :class="`text-${option.color}-500`" />
                <div>
                  <div class="font-medium">{{ option.label }}</div>
                  <div class="text-xs text-gray-500">{{ option.description }}</div>
                </div>
              </div>
            </template>
          </USelect>
        </UFormField>

        <div class="flex justify-end">
          <UButton type="submit" :loading="loading">
            {{ loading ? 'Einladen...' : 'Einladen' }}
          </UButton>
        </div>
      </UForm>
    </template>
  </UModal>
</template>

<script setup lang="ts">
import { ROLES, type LegalRole } from '~/server/utils/permissions'

const { canInviteMembers } = usePermissions()
const { inviteMember } = useOrganizationStore()

const open = ref(false)
const loading = ref(false)

const form = ref({
  email: '',
  role: ROLES.EMPLOYEE as LegalRole
})

const { t } = useI18n()

const availableRoles = computed(() => {
  return Object.values(ROLES).map((role) => {
    const roleInfo = getRoleInfo(role)
    return {
      label: roleInfo.name,
      value: role,
      description: roleInfo.description,
      color: roleInfo.color,
      icon: roleInfo.icon
    }
  })
})

function getRoleInfo(role: LegalRole) {
  const roleInfo = {
    [ROLES.EMPLOYER]: {
      name: t('roles.employer'),
      description: 'Kann Anträge genehmigen und Vereinbarungen unterzeichnen',
      color: 'blue',
      icon: 'i-lucide-briefcase'
    },
    [ROLES.EMPLOYEE]: {
      name: t('roles.employee'),
      description: 'Kann eigene Anträge einsehen und kommentieren',
      color: 'green',
      icon: 'i-lucide-user'
    },
    [ROLES.WORKS_COUNCIL_MEMBER]: {
      name: t('roles.worksCouncilMember'),
      description: 'Kann Anträge prüfen und Vereinbarungen unterzeichnen',
      color: 'purple',
      icon: 'i-lucide-users'
    },
    [ROLES.ADMIN]: {
      name: t('roles.admin'),
      description: 'Vollzugriff auf Organisationsverwaltung',
      color: 'red',
      icon: 'i-lucide-settings'
    }
  }

  return roleInfo[role] || { name: role, description: '', color: 'gray', icon: 'i-lucide-circle' }
}

watch(open, (val: boolean) => {
  if (val) {
    form.value = {
      email: '',
      role: ROLES.EMPLOYEE
    }
  }
})

async function handleSubmit() {
  loading.value = true
  try {
    await inviteMember(form.value.email, form.value.role)
    open.value = false
  } finally {
    loading.value = false
  }
}
</script>
