<?php
/**
 * Login Page - Server-side authentication
 */

declare(strict_types=1);

// Load config and auth
$configPath = __DIR__ . '/config.php';
if (!file_exists($configPath)) {
    die('Configuration file not found');
}
$config = require $configPath;

require_once __DIR__ . '/src/auth.php';

$auth = new \Notifier\Auth($config);

// If already authenticated, redirect to dashboard
if ($auth->isAuthenticated()) {
    header('Location: /notifier/dashboard/');
    exit;
}

$error = '';

// Handle login form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $password = $_POST['password'] ?? '';

    if (empty($password)) {
        $error = 'Please enter a password';
    } elseif ($auth->login($password)) {
        header('Location: /notifier/dashboard/');
        exit;
    } else {
        $error = 'Invalid password';
    }
}

$pageTitle = 'Login';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Notifier</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] } } } }
    </script>
    <style>
        * { letter-spacing: -0.01em; }
        body { font-size: 13px; }
    </style>
</head>
<body class="bg-slate-50 min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-sm">
        <!-- Logo -->
        <div class="text-center mb-8">
            <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-indigo-500/30">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                </svg>
            </div>
            <h1 class="text-xl font-bold text-slate-900">Notifier</h1>
            <p class="text-xs text-slate-400 mt-1">Telegram notification scheduler</p>
        </div>

        <!-- Login Card -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
            <form method="POST" action="" class="space-y-4">
                <div>
                    <label class="text-xs font-medium text-slate-500 mb-1.5 block">Password</label>
                    <div class="relative">
                        <input type="password" name="password" id="password" placeholder="Enter your password" autocomplete="current-password"
                            class="w-full h-10 px-3 pr-10 bg-slate-100 border-0 rounded-lg text-sm focus:bg-white focus:ring-2 focus:ring-indigo-500/20">
                        <button type="button" id="toggle-password" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
                            <svg class="w-4 h-4" id="eye-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <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"/>
                            </svg>
                        </button>
                    </div>
                    <?php if ($error): ?>
                        <p class="text-red-500 text-xs mt-2"><?= htmlspecialchars($error) ?></p>
                    <?php endif; ?>
                </div>
                <button type="submit" class="w-full h-10 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg text-sm font-medium transition-colors">
                    Sign In
                </button>
            </form>
        </div>
    </div>

    <script>
        const passwordInput = document.getElementById('password');
        const toggleBtn = document.getElementById('toggle-password');

        toggleBtn.addEventListener('click', () => {
            const isPassword = passwordInput.type === 'password';
            passwordInput.type = isPassword ? 'text' : 'password';
        });

        passwordInput.focus();
    </script>
</body>
</html>
