<template>
  <Stack gap="6">
    <!-- Header -->
    <Stack direction="row" align="center" justify="between">
      <Heading :level="1">Характеристики товара</Heading>
      <NuxtLink :to="localePath('/dashboard/cabinet/offers/new')">
        <Button variant="outline">
          <Icon name="lucide:arrow-left" size="16" class="mr-2" />
          Назад к выбору
        </Button>
      </NuxtLink>
    </Stack>

    <!-- Ошибка -->
    <Alert v-if="hasError" variant="error">
      <Stack gap="2">
        <Heading :level="4" weight="semibold">Ошибка</Heading>
        <Text tone="muted">{{ error }}</Text>
        <Button @click="loadData">Повторить</Button>
      </Stack>
    </Alert>

    <!-- Загрузка -->
    <Card v-else-if="isLoading" tone="muted" padding="lg">
      <Stack align="center" justify="center" gap="3">
        <Spinner />
        <Text tone="muted">Загружаем данные...</Text>
      </Stack>
    </Card>

    <!-- Нет схемы -->
    <Card v-else-if="!schemaId" padding="lg">
      <Stack align="center" gap="4">
        <IconCircle tone="warning" size="lg">
          <Icon name="lucide:alert-triangle" size="24" />
        </IconCircle>
        <Heading :level="3" align="center">Схема не настроена</Heading>
        <Text tone="muted" align="center">
          Для товара "{{ productName }}" не настроена схема характеристик в TerminusDB.
          Обратитесь к администратору.
        </Text>
        <NuxtLink :to="localePath('/dashboard/cabinet/offers/new')">
          <Button variant="outline">Выбрать другой товар</Button>
        </NuxtLink>
      </Stack>
    </Card>

    <!-- Форма -->
    <Card v-else padding="lg">
      <Stack gap="4">
        <Stack gap="2">
          <Heading :level="2">{{ productName }}</Heading>
          <Text v-if="schemaDescription" tone="muted">{{ schemaDescription }}</Text>
        </Stack>

        <hr class="border-gray-200" />

        <!-- FormKit динамическая форма -->
        <FormKit
          type="form"
          :actions="false"
          @submit="handleSubmit"
        >
          <Stack gap="4">
            <FormKitSchema :schema="formkitSchema" />

            <Stack direction="row" gap="3" justify="end">
              <Button
                variant="outline"
                type="button"
                @click="navigateTo(localePath('/dashboard/cabinet/offers/new'))"
              >
                Отмена
              </Button>
              <Button type="submit" :disabled="isSubmitting">
                {{ isSubmitting ? 'Сохранение...' : 'Сохранить' }}
              </Button>
            </Stack>
          </Stack>
        </FormKit>
      </Stack>
    </Card>

    <!-- Дебаг инфо -->
    <Card v-if="isDev" padding="md" tone="muted">
      <Stack gap="2">
        <Text size="sm" weight="semibold">Debug Info</Text>
        <Text size="sm" tone="muted">Product UUID: {{ productUuid }}</Text>
        <Text size="sm" tone="muted">Product Name: {{ productName }}</Text>
        <Text size="sm" tone="muted">Schema ID: {{ schemaId || 'не указан' }}</Text>
        <details>
          <summary class="cursor-pointer text-sm text-gray-500">FormKit Schema</summary>
          <pre class="text-xs mt-2 p-2 bg-gray-100 rounded overflow-auto">{{ JSON.stringify(formkitSchema, null, 2) }}</pre>
        </details>
      </Stack>
    </Card>
  </Stack>
</template>

<script setup lang="ts">
import { FormKitSchema } from '@formkit/vue'
import type { FormKitSchemaNode } from '@formkit/core'
import { GetProductsDocument } from '~/composables/graphql/public/exchange-generated'

definePageMeta({
  layout: 'cabinet',
  middleware: ['auth-oidc'],
  validate: (route) => {
    // Исключаем 'new' из динамического роута
    return route.params.uuid !== 'new'
  }
})

const localePath = useLocalePath()
const route = useRoute()
const { execute } = useGraphQL()
const { getSchema, getEnums, schemaToFormKit } = useTerminus()

// State
const isLoading = ref(true)
const hasError = ref(false)
const error = ref('')
const isSubmitting = ref(false)

const productUuid = computed(() => route.params.uuid as string)
const productName = ref<string>('')
const schemaId = ref<string | null>(null)
const schemaDescription = ref<string | null>(null)
const formkitSchema = ref<FormKitSchemaNode[]>([])

const isDev = process.dev

// Загружаем данные
const loadData = async () => {
  try {
    isLoading.value = true
    hasError.value = false

    // 1. Загружаем продукт и получаем terminus_schema_id
    const result = await execute(GetProductsDocument, {}, 'public', 'exchange')
    const products = result.getProducts || []
    const product = products.find((p: any) => p.uuid === productUuid.value)

    if (!product) {
      throw new Error(`Продукт с UUID ${productUuid.value} не найден`)
    }

    productName.value = product.name
    schemaId.value = product.terminusSchemaId || null

    if (!schemaId.value) {
      // Нет схемы - показываем предупреждение
      isLoading.value = false
      return
    }

    // 2. Загружаем схему из TerminusDB
    const terminusClass = await getSchema(schemaId.value)

    if (!terminusClass) {
      throw new Error(`Схема "${schemaId.value}" не найдена в TerminusDB`)
    }

    // Сохраняем описание
    schemaDescription.value = terminusClass['@documentation']?.['@comment'] || null

    // 3. Загружаем enum'ы и конвертируем в FormKit схему
    const enums = await getEnums()
    formkitSchema.value = schemaToFormKit(terminusClass, enums)

  } catch (err: any) {
    hasError.value = true
    error.value = err.message || 'Не удалось загрузить данные'
    console.error('Load error:', err)
  } finally {
    isLoading.value = false
  }
}

// Обработка отправки формы
const handleSubmit = async (data: Record<string, unknown>) => {
  try {
    isSubmitting.value = true

    console.log('Form data:', data)

    // TODO: Отправить данные в TerminusDB
    // const result = await saveToTerminus(schemaId.value, data)

    // TODO: Создать OfferLine с product_uuid и характеристиками

    // Пока просто показываем alert
    alert(`Данные сохранены!\n\n${JSON.stringify(data, null, 2)}`)

    // Редирект на страницу предложений
    await navigateTo(localePath('/dashboard/cabinet/offers'))

  } catch (err: any) {
    error.value = err.message || 'Не удалось сохранить данные'
    hasError.value = true
  } finally {
    isSubmitting.value = false
  }
}

// Загружаем данные при монтировании
onMounted(() => {
  loadData()
})
</script>

<style>
/* FormKit базовые стили */
.formkit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.formkit-outer {
  margin-bottom: 1rem;
}

.formkit-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

.formkit-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  font-size: 0.875rem;
}

.formkit-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.formkit-input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

select.formkit-input {
  padding-right: 2.5rem;
}

textarea.formkit-input {
  min-height: 80px;
}

.formkit-help {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
}

.formkit-messages {
  margin-top: 0.25rem;
}

.formkit-message {
  font-size: 0.75rem;
  color: #dc2626;
}
</style>
