<?php
require_once __DIR__ . '/../controllers/LoginController.php';

if (session_status() === PHP_SESSION_NONE) session_start();

$login = new Login();

if ($login->isUserLoggedIn()) {
    header('Location: inicio.php');
    exit;
}

/* ✅ CSRF */
if (empty($_SESSION['csrf'])) {
    $_SESSION['csrf'] = bin2hex(random_bytes(32));
}

/* ✅ Config */
$NOMBRE_PROVEEDOR = defined('NOMBRE_PROVEEDOR') ? NOMBRE_PROVEEDOR : 'Sistema';
$LOGO_EMPRESA     = defined('LOGO_EMPRESA') ? LOGO_EMPRESA : 'logo.png';
$LOGO_PROVEEDOR   = defined('LOGO_PROVEEDOR') ? LOGO_PROVEEDOR : 'favicon.ico';
$NOMBRE_SISTEMA   = defined('NOMBRE_SISTEMA') ? NOMBRE_SISTEMA : 'Mi Sistema';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="dark">
    <title>Login</title>

    <link rel="icon" href="../../public/img/<?= htmlspecialchars($LOGO_PROVEEDOR) ?>">
    <link rel="stylesheet" href="../../public/assets/bootstrap-5.3.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../public/assets/font-awesome-6.5.0/css/all.min.css">

   <style>
        body {
            margin:0;
            height:100vh;
            font-family:'Inter',sans-serif;
            display:flex;
            justify-content:center;
            align-items:center;
            background:#050810;
            overflow:hidden;
        }

        .bg {
            position:fixed;
            width:200%;
            height:200%;
            background:
                radial-gradient(circle at 20% 30%, #0b5ed7, transparent 40%),
                radial-gradient(circle at 80% 70%, #c56b12, transparent 40%);
            animation:move 15s infinite alternate;
            z-index:-3;
        }
        @keyframes move {
            100% {transform: translate(-10%,-10%);}
        }

        .grid {
            position:fixed;
            width:100%;
            height:100%;
            background-image:
                linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index:-2;
        }

        canvas {
            position:fixed;
            top:0;
            left:0;
            z-index:-1;
        }

        .login-card {
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(25px);
            padding: 2.8rem;
            border-radius: 20px;
            width: 100%;
            max-width: 370px;
            box-shadow: 0 30px 80px rgba(0,0,0,0.7);
            border: 1px solid rgba(255,255,255,0.1);
            animation:fadeUp .8s ease;
            text-align:center;
        }
        @keyframes fadeUp {
            from {opacity:0; transform:translateY(40px);}
        }

        .login-card img {
            width:80px;
            display:block;
            margin:auto;
            animation:float 3s infinite ease-in-out;
        }
        @keyframes float {
            50% {transform: translateY(-10px);}
        }

        h4 {
            text-align:center;
            color:#fff;
            margin:15px 0 25px;
            font-weight:600;
        }

        .form-floating input {
            background: rgba(255, 255, 255, 0.16);
            border:1px solid rgba(255,255,255,0.2);
            color:#fff;
            border-radius:8px;
        }
        .form-floating input:focus {
            border-color:#0b5ed7;
            box-shadow:0 0 10px rgb(252, 253, 254);
        }
        .form-floating label {
            color:#ccc;
        }
        .form-floating input::placeholder {
            color: transparent;
        }

        .btn-login {
            background: rgba(197, 107, 18, 0.5);
            border: none;
            color: #fff;
            font-weight: 600;
            padding: 12px;
            border-radius: 10px;
            transition: .3s;
        }
        .btn-login:hover {
            transform:translateY(-2px) scale(1.02);
        }

        .spinner {
            width:18px;
            height:18px;
            border:2px solid #fff;
            border-top:2px solid transparent;
            border-radius:50%;
            animation:spin .7s linear infinite;
            display:inline-block;
        }
        @keyframes spin {
            to {transform:rotate(360deg);}
        }

        footer {
            position:absolute;
            bottom:10px;
            color:#aaa;
            font-size:12px;
        }
    </style>
</head>

<body>
    <div class="bg"></div>
    <!--<div class="grid"></div>-->
    <canvas id="particles"></canvas>
<div class="login-card">
    <img src="../../public/img/<?= htmlspecialchars($LOGO_EMPRESA) ?>">
    <h4><?= htmlspecialchars($NOMBRE_SISTEMA) ?></h4>

    <?php if (!empty($login->errors)): ?>
        <div class="alert alert-danger">
            <?php foreach ($login->errors as $error): ?>
                <div><?= htmlspecialchars($error) ?></div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <form method="POST" autocomplete="off">
        <input type="hidden" name="csrf" value="<?= htmlspecialchars($_SESSION['csrf']) ?>">

        <div class="form-floating mb-3">
            <input type="text" name="user_name" class="form-control" placeholder="Usuario" required>
            <label>Usuario</label>
        </div>

        <div class="form-floating mb-3">
            <input type="password" name="user_password" class="form-control" placeholder="Contraseña" required>
            <label>Contraseña</label>
        </div>

        <button type="submit" name="login" value="1" class="btn btn-login w-100">
            Iniciar sesión
        </button>
    </form>
</div>
<script src="../views/scripts/login.js"></script>
<footer>© <?= date('Y') ?> <?= htmlspecialchars($NOMBRE_PROVEEDOR) ?></footer>

</body>
</html>