script.js

'use strict';

const STORAGE_KEYS = {
  lastText: 'qrCodeStudio:lastText',
  theme: 'qrCodeStudio:theme'
};

const elements = {
  html: document.documentElement,
  themeMeta: document.querySelector('meta[name="theme-color"]'),
  themeToggle: document.getElementById('themeToggle'),
  qrForm: document.getElementById('qrForm'),
  qrText: document.getElementById('qrText'),
  charCounter: document.getElementById('charCounter'),
  inputError: document.getElementById('inputError'),
  clearButton: document.getElementById('clearButton'),
  downloadButton: document.getElementById('downloadButton'),
  copyButton: document.getElementById('copyButton'),
  qrcode: document.getElementById('qrcode'),
  emptyState: document.getElementById('emptyState'),
  statusBadge: document.getElementById('statusBadge'),
  toastContainer: document.getElementById('toastContainer')
};

let qrCodeInstance = null;
let currentContent = '';

function getPreferredTheme() {
  const savedTheme = localStorage.getItem(STORAGE_KEYS.theme);
  if (savedTheme === 'light' || savedTheme === 'dark') return savedTheme;
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

function applyTheme(theme) {
  const isDark = theme === 'dark';
  elements.html.dataset.theme = theme;
  elements.themeToggle.setAttribute('aria-label', isDark ? 'Ativar modo claro' : 'Ativar modo escuro');
  elements.themeMeta.setAttribute('content', isDark ? '#0f1320' : '#f7f8fc');
}

function toggleTheme() {
  const nextTheme = elements.html.dataset.theme === 'dark' ? 'light' : 'dark';
  localStorage.setItem(STORAGE_KEYS.theme, nextTheme);
  applyTheme(nextTheme);
  showToast('Tema atualizado', `Modo ${nextTheme === 'dark' ? 'escuro' : 'claro'} ativado.`, 'success');
}

function updateCounter() {
  elements.charCounter.textContent = `${elements.qrText.value.length}/1000`;
}

function setInputError(message = '') {
  elements.inputError.textContent = message;
  elements.qrText.classList.toggle('is-invalid', Boolean(message));
  elements.qrText.setAttribute('aria-invalid', String(Boolean(message)));
}

function validateContent(value) {
  const normalized = value.trim();
  if (!normalized) return 'Digite um texto ou uma URL para continuar.';
  if (normalized.length > 1000) return 'O conteúdo deve ter no máximo 1000 caracteres.';
  return '';
}

function setPreviewState(hasQrCode) {
  elements.emptyState.hidden = hasQrCode;
  elements.qrcode.hidden = !hasQrCode;
  elements.downloadButton.disabled = !hasQrCode;
  elements.copyButton.disabled = !hasQrCode;
  elements.statusBadge.textContent = hasQrCode ? 'Pronto' : 'Aguardando';
  elements.statusBadge.classList.toggle('is-ready', hasQrCode);
}

function generateQrCode(rawContent, { silent = false } = {}) {
  const error = validateContent(rawContent);
  if (error) {
    setInputError(error);
    elements.qrText.focus();
    if (!silent) showToast('Não foi possível gerar', error, 'error');
    return false;
  }

  if (typeof QRCode === 'undefined') {
    const message = 'A biblioteca de geração não foi carregada. Verifique sua conexão e tente novamente.';
    setInputError(message);
    showToast('Erro de carregamento', message, 'error');
    return false;
  }

  const content = rawContent.trim();
  setInputError();
  elements.qrcode.innerHTML = '';

  try {
    qrCodeInstance = new QRCode(elements.qrcode, {
      text: content,
      width: 256,
      height: 256,
      colorDark: '#111827',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H
    });

    currentContent = content;
    localStorage.setItem(STORAGE_KEYS.lastText, content);
    setPreviewState(true);
    if (!silent) showToast('QR Code gerado', 'A imagem está pronta para baixar ou compartilhar.', 'success');
    return true;
  } catch (error) {
    console.error('Erro ao gerar QR Code:', error);
    setPreviewState(false);
    showToast('Conteúdo incompatível', 'Tente reduzir o tamanho do texto informado.', 'error');
    return false;
  }
}

function clearStudio() {
  elements.qrText.value = '';
  elements.qrcode.innerHTML = '';
  currentContent = '';
  qrCodeInstance = null;
  localStorage.removeItem(STORAGE_KEYS.lastText);
  setInputError();
  updateCounter();
  setPreviewState(false);
  elements.qrText.focus();
  showToast('Conteúdo limpo', 'O campo e a visualização foram redefinidos.', 'success');
}

function getQrCanvas() {
  const canvas = elements.qrcode.querySelector('canvas');
  if (canvas) return canvas;

  const image = elements.qrcode.querySelector('img');
  if (!image) return null;

  const output = document.createElement('canvas');
  output.width = image.naturalWidth || 256;
  output.height = image.naturalHeight || 256;
  const context = output.getContext('2d');
  context.fillStyle = '#ffffff';
  context.fillRect(0, 0, output.width, output.height);
  context.drawImage(image, 0, 0, output.width, output.height);
  return output;
}

function downloadQrCode() {
  const canvas = getQrCanvas();
  if (!canvas) {
    showToast('Download indisponível', 'Gere um QR Code antes de baixar.', 'error');
    return;
  }

  const link = document.createElement('a');
  const timestamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-');
  link.download = `qr-code-studio-${timestamp}.png`;
  link.href = canvas.toDataURL('image/png');
  link.click();
  showToast('Download iniciado', 'O QR Code foi exportado em PNG.', 'success');
}

async function copyText() {
  if (!currentContent) {
    showToast('Nada para copiar', 'Gere um QR Code antes de copiar o conteúdo.', 'error');
    return;
  }

  try {
    await navigator.clipboard.writeText(currentContent);
    showToast('Texto copiado', 'O conteúdo foi enviado para a área de transferência.', 'success');
  } catch (error) {
    const fallback = document.createElement('textarea');
    fallback.value = currentContent;
    fallback.style.position = 'fixed';
    fallback.style.opacity = '0';
    document.body.appendChild(fallback);
    fallback.select();
    const copied = document.execCommand('copy');
    fallback.remove();
    showToast(copied ? 'Texto copiado' : 'Falha ao copiar', copied ? 'O conteúdo foi copiado.' : 'Copie o conteúdo manualmente.', copied ? 'success' : 'error');
  }
}

function showToast(title, message, type = 'success') {
  const toast = document.createElement('div');
  toast.className = `toast ${type}`;
  toast.setAttribute('role', type === 'error' ? 'alert' : 'status');
  toast.innerHTML = `<span aria-hidden="true">${type === 'error' ? '!' : '✓'}</span><p><strong>${title}</strong>${message}</p>`;
  elements.toastContainer.appendChild(toast);

  window.setTimeout(() => {
    toast.classList.add('is-leaving');
    toast.addEventListener('animationend', () => toast.remove(), { once: true });
  }, 3200);
}

function restoreLastContent() {
  const lastText = localStorage.getItem(STORAGE_KEYS.lastText);
  if (!lastText) return;
  elements.qrText.value = lastText;
  updateCounter();
  generateQrCode(lastText, { silent: true });
}

function initialize() {
  applyTheme(getPreferredTheme());
  updateCounter();
  setPreviewState(false);
  restoreLastContent();

  elements.themeToggle.addEventListener('click', toggleTheme);
  elements.qrForm.addEventListener('submit', (event) => {
    event.preventDefault();
    generateQrCode(elements.qrText.value);
  });
  elements.qrText.addEventListener('input', () => {
    updateCounter();
    if (elements.inputError.textContent) setInputError();
  });
  elements.qrText.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault();
      generateQrCode(elements.qrText.value);
    }
  });
  elements.clearButton.addEventListener('click', clearStudio);
  elements.downloadButton.addEventListener('click', downloadQrCode);
  elements.copyButton.addEventListener('click', copyText);
}

document.addEventListener('DOMContentLoaded', initialize);