export function createProcessTab(container: HTMLElement, processes: { name: string, publicData: Record<string, any> }[]): HTMLElement {
  container.id = 'process-tab';
  container.style.display = 'block';
  container.style.cssText = 'padding: 1.5rem;';

  const title = document.createElement('h2');
  title.textContent = 'Processes';
  title.style.cssText = 'font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;';
  container.appendChild(title);

  processes.forEach(proc => {
    const card = document.createElement('div');
    card.style.cssText = 'margin-bottom: 1rem; padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; background: #fff;';

    const nameEl = document.createElement('h3');
    nameEl.textContent = proc.name;
    nameEl.style.cssText = 'font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem;';
    card.appendChild(nameEl);

    const dataList = document.createElement('div');
    for (const [key, value] of Object.entries(proc.publicData)) {
      const item = document.createElement('div');
      item.style.cssText = 'margin-bottom: 0.5rem;';

      const label = document.createElement('strong');
      label.textContent = key + ': ';
      item.appendChild(label);

      // Let's trim the quotes
      const trimmed = value.replace(/^'|'$/g, '');
      let parsed;
      try {
        parsed = JSON.parse(trimmed);
      } catch (_) {
        parsed = trimmed;
      }

      if (parsed && typeof parsed === 'object') {
        const saveBtn = document.createElement('button');
        saveBtn.textContent = '💾 Save as JSON';
        saveBtn.style.cssText = 'margin-left: 0.5rem; padding: 0.25rem 0.5rem; border: 1px solid #ccc; border-radius: 0.375rem; background: #f0f0f0; cursor: pointer;';
        saveBtn.onclick = () => {
          const blob = new Blob([JSON.stringify(parsed, null, 2)], { type: 'application/json' });
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = `${proc.name}_${key}.json`;
          a.click();
          URL.revokeObjectURL(url);
        };
        item.appendChild(saveBtn);
      } else {
        const span = document.createElement('span');
        span.textContent = String(parsed);
        item.appendChild(span);
      }

      dataList.appendChild(item);
    }

    card.appendChild(dataList);
    container.appendChild(card);
  });

  return container;
}