<?php
session_start();
require_once '../config.php';
require_once '../app/classes/AdminAuth.php';

$adminAuth = new AdminAuth($conn);

// Redirect if already logged in
if ($adminAuth->isAuthenticated()) {
    header('Location: index.php');
    exit();
}

$error = '';
$success = '';

// Handle login form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login'])) {
    $username = trim($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';
    
    // Validate input
    if (empty($username) || empty($password)) {
        $error = 'Please enter both username and password.';
    } else {
        // Authenticate using AdminAuth class
        $result = $adminAuth->authenticate($username, $password);
        
        if ($result['success']) {
            // Create session
            $adminAuth->createSession($result['admin']);
            
            // Redirect to admin dashboard
            header('Location: index.php');
            exit();
        } else {
            $error = $result['error'];
        }
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🔐 Admin Login | D-Bundles Stores</title>
    <meta name="description" content="Secure admin login for D-Bundles Stores - Access your administrative dashboard to manage agents, orders, and system configuration.">
    <meta name="keywords" content="admin login, D-Bundles Stores admin, secure login, administrative access">
    <meta name="author" content="D-Bundles Stores">
    
    <!-- Custom Dark Theme Styles -->
    <style>
        body { 
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
            color: #e2e8f0;
        }
        .dark-card {
            background: rgba(17, 24, 39, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(71, 85, 105, 0.3);
        }
        .dark-input {
            background-color: #1e293b !important;
            border-color: #475569 !important;
            color: #e2e8f0 !important;
        }
        .dark-input::placeholder {
            color: #94a3b8 !important;
        }
        .dark-input:focus {
            background-color: #1e293b !important;
            border-color: #3b82f6 !important;
            color: #e2e8f0 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        }
        .dark-label {
            color: #cbd5e1 !important;
        }
    </style>
    
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#8B5CF6',
                        danger: '#EF4444',
                        success: '#10B981',
                        dark: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            200: '#e2e8f0',
                            300: '#cbd5e1',
                            400: '#94a3b8',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            800: '#1e293b',
                            900: '#0f172a'
                        }
                    },
                    fontFamily: {
                        'inter': ['Inter', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
</head>

<body class="min-h-screen flex items-center justify-center px-4">
    <div class="w-full max-w-md">
        <!-- Login Card -->
        <div class="dark-card rounded-xl p-6 shadow-2xl">
            <!-- Header -->
            <div class="text-center mb-6">
                <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-shield-alt text-white text-2xl"></i>
                </div>
                <h1 class="text-xl font-bold text-gray-200 mb-1">Admin Portal</h1>
                <p class="text-sm text-gray-400">D-Bundles Stores Management</p>
            </div>

            <!-- Error Message -->
            <?php if (!empty($error)): ?>
            <div class="bg-red-900/20 border border-red-500/30 text-red-300 px-3 py-2 rounded-lg mb-4 flex items-center text-sm">
                <i class="fas fa-exclamation-circle mr-2"></i>
                <span><?= htmlspecialchars($error) ?></span>
            </div>
            <?php endif; ?>
            
            <!-- Success Message -->
            <?php if (!empty($success)): ?>
            <div class="bg-green-900/20 border border-green-500/30 text-green-300 px-3 py-2 rounded-lg mb-4 flex items-center text-sm">
                <i class="fas fa-check-circle mr-2"></i>
                <span><?= htmlspecialchars($success) ?></span>
            </div>
            <?php endif; ?>

            <!-- Login Form -->
            <form method="POST" class="space-y-4">
                <div>
                    <label for="username" class="block dark-label font-medium mb-1 text-sm">
                        Username
                    </label>
                    <input 
                        type="text" 
                        id="username" 
                        name="username" 
                        required
                        autocomplete="username"
                        class="w-full border-2 rounded-lg p-3 dark-input transition-all"
                        placeholder="Enter username"
                        value="<?= htmlspecialchars($_POST['username'] ?? '') ?>"
                    >
                </div>

                <div>
                    <label for="password" class="block dark-label font-medium mb-1 text-sm">
                        Password
                    </label>
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        required
                        autocomplete="current-password"
                        class="w-full border-2 rounded-lg p-3 dark-input transition-all"
                        placeholder="Enter password"
                    >
                </div>

                <button 
                    type="submit" 
                    name="login"
                    class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all shadow-lg"
                >
                    Sign In
                </button>
            </form>

            <!-- Security Notice -->
            <div class="mt-4 p-3 bg-yellow-900/20 border border-yellow-500/30 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-shield-alt text-yellow-400 mr-2"></i>
                    <p class="text-xs text-yellow-300">Secure admin area - All attempts logged</p>
                </div>
            </div>
        </div>

        <!-- System Info -->
        <div class="mt-4 text-center text-gray-500">
            <p class="text-xs">
                D-Bundles Stores Admin System v2.0
            </p>
        </div>
    </div>

    <!-- Auto-focus on username field -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('username').focus();
        });
    </script>
</body>
</html>
