script.js

// JSON Formatter & Validator - Client-Side
// 100% runs in browser, no data sent to server, free GitHub Pages deployment

const inputTextarea = document.getElementById('input');
const outputTextarea = document.getElementById('output');
const formatBtn = document.getElementById('formatBtn');
const validateBtn = document.getElementById('validateBtn');
const minifyBtn = document.getElementById('minifyBtn');
const copyBtn = document.getElementById('copyBtn');
const clearBtn = document.getElementById('clearBtn');

const charCountEl = document.getElementById('charCount');
const indentCountEl = document.getElementById('indentCount');
const errorCountEl = document.getElementById('errorCount');

// Default indent
let indentSize = 2;

// Format JSON with indentation
function formatJSON(text, indent = 2) {
  try {
    const parsed = JSON.parse(text);
    return JSON.stringify(parsed, null, indent);
  } catch (e) {
    return null; // Invalid JSON
  }
}

// Minify JSON
function minifyJSON(text) {
  try {
    const parsed = JSON.parse(text);
    return JSON.stringify(parsed);
  } catch (e) {
    return null;
  }
}

// Validate JSON
function validateJSON(text) {
  try {
    JSON.parse(text);
    return { valid: true, errors: [] };
  } catch (e) {
    return { valid: false, errors: [e.message] };
  }
}

// Update output and stats
function updateOutput(formatted) {
  outputTextarea.value = formatted;
  updateStats(formatted);
}

// Update statistics
function updateStats(formatted) {
  const charCount = formatted.length;
  const errors = (formatted.match(/"/g) || []).length; // rough estimate
  charCountEl.textContent = charCount;
  errorCountEl.textContent = errors % 2 === 0 ? 0 : 1; // simplified
}

// Format button handler
formatBtn.addEventListener('click', () => {
  const text = inputTextarea.value.trim();
  if (!text) return;

  const formatted = formatJSON(text, indentSize);
  if (formatted) {
    updateOutput(formatted);
  } else {
    outputTextarea.value = '❌ Invalid JSON';
    outputTextarea.style.color = 'var(--error)';
  }
});

// Validate button handler
validateBtn.addEventListener('click', () => {
  const text = inputTextarea.value.trim();
  if (!text) return;

  const result = validateJSON(text);
  if (result.valid) {
    outputTextarea.value = '✅ Valid JSON';
    outputTextarea.style.color = 'var(--success)';
    updateStats(text);
  } else {
    outputTextarea.value = `❌ Invalid JSON: ${result.errors[0]}`;
    outputTextarea.style.color = 'var(--error)';
  }
});

// Minify button handler
minifyBtn.addEventListener('click', () => {
  const text = inputTextarea.value.trim();
  if (!text) return;

  const minified = minifyJSON(text);
  if (minified) {
    updateOutput(minified);
  } else {
    outputTextarea.value = '❌ Invalid JSON';
    outputTextarea.style.color = 'var(--error)';
  }
});

// Copy output to clipboard
copyBtn.addEventListener('click', () => {
  const text = outputTextarea.value;
  if (!text || text.startsWith('❌') || text.startsWith('✅')) return;

  navigator.clipboard.writeText(text).then(() => {
    const originalText = copyBtn.textContent;
    copyBtn.textContent = 'Copied!';
    setTimeout(() => { copyBtn.textContent = originalText; }, 2000);
  });
});

// Clear all
clearBtn.addEventListener('click', () => {
  inputTextarea.value = '';
  outputTextarea.value = '';
  charCountEl.textContent = '0';
  errorCountEl.textContent = '0';
  outputTextarea.style.color = '';
});

// Indent size control (simple UI)
indentCountEl.closest('.stat').addEventListener('click', (e) => {
  const target = e.target.className === 'stat-number' || e.target.parentNode.className === 'stat-number';
  if (target) {
    indentSize = (indentSize % 4) + 1; // cycle 1, 2, 3, 4
    indentCountEl.textContent = indentSize;
  }
});

// Auto-resize textareas
[inputTextarea, outputTextarea].forEach(textarea => {
  textarea.addEventListener('input', () => {
    textarea.style.height = 'auto';
    textarea.style.height = Math.max(textarea.scrollHeight, 120) + 'px';
  });
});

// Initial focus
inputTextarea.focus();