<?php
require_once __DIR__ . '/config/db.php';
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// اللغة
$lang = ($_GET['lang'] ?? 'en') === 'ar' ? 'ar' : 'en';
$is_ar = $lang === 'ar';

function esc($v){ return htmlspecialchars($v ?? '', ENT_QUOTES, 'UTF-8'); }

$msg = '';
$err = '';

// إذا المستخدم داخل مسبقًا
if (!empty($_SESSION['user_id'])) {
    header('Location: index.php');
    exit;
}

// تسجيل الدخول
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    $password = trim($_POST['password'] ?? '');
    $remember = isset($_POST['remember']);

    if (!$username || !$password) {
        $err = $is_ar ? 'الرجاء إدخال اسم المستخدم وكلمة المرور' : 'Please enter username and password';
    } else {
        $stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
        $stmt->execute([$username]);
        $user = $stmt->fetch(PDO::FETCH_ASSOC);

        if ($user && password_verify($password, $user['password'])) {
            $_SESSION['user_id'] = $user['id'];
            $_SESSION['username'] = $user['username'];
            $_SESSION['role'] = $user['role'];
            $pdo->prepare("UPDATE users SET last_login = NOW() WHERE id = ?")->execute([$user['id']]);

            if ($remember) {
                setcookie("remember_user", $user['id'], time() + (7 * 24 * 60 * 60), "/");
            }

            header('Location: index.php');
            exit;
        } else {
            $err = $is_ar ? 'بيانات الدخول غير صحيحة' : 'Invalid credentials';
        }
    }
}
?>
<!doctype html>
<html lang="<?= esc($is_ar ? 'ar' : 'en') ?>" dir="<?= $is_ar ? 'rtl' : 'ltr' ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title><?= esc($is_ar ? 'تسجيل الدخول | نظام الإدارة' : 'Login | Management System') ?></title>
    
    <!-- Professional Fonts -->
    <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=Cairo:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-accent: #2563eb;
            --primary-hover: #1d4ed8;
            --bg-body: #f1f5f9;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --card-bg: #ffffff;
            --border-color: #e2e8f0;
        }

        body {
            font-family: <?= $is_ar ? "'Cairo', sans-serif" : "'Inter', sans-serif" ?>;
            background-color: var(--bg-body);
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            position: relative;
            overflow: hidden;
        }

        /* Luxurious & Orderly Background */
        .bg-pattern {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            background-color: #f8fafc;
            background-image: 
                radial-gradient(#e2e8f0 1.5px, transparent 1.5px), 
                radial-gradient(#e2e8f0 1.5px, #f8fafc 1.5px);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
            opacity: 0.6;
        }

        .bg-gradient-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            background: radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 40%),
                        radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.08) 0%, transparent 40%),
                        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
        }

        /* Subtle animated glow spot */
        .glow-spot {
            position: fixed;
            width: 40vw; height: 40vw;
            background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
            border-radius: 50%;
            z-index: -1;
            animation: moveGlow 20s infinite alternate;
        }

        @keyframes moveGlow {
            from { transform: translate(-20%, -20%); }
            to { transform: translate(20%, 20%); }
        }

        .auth-container {
            width: 100%;
            max-width: 440px;
            padding: 24px;
            position: relative;
            z-index: 10;
        }

        .auth-card {
            background: var(--card-bg);
            border-radius: 28px;
            padding: 48px 40px;
            box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            animation: authFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes authFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .brand-section {
            text-align: center;
            margin-bottom: 36px;
        }

        .brand-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            color: #ffffff;
            border-radius: 18px;
            margin-bottom: 20px;
            box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.3);
        }

        .brand-title {
            font-size: 1.65rem;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 6px;
            letter-spacing: -0.03em;
        }

        .brand-subtitle {
            font-size: 0.95rem;
            color: var(--text-muted);
        }

        /* Form Controls */
        .form-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #475569;
            margin-bottom: 10px;
            display: block;
        }

        .input-control {
            width: 100%;
            background-color: #f8fafc;
            border: 1.5px solid #f1f5f9;
            border-radius: 14px;
            padding: 14px 18px;
            font-size: 1rem;
            color: var(--text-main);
            transition: all 0.25s ease;
        }

        .input-control:focus {
            outline: none;
            border-color: var(--primary-accent);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
            background-color: #ffffff;
        }

        .password-wrapper {
            position: relative;
        }

        .view-toggle {
            position: absolute;
            top: 50%;
            <?= $is_ar ? 'left' : 'right' ?>: 18px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #94a3b8;
            transition: color 0.2s;
            display: flex;
            align-items: center;
        }

        .view-toggle:hover {
            color: var(--primary-accent);
        }

        /* Auth Button */
        .btn-auth {
            width: 100%;
            background-color: var(--primary-accent);
            color: #ffffff;
            border: none;
            border-radius: 14px;
            padding: 16px;
            font-weight: 700;
            font-size: 1.05rem;
            margin-top: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .btn-auth:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 12px 20px -5px rgba(37, 99, 235, 0.35);
        }

        .btn-auth:active {
            transform: translateY(0);
        }

        /* Footer Links */
        .auth-footer-links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 24px;
            font-size: 0.9rem;
        }

        .form-check-label {
            color: var(--text-muted);
            cursor: pointer;
            user-select: none;
        }

        .link-muted {
            color: var(--primary-accent);
            text-decoration: none;
            font-weight: 600;
        }

        .link-muted:hover {
            text-decoration: underline;
        }

        /* Lang Button */
        .lang-switch-container {
            position: fixed;
            top: 24px;
            <?= $is_ar ? 'left' : 'right' ?>: 24px;
            z-index: 1000;
        }

        .lang-button {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(8px);
            border: 1px solid var(--border-color);
            padding: 10px 20px;
            border-radius: 12px;
            color: var(--text-main);
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 600;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            transition: all 0.2s;
        }

        .lang-button:hover {
            background: #ffffff;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        }

        /* Custom Alerts */
        .alert-ui {
            padding: 14px 20px;
            border-radius: 14px;
            margin-bottom: 28px;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid transparent;
        }

        .alert-ui-danger {
            background-color: #fff1f2;
            color: #be123c;
            border-color: #ffe4e6;
        }

        .alert-ui-success {
            background-color: #f0fdf4;
            color: #15803d;
            border-color: #dcfce7;
        }

        .system-footer {
            text-align: center;
            margin-top: 40px;
            color: var(--text-muted);
            font-size: 0.85rem;
            letter-spacing: 0.02em;
        }
    </style>
</head>
<body>

    <div class="bg-pattern"></div>
    <div class="bg-gradient-overlay"></div>
    <div class="glow-spot"></div>

    <div class="lang-switch-container">
        <a href="?lang=<?= $is_ar ? 'en' : 'ar' ?>" class="lang-button">
            <span>🌐</span> <?= $is_ar ? 'English' : 'العربية' ?>
        </a>
    </div>

    <div class="auth-container">
        <div class="auth-card">
            <div class="brand-section">
                <div class="brand-icon">
                    <svg width="30" height="30" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A10.003 10.003 0 0012 3m0 0l.054.09A10.003 10.003 0 0018.193 18.532l.054.09A10.003 10.003 0 0112 3z"></path>
                    </svg>
                </div>
                <h1 class="brand-title">Top Accessories</h1>
                <p class="brand-subtitle"><?= $is_ar ? 'سجل دخولك للوصول إلى لوحة التحكم' : 'Sign in to access your dashboard' ?></p>
            </div>

            <?php if ($msg): ?>
                <div class="alert-ui alert-ui-success">
                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
                    <span><?= esc($msg) ?></span>
                </div>
            <?php endif; ?>

            <?php if ($err): ?>
                <div class="alert-ui alert-ui-danger">
                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                    <span><?= esc($err) ?></span>
                </div>
            <?php endif; ?>

            <form method="post">
                <div class="mb-4">
                    <label class="form-label"><?= esc($is_ar ? 'اسم المستخدم' : 'Username') ?></label>
                    <input type="text" name="username" class="input-control" placeholder="<?= $is_ar ? 'أدخل اسم المستخدم' : 'Enter username' ?>" required autofocus>
                </div>

                <div class="mb-4">
                    <label class="form-label"><?= esc($is_ar ? 'كلمة المرور' : 'Password') ?></label>
                    <div class="password-wrapper">
                        <input type="password" name="password" id="password" class="input-control" placeholder="••••••••" required>
                        <span class="view-toggle" onclick="togglePassword()">
                            <svg id="eye-icon" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                        </span>
                    </div>
                </div>

                <div class="auth-footer-links mb-4">
                    <div class="form-check d-flex align-items-center gap-2">
                        <input class="form-check-input" type="checkbox" name="remember" id="remember" style="width: 18px; height: 18px;">
                        <label class="form-check-label" for="remember">
                            <?= esc($is_ar ? 'تذكرني' : 'Keep me signed in') ?>
                        </label>
                    </div>
                    <a href="forgot_password.php" class="link-muted"><?= esc($is_ar ? 'نسيت كلمة السر؟' : 'Recover Access?') ?></a>
                </div>

                <button type="submit" class="btn-auth">
                    <span><?= esc($is_ar ? 'دخول للنظام' : 'Authorize & Sign In') ?></span>
                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                </button>
            </form>
        </div>

        <div class="system-footer">
            &copy; 2026 Top Accessories Tools &bull; 
        </div>
    </div>

    <script>
        function togglePassword() {
            const pass = document.getElementById('password');
            const icon = document.getElementById('eye-icon');
            if (pass.type === 'password') {
                pass.type = 'text';
                icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l18 18"></path>';
            } else {
                pass.type = 'password';
                icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>';
            }
        }
    </script>

</body>
</html>