<?php
require_once __DIR__ . '/lib.php';
session_start_safe();

// Remember-me auto-login
if (!customer_logged_in() && !empty($_COOKIE['bk_remember'])) {
    $tok = $_COOKIE['bk_remember'];
    $u   = db()->prepare('SELECT id, email FROM bk_users WHERE remember_token = ?');
    $u->execute([$tok]);
    $rem = $u->fetch();
    if ($rem) {
        $_SESSION['bk_user_id']    = (int)$rem['id'];
        $_SESSION['bk_user_email'] = $rem['email'];
        $_SESSION['bk_user_time']  = time();
        header('Location: customer/dashboard.php'); exit;
    }
}
if (customer_logged_in()) { header('Location: customer/dashboard.php'); exit; }

$redir = esc($_GET['redirect'] ?? 'customer/dashboard.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Sign In — <?= esc(APP_NAME) ?></title>
<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=DM+Mono:wght@400;500&family=Syne:wght@700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet"/>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f4f5f7;--surface:#fff;--border:#e8eaed;--border-hi:#d1d5db;--accent:#e09500;--accent-hi:#f5a623;--accent-d:#b87800;--accent-pale:#fff8eb;--accent-glow:rgba(224,149,0,.18);--red:#dc2626;--red-pale:#fef2f2;--red-border:#fecaca;--text:#111827;--text-2:#4b5563;--text-3:#9ca3af;--font-d:'Syne',sans-serif;--font-b:'DM Sans',sans-serif;--font-m:'DM Mono',monospace}
html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-b);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.6}
a{text-decoration:none;color:inherit}
.wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.brand-logo{width:36px;height:36px;background:linear-gradient(135deg,var(--accent-hi),var(--accent-d));border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px var(--accent-glow)}
.brand-logo svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-family:var(--font-d);font-size:16px;font-weight:800}
.card{width:100%;max-width:420px;background:var(--surface);border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.05),0 12px 40px rgba(0,0,0,.08);border:1px solid var(--border);overflow:hidden}
.card-hdr{background:linear-gradient(135deg,var(--accent-hi),var(--accent-d));padding:24px 28px}
.card-eye{font-family:var(--font-m);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:4px}
.card-title{font-family:var(--font-d);font-size:20px;font-weight:800;color:#fff}
.card-sub{font-size:13px;color:rgba(255,255,255,.75);margin-top:2px}
.card-body{padding:28px}
.row{margin-bottom:18px}
.row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
label{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.03em}
.forgot{font-size:12px;color:var(--accent);font-weight:600}
input[type=email],input[type=password]{display:block;width:100%;padding:11px 14px;border:1.5px solid var(--border-hi);border-radius:10px;font-family:var(--font-b);font-size:14px;color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s;outline:none;-webkit-appearance:none}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.remember{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.remember input{width:auto;margin:0}
.remember span{font-size:13px;color:var(--text-2)}
.btn{display:block;width:100%;padding:13px;background:var(--accent);color:#fff;font-family:var(--font-b);font-size:14px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:background .15s,box-shadow .15s}
.btn:hover{background:var(--accent-hi);box-shadow:0 4px 12px var(--accent-glow)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.footer{text-align:center;margin-top:20px;font-size:13px;color:var(--text-3)}
.footer a{color:var(--accent);font-weight:600}
.alert{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;display:none}
.err{background:var(--red-pale);color:var(--red);border:1px solid var(--red-border)}
.show{display:block}
</style>
</head>
<body>
<div class="wrap">
  <div class="brand">
    <div class="brand-logo"><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>
    <span class="brand-name"><?= esc(APP_NAME) ?></span>
  </div>
  <div class="card">
    <div class="card-hdr">
      <div class="card-eye">Customer Portal</div>
      <div class="card-title">Welcome back</div>
      <div class="card-sub">Sign in to manage bookings &amp; memberships</div>
    </div>
    <div class="card-body">
      <div class="alert err" id="errBox"></div>
      <div class="row">
        <label for="email">Email address</label>
        <input type="email" id="email" placeholder="jane@example.com" autocomplete="email" style="margin-top:6px"/>
      </div>
      <div class="row">
        <div class="row-top"><label for="pw">Password</label><a href="forgot-password.php" class="forgot">Forgot password?</a></div>
        <input type="password" id="pw" placeholder="••••••••" autocomplete="current-password"/>
      </div>
      <div class="remember">
        <input type="checkbox" id="rem"/>
        <span>Keep me signed in for 30 days</span>
      </div>
      <button class="btn" id="btn" onclick="go()">Sign In</button>
      <div class="footer">No account? <a href="register.php">Create one free</a></div>
    </div>
  </div>
</div>
<script>
const REDIR = <?= json_encode($redir) ?>;
async function go(){
  const btn=document.getElementById('btn'),e=document.getElementById('errBox');
  e.className='alert err';
  const email=document.getElementById('email').value.trim(),pw=document.getElementById('pw').value,rem=document.getElementById('rem').checked;
  if(!email||!pw){e.textContent='Please enter your email and password.';e.classList.add('show');return;}
  btn.disabled=true;btn.textContent='Signing in…';
  try{
    const r=await fetch('api/auth.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'login',email,password:pw,remember:rem})});
    const d=await r.json();
    if(d.ok){window.location.href=REDIR;}
    else{e.textContent=d.error||'Invalid credentials.';e.classList.add('show');btn.disabled=false;btn.textContent='Sign In';}
  }catch(err){e.textContent='Network error — please try again.';e.classList.add('show');btn.disabled=false;btn.textContent='Sign In';}
}
document.addEventListener('keydown',ev=>{if(ev.key==='Enter')go();});
</script>
</body>
</html>
