<?php
session_start();
require_once __DIR__ . '/../config.php';

// Si déjà loggé, rediriger
if (isset($_SESSION['user_id'])) {
    redirect('dashboard.php');
}

$error = '';
$timeout = isset($_GET['timeout']);

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

    if (empty($username) || empty($password)) {
        $error = "Veuillez remplir tous les champs.";
    } else {
        try {
            $db = getDB();
            $stmt = $db->prepare("SELECT * FROM users WHERE username = ?");
            $stmt->execute([$username]);
            $user = $stmt->fetch();

            if ($user && password_verify($password, $user['password'])) {
                // Login OK
                $_SESSION['user_id'] = $user['id'];
                $_SESSION['username'] = $user['username'];
                $_SESSION['full_name'] = $user['full_name'];
                $_SESSION['email'] = $user['email'];
                $_SESSION['last_activity'] = time();

                // Update last login
                $stmt = $db->prepare("UPDATE users SET last_login = NOW() WHERE id = ?");
                $stmt->execute([$user['id']]);

                redirect('dashboard.php');
            } else {
                $error = "Identifiants incorrects.";
            }
        } catch (Exception $e) {
            $error = "Erreur de connexion. Veuillez réessayer.";
        }
    }
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion — Espace Avocat</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600;700&family=Italiana&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --noir: #0a0a0a; --noir-soft: #1a1a1a;
            --cream: #f5f1e8; --cream-dark: #ebe5d4;
            --or: #c9a961; --or-dark: #a8893d;
            --gris: #8a8478; --gris-light: #c4bdaf;
        }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--noir);
            color: var(--cream);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        /* Background pattern */
        body::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(201, 169, 97, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(201, 169, 97, 0.05) 0%, transparent 50%);
        }

        body::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
            opacity: 0.05;
            pointer-events: none;
        }

        .login-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 460px;
            padding: 50px;
            background: rgba(26, 26, 26, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(201, 169, 97, 0.2);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        .login-container::before {
            content: '';
            position: absolute;
            top: -1px; left: -1px;
            width: 60px; height: 60px;
            border-top: 2px solid var(--or);
            border-left: 2px solid var(--or);
        }
        .login-container::after {
            content: '';
            position: absolute;
            bottom: -1px; right: -1px;
            width: 60px; height: 60px;
            border-bottom: 2px solid var(--or);
            border-right: 2px solid var(--or);
        }

        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .login-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            border: 2px solid var(--or);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--or);
            font-size: 32px;
        }

        .login-title {
            font-family: 'Italiana', serif;
            font-size: 36px;
            color: var(--cream);
            margin-bottom: 8px;
            letter-spacing: 2px;
        }

        .login-subtitle {
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            font-size: 17px;
            color: var(--gris-light);
        }

        .login-eyebrow {
            font-size: 10px;
            letter-spacing: 4px;
            color: var(--or);
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .form-field {
            margin-bottom: 25px;
        }

        .form-field label {
            display: block;
            font-size: 10px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gris);
            margin-bottom: 10px;
        }

        .form-field input {
            width: 100%;
            padding: 14px 16px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(201, 169, 97, 0.2);
            color: var(--cream);
            font-family: 'Cormorant Garamond', serif;
            font-size: 17px;
            outline: none;
            transition: all 0.3s ease;
        }

        .form-field input:focus {
            border-color: var(--or);
            background: rgba(0, 0, 0, 0.6);
        }

        .form-field input::placeholder {
            color: var(--gris);
            font-style: italic;
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gris);
            pointer-events: none;
        }

        .form-field input:focus + .input-icon {
            color: var(--or);
        }

        .form-submit {
            width: 100%;
            padding: 16px;
            background: var(--or);
            color: var(--noir);
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            letter-spacing: 4px;
            text-transform: uppercase;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            margin-top: 10px;
        }

        .form-submit::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: var(--cream);
            transition: left 0.4s ease;
            z-index: 0;
        }

        .form-submit span { position: relative; z-index: 1; }
        .form-submit:hover::before { left: 0; }

        .alert {
            padding: 14px 18px;
            margin-bottom: 25px;
            font-family: 'Cormorant Garamond', serif;
            font-size: 15px;
            border-left: 3px solid;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .alert.error {
            background: rgba(244, 67, 54, 0.1);
            border-color: #f44336;
            color: #ff8a80;
        }

        .alert.warning {
            background: rgba(255, 152, 0, 0.1);
            border-color: #ff9800;
            color: #ffb74d;
        }

        .login-footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 25px;
            border-top: 1px solid rgba(201, 169, 97, 0.15);
        }

        .login-footer a {
            color: var(--gris-light);
            text-decoration: none;
            font-size: 13px;
            transition: color 0.3s;
        }

        .login-footer a:hover { color: var(--or); }

        @media (max-width: 540px) {
            .login-container { padding: 35px 25px; margin: 20px; }
            .login-title { font-size: 28px; }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <div class="login-logo">
                <i class="fas fa-balance-scale"></i>
            </div>
            <div class="login-eyebrow">Espace Privé</div>
            <h1 class="login-title">Connexion</h1>
            <p class="login-subtitle">Maître Hicham Bouchareb</p>
        </div>

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

        <?php if ($timeout): ?>
            <div class="alert warning">
                <i class="fas fa-clock"></i>
                <span>Votre session a expiré. Veuillez vous reconnecter.</span>
            </div>
        <?php endif; ?>

        <form method="POST">
            <div class="form-field">
                <label>Nom d'utilisateur</label>
                <div class="input-wrapper">
                    <input type="text" name="username" placeholder="Votre identifiant" required autofocus>
                    <i class="fas fa-user input-icon"></i>
                </div>
            </div>

            <div class="form-field">
                <label>Mot de passe</label>
                <div class="input-wrapper">
                    <input type="password" name="password" placeholder="••••••••" required>
                    <i class="fas fa-lock input-icon"></i>
                </div>
            </div>

            <button type="submit" class="form-submit">
                <span>Se connecter</span>
            </button>
        </form>

        <div class="login-footer">
            <a href="../index.php"><i class="fas fa-arrow-left"></i>&nbsp; Retour au site</a>
        </div>
    </div>
</body>
</html>
