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

// Redirect if already logged in
if (isLoggedIn() && $_SESSION['role'] === 'master_admin') {
    redirect(SITE_URL . '/admin/dashboard.php');
}

$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = sanitize($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';

    if (!$db_connected) {
        $error = 'Database not connected yet. Please run the setup script at /cricket-setup.php?token=CricketExchange@Setup2024 to create tables.';
    } elseif (empty($username) || empty($password)) {
        $error = 'Please enter username and password.';
    } else {
        $stmt = $conn->prepare("SELECT id, username, password, full_name FROM master_admin WHERE username = ? LIMIT 1");
        $stmt->bind_param('s', $username);
        $stmt->execute();
        $result = $stmt->get_result();
        $admin = $result->fetch_assoc();

        if ($admin && password_verify($password, $admin['password'])) {
            $_SESSION['user_id'] = $admin['id'];
            $_SESSION['username'] = $admin['username'];
            $_SESSION['full_name'] = $admin['full_name'];
            $_SESSION['role'] = 'master_admin';
            redirect(SITE_URL . '/admin/dashboard.php');
        } else {
            $error = 'Invalid username or password.';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master Admin Login - Cricket Exchange</title>
    <meta name="description" content="Cricket Exchange Master Admin Control Panel">
    <link rel="stylesheet" href="../assets/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        .login-page { background: var(--bg-dark); }
        .role-selector {
            display: flex;
            gap: 8px;
            margin-bottom: 28px;
            background: var(--bg-card2);
            padding: 4px;
            border-radius: 10px;
        }
        .role-btn {
            flex: 1;
            padding: 8px;
            text-align: center;
            border-radius: 8px;
            border: none;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            display: block;
            color: var(--text-muted);
            background: none;
        }
        .role-btn.active {
            background: linear-gradient(135deg, var(--admin-accent), #4f46e5);
            color: white;
        }
        .divider {
            text-align: center;
            margin: 20px 0;
            position: relative;
            color: var(--text-dim);
            font-size: 13px;
        }
        .divider::before, .divider::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 35%;
            height: 1px;
            background: var(--border);
        }
        .divider::before { left: 0; }
        .divider::after { right: 0; }
    </style>
</head>
<body>
    <div class="login-bg-particles"></div>
    <div class="login-page">
        <div class="login-box">
            <div class="login-logo">
                <div class="logo-icon">🏏</div>
                <h1>CRICKET EXCHANGE</h1>
                <p>Master Admin Control Panel</p>
            </div>

            <div class="role-selector">
                <span class="role-btn active">🔐 Master Admin</span>
                <a href="subadmin_login.php" class="role-btn">👤 Sub Admin</a>
                <a href="user_login.php" class="role-btn">🙋 User</a>
            </div>

            <?php if ($error): ?>
            <div class="alert alert-error">
                <i class="fas fa-exclamation-circle"></i>
                <?= htmlspecialchars($error) ?>
            </div>
            <?php endif; ?>

            <form method="POST" id="loginForm">
                <div class="form-group">
                    <label for="username">Admin Username</label>
                    <div class="input-wrapper">
                        <i class="fas fa-user input-icon"></i>
                        <input type="text" id="username" name="username" class="form-control" 
                               placeholder="Enter admin username" required autocomplete="username"
                               value="<?= htmlspecialchars($_POST['username'] ?? '') ?>">
                    </div>
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <div class="input-wrapper">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password" id="password" name="password" class="form-control"
                               placeholder="Enter password" required autocomplete="current-password">
                        <button type="button" onclick="togglePass('password')" 
                                style="position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;">
                            <i class="fas fa-eye" id="password-eye"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-full" id="loginBtn">
                    <i class="fas fa-sign-in-alt"></i>
                    Login to Admin Panel
                </button>
            </form>

            <div class="divider">secured access</div>
            <p style="text-align:center;font-size:12px;color:var(--text-dim);">
                <i class="fas fa-shield-alt" style="color:var(--primary)"></i>
                All login attempts are monitored and logged
            </p>
        </div>
    </div>

    <script>
        function togglePass(id) {
            const input = document.getElementById(id);
            const eye = document.getElementById(id + '-eye');
            if (input.type === 'password') {
                input.type = 'text';
                eye.className = 'fas fa-eye-slash';
            } else {
                input.type = 'password';
                eye.className = 'fas fa-eye';
            }
        }

        document.getElementById('loginForm').addEventListener('submit', function() {
            const btn = document.getElementById('loginBtn');
            btn.innerHTML = '<div class="spinner"></div> Logging in...';
            btn.disabled = true;
        });
    </script>
</body>
</html>
