<?php
require_once __DIR__ . '/../includes/auth.php';
startSecureSession();
if (!empty($_SESSION['logged_in'])) { header('Location: index.php'); exit; }
$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $result = login($_POST['username'] ?? '', $_POST['password'] ?? '');
    if ($result['success']) { header('Location: index.php'); exit; }
    $error = $result['error'];
}
if (isset($_GET['expired'])) $error = 'Session expired. Please log in again.';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>TrackPro — Login</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:#060a14;color:#c0cce0;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(30,64,175,.15) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(99,102,241,.08) 0%,transparent 50%);pointer-events:none}
.card{position:relative;width:100%;max-width:420px;padding:3rem 2.5rem;background:rgba(12,18,35,.85);border:1px solid rgba(99,102,241,.12);border-radius:20px;backdrop-filter:blur(20px);z-index:1}
.logo{display:flex;align-items:center;gap:.6rem;margin-bottom:2.5rem}
.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,#6366f1,#3b82f6);border-radius:10px;display:flex;align-items:center;justify-content:center}
.logo-icon svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.logo-text{font-size:1.4rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.logo-text span{color:#6366f1}
h2{font-size:1.05rem;font-weight:500;color:#8896b3;margin-bottom:2rem}
.field{margin-bottom:1.4rem}
.field label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#5b6b8a;margin-bottom:.5rem}
.field input{width:100%;padding:.85rem 1rem;background:rgba(15,23,42,.8);border:1px solid rgba(99,102,241,.15);border-radius:10px;color:#e2e8f0;font-size:.95rem;font-family:'Outfit',sans-serif;transition:all .2s}
.field input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.field input::placeholder{color:#3d4f6e}
.btn{width:100%;padding:1rem;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .2s;margin-top:.5rem}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px rgba(99,102,241,.3)}
.error-msg{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#fca5a5;padding:.75rem 1rem;border-radius:8px;font-size:.85rem;margin-bottom:1.5rem}
.grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(99,102,241,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
</style>
</head>
<body>
<div class="grid-bg"></div>
<div class="card">
    <div class="logo">
        <div class="logo-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div>
        <div class="logo-text">Track<span>Pro</span></div>
    </div>
    <h2>Sign in to your dashboard</h2>
    <?php if ($error): ?><div class="error-msg"><?= htmlspecialchars($error) ?></div><?php endif; ?>
    <form method="POST">
        <div class="field"><label>Username or Email</label><input type="text" name="username" placeholder="Enter your username" required autofocus></div>
        <div class="field"><label>Password</label><input type="password" name="password" placeholder="Enter your password" required></div>
        <button type="submit" class="btn">Sign In</button>
    </form>
</div>
</body>
</html>
