<?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 ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $identifier = trim($_POST['identifier'] ?? '');

    if (!$identifier) {
        $err = $is_ar ? 'الرجاء إدخال البريد الإلكتروني أو اسم المستخدم' : 'Please enter your email or username';
    } else {
        // هنا يتم وضع منطق التحقق من قاعدة البيانات وإرسال البريد
        // كمثال سنفترض النجاح دائماً في العرض التجريبي
        $msg = $is_ar ? 'إذا كان الحساب موجوداً، فستصلك تعليمات الاستعادة قريباً' : 'If the account exists, recovery instructions will be sent shortly';
    }
}
?>
<!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 ? 'استعادة كلمة المرور | نظام الإدارة' : 'Reset Password | 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;
        }

        /* Shared Background Styles */
        .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%);
        }

        .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: 32px;
        }

        .brand-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            background: rgba(37, 99, 235, 0.1);
            color: var(--primary-accent);
            border-radius: 16px;
            margin-bottom: 20px;
        }

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

        .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;
        }

        .btn-auth {
            width: 100%;
            background-color: var(--primary-accent);
            color: #ffffff;
            border: none;
            border-radius: 14px;
            padding: 16px;
            font-weight: 700;
            font-size: 1rem;
            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);
        }

        .back-to-login {
            display: block;
            text-align: center;
            margin-top: 24px;
            font-size: 0.9rem;
            color: var(--primary-accent);
            text-decoration: none;
            font-weight: 600;
        }

        .back-to-login:hover {
            text-decoration: underline;
        }

        /* Alerts */
        .alert-ui {
            padding: 14px 20px;
            border-radius: 14px;
            margin-bottom: 24px;
            font-size: 0.9rem;
            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; }

        .lang-switch-container {
            position: fixed;
            top: 24px;
            <?= $is_ar ? 'left' : 'right' ?>: 24px;
        }

        .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;
        }
    </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">
            <?= $is_ar ? 'English' : 'العربية' ?>
        </a>
    </div>

    <div class="auth-container">
        <div class="auth-card">
            <div class="brand-section">
                <div class="brand-icon">
                    <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
                    </svg>
                </div>
                <h1 class="brand-title"><?= $is_ar ? 'نسيت كلمة المرور؟' : 'Forgot Password?' ?></h1>
                <p class="brand-subtitle"><?= $is_ar ? 'أدخل بياناتك لاستعادة الوصول إلى حسابك' : 'Enter your details to recover your account' ?></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 ? 'البريد الإلكتروني أو اسم المستخدم' : 'Email or Username') ?></label>
                    <input type="text" name="identifier" class="input-control" placeholder="<?= $is_ar ? 'مثال: user@example.com' : 'e.g. user@example.com' ?>" required autofocus>
                </div>

                <button type="submit" class="btn-auth">
                    <span><?= esc($is_ar ? 'إرسال رابط الاستعادة' : 'Send Reset Link') ?></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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                </button>

                <a href="login.php" class="back-to-login">
                    <?= $is_ar ? '← العودة لتسجيل الدخول' : '← Back to Login' ?>
                </a>
            </form>
        </div>
        
        <div class="system-footer" style="text-align: center; margin-top: 40px; color: var(--text-muted); font-size: 0.85rem;">
            &copy; 2025 Top Accessories Tools
        </div>
    </div>

</body>
</html>