app.js

const els = {
  idInstance: document.getElementById('idInstance'),
  apiTokenInstance: document.getElementById('apiTokenInstance'),
  messageChatNumber: document.getElementById('messageChatNumber'),
  messageChatSuffix: document.getElementById('messageChatSuffix'),
  messageText: document.getElementById('messageText'),
  fileChatNumber: document.getElementById('fileChatNumber'),
  fileChatSuffix: document.getElementById('fileChatSuffix'),
  fileUrl: document.getElementById('fileUrl'),
  fileName: document.getElementById('fileName'),
  getSettingsBtn: document.getElementById('getSettingsBtn'),
  getStateInstanceBtn: document.getElementById('getStateInstanceBtn'),
  sendMessageBtn: document.getElementById('sendMessageBtn'),
  sendFileByUrlBtn: document.getElementById('sendFileByUrlBtn'),
  responseOutput: document.getElementById('responseOutput'),
  statusBadge: document.getElementById('statusBadge'),
  lastAction: document.getElementById('lastAction'),
  copyBtn: document.getElementById('copyBtn'),
  clearBtn: document.getElementById('clearBtn')
};

const actionButtons = [
  els.getSettingsBtn,
  els.getStateInstanceBtn,
  els.sendMessageBtn,
  els.sendFileByUrlBtn
];

function pretty(value) {
  return JSON.stringify(value, null, 2);
}

function setStatus(text, type = 'idle') {
  els.statusBadge.textContent = text;
  els.statusBadge.className = 'badge';

  if (type === 'ok') {
    els.statusBadge.classList.add('ok');
  }

  if (type === 'error') {
    els.statusBadge.classList.add('error');
  }
}

function setLoading(isLoading, label = 'Загрузка...') {
  actionButtons.forEach((btn) => {
    btn.disabled = isLoading;
  });

  if (isLoading) {
    setStatus(label);
  }
}

function updateResponse(payload) {
  els.responseOutput.textContent = pretty(payload);
}

function updateLastAction(actionName) {
  const now = new Date();
  els.lastAction.textContent = `Последнее действие: ${actionName} · ${now.toLocaleTimeString()}`;
}

function getCredentials() {
  const idInstance = els.idInstance.value.trim();
  const apiTokenInstance = els.apiTokenInstance.value.trim();

  if (!idInstance || !apiTokenInstance) {
    throw new Error('Введите idInstance и ApiTokenInstance');
  }

  return { idInstance, apiTokenInstance };
}

function buildChatId(number, suffix) {
  const cleanNumber = number.trim().replace(/\s+/g, '');

  if (!cleanNumber) {
    throw new Error('Введите номер чата');
  }

  return `${cleanNumber}${suffix}`;
}

function buildUrl(path) {
  const { idInstance, apiTokenInstance } = getCredentials();

  if (idInstance.length < 4) {
    throw new Error('idInstance должен содержать минимум 4 символа');
  }

  const apiHost = `${idInstance.slice(0, 4)}.api.greenapi.com`;
  return `https://${apiHost}/waInstance${idInstance}/${path}/${apiTokenInstance}`;
}

function extractFileName(url) {
  try {
    const parsed = new URL(url);
    const rawName = parsed.pathname.split('/').filter(Boolean).pop();

    if (!rawName || !rawName.includes('.')) {
      return 'downloaded-file';
    }

    return rawName;
  } catch {
    return 'downloaded-file';
  }
}

let isFileNameEditedManually = false;

els.fileUrl.addEventListener('input', () => {
  if (!isFileNameEditedManually) {
    els.fileName.value = extractFileName(els.fileUrl.value.trim());
  }
});

els.fileName.addEventListener('input', () => {
  isFileNameEditedManually = els.fileName.value.trim() !== '';
});

async function callGreenApi(path, method = 'GET', body) {
  const url = buildUrl(path);
  const options = {
    method,
    headers: {
      'Content-Type': 'application/json'
    }
  };

  if (body !== undefined) {
    options.body = JSON.stringify(body);
  }

  const response = await fetch(url, options);
  const rawText = await response.text();

  let data;
  try {
    data = JSON.parse(rawText);
  } catch {
    data = rawText;
  }

  return {
    ok: response.ok,
    status: response.status,
    data
  };
}

async function handleRequest(actionName, path, method, bodyBuilder) {
  try {
    setLoading(true, `${actionName}...`);
    updateLastAction(actionName);

    const body = bodyBuilder ? bodyBuilder() : undefined;
    const result = await callGreenApi(path, method, body);

    updateResponse(result.data);

    if (result.ok) {
      setStatus(`Успешно: ${result.status}`, 'ok');
    } else {
      setStatus(`Ошибка: ${result.status}`, 'error');
    }
  } catch (error) {
    updateResponse({
      error: error.message
    });
    setStatus('Ошибка запроса', 'error');
  } finally {
    setLoading(false);
  }
}

els.getSettingsBtn.addEventListener('click', () => {
  handleRequest('getSettings', 'getSettings', 'GET');
});

els.getStateInstanceBtn.addEventListener('click', () => {
  handleRequest('getStateInstance', 'getStateInstance', 'GET');
});

els.sendMessageBtn.addEventListener('click', () => {
  handleRequest('sendMessage', 'sendMessage', 'POST', () => {
    const number = els.messageChatNumber.value;
    const suffix = els.messageChatSuffix.value;
    const message = els.messageText.value.trim();

    if (!message) {
      throw new Error('Для sendMessage нужно заполнить message');
    }

    return {
      chatId: buildChatId(number, suffix),
      message
    };
  });
});

els.sendFileByUrlBtn.addEventListener('click', () => {
  handleRequest('sendFileByUrl', 'sendFileByUrl', 'POST', () => {
    const number = els.fileChatNumber.value;
    const suffix = els.fileChatSuffix.value;
    const urlFile = els.fileUrl.value.trim();
    const fileName = els.fileName.value.trim() || extractFileName(urlFile);

    if (!urlFile) {
      throw new Error('Для sendFileByUrl нужно заполнить fileUrl');
    }

    if (!fileName) {
      throw new Error('Для sendFileByUrl нужно указать fileName');
    }

    return {
      chatId: buildChatId(number, suffix),
      urlFile,
      fileName,
      caption: 'File from GREEN-API test page'
    };
  });
});

els.copyBtn.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(els.responseOutput.textContent);
    setStatus('JSON скопирован', 'ok');
  } catch {
    setStatus('Не удалось скопировать JSON', 'error');
  }
});

els.clearBtn.addEventListener('click', () => {
  updateResponse({ message: 'Поле ответа очищено' });
  setStatus('Поле очищено');
  els.lastAction.textContent = 'Последнее действие: нет';
});