(() => {
  var $paymentForm = document.getElementById('payment_form');
  (url = document.getElementById('payment_form').dataset.url),
    (transaction = window.location.search.match(/transaction\=(\w+)/)),
    (client = window.location.search.match(/client\=(\w+)/));
  alliance = window.location.search.match(/alliance\=(\w+)/);
  transaction = transaction && transaction[1];
  client = client && client[1];
  alliance = alliance && alliance[1];
  function init(methodId, name) {
    if (name == 'Liqpay') {
      fetch(`${url}limbo`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
        },
        body: JSON.stringify({
          query: `=>payment_loadLiqPay ~ ${JSON.stringify({
            client: client || null,
            alliance: alliance || null,
            paymentMethod: methodId,
          })}`,
        }),
      }).then((resp) => {
        resp &&
          resp.json().then((json) => {
            document.getElementById('payment_form').innerHTML = json.html;
            var liqpayScript = document.createElement('script');

            liqpayScript.setAttribute('src', 'https://static.liqpay.ua/libjs/checkout.js');

            document.head.appendChild(liqpayScript);
            window.LiqPayCheckoutCallback = function () {
              LiqPayCheckout.init({
                data: document.getElementsByName('data')[0].value,
                signature: document.getElementsByName('signature')[0].value,
                embedTo: '#payment_form',
                language: 'ua',
                mode: 'embed', // embed || popup
              })
                .on('liqpay.callback', function (data) {})
                .on('liqpay.ready', function (data) {
                  // ready
                })
                .on('liqpay.close', function (data) {
                  // close
                });
            };
          });
      });
      return;
    }

    if (name === 'Portmone') {
      if (alliance) {
        fetch(`${url}limbo`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json;charset=utf-8' },
          body: JSON.stringify({
            query: `=>payment_getPaymentOptions ~ ${JSON.stringify({ alliance: alliance })}`,
          }),
        })
          .then((resp) => resp && resp.json())
          .then(({tmpKey, sessions}) => {
            if (sessions && Array.isArray(sessions) && sessions.length > 1) {
              // Показати список сесій
              var selectedSessions = [];
              var html = '<div style="padding:20px;"><h3>Оберіть сесії для оплати:</h3>';

              sessions.forEach((session) => {
                var checked = session.isPast || session.adjustedAmount === 0 ? 'checked' : '';
                var disabled = session.status === 'paid' || session.adjustedAmount === 0 ? 'disabled' : '';
                if (checked && !disabled) {
                  selectedSessions.push(session.id);
                }
                html += `<div style="margin:10px 0;">
                  <label>
                    <input type="checkbox" class="session-cb" data-id="${session.id}" ${checked} ${disabled}>
                    ${session.date} - ${session.adjustedAmount !== undefined ? session.adjustedAmount : session.rate} грн 
                  </label>
                </div>`;
              });

              html +=
                '<button id="continue-btn" style="margin-top:20px;padding:10px 20px;">Далі</button></div>';
              $paymentForm.innerHTML = html;

              var continueBtn = document.getElementById('continue-btn');
              continueBtn.disabled = selectedSessions.length === 0;

              document.querySelectorAll('.session-cb').forEach((cb) => {
                cb.addEventListener('change', function () {
                  if (this.checked) {
                    selectedSessions.push(this.dataset.id);
                  } else {
                    selectedSessions = selectedSessions.filter((id) => id !== this.dataset.id);
                  }
                  continueBtn.disabled = selectedSessions.length === 0;
                });
              });

              document.getElementById('continue-btn').addEventListener('click', () => {
                loadPortmone(methodId, selectedSessions, tmpKey);
              });
            } else {
              // Немає сесій, або лише одна - завантажити Portmone без них
              loadPortmone(methodId, sessions?.map((s) => s.id) || [], tmpKey);
            }
          })
          .catch(() => {
            // Помилка при завантаженні сесій - завантажити Portmone без них
            loadPortmone(methodId, [], tmpKey);
          });
      } else {
        // Немає alliance - завантажити Portmone без сесій
        loadPortmone(methodId, []);
      }
      return;
    }
  }

  function loadPortmone(methodId, sessions, tmpKey) {
    var requestBody = {
      client: client || null,
      alliance: alliance || null,
      paymentMethod: methodId,
      tmpKey: tmpKey || null,
    };

    if (sessions && sessions.length > 0) {
      requestBody.sessions = sessions;
    }

    fetch(`${url}limbo`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json;charset=utf-8' },
      body: JSON.stringify({
        query: `=>payment_loadPortmone ~ ${JSON.stringify(requestBody)}`,
      }),
    })
      .then((resp) => resp && resp.json())
      .then((json) => {
        let i = 0;
        const script = document.createElement('script');
        script.src = json.portmoneSdkUrl;
        payment_form.innerHTML = `<div><script id="portmone-script"></script></div>`;
        document.body.appendChild(script);

        script.onload = () => {
          const attr5 = json.splitDetails
            ? Object.keys(json.splitDetails)
                .map((key) => `service${i++}:` + key + ';' + json.splitDetails[key])
                .join(';') + ';'
            : '';

          PG.paymentData(
            'gateway',
            {
              paymentTypes: {
                card: 'Y',
                portmone: 'Y',
                token: 'N',
                clicktopay: 'Y',
                createtokenonly: 'N',
                gpay: 'Y',
                applepay: 'N',
              },
              priorityPaymentTypes: {
                card: '1',
                portmone: '2',
                gpay: '4',
                createtokenonly: '0',
              },
              payee: {
                payeeId: json.publicKey,
                login: json.merchant,
                dt: json.date,
                signature: json.signature,
                shopSiteId: '',
                appleMerchantName: json.appleMerchantId,
              },
              order: {
                description: 'Психологічна консультація',
                billAmount: json.amount,
                attribute1: json.allianceId,
                attribute2: methodId,
                attribute3: json?.sessions?.join(','),
                attribute4: tmpKey,
                attribute5: attr5,
                successUrl: '',
                failureUrl: '',
                preauthFlag: 'N',
                billCurrency: 'UAH',
                encoding: '',
              },
              token: {
                tokenFlag: 'N',
                returnToken: 'N',
                token: '',
                cardMask: '',
                otherPaymentMethods: 'Y',
                sellerToken: '',
              },
              payer: { lang: 'uk' },
              style: {
                type: 'light',
                logo: '',
                backgroundColorHeader: '',
                backgroundColorButtons: '',
                colorTextAndIcons: '',
                borderColorList: '',
                bcMain: '',
              },
            },
            'frame'
          );
          PG.create();
          PG.openPaymentArea();
        };
      })
      .catch((err) => console.error('Portmone init error:', err));
  }
  fetch(url + 'limbo', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
    },
    body: JSON.stringify({
      query: `
                    =>payment_getPaymentActiveMethods ~;
                `,
    }),
  }).then((resp) => {
    resp &&
      resp.json().then((json) => {
        if (Array.isArray(json)) {
          if (json.length == 1) {
            init(json[0].id, json[0].name);
            return;
          }
          json.map((paymentMethod) => {
            $paymentForm.innerHTML += `<button name="${paymentMethod.name}" class="payment-button-${paymentMethod.name}" data-method="${paymentMethod.id}" id="method_${paymentMethod.id}">${paymentMethod.name}</button>`;
          });
        }
        $paymentForm.addEventListener('click', (e) => {
          init(e.target.dataset.method, e.target.name);
        });
        /*
         */
      });
  });
})();