aiform_dev/frontend/src/components/form/generateConfirmationFormHTML.ts

// Функция генерации HTML формы подтверждения заявления
// Основана на структуре из n8n Code node "Mini-app Подтверждение данных"

export function generateConfirmationFormHTML(data: any): string {
  // Данные уже нормализованы в компоненте, используем их напрямую
  const caseObj = data.case || {};
  
  // Извлекаем SMS данные
  const smsInputData = {
    prefix: data.sms_meta?.prefix || '',
    session_token: data.session_token || '',
    telegram_id: data.telegram_id || '',
    claim_id: data.case?.meta?.claim_id || '',
    unified_id: data.case?.meta?.unified_id || '',
    user_id: data.case?.meta?.user_id || '',
    status: data.case?.meta?.status || '',
  };

  // Извлекаем SMS данные
  const smsInputData = {
    prefix: raw.prefix || '',
    session_token: raw.session_token || '',
    telegram_id: raw.telegram_id || '',
    claim_id: raw.claim_id || '',
    unified_id: (raw.propertyName && raw.propertyName.meta && raw.propertyName.meta.unified_id) || '',
    user_id: (raw.propertyName && raw.propertyName.meta && raw.propertyName.meta.user_id) || '',
    status: (raw.propertyName && raw.propertyName.meta && raw.propertyName.meta.status) || '',
  };

  // Утилиты
  function safeGet(...keys: any[]): any {
    for (const k of keys) {
      if (k === undefined || k === null) continue;
      if (typeof k === 'object') {
        if (Object.keys(k).length) return k;
        continue;
      }
      const s = String(k).trim();
      if (s !== '') return k;
    }
    return '';
  }

  function tryParseJSON(x: any): any {
    try {
      return typeof x === 'string' ? JSON.parse(x) : x;
    } catch {
      return null;
    }
  }

  function escapeHtml(str: any): string {
    if (str === undefined || str === null) return '';
    return String(str)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  // Нормализация денежной суммы
  function normalizeMoney(rawValue: any): number | null {
    if (!rawValue) return null;
    let s = String(rawValue);
    s = s.replace(/\s+/g, '');
    s = s.replace(/руб(лей|ль|\.)?/gi, '');
    s = s.replace(/₽|р\.|р$/gi, '');
    s = s.replace(/[^0-9,.-]/g, '');
    s = s.replace(',', '.');
    if (!/^-?[0-9]+(\.[0-9]{1,2})?$/.test(s)) return null;
    const result = parseFloat(s);
    return result > 0 ? result : null;
  }

  // Базовые схемы
  const baseUser = {
    firstname: null,
    secondname: null,
    lastname: null,
    mobile: null,
    email: null,
    tgid: null,
    birthday: null,
    birthplace: null,
    mailingstreet: null,
    inn: null,
  };

  const baseProject = {
    category: null,
    direction: null,
    agrprice: null,
    subject: null,
    agrdate: null,
    startdate: null,
    finishdate: null,
    period_text: null,
    description: null,
    reason: null,
  };

  const baseOffender = {
    accountname: null,
    address: null,
    email: null,
    website: null,
    phone: null,
    inn: null,
    ogrn: null,
  };

  // Данные уже нормализованы, используем их напрямую
  // Убеждаемся, что есть базовые структуры
  if (!caseObj.offenders || !caseObj.offenders.length) {
    caseObj.offenders = [Object.assign({}, baseOffender)];
  }
  if (!caseObj.user) caseObj.user = Object.assign({}, baseUser, caseObj.user || {});
  if (!caseObj.project) caseObj.project = Object.assign({}, baseProject, caseObj.project || {});
  if (!caseObj.meta) caseObj.meta = {};
  if (!caseObj.attachments) caseObj.attachments = [];

  // Сервисные поля
  const sessionToken = String(safeGet(caseObj.meta?.session_token, data.session_token, ''));
  const telegramId = String(safeGet(caseObj.user?.tgid, data.telegram_id, ''));

  const smsMetaData = {
    session_token: String(safeGet(smsInputData.session_token, sessionToken, '')),
    prefix: String(safeGet(smsInputData.prefix, '')),
    telegram_id: String(safeGet(smsInputData.telegram_id, telegramId, '')),
    claim_id: String(safeGet(smsInputData.claim_id, '')),
    unified_id: String(safeGet(smsInputData.unified_id, '')),
    user_id: String(safeGet(smsInputData.user_id, '')),
  };

  // Безопасно встраиваем данные в HTML
  let caseJson = JSON.stringify({
    case: caseObj,
    session_token: sessionToken,
    telegram_id: telegramId,
    token: data.token || '',
    sms_meta: smsMetaData,
  });
  caseJson = caseJson.replace(/</g, '\\u003c');

  // HTML шаблон (используем упрощенную версию из предоставленного кода)
  // Полный код слишком большой, поэтому используем ключевые части
  const html = `<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Подтверждение данных</title>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<style>
  *{box-sizing:border-box}
  body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    margin:0;padding:0;min-height:100vh;
    color:#1f2937;
  }
  .wrap{
    max-width:1400px;margin:0 auto;padding:20px;
    min-height:100vh;display:flex;flex-direction:column;
  }
  .header{
    text-align:center;margin-bottom:30px;color:white;
  }
  .header h1{
    font-size:28px;font-weight:700;margin:0 0 8px;
    text-shadow:0 2px 4px rgba(0,0,0,0.3);
  }
  .header p{
    font-size:16px;opacity:0.9;margin:0;
  }
  .statement-container{
    background:#fff;border-radius:16px;padding:32px;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
    line-height:1.8;font-size:15px;
    max-width:800px;margin:0 auto;
  }
  .statement-text{
    font-family:'Times New Roman',serif;
    text-align:justify;
  }
  .inline-field{
    display:inline-block;min-width:120px;max-width:300px;
    border:2px solid #e5e7eb;border-radius:6px;
    padding:4px 8px;margin:0 2px;background:#fff;
    font-size:inherit;font-family:inherit;
    transition:all 0.2s ease;
    vertical-align:baseline;
  }
  .inline-field:focus{
    outline:none;border-color:#667eea;
    box-shadow:0 0 0 2px rgba(102,126,234,0.1);
    background:#f8fafc;
  }
  .inline-field:hover{border-color:#d1d5db}
  .inline-field.large{
    min-width:200px;max-width:500px;
  }
  .inline-field.full-width{
    display:block;width:100%;min-width:auto;max-width:none;
    margin:8px 0;padding:8px 12px;
  }
  .readonly-field{
    background-color:#f9fafb !important;
    border-color:#d1d5db !important;
    color:#6b7280 !important;
    cursor:not-allowed !important;
    font-weight:500;
  }
  .date-field{
    min-width:140px !important;
    max-width:160px !important;
    cursor:pointer;
  }
  .section-break{
    margin:24px 0;border-top:1px solid #e5e7eb;
    padding-top:16px;
  }
  .buttons{
    display:flex;gap:12px;margin-top:24px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .btn{
    appearance:none;border:0;border-radius:12px;
    padding:12px 24px;font-weight:600;cursor:pointer;
    font-size:14px;transition:all 0.2s ease;
    display:flex;align-items:center;gap:8px;
    text-decoration:none;justify-content:center;
    min-width:120px;
  }
  .btn:disabled{
    opacity:0.6;cursor:not-allowed;
  }
  .btn-primary{
    background:linear-gradient(135deg,#667eea,#764ba2);
    color:white;box-shadow:0 4px 12px rgba(102,126,234,0.4);
  }
  .btn-primary:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(102,126,234,0.5);
  }
  .btn-secondary{
    background:#f3f4f6;color:#374151;
    border:1px solid #d1d5db;
  }
  .btn-secondary:hover:not(:disabled){
    background:#e5e7eb;transform:translateY(-1px);
  }
  @media(max-width:768px){
    .wrap{padding:16px}
    .buttons{flex-direction:column}
    .btn{width:100%}
    .header h1{font-size:24px}
  }
</style>
</head>
<body>
<div class="wrap">
  <div class="header">
    <h1>📋 Редактирование заявления</h1>
    <p>Проверьте и при необходимости отредактируйте все поля</p>
  </div>
  
  <div class="statement-container fade-in">
    <div id="statement" class="statement-text">Загрузка…</div>
    
    <div class="buttons" style="margin-top:32px;justify-content:center">
      <button id="confirmBtn" class="btn btn-primary">
        ✅ Подтвердить и отправить
      </button>
    </div>
    
    <div id="status" style="margin-top:16px"></div>
  </div>
</div>

<script id="case-data" type="application/json">${caseJson}</script>
<script>
(function(){
  console.log('=== СКРИПТ ЗАПУЩЕН ===');
  
  function getData(){
    try {
      var dataEl = document.getElementById('case-data');
      if (!dataEl) {
        console.error('Элемент #case-data не найден!');
        return {};
      }
      var textContent = dataEl.textContent || '{}';
      var parsed = JSON.parse(textContent);
      console.log('Parsed data:', parsed);
      return parsed;
    } catch(e) {
      console.error('ОШИБКА ПАРСИНГА JSON:', e);
      return {};
    }
  }
  
  function esc(s){
    if (s === null || s === undefined) return '';
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;');
  }
  
  function createField(root, key, value, placeholder, index) {
    var id = 'field_' + root + '_' + key + '_' + (index !== undefined ? index + '_' : '') + Math.random().toString(36).slice(2);
    var dataIndex = index !== undefined ? ' data-index="' + index + '"' : '';
    var extra = '';
    
    if (key === 'inn') {
      var isIndividual = (root === 'user');
      if (isIndividual) {
        extra = ' inputmode="numeric" pattern="[0-9]{12}" maxlength="12" autocomplete="off"';
      } else {
        extra = ' inputmode="numeric" pattern="[0-9]{10,12}" maxlength="12" autocomplete="off"';
      }
    }
    
    var fieldHtml = '<input class="inline-field bind" data-root="' + esc(root) + '" data-key="' + esc(key) + '"' + dataIndex +
      ' id="' + id + '" value="' + esc(value || '') + '" placeholder="' + esc(placeholder || '') + '"' + extra + ' />';
    return fieldHtml;
  }
  
  function createReadonlyField(root, key, value) {
    var id = 'field_' + root + '_' + key + '_readonly_' + Math.random().toString(36).slice(2);
    return '<input class="inline-field readonly-field" data-root="' + esc(root) + '" data-key="' + esc(key) + '" id="' + id + '" value="' + esc(value || '') + '" readonly />';
  }
  
  function createDateField(root, key, value) {
    var id = 'field_' + root + '_' + key + '_' + Math.random().toString(36).slice(2);
    var dateValue = '';
    if (value) {
      var cleanValue = String(value).trim();
      if (cleanValue.match(/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/)) {
        dateValue = cleanValue;
      } else if (cleanValue.match(/^[0-9]{2}\.[0-9]{2}\.[0-9]{4}$/)) {
        var parts = cleanValue.split('.');
        dateValue = parts[2] + '-' + parts[1] + '-' + parts[0];
      }
    }
    return '<input type="date" class="inline-field bind date-field" data-root="' + esc(root) + '" data-key="' + esc(key) + '" id="' + id + '" value="' + esc(dateValue) + '" />';
  }
  
  function createMoneyField(root, key, value) {
    var id = 'field_' + root + '_' + key + '_' + Math.random().toString(36).slice(2);
    return '<div style="display: flex; align-items: center; gap: 8px;">' +
      '<input class="inline-field bind money-field" data-root="' + esc(root) + '" data-key="' + esc(key) + '"' +
      ' id="' + id + '" value="' + esc(value || '') + '"' +
      ' inputmode="decimal" pattern="[0-9]*[.,]?[0-9]*" autocomplete="off" />' +
      '<span style="color: #6b7280; font-size: 14px;">рублей</span>' +
      '</div>';
  }
  
  function createTextarea(root, key, value) {
    var id = 'field_' + root + '_' + key + '_' + Math.random().toString(36).slice(2);
    return '<textarea class="inline-field bind full-width" data-root="' + esc(root) + '" data-key="' + esc(key) + '" id="' + id + '">' + esc(value || '') + '</textarea>';
  }
  
  var injected = getData();
  var state = (injected && injected.case) ? injected.case : { user: {}, project: {}, offenders: [{}], meta: {} };
  
  function renderStatement() {
    var u = state.user || {};
    var o = (state.offenders && state.offenders[0]) || {};
    var p = state.project || {};
    
    var html = '';
    
    html += '<div style="text-align:center;margin-bottom:32px">';
    html += '<h2 style="font-size:20px;margin:0 0 16px;color:#1f2937">В МОО «Клиентправ»</h2>';
    html += '<p style="margin:0;color:#6b7280">help@clientright.ru</p>';
    html += '</div>';
    
    html += '<p><strong>Заявитель:</strong> ';
    html += createField('user', 'lastname', u.lastname, 'Фамилия (обязательно)');
    html += ' ';
    html += createField('user', 'firstname', u.firstname, 'Имя (обязательно)');
    html += ' ';
    html += createField('user', 'secondname', u.secondname, 'Отчество');
    html += '</p>';
    
    html += '<p><strong>Дата рождения:</strong> ';
    html += createDateField('user', 'birthday', u.birthday);
    html += '</p>';
    
    html += '<p><strong>Место рождения:</strong> ';
    html += createField('user', 'birthplace', u.birthplace, 'Место рождения (обязательно)');
    html += '</p>';
    
    html += '<p><strong>ИНН:</strong> ';
    html += createField('user', 'inn', u.inn, '12-значный ИНН (обязательно)');
    html += '</p>';
    
    html += '<p><strong>Адрес:</strong> ';
    html += createField('user', 'mailingstreet', u.mailingstreet, 'Адрес регистрации как в паспорте (обязательно)');
    html += '</p>';
    
    html += '<p><strong>Телефон:</strong> ';
    html += createReadonlyField('user', 'mobile', u.mobile);
    html += '</p>';
    
    html += '<p><strong>E-mail:</strong> ';
    html += createField('user', 'email', u.email, 'email@example.com');
    html += '</p>';
    
    html += '<div class="section-break"></div>';
    
    html += '<h3 style="font-size:16px;margin:0 0 16px;color:#1f2937;text-align:center">ЗАЯВЛЕНИЕ</h3>';
    
    html += '<p><strong>Тема обращения:</strong> ';
    html += createReadonlyField('project', 'category', p.category);
    html += '</p>';
    
    html += '<p><strong>Предмет договора:</strong> ';
    html += createField('project', 'subject', p.subject, 'Название договора или предмет услуг');
    html += '</p>';
    
    html += '<p><strong>Дата события / заключения договора:</strong> ';
    html += createDateField('project', 'agrdate', p.agrdate);
    html += '</p>';
    
    html += '<p><strong>Сумма оплаты / стоимость:</strong> ';
    html += createMoneyField('project', 'agrprice', p.agrprice);
    html += '</p>';
    
    html += '<div class="section-break"></div>';
    
    html += '<h4 style="font-size:14px;margin:16px 0 12px;color:#1f2937">Контрагенты / участники:</h4>';
    
    for (var i = 0; i < state.offenders.length; i++) {
      var offender = state.offenders[i];
      html += '<div style="margin-bottom:16px;padding:12px;border:1px solid #e5e7eb;border-radius:8px;">';
      html += '<p><strong>Наименование:</strong> ';
      html += createField('offender', 'accountname', offender.accountname, 'Название организации', i);
      html += '</p>';
      html += '<p><strong>ИНН:</strong> ';
      html += createField('offender', 'inn', offender.inn, 'ИНН организации (10 или 12 цифр)', i);
      html += '</p>';
      html += '<p><strong>ОГРН:</strong> ';
      html += createField('offender', 'ogrn', offender.ogrn, 'ОГРН', i);
      html += '</p>';
      html += '<p><strong>Адрес:</strong> ';
      html += createField('offender', 'address', offender.address, 'Адрес', i);
      html += '</p>';
      html += '</div>';
    }
    
    html += '<div class="section-break"></div>';
    
    html += '<p><strong>Причина обращения:</strong> ';
    html += createField('project', 'reason', p.reason, 'Можете уточнить или изменить причину обращения');
    html += '</p>';
    
    html += '<p><strong>Описание проблемы:</strong></p>';
    html += createTextarea('project', 'description', p.description);
    
    var statementEl = document.getElementById('statement');
    if (statementEl) {
      statementEl.innerHTML = html;
      attachBindings();
    }
  }
  
  function attachBindings() {
    var fields = document.querySelectorAll('.bind');
    Array.prototype.forEach.call(fields, function(field) {
      field.addEventListener('input', function() {
        var root = this.getAttribute('data-root');
        var key = this.getAttribute('data-key');
        var value = this.type === 'checkbox' ? this.checked : this.value;
        
        if (root === 'user') {
          state.user = state.user || {};
          state.user[key] = value;
        } else if (root === 'project') {
          state.project = state.project || {};
          state.project[key] = value;
        } else if (root === 'offender') {
          var index = parseInt(this.getAttribute('data-index') || '0', 10);
          state.offenders[index] = state.offenders[index] || {};
          state.offenders[index][key] = value;
        }
      });
    });
  }
  
  function initialize() {
    renderStatement();
    
    var confirmBtn = document.getElementById('confirmBtn');
    if (confirmBtn) {
      confirmBtn.addEventListener('click', function(e) {
        e.preventDefault();
        window.parent.postMessage({
          type: 'claim_confirmed',
          data: {
            user: state.user,
            project: state.project,
            offenders: state.offenders,
            meta: state.meta
          },
          originalData: injected
        }, '*');
      });
    }
    
    window.parent.postMessage({type: 'claim_form_loaded'}, '*');
  }
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initialize);
  } else {
    initialize();
  }
})();
</script>
</body>
</html>`;

  return html;
}