<?php
/**
 * Login View — Helmyx Auth Page
 */
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign In — Helmyx</title>
    <meta name="description" content="Sign in to Helmyx project management platform">
    <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=Montserrat:wght@600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= defined('APP_URL') ? APP_URL : '' ?>/assets/brand/favicon/helmyx-icon-32.png">
    <link rel="stylesheet" href="<?= defined('APP_URL') ? APP_URL : '' ?>/assets/css/hx-tokens.css">
    <link rel="stylesheet" href="<?= defined('APP_URL') ? APP_URL : '' ?>/assets/css/style.css">
    <link rel="stylesheet" href="<?= defined('APP_URL') ? APP_URL : '' ?>/assets/css/auth.css">
    <style>
        .password-wrapper { position: relative; }
        .password-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0; }
        .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-muted); font-size: 0.8rem; }
        .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
    </style>
</head>
<body class="auth-body">

<div class="auth-wrapper">
    <!-- Floating decorative shapes -->
    <div class="auth-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
        <div class="shape shape-4"></div>
    </div>

    <div class="auth-card">
        <!-- Logo -->
        <div class="auth-logo">
            <img src="<?= APP_URL ?>/assets/brand/logo/helmyx-horizontal.svg" alt="Helmyx — Steer. Plan. Deliver." style="height:46px;">
        </div>

        <h1 class="auth-title">Welcome back</h1>
        <p class="auth-subtitle">Sign in to your account to continue</p>

        <!-- Flash Messages -->
        <?php if (!empty($_SESSION['flash'])): ?>
            <?php foreach ($_SESSION['flash'] as $type => $message): ?>
                <div class="alert alert-<?= htmlspecialchars($type) ?>" style="margin-bottom:16px;">
                    <span><?= htmlspecialchars($message) ?></span>
                    <button class="alert-dismiss" onclick="this.parentElement.remove()">&times;</button>
                </div>
            <?php endforeach; unset($_SESSION['flash']); ?>
        <?php endif; ?>


        <form method="POST" action="<?= APP_URL ?>/login" id="loginForm" novalidate>
            <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">

            <div class="form-group">
                <label class="form-label" for="email">Email Address</label>
                <div class="input-group">
                    <span class="input-icon left">
                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,12 2,6"/></svg>
                    </span>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        class="form-control input-with-icon-left"
                        placeholder="you@company.com"
                        autocomplete="email"
                        required
                        value="<?= htmlspecialchars($_POST['email'] ?? '') ?>"
                    >
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="password">
                    Password
                    <a href="<?= APP_URL ?>/forgot-password" style="font-weight:400;font-size:0.8rem;color:var(--primary);float:right;text-decoration:none;">Forgot password?</a>
                </label>
                <div class="password-wrapper input-group">
                    <span class="input-icon left">
                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    </span>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        class="form-control input-with-icon-left"
                        placeholder="Enter your password"
                        autocomplete="current-password"
                        required
                        style="padding-right:44px;"
                    >
                    <button type="button" class="password-toggle" onclick="togglePassword('password', this)" title="Show/hide password">
                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" id="eye-icon"><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>
                    </button>
                </div>
            </div>

            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.875rem;color:var(--text-secondary);">
                    <input type="checkbox" name="remember" id="remember" style="width:16px;height:16px;accent-color:var(--primary);">
                    Remember me for 30 days
                </label>
            </div>

            <button type="submit" class="btn btn-primary w-full btn-lg" id="loginBtn" style="justify-content:center;">
                <span id="loginBtnText">Sign In</span>
                <span id="loginSpinner" class="spinner spinner-sm" style="display:none;border-color:rgba(255,255,255,0.3);border-top-color:white;"></span>
            </button>
        </form>

        <p style="text-align:center;margin-top:24px;font-size:0.85rem;">
            New organization? <a href="<?= APP_URL ?>/signup" style="color:var(--primary);text-decoration:none;font-weight:600;">Sign up</a>
        </p>

        <p style="text-align:center;margin-top:12px;font-size:0.8rem;color:var(--text-muted);">
            &copy; <?= date('Y') ?> Helmyx. All rights reserved.
        </p>
    </div>
</div>

<script>
function togglePassword(inputId, btn) {
    const input = document.getElementById(inputId);
    if (input.type === 'password') {
        input.type = 'text';
        btn.innerHTML = `<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><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.94M9.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.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`;
    } else {
        input.type = 'password';
        btn.innerHTML = `<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><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>`;
    }
}

document.getElementById('loginForm').addEventListener('submit', function() {
    const btn = document.getElementById('loginBtn');
    document.getElementById('loginBtnText').textContent = 'Signing in...';
    document.getElementById('loginSpinner').style.display = 'inline-block';
    btn.disabled = true;
});
</script>
</body>
</html>
