script.js

const STORAGE_KEYS = {
  carrinho: "carrinho",
  usuario: "usuarioLogado",
  usuarios: "usuariosSmartZone",
  compras: "historicoCompras"
};

let carrinho = JSON.parse(localStorage.getItem(STORAGE_KEYS.carrinho)) || [];
let usuario = JSON.parse(localStorage.getItem(STORAGE_KEYS.usuario)) || null;
let usuarios = JSON.parse(localStorage.getItem(STORAGE_KEYS.usuarios)) || [];

const loginBtn = document.getElementById("loginBtn");
const userStatus = document.getElementById("userStatus");
const cartCount = document.getElementById("cartCount");
const authPanel = document.getElementById("authPanel");
const authTitle = document.getElementById("authTitle");
const authMessage = document.getElementById("authMessage");
const closeAuth = document.getElementById("closeAuth");
const tabLogin = document.getElementById("tabLogin");
const tabRegister = document.getElementById("tabRegister");
const loginForm = document.getElementById("loginForm");
const registerForm = document.getElementById("registerForm");
const loginEmail = document.getElementById("loginEmail");
const loginPassword = document.getElementById("loginPassword");
const registerName = document.getElementById("registerName");
const registerEmail = document.getElementById("registerEmail");
const registerPassword = document.getElementById("registerPassword");

const lista = document.getElementById("lista");
const input = document.getElementById("search");
const status = document.getElementById("status");
const btnOrdenar = document.getElementById("ordenar");
const precoMaxInput = document.getElementById("precoMax");
const cartToggle = document.getElementById("cartToggle");
const cartPanel = document.getElementById("cartPanel");
const fecharCarrinho = document.getElementById("fecharCarrinho");
const limparCarrinhoBtn = document.getElementById("limparCarrinho");
const cartItems = document.getElementById("cartItems");
const cartEmpty = document.getElementById("cartEmpty");
const cartTotal = document.getElementById("cartTotal");
const checkoutBtn = document.getElementById("checkoutBtn");

const produtos = [
  {
    id: 1,
    nome: "Camera Canon",
    preco: 11000,
    imagem: "imag/camera.png",
    detalhes: [
      { label: "Modelo", valor: "Canon EOS" },
      { label: "Lente", valor: "8x16 mm" },
      { label: "Uso", valor: "Fotos e videos profissionais" }
    ]
  },
  {
    id: 2,
    nome: "Samsung Galaxy S23",
    preco: 9500,
    imagem: "imag/sansung.png",
    detalhes: [
      { label: "Modelo", valor: "Galaxy S23" },
      { label: "Tela", valor: '6.1"' },
      { label: "Memoria", valor: "128 GB" }
    ]
  },
  {
    id: 3,
    nome: "Laptop Lenovo",
    preco: 210000,
    imagem: "imag/leptop.png",
    detalhes: [
      { label: "Modelo", valor: "Lenovo IdeaPad" },
      { label: "Tela", valor: '15.6"' },
      { label: "Processador", valor: "Intel Core i7" }
    ]
  },
  {
    id: 4,
    nome: "AirPod Bluetooth",
    preco: 1500,
    imagem: "imag/airpod.png",
    detalhes: [
      { label: "Modelo", valor: "AirPod Pro" },
      { label: "Conexao", valor: "Bluetooth 5.0" },
      { label: "Bateria", valor: "Ate 24 horas" }
    ]
  },
  {
    id: 5,
    nome: "Monitor Gamer",
    preco: 5000,
    imagem: "imag/monitor.png",
    detalhes: [
      { label: "Modelo", valor: "Gamer Vision" },
      { label: "Tamanho", valor: '27"' },
      { label: "Taxa", valor: "144 Hz" }
    ]
  },
  {
    id: 6,
    nome: "Teclados Wireless",
    preco: 600,
    imagem: "imag/teclados.png",
    detalhes: [
      { label: "Modelo", valor: "Wireless Compact" },
      { label: "Ligacao", valor: "USB e Bluetooth" },
      { label: "Layout", valor: "ABNT2" }
    ]
  },
  {
    id: 7,
    nome: "Mouse Gamer",
    preco: 450,
    imagem: "imag/mouse.png",
    detalhes: [
      { label: "Modelo", valor: "Speed Mouse X" },
      { label: "Sensor", valor: "6400 DPI" },
      { label: "Iluminacao", valor: "RGB" }
    ]
  },
  {
    id: 8,
    nome: "Pen Drive 128GB",
    preco: 2000,
    imagem: "imag/pendrive.png",
    detalhes: [
      { label: "Modelo", valor: "Flash Storage" },
      { label: "Capacidade", valor: "128 GB" },
      { label: "Entrada", valor: "USB 3.0" }
    ]
  }
];

const cache = {};
let dados = [...produtos];

function normalizarCarrinho() {
  carrinho = carrinho.map((item) => {
    if (item.quantidade) return item;
    return { ...item, quantidade: 1 };
  });
  salvarCarrinho();
}

function salvarCarrinho() {
  localStorage.setItem(STORAGE_KEYS.carrinho, JSON.stringify(carrinho));
}

function salvarUsuarios() {
  localStorage.setItem(STORAGE_KEYS.usuarios, JSON.stringify(usuarios));
}

function salvarSessao() {
  localStorage.setItem(STORAGE_KEYS.usuario, JSON.stringify(usuario));
}

function debounce(fn, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn.apply(this, args), delay);
  };
}

function destacar(texto, busca) {
  if (!busca) return texto;
  const regex = new RegExp(`(${busca})`, "gi");
  return texto.replace(regex, "<mark>$1</mark>");
}

function formatarDetalhes(detalhes) {
  return detalhes
    .map(item => `<p class="descricao"><strong>${item.label}:</strong> ${item.valor}</p>`)
    .join("");
}

function formatarPreco(valor) {
  return `${Number(valor).toLocaleString("pt-PT")} MT`;
}

function validarEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function validarSenha(senha) {
  return senha.length >= 4;
}

function getTotalItens() {
  return carrinho.reduce((total, item) => total + item.quantidade, 0);
}

function calcularTotal() {
  return carrinho.reduce((total, item) => total + (item.preco * item.quantidade), 0);
}

function mostrarMensagemAuth(texto, tipo) {
  authMessage.textContent = texto;
  authMessage.className = tipo ? `auth-message ${tipo}` : "auth-message";
}

function alternarAuth(modo) {
  const loginAtivo = modo === "login";
  tabLogin.classList.toggle("active", loginAtivo);
  tabRegister.classList.toggle("active", !loginAtivo);
  loginForm.classList.toggle("hidden", !loginAtivo);
  registerForm.classList.toggle("hidden", loginAtivo);
  authTitle.textContent = loginAtivo ? "Entrar" : "Criar conta";
  mostrarMensagemAuth("", "");
}

function abrirAuth(modo) {
  authPanel.classList.remove("hidden");
  alternarAuth(modo);
  if (modo === "login") {
    loginEmail.focus();
  } else {
    registerName.focus();
  }
}

function fecharAuthPanel() {
  authPanel.classList.add("hidden");
  mostrarMensagemAuth("", "");
  loginForm.reset();
  registerForm.reset();
}

function atualizarUI() {
  cartCount.textContent = getTotalItens();
  userStatus.textContent = usuario ? `Usuario: ${usuario.nome}` : "Nao logado";
  loginBtn.textContent = usuario ? "Sair" : "Entrar";
  renderCarrinho();
}

function adicionarCarrinho(produto) {
  const existente = carrinho.find((item) => item.id === produto.id);

  if (existente) {
    existente.quantidade += 1;
  } else {
    carrinho.push({ ...produto, quantidade: 1 });
  }

  salvarCarrinho();
  atualizarUI();
  alert("Produto adicionado ao carrinho!");
}

function atualizarQuantidade(idProduto, delta) {
  const item = carrinho.find((produto) => produto.id === idProduto);
  if (!item) return;

  item.quantidade += delta;

  if (item.quantidade <= 0) {
    carrinho = carrinho.filter((produto) => produto.id !== idProduto);
  }

  salvarCarrinho();
  atualizarUI();
}

function removerDoCarrinho(idProduto) {
  carrinho = carrinho.filter((produto) => produto.id !== idProduto);
  salvarCarrinho();
  atualizarUI();
}

function limparCarrinho() {
  carrinho = [];
  salvarCarrinho();
  atualizarUI();
}

function renderCarrinho() {
  cartItems.innerHTML = "";

  if (carrinho.length === 0) {
    cartEmpty.style.display = "block";
    checkoutBtn.classList.add("disabled-link");
    limparCarrinhoBtn.disabled = true;
  } else {
    cartEmpty.style.display = "none";
    checkoutBtn.classList.remove("disabled-link");
    limparCarrinhoBtn.disabled = false;
  }

  carrinho.forEach((produto) => {
    const item = document.createElement("li");
    item.className = "cart-item";
    item.innerHTML = `
      <div class="cart-item-info">
        <strong>${produto.nome}</strong>
        <p>${formatarPreco(produto.preco)} cada</p>
      </div>
      <div class="cart-item-controls">
        <div class="qty-controls">
          <button class="btn-qty" data-action="decrease">-</button>
          <span class="qty-value">${produto.quantidade}</span>
          <button class="btn-qty" data-action="increase">+</button>
        </div>
        <p class="cart-item-subtotal">${formatarPreco(produto.preco * produto.quantidade)}</p>
        <button class="btn-remover">Remover</button>
      </div>
    `;

    item.querySelector('[data-action="decrease"]').addEventListener("click", () => {
      atualizarQuantidade(produto.id, -1);
    });

    item.querySelector('[data-action="increase"]').addEventListener("click", () => {
      atualizarQuantidade(produto.id, 1);
    });

    item.querySelector(".btn-remover").addEventListener("click", () => {
      removerDoCarrinho(produto.id);
    });

    cartItems.appendChild(item);
  });

  cartTotal.textContent = `Total: ${formatarPreco(calcularTotal())}`;
}

function filtrar(texto, precoMax) {
  const chave = texto + "_" + precoMax;

  if (cache[chave]) return cache[chave];

  const resultado = produtos.filter(produto =>
    produto.nome.toLowerCase().includes(texto.toLowerCase()) &&
    (precoMax ? produto.preco <= precoMax : true)
  );

  cache[chave] = resultado;
  return resultado;
}

function render(listaProdutos) {
  lista.innerHTML = "";

  if (listaProdutos.length === 0) {
    status.textContent = "Nenhum produto encontrado";
    return;
  }

  const fragment = document.createDocumentFragment();

  listaProdutos.slice(0, 50).forEach(produto => {
    const li = document.createElement("li");

    li.innerHTML = `
      <img src="${produto.imagem}" alt="${produto.nome}">
      <div class="info">
        <h3>${destacar(produto.nome, input.value)}</h3>
        <div class="detalhes">${formatarDetalhes(produto.detalhes)}</div>
      </div>
      <div class="lado-direito">
        <p class="preco">${formatarPreco(produto.preco)}</p>
        <button class="btn-comprar">Adicionar</button>
      </div>
    `;

    li.querySelector(".btn-comprar").addEventListener("click", () => {
      adicionarCarrinho(produto);
    });

    fragment.appendChild(li);
  });

  lista.appendChild(fragment);
  status.textContent = `Mostrando ${listaProdutos.length} resultados`;
}

loginBtn.addEventListener("click", () => {
  if (usuario) {
    usuario = null;
    localStorage.removeItem(STORAGE_KEYS.usuario);
    fecharAuthPanel();
    atualizarUI();
    return;
  }

  abrirAuth("login");
});

tabLogin.addEventListener("click", () => alternarAuth("login"));
tabRegister.addEventListener("click", () => alternarAuth("register"));
closeAuth.addEventListener("click", fecharAuthPanel);

loginForm.addEventListener("submit", (event) => {
  event.preventDefault();

  const email = loginEmail.value.trim().toLowerCase();
  const senha = loginPassword.value.trim();

  if (!validarEmail(email)) {
    mostrarMensagemAuth("Digite um email valido.", "error");
    return;
  }

  if (!validarSenha(senha)) {
    mostrarMensagemAuth("A senha deve ter pelo menos 4 caracteres.", "error");
    return;
  }

  const conta = usuarios.find(item => item.email === email && item.senha === senha);

  if (!conta) {
    mostrarMensagemAuth("Email ou senha incorretos.", "error");
    return;
  }

  usuario = {
    nome: conta.nome,
    email: conta.email
  };

  salvarSessao();
  fecharAuthPanel();
  atualizarUI();
});

registerForm.addEventListener("submit", (event) => {
  event.preventDefault();

  const nome = registerName.value.trim();
  const email = registerEmail.value.trim().toLowerCase();
  const senha = registerPassword.value.trim();

  if (nome.length < 3) {
    mostrarMensagemAuth("Digite um nome com pelo menos 3 letras.", "error");
    return;
  }

  if (!validarEmail(email)) {
    mostrarMensagemAuth("Digite um email valido.", "error");
    return;
  }

  if (!validarSenha(senha)) {
    mostrarMensagemAuth("A senha deve ter pelo menos 4 caracteres.", "error");
    return;
  }

  const existe = usuarios.some(item => item.email === email);
  if (existe) {
    mostrarMensagemAuth("Ja existe uma conta com esse email.", "error");
    return;
  }

  const novaConta = { nome, email, senha };
  usuarios.push(novaConta);
  salvarUsuarios();

  usuario = { nome, email };
  salvarSessao();
  fecharAuthPanel();
  atualizarUI();
});

input.addEventListener("input", debounce((event) => {
  const valor = event.target.value;
  const precoMax = precoMaxInput.value;

  status.textContent = "A procurar...";
  dados = filtrar(valor, precoMax);
  render(dados);
}, 300));

btnOrdenar.addEventListener("click", () => {
  dados.sort((a, b) => a.nome.localeCompare(b.nome));
  render(dados);
});

cartToggle.addEventListener("click", () => {
  cartPanel.classList.toggle("hidden");
});

fecharCarrinho.addEventListener("click", () => {
  cartPanel.classList.add("hidden");
});

limparCarrinhoBtn.addEventListener("click", () => {
  const confirmar = confirm("Tens certeza que desejas limpar todo o carrinho?");
  if (confirmar) {
    limparCarrinho();
  }
});

checkoutBtn.addEventListener("click", (event) => {
  if (carrinho.length === 0) {
    event.preventDefault();
    alert("Adicione produtos ao carrinho antes de continuar.");
    return;
  }

  if (!usuario) {
    event.preventDefault();
    cartPanel.classList.add("hidden");
    abrirAuth("login");
    mostrarMensagemAuth("Faca login para continuar no checkout.", "error");
  }
});

normalizarCarrinho();
render(produtos);
atualizarUI();