<?php
require __DIR__ . '/auth.php';

$err = '';
$next = $_GET['next'] ?? '/dashboard';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $user = trim($_POST['username'] ?? '');
    $pass = $_POST['password'] ?? '';
    if (saborio_login($user, $pass)) {
        header('Location: ' . ($_POST['next'] ?: '/dashboard'));
        exit;
    }
    $err = 'Invalid username or password.';
}

if (saborio_is_logged_in() && $_SERVER['REQUEST_METHOD'] === 'GET') {
    header('Location: ' . $next);
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Saborio · Sign in</title>
<link rel="icon" href="/logo.png" />
<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&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/styles.css" />
<style>
  body.login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:#faf7ef;color:#16140f}
  .login-art{background:url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1400&q=80') center/cover #3b2a1f;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:48px;color:#fff}
  .login-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,20,15,.35) 0%,rgba(22,20,15,.65) 100%)}
  .login-art > *{position:relative;z-index:1}
  .login-brand{display:flex;align-items:center;gap:12px;font:600 16px 'Inter',sans-serif;letter-spacing:.18em}
  .login-brand img{width:34px;height:34px}
  .login-quote{font:500 30px/1.25 'Fraunces',serif;max-width:440px}
  .login-quote small{display:block;font:400 13px 'JetBrains Mono',monospace;margin-top:14px;opacity:.85;letter-spacing:.06em;text-transform:uppercase}
  .login-form{display:flex;flex-direction:column;justify-content:center;padding:60px 80px;gap:8px;max-width:520px;margin:0 auto;width:100%}
  .login-form h1{font:500 34px 'Fraunces',serif;margin:0}
  .login-form > p{color:#5b5544;margin:4px 0 26px;font-size:15px}
  .login-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#5b5544;font-weight:500;margin-bottom:14px}
  .login-form input{padding:13px 16px;border:1px solid #ece8db;border-radius:12px;font:400 15px 'Inter',sans-serif;color:#16140f;outline:0;background:#fff;transition:border .15s}
  .login-form input:focus{border-color:#16140f}
  .login-form button{margin-top:6px;padding:14px 18px;background:#16140f;color:#fff;border:0;border-radius:12px;font:600 14px 'Inter',sans-serif;letter-spacing:.02em;cursor:pointer;transition:background .15s}
  .login-form button:hover{background:#2a261d}
  .login-err{background:#fdecec;color:#b91c1c;border:1px solid #f5c2c2;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px}
  .login-demo{margin-top:18px;padding:14px 16px;background:#f3efe5;border-radius:12px;font:400 12.5px 'JetBrains Mono',monospace;color:#5b5544;line-height:1.7}
  .login-foot{margin-top:30px;font-size:13px;color:#9c8b6f;display:flex;justify-content:space-between}
  .login-foot a{color:#16140f;text-decoration:none}
  @media (max-width:880px){ body.login{grid-template-columns:1fr} .login-art{display:none} .login-form{padding:60px 24px} }
</style>
</head>
<body class="login">
  <section class="login-art">
    <a class="login-brand" href="/"><img src="/logo.png" alt="" /><span>SABORIO</span></a>
    <div class="login-quote">
      “Small batches, big intention.”
      <small>— The Saborio studio · Barcelona</small>
    </div>
  </section>

  <section class="login-form">
    <h1>Welcome back</h1>
    <p>Sign in to the Saborio admin to manage invoices, customers and orders.</p>

    <?php if ($err): ?><div class="login-err"><?= htmlspecialchars($err) ?></div><?php endif; ?>

    <form method="POST" action="/login<?= $next ? '?next='.htmlspecialchars($next) : '' ?>" autocomplete="on">
      <input type="hidden" name="next" value="<?= htmlspecialchars($next) ?>" />
      <label>Username
        <input name="username" type="text" required autofocus value="<?= htmlspecialchars($_POST['username'] ?? '') ?>" />
      </label>
      <label>Password
        <input name="password" type="password" required />
      </label>
      <button type="submit">Sign in →</button>
    </form>

    <div class="login-foot">
      <a href="/">← Back to store</a>
      <span>© 2026 Saborio</span>
    </div>
  </section>
</body>
</html>
