// External dependencies and icons needed for component logic
import { useState } from 'react';
import api from '../api';
import { Car } from 'lucide-react';

const Login = ({ onLogin }) => {
    // State variables for form fields, server errors, and spinner loading flags
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    // Form submission function to send credentials to the server and store auth token
    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');
        try {
            const res = await api.post('/auth/login', { email, password });
            localStorage.setItem('token', res.data.token);
            localStorage.setItem('user', JSON.stringify(res.data.user));
            onLogin();
        } catch (err) {
            setError(err.response?.data?.message || 'Login failed');
        } finally {
            setLoading(false);
        }
    };

    // Component render presentation logic displaying the centered card layout
    return (
        <div className="login-page-container">
            <style>{`
                .login-page-container {
                    background-color: #f8fafc !important;
                    min-height: 100vh;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: 'Inter', sans-serif;
                    width: 100%;
                }
                .login-card {
                    background: #ffffff !important;
                    border-radius: 16px !important;
                    border: none !important;
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
                    width: 100%;
                    max-width: 440px;
                    padding: 40px !important;
                    text-align: center;
                }
                .login-logo-circle {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 64px;
                    height: 64px;
                    background-color: #e8f0fe !important;
                    border-radius: 50% !important;
                    margin-bottom: 24px;
                    color: #1a73e8 !important;
                }
                .login-title {
                    font-size: 24px;
                    font-weight: 700;
                    color: #1e293b !important;
                    margin-bottom: 6px;
                }
                .login-subtitle {
                    font-size: 13px;
                    color: #64748b !important;
                    margin-bottom: 0px;
                }
                .login-field-group {
                    margin-bottom: 20px;
                    text-align: left;
                }
                .login-label {
                    font-size: 13px;
                    font-weight: 600;
                    color: #475569 !important;
                    margin-bottom: 6px;
                    display: block;
                }
                .login-input {
                    background-color: #ffffff !important;
                    border: 1px solid #e2e8f0 !important;
                    color: #1e293b !important;
                    font-size: 14px !important;
                    padding: 10px 14px !important;
                    border-radius: 8px !important;
                    width: 100% !important;
                    margin-bottom: 0px !important;
                    height: auto !important;
                    box-shadow: none !important;
                    transition: border-color 0.2s, box-shadow 0.2s;
                }
                .login-input:focus {
                    border-color: #1a73e8 !important;
                    outline: none !important;
                    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15) !important;
                }
                .login-input::placeholder {
                    color: #94a3b8 !important;
                }
                .login-btn {
                    background-color: #1a73e8 !important;
                    border: none !important;
                    color: #ffffff !important;
                    font-weight: 600 !important;
                    font-size: 14px !important;
                    padding: 12px 24px !important;
                    border-radius: 8px !important;
                    width: 100% !important;
                    transition: background-color 0.2s;
                    margin-top: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .login-btn:hover {
                    background-color: #1557b0 !important;
                }
                .login-btn:disabled {
                    background-color: #bfdbfe !important;
                }
            `}</style>

            <div className="login-card">
                <div className="login-logo-circle">
                    <Car size={32} />
                </div>
                <h2 className="login-title">Admin Portal</h2>
                <p className="login-subtitle mb-4">Car Rental Management System</p>

                {error && (
                    <div className="alert alert-danger py-2 text-center small mb-4" role="alert">
                        {error}
                    </div>
                )}

                <form onSubmit={handleSubmit}>
                    <div className="login-field-group">
                        <label className="login-label">Email Address</label>
                        <input
                            type="email"
                            className="login-input"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            required
                            placeholder="admin@carrental.com"
                        />
                    </div>

                    <div className="login-field-group">
                        <label className="login-label">Password</label>
                        <input
                            type="password"
                            className="login-input"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                            placeholder="••••••••"
                        />
                    </div>

                    <button
                        type="submit"
                        className="login-btn"
                        disabled={loading}
                    >
                        {loading ? (
                            <>
                                <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                Logging in...
                            </>
                        ) : (
                            'Sign In'
                        )}
                    </button>
                </form>
            </div>
        </div>
    );
};

export default Login;