<template>
  <div class="bg-white rounded-lg shadow p-6">
    <h3 class="font-semibold text-gray-900 mb-6">{{ $t('teams.create_team') }}</h3>

    <form @submit.prevent="handleSubmit" class="space-y-6">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">
          {{ $t('teams.team_name') }}
        </label>
        <input
          v-model="teamName"
          type="text"
          required
          :placeholder="$t('teams.team_name_placeholder')"
          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          :class="{ 'border-red-300': hasError }"
        />
        <p v-if="hasError" class="mt-1 text-sm text-red-600">
          {{ error }}
        </p>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">
          Тип компании
        </label>
        <div class="flex gap-4">
          <label class="flex items-center gap-2 cursor-pointer">
            <input
              v-model="teamType"
              type="radio"
              value="BUYER"
              class="w-4 h-4 text-blue-600 focus:ring-blue-500"
            />
            <span class="text-gray-700">Покупатель</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input
              v-model="teamType"
              type="radio"
              value="SELLER"
              class="w-4 h-4 text-blue-600 focus:ring-blue-500"
            />
            <span class="text-gray-700">Продавец</span>
          </label>
        </div>
      </div>

      <div class="flex justify-end space-x-3">
        <button
          type="button"
          @click="$emit('cancel')"
          class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
        >
          {{ $t('common.cancel') }}
        </button>
        <button
          type="submit"
          :disabled="isLoading || !teamName.trim()"
          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <span v-if="isLoading" class="inline-flex items-center">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            {{ $t('teams.creating') }}
          </span>
          <span v-else>{{ $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 { execute } = useGraphQL()

const handleSubmit = async () => {
  try {
    isLoading.value = true
    hasError.value = false
    const result = await execute(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 || 'Ошибка создания команды'
    console.error('Error creating team:', err)
  } finally {
    isLoading.value = false
  }
}
</script>
