<?php
// =============================================
//  CAMBIA ESTA CONTRASEÑA ANTES DE SUBIR
// =============================================
$PASSWORD = "kapital2025";
// =============================================

session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['pass'])) {
    if ($_POST['pass'] === $PASSWORD) {
        $_SESSION['auth'] = true;
    } else {
        $error = true;
    }
}

if (isset($_POST['logout'])) {
    session_destroy();
    header('Location: visitas.php');
    exit;
}

$auth = $_SESSION['auth'] ?? false;

$archivo = __DIR__ . '/visitas.txt';
$visitas = [];
if ($auth && file_exists($archivo)) {
    $lineas = array_filter(array_reverse(file($archivo)), 'trim');
    foreach ($lineas as $l) {
        $visitas[] = trim($l);
    }
}
$total = count($visitas);
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Visitas</title>
  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap" rel="stylesheet"/>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
    body {
      background: #0d0a0e;
      color: #f0e8ec;
      font-family: 'Jost', sans-serif;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    /* LOGIN */
    .login-card {
      background: #16101a;
      border: 1px solid rgba(201,123,132,0.2);
      border-radius: 6px;
      padding: 48px 40px;
      width: 100%;
      max-width: 340px;
      text-align: center;
    }
    .login-card h2 {
      font-weight: 300;
      font-size: 22px;
      color: #e8a8b0;
      margin-bottom: 8px;
    }
    .login-card p {
      font-size: 13px;
      color: #7a6a70;
      margin-bottom: 28px;
    }
    .login-card input[type=password] {
      width: 100%;
      padding: 12px 16px;
      background: #0d0a0e;
      border: 1px solid rgba(201,123,132,0.25);
      border-radius: 4px;
      color: #f0e8ec;
      font-family: 'Jost', sans-serif;
      font-size: 15px;
      outline: none;
      margin-bottom: 14px;
      transition: border-color 0.2s;
    }
    .login-card input[type=password]:focus {
      border-color: #c97b84;
    }
    .login-card button {
      width: 100%;
      padding: 12px;
      background: #c97b84;
      border: none;
      border-radius: 4px;
      color: #fff;
      font-family: 'Jost', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: background 0.2s;
    }
    .login-card button:hover { background: #b56870; }
    .error { color: #e8a8b0; font-size: 13px; margin-top: 10px; }

    /* PANEL */
    .panel { width: 100%; max-width: 700px; }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 28px;
      flex-wrap: wrap;
      gap: 12px;
    }
    .header h1 {
      font-size: 22px;
      font-weight: 300;
      color: #e8a8b0;
    }
    .badge {
      background: rgba(201,123,132,0.15);
      border: 1px solid rgba(201,123,132,0.3);
      color: #e8a8b0;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 13px;
    }
    .logout-btn {
      background: none;
      border: 1px solid #3a2e3e;
      color: #7a6a70;
      padding: 6px 16px;
      border-radius: 4px;
      font-family: 'Jost', sans-serif;
      font-size: 12px;
      cursor: pointer;
      letter-spacing: 0.06em;
      transition: all 0.2s;
    }
    .logout-btn:hover { border-color: #c97b84; color: #e8a8b0; }

    .empty {
      text-align: center;
      color: #7a6a70;
      padding: 60px 0;
      font-size: 15px;
    }

    .visita {
      background: #16101a;
      border: 1px solid #2a1e2e;
      border-radius: 4px;
      padding: 16px 20px;
      margin-bottom: 10px;
      font-size: 14px;
      line-height: 1.6;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 6px 16px;
      align-items: center;
      transition: border-color 0.2s;
    }
    .visita:hover { border-color: rgba(201,123,132,0.3); }
    .visita:first-child {
      border-color: rgba(201,123,132,0.35);
      background: #1c1020;
    }
    .visita:first-child::before {
      content: '👁 Más reciente';
      grid-column: 1 / -1;
      font-size: 11px;
      color: #c97b84;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .fecha { color: #7a6a70; font-size: 13px; white-space: nowrap; }
    .info { color: #d4c8cc; }

    .footer {
      margin-top: 20px;
      text-align: center;
      font-size: 12px;
      color: #3a2e3e;
    }
  </style>
</head>
<body>

<?php if (!$auth): ?>

  <div class="login-card">
    <h2>🔒 Visitas</h2>
    <p>Ingresa la contraseña para ver el registro</p>
    <form method="POST">
      <input type="password" name="pass" placeholder="Contraseña" autofocus/>
      <button type="submit">Entrar</button>
      <?php if (!empty($error)): ?>
        <p class="error">Contraseña incorrecta</p>
      <?php endif; ?>
    </form>
  </div>

<?php else: ?>

  <div class="panel">
    <div class="header">
      <div style="display:flex;align-items:center;gap:14px;">
        <h1>Registro de visitas</h1>
        <span class="badge"><?= $total ?> <?= $total === 1 ? 'visita' : 'visitas' ?></span>
      </div>
      <form method="POST">
        <button class="logout-btn" name="logout" value="1">Cerrar sesión</button>
      </form>
    </div>

    <?php if (empty($visitas)): ?>
      <div class="empty">Aún no hay visitas registradas 🌸</div>
    <?php else: ?>
      <?php foreach ($visitas as $v):
        // Parsear la línea: [fecha] | dispositivo | navegador | IP: x.x.x.x
        preg_match('/^\[(.+?)\]\s*\|\s*(.+?)\s*\|\s*(.+?)\s*\|\s*IP:\s*(.+)$/', $v, $m);
        $f   = $m[1] ?? '';
        $dev = $m[2] ?? '';
        $nav = $m[3] ?? '';
        $ip  = $m[4] ?? '';
      ?>
        <div class="visita">
          <span class="fecha"><?= htmlspecialchars($f) ?></span>
          <span class="info"><?= htmlspecialchars($dev) ?> · <?= htmlspecialchars($nav) ?> · <span style="color:#7a6a70"><?= htmlspecialchars($ip) ?></span></span>
        </div>
      <?php endforeach; ?>
    <?php endif; ?>

    <div class="footer">Las visitas más recientes aparecen primero · Hora Centro México (UTC-6)</div>
  </div>

<?php endif; ?>

</body>
</html>
