<?php 
if (session_status() === PHP_SESSION_NONE) { session_start(); }

// ----------------------------------------------------------------------
// রিডাইরেক্ট বন্ধ করা হয়েছে: লগইন করা ইউজাররাও এখন এই পেজ ভিজিট করতে পারবে
// ----------------------------------------------------------------------

// 100% SEO Setup for Login Page
$page_title = "Log In | Free Invoice Generator";
$page_description = "Log in to your Free Invoice Generator account to access your dashboard, create professional invoices, and manage your billing securely.";

// Absolute Path for Header (যেকোনো ফোল্ডার থেকে কাজ করবে)
$doc_root = $_SERVER['DOCUMENT_ROOT'];
if (file_exists($doc_root . '/includes/header.php')) {
    require_once $doc_root . '/includes/header.php';
} elseif (file_exists($doc_root . '/header.php')) {
    require_once $doc_root . '/header.php';
} else {
    include '../header.php'; // Fallback
}
?>

<style>
    .login-main-content { display: flex; justify-content: center; align-items: center; padding: 60px 20px; background-color: #f8fafc; min-height: 75vh; }
    .login-card { background-color: #ffffff; width: 100%; max-width: 400px; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); font-family: 'Inter', sans-serif; border: 1px solid #e2e8f0; }
    .login-card h2 { text-align: center; color: #1e293b; margin-bottom: 10px; font-size: 26px; }
    .login-card p.subtitle { text-align: center; color: #64748b; margin-bottom: 25px; font-size: 14px; }
    
    .alert { padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; text-align: center; font-weight: 500; }
    .alert-error { background-color: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
    .alert-success { background-color: #dcfce3; color: #166534; border: 1px solid #bbf7d0; }
    .alert-info { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; text-align: left; padding: 15px; border-radius: 8px;}

    .btn-google { width: 100%; background-color: #ffffff; color: #1e293b; border: 1px solid #e2e8f0; padding: 12px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; transition: all 0.3s; margin-bottom: 20px; }
    .btn-google:hover { background-color: #f1f5f9; }
    .btn-google img { width: 20px; }
    
    .divider { display: flex; align-items: center; text-align: center; margin-bottom: 20px; }
    .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #e2e8f0; }
    .divider span { padding: 0 15px; color: #64748b; font-size: 13px; font-weight: 500; text-transform: uppercase; }
    
    .form-group { margin-bottom: 18px; position: relative; text-align: left; }
    .form-group label { display: block; font-size: 13px; color: #1e293b; font-weight: 600; margin-bottom: 6px; }
    .form-group input { width: 100%; padding: 12px 40px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #1e293b; outline: none; box-sizing: border-box; transition: 0.3s;}
    .form-group input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
    .form-group .left-icon { position: absolute; left: 15px; top: 38px; color: #94a3b8; font-size: 14px; }
    .form-group .toggle-password { position: absolute; right: 15px; top: 38px; color: #94a3b8; font-size: 15px; cursor: pointer; transition: 0.3s; }
    .form-group .toggle-password:hover { color: #10b981; }

    .forgot-pass { text-align: right; margin-bottom: 15px; }
    .forgot-pass a { font-size: 13px; color: #10b981; text-decoration: none; font-weight: 600; }
    .forgot-pass a:hover { text-decoration: underline; }

    .btn-submit { width: 100%; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);}
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4); }
    
    .signup-link { text-align: center; margin-top: 20px; font-size: 14px; color: #64748b; }
    .signup-link a { color: #10b981; text-decoration: none; font-weight: 600; }
</style>

<main class="login-main-content">
    <div class="login-card">
        <h2>Welcome Back</h2>
        <p class="subtitle">Log in to continue to your dashboard.</p>

        <!-- যদি ইউজার আগে থেকেই লগইন থাকে, তবে তাকে সুন্দর একটি নোটিফিকেশন দেখানো হবে -->
        <?php if(isset($_SESSION['user_logged_in']) && $_SESSION['user_logged_in'] === true): ?>
            <div class="alert alert-info">
                <i class="fas fa-check-circle"></i> You are already logged in as <strong><?php echo htmlspecialchars($_SESSION['user_name'] ?? 'User', ENT_QUOTES, 'UTF-8'); ?></strong>.
                <br>
                <a href="/dashboard" style="display: inline-block; margin-top: 8px; color: #166534; font-weight: 700; text-decoration: underline;">Go to Dashboard &rarr;</a>
            </div>
        <?php endif; ?>

        <!-- Error & Success Messages -->
        <?php 
        if (isset($_SESSION['error'])) { 
            echo "<div class='alert alert-error'><i class='fas fa-exclamation-circle'></i> " . $_SESSION['error'] . "</div>"; 
            unset($_SESSION['error']); 
        } 
        if (isset($_SESSION['success'])) { 
            echo "<div class='alert alert-success'><i class='fas fa-check-circle'></i> " . $_SESSION['success'] . "</div>"; 
            unset($_SESSION['success']); 
        } 
        ?>

        <!-- Google Login API (Optional) -->
        <a href="/api/google-login.php" style="text-decoration: none;">
            <button type="button" class="btn-google">
                <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" alt="Google">
                Log in with Google
            </button>
        </a>

        <div class="divider"><span>Or log in with email</span></div>

        <!-- Login Form Action pointing to the secure login_api.php -->
        <form action="/api/auth/login_api.php" method="POST">
            <div class="form-group">
                <label>Email or Username</label>
                <i class="fas fa-user left-icon"></i>
                <input type="text" name="email" placeholder="Enter your email or username" required>
            </div>
            
            <div class="form-group" style="margin-bottom: 10px;">
                <label>Password</label>
                <i class="fas fa-lock left-icon"></i>
                <input type="password" name="password" id="password" placeholder="Enter your password" required>
                <i class="fas fa-eye toggle-password" onclick="togglePassword()"></i>
            </div>
            
            <div class="forgot-pass">
                <a href="/forgot-password">Forgot Password?</a>
            </div>

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

        <div class="signup-link">Don't have an account? <a href="/signup">Sign up here</a></div>
    </div>
</main>

<script>
    function togglePassword() {
        var input = document.getElementById('password');
        var icon = document.querySelector('.toggle-password');
        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove("fa-eye");
            icon.classList.add("fa-eye-slash");
            icon.style.color = "#10b981";
        } else {
            input.type = "password";
            icon.classList.remove("fa-eye-slash");
            icon.classList.add("fa-eye");
            icon.style.color = "#94a3b8";
        }
    }
</script>

<?php 
// Absolute Path for Footer
if (file_exists($doc_root . '/includes/footer.php')) {
    require_once $doc_root . '/includes/footer.php';
} elseif (file_exists($doc_root . '/footer.php')) {
    require_once $doc_root . '/footer.php';
} else {
    include '../footer.php'; // Fallback
}
?>