// LoginComponent.jsx
import React, { useState } from 'react';
import { Input } from '@progress/kendo-react-inputs';
import { Label } from '@progress/kendo-react-labels';
import { Button } from '@progress/kendo-react-buttons';
import { Link } from 'react-router-dom';
import { Notification, NotificationGroup } from '@progress/kendo-react-notification';

const LoginComponent = ({ onLogin }) => {
    // Get credentials from environment
    const mockUsername = import.meta.env.VITE_MOCK_USERNAME;
    const mockPassword = import.meta.env.VITE_MOCK_PASSWORD;
    
    // Prepopulate with demo credentials from env
    const [username, setUsername] = useState(mockUsername);
    const [password, setPassword] = useState(mockPassword);
    const [error, setError] = useState('');

    const handleSubmit = (event) => {
        event.preventDefault();

        if (username === mockUsername && password === mockPassword) {
            onLogin(true);
        } else {
            console.error("Invalid username or password");
            setError("Invalid username or password. Please try again.");
            // Clear error after 50 seconds (long timeout for demo purposes)
            setTimeout(() => {
                setError('');
            }, 50000);
        }
    };

    return (
        <div style={{ marginBottom: '100px', width: '350px', margin: '0 auto 100px auto' }}>
            <form onSubmit={handleSubmit} style={{ width: '350px', contain: 'layout' }}>
                <div style={{ textAlign: 'center' }}>
                    <Label htmlFor="username">Username: </Label>
                    <Input style={{ border: '1px solid #edbd7d', width: '300px', maxWidth: '300px', minWidth: '300px' }} type="text" id="username" value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" />
                </div>
                <div style={{ textAlign: 'center' }}>
                    <Label htmlFor="password">Password: </Label>
                    <Input style={{ border: '1px solid #edbd7d', marginBottom: '10px', width: '300px', maxWidth: '300px', minWidth: '300px' }} type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
                </div>
                
                <div style={{ textAlign: 'center', marginBottom: '10px' }}>
                    <p style={{ 
                        fontSize: '14px', 
                        color: '#666', 
                        fontStyle: 'italic',
                        margin: '0 0 10px 0'
                    }}>
                        Just click 'Login'. The credentials are already loaded for you.
                    </p>
                    <Button look="flat" type="submit" style={{ padding: '0 20px' }}>Login</Button>
                </div>
                <div>
                    <NotificationGroup style={{ textAlign: 'center' }}>
                    {error && (<Notification type={{ style: 'error', icon: true }} closeable={true} onClose={() => setError('')}>
                        <span>{error}</span>
                        </Notification> )}
                    </NotificationGroup>
                </div>
            </form>
        </div>
    );
};

export default LoginComponent;