<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Administrador · L Web Developer</title>
<link rel="icon" type="image/png" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#000000;color:#FFFFFF;line-height:1.6;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}

.login-tela{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login-box{width:100%;max-width:420px;text-align:center}
.login-logo{font-family:'Inter',sans-serif;font-weight:800;font-size:32px;letter-spacing:-.03em;color:#FFFFFF;margin-bottom:8px}
.login-logo span{color:#4ADE80}
.login-sub{font-family:'Inter',sans-serif;font-weight:300;font-size:13px;color:#888888;margin-bottom:50px;letter-spacing:.15em;text-transform:uppercase}
.login-erro{background:rgba(255,90,95,.1);border:1px solid rgba(255,90,95,.3);color:#FF5A5F;padding:14px 18px;font-size:13px;margin-bottom:20px;display:none;text-align:left;border-radius:8px;line-height:1.5}
.login-erro.ativo{display:block}
.login-campo{margin-bottom:15px;text-align:left}
.login-campo label{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#888888;margin-bottom:8px}
.login-campo input{width:100%;padding:16px 18px;background:#0A0A0A;border:1px solid #1A1A1A;color:#FFFFFF;font-size:14px;outline:none;transition:border-color .3s;border-radius:8px}
.login-campo input:focus{border-color:#FFFFFF}
.login-btn{width:100%;padding:16px;background:#FFFFFF;color:#000000;font-family:'Inter',sans-serif;font-weight:500;font-size:14px;cursor:pointer;transition:opacity .3s;margin-top:10px;border-radius:50px}
.login-btn:hover{opacity:.8}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.login-info{font-family:'Inter',sans-serif;font-weight:300;font-size:12px;color:#555555;margin-top:20px;line-height:1.6}
.codigo-tela{display:none;min-height:100vh;align-items:center;justify-content:center;padding:40px 20px}
.codigo-tela.ativo{display:flex}
.codigo-box{width:100%;max-width:420px;text-align:center}
.codigo-icone{font-size:60px;margin-bottom:20px}
.codigo-titulo{font-family:'Inter',sans-serif;font-weight:600;font-size:24px;color:#FFFFFF;margin-bottom:10px}
.codigo-desc{font-family:'Inter',sans-serif;font-weight:300;font-size:14px;color:#888888;margin-bottom:30px;line-height:1.6}
.codigo-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:25px}
.codigo-input{width:50px;height:60px;text-align:center;font-size:24px;font-weight:600;background:#0A0A0A;border:1px solid #1A1A1A;color:#FFFFFF;outline:none;border-radius:8px;font-family:'JetBrains Mono',monospace}
.codigo-input:focus{border-color:#4ADE80}
.admin{display:none;min-height:100vh}
.admin.ativo{display:block}
.header{background:#000000;border-bottom:1px solid #1A1A1A;padding:20px 40px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
.header-logo{font-family:'Inter',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.02em;color:#FFFFFF}
.header-logo span{color:#4ADE80}
.header-acoes{display:flex;gap:10px;align-items:center}
.header-btn{font-family:'Inter',sans-serif;font-weight:400;font-size:13px;padding:10px 20px;border:1px solid #1A1A1A;color:#FFFFFF;background:transparent;border-radius:50px;transition:all .3s;cursor:pointer;text-decoration:none}
.header-btn:hover{border-color:#FFFFFF}
.header-btn.vermelho{color:#FF5A5F;border-color:rgba(255,90,95,.3)}
.header-btn.vermelho:hover{background:rgba(255,90,95,.1);border-color:#FF5A5F}
.header-user{font-family:'Inter',sans-serif;font-weight:300;font-size:12px;color:#888888;margin-right:10px}

.main{max-width:1200px;margin:0 auto;padding:50px 40px}
.titulo{font-family:'Inter',sans-serif;font-weight:200;font-size:56px;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:10px;color:#FFFFFF}
.subtitulo{font-family:'Inter',sans-serif;font-weight:300;font-size:15px;color:#888888;margin-bottom:40px}
.tabs{display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap;border-bottom:1px solid #1A1A1A;padding-bottom:20px}
.tab{padding:10px 20px;font-family:'Inter',sans-serif;font-weight:400;font-size:13px;color:#888888;background:transparent;border:1px solid #1A1A1A;border-radius:50px;cursor:pointer;transition:all .3s}
.tab:hover{color:#FFFFFF;border-color:#888888}
.tab.ativo{background:#FFFFFF;color:#000000;border-color:#FFFFFF}
.card{background:#0A0A0A;border:1px solid #1A1A1A;padding:35px;margin-bottom:25px;border-radius:12px}
.card-titulo{font-family:'Inter',sans-serif;font-weight:500;font-size:20px;color:#FFFFFF;margin-bottom:8px;letter-spacing:-.01em}
.card-desc{font-family:'Inter',sans-serif;font-weight:300;font-size:14px;color:#888888;margin-bottom:25px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-campo{display:flex;flex-direction:column;gap:8px}
.form-campo.full{grid-column:1/-1}
.form-campo label{font-family:'Inter',sans-serif;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#888888}
.form-campo input,.form-campo textarea,.form-campo select{background:#000000;border:1px solid #1A1A1A;color:#FFFFFF;padding:14px 16px;font-size:14px;outline:none;transition:border-color .3s;border-radius:8px}
.form-campo input:focus,.form-campo textarea:focus,.form-campo select:focus{border-color:#FFFFFF}
.form-campo textarea{resize:vertical;min-height:90px;font-family:'Inter',sans-serif;line-height:1.6}
.btn{padding:14px 28px;font-family:'Inter',sans-serif;font-weight:500;font-size:13px;border-radius:50px;cursor:pointer;transition:all .3s;border:none}
.btn-salvar{background:#FFFFFF;color:#000000}
.btn-salvar:hover{opacity:.8}
.btn-add{background:#4ADE80;color:#000000}
.btn-add:hover{opacity:.8}
.btn-perigo{background:transparent;color:#FF5A5F;border:1px solid rgba(255,90,95,.3)}
.btn-perigo:hover{background:rgba(255,90,95,.1);border-color:#FF5A5F}
.btn-editar{background:transparent;color:#FFFFFF;border:1px solid #1A1A1A}
.btn-editar:hover{border-color:#FFFFFF}
.btn-upload{background:transparent;color:#FFFFFF;border:1px dashed #1A1A1A;padding:14px;text-align:center;cursor:pointer;border-radius:8px;font-size:13px;transition:all .3s;width:100%}
.btn-upload:hover{border-color:#FFFFFF;background:rgba(255,255,255,.02)}
.preview-img{margin-top:12px;max-width:200px;border-radius:8px;overflow:hidden;display:none;border:1px solid #1A1A1A}
.preview-img.ativo{display:block}
.preview-img img{width:100%;display:block}
.item-lista{background:#000000;border:1px solid #1A1A1A;padding:20px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-radius:8px}
.item-info{flex:1;min-width:200px;display:flex;gap:15px;align-items:center}
.item-thumb{width:50px;height:50px;border-radius:8px;background:#0A0A0A;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#333;font-size:20px}
.item-thumb img{width:100%;height:100%;object-fit:cover}
.item-titulo{font-family:'Inter',sans-serif;font-weight:500;font-size:16px;color:#FFFFFF;margin-bottom:4px}
.item-sub{font-family:'Inter',sans-serif;font-weight:300;font-size:13px;color:#888888}
.item-acoes{display:flex;gap:8px}
.lista-vazia{text-align:center;padding:40px;font-family:'Inter',sans-serif;font-weight:300;font-size:14px;color:#555555;border:2px dashed #1A1A1A;border-radius:12px}
.toast{position:fixed;bottom:30px;right:30px;background:#4ADE80;color:#000000;padding:16px 24px;font-family:'Inter',sans-serif;font-weight:500;font-size:14px;border-radius:50px;z-index:9999;transform:translateY(150%);transition:transform .4s;box-shadow:0 10px 40px rgba(74,222,128,.3)}
.toast.ativo{transform:translateY(0)}
.toast.erro{background:#FF5A5F;color:#FFFFFF;box-shadow:0 10px 40px rgba(255,90,95,.3)}
.aba-conteudo{display:none}
.aba-conteudo.ativo{display:block}

@media (max-width:768px){
  .header{padding:15px 20px;flex-wrap:wrap;gap:10px}
  .main{padding:30px 20px}
  .titulo{font-size:36px}
  .form-grid{grid-template-columns:1fr}
  .card{padding:25px 20px}
  .item-lista{flex-direction:column;align-items:flex-start}
  .item-acoes{width:100%}
  .toast{left:15px;right:15px;bottom:15px;text-align:center}
  .header-user{display:none}
  .codigo-input{width:40px;height:50px;font-size:20px}
}
</style>
</head>
<body>

<div class="login-tela" id="loginTela">
<div class="login-box">
<div class="login-logo">L<span>.</span>WEB · ADMIN</div>
<div class="login-sub">Painel de controle</div>
<div class="login-erro" id="loginErro">Erro ao entrar.</div>
<div class="login-campo">
<label>E-mail</label>
<input type="email" id="emailInput" placeholder="seu@email.com" onkeypress="if(event.key==='Enter')fazerLogin()">
</div>
<div class="login-campo">
<label>Senha</label>
<input type="password" id="senhaInput" placeholder="Sua senha" onkeypress="if(event.key==='Enter')fazerLogin()">
</div>
<button class="login-btn" id="loginBtn" onclick="fazerLogin()">Entrar</button>
<div class="login-info" id="loginInfo"></div>
</div>
</div>

<div class="codigo-tela" id="codigoTela">
<div class="codigo-box">
<div class="codigo-icone">🔐</div>
<div class="codigo-titulo">Verificação em 2 etapas</div>
<div class="codigo-desc">Digite o código de 6 dígitos que enviamos pro seu e-mail.</div>
<div class="login-erro" id="codigoErro">Código incorreto. Tente de novo.</div>
<div class="codigo-inputs" id="codigoInputs">
<input type="text" class="codigo-input" maxlength="1" inputmode="numeric" oninput="avancarCodigo(this, 0)">
<input type="text" class="codigo-input" maxlength="1" inputmode="numeric" oninput="avancarCodigo(this, 1)">
<input type="text" class="codigo-input" maxlength="1" inputmode="numeric" oninput="avancarCodigo(this, 2)">
<input type="text" class="codigo-input" maxlength="1" inputmode="numeric" oninput="avancarCodigo(this, 3)">
<input type="text" class="codigo-input" maxlength="1" inputmode="numeric" oninput="avancarCodigo(this, 4)">
<input type="text" class="codigo-input" maxlength="1" inputmode="numeric" oninput="avancarCodigo(this, 5)">
</div>
<button class="login-btn" id="codigoBtn" onclick="verificarCodigo()">Verificar</button>
<div class="login-info" id="codigoInfo"></div>
</div>
</div>

<div class="admin" id="adminBox">
<div class="header">
<div class="header-logo">L<span>.</span>WEB · ADMIN</div>
<div class="header-acoes">
<span class="header-user" id="userEmail">—</span>
<!-- LINK CORRIGIDO DO PORTFÓLIO -->
<a href="https://l-web-developer.pages.dev" target="_blank" class="header-btn">Ver site ao vivo</a>
<button class="header-btn vermelho" onclick="fazerLogout()">Sair</button>
</div>
</div>

<div class="main">
<h1 class="titulo">Painel</h1>
<p class="subtitulo">Gerencie projetos, sites, textos e contatos.</p>

<div class="tabs">
<button class="tab ativo" onclick="mudarAba('projetos', this)">Projetos</button>
<button class="tab" onclick="mudarAba('sites', this)">Meus Sites</button>
<button class="tab" onclick="mudarAba('textos', this)">Textos</button>
<button class="tab" onclick="mudarAba('contatos', this)">Contatos</button>
<button class="tab" onclick="mudarAba('backup', this)">Backup</button>
</div>

<div class="aba-conteudo ativo" id="aba-projetos">
<div class="card">
<div class="card-titulo">+ Novo projeto</div>
<div class="card-desc">Adicione um projeto ao portfólio</div>
<div class="form-grid">
<div class="form-campo"><label>Título</label><input type="text" id="projTitulo" placeholder="Ex: Studio Glam"></div>
<div class="form-campo"><label>Categoria</label>
<select id="projCategoria">
<option>Institucional</option>
<option>Landing Page</option>
<option>E-commerce</option>
<option>Portfólio</option>
</select>
</div>
<div class="form-campo"><label>Nicho</label><input type="text" id="projNicho" placeholder="Ex: Beleza"></div>
<div class="form-campo"><label>Link do projeto</label><input type="text" id="projLink" placeholder="https://..."></div>
<div class="form-campo full"><label>Descrição</label><textarea id="projDescricao" placeholder="Descrição curta..."></textarea></div>
<div class="form-campo full">
  <label>Imagem do projeto</label>
  <button class="btn-upload" onclick="abrirUpload('proj')">📷 Clique pra subir imagem</button>
  <input type="text" id="projImagem" placeholder="ou cole uma URL" style="margin-top:8px">
  <div class="preview-img" id="prevProj"><img src="" alt=""></div>
</div>
</div>
<button class="btn btn-add" style="margin-top:20px" onclick="adicionarProjeto()">Adicionar projeto</button>
</div>

<div class="card">
<div class="card-titulo">Projetos cadastrados</div>
<div class="card-desc">Edite ou exclua seus projetos</div>
<div id="listaProjetos"></div>
</div>
</div>

<div class="aba-conteudo" id="aba-sites">
<div class="card">
<div class="card-titulo">+ Novo site externo</div>
<div class="card-desc">Adicione um link pros seus outros sites</div>
<div class="form-grid">
<div class="form-campo"><label>Título</label><input type="text" id="siteTitulo" placeholder="Ex: Studio Glam"></div>
<div class="form-campo"><label>Ícone (emoji)</label><input type="text" id="siteIcone" placeholder="💅" maxlength="4"></div>
<div class="form-campo full"><label>Descrição</label><input type="text" id="siteDescricao" placeholder="Ex: Salão de beleza · unhas e cílios"></div>
<div class="form-campo full"><label>URL</label><input type="text" id="siteUrl" placeholder="https://..."></div>
</div>
<button class="btn btn-add" style="margin-top:20px" onclick="adicionarSite()">Adicionar site</button>
</div>

<div class="card">
<div class="card-titulo">Sites cadastrados</div>
<div class="card-desc">Edite ou exclua seus sites</div>
<div id="listaSites"></div>
</div>
</div>

<div class="aba-conteudo" id="aba-textos">
<div class="card">
<div class="card-titulo">Textos do site</div>
<div class="card-desc">Edite os textos principais</div>
<div class="form-grid">
<div class="form-campo full"><label>Descrição do hero</label><textarea id="txtHeroDesc"></textarea></div>
<div class="form-campo full"><label>Frase do "Sobre"</label><textarea id="txtSobreFrase"></textarea></div>
<div class="form-campo full"><label>Parágrafo 1 do Sobre</label><textarea id="txtSobreP1"></textarea></div>
<div class="form-campo full"><label>Parágrafo 2 do Sobre</label><textarea id="txtSobreP2"></textarea></div>
</div>
<button class="btn btn-salvar" style="margin-top:20px" onclick="salvarTextos()">Salvar textos</button>
</div>
</div>

<div class="aba-conteudo" id="aba-contatos">
<div class="card">
<div class="card-titulo">Contatos</div>
<div class="card-desc">WhatsApp, e-mail e localização</div>
<div class="form-grid">
<div class="form-campo"><label>WhatsApp (só números)</label><input type="text" id="ctWhats"></div>
<div class="form-campo"><label>WhatsApp (exibição)</label><input type="text" id="ctWhatsDisplay"></div>
<div class="form-campo full"><label>E-mail</label><input type="email" id="ctEmail"></div>
<div class="form-campo full"><label>Localização</label><input type="text" id="ctLocal"></div>
</div>
<button class="btn btn-salvar" style="margin-top:20px" onclick="salvarContatos()">Salvar contatos</button>
</div>
</div>

<div class="aba-conteudo" id="aba-backup">
<div class="card">
<div class="card-titulo">Exportar</div>
<div class="card-desc">Baixe um arquivo JSON com todos os dados</div>
<button class="btn btn-salvar" onclick="exportar()">Baixar backup</button>
</div>
<div class="card">
<div class="card-titulo">Importar</div>
<div class="card-desc">Restaure os dados a partir de um backup</div>
<div class="form-campo" style="margin-bottom:15px"><input type="file" id="inputBackup" accept="application/json"></div>
<button class="btn btn-salvar" onclick="importar()">Importar backup</button>
</div>
<div class="card">
<div class="card-titulo">Resetar</div>
<div class="card-desc">Apaga tudo e volta ao padrão</div>
<button class="btn btn-perigo" onclick="resetar()">Resetar dados</button>
</div>
</div>
</div>
</div>

<div class="toast" id="toast">Salvo com sucesso!</div>

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import { getAuth, signInWithEmailAndPassword, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js";

let CONFIG = null;
const authReady = (async () => {
  try {
    const res = await fetch('/api/config');
    CONFIG = await res.json();
    const app = initializeApp(CONFIG.firebase);
    window.firebaseAuth = getAuth(app);
    window.signInWithEmailAndPassword = signInWithEmailAndPassword;
    window.signOut = signOut;
    window.onAuthStateChanged = onAuthStateChanged;
    iniciarAuth();
  } catch(e) {
    console.error('Erro ao carregar config:', e);
    document.getElementById('loginErro').textContent = 'Erro ao carregar config.';
    document.getElementById('loginErro').classList.add('ativo');
  }
})();

const MAX_TENTATIVAS = 5;
const TEMPO_BLOQUEIO_MIN = 15;

function getTentativas() {
  try {
    const d = JSON.parse(localStorage.getItem('lweb_tentativas') || '{"count":0,"bloqueado_ate":0}');
    return d;
  } catch { return {count:0, bloqueado_ate:0}; }
}
function setTentativas(d) { localStorage.setItem('lweb_tentativas', JSON.stringify(d)); }

function verificarBloqueio() {
  const t = getTentativas();
  if (t.bloqueado_ate > Date.now()) {
    return Math.ceil((t.bloqueado_ate - Date.now()) / 60000);
  }
  if (t.bloqueado_ate > 0 && t.bloqueado_ate <= Date.now()) {
    setTentativas({count:0, bloqueado_ate:0});
  }
  return 0;
}

function registrarErro() {
  const t = getTentativas();
  t.count = (t.count || 0) + 1;
  if (t.count >= MAX_TENTATIVAS) {
    t.bloqueado_ate = Date.now() + (TEMPO_BLOQUEIO_MIN * 60 * 1000);
    t.count = 0;
  }
  setTentativas(t);
  return t;
}

let userTemp = null;

async function enviarCodigoEmail(email) {
  const res = await fetch('/api/enviar-codigo', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email })
  });
  return await res.json();
}

window.fazerLogin = async function(){
  await authReady;
  const bloqueio = verificarBloqueio();
  if (bloqueio > 0) {
    const erro = document.getElementById('loginErro');
    erro.textContent = `⛔ Bloqueado por ${bloqueio} min.`;
    erro.classList.add('ativo');
    return;
  }
  const email = document.getElementById('emailInput').value.trim();
  const senha = document.getElementById('senhaInput').value;
  const erro = document.getElementById('loginErro');
  const btn = document.getElementById('loginBtn');
  erro.classList.remove('ativo');
  if(!email || !senha){ erro.textContent = 'Preencha email e senha.'; erro.classList.add('ativo'); return; }
  btn.disabled = true; btn.textContent = 'Entrando...';
  
  try {
    await signInWithEmailAndPassword(window.firebaseAuth, email, senha);
    setTentativas({count:0, bloqueado_ate:0});
    
    const result = await enviarCodigoEmail(email);
    if (!result.ok) throw new Error(result.error || 'Erro ao enviar email');
    
    userTemp = { email };
    document.getElementById('loginTela').style.display = 'none';
    document.getElementById('codigoTela').classList.add('ativo');
    document.getElementById('codigoInfo').textContent = `Código enviado pra ${email}`;
    setTimeout(()=>document.querySelector('.codigo-input').focus(), 100);
    
  } catch (err) {
    const t = registrarErro();
    let msg = 'Erro ao entrar.';
    if (err.code === 'auth/invalid-credential' || err.code === 'auth/wrong-password') {
      const restantes = MAX_TENTATIVAS - t.count;
      msg = t.bloqueado_ate > Date.now() ? `⛔ Bloqueado por ${TEMPO_BLOQUEIO_MIN} min.` : `Email ou senha incorretos. Tentativas restantes: ${restantes}`;
    } else if (err.code === 'auth/user-not-found') msg = 'Usuário não encontrado.';
    else if (err.message) msg = err.message;
    erro.textContent = msg; erro.classList.add('ativo');
  } finally { btn.disabled = false; btn.textContent = 'Entrar'; }
};

window.avancarCodigo = function(el, idx){
  el.value = el.value.replace(/\D/g, '');
  if (el.value && idx < 5) document.querySelectorAll('.codigo-input')[idx + 1].focus();
  if (idx === 5 && el.value) setTimeout(verificarCodigo, 100);
};

window.verificarCodigo = async function(){
  const inputs = document.querySelectorAll('.codigo-input');
  let codigo = '';
  inputs.forEach(i => codigo += i.value);
  const erro = document.getElementById('codigoErro');
  const btn = document.getElementById('codigoBtn');
  
  erro.classList.remove('ativo');
  
  if (codigo.length !== 6) { erro.textContent = 'Digite os 6 dígitos.'; erro.classList.add('ativo'); return; }
  
  btn.disabled = true; btn.textContent = 'Verificando...';
  
  try {
    const res = await fetch('/api/validar-codigo', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: userTemp?.email, codigo })
    });
    const data = await res.json();
    
    if (data.ok) {
      document.getElementById('codigoTela').classList.remove('ativo');
      document.getElementById('adminBox').classList.add('ativo');
      document.getElementById('userEmail').textContent = userTemp?.email || '';
      carregarTudo();
      userTemp = null;
    } else {
      erro.textContent = data.error || 'Código incorreto.';
      erro.classList.add('ativo');
      inputs.forEach(i => i.value = '');
      inputs[0].focus();
    }
  } catch(e) {
    erro.textContent = 'Erro de conexão.';
    erro.classList.add('ativo');
  } finally {
    btn.disabled = false; btn.textContent = 'Verificar';
  }
};

window.fazerLogout = async function(){ await signOut(window.firebaseAuth); };

function iniciarAuth(){
  onAuthStateChanged(window.firebaseAuth, (user) => {
    if (user && document.getElementById('adminBox').classList.contains('ativo')) {
      document.getElementById('userEmail').textContent = user.email;
    } else if (!user) {
      document.getElementById('loginTela').style.display = 'flex';
      document.getElementById('codigoTela').classList.remove('ativo');
      document.getElementById('adminBox').classList.remove('ativo');
    }
  });
}
</script>

<script>
let CLOUD_NAME = null;
let UPLOAD_PRESET = null;
fetch('/api/config').then(r => r.json()).then(c => {
  CLOUD_NAME = c.cloudinary.cloudName;
  UPLOAD_PRESET = c.cloudinary.uploadPreset;
});

let DATA = { projetos: [], sites: [], textos: {}, contatos: {} };

async function apiGet(){ const res = await fetch('/dados'); return await res.json(); }
async function apiPost(action, dados){
  const token = await window.firebaseAuth.currentUser.getIdToken();
  const res = await fetch('/dados', {
    method: 'POST', 
    headers: { 
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + token
    },
    body: JSON.stringify({ action, ...dados })
  });
  return await res.json();
}

function mudarAba(aba, btn){
  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('ativo'));
  document.querySelectorAll('.aba-conteudo').forEach(a=>a.classList.remove('ativo'));
  btn.classList.add('ativo');
  document.getElementById('aba-'+aba).classList.add('ativo');
}

let toastTimer;
function mostrarToast(msg, erro){
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.className = 'toast ativo' + (erro ? ' erro' : '');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(()=>t.classList.remove('ativo'), 2500);
}

function abrirUpload(tipo){
  if(!CLOUD_NAME){ mostrarToast('Cloudinary ainda carregando...', true); return; }
  const widget = cloudinary.createUploadWidget({
    cloudName: CLOUD_NAME,
    uploadPreset: UPLOAD_PRESET,
    sources: ['local', 'url', 'camera'],
    multiple: false, maxFileSize: 5000000, folder: 'portfolio', language: 'pt'
  }, (error, result) => {
    if(!error && result && result.event === 'success'){
      const url = result.info.secure_url;
      if(tipo === 'proj'){
        document.getElementById('projImagem').value = url;
        const prev = document.getElementById('prevProj');
        prev.querySelector('img').src = url;
        prev.classList.add('ativo');
      }
      mostrarToast('Imagem enviada!');
    }
    if(error) mostrarToast('Erro: ' + error.message, true);
  });
  widget.open();
}

async function carregarTudo(){
  try { DATA = await apiGet(); } catch(e) { console.warn(e); }
  renderListaProjetos(DATA);
  renderListaSites(DATA);
  document.getElementById('txtHeroDesc').value = DATA.textos?.heroDesc || '';
  document.getElementById('txtSobreFrase').value = DATA.textos?.sobreFrase || '';
  document.getElementById('txtSobreP1').value = DATA.textos?.sobreP1 || '';
  document.getElementById('txtSobreP2').value = DATA.textos?.sobreP2 || '';
  document.getElementById('ctWhats').value = DATA.contatos?.whats || '';
  document.getElementById('ctWhatsDisplay').value = DATA.contatos?.whatsDisplay || '';
  document.getElementById('ctEmail').value = DATA.contatos?.email || '';
  document.getElementById('ctLocal').value = DATA.contatos?.local || '';
}

function renderListaProjetos(d){
  const el = document.getElementById('listaProjetos');
  if(!d.projetos?.length){ el.innerHTML = '<div class="lista-vazia">Nenhum projeto</div>'; return; }
  el.innerHTML = d.projetos.map(p=>`
    <div class="item-lista">
      <div class="item-info">
        <div class="item-thumb">${p.imagem?`<img src="${p.imagem}">`:'📦'}</div>
        <div>
          <div class="item-titulo">${p.titulo}</div>
          <div class="item-sub">${p.categoria} · ${p.nicho||'—'}</div>
        </div>
      </div>
      <div class="item-acoes">
        <button class="btn btn-editar" onclick="editarProjeto(${p.id})">Editar</button>
        <button class="btn btn-perigo" onclick="excluirProjeto(${p.id})">Excluir</button>
      </div>
    </div>`).join('');
}

function renderListaSites(d){
  const el = document.getElementById('listaSites');
  if(!d.sites?.length){ el.innerHTML = '<div class="lista-vazia">Nenhum site</div>'; return; }
  el.innerHTML = d.sites.map(s=>`
    <div class="item-lista">
      <div class="item-info">
        <div class="item-thumb">${s.icone||'◈'}</div>
        <div>
          <div class="item-titulo">${s.titulo}</div>
          <div class="item-sub">${s.descricao}</div>
        </div>
      </div>
      <div class="item-acoes">
        <button class="btn btn-editar" onclick="editarSite(${s.id})">Editar</button>
        <button class="btn btn-perigo" onclick="excluirSite(${s.id})">Excluir</button>
      </div>
    </div>`).join('');
}

async function adicionarProjeto(){
  const novo = {
    titulo: document.getElementById('projTitulo').value.trim(),
    categoria: document.getElementById('projCategoria').value,
    nicho: document.getElementById('projNicho').value.trim(),
    imagem: document.getElementById('projImagem').value.trim(),
    descricao: document.getElementById('projDescricao').value.trim(),
    link: document.getElementById('projLink').value.trim() || '#'
  };
  if(!novo.titulo){ mostrarToast('Preencha o título', true); return; }
  await apiPost('add_projeto', novo);
  limparFormProjeto(); await carregarTudo(); mostrarToast('Projeto adicionado!');
}

function editarProjeto(id){
  const p = DATA.projetos.find(x=>x.id===id); if(!p) return;
  document.getElementById('projTitulo').value = p.titulo;
  document.getElementById('projCategoria').value = p.categoria;
  document.getElementById('projNicho').value = p.nicho||'';
  document.getElementById('projImagem').value = p.imagem||'';
  document.getElementById('projDescricao').value = p.descricao||'';
  document.getElementById('projLink').value = p.link||'';
  const prev = document.getElementById('prevProj');
  if(p.imagem){ prev.querySelector('img').src = p.imagem; prev.classList.add('ativo'); }
  else { prev.classList.remove('ativo'); }
  window.scrollTo({top:0, behavior:'smooth'});
  const btn = document.querySelector('#aba-projetos .btn-add');
  btn.textContent = 'Salvar alterações';
  btn.onclick = ()=>salvarEdicaoProjeto(id);
}

async function salvarEdicaoProjeto(id){
  const dados = {
    id,
    titulo: document.getElementById('projTitulo').value.trim(),
    categoria: document.getElementById('projCategoria').value,
    nicho: document.getElementById('projNicho').value.trim(),
    imagem: document.getElementById('projImagem').value.trim(),
    descricao: document.getElementById('projDescricao').value.trim(),
    link: document.getElementById('projLink').value.trim() || '#'
  };
  await apiPost('edit_projeto', dados);
  await carregarTudo(); limparFormProjeto(); mostrarToast('Projeto atualizado!');
  const btn = document.querySelector('#aba-projetos .btn-add');
  btn.textContent = 'Adicionar projeto';
  btn.onclick = adicionarProjeto;
}

async function excluirProjeto(id){
  if(!confirm('Excluir este projeto?')) return;
  await apiPost('delete_projeto', { id });
  await carregarTudo(); mostrarToast('Projeto excluído!');
}

function limparFormProjeto(){
  ['projTitulo','projNicho','projImagem','projDescricao','projLink'].forEach(id=>document.getElementById(id).value='');
  document.getElementById('projCategoria').selectedIndex = 0;
  document.getElementById('prevProj').classList.remove('ativo');
}

async function adicionarSite(){
  const novo = {
    titulo: document.getElementById('siteTitulo').value.trim(),
    icone: document.getElementById('siteIcone').value.trim() || '◈',
    descricao: document.getElementById('siteDescricao').value.trim(),
    url: document.getElementById('siteUrl').value.trim() || '#'
  };
  if(!novo.titulo){ mostrarToast('Preencha o título', true); return; }
  await apiPost('add_site', novo);
  await carregarTudo(); limparFormSite(); mostrarToast('Site adicionado!');
}

function editarSite(id){
  const s = DATA.sites.find(x=>x.id===id); if(!s) return;
  document.getElementById('siteTitulo').value = s.titulo;
  document.getElementById('siteIcone').value = s.icone||'';
  document.getElementById('siteDescricao').value = s.descricao||'';
  document.getElementById('siteUrl').value = s.url||'';
  window.scrollTo({top:0, behavior:'smooth'});
  const btn = document.querySelector('#aba-sites .btn-add');
  btn.textContent = 'Salvar alterações';
  btn.onclick = ()=>salvarEdicaoSite(id);
}

async function salvarEdicaoSite(id){
  const dados = {
    id,
    titulo: document.getElementById('siteTitulo').value.trim(),
    icone: document.getElementById('siteIcone').value.trim() || '◈',
    descricao: document.getElementById('siteDescricao').value.trim(),
    url: document.getElementById('siteUrl').value.trim() || '#'
  };
  await apiPost('edit_site', dados);
  await carregarTudo(); limparFormSite(); mostrarToast('Site atualizado!');
  const btn = document.querySelector('#aba-sites .btn-add');
  btn.textContent = 'Adicionar site';
  btn.onclick = adicionarSite;
}

async function excluirSite(id){
  if(!confirm('Excluir este site?')) return;
  await apiPost('delete_site', { id });
  await carregarTudo(); mostrarToast('Site excluído!');
}

function limparFormSite(){
  ['siteTitulo','siteIcone','siteDescricao','siteUrl'].forEach(id=>document.getElementById(id).value='');
}

async function salvarTextos(){
  const textos = {
    heroDesc: document.getElementById('txtHeroDesc').value.trim(),
    sobreFrase: document.getElementById('txtSobreFrase').value.trim(),
    sobreP1: document.getElementById('txtSobreP1').value.trim(),
    sobreP2: document.getElementById('txtSobreP2').value.trim()
  };
  await apiPost('save_textos', { textos });
  mostrarToast('Textos salvos!');
}

async function salvarContatos(){
  const contatos = {
    whats: document.getElementById('ctWhats').value.trim(),
    whatsDisplay: document.getElementById('ctWhatsDisplay').value.trim(),
    email: document.getElementById('ctEmail').value.trim(),
    local: document.getElementById('ctLocal').value.trim()
  };
  await apiPost('save_contatos', { contatos });
  mostrarToast('Contatos salvos!');
}

function exportar(){
  const blob = new Blob([JSON.stringify(DATA, null, 2)], {type:'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'portfolio-backup-'+new Date().toISOString().slice(0,10)+'.json';
  a.click(); URL.revokeObjectURL(url);
  mostrarToast('Backup baixado!');
}

function importar(){
  const f = document.getElementById('inputBackup').files[0];
  if(!f){ mostrarToast('Selecione um arquivo', true); return; }
  const r = new FileReader();
  r.onload = e=>{
    try{
      const d = JSON.parse(e.target.result);
      if(!d.projetos) throw new Error();
      mostrarToast('Import manual não implementado.', true);
    }catch(err){ mostrarToast('Arquivo inválido', true); }
  };
  r.readAsText(f);
}

function resetar(){
  if(!confirm('Apagar TUDO?')) return;
  mostrarToast('Reset manual: apague o D1.', true);
}
</script>

</body>
</html>