<?php require __DIR__.'/auth_guard.php'; ?>
<?php include __DIR__.'/timer_bar.php'; ?>
<?php

require __DIR__.'/../db/config.php';

?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Painel de Roletas</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
  --bg1:#060a12;
  --bg2:#0b1220;
  --panel:#0f172a;
  --panel-2:#0b1220;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --border:#1f2937;
  --line:#1b2437;
  --primary:#7c3aed;
  --primary-2:#2563eb;
  --success:#10b981;
  --danger:#ef4444;
  --warn:#f59e0b;
  --hover:#0f1a2f;
  --chip:#0d1424;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(1000px 600px at 110% 10%, rgba(37,99,235,.20), transparent 60%),
              linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Header */
.header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(8,12,22,.65);
  border-bottom:1px solid var(--border);
}
.container{max-width:1200px; margin:0 auto; padding:16px;}
.header .row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
.brand svg{flex:0 0 24px}
.brand small{color:var(--muted); font-weight:600; border:1px solid var(--border); padding:2px 8px; border-radius:999px}

/* Top section */
.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.search{display:flex; gap:10px; flex-wrap:wrap}
.input{
  background:var(--chip); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:12px; outline:none; min-width:260px;
}
.input:focus{border-color:#2b3c57}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--hover); color:#e6eefc; cursor:pointer; transition:.2s ease; font-weight:700;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.primary{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); border:none}
.btn.ghost{background:transparent}

/* Content */
.main{padding:24px 0 40px}
.headline{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px;}
.title{font-size:28px; font-weight:800; line-height:1.1}
.subtitle{color:var(--muted)}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px;}
.kpi{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.kpi .label{font-size:12px; color:var(--muted); margin-bottom:6px}
.kpi .value{font-weight:800; font-size:22px}

.card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border); border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.card-header{padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px}
.card-title{font-size:18px; font-weight:800}
.card-body{padding:22px}

/* Table theming (works on generic <table>) */
.card-body table{width:100%; border-collapse:separate; border-spacing:0}
.card-body table thead th{
  color:var(--muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  padding:12px 14px; background: #0b1324; position:sticky; top:0;
}
.card-body table tbody tr{transition:.15s ease}
.card-body table tbody tr:hover{background:#0d172e}
.card-body table th, .card-body table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.card-body table tbody tr:last-child td{border-bottom:none}
.card-body .row-actions{display:flex; gap:8px; flex-wrap:wrap}
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid var(--border); color:#cbd5e1; background:#0f1625
}

/* Buttons inside tables or anchors */
.card-body a.btn, .card-body button.btn{
  font-size:13px; padding:8px 12px; border-radius:10px;
}
.btn.success{background:linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%); border:none}
.btn.warn{background:linear-gradient(135deg, #f59e0b 0%, #f97316 100%); border:none}
.btn.danger{background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border:none}

/* Empty state */
.empty{
  text-align:center; padding:38px 16px; color:var(--muted);
}
.empty .ico{opacity:.8; margin-bottom:10px}

/* Footer */
.footer{padding:22px; color:var(--muted); text-align:center}

@media (max-width: 900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .headline{flex-direction:column; align-items:flex-start}
  .search .input{min-width:unset; width:100%}
}
@media (max-width: 520px){
  .kpis{grid-template-columns:1fr}
}
</style>
</head>
<body>
<header class="header">
  <div class="container row">
    <div class="brand">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M12 2l8 5v10l-8 5-8-5V7l8-5z" stroke="url(#g1)" stroke-width="1.4"/>
        <defs>
          <linearGradient id="g1" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
            <stop stop-color="#7c3aed"/><stop offset="1" stop-color="#2563eb"/>
          </linearGradient>
        </defs>
      </svg>
      <div>
        <div style="display:flex; align-items:center; gap:10px"><span style="font-size:18px">Admin de Roletas</span><small>dashboard</small></div>
        <div style="font-size:12px; color:var(--muted)">Gerencie suas roletas, segmentos e templates</div>
      </div>
    </div>
    <div class="toolbar">
      <a class="btn ghost" href="index.php">Atualizar</a>
      <a class="btn primary" href="nova_roleta.php">+ Nova roleta</a>
    </div>
  </div>
</header>

<main class="main">
  <div class="container">
    <div class="headline">
      <div>
        <div class="title">Roletas</div>
        <div class="subtitle">Lista de roletas cadastradas no sistema</div>
      </div>
      <form class="search" method="get" action="index.php">
        <input class="input" type="text" name="q" placeholder="Buscar por nome ou slug" value="<?php echo isset($_GET['q']) ? htmlspecialchars($_GET['q']) : '';?>">
        <button class="btn" type="submit">Buscar</button>
      </form>
    </div>

    <section class="kpis">
      <div class="kpi"><div class="label">Total de roletas</div><div class="value"><?php echo isset($total_roletas)?$total_roletas:'—'; ?></div></div>
      <div class="kpi"><div class="label">Ativas</div><div class="value"><?php echo isset($total_ativas)?$total_ativas:'—'; ?></div></div>
      <div class="kpi"><div class="label">Atualizado</div><div class="value"><?php echo date('d/m/Y'); ?></div></div>
      <div class="kpi"><div class="label">Versão</div><div class="value">v2.1</div></div>
    </section>

    <div class="card">
      <div class="card-header">
        <div class="card-title">Roletas cadastradas</div>
        <div class="toolbar">
          <a class="btn primary" href="nova_roleta.php">+ Nova roleta</a>
        </div>
      </div>
      <div class="card-body">
        <!-- Aqui entra o conteúdo original do index.php -->
<table><thead><tr><th>#</th><th>Nome</th><th>Slug</th><th>Status</th><th>Arquivo</th><th></th></tr></thead><tbody>
<?php
$rows = $pdo->query("SELECT * FROM roulettes ORDER BY id DESC")->fetchAll();
foreach($rows as $r){
  $file="../public/roletas/{$r['slug']}.php";
  echo "<tr>";
  echo "<td>{$r['id']}</td>";
  echo "<td>".htmlspecialchars($r['name'])."</td>";
  echo "<td>{$r['slug']}</td>";
  echo "<td>".($r['is_active']?'Ativa':'Inativa')."</td>";
  echo "<td>".(file_exists(__DIR__."/../public/roletas/{$r['slug']}.php")?"<span class='badge'>gerado</span>":"—")."</td>";
  echo "<td><a href='nova_roleta.php?id={$r['id']}' style='color:#fff'>Editar</a> | ".
       "<a href='roleta_excluir.php?id={$r['id']}' onclick='return confirm(\"Excluir?\")' style='color:#fff'>Excluir</a> | ".
       "<a target='_blank' href='{$file}' style='color:#fff'>Abrir</a></td>";
  echo "</tr>";
}
?>
</tbody></table>
      </div>
    </div>

  </div>
</main>
</body>
</html>
