<?php
// OneLauncher - dashboard.php
require_once 'includes/auth.php';
require_once 'db.php';

$pageTitle = 'Dashboard';
$nav = 'dashboard';

// Contagem de propagandas
$resProp = $conn->query("SELECT COUNT(*) as total FROM propaganda WHERE active = 1");
$totalPropaganda = $resProp->fetch_assoc()['total'];

// Contagem de apps
$resApps = $conn->query("SELECT COUNT(*) as total FROM launcher_apps");
$totalApps = $resApps->fetch_assoc()['total'];

include 'includes/head.php';
include 'includes/sidebar.php';
include 'includes/topbar.php';
include 'includes/layout-open.php';
?>

<style>
  .dash-wrapper {
    padding: 8px 4px 32px 4px;
    color: #e6edf3;
  }
  .dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .dash-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(90deg, #00f5ff, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .dash-header p {
    color: #8b949e;
    margin: 4px 0 0 0;
    font-size: 0.95rem;
  }
  .btn-group-top {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .btn-glow {
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid rgba(0,245,255,0.25);
    background: rgba(0,245,255,0.06);
    color: #00f5ff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .btn-glow:hover {
    background: rgba(0,245,255,0.15);
    box-shadow: 0 0 20px rgba(0,245,255,0.2);
    transform: translateY(-2px);
  }
  .btn-primary-glow {
    background: linear-gradient(135deg, #00f5ff, #7c3aed);
    color: #0d1117;
    border: none;
    font-weight: 700;
  }
  .btn-primary-glow:hover {
    box-shadow: 0 0 25px rgba(0,245,255,0.4);
    filter: brightness(1.1);
  }

  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
  }
  .kpi-card {
    background: rgba(22, 27, 34, 0.7);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(8px);
  }
  .kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  }
  .kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
  }
  .kpi-card.red::before { background: linear-gradient(90deg, #ff4d6d, #ff8fa3); }
  .kpi-card.yellow::before { background: linear-gradient(90deg, #ffb703, #fb8500); }
  .kpi-card.blue::before { background: linear-gradient(90deg, #00f5ff, #00b4d8); }
  .kpi-card.green::before { background: linear-gradient(90deg, #2ecc71, #27ae60); }

  .kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 14px;
  }
  .kpi-card.red .kpi-icon { background: rgba(255,77,109,0.12); color: #ff4d6d; }
  .kpi-card.yellow .kpi-icon { background: rgba(255,183,3,0.12); color: #ffb703; }
  .kpi-card.blue .kpi-icon { background: rgba(0,245,255,0.12); color: #00f5ff; }
  .kpi-card.green .kpi-icon { background: rgba(46,204,113,0.12); color: #2ecc71; }

  .kpi-label {
    font-size: 0.82rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
  }
  .kpi-value {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
  }
  .kpi-card.red .kpi-value { color: #ff4d6d; }
  .kpi-card.yellow .kpi-value { color: #ffb703; }
  .kpi-card.blue .kpi-value { color: #00f5ff; }
  .kpi-card.green .kpi-value { color: #2ecc71; }

  .section-card {
    background: rgba(22, 27, 34, 0.6);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
  }
  .section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .quick-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 50px;
    color: #00f5ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid transparent;
    background: linear-gradient(#0d1117, #0d1117) padding-box,
                linear-gradient(90deg, #00f5ff, #7c3aed, #00f5ff) border-box;
    background-size: 200% 100%;
    animation: borderMove 3s linear infinite;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  @keyframes borderMove {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
  }
  .qa-btn:hover {
    color: #ffffff;
    background: linear-gradient(90deg, #00f5ff, #7c3aed) border-box;
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.35), 0 0 60px rgba(124, 58, 237, 0.15);
    transform: translateY(-3px);
  }
  .qa-btn img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 4px rgba(0,245,255,0.4));
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
  }
  .info-pill {
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.15);
    border-radius: 12px;
    padding: 16px;
  }
  .info-pill label {
    display: block;
    font-size: 0.75rem;
    color: #2ecc71;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .info-pill .status-dot {
    width: 8px;
    height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 8px #2ecc71;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .info-pill .value {
    font-weight: 700;
    font-size: 1.1rem;
    color: #e6edf3;
  }

  .badge-version {
    display: inline-block;
    background: rgba(0,245,255,0.1);
    color: #00f5ff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(0,245,255,0.2);
  }
</style>

<div class="dash-wrapper">
  <div class="dash-header">
    <div>
      <h1>Launcher One</h1>
      <p>Visão geral do sistema</p>
    </div>
    <div class="btn-group-top">
      <a href="assets/upload/VuzeBoxLauncher.apk" class="btn-glow" download>
        <i class="bi bi-cloud-download"></i> Baixar APK
      </a>
      <a href="branding.php" class="btn-glow btn-primary-glow">
        <i class="bi bi-pencil-square"></i> Editar Layout
      </a>
    </div>
  </div>

  <div class="kpi-grid">
    <div class="kpi-card red">
      <div class="kpi-icon"><i class="bi bi-grid-fill"></i></div>
      <div class="kpi-label">Apps na Grade</div>
      <div class="kpi-value" id="kpi-apps"><?php echo $totalApps; ?></div>
    </div>
    <div class="kpi-card yellow">
      <div class="kpi-icon"><i class="bi bi-megaphone-fill"></i></div>
      <div class="kpi-label">Propagandas Ativas</div>
      <div class="kpi-value" id="kpi-propa"><?php echo $totalPropaganda; ?></div>
    </div>
    <div class="kpi-card blue">
      <div class="kpi-icon"><i class="bi bi-boxes"></i></div>
      <div class="kpi-label">Botões de Ação</div>
      <div class="kpi-value">3</div>
    </div>
    <div class="kpi-card green">
      <div class="kpi-icon"><i class="bi bi-phone-fill"></i></div>
      <div class="kpi-label">Versão do App</div>
      <div class="kpi-value" style="font-size:1.4rem;">v2.4.0</div>
    </div>
  </div>

  <div class="section-card">
    <div class="section-title"><i class="bi bi-lightning-charge-fill" style="color:#ffb703;"></i> Acesso Rápido</div>
    <div class="quick-actions">
      <a href="apps.php" class="qa-btn">
        <img src="https://img.icons8.com/fluency/48/upload-to-cloud.png" alt="">
        Subir APK para Store
      </a>
      <a href="propaganda.php" class="qa-btn">
        <img src="https://img.icons8.com/external-kiranshastry-lineal-color-kiranshastry/64/external-image-interface-kiranshastry-lineal-color-kiranshastry.png" alt="">
        Alterar Propaganda
      </a>
      <a href="logout.php" class="qa-btn">
        <img src="https://img.icons8.com/lollipop/48/exit.png" alt="">
        Encerrar Sessão
      </a>
    </div>
  </div>

  <div class="section-card">
    <div class="section-title"><i class="bi bi-info-circle-fill" style="color:#00f5ff;"></i> Informações do Sistema</div>
    <div class="info-grid">
      <div class="info-pill">
        <label>Status do Banco</label>
        <div class="value"><span class="status-dot"></span>Conectado</div>
      </div>
      <div class="info-pill">
        <label>Última Atividade</label>
        <div class="value"><?php echo date('d/m/Y H:i'); ?></div>
      </div>
    </div>
  </div>
</div>

<script>
  // Animação de contagem dos KPIs
  function animateValue(id, start, end, duration) {
    const obj = document.getElementById(id);
    if (!obj) return;
    let startTimestamp = null;
    const step = (timestamp) => {
      if (!startTimestamp) startTimestamp = timestamp;
      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
      obj.innerHTML = Math.floor(progress * (end - start) + start);
      if (progress < 1) {
        window.requestAnimationFrame(step);
      }
    };
    window.requestAnimationFrame(step);
  }

  const totalApps = <?php echo (int)$totalApps; ?>;
  const totalPropaganda = <?php echo (int)$totalPropaganda; ?>;

  setTimeout(() => animateValue("kpi-apps", 0, totalApps, 1200), 300);
  setTimeout(() => animateValue("kpi-propa", 0, totalPropaganda, 1200), 500);
</script>

<?php
include 'includes/layout-close.php';
include 'includes/footer.php';
?>