<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Administrativo — Muvve</title>
  <%- include('../partials/styles') %>
</head>
<body class="admin-layout">

  <!-- Sidebar -->
  <aside class="admin-sidebar">
    <div class="admin-sidebar-header">
      <a href="/admin/dashboard" style="text-decoration: none; display: flex; align-items: center; justify-content: center;">
        <img src="<%= siteConfig.logo_url ? siteConfig.logo_url : '/images/logo.png' %>" alt="Muvve" class="logo-img" style="max-height: 40px; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));">
      </a>
    </div>
    
    <nav class="admin-sidebar-menu">
      <a href="/admin/dashboard" class="admin-sidebar-link active">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
        Visão Geral
      </a>
      <a href="#identidade" class="admin-sidebar-link">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
        Marca & Visual
      </a>
      <a href="#textos" class="admin-sidebar-link">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
        Conteúdo das Páginas
      </a>
      
      <div style="flex: 1;"></div>
      
      <a href="/" target="_blank" class="admin-sidebar-link" style="color: var(--text-muted);">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15,3 21,3 21,9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
        Ver Site Ativo
      </a>
      <a href="/admin/logout" class="admin-sidebar-link" style="color: #ef4444;">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
        Sair do Sistema
      </a>
    </nav>
  </aside>

  <!-- Main Content -->
  <main class="admin-main">
    
    <div class="admin-header reveal">
      <h1>Bem-vindo, <span class="text-neon">Administrador</span></h1>
      <p>Gerencie a identidade visual e os conteúdos chave do seu portal Muvve.</p>
    </div>

    <% if (success === 'text') { %>
      <div class="admin-alert reveal reveal-delay-1">Textos atualizados com sucesso no portal!</div>
    <% } %>
    <% if (success === 'images') { %>
      <div class="admin-alert reveal reveal-delay-1">Arquivos de imagem da marca atualizados com sucesso!</div>
    <% } %>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem;">
      
      <!-- Images Card -->
      <div class="admin-card reveal reveal-delay-2" id="identidade">
        <div class="admin-card-title">
          <div class="card-icon">🎨</div>
          <h3>Identidade Visual</h3>
        </div>
        <form action="/admin/update-images" method="POST" enctype="multipart/form-data">
          
          <div class="form-group">
            <label>Logotipo do Site (PNG Transparente Recomendado)</label>
            <label class="custom-file-upload">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
              <span>Clique para selecionar ou arraste o arquivo da Nova Logo</span>
              <input type="file" name="logo" accept="image/*" onchange="this.previousElementSibling.textContent = this.files[0].name">
            </label>
            
            <% if (siteConfig.logo_url) { %>
              <div style="text-align: center;">
                <img src="<%= siteConfig.logo_url %>" alt="Logo atual" class="preview-thumb">
              </div>
            <% } %>
          </div>

          <div class="form-group" style="margin-top: 2rem;">
            <label>Favicon (Ícone da aba do navegador - 512x512px Quadrado)</label>
            <label class="custom-file-upload">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
              <span>Clique para selecionar o Ícone (Favicon)</span>
              <input type="file" name="favicon" accept="image/*" onchange="this.previousElementSibling.textContent = this.files[0].name">
            </label>
            
            <% if (siteConfig.favicon_url) { %>
              <div style="text-align: center;">
                <img src="<%= siteConfig.favicon_url %>" alt="Favicon atual" class="preview-thumb" style="max-height: 40px;">
              </div>
            <% } %>
          </div>

          <button type="submit" class="btn btn-outline" style="width: 100%; justify-content: center; margin-top: 1.5rem;">Fazer Upload das Imagens</button>
        </form>
      </div>

      <!-- Text Card -->
      <div class="admin-card reveal reveal-delay-3" id="textos">
        <div class="admin-card-title">
          <div class="card-icon">✏️</div>
          <h3>Conteúdos da Página Inicial</h3>
        </div>
        <form action="/admin/update-text" method="POST">
          
          <div class="admin-section-title">Seção Principal (Hero Banner)</div>
          <div class="form-group">
            <label>Título (Use <code style="color: var(--accent); background: var(--accent-dim); padding: 0.1rem 0.3rem; border-radius: 4px;">&lt;span class="text-neon"&gt;</code> para verde limão)</label>
            <input type="text" name="hero_title" class="form-control" value="<%= siteConfig.hero_title %>" required>
          </div>
          <div class="form-group">
            <label>Subtítulo de Apoio</label>
            <textarea name="hero_subtitle" class="form-control" rows="3" required><%= siteConfig.hero_subtitle %></textarea>
          </div>

          <div class="admin-section-title">Bloco "Quem Somos"</div>
          <div class="form-group">
            <label>Título da Seção</label>
            <input type="text" name="about_title" class="form-control" value="<%= siteConfig.about_title %>" required>
          </div>
          <div class="form-group">
            <label>Primeiro Parágrafo</label>
            <textarea name="about_text1" class="form-control" rows="3" required><%= siteConfig.about_text1 %></textarea>
          </div>
          <div class="form-group">
            <label>Segundo Parágrafo</label>
            <textarea name="about_text2" class="form-control" rows="3" required><%= siteConfig.about_text2 %></textarea>
          </div>

          <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; margin-top: 2rem;">
            Publicar Textos
          </button>
        </form>
      </div>

    </div>
  </main>

  <script>
    // Simple reveal animation trigger on load
    document.addEventListener('DOMContentLoaded', () => {
      const reveals = document.querySelectorAll('.reveal');
      setTimeout(() => {
        reveals.forEach(el => el.classList.add('visible'));
      }, 100);
    });
  </script>
</body>
</html>
