<template>
  <div class="card bg-base-100 border border-base-300 shadow p-6">
    <h3 class="font-semibold text-base-content mb-6">{{ $t('teams.create_team') }}</h3>

    <form @submit.prevent="handleSubmit" class="space-y-6">
      <div>
        <label class="block text-sm font-medium text-base-content mb-2">
          {{ $t('teams.team_name') }}
        </label>
        <input
          v-model="teamName"
          type="text"
          required
          :placeholder="$t('teams.team_name_placeholder')"
          class="input input-bordered w-full"
          :class="{ 'input-error': hasError }"
        />
        <p v-if="hasError" class="mt-1 text-sm text-error">
          {{ error }}
        </p>
      </div>

      <div>
        <label class="block text-sm font-medium text-base-content mb-2">
          {{ $t('teams.company_type.label') }}
        </label>
        <div class="flex flex-wrap gap-4">
          <label class="flex items-center gap-2 cursor-pointer">
            <input
              v-model="teamType"
              type="radio"
              value="BUYER"
              class="radio radio-primary"
            />
            <span class="text-base-content">{{ $t('teams.company_type.buyer') }}</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input
              v-model="teamType"
              type="radio"
              value="SELLER"
              class="radio radio-primary"
            />
            <span class="text-base-content">{{ $t('teams.company_type.seller') }}</span>
          </label>
        </div>
      </div>

      <div class="flex justify-end space-x-3">
        <button
          type="button"
          @click="$emit('cancel')"
          class="btn btn-ghost"
        >
          {{ $t('common.cancel') }}
        </button>
        <button
          type="submit"
          :disabled="isLoading || !teamName.trim()"
          class="btn btn-primary"
        >
          <span v-if="isLoading" class="loading loading-spinner loading-xs mr-2"></span>
          <span>{{ isLoading ? $t('teams.creating') : $t('teams.create_team') }}</span>
        </button>
      </div>
    </form>
  </div>
</template>

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

const emit = defineEmits(['teamCreated', 'cancel'])

const teamName = ref('')
const teamType = ref('BUYER')
const isLoading = ref(false)
const hasError = ref(false)
const error = ref('')

const { mutate } = useGraphQL()

const handleSubmit = async () => {
  try {
    isLoading.value = true
    hasError.value = false
    const result = await mutate(CreateTeamDocument, {
      input: {
        name: teamName.value.trim(),
        teamType: teamType.value
      }
    }, 'user', 'teams')
    emit('teamCreated', result.createTeam?.team)
    teamName.value = ''
    teamType.value = 'BUYER'
  } catch (err: any) {
    hasError.value = true
    error.value = err?.message || $t('teams.errors.create_failed')
    console.error('Error creating team:', err)
  } finally {
    isLoading.value = false
  }
}
</script>
