<?php
// login.php
declare(strict_types=1);

require_once __DIR__ . '/includes/auth.php';
require_once __DIR__ . '/includes/helpers.php';
require_once __DIR__ . '/includes/csrf.php';

ensure_session();

$err = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  csrf_verify((string)($_POST['csrf'] ?? ''));
  $u = trim((string)($_POST['username'] ?? ''));
  $p = (string)($_POST['password'] ?? '');

  if ($u === '' || $p === '') {
    $err = 'Ingresa usuario y contraseña.';
  } elseif (!login($u, $p)) {
    $err = 'Credenciales inválidas.';
  } else {
    redirect('select_scope.php');
  }
}
?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BReport · Login</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    :root{
      --glass-bg: rgba(10, 22, 35, 0.58);
      --glass-border: rgba(255,255,255,0.16);
      --text-soft: rgba(255,255,255,0.78);
      --input-bg: rgba(255,255,255,0.14);
      --input-border: rgba(255,255,255,0.18);
      --input-focus: rgba(255,255,255,0.28);
      --shadow-lg: 0 20px 45px rgba(0,0,0,.35);
    }

    html, body {
      height: 100%;
      margin: 0;
    }

    body {
      min-height: 100vh;
      position: relative;
      font-family: Arial, Helvetica, sans-serif;
      background:
        linear-gradient(rgba(4, 14, 24, 0.58), rgba(4, 14, 24, 0.72)),
        url('assets/login-bg.png') center center / cover no-repeat fixed;
      overflow-x: hidden;
    }

    /* Capa decorativa para mejorar visibilidad */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background:
        radial-gradient(circle at top right, rgba(86, 194, 255, 0.16), transparent 30%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.08), transparent 28%);
      pointer-events: none;
      z-index: 0;
    }

    .login-wrap {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1;
      padding: 24px 12px;
    }

    .login-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 24px;
      box-shadow: var(--shadow-lg);
      color: #fff;
      overflow: hidden;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 1.25rem;
    }

    .brand img {
      width: 54px;
      height: 54px;
      object-fit: contain;
      border-radius: 12px;
      background: rgba(255,255,255,.10);
      padding: 6px;
    }

    .brand-title {
      font-size: 1.7rem;
      font-weight: 700;
      line-height: 1.1;
      margin: 0;
      letter-spacing: .3px;
    }

    .brand-subtitle {
      color: var(--text-soft);
      font-size: .93rem;
      margin: 0;
    }

    .form-label {
      color: #fff;
      font-weight: 600;
      margin-bottom: .45rem;
    }

    .form-control {
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      color: #fff;
      min-height: 48px;
      border-radius: 14px;
      padding-left: 14px;
      padding-right: 14px;
    }

    .form-control::placeholder {
      color: rgba(255,255,255,.58);
    }

    .form-control:focus {
      background: rgba(255,255,255,.16);
      color: #fff;
      border-color: var(--input-focus);
      box-shadow: 0 0 0 .2rem rgba(255,255,255,.08);
    }

    .btn-login {
      min-height: 50px;
      border-radius: 14px;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: .2px;
      border: 0;
      transition: transform .15s ease, box-shadow .15s ease;
    }

    .btn-login:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(255,255,255,.12);
    }

    .alert {
      border-radius: 14px;
    }

    .footer-note {
      color: rgba(255,255,255,.78);
      text-shadow: 0 2px 10px rgba(0,0,0,.35);
    }

    .login-side-text {
      color: #fff;
      text-shadow: 0 4px 18px rgba(0,0,0,.45);
      margin-bottom: 18px;
    }

    .login-side-text h1 {
      font-size: clamp(1.8rem, 2.7vw, 3rem);
      font-weight: 800;
      margin-bottom: .5rem;
    }

    .login-side-text p {
      color: rgba(255,255,255,.88);
      max-width: 580px;
      font-size: clamp(.95rem, 1.2vw, 1.08rem);
      margin-bottom: 0;
    }

    @media (max-width: 767.98px) {
      body {
        background:
          linear-gradient(rgba(4, 14, 24, 0.66), rgba(4, 14, 24, 0.80)),
          url('assets/login-bg.png') center center / cover no-repeat;
      }

      .login-card {
        border-radius: 20px;
      }

      .brand-title {
        font-size: 1.45rem;
      }

      .brand img {
        width: 48px;
        height: 48px;
      }

      .login-side-text {
        text-align: center;
        margin-bottom: 24px;
      }

      .login-side-text p {
        margin-left: auto;
        margin-right: auto;
      }
    }
  </style>
</head>
<body>
  <div class="container-fluid login-wrap">
    <div class="container">
      <div class="row align-items-center justify-content-center g-4">

        <div class="col-12 col-lg-6 d-none d-lg-block">
          <div class="login-side-text">
            <h1>BReport</h1>
            <p>
              Sistema de reportaje de producción (MES) Blanquita
            </p>
          </div>
        </div>

        <div class="col-12 col-sm-11 col-md-8 col-lg-5 col-xl-4">
          <div class="card login-card">
            <div class="card-body p-4 p-md-5">

              <div class="brand">
                <!-- Cambia la ruta del logo si es necesario -->
                <img src="assets/logo.png" alt="BReport">
                <div>
                  <div class="brand-title">BReport</div>
                  <p class="brand-subtitle">Acceso seguro</p>
                </div>
              </div>

              <?php if ($err !== ''): ?>
                <div class="alert alert-danger py-2 px-3 mb-3">
                  <?= h($err) ?>
                </div>
              <?php endif; ?>

              <form method="post" autocomplete="off">
                <input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>">

                <div class="mb-3">
                  <label class="form-label" for="username">Usuario</label>
                  <input
                    id="username"
                    class="form-control"
                    name="username"
                    required
                    value="<?= h($_POST['username'] ?? '') ?>"
                    placeholder="Ingresa tu usuario">
                </div>

                <div class="mb-3">
                  <label class="form-label" for="password">Contraseña</label>
                  <input
                    id="password"
                    class="form-control"
                    type="password"
                    name="password"
                    required
                    placeholder="Ingresa tu contraseña">
                </div>

                <button class="btn btn-light btn-login w-100">
                  Entrar
                </button>
              </form>

              <div class="mt-3 text-white-50 small">
                <!-- Usuario inicial: <span class="text-white">admin</span> · Pass: <span class="text-white">Admin123!</span> -->
              </div>
            </div>
          </div>

          <div class="text-center footer-note small mt-3">
            © <?= date('Y') ?> Productos blanquita
          </div>
        </div>

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