<template>
  <div class="p-6">
    
    <form @submit.prevent="submitKYC" class="space-y-6">
      <!-- Company Section -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Данные организации</h3>
        
        <div class="space-y-4">
          <!-- Company search with DADATA -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              Поиск организации
            </label>
            <CompanySearchRussia v-model="formData.company" @select="onCompanySelect" />
          </div>
          
          <!-- Company details (auto-filled from DADATA) -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">ИНН</label>
              <input 
                v-model="formData.company.inn" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                readonly 
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">КПП</label>
              <input 
                v-model="formData.company.kpp" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                readonly 
              />
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">ОГРН</label>
            <input 
              v-model="formData.company.ogrn" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
              readonly 
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Адрес</label>
            <textarea 
              v-model="formData.company.address" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
              rows="3" 
              readonly
            ></textarea>
          </div>
        </div>
      </div>
      
      <!-- Bank Section -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Банковские реквизиты</h3>
        
        <div class="space-y-4">
          <!-- Bank search with DADATA -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              Поиск банка
            </label>
            <BankSearchRussia v-model="formData.bank" @select="onBankSelect" />
          </div>
          
          <!-- Bank details -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">БИК</label>
              <input 
                v-model="formData.bank.bik" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                readonly 
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Корр. счет</label>
              <input 
                v-model="formData.bank.correspondentAccount" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                readonly 
              />
            </div>
          </div>
        </div>
      </div>
      
      <!-- Contact Section -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Контактные данные</h3>
        
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              Контактное лицо *
            </label>
            <input 
              v-model="formData.contact.person" 
              type="text"
              required
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="ФИО представителя компании"
            />
          </div>
          
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
              <input 
                v-model="formData.contact.email" 
                type="email"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="email@company.ru"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Телефон *</label>
              <input 
                v-model="formData.contact.phone" 
                type="tel"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="+7 (xxx) xxx-xx-xx"
              />
            </div>
          </div>
        </div>
      </div>
      
      <!-- Submit Button -->
      <div class="flex justify-end">
        <button
          type="submit"
          :disabled="loading || !isFormValid"
          class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {{ loading ? 'Отправка...' : 'Отправить на проверку' }}
        </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  submit: [data: any]
}>()

const loading = ref(false)

const formData = ref({
  company: {
    companyName: '',
    companyFullName: '',
    inn: '',
    kpp: '',
    ogrn: '',
    address: ''
  },
  bank: {
    bankName: '',
    bik: '',
    correspondentAccount: ''
  },
  contact: {
    person: '',
    email: '',
    phone: ''
  }
})

// Form validation
const isFormValid = computed(() => {
  return formData.value.company.companyName && 
         formData.value.company.inn && 
         formData.value.bank.bankName && 
         formData.value.bank.bik &&
         formData.value.contact.person &&
         formData.value.contact.email &&
         formData.value.contact.phone
})

// Handlers
const onCompanySelect = (company: any) => {
  formData.value.company = {
    companyName: company.value,
    companyFullName: company.unrestricted_value,
    inn: company.data.inn,
    kpp: company.data.kpp || '',
    ogrn: company.data.ogrn || '',
    address: company.data.address?.value || ''
  }
}

const onBankSelect = (bank: any) => {
  formData.value.bank = {
    bankName: bank.value,
    bik: bank.data.bic,
    correspondentAccount: bank.data.correspondent_account || ''
  }
}

const submitKYC = async () => {
  if (!isFormValid.value) return
  
  loading.value = true
  try {
    const submitData = {
      company_name: formData.value.company.companyName,
      company_full_name: formData.value.company.companyFullName,
      inn: formData.value.company.inn,
      kpp: formData.value.company.kpp,
      ogrn: formData.value.company.ogrn,
      address: formData.value.company.address,
      bank_name: formData.value.bank.bankName,
      bik: formData.value.bank.bik,
      correspondent_account: formData.value.bank.correspondentAccount,
      contact_person: formData.value.contact.person,
      contact_email: formData.value.contact.email,
      contact_phone: formData.value.contact.phone
    }
    
    emit('submit', submitData)
  } catch (error) {
    console.error('Error submitting KYC:', error)
  } finally {
    loading.value = false
  }
}
</script>