<?php
require_once __DIR__ . '/config/config.php';

if (isLoggedIn()) {
    redirect(isAdmin() || isAssistant() ? SITE_URL . '/admin/dashboard.php' : SITE_URL . '/user/dashboard.php');
}

$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $auth = new Auth();
    $result = $auth->login($_POST['email'] ?? '', $_POST['password'] ?? '');
    if ($result['success']) {
        redirect($result['redirect']);
    } else {
        $error = $result['message'];
    }
}

header('X-Frame-Options: ALLOWALL');
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign In — <?php echo SITE_NAME; ?></title>
    <link rel="icon" type="image/png" href="<?php echo SITE_URL; ?>/assets/images/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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg:        #0B0C10;
            --gold-1:    #FFD700;
            --gold-2:    #FFA500;
            --crimson:   #DC143C;
            --text:      #F0F0F0;
            --muted:     #8A8FA8;
            --border:    rgba(255,255,255,0.07);
            --card-bg:   rgba(15,16,22,0.65);
            --input-bg:  rgba(8,9,14,0.85);
            --input-border: rgba(255,255,255,0.09);
            --radius:    14px;
        }

        /* ── Page background — mirrors landing page ── */
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--bg);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            color: var(--text);
            position: relative;
            overflow: hidden;
        }

        /* Starfield canvas */
        #stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

        /* Ambient glow behind card */
        body::before {
            content: '';
            position: fixed;
            width: 640px; height: 640px;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(255,165,0,0.07) 0%, transparent 70%);
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 0;
        }

        /* ── Glass card ── */
        .card {
            position: relative; z-index: 1;
            width: 100%; max-width: 420px;
            background: var(--card-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: var(--radius);
            box-shadow:
                0 0 0 1px rgba(255,165,0,0.06),
                0 24px 64px rgba(0,0,0,0.55),
                0 4px 16px rgba(0,0,0,0.4);
            padding: 2.25rem 2rem 2rem;
        }

        /* ── Logo block ── */
        .logo-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.55rem;
            margin-bottom: 1.75rem;
        }
        .logo-block img {
            width: 48px;
            height: 48px;
            min-width: 48px;
            min-height: 48px;
            object-fit: contain;
            display: block;
            margin: 0 auto;
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.35));
        }
        .logo-block {
            overflow: visible;
        }
        .logo-block .page-title {
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--muted);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        /* ── Error alert ── */
        .error-box {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            background: rgba(220,20,60,0.12);
            border: 1px solid rgba(220,20,60,0.35);
            color: #ff6b80;
            padding: 0.7rem 0.9rem;
            border-radius: 9px;
            font-size: 0.855rem;
            font-weight: 500;
            margin-bottom: 1.25rem;
        }
        .error-box svg { flex-shrink: 0; }

        /* ── Form ── */
        .form-group {
            margin-bottom: 1rem;
        }
        .form-label {
            display: block;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--muted);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 0.42rem;
        }
        .input-wrap {
            position: relative;
        }
        .form-control {
            width: 100%;
            padding: 0.78rem 1rem;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: 9px;
            color: var(--text);
            font-family: inherit;
            font-size: 0.93rem;
            transition: border-color 0.22s ease, box-shadow 0.22s ease;
            outline: none;
            -webkit-appearance: none;
        }
        .form-control::placeholder { color: rgba(138,143,168,0.55); }
        .form-control:hover  { border-color: rgba(255,215,0,0.22); }
        .form-control:focus  {
            border-color: rgba(255,165,0,0.55);
            box-shadow: 0 0 0 3px rgba(255,165,0,0.08);
        }
        /* Password field — extra right padding for eye button */
        .form-control.has-eye { padding-right: 2.9rem; }

        /* Eye toggle */
        .eye-btn {
            position: absolute;
            right: 0.75rem; top: 50%;
            transform: translateY(-50%);
            background: none; border: none;
            cursor: pointer;
            color: var(--muted);
            padding: 0.2rem;
            display: flex;
            align-items: center;
            transition: color 0.18s;
        }
        .eye-btn:hover { color: var(--gold-1); }

        /* ── Remember me row ── */
        .remember-row {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            margin-bottom: 1.25rem;
            margin-top: 0.35rem;
        }
        /* Custom checkbox */
        .cb-wrap {
            position: relative;
            width: 16px; height: 16px;
            flex-shrink: 0;
        }
        .cb-wrap input[type="checkbox"] {
            position: absolute;
            opacity: 0; width: 0; height: 0;
        }
        .cb-box {
            display: block;
            width: 16px; height: 16px;
            border: 1px solid var(--input-border);
            border-radius: 4px;
            background: var(--input-bg);
            transition: border-color 0.18s, background 0.18s;
            cursor: pointer;
            position: relative;
        }
        .cb-wrap input:checked + .cb-box {
            background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
            border-color: transparent;
        }
        .cb-wrap input:checked + .cb-box::after {
            content: '';
            position: absolute;
            left: 4px; top: 1.5px;
            width: 5px; height: 9px;
            border: 2px solid #0B0C10;
            border-top: none; border-left: none;
            transform: rotate(45deg);
        }
        .remember-label {
            font-size: 0.82rem;
            color: var(--muted);
            cursor: pointer;
            user-select: none;
            line-height: 1;
        }

        /* ── Sign In button ── */
        .btn-signin {
            width: 100%;
            padding: 0.88rem 1rem;
            background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 100%);
            color: #0B0C10;
            border: none;
            border-radius: 9px;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
            box-shadow: 0 4px 18px rgba(255,165,0,0.28);
        }
        .btn-signin:hover {
            transform: translateY(-2px) scale(1.015);
            box-shadow: 0 8px 28px rgba(255,165,0,0.42);
            filter: brightness(1.08);
        }
        .btn-signin:active {
            transform: translateY(0) scale(0.995);
        }

        /* ── Bottom links ── */
        .links {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1.4rem;
        }
        .links a {
            font-size: 0.835rem;
            font-weight: 500;
            color: rgba(138,143,168,0.75);
            text-decoration: none;
            transition: color 0.18s;
        }
        .links a:hover { color: var(--gold-1); }
        .links .divider {
            color: rgba(138,143,168,0.3);
            font-size: 0.75rem;
        }

        /* ── Responsive ── */
        @media (max-width: 480px) {
            .card { padding: 1.75rem 1.35rem 1.6rem; }
            .logo-block { margin-bottom: 1.4rem; }
        }
    </style>
</head>
<body>
    <canvas id="stars"></canvas>

    <div class="card">
        <!-- Logo -->
        <div class="logo-block">
            <img src="/assets/images/logo.png" alt="WeaverSM">
            <span class="page-title">Sign in to your account</span>
        </div>

        <!-- Error -->
        <?php if ($error): ?>
        <div class="error-box">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><circle cx="12" cy="16" r="0.5" fill="currentColor"/>
            </svg>
            <?php echo htmlspecialchars($error); ?>
        </div>
        <?php endif; ?>

        <!-- Form -->
        <form method="POST" autocomplete="on">
            <div class="form-group">
                <label class="form-label" for="email">Email Address</label>
                <div class="input-wrap">
                    <input
                        type="email" id="email" name="email"
                        class="form-control"
                        placeholder="you@example.com"
                        value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>"
                        required autocomplete="email">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="password">Password</label>
                <div class="input-wrap">
                    <input
                        type="password" id="password" name="password"
                        class="form-control has-eye"
                        placeholder="••••••••"
                        required autocomplete="current-password">
                    <button type="button" class="eye-btn" id="eyeBtn" aria-label="Toggle password visibility">
                        <!-- Eye icon — open state -->
                        <svg id="eyeOpen" width="18" height="18" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                            <circle cx="12" cy="12" r="3"/>
                        </svg>
                        <!-- Eye-off icon — hidden state -->
                        <svg id="eyeOff" width="18" height="18" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
                             style="display:none">
                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
                            <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
                            <line x1="1" y1="1" x2="23" y2="23"/>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Remember me -->
            <div class="remember-row">
                <label class="cb-wrap">
                    <input type="checkbox" name="remember" id="remember">
                    <span class="cb-box"></span>
                </label>
                <label class="remember-label" for="remember">Remember me</label>
            </div>

            <button type="submit" class="btn-signin">Sign In</button>
        </form>

        <div class="links">
            <a href="signup.php">Create Account</a>
            <span class="divider">|</span>
            <a href="forgot-password.php">Forgot Password?</a>
        </div>
    </div>

    <script>
    /* ── Starfield ── */
    (function(){
        const c = document.getElementById('stars');
        const ctx = c.getContext('2d');
        let W, H, stars = [];
        function resize(){ W = c.width = innerWidth; H = c.height = innerHeight; }
        function init(){
            stars = [];
            for(let i=0;i<140;i++) stars.push({
                x: Math.random()*W, y: Math.random()*H,
                r: Math.random()*1.1+0.3,
                o: Math.random()*0.5+0.15,
                s: Math.random()*0.0004+0.0001
            });
        }
        function draw(){
            ctx.clearRect(0,0,W,H);
            stars.forEach(s=>{
                s.o += s.s; if(s.o>0.65||s.o<0.1) s.s*=-1;
                ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,Math.PI*2);
                ctx.fillStyle=`rgba(255,255,255,${s.o})`; ctx.fill();
            });
            requestAnimationFrame(draw);
        }
        window.addEventListener('resize', ()=>{ resize(); init(); });
        resize(); init(); draw();
    })();

    /* ── Password eye toggle ── */
    (function(){
        const btn    = document.getElementById('eyeBtn');
        const input  = document.getElementById('password');
        const eyeOn  = document.getElementById('eyeOpen');
        const eyeOff = document.getElementById('eyeOff');
        btn.addEventListener('click', ()=>{
            const show = input.type === 'password';
            input.type = show ? 'text' : 'password';
            eyeOn.style.display  = show ? 'none'  : '';
            eyeOff.style.display = show ? ''      : 'none';
        });
    })();
    </script>
</body>
</html>
