import $ from 'jquery'

let apiSpec = null

async function loadApiSpec() {
  try {
    const response = await fetch('/api.spec.json', {
      method: 'GET',
      headers: {
        'Cache-Control': 'no-cache',
        'Accept': 'application/json'
      }
    })
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }
    apiSpec = await response.json()
    console.log('API Spec loaded:', apiSpec)
    return apiSpec
  } catch (error) {
    console.error('Ошибка загрузки API спецификации:', error)
    $('#result').text('Ошибка загрузки API спецификации: ' + error.message)
  }
}

function populateServices() {
  const $serviceSelect = $('#service')
  $serviceSelect.empty()
  $serviceSelect.append('<option value="">Выберите сервис</option>')

  Object.keys(apiSpec).forEach(serviceName => {
    $serviceSelect.append(`<option value="${serviceName}">${serviceName}</option>`)
  })
}

function populateMethods(serviceName) {
  const $methodSelect = $('#method')
  $methodSelect.empty()
  $methodSelect.append('<option value="">Выберите метод</option>')

  if (serviceName && apiSpec[serviceName] && apiSpec[serviceName].methods) {
    apiSpec[serviceName].methods.forEach(method => {
      $methodSelect.append(`<option value="${method.name}">${method.name}</option>`)
    })
  }
}

function createParamInputs(methodName, serviceName) {
  const $paramsContainer = $('#params-container')
  $paramsContainer.empty()

  if (!serviceName || !methodName) return

  const service = apiSpec[serviceName]
  if (!service || !service.methods) return

  const method = service.methods.find(m => m.name === methodName)
  if (!method || !method.params) return

  method.params.forEach(param => {
    const required = !param.optional ? ' (обязательно)' : ''
    const $paramDiv = $(`
      <div class="param">
        <label for="param-${param.name}">${param.name}${required} (${param.type}):</label>
        <input type="text" id="param-${param.name}" data-param="${param.name}" placeholder="${param.description}">
      </div>
    `)
    $paramsContainer.append($paramDiv)
  })
}

async function sendRequest() {
  const serviceName = $('#service').val()
  const methodName = $('#method').val()

  if (!serviceName || !methodName) {
    $('#result').text('Выберите сервис и метод')
    return
  }

  const params = {}
  $('.param input').each(function() {
    const paramName = $(this).data('param')
    const value = $(this).val()
    if (value.trim() !== '') {
      params[paramName] = value
    }
  })

  const requestData = {
    jsonrpc: '2.0',
    method: `${serviceName}.${methodName}`,
    params: params,
    id: Date.now()
  }

  $('#result').text('Отправка запроса...')

  try {
    const response = await fetch('/api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(requestData)
    })

    const result = await response.json()
    $('#result').text(JSON.stringify(result, null, 2))
  } catch (error) {
    $('#result').text(`Ошибка: ${error.message}`)
  }
}

$(document).ready(async () => {
  await loadApiSpec()
  if (apiSpec) {
    populateServices()

    $('#service').on('change', function() {
      const serviceName = $(this).val()
      populateMethods(serviceName)
      $('#params-container').empty()
    })

    $('#method').on('change', function() {
      const serviceName = $('#service').val()
      const methodName = $(this).val()
      createParamInputs(methodName, serviceName)
    })

    $('#send-btn').on('click', sendRequest)
  }
})