// LoginView.tsx
import React, {useEffect, useState} from 'react';
import { useNavigate } from 'react-router-dom';
import {AuthService, OpenAPI} from '../../openapi'; // Adjust import path

const containerStyle = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
};

const cardStyle = {
    padding: '50px',
    width: '350px',
    backgroundColor: '#fff',
    boxShadow: '0 15px 30px rgba(0, 0, 0, 0.1)',
    borderRadius: '8px',
    textAlign: 'center' as const,
    animation: 'fadeIn 1s ease-in-out',
};

const inputStyle = {
    width: '100%',
    padding: '15px',
    margin: '10px 0',
    borderRadius: '30px',
    border: '1px solid #ddd',
    fontSize: '16px',
    transition: 'border-color 0.3s ease',
};

const buttonStyle = {
    width: '100%',
    padding: '15px',
    margin: '20px 0',
    borderRadius: '30px',
    backgroundColor: '#764ba2',
    color: '#fff',
    border: 'none',
    fontSize: '16px',
    cursor: 'pointer',
    transition: 'background 0.3s ease',
};

const errorStyle = {
    color: 'red',
    marginTop: '20px',
    fontWeight: 'bold',
};

const LoginView: React.FC = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const navigate = useNavigate();

    useEffect(() => {
        const isTestEnv = import.meta.env.MODE === 'test';
        OpenAPI.BASE = isTestEnv
            ? import.meta.env.VITE_OPENAPI_BASE_TEST
            : import.meta.env.VITE_OPENAPI_BASE_DEV;
        ;
    }, []);

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();

        try {
            const response = await AuthService.loginAuthTokenLoginPost({
                grant_type: 'password',
                username: username,
                password: password,
            });

            localStorage.setItem('token', response.access_token);
            navigate('/'); // Redirect post-login
        } catch (err) {
            setError('Login failed. Please check your credentials.');
        }
    };

    return (
        <div style={containerStyle}>
            <form style={cardStyle} onSubmit={handleLogin}>
                <h2>Welcome Back!</h2>
                <input
                    style={{
                        ...inputStyle,
                        borderColor: username ? '#764ba2' : '#ddd',
                    }}
                    type="text"
                    placeholder="Username"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                    required
                />
                <input
                    style={{
                        ...inputStyle,
                        borderColor: password ? '#764ba2' : '#ddd',
                    }}
                    type="password"
                    placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                />
                <button
                    style={{
                        ...buttonStyle,
                        backgroundColor: '#764ba2',
                    }}
                    type="submit"
                    onMouseOver={(e) =>
                        (e.currentTarget.style.backgroundColor = '#6a3a89')
                    }
                    onMouseOut={(e) =>
                        (e.currentTarget.style.backgroundColor = '#764ba2')
                    }
                >
                    Login
                </button>
                {error && <p style={errorStyle}>{error}</p>}
            </form>
        </div>
    );
};

export default LoginView;